@md-plugins/quasar-app-extension-q-press 0.1.0-beta.0 → 0.1.0-beta.1

package/README.md

@@ -4,7 +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.
 
-> Q-Press currently targets Quasar Vite projects using `@quasar/app-vite` `^3.0.0-beta.12`. TypeScript processing is required.
+> Current beta release: `0.1.0-beta.1`.
+>
+> Q-Press currently targets Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.14`. TypeScript processing is required.
 
 ## Features
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@md-plugins/quasar-app-extension-q-press",
-  "version": "0.1.0-beta.0",
+  "version": "0.1.0-beta.1",
   "description": "QPress - The Ultimate Markdown Solution for Quasar Framework",
   "keywords": [
     "markdown",
@@ -21,6 +21,7 @@
     "url": "git+https://github.com/md-plugins/md-plugins.git"
   },
   "type": "module",
+  "main": "src/index.ts",
   "publishConfig": {
     "access": "public"
   },
@@ -28,29 +29,32 @@
     "@types/markdown-it": "^14.1.2",
     "fs-extra": "^11.3.4",
     "markdown-it": "^14.1.1",
-    "@md-plugins/md-plugin-blockquote": "0.1.0-beta.0",
-    "@md-plugins/md-plugin-containers": "0.1.0-beta.0",
-    "@md-plugins/md-plugin-codeblocks": "0.1.0-beta.0",
-    "@md-plugins/md-plugin-frontmatter": "0.1.0-beta.0",
-    "@md-plugins/md-plugin-image": "0.1.0-beta.0",
-    "@md-plugins/md-plugin-headers": "0.1.0-beta.0",
-    "@md-plugins/md-plugin-imports": "0.1.0-beta.0",
-    "@md-plugins/md-plugin-link": "0.1.0-beta.0",
-    "@md-plugins/md-plugin-inlinecode": "0.1.0-beta.0",
-    "@md-plugins/md-plugin-table": "0.1.0-beta.0",
-    "@md-plugins/md-plugin-title": "0.1.0-beta.0",
-    "@md-plugins/shared": "0.1.0-beta.0",
-    "@md-plugins/vite-md-plugin": "0.1.0-beta.0"
+    "@md-plugins/md-plugin-blockquote": "0.1.0-beta.1",
+    "@md-plugins/md-plugin-codeblocks": "0.1.0-beta.1",
+    "@md-plugins/md-plugin-frontmatter": "0.1.0-beta.1",
+    "@md-plugins/md-plugin-image": "0.1.0-beta.1",
+    "@md-plugins/md-plugin-imports": "0.1.0-beta.1",
+    "@md-plugins/md-plugin-headers": "0.1.0-beta.1",
+    "@md-plugins/md-plugin-inlinecode": "0.1.0-beta.1",
+    "@md-plugins/md-plugin-containers": "0.1.0-beta.1",
+    "@md-plugins/md-plugin-table": "0.1.0-beta.1",
+    "@md-plugins/md-plugin-link": "0.1.0-beta.1",
+    "@md-plugins/shared": "0.1.0-beta.1",
+    "@md-plugins/md-plugin-title": "0.1.0-beta.1",
+    "@md-plugins/vite-md-plugin": "0.1.0-beta.1"
   },
   "devDependencies": {
+    "@quasar/app-vite": "3.0.0-beta.14",
     "@types/markdown-it": "^14.1.2",
     "vite": "^8.0.3"
   },
   "peerDependencies": {
+    "@quasar/app-vite": ">=3.0.0-beta.14",
     "markdown-it": "^14.1.0"
   },
   "engines": {
-    "node": ">=20"
+    "node": ">=22.13",
+    "pnpm": ">=11.1.0"
   },
   "scripts": {
     "build": "node ./scripts/build.js",

package/src/index.ts

@@ -0,0 +1,70 @@
+/**
+ * Quasar App Extension index/runner script
+ * (runs on each dev/build)
+ *
+ * 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')
+  }
+
+  api.compatibleWith('quasar', '^2.0.0')
+  api.compatibleWith('@quasar/app-vite', '>=3.0.0-beta.14')
+
+  // here we extend /quasar.config, so we can add some Vite/Vue stuff
+  api.extendQuasarConf(async (config) => {
+    config.build ??= {}
+    config.build.viteVuePluginOptions ??= {}
+    config.framework ??= {}
+
+    // make sure 'vueRouterMode' has 'history' mode
+    if (config.build.vueRouterMode !== 'history') {
+      console.warn('Changing vueRouterMode to "history" - required for hash links to work correctly')
+      config.build.vueRouterMode = 'history'
+    }
+
+    // let Vite know to transpile md files
+    const include = config.build.viteVuePluginOptions.include
+    if (Array.isArray(include)) {
+      include.push(/\.(vue|md)$/)
+    }
+    else if (include !== void 0) {
+      config.build.viteVuePluginOptions.include = [include, /\.(vue|md)$/]
+    }
+    else {
+      config.build.viteVuePluginOptions.include = [/\.(vue|md)$/]
+    }
+
+    // let Vue know to auto import md files
+    const extensions = new Set(config.framework.autoImportVueExtensions || [])
+    extensions.add('md')
+    extensions.add('vue')
+    config.framework.autoImportVueExtensions = Array.from(extensions)
+
+    // add the appropriate plugins
+    const plugins = new Set(config.framework.plugins || [])
+    plugins.add('Cookies')
+    plugins.add('Dark')
+    plugins.add('Meta')
+    plugins.add('Notify')
+    config.framework.plugins = Array.from(plugins)
+
+    // const markdownPath = api.resolve.src('markdown')
+    // const path = api.resolve.src('siteConfig')
+    // if (fse.pathExistsSync(path) && fse.pathExistsSync(markdownPath)) {
+    //   const siteConfig = await import(path)
+    //   const { sidebar } = siteConfig.default || siteConfig
+
+    //   // add vite-md-plugin to quasar.config.js
+    //   config.vite.plugins.push(viteMdPlugin({ path: markdownPath, menu: sidebar }))
+    // }
+  })
+})

package/src/{install.js → install.ts}

@@ -4,16 +4,17 @@
  * Docs: https://quasar.dev/app-extensions/development-guide/install-api
  */
 
-import fse from 'fs-extra'
+import { defineInstallScript } from '@quasar/app-vite'
+import { existsSync } from 'node:fs'
 
-export default async function (api) {
+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.12')
+  api.compatibleWith('@quasar/app-vite', '>=3.0.0-beta.14')
 
   // project must have pinia installed
   if ((await api.getStorePackageName()) !== 'pinia') {
@@ -32,17 +33,18 @@ export default async function (api) {
   }
 
   const path = api.resolve.src('siteConfig')
-  if (fse.pathExistsSync(path)) {
+  if (existsSync(path)) {
     // this is an update scenario
     console.warn('-------------------------------------')
     console.warn("Update only for 'src/.q-press' folder")
     console.warn('-------------------------------------')
     api.render('./templates/update')
-  } else {
+  }
+  else {
     // this is a project initial setup
     console.warn('--------------------------------------------')
     console.warn('Initial setup. Be sure to read the\ndocumentation on the manual set up required.')
     console.warn('--------------------------------------------')
     api.render('./templates/init')
   }
-}
+})

package/src/templates/init/src/_q-press/components/MarkdownLink.vue

@@ -20,12 +20,16 @@ const internal = computed(
 
 <style lang="scss">
 .markdown-link {
-  color: $brand-primary;
+  color: scale-color($brand-primary, $lightness: -35%);
   text-decoration: none;
   border-bottom: 1px dotted currentColor;
   outline: 0;
   transition: color $header-quick-transition;
 
+  body.body--dark & {
+    color: $brand-primary;
+  }
+
   &:hover {
     color: inherit !important;
   }

package/src/templates/init/src/_q-press/css/app.scss

@@ -82,7 +82,7 @@ ul {
   line-height: $font-size;
   border-radius: $generic-border-radius;
   font-family: inherit;
-  color: $brand-primary;
+  color: scale-color($brand-primary, $lightness: -35%);
   vertical-align: baseline;
   border: 1px solid currentColor;
 }
@@ -107,14 +107,14 @@ ul {
     // .markdown-note__title,
     .markdown-link,
     .markdown-token {
-      color: $brand-primary;
+      color: scale-color($brand-primary, $lightness: -35%);
     }
     .markdown-token {
-      border-color: $brand-primary;
+      border-color: scale-color($brand-primary, $lightness: -35%);
     }
     & strong {
       font-weight: 700;
-      color: scale-color($brand-light-text, $lightness: 90%);
+      color: inherit;
     }
   }
 
@@ -132,7 +132,7 @@ ul {
     }
     & strong {
       font-weight: 700;
-      color: scale-color($positive, $lightness: 90%);
+      color: inherit;
     }
   }
 
@@ -150,7 +150,7 @@ ul {
     }
     & strong {
       font-weight: 700;
-      color: scale-color($warning, $lightness: 90%);
+      color: inherit;
     }
   }
 
@@ -169,7 +169,7 @@ ul {
 
     & strong {
       font-weight: 700;
-      color: scale-color($negative, $lightness: 90%);
+      color: inherit;
     }
   }
 
@@ -598,6 +598,9 @@ body.body--dark {
         border-color: #ddd;
         color: #ddd;
       }
+      .markdown-link {
+        color: $brand-primary;
+      }
     }
 
     &--tip {

package/src/templates/init/src/markdown/guides/upgrade-guide.md

@@ -7,17 +7,19 @@ related:
   - vite-plugins/vite-md-plugin/overview
 ---
 
-The `0.1.0` beta line moves MD-Plugins and Q-Press to the Quasar CLI Vite 3 beta toolchain. It is the right version to use when your Quasar application is being upgraded to `@quasar/app-vite` `^3.0.0-beta.12`.
+The `0.1.0` beta line moves MD-Plugins and Q-Press to the Quasar CLI Vite 3 beta toolchain. It is the right version to use when your Quasar application is being upgraded to `@quasar/app-vite` `>=3.0.0-beta.14`.
 
 ::: warning
-Q-Press and the Quasar app extensions now target Quasar Vite projects using `@quasar/app-vite` `^3.0.0-beta.12`. They are not intended for Webpack projects or JavaScript-only Quasar projects.
+Q-Press and the Quasar app extensions now target Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.14`. They are not intended for Webpack projects or JavaScript-only Quasar projects.
 :::
 
 ## Before You Upgrade
 
 - Make sure your app is already on a Quasar Vite setup.
-- Upgrade the app to `@quasar/app-vite` `^3.0.0-beta.12` or newer in the same beta line.
+- Upgrade the app to `@quasar/app-vite` `>=3.0.0-beta.14`.
 - Use TypeScript in the consuming Quasar project.
+- Import `defineConfig` in `quasar.config.ts` directly from `@quasar/app-vite`.
+- Use `/// <reference types="@quasar/app-vite/client" />` in `src/env.d.ts`.
 - Commit or stash local changes before invoking Q-Press, because the update flow can overwrite files in `src/.q-press`.
 
 ## Update Packages

package/src/templates/init/src/markdown/quasar-app-extensions/qpress/overview.md

@@ -6,7 +6,7 @@ desc: Q-Press App-Extension for Quasar.
 The Q-Press App Extension is a powerful tool for Quasar developers that simplifies the integration of Markdown content into Quasar applications. It leverages the capabilities of Vite and various Markdown plugins to transform Markdown files into Vue components, enabling a seamless and efficient workflow for content management.
 
 ::: warning
-Q-Press is for Quasar Vite projects using `@quasar/app-vite` `^3.0.0-beta.12` at this time. TypeScript processing is also required. Do not use if you are using Webpack or have a JavaScript-only project.
+Q-Press is for Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.14` at this time. TypeScript processing is also required. Do not use if you are using Webpack or have a JavaScript-only project.
 :::
 
 ::: tip
@@ -68,15 +68,9 @@ npm i prismjs
 
 ## Configuration
 
-### Modify `tsconfig.json`
+### Verify `tsconfig.json`
 
-Add the `resolveJsonModule: true` to your `tsconfig.json` file in your root folder:
-
-```json
-  "compilerOptions": {
-    "resolveJsonModule": true
-  }
-```
+Quasar CLI Vite 3 already generates a `tsconfig.json` with JSON module support. If you are migrating an older app, run `quasar prepare` after upgrading so the generated TypeScript config is refreshed.
 
 ### Modify `src/css/quasar.variables.scss`
 
@@ -99,7 +93,7 @@ Import Q-Press styles:
 ### Modify `quasar.config.ts`
 
 ```ts [maxheight=400px]
-import { defineConfig } from '#q-app'
+import { defineConfig } from '@quasar/app-vite'
 import type { Plugin } from 'vite'
 import { viteMdPlugin, type MenuItem, type MarkdownOptions } from '@md-plugins/vite-md-plugin'
 

package/src/templates/init/src/markdown/quasar-app-extensions/vite-md-plugin-app-ext/overview.md

@@ -9,7 +9,7 @@ related:
 The `viteMdPluginAppExt` is a [Quasar App Extension](https://quasar.dev/app-extensions/introduction) that integrates the `viteMdPlugin` into your Quasar project. This extension allows you to use Markdown files as Vue components, enabling a seamless integration of Markdown content into your Quasar application.
 
 ::: warning
-This app extension targets Quasar Vite projects using `@quasar/app-vite` `^3.0.0-beta.12`.
+This app extension targets Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.14`.
 :::
 
 ## Key Features

package/src/templates/update/src/_q-press/components/MarkdownLink.vue

@@ -20,12 +20,16 @@ const internal = computed(
 
 <style lang="scss">
 .markdown-link {
-  color: $brand-primary;
+  color: scale-color($brand-primary, $lightness: -35%);
   text-decoration: none;
   border-bottom: 1px dotted currentColor;
   outline: 0;
   transition: color $header-quick-transition;
 
+  body.body--dark & {
+    color: $brand-primary;
+  }
+
   &:hover {
     color: inherit !important;
   }

package/src/templates/update/src/_q-press/css/app.scss

@@ -82,7 +82,7 @@ ul {
   line-height: $font-size;
   border-radius: $generic-border-radius;
   font-family: inherit;
-  color: $brand-primary;
+  color: scale-color($brand-primary, $lightness: -35%);
   vertical-align: baseline;
   border: 1px solid currentColor;
 }
@@ -107,14 +107,14 @@ ul {
     // .markdown-note__title,
     .markdown-link,
     .markdown-token {
-      color: $brand-primary;
+      color: scale-color($brand-primary, $lightness: -35%);
     }
     .markdown-token {
-      border-color: $brand-primary;
+      border-color: scale-color($brand-primary, $lightness: -35%);
     }
     & strong {
       font-weight: 700;
-      color: scale-color($brand-light-text, $lightness: 90%);
+      color: inherit;
     }
   }
 
@@ -132,7 +132,7 @@ ul {
     }
     & strong {
       font-weight: 700;
-      color: scale-color($positive, $lightness: 90%);
+      color: inherit;
     }
   }
 
@@ -150,7 +150,7 @@ ul {
     }
     & strong {
       font-weight: 700;
-      color: scale-color($warning, $lightness: 90%);
+      color: inherit;
     }
   }
 
@@ -169,7 +169,7 @@ ul {
 
     & strong {
       font-weight: 700;
-      color: scale-color($negative, $lightness: 90%);
+      color: inherit;
     }
   }
 
@@ -598,6 +598,9 @@ body.body--dark {
         border-color: #ddd;
         color: #ddd;
       }
+      .markdown-link {
+        color: $brand-primary;
+      }
     }
 
     &--tip {

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom", "dom.iterable"],
+    "module": "preserve",
+    "moduleDetection": "force",
+    "moduleResolution": "bundler",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "target": "esnext"
+  },
+  "include": ["./src/index.ts", "./src/install.ts"],
+  "exclude": ["./node_modules"]
+}

package/src/index.js

@@ -1,61 +0,0 @@
-/**
- * Quasar App Extension index/runner script
- * (runs on each dev/build)
- *
- * Docs: https://quasar.dev/app-extensions/development-guide/index-api
- */
-
-// import fse from 'fs-extra'
-// import { viteMdPlugin } from '@md-plugins/vite-md-plugin'
-
-async function extendConfig(config /*, api*/) {
-  // console.log('config', config)
-  // console.log('api', api)
-
-  // make sure 'vueRouterMode' has 'history' mode
-  if (config.build.vueRouterMode !== 'history') {
-    console.warn('Changing vueRouterMode to "history" - required for hash links to work correctly')
-    config.build.vueRouterMode = 'history'
-  }
-
-  // let Vite know to transpile md files
-  config.build.viteVuePluginOptions.include = config.build.viteVuePluginOptions.include || []
-  config.build.viteVuePluginOptions.include.push(/\.(vue|md)$/)
-
-  // let Vue know to auto import md files
-  const extensions = new Set(config.framework.autoImportVueExtensions || [])
-  extensions.add('md')
-  extensions.add('vue')
-  config.framework.autoImportVueExtensions = Array.from(extensions)
-
-  // add the appropriate plugins
-  const plugins = new Set(config.framework.plugins || [])
-  plugins.add('Cookies')
-  plugins.add('Dark')
-  plugins.add('Meta')
-  plugins.add('Notify')
-  config.framework.plugins = Array.from(plugins)
-
-  // const markdownPath = api.resolve.src('markdown')
-  // const path = api.resolve.src('siteConfig')
-  // if (fse.pathExistsSync(path) && fse.pathExistsSync(markdownPath)) {
-  //   const siteConfig = await import(path)
-  //   const { sidebar } = siteConfig.default || siteConfig
-
-  //   // add vite-md-plugin to quasar.config.js
-  //   config.vite.plugins.push(viteMdPlugin({ path: markdownPath, menu: sidebar }))
-  // }
-}
-
-export default function (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.12')
-
-  // here we extend /quasar.config, so we can add some Vite/Vue stuff
-  api.extendQuasarConf(extendConfig)
-}