@farming-labs/nuxt-theme 0.1.44 → 0.1.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/nuxt-theme",
-  "version": "0.1.44",
+  "version": "0.1.47",
   "description": "Nuxt/Vue UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "keywords": [
     "docs",
@@ -81,7 +81,7 @@
   },
   "dependencies": {
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.1.44"
+    "@farming-labs/docs": "0.1.47"
   },
   "peerDependencies": {
     "nuxt": ">=3.0.0",

package/src/components/DocsContent.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { resolveReadingTimeOptions } from "@farming-labs/docs";
 import { computed, ref, onMounted, onUnmounted, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useHead } from "#app";
@@ -15,6 +16,7 @@ const props = defineProps<{
     description?: string;
     html: string;
     rawMarkdown?: string;
+    readingTime?: number | null;
     previousPage?: { name: string; url: string } | null;
     nextPage?: { name: string; url: string } | null;
     editOnGithub?: string;
@@ -168,6 +170,29 @@ const showPageActions = computed(
 );
 const showActionsAbove = computed(() => pageActionsPosition.value === "above-title" && showPageActions.value);
 const showActionsBelow = computed(() => pageActionsPosition.value === "below-title" && showPageActions.value);
+const readingTimeConfig = computed(() =>
+  resolveReadingTimeOptions(props.config?.readingTime as never),
+);
+const readingTimeValue = computed(() =>
+  readingTimeConfig.value.enabled && typeof props.data.readingTime === "number"
+    ? Math.max(1, Math.ceil(props.data.readingTime))
+    : null,
+);
+const readingTimeLabel = computed(() =>
+  readingTimeValue.value ? `${readingTimeValue.value} min read` : null,
+);
+const showReadingTimeAbove = computed(() => !!readingTimeLabel.value && showActionsAbove.value);
+const showReadingTimeBelow = computed(
+  () =>
+    !!readingTimeLabel.value &&
+    !showReadingTimeAbove.value &&
+    (showActionsBelow.value ||
+      showLastUpdatedBelowTitle.value ||
+      (!showPageActions.value && pageActionsPosition.value === "below-title")),
+);
+const showReadingTimeStandalone = computed(
+  () => !!readingTimeLabel.value && !showReadingTimeAbove.value && !showReadingTimeBelow.value,
+);
 const feedbackConfig = computed(() => {
   const defaults = {
     enabled: false,
@@ -415,12 +440,24 @@ onUnmounted(() => {
         </div>
       </div>
     </div>
+    <div v-if="showReadingTimeAbove" class="fd-page-meta">
+      <span class="fd-page-meta-dot" aria-hidden="true">·</span>
+      <span class="fd-page-meta-item">{{ readingTimeLabel }}</span>
+    </div>
+    <div v-if="showReadingTimeStandalone" 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>
     <p v-if="data.description" class="fd-page-description">{{ data.description }}</p>
     <p v-if="showLastUpdatedBelowTitle && data.lastModified" class="fd-last-modified fd-last-modified-below-title">
       Last updated: {{ data.lastModified }}
     </p>
+    <div v-if="showReadingTimeBelow && !showActionsBelow" class="fd-page-meta">
+      <span class="fd-page-meta-dot" aria-hidden="true">·</span>
+      <span class="fd-page-meta-item">{{ readingTimeLabel }}</span>
+    </div>
 
     <!-- Below-title actions -->
     <template v-if="showActionsBelow">
@@ -480,6 +517,10 @@ onUnmounted(() => {
           </div>
         </div>
       </div>
+      <div v-if="showReadingTimeBelow" class="fd-page-meta">
+        <span class="fd-page-meta-dot" aria-hidden="true">·</span>
+        <span class="fd-page-meta-item">{{ readingTimeLabel }}</span>
+      </div>
     </template>
 
     <div v-html="htmlWithoutFirstH1" />

package/styles/docs.css

@@ -750,6 +750,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;