@life-and-dev/mdsite 0.2.1 → 0.3.0

package/mdsite-nuxt/scripts/generate-favicons.test.ts

@@ -0,0 +1,177 @@
+import path from 'node:path'
+import os from 'node:os'
+import fs from 'node:fs'
+import { fileURLToPath } from 'node:url'
+
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+
+import { generateFavicons, generateWebManifest, resolveFaviconSource } from './generate-favicons.js'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const DEFAULT_FAVICON_PATH = path.resolve(__dirname, '..', 'assets', 'default-favicon.svg')
+
+describe('generate-favicons', () => {
+  let tmpDir: string
+
+  beforeEach(() => {
+    tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'mdsite-favicon-'))
+  })
+
+  afterEach(() => {
+    fs.rmSync(tmpDir, { recursive: true, force: true })
+  })
+
+  describe('resolveFaviconSource', () => {
+    it('falls back to the bundled default favicon when favicon is an empty string', () => {
+      const result = resolveFaviconSource(tmpDir, '')
+
+      expect(result).not.toBeNull()
+      expect(result!.isDefault).toBe(true)
+      expect(path.basename(result!.sourcePath)).toBe('default-favicon.svg')
+      expect(fs.existsSync(result!.sourcePath)).toBe(true)
+    })
+
+    it('falls back to the bundled default favicon when favicon is only whitespace', () => {
+      const result = resolveFaviconSource(tmpDir, '   ')
+
+      expect(result).not.toBeNull()
+      expect(result!.isDefault).toBe(true)
+      expect(path.basename(result!.sourcePath)).toBe('default-favicon.svg')
+    })
+
+    it('uses the configured source when the favicon file exists under the content dir', () => {
+      const relPath = 'favicon.svg'
+      const absPath = path.join(tmpDir, relPath)
+      const customSvg =
+        '<?xml version="1.0" encoding="UTF-8"?>' +
+        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">' +
+        '<rect width="16" height="16" fill="red"/></svg>'
+      fs.writeFileSync(absPath, customSvg, 'utf8')
+
+      const result = resolveFaviconSource(tmpDir, relPath)
+
+      expect(result).not.toBeNull()
+      expect(result!.isDefault).toBe(false)
+      expect(result!.sourcePath).toBe(path.resolve(tmpDir, relPath))
+    })
+
+    it('falls back to the bundled default favicon when the configured file does not exist', () => {
+      const result = resolveFaviconSource(tmpDir, 'does-not-exist.svg')
+
+      expect(result).not.toBeNull()
+      expect(result!.isDefault).toBe(true)
+      expect(path.basename(result!.sourcePath)).toBe('default-favicon.svg')
+      expect(fs.existsSync(result!.sourcePath)).toBe(true)
+    })
+  })
+
+  describe('generateFavicons', () => {
+    it('uses the bundled default favicon and writes all expected assets when config.favicon is empty', async () => {
+      const outputDir = path.join(tmpDir, 'output')
+
+      const ok = await generateFavicons({
+        contentDir: tmpDir,
+        config: { favicon: '' },
+        outputDir,
+      })
+
+      expect(ok).toBe(true)
+
+      const expectedFiles = [
+        'favicon.svg',
+        'favicon.ico',
+        'apple-touch-icon.png',
+        'icon-192.png',
+        'icon-512.png',
+      ]
+      for (const file of expectedFiles) {
+        const filePath = path.join(outputDir, file)
+        expect(fs.existsSync(filePath)).toBe(true)
+        expect(fs.statSync(filePath).size).toBeGreaterThan(0)
+      }
+
+      // The default source svg is copied verbatim as favicon.svg
+      const defaultSvgContent = fs.readFileSync(DEFAULT_FAVICON_PATH, 'utf8')
+      const writtenSvgContent = fs.readFileSync(path.join(outputDir, 'favicon.svg'), 'utf8')
+      expect(writtenSvgContent).toBe(defaultSvgContent)
+    })
+
+    it('uses the configured custom source svg over the bundled default', async () => {
+      const outputDir = path.join(tmpDir, 'output')
+      const customSvg =
+        '<?xml version="1.0" encoding="UTF-8"?>' +
+        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">' +
+        '<rect width="16" height="16" fill="blue"/></svg>'
+      fs.writeFileSync(path.join(tmpDir, 'favicon.svg'), customSvg, 'utf8')
+
+      const ok = await generateFavicons({
+        contentDir: tmpDir,
+        config: { favicon: 'favicon.svg' },
+        outputDir,
+      })
+
+      expect(ok).toBe(true)
+
+      const writtenSvgContent = fs.readFileSync(path.join(outputDir, 'favicon.svg'), 'utf8')
+      expect(writtenSvgContent).toBe(customSvg)
+
+      // And it is NOT the bundled default
+      const defaultSvgContent = fs.readFileSync(DEFAULT_FAVICON_PATH, 'utf8')
+      expect(writtenSvgContent).not.toBe(defaultSvgContent)
+    })
+  })
+
+  describe('generateWebManifest', () => {
+    it('writes manifest with theme colors from config when name and themes are provided', async () => {
+      const outputDir = path.join(tmpDir, 'output')
+
+      await generateWebManifest({
+        name: 'My Site',
+        themes: {
+          light: { colors: { primary: '#abcdef', surface: '#fedcba' } },
+          dark: { colors: {} },
+        },
+        outputDir,
+      })
+
+      const manifestPath = path.join(outputDir, 'site.webmanifest')
+      expect(fs.existsSync(manifestPath)).toBe(true)
+      const written = JSON.parse(fs.readFileSync(manifestPath, 'utf8'))
+      expect(written).toEqual({
+        name: 'My Site',
+        short_name: 'My Site',
+        icons: [
+          { src: 'icon-192.png', sizes: '192x192', type: 'image/png' },
+          { src: 'icon-512.png', sizes: '512x512', type: 'image/png' },
+        ],
+        theme_color: '#abcdef',
+        background_color: '#fedcba',
+        display: 'standalone',
+      })
+    })
+
+    it('falls back to safe defaults when themes are missing colors', async () => {
+      const outputDir = path.join(tmpDir, 'output')
+
+      await generateWebManifest({
+        name: 'No Themes',
+        themes: { light: { colors: {} }, dark: { colors: {} } },
+        outputDir,
+      })
+
+      const written = JSON.parse(fs.readFileSync(path.join(outputDir, 'site.webmanifest'), 'utf8'))
+      expect(written.theme_color).toBe('#000000')
+      expect(written.background_color).toBe('#ffffff')
+    })
+
+    it('falls back to safe defaults when themes are not provided at all', async () => {
+      const outputDir = path.join(tmpDir, 'output')
+
+      await generateWebManifest({ name: 'No Themes', outputDir })
+
+      const written = JSON.parse(fs.readFileSync(path.join(outputDir, 'site.webmanifest'), 'utf8'))
+      expect(written.theme_color).toBe('#000000')
+      expect(written.background_color).toBe('#ffffff')
+    })
+  })
+})

package/mdsite-nuxt/scripts/generate-favicons.ts

@@ -3,12 +3,14 @@
 import sharp from 'sharp'
 import fs from 'fs-extra'
 import path from 'path'
-import { fileURLToPath } from 'url'
-import { loadMdsiteConfigSync, resolveMdsiteConfigPath } from '../utils/mdsite-config.js'
+import { fileURLToPath } from 'node:url'
+import { loadMdsiteConfigSync, resolveMdsiteConfigPath, type MdsiteConfig } from '../utils/mdsite-config.js'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
 
+const DEFAULT_FAVICON_PATH = fileURLToPath(new URL('../assets/default-favicon.svg', import.meta.url))
+
 const FAVICON_SIZES = {
   ico: [16, 32],
   appleTouchIcon: 180,
@@ -16,28 +18,56 @@ const FAVICON_SIZES = {
   pwaIcon512: 512
 } as const
 
+export function resolveFaviconSource(
+  contentDir: string,
+  favicon: string,
+): { sourcePath: string; isDefault: boolean } | null {
+  if (typeof favicon === 'string' && favicon.trim().length > 0) {
+    const candidate = path.resolve(contentDir, favicon)
+    if (fs.pathExistsSync(candidate)) {
+      return { sourcePath: candidate, isDefault: false }
+    }
+  }
+
+  if (fs.pathExistsSync(DEFAULT_FAVICON_PATH)) {
+    return { sourcePath: DEFAULT_FAVICON_PATH, isDefault: true }
+  }
+
+  return null
+}
+
+export interface GenerateFaviconsOptions {
+  contentDir?: string
+  config?: { favicon?: string; site?: { name?: string } }
+  outputDir?: string
+}
+
 /**
  * Generate favicons from the active mdsite config
  */
-export async function generateFavicons(): Promise<boolean> {
-  const { contentDir, config } = loadMdsiteConfigSync()
+export async function generateFavicons(options: GenerateFaviconsOptions = {}): Promise<boolean> {
+  const resolved = options.contentDir && options.config
+    ? { contentDir: options.contentDir, config: options.config }
+    : loadMdsiteConfigSync()
+  const { contentDir, config } = resolved
+  const siteName = (config as { site?: { name?: string } }).site?.name ?? 'site'
 
-  if (!config.favicon || !config.favicon.trim()) {
-    console.warn(`⚠️ No favicon source configured (config.favicon is empty). Skipping favicon generation.`)
-    return false
-  }
+  const resolvedSource = resolveFaviconSource(contentDir, config.favicon ?? '')
 
-  const sourcePath = path.resolve(contentDir, config.favicon)
-
-  if (!await fs.pathExists(sourcePath)) {
-    console.error(`❌ Favicon source not found: ${sourcePath}`)
+  if (!resolvedSource) {
+    console.error('❌ No favicon source available (configured source missing AND bundled default not found).')
     return false
   }
 
-  const publicDir = path.resolve(__dirname, '..', 'public')
+  const { sourcePath } = resolvedSource
+  const publicDir = options.outputDir ?? path.resolve(__dirname, '..', 'public')
   await fs.ensureDir(publicDir)
 
-  console.log(`🎨 Generating favicons for site: ${config.site.name}`)
+  if (resolvedSource.isDefault) {
+    console.log('ℹ️ No favicon source configured (config.favicon empty or file not found). Using bundled default favicon.')
+  }
+
+  console.log(`🎨 Generating favicons for site: ${siteName}`)
   console.log(`   Source: ${sourcePath}`)
   console.log(`   Output: ${publicDir}`)
 
@@ -92,25 +122,38 @@ export async function generateFavicons(): Promise<boolean> {
       .toFile(icon512Path)
     console.log(`   ✓ PWA Icon 512: icon-512.png`)
 
-    console.log(`✅ Favicons generated successfully for ${config.site.name}\n`)
+    console.log(`✅ Favicons generated successfully for ${siteName}\n`)
     return true
   } catch (error) {
-    console.error(`❌ Failed to generate favicons for ${config.site.name}:`, error)
+    console.error(`❌ Failed to generate favicons for ${siteName}:`, error)
     return false
   }
 }
 
+export interface GenerateWebManifestOptions {
+  name?: string
+  themes?: MdsiteConfig['themes']
+  outputDir?: string
+}
+
 /**
- * Generate web manifest for PWA support
+ * Generate web manifest for PWA support.
+ * Theme/background colors are taken from the light theme in mdsite.yml
+ * to match the existing `<meta name="theme-color" media="(prefers-color-scheme: light)">` tag.
+ * The web manifest spec only supports a single `theme_color`, so light values are used.
  */
-export async function generateWebManifest(name: string) {
-  const projectRoot = path.resolve(__dirname, '..')
-  const publicDir = path.join(projectRoot, 'public')
-  const manifestPath = path.join(publicDir, 'site.webmanifest')
+export async function generateWebManifest(options: GenerateWebManifestOptions = {}): Promise<void> {
+  const siteName = options.name ?? 'site'
+  const themeColor = options.themes?.light?.colors?.primary ?? '#000000'
+  const backgroundColor = options.themes?.light?.colors?.surface ?? '#ffffff'
+
+  const outputDir = options.outputDir ?? path.resolve(__dirname, '..', 'public')
+  await fs.ensureDir(outputDir)
+  const manifestPath = path.join(outputDir, 'site.webmanifest')
 
   const manifest = {
-    name: name,
-    short_name: name,
+    name: siteName,
+    short_name: siteName,
     icons: [
       {
         src: 'icon-192.png',
@@ -123,13 +166,13 @@ export async function generateWebManifest(name: string) {
         type: 'image/png'
       }
     ],
-    theme_color: '#ffffff',
-    background_color: '#ffffff',
+    theme_color: themeColor,
+    background_color: backgroundColor,
     display: 'standalone'
   }
 
   await fs.writeJson(manifestPath, manifest, { spaces: 2 })
-  console.log(`📱 Web manifest generated: site.webmanifest\n`)
+  console.log(`📱 Web manifest generated: site.webmanifest (theme_color=${themeColor})\n`)
 }
 
 /**
@@ -153,7 +196,7 @@ if (import.meta.url === `file://${process.argv[1]}`) {
     ; (async () => {
       const success = await generateFavicons()
       if (success) {
-        await generateWebManifest(config.site.name)
+        await generateWebManifest({ name: config.site.name, themes: config.themes })
       } else {
         process.exit(1)
       }

package/mdsite-nuxt/scripts/renderer-hooks.test.ts

@@ -87,7 +87,20 @@ describe('renderer hooks orchestration', () => {
 
     resolveMdsiteConfigPathMock.mockReturnValue('/renderer/mdsite.yml')
     loadMdsiteConfigSyncMock.mockReturnValue({
-      config: { site: { name: 'Docs' } },
+      config: {
+        site: { name: 'Docs' },
+        themes: {
+          light: {
+            colors: {
+              primary: '#abcdef',
+              surface: '#fedcba',
+            },
+          },
+          dark: {
+            colors: {},
+          },
+        },
+      },
       configPath: '/renderer/mdsite.yml',
       contentDir: '/renderer/docs',
     })
@@ -117,7 +130,13 @@ describe('renderer hooks orchestration', () => {
       contentPath: '/input/docs',
     })
     expect(runtime).toEqual({
-      config: { site: { name: 'Docs' } },
+      config: {
+        site: { name: 'Docs' },
+        themes: {
+          light: { colors: { primary: '#abcdef', surface: '#fedcba' } },
+          dark: { colors: {} },
+        },
+      },
       configPath: '/renderer/mdsite.yml',
       contentDir: '/renderer/docs',
       rootDir: '/renderer',
@@ -233,6 +252,15 @@ describe('renderer hooks orchestration', () => {
     expect(syncContentMock).not.toHaveBeenCalled()
     expect(buildContentDataMock).not.toHaveBeenCalled()
     expect(generateFaviconsMock).not.toHaveBeenCalled()
+    expect(generateWebManifestMock).toHaveBeenCalledTimes(1)
+    expect(generateWebManifestMock).toHaveBeenCalledWith(expect.objectContaining({
+      name: 'Docs',
+      themes: expect.objectContaining({
+        light: expect.objectContaining({
+          colors: expect.objectContaining({ primary: '#abcdef' }),
+        }),
+      }),
+    }))
     expect(process.env.MDSITE_RENDERER_ORCHESTRATED).toBe('1')
     expect(runtime.contentDir).toBe('/renderer/docs')
   })
@@ -243,6 +271,7 @@ describe('renderer hooks orchestration', () => {
     expect(rmMock).not.toHaveBeenCalled()
     expect(startWatcherMock).toHaveBeenCalledTimes(1)
     expect(syncContentMock).not.toHaveBeenCalled()
+    expect(generateWebManifestMock).toHaveBeenCalledTimes(1)
   })
 
   it('runs non-dev setup hooks in orchestration order and publishes favicon assets on success', async () => {
@@ -251,7 +280,14 @@ describe('renderer hooks orchestration', () => {
     expect(syncContentMock).toHaveBeenCalledTimes(1)
     expect(buildContentDataMock).toHaveBeenCalledTimes(1)
     expect(generateFaviconsMock).toHaveBeenCalledTimes(1)
-    expect(generateWebManifestMock).toHaveBeenCalledWith('Docs')
+    expect(generateWebManifestMock).toHaveBeenCalledWith(expect.objectContaining({
+      name: 'Docs',
+      themes: expect.objectContaining({
+        light: expect.objectContaining({
+          colors: expect.objectContaining({ primary: '#abcdef' }),
+        }),
+      }),
+    }))
     expect(syncContentMock.mock.invocationCallOrder[0]).toBeLessThan(buildContentDataMock.mock.invocationCallOrder[0])
     expect(buildContentDataMock.mock.invocationCallOrder[0]).toBeLessThan(generateFaviconsMock.mock.invocationCallOrder[0])
     expect(process.env.MDSITE_RENDERER_ORCHESTRATED).toBe('1')
@@ -263,7 +299,14 @@ describe('renderer hooks orchestration', () => {
     expect(syncContentMock).toHaveBeenCalledTimes(1)
     expect(buildContentDataMock).toHaveBeenCalledTimes(1)
     expect(generateFaviconsMock).toHaveBeenCalledTimes(1)
-    expect(generateWebManifestMock).toHaveBeenCalledWith('Docs')
+    expect(generateWebManifestMock).toHaveBeenCalledWith(expect.objectContaining({
+      name: 'Docs',
+      themes: expect.objectContaining({
+        light: expect.objectContaining({
+          colors: expect.objectContaining({ primary: '#abcdef' }),
+        }),
+      }),
+    }))
     expect(startWatcherMock).not.toHaveBeenCalled()
     expect(rmMock).not.toHaveBeenCalled()
     expect(process.env.MDSITE_RENDERER_ORCHESTRATED).toBe('1')
@@ -282,7 +325,7 @@ describe('renderer hooks orchestration', () => {
   it('runs build fallback hooks without publishing favicon assets when generation reports no output', async () => {
     generateFaviconsMock.mockResolvedValue(false)
 
-    await runBuildFallbackHooks('Docs')
+    await runBuildFallbackHooks({ site: { name: 'Docs' }, themes: { light: { colors: {} }, dark: { colors: {} } } } as any)
 
     expect(buildContentDataMock).toHaveBeenCalledTimes(1)
     expect(generateFaviconsMock).toHaveBeenCalledTimes(1)

package/mdsite-nuxt/scripts/renderer-hooks.ts

@@ -5,7 +5,7 @@ import YAML from 'yaml'
 import { buildContentData } from './generate-indices.js'
 import { generateFavicons, generateWebManifest } from './generate-favicons.js'
 import { startWatcher, syncContent } from './sync-content.js'
-import { loadMdsiteConfigSync, resolveMdsiteConfigPath } from '../utils/mdsite-config.js'
+import { loadMdsiteConfigSync, resolveMdsiteConfigPath, type MdsiteConfig } from '../utils/mdsite-config.js'
 
 export interface RendererRuntime {
   config: ReturnType<typeof loadMdsiteConfigSync>['config']
@@ -69,7 +69,7 @@ export async function runSetupHooks(mode: 'setup' | 'build' | 'generate' | 'dev'
     if (!options.cached) {
       await fs.promises.rm(path.join(rootDir, '.data'), { recursive: true, force: true })
     }
-
+    await generateDevManifestAssets(runtime.config)
     process.env.MDSITE_RENDERER_ORCHESTRATED = '1'
     await startWatcher()
     return runtime
@@ -78,28 +78,32 @@ export async function runSetupHooks(mode: 'setup' | 'build' | 'generate' | 'dev'
   await syncContent()
   console.log(`\n🔨 Generating navigation and search index...`)
   await buildContentData()
-  await generateFaviconAssets(runtime.config.site.name)
+  await generateFaviconAssets(runtime.config)
   process.env.MDSITE_RENDERER_ORCHESTRATED = '1'
 
   return runtime
 }
 
-export async function runBuildFallbackHooks(siteName: string): Promise<void> {
+export async function runBuildFallbackHooks(config: MdsiteConfig): Promise<void> {
   console.log(`\n🔨 Generating navigation and search index...`)
   await buildContentData()
-  await generateFaviconAssets(siteName)
+  await generateFaviconAssets(config)
 }
 
-async function generateFaviconAssets(siteName: string): Promise<void> {
+async function generateFaviconAssets(config: MdsiteConfig): Promise<void> {
   console.log(`\n🎨 Generating favicons for build...`)
   const success = await generateFavicons()
 
   if (success) {
-    await generateWebManifest(siteName)
-    console.log(`✅ Favicons ready for ${siteName}\n`)
+    await generateWebManifest({ name: config.site.name, themes: config.themes })
+    console.log(`✅ Favicons ready for ${config.site.name}\n`)
   }
 }
 
+async function generateDevManifestAssets(config: MdsiteConfig): Promise<void> {
+  await generateWebManifest({ name: config.site.name, themes: config.themes })
+}
+
 function ensureLegacyCompatibilityConfig(rootDir: string): string | undefined {
   const legacyConfigPath = path.join(rootDir, 'content.config.yml')
 

package/mdsite-nuxt/utils/mdsite-config.ts

@@ -164,7 +164,8 @@ export function resolveContentDir(options: {
 
   if (resolvedConfigPath) {
     const configDir = path.dirname(resolvedConfigPath);
-    return typeof rawConfig.content?.path === 'string' ? path.resolve(configDir, rawConfig.content.path) : configDir;
+    const contentPath = resolveContentConfigPath(rawConfig.content);
+    return contentPath ? path.resolve(configDir, contentPath) : configDir;
   }
 
   if (options.searchFrom) {
@@ -174,6 +175,24 @@ export function resolveContentDir(options: {
   return process.cwd();
 }
 
+/**
+ * Extract the content path from either the shorthand string form
+ * (`content: docs`) or the explicit object form (`content:\n  path: docs`).
+ * Returns undefined when no usable path is configured.
+ */
+function resolveContentConfigPath(rawContent: unknown): string | undefined {
+  if (typeof rawContent === 'string') {
+    const trimmed = rawContent.trim();
+    return trimmed.length > 0 ? trimmed : undefined;
+  }
+
+  if (rawContent && typeof rawContent === 'object' && typeof (rawContent as { path?: unknown }).path === 'string') {
+    return (rawContent as { path: string }).path;
+  }
+
+  return undefined;
+}
+
 function createDefaultMdsiteConfig(siteName: string): MdsiteConfig {
   return {
     favicon: '',
@@ -204,6 +223,7 @@ function createDefaultMdsiteConfig(siteName: string): MdsiteConfig {
 
 function normalizeMdsiteConfig(rawConfig: Record<string, any>, contentDir: string): MdsiteConfig {
   const fallbackConfig = createDefaultMdsiteConfig(path.basename(contentDir) || 'Site');
+  const contentPath = resolveContentConfigPath(rawConfig.content);
 
   return {
     favicon: typeof rawConfig.favicon === 'string' ? rawConfig.favicon : fallbackConfig.favicon,
@@ -211,7 +231,7 @@ function normalizeMdsiteConfig(rawConfig: Record<string, any>, contentDir: strin
       bibleTooltips: rawConfig.features?.bibleTooltips ?? fallbackConfig.features.bibleTooltips,
       sourceEdit: rawConfig.features?.sourceEdit ?? fallbackConfig.features.sourceEdit
     },
-    content: typeof rawConfig.content?.path === 'string' ? { path: rawConfig.content.path } : fallbackConfig.content,
+    content: contentPath ? { path: contentPath } : fallbackConfig.content,
     menu: Array.isArray(rawConfig.menu) ? rawConfig.menu : fallbackConfig.menu,
     server: {
       output: typeof rawConfig.server?.output === 'string' ? rawConfig.server.output : fallbackConfig.server.output,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@life-and-dev/mdsite",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "type": "module",
   "private": false,
   "description": "Local-first CLI that orchestrates mdsite-nuxt",