@docsector/docsector-reader 3.5.0 → 4.0.0

package/README.md

@@ -64,17 +64,17 @@ Transform Markdown content into beautiful, navigable documentation sites — wit
 - 📅 **Last Updated Date** — Automatic per-page "last updated" date from git commit history, locale-formatted
 - 📊 **Translation Progress** — Automatic translation percentage based on header coverage
 - 🌐 **Accurate Available Translations** — Locale availability counter now uses actual localized page source presence, avoiding false negatives when metadata is equal
-- 🧠 **Markdown Negotiation** — Responds with Markdown when clients send `Accept: text/markdown`, while keeping HTML as browser default
-- 🔐 **Web Bot Auth** — Can publish a signed HTTP message signatures directory and includes helpers to sign outbound bot requests
-- 🧭 **Content Signals** — Injects `Content-Signal` policy in `robots.txt` with deterministic, idempotent build output
 - 🏠 **Markdown Home at Root** — Homepage is rendered from `src/pages/Homepage.{lang}.md` directly at `/`
 - 🌍 **Remote README as Home** — Optional build-time remote README source for homepage with automatic local fallback
 - 🔗 **GitHub-Compatible Heading Anchors** — Markdown headings use GitHub-style slugs so standard README Table of Contents links work inside Docsector
 - 🧬 **Scaffolded Homepage Override Wiring** — New consumer projects automatically wire `virtual:docsector-homepage-override` into i18n message building
-- 📖 **Expandable Markdown Sections** — Use `<d-expandable title="...">...</d-expandable>` to collapse secondary content while keeping rich Markdown support inside the body
-- 📎 **File Attachment Blocks** — Use `<d-file src="/files/...">...</d-file>` in Markdown to render downloadable file cards with automatic local size detection and support for external URLs
-- 🌐 **Embedded URL Blocks** — Use `<d-embedded-url url="https://...">...</d-embedded-url>` to render curated embeds for YouTube, Vimeo, Spotify, and CodePen with a safe link-card fallback for unsupported URLs
-- 🧭 **Quick Links Custom Element** — Use `<d-quick-links>` and `<d-quick-link>` in Markdown to render rich home navigation cards
+- 📖 **Expandable Markdown Sections** — Use `<d-block-expandable title="...">...</d-block-expandable>` to collapse secondary content while keeping rich Markdown support inside the body
+- 1️⃣ **Stepper Guides** — Use `<d-block-stepper>` with nested `<d-block-step title="...">...</d-block-step>` items to render native Quasar vertical steppers with rich Markdown and optional per-step icon overrides
+- 🕒 **Timeline Updates** — Use `<d-block-timeline>` with nested `<d-block-timeline-item date="...">...</d-block-timeline-item>` entries and optional `<d-block-timeline-tag>` labels to publish GitBook-inspired changelog items with direct-link anchors, tag icons/colors, and rich Markdown bodies
+- 📎 **File Attachment Blocks** — Use `<d-block-file src="/files/...">...</d-block-file>` in Markdown to render downloadable file cards with automatic local size detection and support for external URLs
+- 🌐 **Embedded URL Blocks** — Use `<d-block-embedded-url url="https://...">...</d-block-embedded-url>` to render curated embeds for YouTube, Vimeo, Spotify, and CodePen with a safe link-card fallback for unsupported URLs
+- 🧭 **Quick Links Custom Element** — Use `<d-block-quick-links>` and `<d-block-quick-link>` in Markdown to render rich home navigation cards
+- 🗂️ **Cards Custom Element** — Use `<d-block-cards>` and `<d-block-card>` in Markdown to render linked content cards with optional cover images
 - 🗂️ **API Catalog Well-Known** — Auto-generates `/.well-known/api-catalog` as Linkset JSON for machine-readable API discovery
 - 🗃️ **Multi-Version History** — Archive older major versions under `src/pages/.old/<version>/` and expose them at prefixed routes (e.g. `/v0.x/guide/...`) while keeping the current docs at unprefixed routes
 - 🏷️ **Version Selector Badges** — Every version in the sidebar selector displays a color-coded badge: green for released, orange for draft, red for deprecated; fully customizable via `badge: { label, color, textColor }`
@@ -1025,9 +1025,9 @@ Regular blockquotes without `[!TYPE]` continue to work normally.
 ### File Attachment Blocks
 
 ```html
-<d-file src="/files/manual/release-checklist.txt" title="Release checklist" size="1 KB">
+<d-block-file src="/files/manual/release-checklist.txt" title="Release checklist" size="1 KB">
 Download the example file bundled with the docs.
-</d-file>
+</d-block-file>
 ```
 
 Notes:
@@ -1040,9 +1040,9 @@ Notes:
 ### Embedded URL Blocks
 
 ```html
-<d-embedded-url url="https://www.youtube.com/watch?v=M7lc1UVf-VE" title="YouTube player demo">
+<d-block-embedded-url url="https://www.youtube.com/watch?v=M7lc1UVf-VE" title="YouTube player demo">
 Optional caption rendered as inline Markdown.
-</d-embedded-url>
+</d-block-embedded-url>
 ```
 
 Notes:

package/bin/docsector.js

@@ -23,7 +23,7 @@ const packageRoot = resolve(__dirname, '..')
 const args = process.argv.slice(2)
 const command = args[0]
 
-const VERSION = '3.5.0'
+const VERSION = '4.0.0'
 
 const HELP = `
   Docsector Reader v${VERSION}
@@ -488,288 +488,6 @@ Docsector Reader is a markdown-first documentation engine.
 - Repository: [docsector/docsector-reader](https://github.com/docsector/docsector-reader)
 `
 
-const TEMPLATE_BOOT_PAGE = `\
-<template>
-<q-page-container>
-  <q-page class="boot-page">
-    <!-- Hero Section -->
-    <div class="hero-section">
-      <div class="hero-content">
-        <div class="hero-icon-container">
-          <q-icon name="auto_stories" size="64px" color="white" />
-        </div>
-        <h1 class="hero-title">{{ projectName }}</h1>
-        <p class="hero-subtitle">{{ $t('_.home.texts[0]') }}{{ projectName }}</p>
-        <p class="hero-description">{{ $t('_.home.texts[2]') }}</p>
-        <div class="hero-actions">
-          <q-btn
-            unelevated
-            color="white"
-            text-color="primary"
-            label="Get Started"
-            icon="rocket_launch"
-            to="/guide/getting-started/overview"
-            class="hero-btn"
-            size="lg"
-            no-caps
-          />
-          <q-btn
-            v-if="projectUrl !== '#'"
-            outline
-            color="white"
-            label="GitHub"
-            icon="fab fa-github"
-            @click="openURL(projectUrl)"
-            class="hero-btn"
-            size="lg"
-            no-caps
-          />
-        </div>
-      </div>
-    </div>
-
-    <!-- Features Section -->
-    <div class="features-section">
-      <div class="features-grid">
-        <div class="feature-card">
-          <q-icon name="edit_note" size="40px" color="primary" />
-          <h3>Markdown Powered</h3>
-          <p>Write your documentation in Markdown. Pages are automatically converted into beautiful, navigable content.</p>
-        </div>
-        <div class="feature-card">
-          <q-icon name="translate" size="40px" color="primary" />
-          <h3>Multi-language</h3>
-          <p>Built-in i18n support. Add translations by creating locale files — no extra configuration needed.</p>
-        </div>
-        <div class="feature-card">
-          <q-icon name="palette" size="40px" color="primary" />
-          <h3>Beautiful UI</h3>
-          <p>Powered by Quasar Framework. Responsive, accessible, and production-ready out of the box.</p>
-        </div>
-        <div class="feature-card">
-          <q-icon name="bolt" size="40px" color="primary" />
-          <h3>Lightning Fast</h3>
-          <p>Vite-powered dev server with hot-reload. See your changes instantly as you write.</p>
-        </div>
-        <div class="feature-card">
-          <q-icon name="search" size="40px" color="primary" />
-          <h3>Full-text Search</h3>
-          <p>Instant client-side search across all your documentation pages and translations.</p>
-        </div>
-        <div class="feature-card">
-          <q-icon name="settings" size="40px" color="primary" />
-          <h3>Easy Configuration</h3>
-          <p>One config file for branding, links, languages, and GitHub integration.</p>
-        </div>
-      </div>
-    </div>
-
-    <!-- Quick Start Section -->
-    <div class="quickstart-section">
-      <h2 class="section-title">Quick Links</h2>
-      <div class="quickstart-grid">
-        <q-card flat bordered class="quickstart-card" clickable @click="$router.push('/guide/getting-started/overview')">
-          <q-card-section horizontal>
-            <q-card-section class="flex flex-center" style="width: 60px;">
-              <q-icon name="flag" size="28px" color="primary" />
-            </q-card-section>
-            <q-card-section>
-              <div class="text-subtitle1 text-weight-bold">Getting Started</div>
-              <div class="text-caption text-grey-7">Installation, setup, and your first page</div>
-            </q-card-section>
-            <q-space />
-            <q-card-section class="flex flex-center">
-              <q-icon name="chevron_right" color="grey-5" />
-            </q-card-section>
-          </q-card-section>
-        </q-card>
-      </div>
-    </div>
-
-    <!-- Footer -->
-    <div class="boot-footer">
-      <p>{{ $t('_.home.texts[1]') }}
-        <a :href="projectUrl" target="_blank" class="footer-link">Docsector Reader</a>
-      </p>
-    </div>
-  </q-page>
-</q-page-container>
-</template>
-
-<script setup>
-import { openURL } from 'quasar'
-import docsectorConfig from 'docsector.config.js'
-
-defineOptions({ name: 'BootPage' })
-
-const projectName = docsectorConfig.branding?.name || 'My Documentation'
-const projectUrl = docsectorConfig.links?.github || '#'
-</script>
-
-<style lang="sass" scoped>
-.boot-page
-  padding: 0 !important
-
-// Hero
-.hero-section
-  background: linear-gradient(135deg, #655529 0%, #8b7340 50%, #a08850 100%)
-  color: white
-  padding: 80px 24px 60px
-  text-align: center
-  position: relative
-  overflow: hidden
-
-  &::before
-    content: ''
-    position: absolute
-    top: -50%
-    left: -50%
-    width: 200%
-    height: 200%
-    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 60%)
-    animation: pulse 8s ease-in-out infinite
-
-@keyframes pulse
-  0%, 100%
-    transform: scale(1)
-  50%
-    transform: scale(1.1)
-
-.hero-content
-  position: relative
-  z-index: 1
-  max-width: 700px
-  margin: 0 auto
-
-.hero-icon-container
-  margin-bottom: 24px
-  .q-icon
-    opacity: 0.9
-
-.hero-title
-  font-size: 2.8rem
-  font-weight: 700
-  margin: 0 0 12px
-  line-height: 1.2
-  letter-spacing: -0.02em
-
-.hero-subtitle
-  font-size: 1.2rem
-  opacity: 0.9
-  margin: 0 0 8px
-  font-weight: 400
-
-.hero-description
-  font-size: 1rem
-  opacity: 0.7
-  margin: 0 0 32px
-
-.hero-actions
-  display: flex
-  gap: 16px
-  justify-content: center
-  flex-wrap: wrap
-
-.hero-btn
-  border-radius: 8px
-  padding: 8px 28px
-  font-weight: 600
-
-// Features
-.features-section
-  padding: 60px 24px
-  max-width: 1100px
-  margin: 0 auto
-
-.features-grid
-  display: grid
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))
-  gap: 24px
-
-.feature-card
-  padding: 28px 24px
-  border-radius: 12px
-  border: 1px solid #e8e8e8
-  transition: transform 0.2s, box-shadow 0.2s
-  text-align: center
-
-  &:hover
-    transform: translateY(-4px)
-    box-shadow: 0 8px 25px rgba(0,0,0,0.08)
-
-  h3
-    font-size: 1.1rem
-    font-weight: 600
-    margin: 16px 0 8px
-    color: #333
-
-  p
-    font-size: 0.9rem
-    color: #666
-    line-height: 1.5
-    margin: 0
-
-// Quick Start
-.quickstart-section
-  padding: 40px 24px 60px
-  max-width: 700px
-  margin: 0 auto
-
-.section-title
-  font-size: 1.6rem
-  font-weight: 700
-  text-align: center
-  margin: 0 0 24px
-  color: #333
-
-.quickstart-grid
-  display: flex
-  flex-direction: column
-  gap: 12px
-
-.quickstart-card
-  border-radius: 10px
-  transition: box-shadow 0.2s
-  cursor: pointer
-
-  &:hover
-    box-shadow: 0 4px 15px rgba(0,0,0,0.1)
-
-// Footer
-.boot-footer
-  text-align: center
-  padding: 24px
-  border-top: 1px solid #e8e8e8
-  color: #999
-  font-size: 0.85rem
-
-  .footer-link
-    color: #655529
-    text-decoration: none
-    font-weight: 500
-
-    &:hover
-      text-decoration: underline
-
-// Dark mode
-body.body--dark
-  .feature-card
-    border-color: #333
-    h3
-      color: #e0e0e0
-    p
-      color: #aaa
-
-  .section-title
-    color: #e0e0e0
-
-  .boot-footer
-    border-color: #333
-    .footer-link
-      color: #c4a856
-</style>
-`
-
 const TEMPLATE_404_PAGE = `\
 <template>
 <q-page-container>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docsector/docsector-reader",
-  "version": "3.5.0",
+  "version": "4.0.0",
   "description": "A documentation rendering engine built with Vue 3, Quasar v2 and Vite. Transform Markdown into beautiful, navigable documentation sites.",
   "productName": "Docsector Reader",
   "author": "Rodrigo de Araujo Vieira",

package/public/images/cards/getting-started-cover.svg

@@ -0,0 +1,60 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" role="img" aria-labelledby="title desc">
+  <title id="title">Getting started cover</title>
+  <desc id="desc">Abstract cover with warm gradients and onboarding steps.</desc>
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#12141c"/>
+      <stop offset="48%" stop-color="#1b2230"/>
+      <stop offset="100%" stop-color="#27384d"/>
+    </linearGradient>
+    <linearGradient id="panel" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#f1d8a1" stop-opacity="0.95"/>
+      <stop offset="100%" stop-color="#b78f41" stop-opacity="0.85"/>
+    </linearGradient>
+    <linearGradient id="accent" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#69d8c3"/>
+      <stop offset="100%" stop-color="#8ab6ff"/>
+    </linearGradient>
+    <filter id="blur" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="24"/>
+    </filter>
+  </defs>
+
+  <rect width="1280" height="720" fill="url(#bg)"/>
+  <circle cx="1120" cy="132" r="136" fill="#69d8c3" opacity="0.16" filter="url(#blur)"/>
+  <circle cx="180" cy="640" r="170" fill="#8ab6ff" opacity="0.18" filter="url(#blur)"/>
+
+  <rect x="90" y="96" width="470" height="528" rx="34" fill="#0f141c" opacity="0.92" stroke="#3a4c63"/>
+  <rect x="126" y="140" width="398" height="18" rx="9" fill="url(#accent)" opacity="0.9"/>
+  <rect x="126" y="188" width="182" height="28" rx="14" fill="#f5efe1" opacity="0.92"/>
+  <rect x="126" y="242" width="300" height="16" rx="8" fill="#8da6c7" opacity="0.7"/>
+  <rect x="126" y="272" width="260" height="16" rx="8" fill="#8da6c7" opacity="0.55"/>
+
+  <g transform="translate(126 344)">
+    <rect width="318" height="68" rx="18" fill="#17212d" stroke="#32465d"/>
+    <circle cx="36" cy="34" r="15" fill="#69d8c3"/>
+    <path d="M29 34l5 5 10-12" fill="none" stroke="#0d1722" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+    <rect x="72" y="22" width="110" height="12" rx="6" fill="#f1f5f9"/>
+    <rect x="72" y="42" width="160" height="10" rx="5" fill="#8da6c7" opacity="0.75"/>
+  </g>
+
+  <g transform="translate(126 430)">
+    <rect width="356" height="68" rx="18" fill="#17212d" stroke="#32465d"/>
+    <circle cx="36" cy="34" r="15" fill="#69d8c3" opacity="0.82"/>
+    <path d="M29 34l5 5 10-12" fill="none" stroke="#0d1722" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+    <rect x="72" y="22" width="132" height="12" rx="6" fill="#f1f5f9"/>
+    <rect x="72" y="42" width="200" height="10" rx="5" fill="#8da6c7" opacity="0.75"/>
+  </g>
+
+  <g transform="translate(640 88)">
+    <rect width="548" height="548" rx="44" fill="url(#panel)"/>
+    <rect x="78" y="84" width="392" height="244" rx="26" fill="#0f141c" opacity="0.92"/>
+    <path d="M128 282c42-72 86-108 132-108 35 0 69 15 103 44 31 27 58 40 80 40 39 0 73-21 104-64l29 20c-42 63-87 94-136 94-33 0-67-13-102-39-32-24-60-36-84-36-34 0-67 28-98 84z" fill="#69d8c3"/>
+    <circle cx="272" cy="206" r="46" fill="#8ab6ff" opacity="0.92"/>
+    <rect x="78" y="372" width="188" height="22" rx="11" fill="#0f141c" opacity="0.88"/>
+    <rect x="78" y="414" width="300" height="16" rx="8" fill="#243447" opacity="0.6"/>
+    <rect x="78" y="444" width="262" height="16" rx="8" fill="#243447" opacity="0.44"/>
+    <rect x="78" y="484" width="164" height="56" rx="18" fill="#0f141c" opacity="0.88"/>
+    <rect x="102" y="506" width="114" height="12" rx="6" fill="#f5efe1" opacity="0.88"/>
+  </g>
+</svg>

package/public/images/cards/quick-links-cover.svg

@@ -0,0 +1,71 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" role="img" aria-labelledby="title desc">
+  <title id="title">Quick links cover</title>
+  <desc id="desc">Abstract navigation cover with cards and directional accents.</desc>
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#10261f"/>
+      <stop offset="45%" stop-color="#16372d"/>
+      <stop offset="100%" stop-color="#1e4d3e"/>
+    </linearGradient>
+    <linearGradient id="card" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#f3f0e7"/>
+      <stop offset="100%" stop-color="#d5ddd1"/>
+    </linearGradient>
+    <linearGradient id="accent" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#69d8c3"/>
+      <stop offset="100%" stop-color="#d3b874"/>
+    </linearGradient>
+    <filter id="blur" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="26"/>
+    </filter>
+  </defs>
+
+  <rect width="1280" height="720" fill="url(#bg)"/>
+  <circle cx="154" cy="138" r="126" fill="#69d8c3" opacity="0.18" filter="url(#blur)"/>
+  <circle cx="1090" cy="598" r="170" fill="#d3b874" opacity="0.16" filter="url(#blur)"/>
+
+  <g transform="translate(98 112)">
+    <rect width="452" height="480" rx="42" fill="#0f1714" opacity="0.94" stroke="#385247"/>
+    <rect x="44" y="48" width="162" height="18" rx="9" fill="url(#accent)"/>
+    <rect x="44" y="100" width="278" height="18" rx="9" fill="#f3f0e7" opacity="0.94"/>
+    <rect x="44" y="136" width="212" height="14" rx="7" fill="#9cb5ac" opacity="0.58"/>
+
+    <g transform="translate(44 204)">
+      <rect width="364" height="86" rx="24" fill="#17231e" stroke="#33493f"/>
+      <rect x="28" y="24" width="116" height="12" rx="6" fill="#f3f0e7"/>
+      <rect x="28" y="46" width="176" height="10" rx="5" fill="#8aa196" opacity="0.82"/>
+      <circle cx="320" cy="43" r="20" fill="#22362d"/>
+      <path d="M311 43h18M321 34l9 9-9 9" fill="none" stroke="#69d8c3" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+
+    <g transform="translate(44 310)">
+      <rect width="330" height="86" rx="24" fill="#17231e" stroke="#33493f"/>
+      <rect x="28" y="24" width="96" height="12" rx="6" fill="#f3f0e7"/>
+      <rect x="28" y="46" width="156" height="10" rx="5" fill="#8aa196" opacity="0.82"/>
+      <circle cx="286" cy="43" r="20" fill="#22362d"/>
+      <path d="M277 43h18M287 34l9 9-9 9" fill="none" stroke="#69d8c3" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+  </g>
+
+  <g transform="translate(646 100)">
+    <rect width="536" height="520" rx="44" fill="url(#card)" opacity="0.98"/>
+    <rect x="58" y="56" width="420" height="248" rx="28" fill="#0f1714" opacity="0.94"/>
+    <g transform="translate(110 114)">
+      <rect width="116" height="116" rx="28" fill="#69d8c3"/>
+      <path d="M40 58h36M58 40l18 18-18 18" fill="none" stroke="#0f1714" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+    <g transform="translate(250 114)">
+      <rect width="116" height="116" rx="28" fill="#d3b874"/>
+      <path d="M40 58h36M58 40l18 18-18 18" fill="none" stroke="#0f1714" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+    <g transform="translate(180 272)">
+      <rect width="116" height="116" rx="28" fill="#8ab6ff"/>
+      <path d="M40 58h36M58 40l18 18-18 18" fill="none" stroke="#0f1714" stroke-width="10" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+    <rect x="58" y="360" width="204" height="18" rx="9" fill="#10261f" opacity="0.92"/>
+    <rect x="58" y="396" width="294" height="14" rx="7" fill="#425b52" opacity="0.6"/>
+    <rect x="58" y="424" width="248" height="14" rx="7" fill="#425b52" opacity="0.42"/>
+    <rect x="58" y="470" width="172" height="58" rx="18" fill="#10261f" opacity="0.92"/>
+    <rect x="84" y="493" width="120" height="12" rx="6" fill="#f3f0e7" opacity="0.92"/>
+  </g>
+</svg>

package/src/components/{DPageBlockquote.vue → DBlockBlockquote.vue}

@@ -2,6 +2,10 @@
 // defineProps is a compiler macro in <script setup>, no import needed
 import { computed } from 'vue'
 
+defineOptions({
+  name: 'DBlockBlockquote'
+})
+
 const props = defineProps({
   message: {
     type: String,