mdorigin 0.1.1 → 0.1.3

package/dist/html/template.js

@@ -14,6 +14,14 @@ export function renderDocument(options) {
     const faviconMeta = options.favicon
         ? `<link rel="icon" href="${escapeHtml(options.favicon)}">`
         : '';
+    const absoluteSocialImageUrl = getAbsoluteSiteAssetUrl(options.siteUrl, options.socialImage);
+    const socialImageMeta = absoluteSocialImageUrl
+        ? [
+            `<meta property="og:image" content="${escapeHtml(absoluteSocialImageUrl)}">`,
+            '<meta name="twitter:card" content="summary_large_image">',
+            `<meta name="twitter:image" content="${escapeHtml(absoluteSocialImageUrl)}">`,
+        ].join('')
+        : '';
     const alternateMarkdownMeta = options.alternateMarkdownPath
         ? `<link rel="alternate" type="text/markdown" href="${escapeHtml(options.alternateMarkdownPath)}">`
         : '';
@@ -23,6 +31,24 @@ export function renderDocument(options) {
             .map((item) => `<li><a href="${escapeHtml(item.href)}">${escapeHtml(item.label)}</a></li>`)
             .join('')}</ul></nav>`
         : '';
+    const searchToggleBlock = options.searchEnabled
+        ? [
+            '<div class="site-search" data-site-search>',
+            '<button type="button" class="site-search__toggle" aria-expanded="false" aria-controls="site-search-panel">Search</button>',
+            '<div id="site-search-panel" class="site-search__panel" hidden>',
+            '<form class="site-search__form" role="search" action="/api/search" method="get">',
+            '<label class="site-search__label" for="site-search-input">Search site</label>',
+            '<div class="site-search__controls">',
+            '<input id="site-search-input" class="site-search__input" type="search" name="q" placeholder="Search docs and skills" autocomplete="off">',
+            '<button type="submit" class="site-search__submit">Go</button>',
+            '</div>',
+            '<p class="site-search__hint">Search is powered by <code>/api/search</code>.</p>',
+            '</form>',
+            '<div class="site-search__results" data-site-search-results></div>',
+            '</div>',
+            '</div>',
+        ].join('')
+        : '';
     const footerNavBlock = options.footerNav && options.footerNav.length > 0
         ? `<nav class="site-footer__nav"><ul>${options.footerNav
             .map((item) => `<li><a href="${escapeHtml(item.href)}">${escapeHtml(item.label)}</a></li>`)
@@ -46,12 +72,23 @@ export function renderDocument(options) {
     const footerTextBlock = options.footerText
         ? `<p class="site-footer__text">${escapeHtml(options.footerText)}</p>`
         : '';
-    const footerBlock = footerNavBlock || socialLinksBlock || footerTextBlock || editLinkBlock
-        ? `<footer class="site-footer"><div class="site-footer__inner">${footerNavBlock}${socialLinksBlock}${footerTextBlock}${editLinkBlock}</div></footer>`
+    const footerMetaBlock = socialLinksBlock || editLinkBlock
+        ? `<div class="site-footer__meta">${socialLinksBlock}${editLinkBlock}</div>`
+        : '';
+    const footerBlock = footerNavBlock || footerTextBlock || footerMetaBlock
+        ? `<footer class="site-footer"><div class="site-footer__inner">${footerNavBlock}${footerTextBlock}${footerMetaBlock}</div></footer>`
         : '';
     const articleBody = options.template === 'catalog'
-        ? renderCatalogArticle(options.body, options.catalogEntries ?? [])
+        ? renderCatalogArticle(options.body, options.catalogEntries ?? [], {
+            requestPath: options.catalogRequestPath ?? '/',
+            initialPostCount: options.catalogInitialPostCount ?? 10,
+            loadMoreStep: options.catalogLoadMoreStep ?? 10,
+        })
         : options.body;
+    const searchScript = options.searchEnabled ? renderSearchScript() : '';
+    const headerBlock = options.headerHtml ??
+        `<header class="site-header"><div class="site-header__inner"><div class="site-header__brand"><p class="site-header__title"><a href="${brandHref}">${logoBlock}<span>${siteTitle}</span></a></p>${siteDescriptionBlock}</div><div class="site-header__actions">${navBlock}${searchToggleBlock}</div></div></header>`;
+    const renderedFooterBlock = options.footerHtml ?? footerBlock;
     return [
         '<!doctype html>',
         '<html lang="en">',
@@ -62,19 +99,33 @@ export function renderDocument(options) {
         summaryMeta,
         canonicalMeta,
         faviconMeta,
+        socialImageMeta,
         alternateMarkdownMeta,
         stylesheetBlock,
         '</head>',
         `<body data-theme="${options.theme}" data-template="${options.template}">`,
-        `<header class="site-header"><div class="site-header__inner"><div class="site-header__brand"><p class="site-header__title"><a href="${brandHref}">${logoBlock}<span>${siteTitle}</span></a></p>${siteDescriptionBlock}</div>${navBlock}</div></header>`,
+        headerBlock,
         '<main>',
         `<article>${articleBody}</article>`,
         '</main>',
-        footerBlock,
+        renderedFooterBlock,
+        searchScript,
         '</body>',
         '</html>',
     ].join('');
 }
+function getAbsoluteSiteAssetUrl(siteUrl, href) {
+    if (!href) {
+        return undefined;
+    }
+    if (/^[a-zA-Z][a-zA-Z\d+.-]*:/.test(href) || href.startsWith('//')) {
+        return href;
+    }
+    if (!siteUrl) {
+        return undefined;
+    }
+    return new URL(href.replace(/^\//, ''), `${siteUrl}/`).toString();
+}
 export function escapeHtml(value) {
     return value
         .replaceAll('&', '&amp;')
@@ -102,18 +153,29 @@ function renderSocialIcon(icon) {
 function iconSvg(pathData) {
     return `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="${pathData}"></path></svg>`;
 }
-function renderCatalogArticle(body, entries) {
+function renderCatalogArticle(body, entries, options) {
     if (entries.length === 0) {
         return body;
     }
     const directories = entries.filter((entry) => entry.kind === 'directory');
     const articles = entries.filter((entry) => entry.kind === 'article');
+    const initialPostCount = Math.max(1, options.initialPostCount);
+    const visibleArticles = articles.slice(0, initialPostCount);
+    const shouldLoadMore = articles.length > visibleArticles.length;
     return [
         `<div class="catalog-page__body">${body}</div>`,
         '<section class="catalog-page" aria-label="Catalog">',
         directories.length > 0 ? renderCatalogDirectories(directories) : '',
-        articles.length > 0 ? renderCatalogArticles(articles) : '',
+        articles.length > 0
+            ? renderCatalogArticles(visibleArticles, {
+                requestPath: options.requestPath,
+                nextOffset: visibleArticles.length,
+                loadMoreStep: options.loadMoreStep,
+                hasMore: shouldLoadMore,
+            })
+            : '',
         '</section>',
+        shouldLoadMore ? renderCatalogLoadMoreScript() : '',
     ].join('');
 }
 function renderCatalogDirectories(entries) {
@@ -125,12 +187,166 @@ function renderCatalogDirectories(entries) {
         '</div>',
     ].join('');
 }
-function renderCatalogArticles(entries) {
+export function renderCatalogArticleItems(entries) {
+    return entries
+        .map((entry) => `<a class="catalog-item" href="${escapeHtml(entry.href)}"><strong class="catalog-item__title">${escapeHtml(entry.title)}</strong>${entry.detail
+        ? `<span class="catalog-item__detail">${escapeHtml(entry.detail)}</span>`
+        : ''}</a>`)
+        .join('');
+}
+function renderCatalogArticles(entries, options) {
     return [
-        '<div class="catalog-list">',
-        ...entries.map((entry) => `<a class="catalog-item" href="${escapeHtml(entry.href)}"><strong class="catalog-item__title">${escapeHtml(entry.title)}</strong>${entry.detail
-            ? `<span class="catalog-item__detail">${escapeHtml(entry.detail)}</span>`
-            : ''}</a>`),
+        '<div class="catalog-list" data-catalog-articles>',
+        renderCatalogArticleItems(entries),
         '</div>',
+        options.hasMore
+            ? `<div class="catalog-load-more"><button type="button" class="catalog-load-more__button" data-catalog-load-more data-request-path="${escapeHtml(options.requestPath)}" data-next-offset="${escapeHtml(String(options.nextOffset))}" data-load-more-step="${escapeHtml(String(options.loadMoreStep))}">Load more</button></div>`
+            : '',
+    ].join('');
+}
+function renderCatalogLoadMoreScript() {
+    return `<script>
+(() => {
+  const button = document.querySelector('[data-catalog-load-more]');
+  const list = document.querySelector('[data-catalog-articles]');
+  if (!(button instanceof HTMLButtonElement) || !(list instanceof HTMLElement)) {
+    return;
+  }
+
+  const loadMore = async () => {
+    const requestPath = button.dataset.requestPath;
+    const nextOffset = button.dataset.nextOffset;
+    const loadMoreStep = button.dataset.loadMoreStep;
+    if (!requestPath || !nextOffset || !loadMoreStep) {
+      return;
+    }
+
+    button.disabled = true;
+    const previousLabel = button.textContent;
+    button.textContent = 'Loading...';
+
+    try {
+      const url = new URL(requestPath, window.location.origin);
+      url.searchParams.set('catalog-format', 'posts');
+      url.searchParams.set('catalog-offset', nextOffset);
+      url.searchParams.set('catalog-limit', loadMoreStep);
+
+      const response = await fetch(url.toString(), {
+        headers: { Accept: 'application/json' },
+      });
+      if (!response.ok) {
+        throw new Error('Failed to load more posts');
+      }
+
+      const payload = await response.json();
+      if (typeof payload.itemsHtml === 'string' && payload.itemsHtml !== '') {
+        list.insertAdjacentHTML('beforeend', payload.itemsHtml);
+      }
+
+      if (payload.hasMore === true && typeof payload.nextOffset === 'number') {
+        button.dataset.nextOffset = String(payload.nextOffset);
+        button.disabled = false;
+        button.textContent = previousLabel ?? 'Load more';
+        return;
+      }
+
+      button.remove();
+    } catch {
+      button.disabled = false;
+      button.textContent = previousLabel ?? 'Load more';
+    }
+  };
+
+  button.addEventListener('click', () => {
+    void loadMore();
+  });
+})();
+</script>`;
+}
+function renderSearchScript() {
+    return [
+        '<script>',
+        '(function () {',
+        '  const root = document.querySelector("[data-site-search]");',
+        '  if (!root) return;',
+        '  const toggle = root.querySelector(".site-search__toggle");',
+        '  const panel = root.querySelector(".site-search__panel");',
+        '  const form = root.querySelector(".site-search__form");',
+        '  const input = root.querySelector(".site-search__input");',
+        '  const results = root.querySelector("[data-site-search-results]");',
+        '  if (!toggle || !panel || !form || !input || !results) return;',
+        '  let controller = null;',
+        '  function renderMessage(message) {',
+        '    results.innerHTML = `<p class="site-search__message">${escapeHtmlForScript(message)}</p>`;',
+        '  }',
+        '  function renderHits(hits) {',
+        '    if (!Array.isArray(hits) || hits.length === 0) {',
+        '      renderMessage("No results.");',
+        '      return;',
+        '    }',
+        '    results.innerHTML = hits.map((hit) => {',
+        '      const href = escapeHtmlForScript(hit.canonicalUrl || hit.docId || "#");',
+        '      const title = escapeHtmlForScript(hit.title || hit.relativePath || "Untitled");',
+        '      const summary = typeof hit.summary === "string" ? `<span class="site-search__item-summary">${escapeHtmlForScript(hit.summary)}</span>` : "";',
+        '      const excerpt = hit.bestMatch && typeof hit.bestMatch.excerpt === "string" ? `<span class="site-search__item-excerpt">${escapeHtmlForScript(hit.bestMatch.excerpt)}</span>` : "";',
+        '      return `<a class="site-search__item" href="${href}"><strong class="site-search__item-title">${title}</strong>${summary}${excerpt}</a>`;',
+        '    }).join("");',
+        '  }',
+        '  async function runSearch(query) {',
+        '    if (controller) controller.abort();',
+        '    controller = new AbortController();',
+        '    renderMessage("Searching...");',
+        '    try {',
+        '      const url = new URL("/api/search", window.location.origin);',
+        '      url.searchParams.set("q", query);',
+        '      url.searchParams.set("topK", "8");',
+        '      const response = await fetch(url, { signal: controller.signal });',
+        '      if (!response.ok) {',
+        '        renderMessage(`Search failed (${response.status}).`);',
+        '        return;',
+        '      }',
+        '      const payload = await response.json();',
+        '      renderHits(payload.hits);',
+        '    } catch (error) {',
+        '      if (error && typeof error === "object" && "name" in error && error.name === "AbortError") return;',
+        '      renderMessage("Search failed.");',
+        '    }',
+        '  }',
+        '  function setOpen(open) {',
+        '    toggle.setAttribute("aria-expanded", open ? "true" : "false");',
+        '    panel.hidden = !open;',
+        '    if (open) {',
+        '      input.focus();',
+        '      if (!results.innerHTML) renderMessage("Search docs, guides, and skills.");',
+        '    }',
+        '  }',
+        '  toggle.addEventListener("click", () => setOpen(panel.hidden));',
+        '  form.addEventListener("submit", (event) => {',
+        '    event.preventDefault();',
+        '    const query = input.value.trim();',
+        '    if (!query) {',
+        '      renderMessage("Enter a search query.");',
+        '      return;',
+        '    }',
+        '    void runSearch(query);',
+        '  });',
+        '  document.addEventListener("keydown", (event) => {',
+        '    if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {',
+        '      event.preventDefault();',
+        '      setOpen(true);',
+        '    }',
+        '    if (event.key === "Escape" && !panel.hidden) setOpen(false);',
+        '  });',
+        '})();',
+        '',
+        'function escapeHtmlForScript(value) {',
+        '  return String(value)',
+        '    .replaceAll("&", "&amp;")',
+        '    .replaceAll("<", "&lt;")',
+        '    .replaceAll(">", "&gt;")',
+        '    .replaceAll(\'"\', "&quot;")',
+        '    .replaceAll("\\\'", "&#39;");',
+        '}',
+        '</script>',
     ].join('');
 }

package/dist/html/theme.js

@@ -1,13 +1,135 @@
 export function getBuiltInThemeStyles(theme) {
-    switch (theme) {
-        case 'atlas':
-            return buildAtlasThemeStyles();
-        case 'gazette':
-            return buildGazetteThemeStyles();
-        case 'paper':
-        default:
-            return buildPaperThemeStyles();
-    }
+    const themeStyles = (() => {
+        switch (theme) {
+            case 'atlas':
+                return buildAtlasThemeStyles();
+            case 'gazette':
+                return buildGazetteThemeStyles();
+            case 'paper':
+            default:
+                return buildPaperThemeStyles();
+        }
+    })();
+    return `${themeStyles}\n${buildSharedSearchStyles()}`;
+}
+function buildSharedSearchStyles() {
+    return `
+.site-header__actions {
+  min-width: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  gap: 1rem;
+}
+.site-search {
+  position: relative;
+}
+.site-search__toggle {
+  appearance: none;
+  border: 1px solid var(--border);
+  background: color-mix(in srgb, var(--surface) 92%, transparent);
+  color: var(--muted);
+  border-radius: 999px;
+  padding: 0.45rem 0.82rem;
+  font: inherit;
+  font-size: 0.88rem;
+  cursor: pointer;
+}
+.site-search__toggle:hover {
+  color: var(--text);
+}
+.site-search__panel {
+  position: absolute;
+  top: calc(100% + 0.7rem);
+  right: 0;
+  width: min(32rem, calc(100vw - 2rem));
+  padding: 1rem;
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  background: color-mix(in srgb, var(--surface) 95%, white 5%);
+  box-shadow: 0 18px 40px rgba(24, 18, 11, 0.14);
+  z-index: 2;
+}
+.site-search__label {
+  display: block;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--muted);
+  margin-bottom: 0.55rem;
+}
+.site-search__controls {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.6rem;
+}
+.site-search__input,
+.site-search__submit {
+  font: inherit;
+}
+.site-search__input {
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--surface);
+  color: var(--text);
+  padding: 0.7rem 0.85rem;
+}
+.site-search__submit {
+  appearance: none;
+  border: 1px solid var(--text);
+  border-radius: 12px;
+  background: var(--text);
+  color: var(--surface);
+  padding: 0.7rem 0.95rem;
+  cursor: pointer;
+}
+.site-search__hint,
+.site-search__message {
+  color: var(--muted);
+  font-size: 0.84rem;
+}
+.site-search__results {
+  margin-top: 0.9rem;
+  display: grid;
+  gap: 0.7rem;
+}
+.site-search__item {
+  display: block;
+  text-decoration: none;
+  border-top: 1px solid var(--border);
+  padding-top: 0.7rem;
+}
+.site-search__item:first-child {
+  border-top: 0;
+  padding-top: 0;
+}
+.site-search__item-title {
+  display: block;
+  color: var(--text);
+}
+.site-search__item-summary,
+.site-search__item-excerpt {
+  display: block;
+  margin-top: 0.25rem;
+  color: var(--muted);
+  font-size: 0.88rem;
+}
+.site-search__item-excerpt {
+  font-size: 0.82rem;
+}
+@media (max-width: 720px) {
+  .site-header__actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .site-search__panel {
+    left: 0;
+    right: auto;
+    width: min(100%, 34rem);
+  }
+}
+`.trim();
 }
 function buildPaperThemeStyles() {
     return `
@@ -125,6 +247,13 @@ main {
   padding-top: 1rem;
   color: var(--muted);
 }
+.site-footer__meta {
+  margin-top: 0.9rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
 .site-footer__nav ul,
 .site-footer__social {
   list-style: none;
@@ -163,6 +292,19 @@ main {
   display: block;
   margin-top: 0.9rem;
 }
+.site-footer__edit-link {
+  display: inline-block;
+  margin-top: 0;
+  font-size: 0.78rem;
+  color: var(--muted);
+  opacity: 0.72;
+}
+@media (max-width: 720px) {
+  .site-footer__meta {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
 article {
   background: color-mix(in srgb, var(--surface) 92%, white 8%);
   border: 1px solid var(--border);
@@ -253,6 +395,27 @@ hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
 .catalog-item:hover {
   text-decoration: none;
 }
+.catalog-load-more {
+  margin-top: 1.2rem;
+}
+.catalog-load-more__button {
+  appearance: none;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+  border-radius: 999px;
+  padding: 0.65rem 1rem;
+  font: inherit;
+  font-size: 0.95rem;
+  cursor: pointer;
+}
+.catalog-load-more__button:hover {
+  background: color-mix(in srgb, var(--surface) 86%, var(--code-bg) 14%);
+}
+.catalog-load-more__button:disabled {
+  cursor: wait;
+  opacity: 0.7;
+}
 @media (max-width: 720px) {
   html { font-size: 17px; }
   .site-header, main, .site-footer { padding-left: 1rem; padding-right: 1rem; }
@@ -386,6 +549,13 @@ main {
   padding-top: 1rem;
   color: var(--muted);
 }
+.site-footer__meta {
+  margin-top: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
 .site-footer__nav ul,
 .site-footer__social {
   list-style: none;
@@ -424,6 +594,19 @@ main {
   display: block;
   margin-top: 0.95rem;
 }
+.site-footer__edit-link {
+  display: inline-block;
+  margin-top: 0;
+  font-size: 0.78rem;
+  color: var(--muted);
+  opacity: 0.72;
+}
+@media (max-width: 720px) {
+  .site-footer__meta {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
 article {
   background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,250,252,0.98));
   border: 1px solid var(--border);
@@ -518,6 +701,27 @@ hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
 .catalog-item:hover {
   text-decoration: none;
 }
+.catalog-load-more {
+  margin-top: 1.2rem;
+}
+.catalog-load-more__button {
+  appearance: none;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+  border-radius: 999px;
+  padding: 0.65rem 1rem;
+  font: inherit;
+  font-size: 0.95rem;
+  cursor: pointer;
+}
+.catalog-load-more__button:hover {
+  background: color-mix(in srgb, var(--surface) 75%, var(--accent) 25%);
+}
+.catalog-load-more__button:disabled {
+  cursor: wait;
+  opacity: 0.7;
+}
 @media (max-width: 720px) {
   .site-header__inner, main, .site-footer { padding-left: 1rem; padding-right: 1rem; }
   .site-header__inner {
@@ -648,6 +852,13 @@ main {
   padding-top: 1rem;
   color: var(--muted);
 }
+.site-footer__meta {
+  margin-top: 0.95rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
 .site-footer__nav ul,
 .site-footer__social {
   list-style: none;
@@ -686,6 +897,19 @@ main {
   display: block;
   margin-top: 0.9rem;
 }
+.site-footer__edit-link {
+  display: inline-block;
+  margin-top: 0;
+  font-size: 0.78rem;
+  color: var(--muted);
+  opacity: 0.72;
+}
+@media (max-width: 720px) {
+  .site-footer__meta {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
 article {
   background:
     linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,253,248,0.98)),
@@ -785,6 +1009,27 @@ hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
 .catalog-item:hover {
   text-decoration: none;
 }
+.catalog-load-more {
+  margin-top: 1.2rem;
+}
+.catalog-load-more__button {
+  appearance: none;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+  border-radius: 999px;
+  padding: 0.65rem 1rem;
+  font: inherit;
+  font-size: 0.95rem;
+  cursor: pointer;
+}
+.catalog-load-more__button:hover {
+  background: color-mix(in srgb, var(--surface) 84%, #fff 16%);
+}
+.catalog-load-more__button:disabled {
+  cursor: wait;
+  opacity: 0.7;
+}
 @media (max-width: 720px) {
   html { font-size: 17px; }
   .site-header, main, .site-footer { padding-left: 1rem; padding-right: 1rem; }

package/dist/index-builder.d.ts

@@ -1,13 +1,15 @@
+import { type MdoPlugin } from './core/extensions.js';
 export interface BuildIndexOptions {
     rootDir?: string;
     dir?: string;
+    plugins?: MdoPlugin[];
 }
 export interface BuildIndexResult {
     updatedFiles: string[];
     skippedDirectories: string[];
 }
 export declare function buildDirectoryIndexes(options: BuildIndexOptions): Promise<BuildIndexResult>;
-export declare function buildManagedIndexBlock(directoryPath: string): Promise<string>;
+export declare function buildManagedIndexBlock(directoryPath: string, plugins?: MdoPlugin[]): Promise<string>;
 export declare function upsertManagedIndexBlock(source: string, block: string, options?: {
     directoryPath?: string;
 }): string;