@farming-labs/astro-theme 0.1.45 → 0.1.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/astro-theme",
-  "version": "0.1.45",
+  "version": "0.1.48",
   "description": "Astro UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "keywords": [
     "astro",
@@ -109,8 +109,8 @@
   },
   "dependencies": {
     "sugar-high": "^0.9.5",
-    "@farming-labs/astro": "0.1.45",
-    "@farming-labs/docs": "0.1.45"
+    "@farming-labs/astro": "0.1.48",
+    "@farming-labs/docs": "0.1.48"
   },
   "peerDependencies": {
     "astro": ">=4.0.0"

package/src/components/DocsContent.astro

@@ -84,6 +84,9 @@ const pageActionsAlignment = (() => {
   if (typeof pa === "object" && pa !== null && pa.alignment) return pa.alignment;
   return "left";
 })();
+const showPageActions = copyMarkdownEnabled || openDocsEnabled;
+const showActionsAbove = pageActionsPosition === "above-title" && showPageActions;
+const showActionsBelow = pageActionsPosition === "below-title" && showPageActions;
 
 const lastUpdatedConfig = (() => {
   const lu = config?.lastUpdated;
@@ -97,6 +100,17 @@ const lastUpdatedConfig = (() => {
 
 const showLastUpdatedInFooter = !!data.lastModified && lastUpdatedConfig.enabled && lastUpdatedConfig.position === "footer";
 const showLastUpdatedBelowTitle = !!data.lastModified && lastUpdatedConfig.enabled && lastUpdatedConfig.position === "below-title";
+const readingTimeValue =
+  typeof data.readingTime === "number"
+    ? Math.max(1, Math.ceil(data.readingTime))
+    : null;
+const readingTimeLabel = readingTimeValue ? `${readingTimeValue} min read` : null;
+const showReadingTimeAbove = !!readingTimeLabel && showActionsAbove;
+const showReadingTimeBelow =
+  !!readingTimeLabel &&
+  !showReadingTimeAbove &&
+  (showActionsBelow || showLastUpdatedBelowTitle || (!showPageActions && pageActionsPosition === "below-title"));
+const showReadingTimeStandalone = !!readingTimeLabel && !showReadingTimeAbove && !showReadingTimeBelow;
 const feedbackConfig = (() => {
   const defaults = {
     enabled: false,
@@ -188,11 +202,29 @@ const htmlWithoutFirstH1 = (data.html || "").replace(/<h1[^>]*>[\s\S]*?<\/h1>\s*
       )}
     </div>
   )}
+  {showReadingTimeAbove && (
+    <div class="fd-page-meta">
+      <span class="fd-page-meta-dot" aria-hidden="true">·</span>
+      <span class="fd-page-meta-item">{readingTimeLabel}</span>
+    </div>
+  )}
+  {showReadingTimeStandalone && (
+    <div class="fd-page-meta">
+      <span class="fd-page-meta-dot" aria-hidden="true">·</span>
+      <span class="fd-page-meta-item">{readingTimeLabel}</span>
+    </div>
+  )}
   <h1 class="fd-page-title">{data.title}</h1>
   {data.description && <p class="fd-page-description">{data.description}</p>}
   {showLastUpdatedBelowTitle && data.lastModified && (
     <p class="fd-last-modified fd-last-modified-below-title">Last updated: {data.lastModified}</p>
   )}
+  {showReadingTimeBelow && !showActionsBelow && (
+    <div class="fd-page-meta">
+      <span class="fd-page-meta-dot" aria-hidden="true">·</span>
+      <span class="fd-page-meta-item">{readingTimeLabel}</span>
+    </div>
+  )}
   {pageActionsPosition === "below-title" && (copyMarkdownEnabled || openDocsEnabled) && (
     <>
       <hr class="fd-page-actions-divider" aria-hidden="true" />
@@ -241,6 +273,12 @@ const htmlWithoutFirstH1 = (data.html || "").replace(/<h1[^>]*>[\s\S]*?<\/h1>\s*
           </div>
         )}
       </div>
+      {showReadingTimeBelow && (
+        <div class="fd-page-meta">
+          <span class="fd-page-meta-dot" aria-hidden="true">·</span>
+          <span class="fd-page-meta-item">{readingTimeLabel}</span>
+        </div>
+      )}
     </>
   )}
   <Fragment set:html={htmlWithoutFirstH1} />

package/styles/docs.css

@@ -1641,6 +1641,33 @@ html.dark pre.shiki {
   margin-bottom: 1rem;
 }
 
+.fd-page-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+  margin-bottom: 0.75rem;
+}
+
+.fd-page-meta-dot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--fd-font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);
+  font-size: 0.8rem;
+  line-height: 1;
+  color: color-mix(in srgb, var(--color-fd-muted-foreground) 78%, transparent);
+}
+
+.fd-page-meta-item {
+  font-family: var(--fd-font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0;
+  text-transform: uppercase;
+  color: var(--color-fd-muted-foreground);
+}
+
 .fd-feedback {
   margin-top: 2rem;
   margin-bottom: 1.25rem;