@life-and-dev/mdsite 0.2.1 → 0.2.3

package/mdsite-nuxt/app/pages/[...slug].vue

@@ -15,6 +15,7 @@
 </template>
 
 <script setup lang="ts">
+import { withBasePath } from '../../utils/base-url'
 const route = useRoute()
 
 // Query content using Nuxt Content v3 API
@@ -29,6 +30,7 @@ const { data: page, pending } = await useAsyncData(
 const siteConfig = useSiteConfig()
 const title = page.value?.title || 'Page'
 const description = page.value?.description || ''
+const appBaseURL = useRuntimeConfig().app.baseURL
 
 useHead(() => ({
   title,
@@ -42,9 +44,9 @@ useHead(() => ({
     // Open Graph
     { property: 'og:title', content: title },
     { property: 'og:description', content: description },
-    { property: 'og:url', content: `${siteConfig.siteCanonical}${route.path}` },
+    { property: 'og:url', content: siteConfig.siteCanonical ? `${siteConfig.siteCanonical}${route.path}` : withBasePath(route.path, appBaseURL) },
     { property: 'og:type', content: 'article' },
-    { property: 'og:image', content: '/icon-512.png' }
+    { property: 'og:image', content: withBasePath('/icon-512.png', appBaseURL) }
   ],
   link: [
     ...(siteConfig.siteCanonical ? [{ rel: 'canonical', href: `${siteConfig.siteCanonical}${route.path}` }] : [])

package/mdsite-nuxt/app/pages/index.vue

@@ -15,6 +15,7 @@
 </template>
 
 <script setup lang="ts">
+import { withBasePath } from '../../utils/base-url'
 // Query home page content using Nuxt Content v3 API
 // server: true = Only query during SSR/prerendering, never on client
 // This prevents 3.5MB database download - client uses prerendered HTML
@@ -27,6 +28,7 @@ const { data: page, pending } = await useAsyncData(
 const siteConfig = useSiteConfig()
 const title = page.value?.title || siteConfig.siteName || 'Home'
 const description = page.value?.description || ''
+const appBaseURL = useRuntimeConfig().app.baseURL
 
 useHead(() => ({
   title,
@@ -40,9 +42,9 @@ useHead(() => ({
     // Open Graph
     { property: 'og:title', content: title },
     { property: 'og:description', content: description },
-    { property: 'og:url', content: siteConfig.siteCanonical },
+    { property: 'og:url', content: siteConfig.siteCanonical || withBasePath('/', appBaseURL) },
     { property: 'og:type', content: 'website' },
-    { property: 'og:image', content: '/icon-512.png' }
+    { property: 'og:image', content: withBasePath('/icon-512.png', appBaseURL) }
   ],
   link: [
     ...(siteConfig.siteCanonical ? [{ rel: 'canonical', href: siteConfig.siteCanonical }] : [])

package/mdsite-nuxt/assets/default-favicon.svg

@@ -0,0 +1,223 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="348.061"
+   height="340"
+   viewBox="0 0 34.8061 34"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.3 (1:1.4.3+202512261035+0d15f75042)"
+   sodipodi:docname="logo.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="px"
+     showgrid="true"
+     inkscape:zoom="2.9179688"
+     inkscape:cx="181.11914"
+     inkscape:cy="144.27844"
+     inkscape:window-width="3032"
+     inkscape:window-height="1696"
+     inkscape:window-x="40"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <inkscape:grid
+       id="grid1"
+       units="px"
+       originx="1.2100008"
+       originy="1"
+       spacingx="1"
+       spacingy="1"
+       empcolor="#0099e5"
+       empopacity="0.30196078"
+       color="#0099e5"
+       opacity="0.14901961"
+       empspacing="5"
+       enabled="true"
+       visible="true" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1">
+    <linearGradient
+       id="linearGradient12"
+       inkscape:collect="always">
+      <stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0"
+         id="stop13" />
+      <stop
+         style="stop-color:#000000;stop-opacity:0;"
+         offset="1"
+         id="stop14" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient4"
+       inkscape:collect="always">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0.49735323"
+         id="stop5" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.75119454;"
+         offset="1"
+         id="stop6" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3"
+       inkscape:collect="always">
+      <stop
+         style="stop-color:#f9f9f9;stop-opacity:1;"
+         offset="0.49600685"
+         id="stop3" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0.7457487;"
+         offset="1"
+         id="stop4" />
+    </linearGradient>
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3"
+       id="radialGradient4"
+       cx="10.5"
+       cy="16"
+       fx="10.5"
+       fy="16"
+       r="10.5"
+       gradientTransform="matrix(1,0,0,1.3333333,0,-5.3333333)"
+       gradientUnits="userSpaceOnUse" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4"
+       id="radialGradient6"
+       cx="24.514727"
+       cy="12"
+       fx="24.514727"
+       fy="12"
+       r="7.5147257"
+       gradientTransform="matrix(1,0,0,1.3307206,0,-3.9686472)"
+       gradientUnits="userSpaceOnUse" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient12"
+       id="radialGradient14"
+       cx="16"
+       cy="16"
+       fx="16"
+       fy="16"
+       r="16"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.0624999,0,0,1.0624999,0.21000074,0)" />
+    <filter
+       style="color-interpolation-filters:sRGB"
+       inkscape:label="Drop Shadow"
+       id="filter66"
+       x="-0.057619048"
+       y="-0.055841193"
+       width="1.132074"
+       height="1.1384681">
+      <feFlood
+         result="flood"
+         in="SourceGraphic"
+         flood-opacity="0.498039"
+         flood-color="rgb(0,0,0)"
+         id="feFlood65" />
+      <feGaussianBlur
+         result="blur"
+         in="SourceGraphic"
+         stdDeviation="0.400000"
+         id="feGaussianBlur65" />
+      <feOffset
+         result="offset"
+         in="blur"
+         dx="0.000000"
+         dy="1.000000"
+         id="feOffset65" />
+      <feComposite
+         result="comp1"
+         operator="in"
+         in="flood"
+         in2="offset"
+         id="feComposite65" />
+      <feComposite
+         result="comp2"
+         operator="over"
+         in="SourceGraphic"
+         in2="comp1"
+         id="feComposite66" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB"
+       inkscape:label="Drop Shadow"
+       id="filter68"
+       x="-0.10403264"
+       y="-0.060500001"
+       width="1.2082745"
+       height="1.171">
+      <feFlood
+         result="flood"
+         in="SourceGraphic"
+         flood-opacity="0.498039"
+         flood-color="rgb(0,0,0)"
+         id="feFlood66" />
+      <feGaussianBlur
+         result="blur"
+         in="SourceGraphic"
+         stdDeviation="0.400000"
+         id="feGaussianBlur66" />
+      <feOffset
+         result="offset"
+         in="blur"
+         dx="0.000000"
+         dy="1.000000"
+         id="feOffset66" />
+      <feComposite
+         result="comp1"
+         operator="in"
+         in="flood"
+         in2="offset"
+         id="feComposite67" />
+      <feComposite
+         result="comp2"
+         operator="over"
+         in="SourceGraphic"
+         in2="comp1"
+         id="feComposite68" />
+    </filter>
+  </defs>
+  <rect
+     style="display:inline;fill:url(#radialGradient14);stroke:none;stroke-width:1.0625"
+     id="rect2"
+     width="34"
+     height="34"
+     x="0.21000074"
+     y="0" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(1.21,1)">
+    <path
+       style="fill:url(#radialGradient4);stroke:#000000;stroke-width:0.5;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter66)"
+       d="M 0,22 V 2 l 8,8 8,-8 0.03029,21 H 21 l -7,7 -7,-7 h 5.030291 L 12,11 8,15 4,11 v 11 z"
+       id="path1"
+       sodipodi:nodetypes="cccccccccccccc" />
+    <path
+       style="fill:url(#radialGradient6);stroke:#000000;stroke-width:0.5;stroke-linecap:square;stroke-dasharray:none;stroke-opacity:1;filter:url(#filter68)"
+       d="m 21,18 -4,4 h 11 l 4,-4 V 14 L 28,10 H 23 L 21,8 23,6 h 5 L 32.029451,2 H 21.05087 L 17,5.8781794 V 10.014726 L 21,14 h 5 l 2,2 -2,2 z"
+       id="path2"
+       sodipodi:nodetypes="ccccccccccccccccccc" />
+  </g>
+</svg>

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

@@ -0,0 +1,123 @@
+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, 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)
+    })
+  })
+})

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 { fileURLToPath } from 'node:url'
 import { loadMdsiteConfigSync, resolveMdsiteConfigPath } 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,10 +122,10 @@ 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
   }
 }

package/package.json

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