@docsector/docsector-reader 0.1.0

package/.eslintrc.cjs

@@ -0,0 +1,42 @@
+module.exports = {
+  root: true,
+
+  parserOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module'
+  },
+
+  env: {
+    node: true,
+    browser: true,
+    'vue/setup-compiler-macros': true
+  },
+
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended'
+  ],
+
+  plugins: [
+    'vue'
+  ],
+
+  globals: {
+    ga: 'readonly',
+    cordova: 'readonly',
+    __statics: 'readonly',
+    __QUASAR_SSR__: 'readonly',
+    __QUASAR_SSR_SERVER__: 'readonly',
+    __QUASAR_SSR_CLIENT__: 'readonly',
+    __QUASAR_SSR_PWA__: 'readonly',
+    process: 'readonly',
+    Capacitor: 'readonly',
+    chrome: 'readonly'
+  },
+
+  rules: {
+    'prefer-promise-reject-errors': 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-unused-vars': 'warn'
+  }
+}

package/LICENSE.md

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright (c) Rodrigo Vieira (rodrigo@slayer.tech)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,175 @@
+# Docsector Reader
+
+> A documentation rendering engine built with Vue 3, Quasar v2 and Vite.
+
+Transform Markdown content into beautiful, navigable documentation sites — with i18n, syntax highlighting, dark/light mode, and anchor navigation.
+
+## Features
+
+- **Markdown Rendering** — Write docs in Markdown, rendered with syntax highlighting (Prism.js)
+- **Internationalization (i18n)** — Multi-language support with HJSON locale files and per-page translations
+- **Dark/Light Mode** — Automatic theme switching with Quasar Dark Plugin
+- **Anchor Navigation** — Right-side Table of Contents tree with scroll tracking
+- **Search** — Menu search across all documentation content and tags
+- **Responsive** — Mobile-friendly with collapsible sidebar and drawers
+- **Status Badges** — Mark pages as `done`, `draft`, or `empty` with visual indicators
+- **Edit on GitHub** — Direct links to edit pages on your repository
+- **Translation Progress** — Automatic translation percentage based on header coverage
+- **Single Config File** — Customize branding, links, and languages via `docsector.config.js`
+
+## Quick Start
+
+### Install from NPM
+
+```bash
+npm install @docsector/docsector-reader
+```
+
+### Scaffold a new project
+
+```bash
+npx degit docsector/docsector-reader my-docs
+cd my-docs
+npm install
+```
+
+### Development
+
+```bash
+npx docsector dev
+# or
+npx quasar dev
+```
+
+The documentation site will be available at **http://localhost:8181**.
+
+### Production Build
+
+```bash
+npx docsector build
+# or
+npx quasar build
+```
+
+Output is placed in `dist/spa/` — ready to deploy to any static hosting.
+
+## Configuration
+
+Edit `docsector.config.js` at the project root:
+
+```javascript
+export default {
+  branding: {
+    logo: '/images/logo.png',
+    name: 'My Project',
+    version: 'v1.0.0'
+  },
+
+  links: {
+    github: 'https://github.com/org/repo',
+    discussions: 'https://github.com/org/repo/discussions',
+    chat: 'https://discord.gg/invite',
+    changelog: '/changelog'
+  },
+
+  github: {
+    editBaseUrl: 'https://github.com/org/repo/edit/main/src/pages'
+  },
+
+  languages: [
+    { image: '/images/flags/united-states-of-america.png', label: 'English (US)', value: 'en-US' },
+    { image: '/images/flags/brazil.png', label: 'Português (BR)', value: 'pt-BR' }
+  ],
+
+  defaultLanguage: 'en-US'
+}
+```
+
+## Project Structure
+
+```
+├── docsector.config.js      # Branding, links, languages
+├── src/
+│   ├── pages/
+│   │   ├── index.js         # Page registry (routes + metadata)
+│   │   ├── guide/           # Guide pages (.md files)
+│   │   └── manual/          # Manual pages (.md files)
+│   ├── components/          # Docsector Vue components
+│   ├── composables/         # Vue composables (useNavigator)
+│   ├── store/               # Vuex 4 modules
+│   ├── i18n/                # Language files (.hjson) + loader
+│   ├── layouts/             # DefaultLayout + SystemLayout
+│   └── boot/                # Boot files (store, i18n, QZoom, axios)
+└── public/                  # Static assets (logo, flags, icons)
+```
+
+## Adding Pages
+
+1. Register in `src/pages/index.js`:
+
+```javascript
+export default {
+  '/my-page': {
+    config: {
+      icon: 'description',
+      status: 'done',        // 'done' | 'draft' | 'empty'
+      type: 'guide',         // 'guide' | 'manual'
+      menu: {},
+      subpages: { showcase: false }
+    },
+    data: {
+      'en-US': { title: 'My Page' },
+      'pt-BR': { title: 'Minha Página' }
+    }
+  }
+}
+```
+
+2. Create Markdown files:
+
+```
+src/pages/guide/my-page.overview.en-US.md
+src/pages/guide/my-page.overview.pt-BR.md
+```
+
+## CLI Commands
+
+```bash
+docsector dev              # Start dev server (port 8181)
+docsector dev --port 3000  # Custom port
+docsector build            # Build for production
+docsector serve            # Serve production build
+docsector help             # Show help
+```
+
+## Programmatic API
+
+```javascript
+import { createDocsector, definePage } from '@docsector/docsector-reader'
+
+const config = createDocsector({
+  branding: { name: 'My Docs', version: 'v2.0.0' },
+  links: { github: 'https://github.com/org/repo' }
+})
+```
+
+## Tech Stack
+
+- **Vue 3** (Composition API + `<script setup>`)
+- **Quasar v2** (UI framework)
+- **Vite** (Build tool)
+- **Vuex 4** (State management)
+- **vue-i18n 9** (Internationalization)
+- **markdown-it** (Markdown parsing)
+- **Prism.js** (Syntax highlighting)
+- **HJSON** (Human-friendly JSON for locale files)
+
+## Contributing
+
+Contributions are welcome! Please open an issue or submit a pull request.
+
+## License
+
+Copyright (c) 2018-Present — Rodrigo Vieira (rodrigo@slayer.tech)
+
+[MIT License](http://en.wikipedia.org/wiki/MIT_License)

package/bin/docsector.js

@@ -0,0 +1,129 @@
+#!/usr/bin/env node
+
+/**
+ * Docsector Reader CLI
+ *
+ * Usage:
+ *   docsector dev     — Start development server with hot-reload
+ *   docsector build   — Build optimized SPA for production
+ *   docsector serve   — Serve the production build locally
+ *   docsector help    — Show help information
+ */
+
+import { execSync, spawn } from 'child_process'
+import { existsSync } from 'fs'
+import { resolve, dirname } from 'path'
+import { fileURLToPath } from 'url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+const packageRoot = resolve(__dirname, '..')
+
+const args = process.argv.slice(2)
+const command = args[0]
+
+const VERSION = '0.1.0'
+
+const HELP = `
+  Docsector Reader v${VERSION}
+  A documentation rendering engine built with Vue 3, Quasar v2 and Vite.
+
+  Usage:
+    docsector <command> [options]
+
+  Commands:
+    dev        Start development server with hot-reload (port 8181)
+    build      Build optimized SPA for production (output: dist/spa/)
+    serve      Serve the production build locally
+    version    Show version number
+    help       Show this help message
+
+  Options:
+    --port <number>   Override dev server port (default: 8181)
+
+  Examples:
+    docsector dev
+    docsector dev --port 3000
+    docsector build
+    docsector serve
+
+  Documentation:
+    https://github.com/docsector/docsector-reader
+`
+
+function findQuasarBin () {
+  // Try local node_modules first (user's project)
+  const localBin = resolve(process.cwd(), 'node_modules', '.bin', 'quasar')
+  if (existsSync(localBin)) return localBin
+
+  // Try package's own node_modules
+  const pkgBin = resolve(packageRoot, 'node_modules', '.bin', 'quasar')
+  if (existsSync(pkgBin)) return pkgBin
+
+  // Fall back to npx
+  return 'npx quasar'
+}
+
+function run (cmd, cmdArgs = []) {
+  const quasar = findQuasarBin()
+  const isNpx = quasar.startsWith('npx')
+
+  const spawnCmd = isNpx ? 'npx' : quasar
+  const spawnArgs = isNpx ? ['quasar', cmd, ...cmdArgs] : [cmd, ...cmdArgs]
+
+  const child = spawn(spawnCmd, spawnArgs, {
+    cwd: process.cwd(),
+    stdio: 'inherit',
+    env: {
+      ...process.env,
+      DOCSECTOR_ROOT: packageRoot
+    }
+  })
+
+  child.on('close', (code) => {
+    process.exit(code)
+  })
+
+  child.on('error', (err) => {
+    console.error(`Error running docsector ${cmd}:`, err.message)
+    process.exit(1)
+  })
+}
+
+switch (command) {
+  case 'dev': {
+    const portIdx = args.indexOf('--port')
+    const extraArgs = []
+    if (portIdx !== -1 && args[portIdx + 1]) {
+      extraArgs.push('--port', args[portIdx + 1])
+    }
+    run('dev', extraArgs)
+    break
+  }
+
+  case 'build':
+    run('build', args.slice(1))
+    break
+
+  case 'serve':
+    run('serve', ['dist/spa', '--history', ...args.slice(1)])
+    break
+
+  case 'version':
+  case '-v':
+  case '--version':
+    console.log(`docsector v${VERSION}`)
+    break
+
+  case 'help':
+  case '-h':
+  case '--help':
+  case undefined:
+    console.log(HELP)
+    break
+
+  default:
+    console.error(`Unknown command: "${command}"`)
+    console.log(HELP)
+    process.exit(1)
+}

package/docsector.config.js

@@ -0,0 +1,54 @@
+/**
+ * Docsector Reader Configuration
+ *
+ * This file allows you to customize the documentation reader
+ * for your specific project. Replace the values below with
+ * your project's branding, links, and GitHub configuration.
+ */
+export default {
+  // @ Branding
+  branding: {
+    // Logo image path (relative to public/)
+    logo: '/images/logo.png',
+    // Project name displayed in the sidebar
+    name: 'Docsector Reader',
+    // Version label displayed next to the name
+    version: 'v0.0.1'
+  },
+
+  // @ Links
+  links: {
+    github: 'https://github.com/docsector/docsector-reader',
+    discussions: 'https://github.com/docsector/docsector-reader/discussions',
+    chat: null, // e.g., Discord/Slack invite URL
+    email: null, // e.g., 'mailto:contact@example.com'
+    changelog: '/changelog',
+    roadmap: null, // e.g., external roadmap URL
+    sponsor: null, // e.g., GitHub Sponsors URL
+    explore: null // e.g., URL to explore related repos
+  },
+
+  // @ GitHub
+  github: {
+    // Base URL for "Edit on GitHub" links
+    // The page path will be appended to this URL
+    editBaseUrl: 'https://github.com/docsector/docsector-reader/edit/main/src/pages'
+  },
+
+  // @ Languages
+  languages: [
+    {
+      image: '/images/flags/united-states-of-america.png',
+      label: 'English (US)',
+      value: 'en-US'
+    },
+    {
+      image: '/images/flags/brazil.png',
+      label: 'Português (BR)',
+      value: 'pt-BR'
+    }
+  ],
+
+  // @ Default language
+  defaultLanguage: 'en-US'
+}

package/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= productName %></title>
+
+    <meta charset="utf-8">
+    <meta name="description" content="<%= productDescription %>">
+    <meta name="format-detection" content="telephone=no">
+    <meta name="msapplication-tap-highlight" content="no">
+    <meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=5, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
+
+    <link rel="icon" type="image/png" sizes="128x128" href="images/icons/favicon-128.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon-32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="images/icons/favicon-16.png">
+    <link rel="icon" type="image/ico" href="favicon.ico">
+  </head>
+  <body>
+    <!-- quasar:entry-point -->
+  </body>
+</html>

package/jsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "paths": {
+      "src/*": ["src/*"],
+      "components/*": ["src/components/*"],
+      "layouts/*": ["src/layouts/*"],
+      "pages/*": ["src/pages/*"],
+      "boot/*": ["src/boot/*"],
+      "stores/*": ["src/stores/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@docsector/docsector-reader",
+  "version": "0.1.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 Vieira <rodrigo@slayer.tech>",
+  "license": "MIT",
+  "private": false,
+  "type": "module",
+  "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./config": "./docsector.config.js"
+  },
+  "bin": {
+    "docsector": "./bin/docsector.js"
+  },
+  "files": [
+    "bin/",
+    "src/",
+    "public/",
+    "docsector.config.js",
+    "quasar.config.js",
+    "index.html",
+    "postcss.config.cjs",
+    ".eslintrc.cjs",
+    "jsconfig.json",
+    "README.md",
+    "LICENSE.md"
+  ],
+  "keywords": [
+    "documentation",
+    "docs",
+    "vue3",
+    "quasar",
+    "vite",
+    "markdown",
+    "i18n",
+    "docsector"
+  ],
+  "homepage": "https://github.com/docsector/docsector-reader#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/docsector/docsector-reader.git"
+  },
+  "bugs": {
+    "url": "https://github.com/docsector/docsector-reader/issues"
+  },
+  "scripts": {
+    "dev": "quasar dev",
+    "build": "quasar build",
+    "lint": "eslint --ext .js,.vue ./",
+    "format": "prettier --write \"**/*.{js,vue,scss,html,md,json}\" --ignore-path .gitignore",
+    "test": "echo \"No test specified\" && exit 0"
+  },
+  "dependencies": {
+    "@quasar/cli": "^2.5.0",
+    "@quasar/extras": "^1.16.12",
+    "axios": "^1.7.7",
+    "core-js": "^3.6.5",
+    "q-colorize-mixin": "^2.0.0-alpha.5",
+    "quasar": "^2.16.6",
+    "vue": "^3.5.13",
+    "vue-i18n": "^9.0.0",
+    "vue-router": "^4.0.0",
+    "vuex": "^4.0.1"
+  },
+  "devDependencies": {
+    "@quasar/app-vite": "^2.1.0",
+    "@quasar/quasar-app-extension-qmediaplayer": "^2.0.0-beta.6",
+    "autoprefixer": "^10.4.2",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-plugin-import": "^2.19.1",
+    "eslint-plugin-n": "^15.0.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-vue": "^9.0.0",
+    "hjson": "^3.2.2",
+    "markdown-it": "^13.0.1",
+    "markdown-it-attrs": "^4.1.6",
+    "prettier": "^2.5.1",
+    "prismjs": "^1.27.0"
+  },
+  "browserslist": [
+    "last 10 Chrome versions",
+    "last 10 Firefox versions",
+    "last 4 Edge versions",
+    "last 7 Safari versions",
+    "last 8 Android versions",
+    "last 8 ChromeAndroid versions",
+    "last 8 FirefoxAndroid versions",
+    "last 10 iOS versions",
+    "last 5 Opera versions"
+  ],
+  "engines": {
+    "node": "^20 || ^18",
+    "npm": ">= 9"
+  }
+}

package/postcss.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')
+  ]
+}