@barodoc/theme-docs 1.0.1 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barodoc/theme-docs",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "Documentation theme for Barodoc",
   "type": "module",
   "exports": {
@@ -30,7 +30,7 @@
     "lucide-react": "^0.563.0",
     "mermaid": "^11.12.2",
     "tailwind-merge": "^3.4.0",
-    "@barodoc/core": "1.0.1"
+    "@barodoc/core": "2.0.0"
   },
   "peerDependencies": {
     "astro": "^5.0.0",

package/src/components/Banner.astro

@@ -0,0 +1,56 @@
+---
+import config from "virtual:barodoc/config";
+
+const announcement = config.announcement;
+const show = !!announcement?.text;
+const dismissible = announcement?.dismissible !== false;
+---
+
+{show && (
+  <div
+    id="site-banner"
+    class="banner-bar bg-primary-600 text-white text-sm text-center py-2 px-4 flex items-center justify-center gap-2 relative"
+  >
+    {announcement.link ? (
+      <a href={announcement.link} class="hover:underline font-medium">
+        {announcement.text}
+        <svg class="inline w-3.5 h-3.5 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+        </svg>
+      </a>
+    ) : (
+      <span class="font-medium">{announcement.text}</span>
+    )}
+    {dismissible && (
+      <button
+        id="banner-dismiss"
+        class="absolute right-3 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-white/20 transition-colors"
+        aria-label="Dismiss banner"
+      >
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    )}
+  </div>
+  <script>
+    function initBanner() {
+      const banner = document.getElementById('site-banner');
+      const dismiss = document.getElementById('banner-dismiss');
+      if (!banner) return;
+      const key = 'barodoc-banner-dismissed';
+      if (localStorage.getItem(key) === banner.textContent?.trim()) {
+        banner.style.display = 'none';
+        return;
+      }
+      if (dismiss) {
+        dismiss.addEventListener('click', () => {
+          banner.style.display = 'none';
+          localStorage.setItem(key, banner.textContent?.trim() || '');
+        });
+      }
+    }
+    initBanner();
+    document.addEventListener('astro:page-load', initBanner);
+  </script>
+)}

package/src/components/Breadcrumb.astro

@@ -0,0 +1,32 @@
+---
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+interface Props {
+  items: BreadcrumbItem[];
+}
+
+const { items } = Astro.props;
+---
+
+<nav aria-label="Breadcrumb" class="mb-3">
+  <ol class="flex flex-wrap items-center gap-1 text-xs text-[var(--color-text-muted)]">
+    <li class="flex items-center gap-1">
+      <a href="/docs" class="hover:text-[var(--color-text-secondary)] transition-colors">Docs</a>
+    </li>
+    {items.map((item, i) => (
+      <li class="flex items-center gap-1">
+        <svg class="w-3 h-3 text-[var(--color-text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+        </svg>
+        {item.href && i < items.length - 1 ? (
+          <a href={item.href} class="hover:text-[var(--color-text-secondary)] transition-colors">{item.label}</a>
+        ) : (
+          <span class="text-[var(--color-text-secondary)]">{item.label}</span>
+        )}
+      </li>
+    ))}
+  </ol>
+</nav>

package/src/layouts/BaseLayout.astro

@@ -1,14 +1,21 @@
 ---
 import ThemeScript from "../components/ThemeScript.astro";
 import { SearchDialog } from "../components/SearchDialog";
+import config from "virtual:barodoc/config";
 import "@barodoc/theme-docs/styles/global.css";
 
 interface Props {
   title: string;
   description?: string;
+  ogImage?: string;
 }
 
-const { title, description = "Documentation" } = Astro.props;
+const { title, description = "Documentation", ogImage } = Astro.props;
+const siteName = config.name;
+const canonicalUrl = config.site ? new URL(Astro.url.pathname, config.site).href : Astro.url.href;
+const ogImageUrl = ogImage
+  ? (config.site ? new URL(ogImage, config.site).href : ogImage)
+  : undefined;
 ---
 
 <!doctype html>
@@ -18,6 +25,22 @@ const { title, description = "Documentation" } = Astro.props;
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="description" content={description} />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="canonical" href={canonicalUrl} />
+
+    <!-- Open Graph -->
+    <meta property="og:type" content="article" />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:site_name" content={siteName} />
+    <meta property="og:url" content={canonicalUrl} />
+    {ogImageUrl && <meta property="og:image" content={ogImageUrl} />}
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content={ogImageUrl ? "summary_large_image" : "summary"} />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    {ogImageUrl && <meta name="twitter:image" content={ogImageUrl} />}
+
     <title>{title}</title>
     <ThemeScript />
   </head>

package/src/layouts/DocsLayout.astro

@@ -5,31 +5,46 @@ import Sidebar from "../components/Sidebar.astro";
 import TableOfContents from "../components/TableOfContents.astro";
 import MobileNav from "../components/MobileNav.astro";
 import CodeCopy from "../components/CodeCopy.astro";
+import Breadcrumb from "../components/Breadcrumb.astro";
+import Banner from "../components/Banner.astro";
 import { defaultLocale } from "virtual:barodoc/i18n";
 import { getLocaleFromPath } from "@barodoc/core";
+import config from "virtual:barodoc/config";
 
 interface PageLink {
   title: string;
   href: string;
 }
 
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
 interface Props {
   title: string;
   description?: string;
   headings?: { depth: number; slug: string; text: string }[];
   prevPage?: PageLink | null;
   nextPage?: PageLink | null;
+  editUrl?: string | null;
+  lastUpdated?: Date | null;
+  breadcrumbs?: BreadcrumbItem[];
 }
 
-const { title, description, headings = [], prevPage, nextPage } = Astro.props;
+const { title, description, headings = [], prevPage, nextPage, editUrl, lastUpdated, breadcrumbs = [] } = Astro.props;
 const currentPath = Astro.url.pathname;
 
 // Get locale from path
 const i18nConfig = { defaultLocale, locales: [defaultLocale] };
 const currentLocale = getLocaleFromPath(currentPath, i18nConfig);
+
+const hasFeedback = config.feedback?.enabled === true;
+const feedbackEndpoint = config.feedback?.endpoint;
 ---
 
 <BaseLayout title={title} description={description}>
+  <Banner />
   <Header currentLocale={currentLocale} currentPath={currentPath} />
   
   <!-- Centered container for docs layout -->
@@ -45,6 +60,7 @@ const currentLocale = getLocaleFromPath(currentPath, i18nConfig);
       <!-- Main Content: no min-width on mobile to avoid horizontal scroll -->
       <main class="flex-1 min-w-0 lg:min-w-[650px] max-w-[720px]">
         <div class="px-4 py-6 sm:px-6 sm:py-8 lg:px-8 lg:py-8">
+          {breadcrumbs.length > 0 && <Breadcrumb items={breadcrumbs} />}
           <article class="prose prose-gray dark:prose-invert max-w-none min-w-0 overflow-x-auto">
             <slot />
           </article>
@@ -94,10 +110,41 @@ const currentLocale = getLocaleFromPath(currentPath, i18nConfig);
           )}
 
           <!-- Page footer -->
-          <footer class="mt-6 pt-4 border-t border-[var(--color-border-light)]">
-            <p class="text-sm text-[var(--color-text-muted)]">
-              Was this page helpful? <a href="#" class="text-primary-600 dark:text-primary-400 hover:underline">Give us feedback</a>
-            </p>
+          <footer class="mt-6 pt-4 border-t border-[var(--color-border-light)] flex flex-col gap-3">
+            <div class="flex flex-wrap items-center justify-between gap-2 text-sm text-[var(--color-text-muted)]">
+              {lastUpdated && (
+                <span>
+                  Last updated: <time datetime={lastUpdated.toISOString()}>
+                    {lastUpdated.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" })}
+                  </time>
+                </span>
+              )}
+              {editUrl && (
+                <a
+                  href={editUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="inline-flex items-center gap-1 text-primary-600 dark:text-primary-400 hover:underline"
+                >
+                  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                  </svg>
+                  Edit this page
+                </a>
+              )}
+            </div>
+            {hasFeedback && (
+              <div class="doc-feedback flex items-center gap-3 text-sm text-[var(--color-text-muted)]" data-endpoint={feedbackEndpoint}>
+                <span>Was this page helpful?</span>
+                <button type="button" class="feedback-btn inline-flex items-center gap-1 px-2 py-1 rounded border border-[var(--color-border)] hover:bg-[var(--color-bg-secondary)] transition-colors" data-value="yes" aria-label="Yes">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3H14z" /></svg>
+                </button>
+                <button type="button" class="feedback-btn inline-flex items-center gap-1 px-2 py-1 rounded border border-[var(--color-border)] hover:bg-[var(--color-bg-secondary)] transition-colors" data-value="no" aria-label="No">
+                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 15v3.586a1 1 0 01-.293.707l-2 2A1 1 0 016 20.586V15m4 0h5.17a2 2 0 001.98-1.742l1.08-7.56A1 1 0 0017.242 4.5H10m0 10.5V4.5m0 0H7.5A2.5 2.5 0 005 7v3" /></svg>
+                </button>
+                <span class="feedback-thanks hidden text-green-600 dark:text-green-400">Thanks for your feedback!</span>
+              </div>
+            )}
           </footer>
         </div>
       </main>
@@ -118,4 +165,30 @@ const currentLocale = getLocaleFromPath(currentPath, i18nConfig);
   
   <!-- Code copy functionality -->
   <CodeCopy />
+
+  {hasFeedback && (
+    <script>
+      function initFeedback() {
+        document.querySelectorAll('.doc-feedback').forEach((el) => {
+          if (el.hasAttribute('data-init')) return;
+          el.setAttribute('data-init', 'true');
+          const endpoint = el.getAttribute('data-endpoint');
+          const thanks = el.querySelector('.feedback-thanks');
+          el.querySelectorAll('.feedback-btn').forEach((btn) => {
+            btn.addEventListener('click', async () => {
+              const value = btn.getAttribute('data-value');
+              const page = window.location.pathname;
+              el.querySelectorAll('.feedback-btn').forEach((b: any) => b.disabled = true);
+              if (thanks) thanks.classList.remove('hidden');
+              if (endpoint) {
+                try { await fetch(endpoint, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ page, value }) }); } catch {}
+              }
+            });
+          });
+        });
+      }
+      initFeedback();
+      document.addEventListener('astro:page-load', initFeedback);
+    </script>
+  )}
 </BaseLayout>

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

@@ -89,6 +89,28 @@ const nextPage = currentIndex < allPages.length - 1
   : null;
 
 const category = findCategory(cleanSlug);
+
+// Edit link
+const editBaseUrl = config.editLink?.baseUrl;
+const editUrl = editBaseUrl
+  ? `${editBaseUrl.replace(/\/$/, "")}/${doc.id}`
+  : null;
+
+// Last updated: use file modification if available
+let lastUpdated: Date | null = null;
+if (config.lastUpdated) {
+  const mod = (doc.data as Record<string, unknown>).lastUpdated;
+  if (mod instanceof Date) {
+    lastUpdated = mod;
+  }
+}
+
+// Breadcrumbs: [Group, Page Title]
+const breadcrumbs: { label: string; href?: string }[] = [];
+if (category) {
+  breadcrumbs.push({ label: category });
+}
+breadcrumbs.push({ label: doc.data.title });
 ---
 
 <DocsLayout 
@@ -97,6 +119,9 @@ const category = findCategory(cleanSlug);
   headings={headings}
   prevPage={prevPage}
   nextPage={nextPage}
+  editUrl={editUrl}
+  lastUpdated={lastUpdated}
+  breadcrumbs={breadcrumbs}
 >
   {category && (
     <p class="text-xs font-medium uppercase tracking-wider text-primary-600 dark:text-primary-400 mb-2">