@farming-labs/svelte-theme 0.1.45 → 0.1.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/svelte-theme",
-  "version": "0.1.45",
+  "version": "0.1.48",
   "description": "Svelte UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "keywords": [
     "docs",
@@ -112,8 +112,8 @@
   "dependencies": {
     "gray-matter": "^4.0.3",
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.1.45",
-    "@farming-labs/svelte": "0.1.45"
+    "@farming-labs/docs": "0.1.48",
+    "@farming-labs/svelte": "0.1.48"
   },
   "peerDependencies": {
     "svelte": ">=5.0.0"

package/src/components/DocsContent.svelte

@@ -124,6 +124,23 @@
   );
   let showActionsAbove = $derived(pageActionsPosition === "above-title" && showPageActions);
   let showActionsBelow = $derived(pageActionsPosition === "below-title" && showPageActions);
+  let readingTimeValue = $derived(
+    typeof data.readingTime === "number"
+      ? Math.max(1, Math.ceil(data.readingTime))
+      : null
+  );
+  let readingTimeLabel = $derived(readingTimeValue ? `${readingTimeValue} min read` : null);
+  let showReadingTimeAbove = $derived(!!readingTimeLabel && showActionsAbove);
+  let showReadingTimeBelow = $derived(
+    !!readingTimeLabel &&
+      !showReadingTimeAbove &&
+      (showActionsBelow ||
+        showLastUpdatedBelowTitle ||
+        (!showPageActions && pageActionsPosition === "below-title"))
+  );
+  let showReadingTimeStandalone = $derived(
+    !!readingTimeLabel && !showReadingTimeAbove && !showReadingTimeBelow
+  );
   let feedbackPathKey = $derived(
     `${data.locale ?? ""}:${data.entry ?? config?.entry ?? "docs"}:${data.slug ?? ""}`
   );
@@ -373,6 +390,18 @@
           {/if}
         </div>
       {/if}
+      {#if 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>
+      {/if}
+      {#if 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>
+      {/if}
 
       <h1 class="fd-page-title">{data.title}</h1>
       {#if data.description}
@@ -383,6 +412,12 @@
           Last updated: {data.lastModified}
         </p>
       {/if}
+      {#if 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>
+      {/if}
 
       {#if showActionsBelow}
         <hr class="fd-page-actions-divider" aria-hidden="true" />
@@ -444,6 +479,12 @@
             </div>
           {/if}
         </div>
+        {#if 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>
+        {/if}
       {/if}
 
       {@html htmlWithoutFirstH1}

package/styles/docs.css

@@ -745,6 +745,33 @@ samp {
   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;