@karaoke-cms/astro 0.6.3 → 0.9.0

package/src/utils/resolve-menus.ts

@@ -0,0 +1,95 @@
+import { readFileSync } from 'fs';
+import { join } from 'path';
+import { parse } from 'yaml';
+import type { MenuConfig, MenuEntryConfig, ResolvedMenuEntry, ResolvedMenu, ResolvedMenus } from '../types.js';
+
+/** Reject javascript: and data: hrefs to prevent stored XSS via menus.yaml. */
+function sanitizeHref(href: string): string | undefined {
+  const lower = href.trim().toLowerCase();
+  if (lower.startsWith('javascript:') || lower.startsWith('data:')) return undefined;
+  return href;
+}
+
+function normalizeEntries(raw: MenuEntryConfig[], depth = 0): ResolvedMenuEntry[] {
+  // Guard against YAML anchor cycles (e.g., entries: &loop ... entries: *loop).
+  if (depth > 10) return [];
+  return (raw ?? [])
+    .map(e => ({
+      text: String(e?.text ?? ''),
+      href: typeof e?.href === 'string' ? sanitizeHref(e.href) : undefined,
+      weight: typeof e?.weight === 'number' ? e.weight : 0,
+      when: typeof e?.when === 'string' ? e.when : undefined,
+      entries: Array.isArray(e?.entries) ? normalizeEntries(e.entries, depth + 1) : [],
+    }))
+    .sort((a, b) => a.weight - b.weight);
+}
+
+function defaultMain(): ResolvedMenu {
+  return {
+    name: 'main',
+    orientation: 'horizontal',
+    entries: [
+      { text: 'Blog', href: '/blog', weight: 10, when: 'collection:blog', entries: [] },
+      { text: 'Docs', href: '/docs', weight: 20, when: 'collection:docs', entries: [] },
+      { text: 'Tags', href: '/tags', weight: 30, entries: [] },
+    ],
+  };
+}
+
+function defaultFooter(): ResolvedMenu {
+  return {
+    name: 'footer',
+    orientation: 'horizontal',
+    entries: [
+      { text: 'RSS', href: '/rss.xml', weight: 10, entries: [] },
+    ],
+  };
+}
+
+/**
+ * Resolve menus from {vault}/karaoke-cms/config/menus.yaml.
+ *
+ * Always ensures `main` and `footer` exist in the result — generating defaults
+ * when absent so that MainMenu.astro and SiteFooter.astro always have something
+ * to render. ENOENT (no menus.yaml) is the normal zero-config case; all other
+ * errors warn and fall back to defaults.
+ */
+export function resolveMenus(vaultDir: string): ResolvedMenus {
+  try {
+    const path = join(vaultDir, 'karaoke-cms/config/menus.yaml');
+    const raw = readFileSync(path, 'utf8');
+    const parsed = parse(raw) as { menus?: Record<string, MenuConfig> };
+
+    if (!parsed?.menus || typeof parsed.menus !== 'object') {
+      return { main: defaultMain(), footer: defaultFooter() };
+    }
+
+    const result: ResolvedMenus = {};
+    for (const [name, cfg] of Object.entries(parsed.menus)) {
+      if (
+        cfg?.orientation !== undefined &&
+        cfg.orientation !== 'horizontal' &&
+        cfg.orientation !== 'vertical'
+      ) {
+        console.warn(
+          `[karaoke-cms] menus.yaml: menu "${name}" has invalid orientation "${cfg.orientation}". Using "horizontal".`,
+        );
+      }
+      result[name] = {
+        name,
+        orientation: cfg?.orientation === 'vertical' ? 'vertical' : 'horizontal',
+        entries: normalizeEntries(cfg?.entries ?? []),
+      };
+    }
+    if (!result.main) result.main = defaultMain();
+    if (!result.footer) result.footer = defaultFooter();
+    return result;
+  } catch (err: unknown) {
+    if ((err as NodeJS.ErrnoException).code !== 'ENOENT') {
+      console.warn(
+        `[karaoke-cms] Failed to parse menus.yaml: ${(err as Error).message}. Using default menus.`,
+      );
+    }
+    return { main: defaultMain(), footer: defaultFooter() };
+  }
+}

package/src/validate-config.js

@@ -4,18 +4,6 @@
  * Extracted here so the logic is unit-testable separately from astro.config.mjs.
  */
 
-import { readdirSync, statSync } from 'fs'
-import { join } from 'path'
-
-/**
- * Resolve the active theme name from karaoke.config.
- * Falls back to 'default' if config is absent.
- * Throws a clear error if the named theme folder doesn't exist.
- *
- * @param {import('../karaoke.config').KaraokeConfig | null | undefined} config
- * @param {string} themesDir - absolute path to the src/themes directory
- * @returns {string} the resolved theme name
- */
 /**
  * Validate module config at build time.
  * Throws a clear error if comments is enabled but required fields are missing.
@@ -36,24 +24,3 @@ export function validateModules(config) {
   }
 }
 
-export function getTheme(config, themesDir) {
-  const theme = config?.theme ?? 'default'
-  let available
-  try {
-    available = readdirSync(themesDir)
-  } catch {
-    throw new Error(
-      `karaoke-cms: src/themes/ directory not found at ${themesDir} — is this a karaoke-cms repo?`
-    )
-  }
-  available = available.filter(d => {
-    try { return statSync(join(themesDir, d)).isDirectory() } catch { return false }
-  })
-  if (!available.includes(theme)) {
-    throw new Error(
-      `karaoke-cms: theme "${theme}" not found in src/themes/. ` +
-      `Available: ${available.join(', ')}`
-    )
-  }
-  return theme
-}

package/src/pages/404.astro

@@ -1,14 +0,0 @@
----
-import Base from '../layouts/Base.astro';
-import { SITE_TITLE } from '../consts';
----
-
-<Base title={`Page not found — ${SITE_TITLE}`}>
-  <div class="post-header">
-    <h1>Page not found</h1>
-    <p class="post-meta">The page you're looking for doesn't exist or hasn't been published.</p>
-  </div>
-  <div class="prose">
-    <p><a href="/">Go home →</a></p>
-  </div>
-</Base>

package/src/pages/blog/[slug].astro

@@ -1,66 +0,0 @@
----
-import { getCollection, render } from 'astro:content';
-import Base from '../../layouts/Base.astro';
-import ModuleLoader from '../../components/ModuleLoader.astro';
-import { SITE_TITLE } from '../../consts';
-
-export async function getStaticPaths() {
-  const posts = await getCollection('blog', ({ data }) => data.publish === true);
-  return posts.map(entry => ({
-    params: { slug: entry.id },
-    props: { entry },
-  }));
-}
-
-const { entry } = Astro.props;
-const { Content } = await render(entry);
-
-// Resolve related entries by ID across both collections
-const relatedIds = entry.data.related ?? [];
-const related = relatedIds.length > 0
-  ? (await Promise.all([
-      getCollection('blog', ({ data }) => data.publish === true),
-      getCollection('docs', ({ data }) => data.publish === true),
-    ]))
-    .flat()
-    .filter(e => relatedIds.includes(e.id))
-  : [];
----
-
-<Base title={`${entry.data.title} — ${SITE_TITLE}`} description={entry.data.description} type="article">
-  <article>
-    <div class="post-header">
-      <h1>{entry.data.title}</h1>
-      <div class="post-meta">
-        {entry.data.date && <span>{entry.data.date.toISOString().slice(0, 10)}</span>}
-        {entry.data.author && entry.data.date && <span> · </span>}
-        {entry.data.author && (
-          <span>{Array.isArray(entry.data.author) ? entry.data.author.join(' · ') : entry.data.author}</span>
-        )}
-        {entry.data.reading_time && <span> · {entry.data.reading_time} min read</span>}
-      </div>
-    </div>
-    <div class="prose">
-      <Content />
-    </div>
-    <div class="post-footer">
-      {entry.data.tags && entry.data.tags.length > 0 && (
-        <div class="post-tags">
-          {entry.data.tags.map(tag => <a href={`/tags/${tag}`} class="tag">#{tag}</a>)}
-        </div>
-      )}
-      {related.length > 0 && (
-        <div class="related-posts">
-          <p class="related-label">Related</p>
-          <ul>
-            {related.map(r => (
-              <li><a href={`/${r.collection}/${r.id}`}>{r.data.title}</a></li>
-            ))}
-          </ul>
-        </div>
-      )}
-      <a href="/blog">← Blog</a>
-    </div>
-  </article>
-  <ModuleLoader comments={entry.data.comments} />
-</Base>

package/src/pages/blog/index.astro

@@ -1,31 +0,0 @@
----
-import { getCollection } from 'astro:content';
-import Base from '../../layouts/Base.astro';
-import { SITE_TITLE } from '../../consts';
-
-const posts = (await getCollection('blog', ({ data }) => data.publish === true))
-  .sort((a, b) => (b.data.date?.valueOf() ?? 0) - (a.data.date?.valueOf() ?? 0));
----
-
-<Base title={`Blog — ${SITE_TITLE}`}>
-  <div class="listing-header">
-    <h1>Blog</h1>
-  </div>
-  {posts.length > 0 ? (
-    <ul class="post-list">
-      {posts.map(post => (
-        <li>
-          {post.data.date && (
-            <span class="post-date">{post.data.date.toISOString().slice(0, 10)}</span>
-          )}
-          <a href={`/blog/${post.id}`}>{post.data.title}</a>
-        </li>
-      ))}
-    </ul>
-  ) : (
-    <div class="empty-state">
-      <p>No posts published yet.</p>
-      <p>Create a Markdown file in your vault's <code>blog/</code> folder and set <code>publish: true</code> in the frontmatter to make it appear here.</p>
-    </div>
-  )}
-</Base>

package/src/pages/docs/[slug].astro

@@ -1,66 +0,0 @@
----
-import { getCollection, render } from 'astro:content';
-import Base from '../../layouts/Base.astro';
-import ModuleLoader from '../../components/ModuleLoader.astro';
-import { SITE_TITLE } from '../../consts';
-
-export async function getStaticPaths() {
-  const docs = await getCollection('docs', ({ data }) => data.publish === true);
-  return docs.map(entry => ({
-    params: { slug: entry.id },
-    props: { entry },
-  }));
-}
-
-const { entry } = Astro.props;
-const { Content } = await render(entry);
-
-// Resolve related entries by ID across both collections
-const relatedIds = entry.data.related ?? [];
-const related = relatedIds.length > 0
-  ? (await Promise.all([
-      getCollection('blog', ({ data }) => data.publish === true),
-      getCollection('docs', ({ data }) => data.publish === true),
-    ]))
-    .flat()
-    .filter(e => relatedIds.includes(e.id))
-  : [];
----
-
-<Base title={`${entry.data.title} — ${SITE_TITLE}`} description={entry.data.description} type="article">
-  <article>
-    <div class="post-header">
-      <h1>{entry.data.title}</h1>
-      <div class="post-meta">
-        {entry.data.date && <span>{entry.data.date.toISOString().slice(0, 10)}</span>}
-        {entry.data.author && entry.data.date && <span> · </span>}
-        {entry.data.author && (
-          <span>{Array.isArray(entry.data.author) ? entry.data.author.join(' · ') : entry.data.author}</span>
-        )}
-        {entry.data.reading_time && <span> · {entry.data.reading_time} min read</span>}
-      </div>
-    </div>
-    <div class="prose">
-      <Content />
-    </div>
-    <div class="post-footer">
-      {entry.data.tags && entry.data.tags.length > 0 && (
-        <div class="post-tags">
-          {entry.data.tags.map(tag => <a href={`/tags/${tag}`} class="tag">#{tag}</a>)}
-        </div>
-      )}
-      {related.length > 0 && (
-        <div class="related-posts">
-          <p class="related-label">Related</p>
-          <ul>
-            {related.map(r => (
-              <li><a href={`/${r.collection}/${r.id}`}>{r.data.title}</a></li>
-            ))}
-          </ul>
-        </div>
-      )}
-      <a href="/docs">← Docs</a>
-    </div>
-  </article>
-  <ModuleLoader comments={entry.data.comments} />
-</Base>

package/src/pages/docs/index.astro

@@ -1,31 +0,0 @@
----
-import { getCollection } from 'astro:content';
-import Base from '../../layouts/Base.astro';
-import { SITE_TITLE } from '../../consts';
-
-const docs = (await getCollection('docs', ({ data }) => data.publish === true))
-  .sort((a, b) => a.data.title.localeCompare(b.data.title));
----
-
-<Base title={`Docs — ${SITE_TITLE}`}>
-  <div class="listing-header">
-    <h1>Docs</h1>
-  </div>
-  {docs.length > 0 ? (
-    <ul class="post-list">
-      {docs.map(doc => (
-        <li>
-          {doc.data.date && (
-            <span class="post-date">{doc.data.date.toISOString().slice(0, 10)}</span>
-          )}
-          <a href={`/docs/${doc.id}`}>{doc.data.title}</a>
-        </li>
-      ))}
-    </ul>
-  ) : (
-    <div class="empty-state">
-      <p>No docs published yet.</p>
-      <p>Create a Markdown file in your vault's <code>docs/</code> folder and set <code>publish: true</code> in the frontmatter to make it appear here.</p>
-    </div>
-  )}
-</Base>

package/src/pages/index.astro

@@ -1,65 +0,0 @@
----
-import { getCollection } from 'astro:content';
-import Base from '../layouts/Base.astro';
-import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
-
-const posts = (await getCollection('blog', ({ data }) => data.publish === true))
-  .sort((a, b) => (b.data.date?.valueOf() ?? 0) - (a.data.date?.valueOf() ?? 0))
-  .slice(0, 5);
-
-const docs = (await getCollection('docs', ({ data }) => data.publish === true))
-  .sort((a, b) => a.data.title.localeCompare(b.data.title))
-  .slice(0, 5);
----
-
-<Base title={SITE_TITLE} description={SITE_DESCRIPTION}>
-  <div class="home-grid">
-    <section class="home-section">
-      <h2>Blog</h2>
-      {posts.length > 0 ? (
-        <>
-          <ul class="post-list">
-            {posts.map(post => (
-              <li>
-                <a href={`/blog/${post.id}`}>{post.data.title}</a>
-                {post.data.date && (
-                  <span class="post-date">{post.data.date.toISOString().slice(0, 10)}</span>
-                )}
-              </li>
-            ))}
-          </ul>
-          <a href="/blog" class="view-all">View all →</a>
-        </>
-      ) : (
-        <div class="empty-state">
-          <p>No posts yet.</p>
-          <p>Add a Markdown file to <code>content/blog/</code> with <code>publish: true</code> in the frontmatter.</p>
-        </div>
-      )}
-    </section>
-
-    <section class="home-section">
-      <h2>Docs</h2>
-      {docs.length > 0 ? (
-        <>
-          <ul class="post-list">
-            {docs.map(doc => (
-              <li>
-                <a href={`/docs/${doc.id}`}>{doc.data.title}</a>
-                {doc.data.date && (
-                  <span class="post-date">{doc.data.date.toISOString().slice(0, 10)}</span>
-                )}
-              </li>
-            ))}
-          </ul>
-          <a href="/docs" class="view-all">View all →</a>
-        </>
-      ) : (
-        <div class="empty-state">
-          <p>No docs yet.</p>
-          <p>Add a Markdown file to <code>content/docs/</code> with <code>publish: true</code> in the frontmatter.</p>
-        </div>
-      )}
-    </section>
-  </div>
-</Base>

package/src/pages/tags/[tag].astro

@@ -1,53 +0,0 @@
----
-import { getCollection } from 'astro:content';
-import Base from '../../layouts/Base.astro';
-import { SITE_TITLE } from '../../consts';
-
-export async function getStaticPaths() {
-  const [blog, docs] = await Promise.all([
-    getCollection('blog', ({ data }) => data.publish === true),
-    getCollection('docs', ({ data }) => data.publish === true),
-  ]);
-
-  // Collect all unique tags
-  const tags = new Set<string>();
-  for (const entry of [...blog, ...docs]) {
-    for (const tag of entry.data.tags ?? []) tags.add(tag);
-  }
-
-  return [...tags].map(tag => ({
-    params: { tag },
-    props: {
-      tag,
-      entries: [...blog, ...docs]
-        .filter(e => e.data.tags?.includes(tag))
-        .sort((a, b) => (b.data.date?.valueOf() ?? 0) - (a.data.date?.valueOf() ?? 0)),
-    },
-  }));
-}
-
-const { tag, entries } = Astro.props;
-
-// Determine the URL prefix for each entry by its collection
-function href(entry: { collection: string; id: string }) {
-  return `/${entry.collection}/${entry.id}`;
-}
----
-
-<Base title={`#${tag} — ${SITE_TITLE}`}>
-  <div class="listing-header">
-    <h1>#{tag}</h1>
-    <p><a href="/tags">← All tags</a></p>
-  </div>
-  <ul class="post-list">
-    {entries.map(entry => (
-      <li>
-        {entry.data.date && (
-          <span class="post-date">{entry.data.date.toISOString().slice(0, 10)}</span>
-        )}
-        <a href={href(entry)}>{entry.data.title}</a>
-        <span class="post-collection">{entry.collection}</span>
-      </li>
-    ))}
-  </ul>
-</Base>

package/src/pages/tags/index.astro

@@ -1,41 +0,0 @@
----
-import { getCollection } from 'astro:content';
-import Base from '../../layouts/Base.astro';
-import { SITE_TITLE } from '../../consts';
-
-const [blog, docs] = await Promise.all([
-  getCollection('blog', ({ data }) => data.publish === true),
-  getCollection('docs', ({ data }) => data.publish === true),
-]);
-
-// Count occurrences of each tag across both collections
-const counts = new Map<string, number>();
-for (const entry of [...blog, ...docs]) {
-  for (const tag of entry.data.tags ?? []) {
-    counts.set(tag, (counts.get(tag) ?? 0) + 1);
-  }
-}
-
-const tags = [...counts.entries()].sort((a, b) => a[0].localeCompare(b[0]));
----
-
-<Base title={`Tags — ${SITE_TITLE}`}>
-  <div class="listing-header">
-    <h1>Tags</h1>
-  </div>
-  {tags.length > 0 ? (
-    <ul class="tag-list">
-      {tags.map(([tag, count]) => (
-        <li>
-          <a href={`/tags/${tag}`}>{tag}</a>
-          <span class="tag-count">{count}</span>
-        </li>
-      ))}
-    </ul>
-  ) : (
-    <div class="empty-state">
-      <p>No tags yet.</p>
-      <p>Tags are added to posts via the <code>tags</code> frontmatter field or by AI enrichment.</p>
-    </div>
-  )}
-</Base>