@md-plugins/quasar-app-extension-q-press 0.1.0-beta.2 → 0.1.0-beta.20

package/README.md

@@ -4,9 +4,9 @@ The Ultimate Markdown Solution for the Quasar Framework.
 
 See the [documentation](https://md-plugins.netlify.app/quasar-app-extensions/qpress/overview) for more information.
 
-> Current beta release: `0.1.0-beta.2`.
+> Current beta release: `0.1.0-beta.20`.
 >
-> Q-Press currently targets Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.14`. TypeScript processing is required.
+> Q-Press currently targets Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.33`. TypeScript processing is required.
 
 ## Features
 
@@ -26,26 +26,26 @@ See the [documentation](https://md-plugins.netlify.app/quasar-app-extensions/qpr
 - `quasar ext add @md-plugins/q-press`
 - Here is what gets installed on a **new** install:
   - `src/.q-press`
-  - `src/q-press.globals.d.ts`
   - `src/components`
   - `src/markdown`
   - `src/examples`
   - `src/siteConfig`
 - Here is what gets installed on an **update** install:
   - `src/.q-press`
-  - `src/q-press.globals.d.ts`
 
 2. Install `markdown-it` and `@types/markdown-it` in your project devDependencies
 
 - `npm i -D markdown-it @types/markdown-it`
 - `yarn add -D markdown-it @types/markdown-it`
 - `pnpm i -D markdown-it @types/markdown-it`
+- `bun add -d markdown-it @types/markdown-it`
 
-3. Add `prismjs` to your project dependencies
+3. Q-Press adds `shiki` to your project dependencies when invoked. If you are wiring the generated files manually, add it yourself:
 
-- `npm i prismjs`
-- `yarn add prismjs`
-- `pnpm add prismjs`
+- `npm i shiki`
+- `yarn add shiki`
+- `pnpm add shiki`
+- `bun add shiki`
 
 ## Modifications
 
@@ -62,8 +62,6 @@ See the [documentation](https://md-plugins.netlify.app/quasar-app-extensions/qpr
 
 - ```scss
   @import '../.q-press/css/app.scss';
-  @import '../.q-press/css/fonts.scss';
-  @import '../.q-press/css/prism-theme.scss';
   ```
 
 3. Modify your `quasar.config.ts`
@@ -94,11 +92,11 @@ See the [documentation](https://md-plugins.netlify.app/quasar-app-extensions/qpr
 
 - ```ts
   import type { RouteRecordRaw } from 'vue-router'
-  import mdPageList from 'src/markdown/listing'
+  import mdPageList from '@/markdown/listing'
   const routes = [
     {
       path: '/',
-      component: () => import('src/.q-press/layouts/MarkdownLayout.vue'),
+      component: () => import('@/.q-press/layouts/MarkdownLayout.vue'),
       children: [
         // Include the Landing Page route first
         ...Object.entries(mdPageList)
@@ -136,7 +134,7 @@ See the [documentation](https://md-plugins.netlify.app/quasar-app-extensions/qpr
     // but you can also remove it
     {
       path: '/:catchAll(.*)*',
-      component: () => import('pages/ErrorNotFound.vue'),
+      component: () => import('@/pages/ErrorNotFound.vue'),
     },
   ] as RouteRecordRaw[]
 
@@ -151,7 +149,7 @@ See the [documentation](https://md-plugins.netlify.app/quasar-app-extensions/qpr
   </template>
 
   <script setup lang="ts">
-    import { useDark } from 'src/.q-press/composables/dark'
+    import { useDark } from '@/.q-press/composables/dark'
     const { initDark } = useDark()
     initDark()
   </script>
@@ -222,7 +220,7 @@ If you don't have a `.prettierignore` file, create one and add the following:
 
 ## Updating
 
-When you update, only the `src/.q-press` folder will be updated as well as the file `src/q-press.globals.d.ts`. If you want to re-install everything, just remove the `src/siteConfig` folder.
+When you update, only the `src/.q-press` folder will be updated. If you want to re-install everything, just remove the `src/siteConfig` folder.
 
 To make it easier to update, you can use the following command:
 
@@ -234,6 +232,13 @@ quasar ext invoke @md-plugins/q-press
 
 In case this README falls out of date, please refer to the [documentation](https://md-plugins.netlify.app/quasar-app-extensions/qpress/overview) for the latest information.
 
+## Support
+
+If Q-Press is useful in your workflow and you want to support ongoing maintenance:
+
+GitHub Sponsors: https://github.com/sponsors/hawkeye64
+PayPal: https://paypal.me/hawkeye64
+
 ## License
 
 This project is licensed under the MIT License. See the [LICENSE](LICENSE.md) file for details.

package/dist/index.js

@@ -5,20 +5,51 @@
  * Docs: https://quasar.dev/app-extensions/development-guide/index-api
  */
 import { defineIndexScript } from '@quasar/app-vite';
-// import fse from 'fs-extra'
-// import { viteMdPlugin } from '@md-plugins/vite-md-plugin'
-export default defineIndexScript((api) => {
-    // verify this is a Vite project
-    if (!api.hasVite) {
-        throw new Error('This extension requires Vite');
+import { fileURLToPath } from 'node:url';
+const qPressGlobalsTsConfigPath = fileURLToPath(new URL('./q-press-globals.d.ts', import.meta.url)).replace(/\\/g, '/');
+function normalizeAlias(alias) {
+    if (Array.isArray(alias)) {
+        return [...alias];
+    }
+    return Object.entries(alias ?? {}).map(([find, replacement]) => ({
+        find,
+        replacement,
+    }));
+}
+function addQuasarSourceAlias(viteConf, appDir) {
+    const alias = normalizeAlias(viteConf.resolve?.alias);
+    viteConf.resolve ??= {};
+    viteConf.resolve.alias = [
+        ...alias,
+        {
+            find: /^quasar\/src\/(.*)$/,
+            replacement: `${appDir.replace(/\\/g, '/')}/node_modules/quasar/src/$1`,
+        },
+    ];
+}
+function addQPressGlobalsToTsConfig(tsConfig) {
+    tsConfig.files ??= [];
+    if (!tsConfig.files.includes(qPressGlobalsTsConfigPath)) {
+        tsConfig.files.push(qPressGlobalsTsConfigPath);
     }
+}
+function extendTypeScriptConfig(typescriptConfig) {
+    const userExtendTsConfig = typescriptConfig.extendTsConfig;
+    typescriptConfig.extendTsConfig = (tsConfig) => {
+        userExtendTsConfig?.(tsConfig);
+        addQPressGlobalsToTsConfig(tsConfig);
+    };
+}
+export default defineIndexScript((api) => {
     api.compatibleWith('quasar', '^2.0.0');
-    api.compatibleWith('@quasar/app-vite', '>=3.0.0-beta.14');
+    api.compatibleWith('@quasar/app-vite', '>=3.0.0-beta.33');
     // here we extend /quasar.config, so we can add some Vite/Vue stuff
     api.extendQuasarConf(async (config) => {
         config.build ??= {};
+        config.build.typescript ??= {};
         config.build.viteVuePluginOptions ??= {};
         config.framework ??= {};
+        extendTypeScriptConfig(config.build.typescript);
         // make sure 'vueRouterMode' has 'history' mode
         if (config.build.vueRouterMode !== 'history') {
             console.warn('Changing vueRouterMode to "history" - required for hash links to work correctly');
@@ -56,4 +87,7 @@ export default defineIndexScript((api) => {
         //   config.vite.plugins.push(viteMdPlugin({ path: markdownPath, menu: sidebar }))
         // }
     });
+    api.extendViteConf((viteConf, _invoke, aeApi) => {
+        addQuasarSourceAlias(viteConf, aeApi.appDir);
+    });
 });

package/dist/install.js

@@ -6,12 +6,8 @@
 import { defineInstallScript } from '@quasar/app-vite';
 import { existsSync } from 'node:fs';
 export default defineInstallScript(async (api) => {
-    // verify this is a Vite project
-    if (!api.hasVite) {
-        throw new Error('This extension requires Vite');
-    }
     api.compatibleWith('quasar', '^2.0.0');
-    api.compatibleWith('@quasar/app-vite', '>=3.0.0-beta.14');
+    api.compatibleWith('@quasar/app-vite', '>=3.0.0-beta.33');
     // project must have pinia installed
     if ((await api.getStorePackageName()) !== 'pinia') {
         console.error('-----------------------------');
@@ -26,6 +22,12 @@ export default defineInstallScript(async (api) => {
         console.error('----------------------------------');
         throw new Error('This extension requires TypeScript');
     }
+    api.extendPackageJson({
+        dependencies: {
+            mermaid: '^11.15.0',
+            shiki: '^4.1.0',
+        },
+    });
     const path = api.resolve.src('siteConfig');
     if (existsSync(path)) {
         // this is an update scenario

package/dist/q-press-globals.d.ts

@@ -0,0 +1,49 @@
+/// <reference types="@quasar/app-vite/client" />
+
+declare module '*.md'
+
+declare global {
+  interface ImportMetaHot {
+    accept(callback?: (..._args: unknown[]) => unknown): void
+  }
+
+  interface ImportMeta {
+    readonly env: ImportMetaEnv
+    glob: <T = unknown>(pattern: string) => Record<string, () => Promise<T>>
+    hot?: ImportMetaHot
+  }
+
+  interface TocMenuItem {
+    id: string
+    level: number
+    title: string
+    link?: string
+    deep?: boolean
+    sub?: boolean
+    onClick?: () => void
+    children?: TocMenuItem[]
+  }
+
+  interface MarkdownModule {
+    title?: string
+    headers?: TocMenuItem[]
+    frontmatter?: Record<string, unknown>
+    filename?: string
+    render: (..._args: unknown[]) => unknown
+  }
+
+  interface MenuItem {
+    name: string
+    path?: string
+    icon?: string
+    iconColor?: string
+    rightIcon?: string
+    rightIconColor?: string
+    badge?: string
+    children?: MenuItem[] | undefined
+    external?: boolean
+    expanded?: boolean
+  }
+}
+
+export {}

package/dist/templates/init/src/_q-press/api/components/MarkdownCode.json

@@ -6,7 +6,7 @@
   "props": {
     "code": {
       "type": "String",
-      "desc": "The code to display",
+      "desc": "The code to display with Shiki syntax highlighting",
       "examples": [
         "'const a = 1;'",
         "'<div>Hello World</div>'"
@@ -34,4 +34,4 @@
       "category": "content"
     }
   }
-}
+}

package/dist/templates/init/src/_q-press/api/components/MarkdownCodepen.json

@@ -4,18 +4,15 @@
     "docsUrl": "https://path-to-your-docs/markdown-codepen"
   },
   "props": {
-    "active": {
-      "type": "Boolean",
-      "desc": "Flag to indicate if the form should be active",
-      "category": "state"
-    },
-    "options": {
+    "title": {
       "type": "String",
-      "desc": "JSON string containing the CodePen options",
+      "desc": "Title used for the generated CodePen",
+      "required": true,
       "examples": [
-        "'{\"title\":\"My Pen\",\"html\":\"<div>Hello World</div>\"}'"
+        "'Basic Example'",
+        "'Advanced Playground'"
       ],
       "category": "content"
     }
   }
-}
+}

package/dist/templates/init/src/_q-press/api/components/MarkdownExample.json

@@ -13,10 +13,35 @@
       ],
       "category": "content"
     },
+    "file": {
+      "type": "String",
+      "desc": "Vue example file name without the .vue extension",
+      "required": true,
+      "examples": [
+        "'Basic'",
+        "'AdvancedUsage'"
+      ],
+      "category": "content"
+    },
+    "noEdit": {
+      "type": "Boolean",
+      "desc": "Hide the CodePen edit button",
+      "category": "behavior"
+    },
     "noGithub": {
       "type": "Boolean",
-      "desc": "Flag to indicate if the GitHub button should be hidden",
+      "desc": "Hide the GitHub source button",
+      "category": "behavior"
+    },
+    "scrollable": {
+      "type": "Boolean",
+      "desc": "Constrain the example content to a scrollable area",
+      "category": "content"
+    },
+    "overflow": {
+      "type": "Boolean",
+      "desc": "Allow the example content to manage overflow automatically",
       "category": "behavior"
     }
   }
-}
+}