@md-plugins/quasar-app-extension-q-press 0.1.0-beta.12 → 0.1.0-beta.14

package/README.md

@@ -4,7 +4,7 @@ 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.12`.
+> Current beta release: `0.1.0-beta.13`.
 >
 > Q-Press currently targets Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.30`. TypeScript processing is required.
 
@@ -92,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)
@@ -134,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[]
 
@@ -149,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>
@@ -232,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/templates/init/src/_q-press/components/MarkdownCodepen.vue

@@ -15,9 +15,8 @@
 import { Quasar } from 'quasar'
 import { ref, reactive, computed, nextTick } from 'vue'
 
-import { slugify } from '@md-plugins/shared'
-
 import siteConfig from '../../siteConfig'
+import { slugify } from './markdown-utils'
 
 type CodepenParts = {
   Template?: string
@@ -41,6 +40,26 @@ const defaultJsResources = [
   `https://cdn.jsdelivr.net/npm/quasar@${Quasar.version}/dist/quasar.umd.prod.js`,
 ]
 
+function getAbsolutePublicUrl(path: string) {
+  const normalizedPath = path.startsWith('/') ? path : `/${path}`
+
+  return typeof location === 'undefined' ? normalizedPath : `${location.origin}${normalizedPath}`
+}
+
+function rewriteRootRelativeUrls(content: string) {
+  return content
+    .replace(
+      /\b(src|href|poster)=("|')\/(?!\/)([^"']*)\2/g,
+      (_match: string, attr: string, quote: string, path: string) =>
+        `${attr}=${quote}${getAbsolutePublicUrl(path)}${quote}`,
+    )
+    .replace(
+      /url\(\s*(["']?)\/(?!\/)([^"')]+)\1\s*\)/g,
+      (_match: string, quote: string, path: string) =>
+        `url(${quote}${getAbsolutePublicUrl(path)}${quote})`,
+    )
+}
+
 function indent(code: string, spaces = 2) {
   const padding = ' '.repeat(spaces)
   return code
@@ -271,7 +290,7 @@ const jsResources = computed(() => {
 })
 
 const css = computed(() => {
-  return (def.parts.Style || '').replace(/(<style.*?>|<\/style>)/g, '').trim()
+  return rewriteRootRelativeUrls((def.parts.Style || '').replace(/(<style.*?>|<\/style>)/g, '').trim())
 })
 
 const cssPreprocessor = computed(() => {
@@ -297,7 +316,7 @@ const jsPreProcessor = computed(() => {
 })
 
 const html = computed(() => {
-  return (def.parts.Template || '')
+  const content = (def.parts.Template || '')
     .replace(/(<template>|<\/template>$)/g, '')
     .replace(/\n/g, '\n  ')
     .replace(/([\w]+=")([^"]*?)(")/g, function (match, p1, p2, p3) {
@@ -331,6 +350,8 @@ const html = computed(() => {
     .replace(/___TEMP_REPLACEMENT___/g, '>')
     .replace(/^\s{2}/gm, '')
     .trim()
+
+  return rewriteRootRelativeUrls(content)
 })
 
 const editors = computed(() => {

package/dist/templates/init/src/_q-press/components/markdown-utils.ts

@@ -1,5 +1,31 @@
 import { Notify } from 'quasar'
-import { slugify } from '@md-plugins/shared'
+
+const andRE = /&/g
+const rCombining = /[\u0300-\u036F]/g
+// oxlint-disable-next-line no-control-regex
+const rControl = /[\u0000-\u001f]/g
+const rSpecial = /[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'“”‘’<>,.?/]+/g
+
+/**
+ * Default slugification function used by qPress client helpers.
+ */
+export const slugify = (str: string): string =>
+  str
+    .trim()
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/[\s_]+/g, '-')
+    .toLowerCase()
+    .normalize('NFKD')
+    .replace(rCombining, '')
+    .replace(andRE, '-and-')
+    .replace(rControl, '-')
+    .replace(rSpecial, '-')
+    .replace(/[^a-z0-9-]+/g, '')
+    .replace(/([a-z])(\d)/g, '$1-$2')
+    .replace(/(\d)([a-z])/g, '$1-$2')
+    .replace(/-{2,}/g, '-')
+    .replace(/(^-|-$)/g, '')
+    .replace(/^(\d)/, '_$1')
 
 /**
  * Fallback function to copy text to clipboard when the Clipboard API is not available.
@@ -101,5 +127,3 @@ export function copyHeading(id: string): void {
     timeout: 2000,
   })
 }
-
-export { slugify }

package/dist/templates/init/src/_q-press/layouts/MarkdownDrawerSidebar.vue

@@ -25,7 +25,7 @@
 <script setup lang="ts">
 import { mdiClose } from '@quasar/extras/mdi-v7'
 
-import { useMarkdownStore } from 'src/.q-press/stores/markdown'
+import { useMarkdownStore } from '@/.q-press/stores/markdown'
 import MarkdownPageSidebar from './MarkdownPageSidebar'
 
 const markdownStore = useMarkdownStore()

package/dist/templates/init/src/_q-press/layouts/MarkdownDrawerToc.vue

@@ -29,7 +29,7 @@
 <script setup lang="ts">
 import { mdiClose } from '@quasar/extras/mdi-v7'
 
-import { useMarkdownStore } from 'src/.q-press/stores/markdown'
+import { useMarkdownStore } from '@/.q-press/stores/markdown'
 
 import MarkdownPageToc from './MarkdownPageToc.vue'
 

package/dist/templates/init/src/_q-press/layouts/MarkdownLayout.vue

@@ -38,7 +38,7 @@ import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { mdiArrowUp } from '@quasar/extras/mdi-v7'
 
-// import { useMarkdownStore } from 'src/.q-press/stores/doc'
+// import { useMarkdownStore } from '@/.q-press/stores/doc'
 import { useScroll } from '../composables/scroll'
 
 import MarkdownHeader from './MarkdownHeader.vue'

package/dist/templates/init/src/markdown/__elements.md

@@ -469,7 +469,7 @@ const x = {
 | Prop name    | Description                                                                                                       |
 | ------------ | ----------------------------------------------------------------------------------------------------------------- |
 | `app`        | Vue app instance                                                                                                  |
-| `router`     | Instance of Vue Router from 'src/router/index.js'                                                                 |
+| `router`     | Instance of Vue Router from '@/router/index.js'                                                                   |
 | `store`      | Instance of Pinia - **store only will be passed if your project uses Pinia (you have src/stores)**                |
 | `ssrContext` | Available only on server-side, if building for SSR. [More info](/quasar-cli-vite/developing-ssr/ssr-context)      |
 | `urlPath`    | The pathname (path + search) part of the URL. It also contains the hash on client-side.                           |
@@ -481,7 +481,7 @@ const x = {
 | Prop name    | Description                                                                                                       |
 | :----------- | :---------------------------------------------------------------------------------------------------------------- |
 | `app`        | Vue app instance                                                                                                  |
-| `router`     | Instance of Vue Router from 'src/router/index.js'                                                                 |
+| `router`     | Instance of Vue Router from '@/router/index.js'                                                                   |
 | `store`      | Instance of Pinia - **store only will be passed if your project uses Pinia (you have src/stores)**                |
 | `ssrContext` | Available only on server-side, if building for SSR. [More info](/quasar-cli-vite/developing-ssr/ssr-context)      |
 | `urlPath`    | The pathname (path + search) part of the URL. It also contains the hash on client-side.                           |
@@ -493,7 +493,7 @@ const x = {
 |    Prop name |                                                                                                       Description |
 | -----------: | ----------------------------------------------------------------------------------------------------------------: |
 |        `app` |                                                                                                  Vue app instance |
-|     `router` |                                                                 Instance of Vue Router from 'src/router/index.js' |
+|     `router` |                                                                   Instance of Vue Router from '@/router/index.js' |
 |      `store` |                Instance of Pinia - **store only will be passed if your project uses Pinia (you have src/stores)** |
 | `ssrContext` |      Available only on server-side, if building for SSR. [More info](/quasar-cli-vite/developing-ssr/ssr-context) |
 |    `urlPath` |                           The pathname (path + search) part of the URL. It also contains the hash on client-side. |
@@ -505,7 +505,7 @@ const x = {
 |  Prop name   |                                                    Description                                                    |
 | :----------: | :---------------------------------------------------------------------------------------------------------------: |
 |    `app`     |                                                 Vue app instance                                                  |
-|   `router`   |                                 Instance of Vue Router from 'src/router/index.js'                                 |
+|   `router`   |                                  Instance of Vue Router from '@/router/index.js'                                  |
 |   `store`    |        Instance of Pinia - **store only will be passed if your project uses Pinia (you have src/stores)**         |
 | `ssrContext` |   Available only on server-side, if building for SSR. [More info](/quasar-cli-vite/developing-ssr/ssr-context)    |
 |  `urlPath`   |              The pathname (path + search) part of the URL. It also contains the hash on client-side.              |
@@ -532,8 +532,8 @@ Lorem ipsum dolor sit amet, **consectetur adipiscing** elit, sed do _eiusmod_ te
 Lorem ipsum dolor sit amet, **consectetur adipiscing** elit, sed do _eiusmod_ tempor incididunt ut labore et dolore magna aliqua.
 
 <script import>
-import MarkdownExampleApi from 'src/.q-press/api/components/MarkdownExample.json'
-import MarkdownPageApi from 'src/.q-press/api/components/MarkdownPage.json'
+import MarkdownExampleApi from '@/.q-press/api/components/MarkdownExample.json'
+import MarkdownPageApi from '@/.q-press/api/components/MarkdownPage.json'
 </script>
 
 <MarkdownApi :api="MarkdownExampleApi" name="MarkdownExample"/>

package/dist/templates/init/src/markdown/__elements2.md

@@ -345,8 +345,8 @@ import AvatarApi from 'quasar/dist/api/QAvatar.json'
 <MarkdownApi :api="AvatarApi" name="QAvatar"/>
 
 <script import>
-import MarkdownExampleApi from 'src/.q-press/api/components/MarkdownExample.json'
-import MarkdownPageApi from 'src/.q-press/api/components/MarkdownPage.json'
+import MarkdownExampleApi from '@/.q-press/api/components/MarkdownExample.json'
+import MarkdownPageApi from '@/.q-press/api/components/MarkdownPage.json'
 </script>
 
 <MarkdownApi :api="MarkdownExampleApi" name="MarkdownExample"/>

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

@@ -633,8 +633,8 @@ md.use(codeblocksPlugin, {
   preClass: 'markdown-code', // Optional: Customize the class for the pre tag
   codeClass: '', // Optional: Customize the class for the code tag
   pageScripts: [
-    "import MarkdownPrerender from 'src/.q-press/components/MarkdownPrerender'", // ts file
-    "import MarkdownCopyButton from 'src/.q-press/components/MarkdownCopyButton.vue'",
+    "import MarkdownPrerender from '@/.q-press/components/MarkdownPrerender'", // ts file
+    "import MarkdownCopyButton from '@/.q-press/components/MarkdownCopyButton.vue'",
   ], // Optional: Include page scripts
   langList: [
     { name: 'javascript', aliases: 'javascript|js' },
@@ -688,8 +688,8 @@ 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-press/components/MarkdownPrerender'", // ts file
-    "import MarkdownCopyButton from 'src/.q-press/components/MarkdownCopyButton.vue'",
+    "import MarkdownPrerender from '@/.q-press/components/MarkdownPrerender'", // ts file
+    "import MarkdownCopyButton from '@/.q-press/components/MarkdownCopyButton.vue'",
   ], // Include page scripts
   langList: [
     { name: 'javascript', aliases: 'javascript|js' },

package/dist/templates/init/src/markdown/md-plugins/link/advanced.md

@@ -83,7 +83,7 @@ The `link` plugin provides several options for customization. Here are the avail
 #### pageScript
 
 - **Type**: `string`
-- **Default**: `'import MarkdownLink from "src/.q-press/components/MarkdownLink.vue"'`
+- **Default**: `'import MarkdownLink from "@/.q-press/components/MarkdownLink.vue"'`
 - **Description**: The script to import the custom link component.
 
 ### Example Configuration
@@ -99,7 +99,7 @@ const md = new MarkdownIt()
 md.use(linkPlugin, {
   linkTag: 'CustomLink',
   linkToKeyword: 'href',
-  pageScript: 'import CustomLink from "src/components/CustomLink.vue"',
+  pageScript: 'import CustomLink from "@/components/CustomLink.vue"',
 })
 ```
 

package/dist/templates/init/src/markdown/md-plugins/link/overview.md

@@ -38,7 +38,7 @@ const md = new MarkdownIt()
 md.use(linkPlugin, {
   linkTag: 'CustomLink', // Optional: Customize the link tag
   linkToKeyword: 'href', // Optional: Customize the link keyword
-  pageScript: 'import CustomLink from "src/components/CustomLink.vue"', // Optional: Add import statement
+  pageScript: 'import CustomLink from "@/components/CustomLink.vue"', // Optional: Add import statement
 })
 
 // Now you can use the Link plugin in your Markdown content
@@ -78,7 +78,7 @@ const md = new MarkdownIt()
 md.use(linkPlugin, {
   linkTag: 'CustomLink', // Optional: Customize the link tag
   linkToKeyword: 'href', // Optional: Customize the link keyword
-  pageScript: 'import CustomLink from "src/components/CustomLink.vue"', // Optional: Add import statement
+  pageScript: 'import CustomLink from "@/components/CustomLink.vue"', // Optional: Add import statement
 })
 
 // Now you can use the Link plugin in your Markdown content
@@ -109,7 +109,7 @@ const md = new MarkdownIt()
 md.use(linkPlugin, {
   linkTag: 'CustomLink', // Customize the link tag
   linkToKeyword: 'href', // Customize the link keyword
-  pageScript: 'import CustomLink from "src/components/CustomLink.vue"', // Add import statement
+  pageScript: 'import CustomLink from "@/components/CustomLink.vue"', // Add import statement
 })
   .use(markdownItAnchor)
   .use(markdownItToc)

package/dist/templates/init/src/markdown/md-plugins/shared/overview.md

@@ -1,20 +1,24 @@
 ---
-title: Shared Plugin Overview
-desc: Overview of the shared utilities and types for MD-Plugins plugins.
+title: Shared Package Overview
+desc: Overview of the shared utilities and types used by MD-Plugins packages.
 ---
 
-The `shared` plugin provides a set of utilities and types that are used across various MD-Plugins plugins. It serves as a common foundation, ensuring consistency and reducing duplication of code across the different plugins.
+The `@md-plugins/shared` package provides utilities and types used internally by the MD-Plugins packages. It serves as a common foundation, ensuring consistency and reducing duplication across the different plugins.
+
+::: tip
+QPress applications do not need to install or import `@md-plugins/shared` directly. Install it only when you are building a custom Markdown-It plugin or contributing to the MD-Plugins packages themselves.
+:::
 
 ## Key Features
 
 - **Common Utilities**: Provides utility functions that are commonly used across multiple plugins.
 - **Type Definitions**: Includes TypeScript type definitions to ensure type safety and consistency.
 - **Helper Functions**: Offers helper functions to simplify common tasks and operations.
-- **Reusable Components**: Contains reusable components that can be leveraged by other plugins.
+- **Reusable Helpers**: Contains shared helpers that can be leveraged by other MD-Plugins packages.
 
 ## Utilities
 
-The `shared` plugin includes a variety of utility functions that can be used to perform common tasks. Some of the key utilities include:
+The shared package includes a variety of utility functions that can be used to perform common tasks. Some of the key utilities include:
 
 - **String Manipulation**: Functions for manipulating and formatting strings.
 - **Array Operations**: Functions for performing common array operations.
@@ -23,7 +27,7 @@ The `shared` plugin includes a variety of utility functions that can be used to
 
 ## Type Definitions
 
-The `shared` plugin provides TypeScript type definitions that are used across the MD-Plugins project. These type definitions help ensure type safety and consistency. Some of the key type definitions include:
+The shared package provides TypeScript type definitions that are used across the MD-Plugins project. These type definitions help ensure type safety and consistency. Some of the key type definitions include:
 
 - **MarkdownItEnv**: Defines the structure of the environment object used by MD-Plugins plugins.
 - **PluginOptions**: Defines the structure of the options object passed to plugins.
@@ -179,7 +183,7 @@ export {
 
 ## Helper Functions
 
-The `shared` plugin includes a variety of helper functions that simplify common tasks and operations. Some of the key helper functions include:
+The shared package includes a variety of helper functions that simplify common tasks and operations. Some of the key helper functions include:
 
 - **resolveTitleFromToken**: Extracts the title from a Markdown token.
 - **parseFrontmatter**: Parses frontmatter content from a Markdown file.
@@ -190,6 +194,6 @@ The `shared` plugin includes a variety of helper functions that simplify common
 
 ## Conclusion
 
-The `shared` plugin is an essential part of the MD-Plugins project, providing common utilities, type definitions, helper functions, and reusable components. By leveraging the `shared` plugin, you can ensure consistency and reduce duplication of code across your plugins.
+The shared package is an essential internal part of the MD-Plugins project, providing common utilities, type definitions, and helper functions. If you are building custom plugins, you can use it to stay aligned with the same types and helpers used by the official MD-Plugins packages.
 
 Happy coding!

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

@@ -8,33 +8,33 @@ Q-Press has a lot of components that can be used in your app. Under the hood, th
 ## Components
 
 <script import>
-import DarkModeToggleApi from 'src/.q-press/api/components/DarkModeToggle.json'
-import MarkdownApiApi from 'src/.q-press/api/components/MarkdownApi.json'
-import MarkdownCardLinkApi from 'src/.q-press/api/components/MarkdownCardLink.json'
-import MarkdownCardTitleApi from 'src/.q-press/api/components/MarkdownCardTitle.json'
-import MarkdownCodeApi from 'src/.q-press/api/components/MarkdownCode.json'
-import MarkdownCodepenApi from 'src/.q-press/api/components/MarkdownCodepen.json'
+import DarkModeToggleApi from '@/.q-press/api/components/DarkModeToggle.json'
+import MarkdownApiApi from '@/.q-press/api/components/MarkdownApi.json'
+import MarkdownCardLinkApi from '@/.q-press/api/components/MarkdownCardLink.json'
+import MarkdownCardTitleApi from '@/.q-press/api/components/MarkdownCardTitle.json'
+import MarkdownCodeApi from '@/.q-press/api/components/MarkdownCode.json'
+import MarkdownCodepenApi from '@/.q-press/api/components/MarkdownCodepen.json'
 
-import MarkdownCodePrismApi from 'src/.q-press/api/components/MarkdownCodePrism.json'
-import MarkdownCopyButtonApi from 'src/.q-press/api/components/MarkdownCopyButton.json'
-import MarkdownDrawerSidebarApi from 'src/.q-press/api/components/MarkdownDrawerSidebar.json'
-import MarkdownDrawerTocApi from 'src/.q-press/api/components/MarkdownDrawerToc.json'
+import MarkdownCodePrismApi from '@/.q-press/api/components/MarkdownCodePrism.json'
+import MarkdownCopyButtonApi from '@/.q-press/api/components/MarkdownCopyButton.json'
+import MarkdownDrawerSidebarApi from '@/.q-press/api/components/MarkdownDrawerSidebar.json'
+import MarkdownDrawerTocApi from '@/.q-press/api/components/MarkdownDrawerToc.json'
 
-import MarkdownExampleApi from 'src/.q-press/api/components/MarkdownExample.json'
-import MarkdownHeaderApi from 'src/.q-press/api/components/MarkdownHeader.json'
-import MarkdownHeaderIconLinksApi from 'src/.q-press/api/components/MarkdownHeaderIconLinks.json'
-import MarkdownHeaderMenuApi from 'src/.q-press/api/components/MarkdownHeaderMenu.json'
-import MarkdownHeaderTextLinksApi from 'src/.q-press/api/components/MarkdownHeaderTextLinks.json'
+import MarkdownExampleApi from '@/.q-press/api/components/MarkdownExample.json'
+import MarkdownHeaderApi from '@/.q-press/api/components/MarkdownHeader.json'
+import MarkdownHeaderIconLinksApi from '@/.q-press/api/components/MarkdownHeaderIconLinks.json'
+import MarkdownHeaderMenuApi from '@/.q-press/api/components/MarkdownHeaderMenu.json'
+import MarkdownHeaderTextLinksApi from '@/.q-press/api/components/MarkdownHeaderTextLinks.json'
 
-import MarkdownLayoutApi from 'src/.q-press/api/components/MarkdownLayout.json'
-import MarkdownLinkApi from 'src/.q-press/api/components/MarkdownLink.json'
-import MarkdownPageApi from 'src/.q-press/api/components/MarkdownPage.json'
-import MarkdownPageFooterApi from 'src/.q-press/api/components/MarkdownPageFooter.json'
-import MarkdownPageSidebarApi from 'src/.q-press/api/components/MarkdownPageSidebar.json'
-import MarkdownPageTocApi from 'src/.q-press/api/components/MarkdownPageToc.json'
+import MarkdownLayoutApi from '@/.q-press/api/components/MarkdownLayout.json'
+import MarkdownLinkApi from '@/.q-press/api/components/MarkdownLink.json'
+import MarkdownPageApi from '@/.q-press/api/components/MarkdownPage.json'
+import MarkdownPageFooterApi from '@/.q-press/api/components/MarkdownPageFooter.json'
+import MarkdownPageSidebarApi from '@/.q-press/api/components/MarkdownPageSidebar.json'
+import MarkdownPageTocApi from '@/.q-press/api/components/MarkdownPageToc.json'
 
-import MarkdownTreeApi from 'src/.q-press/api/components/MarkdownTree.json'
-import MarkdownPrerenderApi from 'src/.q-press/api/components/MarkdownPrerender.json'
+import MarkdownTreeApi from '@/.q-press/api/components/MarkdownTree.json'
+import MarkdownPrerenderApi from '@/.q-press/api/components/MarkdownPrerender.json'
 
 </script>
 

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

@@ -125,12 +125,12 @@ export default defineConfig(async (ctx) => {
 
 ```ts [maxheight=400px]
 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)
@@ -169,7 +169,7 @@ const routes = [
   // but you can also remove it
   {
     path: '/:catchAll(.*)*',
-    component: () => import('pages/ErrorNotFound.vue'),
+    component: () => import('@/pages/ErrorNotFound.vue'),
   },
 ] as RouteRecordRaw[]
 
@@ -186,7 +186,7 @@ Update your `App.vue`:
 </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>
@@ -206,7 +206,7 @@ Update your `App.vue`:
 <script setup lang="ts">
 // don't forget to add the Quasar 'Meta' plugin into your quasar.config file!
 import { useMeta } from 'quasar'
-import getMeta from 'src/.q-press/assets/get-meta'
+import getMeta from '@/.q-press/assets/get-meta'
 
 // You can use the `getMeta` function to get the meta tags for your page and provide default values
 useMeta({

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

@@ -35,7 +35,7 @@ The `viteMdPlugin` is built on top of the following plugins:
 | `@md-plugins/md-plugin-title`       | Extracts the first header in Markdown as the page title.                | [README](packages/md-plugin-title/README.md)       | [Docs](/md-plugins/title/overview)       |
 | `@md-plugins/md-plugin-frontmatter` | Extracts and processes frontmatter content from Markdown files.         | [README](packages/md-plugin-frontmatter/README.md) | [Docs](/md-plugins/frontmatter/overview) |
 | `@md-plugins/md-plugin-containers`  | Adds custom containers for callouts, warnings, and more.                | [README](packages/md-plugin-containers/README.md)  | [Docs](/md-plugins/containers/overview)  |
-| `@md-plugins/shared`                | Shared utilities and types for the plugins.                             | [README](packages/shared/README.md)                | [Docs](/md-plugins/shared/overview)      |
+| `@md-plugins/shared`                | Internal shared utilities and types used by the bundled plugins.        | [README](packages/shared/README.md)                | [Docs](/md-plugins/shared/overview)      |
 
 ## Installation
 

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

@@ -1,6 +1,6 @@
 import { fabGithub, fabXTwitter } from '@quasar/extras/fontawesome-v7'
-import { slugify } from '@md-plugins/shared'
 import { version, productName } from '../../package.json'
+import { slugify } from '../.q-press/components/markdown-utils'
 
 export interface SocialLink {
   name: string

package/dist/templates/update/src/_q-press/components/MarkdownCodepen.vue

@@ -15,9 +15,8 @@
 import { Quasar } from 'quasar'
 import { ref, reactive, computed, nextTick } from 'vue'
 
-import { slugify } from '@md-plugins/shared'
-
 import siteConfig from '../../siteConfig'
+import { slugify } from './markdown-utils'
 
 type CodepenParts = {
   Template?: string
@@ -41,6 +40,26 @@ const defaultJsResources = [
   `https://cdn.jsdelivr.net/npm/quasar@${Quasar.version}/dist/quasar.umd.prod.js`,
 ]
 
+function getAbsolutePublicUrl(path: string) {
+  const normalizedPath = path.startsWith('/') ? path : `/${path}`
+
+  return typeof location === 'undefined' ? normalizedPath : `${location.origin}${normalizedPath}`
+}
+
+function rewriteRootRelativeUrls(content: string) {
+  return content
+    .replace(
+      /\b(src|href|poster)=("|')\/(?!\/)([^"']*)\2/g,
+      (_match: string, attr: string, quote: string, path: string) =>
+        `${attr}=${quote}${getAbsolutePublicUrl(path)}${quote}`,
+    )
+    .replace(
+      /url\(\s*(["']?)\/(?!\/)([^"')]+)\1\s*\)/g,
+      (_match: string, quote: string, path: string) =>
+        `url(${quote}${getAbsolutePublicUrl(path)}${quote})`,
+    )
+}
+
 function indent(code: string, spaces = 2) {
   const padding = ' '.repeat(spaces)
   return code
@@ -271,7 +290,7 @@ const jsResources = computed(() => {
 })
 
 const css = computed(() => {
-  return (def.parts.Style || '').replace(/(<style.*?>|<\/style>)/g, '').trim()
+  return rewriteRootRelativeUrls((def.parts.Style || '').replace(/(<style.*?>|<\/style>)/g, '').trim())
 })
 
 const cssPreprocessor = computed(() => {
@@ -297,7 +316,7 @@ const jsPreProcessor = computed(() => {
 })
 
 const html = computed(() => {
-  return (def.parts.Template || '')
+  const content = (def.parts.Template || '')
     .replace(/(<template>|<\/template>$)/g, '')
     .replace(/\n/g, '\n  ')
     .replace(/([\w]+=")([^"]*?)(")/g, function (match, p1, p2, p3) {
@@ -331,6 +350,8 @@ const html = computed(() => {
     .replace(/___TEMP_REPLACEMENT___/g, '>')
     .replace(/^\s{2}/gm, '')
     .trim()
+
+  return rewriteRootRelativeUrls(content)
 })
 
 const editors = computed(() => {

package/dist/templates/update/src/_q-press/components/markdown-utils.ts

@@ -1,5 +1,31 @@
 import { Notify } from 'quasar'
-import { slugify } from '@md-plugins/shared'
+
+const andRE = /&/g
+const rCombining = /[\u0300-\u036F]/g
+// oxlint-disable-next-line no-control-regex
+const rControl = /[\u0000-\u001f]/g
+const rSpecial = /[\s~`!@#$%^&*()\-_+=[\]{}|\\;:"'“”‘’<>,.?/]+/g
+
+/**
+ * Default slugification function used by qPress client helpers.
+ */
+export const slugify = (str: string): string =>
+  str
+    .trim()
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .replace(/[\s_]+/g, '-')
+    .toLowerCase()
+    .normalize('NFKD')
+    .replace(rCombining, '')
+    .replace(andRE, '-and-')
+    .replace(rControl, '-')
+    .replace(rSpecial, '-')
+    .replace(/[^a-z0-9-]+/g, '')
+    .replace(/([a-z])(\d)/g, '$1-$2')
+    .replace(/(\d)([a-z])/g, '$1-$2')
+    .replace(/-{2,}/g, '-')
+    .replace(/(^-|-$)/g, '')
+    .replace(/^(\d)/, '_$1')
 
 /**
  * Fallback function to copy text to clipboard when the Clipboard API is not available.
@@ -101,5 +127,3 @@ export function copyHeading(id: string): void {
     timeout: 2000,
   })
 }
-
-export { slugify }

package/dist/templates/update/src/_q-press/layouts/MarkdownDrawerSidebar.vue

@@ -25,7 +25,7 @@
 <script setup lang="ts">
 import { mdiClose } from '@quasar/extras/mdi-v7'
 
-import { useMarkdownStore } from 'src/.q-press/stores/markdown'
+import { useMarkdownStore } from '@/.q-press/stores/markdown'
 import MarkdownPageSidebar from './MarkdownPageSidebar'
 
 const markdownStore = useMarkdownStore()

package/dist/templates/update/src/_q-press/layouts/MarkdownDrawerToc.vue

@@ -29,7 +29,7 @@
 <script setup lang="ts">
 import { mdiClose } from '@quasar/extras/mdi-v7'
 
-import { useMarkdownStore } from 'src/.q-press/stores/markdown'
+import { useMarkdownStore } from '@/.q-press/stores/markdown'
 
 import MarkdownPageToc from './MarkdownPageToc.vue'
 

package/dist/templates/update/src/_q-press/layouts/MarkdownLayout.vue

@@ -38,7 +38,7 @@ import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { mdiArrowUp } from '@quasar/extras/mdi-v7'
 
-// import { useMarkdownStore } from 'src/.q-press/stores/doc'
+// import { useMarkdownStore } from '@/.q-press/stores/doc'
 import { useScroll } from '../composables/scroll'
 
 import MarkdownHeader from './MarkdownHeader.vue'