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

package/README.md

@@ -4,6 +4,8 @@ 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.
+
 ## Features
 
 - **Markdown**
@@ -22,14 +24,14 @@ 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.global.d.ts`
+  - `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.global.d.ts`
+  - `src/q-press.globals.d.ts`
 
 2. Install `markdown-it` and `@types/markdown-it` in your project devDependencies
 
@@ -70,7 +72,7 @@ See the [documentation](https://md-plugins.netlify.app/quasar-app-extensions/qpr
   export default defineConfig(async (ctx) => {
     // Dynamically import siteConfig
     const siteConfig = await import('./src/siteConfig')
-    const { sidebar } = siteConfig
+    const { sidebar } = siteConfig.default
     return {
       build: {
         vitePlugins: [
@@ -131,7 +133,7 @@ See the [documentation](https://md-plugins.netlify.app/quasar-app-extensions/qpr
     // Always leave this as last one,
     // but you can also remove it
     {
-      path: '/:catchAll(._)_',
+      path: '/:catchAll(.*)*',
       component: () => import('pages/ErrorNotFound.vue'),
     },
   ] as RouteRecordRaw[]
@@ -155,7 +157,7 @@ See the [documentation](https://md-plugins.netlify.app/quasar-app-extensions/qpr
 
 ## Running the App
 
-This is a Quasar app, so all you have to do is `quasar dev` and `quasar dev`. You can test it out now and you will have running the `MD-Plugins` web site.
+This is a Quasar app, so all you have to do is run `quasar dev`. You can test it out now and you will have the `MD-Plugins` web site running.
 
 All you need to do now is change the configuration and landing page to make it your own.
 
@@ -190,7 +192,7 @@ A. In your `eslint.config.js` file, add/replace the following in your rules:
       ],
 ```
 
-Q. Everytime I save a markdown file, `prettier` changes it so that it breaks. How can I prevent this?
+Q. Every time I save a markdown file, `prettier` changes it so that it breaks. How can I prevent this?
 A. This is both a `prettier` and `eslint` issue. In `eslint.config.js`, add the following to the top of the file, right after `export default [`:
 
 ```js
@@ -218,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.global.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 as well as the file `src/q-press.globals.d.ts`. 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:
 
@@ -233,11 +235,3 @@ In case this README falls out of date, please refer to the [documentation](https
 ## License
 
 This project is licensed under the MIT License. See the [LICENSE](LICENSE.md) file for details.
-
-```
-
-```
-
-```
-
-```

package/package.json

@@ -1,58 +1,56 @@
 {
   "name": "@md-plugins/quasar-app-extension-q-press",
-  "version": "0.1.0-alpha.29",
+  "version": "0.1.0-beta.0",
   "description": "QPress - The Ultimate Markdown Solution for Quasar Framework",
-  "author": "hawkeye64 <galbraith64@gmail.com>",
   "keywords": [
-    "markdown-it",
-    "quasarframework",
-    "quasar",
     "markdown",
+    "markdown-it",
     "q-press",
+    "quasar",
+    "quasarframework",
     "vite"
   ],
   "homepage": "https://github.com/md-plugins",
   "bugs": {
     "url": "https://github.com/md-plugins/md-plugins/issues"
   },
+  "license": "MIT",
+  "author": "hawkeye64 <galbraith64@gmail.com>",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/md-plugins/md-plugins.git"
   },
-  "license": "MIT",
   "type": "module",
-  "engines": {
-    "node": ">= 12.2.0",
-    "npm": ">= 5.6.0",
-    "yarn": ">= 1.6.0"
+  "publishConfig": {
+    "access": "public"
   },
   "dependencies": {
     "@types/markdown-it": "^14.1.2",
-    "markdown-it": "^14.1.0",
-    "@md-plugins/md-plugin-blockquote": "0.1.0-alpha.29",
-    "@md-plugins/md-plugin-codeblocks": "0.1.0-alpha.29",
-    "@md-plugins/md-plugin-containers": "0.1.0-alpha.29",
-    "@md-plugins/md-plugin-frontmatter": "0.1.0-alpha.29",
-    "@md-plugins/md-plugin-headers": "0.1.0-alpha.29",
-    "@md-plugins/md-plugin-image": "0.1.0-alpha.29",
-    "@md-plugins/md-plugin-imports": "0.1.0-alpha.29",
-    "@md-plugins/md-plugin-inlinecode": "0.1.0-alpha.29",
-    "@md-plugins/md-plugin-link": "0.1.0-alpha.29",
-    "@md-plugins/md-plugin-table": "0.1.0-alpha.29",
-    "@md-plugins/shared": "0.1.0-alpha.29",
-    "@md-plugins/md-plugin-title": "0.1.0-alpha.29",
-    "@md-plugins/vite-md-plugin": "0.1.0-alpha.29"
+    "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"
   },
   "devDependencies": {
     "@types/markdown-it": "^14.1.2",
-    "fs-extra": "^11.3.0",
-    "vite": "^6.1.0"
+    "vite": "^8.0.3"
   },
   "peerDependencies": {
     "markdown-it": "^14.1.0"
   },
-  "publishConfig": {
-    "access": "public"
+  "engines": {
+    "node": ">=20"
   },
   "scripts": {
     "build": "node ./scripts/build.js",

package/src/index.js

@@ -1,4 +1,3 @@
-/*global console*/
 /**
  * Quasar App Extension index/runner script
  * (runs on each dev/build)
@@ -15,7 +14,7 @@ async function extendConfig(config /*, api*/) {
 
   // make sure 'vueRouterMode' has 'history' mode
   if (config.build.vueRouterMode !== 'history') {
-    console.log('Changing vueRouterMode to "history" - required for hash links to work correctly')
+    console.warn('Changing vueRouterMode to "history" - required for hash links to work correctly')
     config.build.vueRouterMode = 'history'
   }
 
@@ -41,11 +40,10 @@ async function extendConfig(config /*, api*/) {
   // const path = api.resolve.src('siteConfig')
   // if (fse.pathExistsSync(path) && fse.pathExistsSync(markdownPath)) {
   //   const siteConfig = await import(path)
-  //   const { sidebar } = siteConfig
+  //   const { sidebar } = siteConfig.default || siteConfig
 
-  //   // viteMdPlugin(ctx.appPaths.srcDir + '/markdown', sidebar as MenuItem[]),
-  //   // add vite-md-plugin to quiasar.config.js
-  //   config.vite.plugins.push([viteMdPlugin, { path: markdownPath, menu: sidebar }])
+  //   // add vite-md-plugin to quasar.config.js
+  //   config.vite.plugins.push(viteMdPlugin({ path: markdownPath, menu: sidebar }))
   // }
 }
 
@@ -56,7 +54,7 @@ export default function (api) {
   }
 
   api.compatibleWith('quasar', '^2.0.0')
-  api.compatibleWith('@quasar/app-vite', '^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)

package/src/install.js

@@ -1,4 +1,3 @@
-/*global console*/
 /**
  * Quasar App Extension install script
  *
@@ -14,7 +13,7 @@ export default async function (api) {
   }
 
   api.compatibleWith('quasar', '^2.0.0')
-  api.compatibleWith('@quasar/app-vite', '^2.0.0')
+  api.compatibleWith('@quasar/app-vite', '^3.0.0-beta.12')
 
   // project must have pinia installed
   if ((await api.getStorePackageName()) !== 'pinia') {
@@ -35,15 +34,15 @@ export default async function (api) {
   const path = api.resolve.src('siteConfig')
   if (fse.pathExistsSync(path)) {
     // this is an update scenario
-    console.log('-------------------------------------')
-    console.log("Update only for 'src/.q-press' folder")
-    console.log('-------------------------------------')
+    console.warn('-------------------------------------')
+    console.warn("Update only for 'src/.q-press' folder")
+    console.warn('-------------------------------------')
     api.render('./templates/update')
   } else {
     // this is a project initial setup
-    console.log('--------------------------------------------')
-    console.log('Initial setup. Be sure to read the\ndocumentation on the manual set up required.')
-    console.log('--------------------------------------------')
+    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/MarkdownApi.vue

@@ -361,8 +361,8 @@ function getApiCount(parsedApi, tabs, innerTabs) {
 }
 
 const getJsonUrl =
-  process.env.DEV === true
-    ? (file) => `/@fs/${process.env.FS_QUASAR_FOLDER}/dist/api/${file}.json`
+  import.meta.env.QUASAR_DEV === true
+    ? (file) => `/@fs/${import.meta.env.QCLI_FS_QUASAR_FOLDER}/dist/api/${file}.json`
     : (file) => `/quasar-api/${file}.json`
 
 const props = defineProps({
@@ -466,7 +466,7 @@ function onFilterClick() {
   }
 }
 
-if (process.env.CLIENT) {
+if (import.meta.env.QUASAR_CLIENT) {
   onMounted(() => {
     if (props.file) {
       fetch(getJsonUrl(props.file))

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

@@ -197,17 +197,17 @@ function toggleExpand() {
   expanded.value = expanded.value === false
 }
 
-if (process.env.CLIENT) {
+if (import.meta.env.QUASAR_CLIENT) {
   onMounted(() => {
     examples.list.then((list) => {
       component.value = markRaw(
-        process.env.DEV
+        import.meta.env.QUASAR_DEV
           ? list.code[`/src/examples/${examples.name}/${props.file}.vue`].default
           : list[props.file],
       )
 
       parseComponent(
-        process.env.DEV
+        import.meta.env.QUASAR_DEV
           ? list.source[`/src/examples/${examples.name}/${props.file}.vue`]
           : list[`Raw${props.file}`],
       )

package/src/templates/init/src/_q-press/layouts/MarkdownPage.vue

@@ -177,7 +177,6 @@ const tocClass = computed(
   () => `markdown-page__toc-container--${props.toc !== void 0 ? 'fixed' : 'flowing'}`,
 )
 
-console.log('MarkdownPage props', props)
 </script>
 
 <style lang="scss">

package/src/templates/init/src/_q-press/layouts/MarkdownPageFooter.vue

@@ -19,9 +19,14 @@
             :target="item.external ? '_blank' : void 0"
             class="markdown-layout__item"
           >
-            <q-item-section v-if="item.image" class="letter-spacing-100"
-              ><q-img :src="item.image" :style="{ maxWidth: item.maxWidth ?? '150px' }"
-            /></q-item-section>
+            <q-item-section v-if="item.image" class="letter-spacing-100">
+              <img
+                :src="item.image"
+                :alt="item.name"
+                :style="{ maxWidth: item.maxWidth ?? '150px' }"
+                class="markdown-page-footer__image"
+              />
+            </q-item-section>
             <q-item-section v-else class="letter-spacing-100">{{ item.name }}</q-item-section>
           </q-item>
         </q-list>
@@ -105,6 +110,7 @@ function getMenu(path: string): SiteMenuItem[] {
           path: item.external === true ? item.path : `/${path}/${item.path}`,
           external: item.external,
           image: item.image ?? void 0,
+          maxWidth: item.maxWidth ?? void 0,
         } as SiteMenuItem)
       }
     }
@@ -140,6 +146,12 @@ const props = defineProps({
     font-size: ($font-size - 2px);
   }
 
+  &__image {
+    display: block;
+    height: auto;
+    width: 100%;
+  }
+
   &__nav {
     display: grid;
     grid-row-gap: 64px;

package/src/templates/init/src/_q-press/layouts/MarkdownSearch.vue

@@ -121,7 +121,7 @@ function fetchQuery (val, onResult, onError) {
       localRequestId === requestId && onError()
     })
 
-    xhr.open('POST', `https://search.quasar.dev/indexes/${ process.env.SEARCH_INDEX }/search`)
+    xhr.open('POST', `https://search.quasar.dev/indexes/${import.meta.env.QCLI_SEARCH_INDEX}/search`)
     xhr.setRequestHeader('Content-Type', 'application/json')
     xhr.setRequestHeader('Authorization', 'Bearer b7a6ea9a9978a4e4d994c1f9451210327f207441adbcf04a4aada3d17d829359')
     xhr.send(data)

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

@@ -0,0 +1,90 @@
+---
+title: Upgrade Guide
+desc: Upgrade MD-Plugins and Q-Press to the 0.1.0 beta.
+related:
+  - quasar-app-extensions/qpress/overview
+  - quasar-app-extensions/vite-md-plugin-app-ext/overview
+  - 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`.
+
+::: 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.
+:::
+
+## 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.
+- Use TypeScript in the consuming Quasar project.
+- Commit or stash local changes before invoking Q-Press, because the update flow can overwrite files in `src/.q-press`.
+
+## Update Packages
+
+For Q-Press projects, update the app extension package and then invoke it:
+
+```bash
+pnpm up @md-plugins/quasar-app-extension-q-press@beta
+quasar ext invoke @md-plugins/q-press
+```
+
+When prompted, choose `Overwrite All` if you want the generated Q-Press files to match the beta templates.
+
+For direct Vite plugin usage, update the packages you consume:
+
+```bash
+pnpm up @md-plugins/vite-md-plugin@beta @md-plugins/vite-examples-plugin@beta
+```
+
+## File Name Check
+
+Q-Press installs and updates this type shim:
+
+```text
+src/q-press.globals.d.ts
+```
+
+If your project still references `src/q-press.global.d.ts`, rename the reference to the plural `globals` filename.
+
+## Environment Variable Changes
+
+Quasar CLI Vite 3 exposes runtime flags through `import.meta.env`. If you copied older Q-Press internals into your own code, update them:
+
+| Old pattern                   | New pattern                              |
+| ----------------------------- | ---------------------------------------- |
+| `process.env.CLIENT`          | `import.meta.env.QUASAR_CLIENT`          |
+| `process.env.SERVER`          | `import.meta.env.QUASAR_SERVER`          |
+| `process.env.DEV`             | `import.meta.env.QUASAR_DEV`             |
+| `process.env.PROD`            | `import.meta.env.QUASAR_PROD`            |
+| `process.env.VUE_ROUTER_MODE` | `import.meta.env.QUASAR_VUE_ROUTER_MODE` |
+| `process.env.VUE_ROUTER_BASE` | `import.meta.env.QUASAR_VUE_ROUTER_BASE` |
+
+Q-Press also uses `QCLI_*` values for Quasar CLI provided build-time values, such as search index and filesystem paths.
+
+## Vite Plugin Configuration
+
+`viteMdPlugin` should be configured with an options object:
+
+```ts
+import { viteMdPlugin, type MenuItem } from '@md-plugins/vite-md-plugin'
+
+vitePlugins: [
+  viteMdPlugin({
+    path: ctx.appPaths.srcDir + '/markdown',
+    menu: sidebar as MenuItem[],
+  }),
+]
+```
+
+## Verify The Upgrade
+
+Run these checks in the consuming app:
+
+```bash
+pnpm install
+quasar prepare
+quasar build
+```
+
+If you use linting or formatting, run those checks after invoking Q-Press so any regenerated files are included.

package/src/templates/init/src/markdown/md-plugins/codeblocks/overview.md

@@ -682,7 +682,7 @@ md.use(codeblocksPlugin, {
   preClass: 'markdown-pre', // Customize the class for the pre tag
   codeClass: 'markdown-code', // Customize the class for the code tag
   pageScripts: [
-    "import MarkdownPrerender from 'src/.q-presss/components/MarkdownPrerender'", // ts file
+    "import MarkdownPrerender from 'src/.q-press/components/MarkdownPrerender'", // ts file
     "import MarkdownCopyButton from 'src/.q-press/components/MarkdownCopyButton.vue'",
   ], // Include page scripts
   langList: [

package/src/templates/init/src/markdown/other/release-notes.md

@@ -4,3 +4,5 @@ desc: The changelog for MD-Plugins packages.
 ---
 
 Release notes (with changelog) for MD-Plugins packages are available on [GitHub Releases](https://github.com/md-plugins/md-plugins/releases).
+
+If you are moving from the alpha packages to the `0.1.0` beta line, read the [Upgrade Guide](/guides/upgrade-guide) before updating a project.

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

@@ -6,11 +6,11 @@ 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 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.12` at this time. TypeScript processing is also required. Do not use if you are using Webpack or have a JavaScript-only project.
 :::
 
 ::: tip
-This website is built with **Q-Press**! When you install the App-Extension, you will be able have this website up and running in minutes. Later, you can make adjustments to the `src/siteConfig` and add your own markdown files in the `src/markdown` folder to make it your own.
+This website is built with **Q-Press**! When you install the App-Extension, you will be able to have this website up and running in minutes. Later, you can make adjustments to the `src/siteConfig` and add your own markdown files in the `src/markdown` folder to make it your own.
 :::
 
 ## Key Features
@@ -33,14 +33,14 @@ quasar ext add @md-plugins/q-press
 
 - **New Install:**
   - `src/.q-press`
-  - `src/q-press.global.d.ts`
+  - `src/q-press.globals.d.ts`
   - `src/components`
   - `src/markdown`
   - `src/examples`
   - `src/siteConfig`
 - **Update Install:**
   - `src/.q-press`
-  - `src/q-press.global.d.ts`
+  - `src/q-press.globals.d.ts`
 
 ### Additional Dependencies
 
@@ -99,7 +99,7 @@ Import Q-Press styles:
 ### Modify `quasar.config.ts`
 
 ```ts [maxheight=400px]
-import { defineConfig } from '#q-app/wrappers'
+import { defineConfig } from '#q-app'
 import type { Plugin } from 'vite'
 import { viteMdPlugin, type MenuItem, type MarkdownOptions } from '@md-plugins/vite-md-plugin'
 
@@ -283,14 +283,14 @@ If you don't have a `.prettierignore` file, create one in the root of your proje
 
 ```bash
 # Ignore all Markdown files:
-\*_/_.md
+**/*.md
 ```
 
 :::
 
 ## Updating
 
-When you update, only the `src/.q-press` folder will be updated as well as the file `src/q-press.global.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 as well as the file `src/q-press.globals.d.ts`. 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:
 

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

@@ -8,6 +8,10 @@ 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`.
+:::
+
 ## Key Features
 
 - **Markdown as Vue Components**: Transform Markdown files into Vue components, allowing you to write and manage content in Markdown while leveraging the power of Vue and Quasar.
@@ -46,16 +50,16 @@ framework: {
 To install the `viteMdPluginAppExt` extension, use the following command:
 
 ```bash
-pnpm add @md-plugins/vite-md-plugin-app-ext
+quasar ext add @md-plugins/vite-md-plugin
 ```
 
 ## Usage
 
 After installing the extension, you need to configure it in your Quasar project. Here are the steps to get started:
 
-1. **Import `@md-plugins/vite-md-plugin`:**
+1. **Import `viteMdPlugin`:**
 
-   Update your `quasar.config.js` or `quasar.config.ts` to include the `@md-plugins/vite-md-plugin` extension:
+   Update your `quasar.config.js` or `quasar.config.ts` to include the `@md-plugins/vite-md-plugin` package:
 
    ```js
    import { viteMdPlugin, type MenuItem } from '@md-plugins/vite-md-plugin'
@@ -72,7 +76,10 @@ After installing the extension, you need to configure it in your Quasar project.
 
    ```js
    vitePlugins: [
-     viteMdPlugin(ctx.appPaths.srcDir + '/markdown', sidebar as MenuItem[]),
+     viteMdPlugin({
+       path: ctx.appPaths.srcDir + '/markdown',
+       menu: sidebar as MenuItem[],
+     }),
      // ...
    ]
    ```

package/src/templates/init/src/markdown/vite-plugins/vite-examples-plugin/advanced.md

@@ -72,7 +72,7 @@ Here is an example of how you can configure the `viteExamplesPlugin` with custom
 ```typescript
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import { viteExamplesPlugin } from 'vite-examples-plugin'
+import { viteExamplesPlugin } from '@md-plugins/vite-examples-plugin'
 
 export default defineConfig(({ mode }) => {
   const isProduction = mode === 'production'
@@ -103,7 +103,7 @@ If you’re using the Quasar Framework with Vite, additional configuration is ne
 1. **Update `quasar.config.(js|ts)`**:
 
 ```typescript
-import { viteExamplesPlugin } from 'vite-examples-plugin'
+import { viteExamplesPlugin } from '@md-plugins/vite-examples-plugin'
 
 export default defineConfig(({ mode }) => {
   const isProduction = mode === 'production'

package/src/templates/init/src/markdown/vite-plugins/vite-examples-plugin/overview.md

@@ -59,7 +59,7 @@ To use the Vite Examples plugin with Vite, you can configure it as follows:
 ```typescript
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import { viteExamplesPlugin, viteManualChunks } from 'vite-examples-plugin'
+import { viteExamplesPlugin, viteManualChunks } from '@md-plugins/vite-examples-plugin'
 
 export default defineConfig(({ mode }) => {
   const isProduction = mode === 'production'

package/src/templates/init/src/markdown/vite-plugins/vite-md-plugin/advanced.md

@@ -136,7 +136,7 @@ If you’re using the Quasar Framework with Vite, additional configuration is ne
 
 ```typescript
 import { viteMdPlugin, type MenuItem, type MarkdownOptions } from '@md-plugins/vite-md-plugin'
-import { menu } from './src/assets/menu'; // be sure to create this file
+import { menu } from './src/assets/menu' // be sure to create this file
 
 export default defineConfig((ctx) => {
   // ...
@@ -148,14 +148,11 @@ export default defineConfig((ctx) => {
     },
 
     vitePlugins: [
-      [
-        viteMdPlugin,
-        {
-          path: ctx.appPaths.srcDir + '/markdown',
-          menu: sidebar as MenuItem[],
-          // options: myOptions as MarkdownOptions
-        },
-      ],
+      viteMdPlugin({
+        path: ctx.appPaths.srcDir + '/markdown',
+        menu: menu as MenuItem[],
+        // config: myOptions as MarkdownOptions,
+      }),
       // ...
     ],
   },

package/src/templates/init/src/markdown/vite-plugins/vite-md-plugin/overview.md

@@ -59,7 +59,7 @@ To use the `viteMdPlugin`, configure it in your Vite project:
 ```typescript
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import { viteMdPlugin } from 'vite-md-plugin'
+import { viteMdPlugin } from '@md-plugins/vite-md-plugin'
 
 const menu = [] // Define your navigation menu structure here
 const basePath = '/docs' // Base path prefix
@@ -76,8 +76,8 @@ If you’re using the Quasar Framework, additional configuration is needed to en
 1. Update `quasar.config.(js|ts)`:
 
 ```typescript
-import { viteMdPlugin } from '@md-plugins/vite-md-plugin';
-import { menu } from './src/assets/menu'; // be sure to create this file
+import { viteMdPlugin, type MenuItem, type MarkdownOptions } from '@md-plugins/vite-md-plugin'
+import { menu } from './src/assets/menu' // be sure to create this file
 
 export default defineConfig((ctx) => {
   // ...
@@ -94,14 +94,11 @@ build: {
   },
 
   vitePlugins: [
-    [
-      viteMdPlugin,
-      {
-        path: ctx.appPaths.srcDir + '/markdown',
-        menu: sidebar as MenuItem[],
-        // options: myOptions as MarkdownOptions
-      },
-    ],
+    viteMdPlugin({
+      path: ctx.appPaths.srcDir + '/markdown',
+      menu: menu as MenuItem[],
+      // config: myOptions as MarkdownOptions,
+    }),
     // ...
   ],
 },
@@ -119,8 +116,8 @@ The `viteMdPlugin` allows you to define a navigation structure that can be updat
 
 ```typescript
 const menu = [
-  { title: 'Home', path: '/home' },
-  { title: 'About', path: '/about' },
+  { name: 'Home', path: '/home' },
+  { name: 'About', path: '/about' },
 ]
 ```
 
@@ -130,10 +127,10 @@ This menu is passed as a parameter to the plugin and can be used to build a dyna
 
 The `viteMdPlugin` accepts the following parameters:
 
-| Parameter | Type       | Description                                                                                |
-| --------- | ---------- | ------------------------------------------------------------------------------------------ |
-| path      | string     | The base path prefix for routing or file resolution.                                       |
-| menu      | MenuItem[] | An array representing the navigation menu structure. Each item should have title and path. |
+| Parameter | Type       | Description                                                                               |
+| --------- | ---------- | ----------------------------------------------------------------------------------------- |
+| path      | string     | The base path prefix for routing or file resolution.                                      |
+| menu      | MenuItem[] | An array representing the navigation menu structure. Each item should have name and path. |
 
 ## MenuItem Type
 

package/src/templates/init/src/siteConfig/index.ts

@@ -118,7 +118,7 @@ const socialLinks = {
 const netlifyLink = {
   path: 'https://www.netlify.com',
   external: true,
-  image: 'https://www.netlify.com/img/global/badges/netlify-color-accent.svg',
+  image: 'https://www.netlify.com/assets/badges/netlify-badge-color-accent.svg',
   name: 'Deploys by Netlify',
   maxWidth: '120px',
 }
@@ -131,6 +131,7 @@ const SponsorsLinks = {
       path: netlifyLink.path,
       external: netlifyLink.external,
       image: netlifyLink.image,
+      maxWidth: netlifyLink.maxWidth,
     },
   ],
 }
@@ -289,6 +290,10 @@ const guidesMenu: SiteMenuItem = {
   name: 'Guides',
   mq: 1100, // media query breakpoint
   children: [
+    {
+      name: 'Upgrade Guide',
+      path: '/guides/upgrade-guide',
+    },
     {
       name: 'FAQ',
       path: '/guides/faq',

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

@@ -361,8 +361,8 @@ function getApiCount(parsedApi, tabs, innerTabs) {
 }
 
 const getJsonUrl =
-  process.env.DEV === true
-    ? (file) => `/@fs/${process.env.FS_QUASAR_FOLDER}/dist/api/${file}.json`
+  import.meta.env.QUASAR_DEV === true
+    ? (file) => `/@fs/${import.meta.env.QCLI_FS_QUASAR_FOLDER}/dist/api/${file}.json`
     : (file) => `/quasar-api/${file}.json`
 
 const props = defineProps({
@@ -466,7 +466,7 @@ function onFilterClick() {
   }
 }
 
-if (process.env.CLIENT) {
+if (import.meta.env.QUASAR_CLIENT) {
   onMounted(() => {
     if (props.file) {
       fetch(getJsonUrl(props.file))

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

@@ -197,17 +197,17 @@ function toggleExpand() {
   expanded.value = expanded.value === false
 }
 
-if (process.env.CLIENT) {
+if (import.meta.env.QUASAR_CLIENT) {
   onMounted(() => {
     examples.list.then((list) => {
       component.value = markRaw(
-        process.env.DEV
+        import.meta.env.QUASAR_DEV
           ? list.code[`/src/examples/${examples.name}/${props.file}.vue`].default
           : list[props.file],
       )
 
       parseComponent(
-        process.env.DEV
+        import.meta.env.QUASAR_DEV
           ? list.source[`/src/examples/${examples.name}/${props.file}.vue`]
           : list[`Raw${props.file}`],
       )

package/src/templates/update/src/_q-press/layouts/MarkdownPage.vue

@@ -177,7 +177,6 @@ const tocClass = computed(
   () => `markdown-page__toc-container--${props.toc !== void 0 ? 'fixed' : 'flowing'}`,
 )
 
-console.log('MarkdownPage props', props)
 </script>
 
 <style lang="scss">

package/src/templates/update/src/_q-press/layouts/MarkdownPageFooter.vue

@@ -19,9 +19,14 @@
             :target="item.external ? '_blank' : void 0"
             class="markdown-layout__item"
           >
-            <q-item-section v-if="item.image" class="letter-spacing-100"
-              ><q-img :src="item.image" :style="{ maxWidth: item.maxWidth ?? '150px' }"
-            /></q-item-section>
+            <q-item-section v-if="item.image" class="letter-spacing-100">
+              <img
+                :src="item.image"
+                :alt="item.name"
+                :style="{ maxWidth: item.maxWidth ?? '150px' }"
+                class="markdown-page-footer__image"
+              />
+            </q-item-section>
             <q-item-section v-else class="letter-spacing-100">{{ item.name }}</q-item-section>
           </q-item>
         </q-list>
@@ -105,6 +110,7 @@ function getMenu(path: string): SiteMenuItem[] {
           path: item.external === true ? item.path : `/${path}/${item.path}`,
           external: item.external,
           image: item.image ?? void 0,
+          maxWidth: item.maxWidth ?? void 0,
         } as SiteMenuItem)
       }
     }
@@ -140,6 +146,12 @@ const props = defineProps({
     font-size: ($font-size - 2px);
   }
 
+  &__image {
+    display: block;
+    height: auto;
+    width: 100%;
+  }
+
   &__nav {
     display: grid;
     grid-row-gap: 64px;

package/src/templates/update/src/_q-press/layouts/MarkdownSearch.vue

@@ -121,7 +121,7 @@ function fetchQuery (val, onResult, onError) {
       localRequestId === requestId && onError()
     })
 
-    xhr.open('POST', `https://search.quasar.dev/indexes/${ process.env.SEARCH_INDEX }/search`)
+    xhr.open('POST', `https://search.quasar.dev/indexes/${import.meta.env.QCLI_SEARCH_INDEX}/search`)
     xhr.setRequestHeader('Content-Type', 'application/json')
     xhr.setRequestHeader('Authorization', 'Bearer b7a6ea9a9978a4e4d994c1f9451210327f207441adbcf04a4aada3d17d829359')
     xhr.send(data)