WIP: address PR #475 review feedback

frontend/scripts/help-assets.test.ts

@@ -1,9 +1,10 @@
 import { mkdir, mkdtemp, rm, writeFile } from 'node:fs/promises'
 import { tmpdir } from 'node:os'
 import path from 'node:path'
+import { createServer } from 'vite'
 import { afterAll, afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { generateHelpAssets } from './help-assets'
+import { generateHelpAssets, helpAssets } from './help-assets'
 
 import type { ArticleMeta, HelpChange, HelpSearchEntry, HelpTitleIndex } from '@/lib/help'
 
@@ -109,4 +110,22 @@ describe ('Build-time Help assets', () => {
   it ('rejects an empty Help checkout', async () => {
     await expect (generateHelpAssets (root)).rejects.toThrow ('No Help articles found')
   })
+
+  it ('defers missing Help errors until a Help module is requested', async () => {
+    const server = await createServer ({
+	configFile: false,
+	root,
+	plugins: [helpAssets ()],
+	server: { middlewareMode: true, watch: null } })
+    try
+    {
+      await server.pluginContainer.buildStart ({})
+      await expect (server.pluginContainer.load ('\0virtual:help/articles'))
+	  .rejects.toThrow ('ENOENT')
+    }
+    finally
+    {
+      await server.close ()
+    }
+  })
 })

frontend/scripts/help-assets.ts

@@ -159,10 +159,9 @@ export const helpAssets = (): Plugin => {
       configResolved (config) {
 	state.root = path.resolve (config.root, 'help')
       },
-      async buildStart () {
-	state.data = generateHelpAssets (state.root)
-	const generated = await data ()
-	generated.files.forEach (file => this.addWatchFile (file))
+      buildStart () {
+	state.data = undefined
+	this.addWatchFile (state.root)
       },
       resolveId (id) {
 	return id.startsWith (prefix) ? `\0${ id }` : null
@@ -170,7 +169,9 @@ export const helpAssets = (): Plugin => {
       async load (id) {
 	if (!(id.startsWith (`\0${ prefix }`)))
 	  return null
-	const source = (await data ()).modules.get (id.slice (1))
+	const generated = await data ()
+	generated.files.forEach (file => this.addWatchFile (file))
+	const source = generated.modules.get (id.slice (1))
 	if (source == null)
 	  throw new Error (`Unknown Help asset: ${ id.slice (1) }`)
 	return source

frontend/src/components/common/Pagination.tsx

@@ -61,7 +61,7 @@ const Pagination: FC<Props> = ({ page, totalPages, siblingCount = 3 }) => {
   const pages = getPages (page, totalPages, siblingCount)
 
   return (
-      <nav className="mt-4 flex justify-center"
+      <nav className="pagination mt-4 flex justify-center"
 	  lang={message ('pagination.label').language}
 	  aria-label={message ('pagination.label').text}>
 	<div className="flex items-center gap-2">

frontend/src/config.test.ts

@@ -0,0 +1,9 @@
+import { describe, expect, it } from 'vitest'
+
+import { API_BASE_URL } from '@/config'
+
+describe ('test API configuration', () => {
+  it ('resolves the sample configuration without a local config file', () => {
+    expect (API_BASE_URL).toBe ('/api')
+  })
+})

frontend/src/index.css

@@ -876,8 +876,10 @@ html:lang(mn-Mong) .text-right
 
 [data-vertical-preview] .posts-main-area > div > div:first-child
 {
-  flex-direction: column;
-  justify-content: flex-start;
+  flex: none;
+  flex-direction: row;
+  justify-content: space-between;
+  height: 100%;
   writing-mode: vertical-lr;
   text-orientation: mixed;
 }
@@ -916,6 +918,12 @@ html:lang(mn-Mong) .text-right
   writing-mode: vertical-lr;
 }
 
+[data-vertical-preview] .main-area[data-vertical-content] .pagination
+{
+  align-self: stretch;
+  inline-size: 100%;
+}
+
 [data-vertical-preview] .tags-main-area
 {
   display: flex;
@@ -1122,7 +1130,7 @@ html:lang(mn-Mong) .text-right
   {
     flex-direction: column;
     flex: none;
-    width: 7rem;
+    width: 3.5rem;
     height: 100%;
     padding: .5rem;
     gap: .5rem;
@@ -1142,8 +1150,8 @@ html:lang(mn-Mong) .text-right
   {
     writing-mode: vertical-lr;
     text-orientation: mixed;
-    max-height: 9rem;
-    white-space: normal;
+    max-height: none;
+    white-space: nowrap;
     margin-block: .5rem;
   }
 
@@ -1173,8 +1181,8 @@ html:lang(mn-Mong) .text-right
   {
     writing-mode: vertical-lr;
     text-orientation: mixed;
-    max-height: 9rem;
-    white-space: normal;
+    max-height: none;
+    white-space: nowrap;
   }
 
   [data-vertical-preview] .top-nav-highlight

frontend/vitest.config.ts

@@ -1,3 +1,4 @@
+import path from 'node:path'
 import { defineConfig, mergeConfig } from 'vitest/config'
 
 import viteConfig from './vite.config'
@@ -6,7 +7,9 @@ import viteConfig from './vite.config'
 export default mergeConfig (
     viteConfig,
     defineConfig ({
-	test: { environment:  'jsdom',
+	test: { alias: {
+		    '@/config': path.resolve (__dirname, './src/config.sample.ts') },
+		environment:  'jsdom',
 		testTimeout: 30_000,
 		exclude: ['**/node_modules/**', '**/dist/**', 'server.ssr.test.mjs'],
 		setupFiles:   './src/test/setup.ts',