@docsector/docsector-reader 4.0.1 → 4.2.0

package/README.md

@@ -75,10 +75,13 @@ Transform Markdown content into beautiful, navigable documentation sites — wit
 - 🌐 **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 JSON Reference Block** — Use `<d-block-api src="..." />` in Markdown to render Quasar-compatible API reference UIs from public JSON assets without inventing a new schema
 - 🗂️ **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 }`
 - 📂 **Tabbed Code Blocks** — Group consecutive fenced code blocks into tabs using the `group` and `tab` attributes in the fence info line
+- 🧪 **Live Code Example Blocks** — Use `<d-block-code-example src="..." />` to render bundled Vue SFC examples with a live preview, GitHub source link, source toggle, and CodePen export for compatible examples
+- 📏 **Accurate Source Code Line Counts** — Code example headers count visible lines correctly across LF, CRLF, and terminal newlines without inflating the total
 - 🍞 **Breadcrumb Path Display** — Show a file path breadcrumb above code blocks with the `breadcrumb` attribute; renders as clickable path segments
 - 🎨 **File Type Icons** — Automatically resolves file extension or filename to a Material Icon Theme SVG icon, shown inline in tabs and beside the last breadcrumb segment
 - ⚙️ **Single Config File** — Customize branding, links, and languages via `docsector.config.js`
@@ -1023,6 +1026,22 @@ Notes:
 Supported alert types: `NOTE`, `TIP`, `IMPORTANT`, `WARNING`, `CAUTION`.
 Regular blockquotes without `[!TYPE]` continue to work normally.
 
+### Code Example Blocks
+
+```html
+<d-block-code-example src="manual/code-examples/basic-counter" title="Basic counter">
+Optional caption rendered as inline Markdown.
+</d-block-code-example>
+```
+
+Notes:
+
+- Store live examples as Vue SFCs under `src/examples/**/*.vue`; for example, `src="manual/code-examples/basic-counter"` resolves `src/examples/manual/code-examples/BasicCounter.vue` after kebab-case normalization.
+- Readers get a live preview, a GitHub button for the example SFC, a source button with Template / Script / Style / All tabs, and a CodePen button when the example can be exported safely.
+- Use `expanded="true"` only when the source code should be visible by default.
+- CodePen export currently supports plain Vue SFCs with a template, optional style, and an Options API `export default` script. Named imports from `vue` and `quasar` are converted to browser globals.
+- Examples using `<script setup>`, TypeScript scripts, or local imports still render in Docsector, but the CodePen action is disabled. Use `codepen="false"` to hide it intentionally.
+
 ### File Attachment Blocks
 
 ```html

package/bin/docsector.js

@@ -23,7 +23,7 @@ const packageRoot = resolve(__dirname, '..')
 const args = process.argv.slice(2)
 const command = args[0]
 
-const VERSION = '4.0.1'
+const VERSION = '4.2.0'
 
 const HELP = `
   Docsector Reader v${VERSION}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docsector/docsector-reader",
-  "version": "4.0.1",
+  "version": "4.2.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/api/manual/http-client.json

@@ -0,0 +1,91 @@
+{
+  "meta": {
+    "docsUrl": "https://example.com/sdk/http-client"
+  },
+  "props": {
+    "baseUrl": {
+      "type": "String",
+      "desc": "Base URL used by the client.",
+      "default": "https://api.example.com",
+      "examples": ["https://api.example.com", "https://staging.example.com"],
+      "category": "configuration"
+    },
+    "timeout": {
+      "type": "Number",
+      "desc": "Request timeout in milliseconds.",
+      "default": 10000,
+      "category": "configuration"
+    },
+    "retries": {
+      "type": "Number",
+      "desc": "Retry attempts for idempotent calls.",
+      "default": 2,
+      "category": "behavior"
+    }
+  },
+  "methods": {
+    "request": {
+      "desc": "Perform an HTTP request.",
+      "params": {
+        "options": {
+          "type": "Object",
+          "desc": "Request options.",
+          "required": true,
+          "definition": {
+            "url": {
+              "type": "String",
+              "desc": "Absolute or relative URL.",
+              "required": true,
+              "examples": ["/status", "https://example.com/health"]
+            },
+            "method": {
+              "type": "String",
+              "desc": "HTTP method.",
+              "default": "GET",
+              "examples": ["GET", "POST"]
+            },
+            "headers": {
+              "type": "Object",
+              "desc": "Additional request headers.",
+              "required": false
+            }
+          }
+        }
+      },
+      "returns": {
+        "type": "Promise<ResponseLike>",
+        "desc": "Resolves with the parsed response wrapper."
+      },
+      "examples": ["client.request({ url: '/status' })"]
+    },
+    "cancelAll": {
+      "desc": "Abort all in-flight requests.",
+      "returns": {
+        "type": "void",
+        "desc": "No return value."
+      }
+    }
+  },
+  "events": {
+    "response": {
+      "desc": "Emitted after a response is resolved.",
+      "params": {
+        "payload": {
+          "type": "Object",
+          "desc": "Resolved response payload.",
+          "required": true
+        }
+      }
+    },
+    "error": {
+      "desc": "Emitted when a request fails.",
+      "params": {
+        "error": {
+          "type": "Error",
+          "desc": "The original request error.",
+          "required": true
+        }
+      }
+    }
+  }
+}

package/public/quasar-api/QSeparator.json

@@ -0,0 +1,39 @@
+{
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/separator"
+  },
+
+  "props": {
+    "dark": {
+      "extends": "dark"
+    },
+
+    "spaced": {
+      "type": ["Boolean", "String"],
+      "desc": "If set to true, the corresponding direction margins will be set to 8px; It can also be set to a size in CSS units, including unit name, or one of the xs|sm|md|lg|xl predefined sizes",
+      "examples": ["'12px'", "'sm'", "'md'"],
+      "category": "content"
+    },
+
+    "inset": {
+      "type": ["Boolean", "String"],
+      "desc": "If set to Boolean true, the left and right margins will be set to 16px. If set to 'item' then it will match a QItem's design. If set to 'item-thumbnail' then it will match the design of a QItem with a thumbnail on the left side",
+      "values": ["true", "false", "'item'", "'item-thumbnail'"],
+      "category": "content"
+    },
+
+    "vertical": {
+      "type": "Boolean",
+      "desc": "If set to true, the separator will be vertical.",
+      "category": "content"
+    },
+
+    "size": {
+      "extends": "size"
+    },
+
+    "color": {
+      "extends": "color"
+    }
+  }
+}