@md-plugins/quasar-app-extension-q-press 0.1.0-beta.11 → 0.1.0-beta.13

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.11`.
+> Current beta release: `0.1.0-beta.13`.
 >
-> Q-Press currently targets Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.29`. TypeScript processing is required.
+> Q-Press currently targets Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.30`. TypeScript processing is required.
 
 ## Features
 

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

@@ -41,6 +41,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
@@ -49,8 +69,8 @@ function indent(code: string, spaces = 2) {
     .join('\n')
 }
 
-function getImportNames(content: string, packageName: string) {
-  const names = new Set<string>()
+function getImportParts(content: string, packageName: string) {
+  const parts: { importName: string; bindingName: string }[] = []
   const escapedPackageName = packageName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
   const importRe = new RegExp(
     `import\\s+(?!type\\b){([^}]*)}\\s+from\\s+['"]${escapedPackageName}['"];?`,
@@ -66,15 +86,32 @@ function getImportNames(content: string, packageName: string) {
         continue
       }
 
-      const name = rawName.replace(/\s+as\s+/g, ': ')
+      const [importName, bindingName = importName] = rawName.split(/\s+as\s+/)
 
-      if (name.length > 0) {
-        names.add(name)
+      if (importName !== undefined && importName.length > 0) {
+        parts.push({
+          importName,
+          bindingName,
+        })
       }
     }
   }
 
-  return [...names]
+  return parts
+}
+
+function getImportNames(content: string, packageName: string) {
+  return [
+    ...new Set(
+      getImportParts(content, packageName).map(({ importName, bindingName }) =>
+        importName === bindingName ? importName : `${importName}: ${bindingName}`,
+      ),
+    ),
+  ]
+}
+
+function getImportBindingNames(content: string, packageName: string) {
+  return [...new Set(getImportParts(content, packageName).map(({ bindingName }) => bindingName))]
 }
 
 function getGlobalPackageImportLines(content: string) {
@@ -98,6 +135,16 @@ function getGlobalImportLines(content: string) {
   ].filter((line) => line.length > 0)
 }
 
+function getGlobalImportBindingNames(content: string) {
+  return [
+    ...getImportBindingNames(content, 'vue'),
+    ...getImportBindingNames(content, 'quasar'),
+    ...(siteConfig.codepen?.globalPackages ?? []).flatMap(({ packageName }: CodepenGlobalPackage) =>
+      getImportBindingNames(content, packageName),
+    ),
+  ]
+}
+
 function stripImports(content: string) {
   return content
     .replace(/^\s*import\s+type\s+[\s\S]*?\s+from\s+['"][^'"]+['"];?\s*$/gm, '')
@@ -185,7 +232,9 @@ function createSetupScript(script: string) {
   const { content } = getScriptBlock(script, true)
   const globalImports = getGlobalImportLines(content)
   const setupContent = stripCompilerMacros(stripImports(content))
-  const returnNames = getSetupReturnNames(setupContent)
+  const returnNames = [
+    ...new Set([...getGlobalImportBindingNames(content), ...getSetupReturnNames(setupContent)]),
+  ]
   const setupBody = [
     setupContent.length > 0 ? indent(setupContent, 4) : '',
     returnNames.length > 0 ? `    return { ${returnNames.join(', ')} }` : '',
@@ -242,7 +291,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(() => {
@@ -268,13 +317,16 @@ 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) {
       return p1 + p2.replace(/>/g, '___TEMP_REPLACEMENT___') + p3
     })
-    .replace(/<(q-[\w-]+|div)([^>]*?)\s*?([\n\r][\t ]+)?\/>/gs, '<$1$2$3></$1>')
+    .replace(
+      /<([A-Z][\w-]*|[a-z][\w]*-[\w-]+|div)([^>]*?)\s*?([\n\r][\t ]+)?\/>/gs,
+      '<$1$2$3></$1>',
+    )
     .replace(
       /(<template[^>]*>)(\s*?(?:[\n\r][\t ]+)?)<(thead|tbody|tfoot)/gs,
       '$1$2<___PREVENT_TEMPLATE___$3',
@@ -299,6 +351,8 @@ const html = computed(() => {
     .replace(/___TEMP_REPLACEMENT___/g, '>')
     .replace(/^\s{2}/gm, '')
     .trim()
+
+  return rewriteRootRelativeUrls(content)
 })
 
 const editors = computed(() => {
@@ -310,10 +364,12 @@ const editors = computed(() => {
 })
 
 const computedTitle = computed(() => {
+  const titleSuffix = siteConfig.codepen?.titleSuffix ?? `Quasar v${Quasar.version}`
+
   return (
     (typeof document !== 'undefined' ? document.title.split(' | ')[0] + ': ' : '') +
     (props.title ? props.title + ' - ' : '') +
-    `Quasar v${Quasar.version}`
+    titleSuffix
   )
 })
 

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

@@ -96,7 +96,7 @@
 import { computed, inject, markRaw, ref, reactive, onBeforeUnmount, onMounted } from 'vue'
 import { openURL } from 'quasar'
 
-import { fabGithub, fabCodepen } from '@quasar/extras/fontawesome-v6'
+import { fabGithub, fabCodepen } from '@quasar/extras/fontawesome-v7'
 // import { mdiCompare } from '@quasar/extras/mdi-v7'
 
 import MarkdownCode from './MarkdownCode.vue'

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

@@ -10,7 +10,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { mdiLaunch } from '@quasar/extras/mdi-v6'
+import { mdiLaunch } from '@quasar/extras/mdi-v7'
 
 const props = defineProps({ to: { type: String, required: true } })
 const internal = computed(

package/dist/templates/init/src/_q-press/components/MarkdownTree.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import { mdiLaunch, mdiInformationOutline } from '@quasar/extras/mdi-v6'
+import { mdiLaunch, mdiInformationOutline } from '@quasar/extras/mdi-v7'
 
 const props = defineProps({
   def: {

package/dist/templates/init/src/components/LandingPage/LandingPage.vue

@@ -113,7 +113,7 @@
 
 <script setup lang="ts">
 import { QIcon } from 'quasar'
-import { fabGithub } from '@quasar/extras/fontawesome-v6'
+import { fabGithub } from '@quasar/extras/fontawesome-v7'
 import { useRouter } from 'vue-router'
 import siteConfig from '../../siteConfig'
 

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

@@ -7,16 +7,16 @@ 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.29`.
+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.30`.
 
 ::: warning
-Q-Press and the Quasar app extensions now target Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.29`. 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.30`. 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.29`.
+- Upgrade the app to `@quasar/app-vite` `>=3.0.0-beta.30`.
 - 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`.

package/dist/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.29` 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.30` at this time. TypeScript processing is also required. Do not use if you are using Webpack or have a JavaScript-only project.
 :::
 
 ::: tip

package/dist/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.29`.
+This app extension targets Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.30`.
 :::
 
 ## Key Features

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

@@ -1,4 +1,4 @@
-import { fabGithub, fabXTwitter } from '@quasar/extras/fontawesome-v6'
+import { fabGithub, fabXTwitter } from '@quasar/extras/fontawesome-v7'
 import { slugify } from '@md-plugins/shared'
 import { version, productName } from '../../package.json'
 
@@ -75,6 +75,7 @@ export interface CodepenConfig {
   jsExternal?: string[]
   jsSetup?: string
   jsPreProcessor?: string
+  titleSuffix?: string
   head?: string
   globalPackages?: {
     packageName: string

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

@@ -41,6 +41,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
@@ -49,8 +69,8 @@ function indent(code: string, spaces = 2) {
     .join('\n')
 }
 
-function getImportNames(content: string, packageName: string) {
-  const names = new Set<string>()
+function getImportParts(content: string, packageName: string) {
+  const parts: { importName: string; bindingName: string }[] = []
   const escapedPackageName = packageName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
   const importRe = new RegExp(
     `import\\s+(?!type\\b){([^}]*)}\\s+from\\s+['"]${escapedPackageName}['"];?`,
@@ -66,15 +86,32 @@ function getImportNames(content: string, packageName: string) {
         continue
       }
 
-      const name = rawName.replace(/\s+as\s+/g, ': ')
+      const [importName, bindingName = importName] = rawName.split(/\s+as\s+/)
 
-      if (name.length > 0) {
-        names.add(name)
+      if (importName !== undefined && importName.length > 0) {
+        parts.push({
+          importName,
+          bindingName,
+        })
       }
     }
   }
 
-  return [...names]
+  return parts
+}
+
+function getImportNames(content: string, packageName: string) {
+  return [
+    ...new Set(
+      getImportParts(content, packageName).map(({ importName, bindingName }) =>
+        importName === bindingName ? importName : `${importName}: ${bindingName}`,
+      ),
+    ),
+  ]
+}
+
+function getImportBindingNames(content: string, packageName: string) {
+  return [...new Set(getImportParts(content, packageName).map(({ bindingName }) => bindingName))]
 }
 
 function getGlobalPackageImportLines(content: string) {
@@ -98,6 +135,16 @@ function getGlobalImportLines(content: string) {
   ].filter((line) => line.length > 0)
 }
 
+function getGlobalImportBindingNames(content: string) {
+  return [
+    ...getImportBindingNames(content, 'vue'),
+    ...getImportBindingNames(content, 'quasar'),
+    ...(siteConfig.codepen?.globalPackages ?? []).flatMap(({ packageName }: CodepenGlobalPackage) =>
+      getImportBindingNames(content, packageName),
+    ),
+  ]
+}
+
 function stripImports(content: string) {
   return content
     .replace(/^\s*import\s+type\s+[\s\S]*?\s+from\s+['"][^'"]+['"];?\s*$/gm, '')
@@ -185,7 +232,9 @@ function createSetupScript(script: string) {
   const { content } = getScriptBlock(script, true)
   const globalImports = getGlobalImportLines(content)
   const setupContent = stripCompilerMacros(stripImports(content))
-  const returnNames = getSetupReturnNames(setupContent)
+  const returnNames = [
+    ...new Set([...getGlobalImportBindingNames(content), ...getSetupReturnNames(setupContent)]),
+  ]
   const setupBody = [
     setupContent.length > 0 ? indent(setupContent, 4) : '',
     returnNames.length > 0 ? `    return { ${returnNames.join(', ')} }` : '',
@@ -242,7 +291,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(() => {
@@ -268,13 +317,16 @@ 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) {
       return p1 + p2.replace(/>/g, '___TEMP_REPLACEMENT___') + p3
     })
-    .replace(/<(q-[\w-]+|div)([^>]*?)\s*?([\n\r][\t ]+)?\/>/gs, '<$1$2$3></$1>')
+    .replace(
+      /<([A-Z][\w-]*|[a-z][\w]*-[\w-]+|div)([^>]*?)\s*?([\n\r][\t ]+)?\/>/gs,
+      '<$1$2$3></$1>',
+    )
     .replace(
       /(<template[^>]*>)(\s*?(?:[\n\r][\t ]+)?)<(thead|tbody|tfoot)/gs,
       '$1$2<___PREVENT_TEMPLATE___$3',
@@ -299,6 +351,8 @@ const html = computed(() => {
     .replace(/___TEMP_REPLACEMENT___/g, '>')
     .replace(/^\s{2}/gm, '')
     .trim()
+
+  return rewriteRootRelativeUrls(content)
 })
 
 const editors = computed(() => {
@@ -310,10 +364,12 @@ const editors = computed(() => {
 })
 
 const computedTitle = computed(() => {
+  const titleSuffix = siteConfig.codepen?.titleSuffix ?? `Quasar v${Quasar.version}`
+
   return (
     (typeof document !== 'undefined' ? document.title.split(' | ')[0] + ': ' : '') +
     (props.title ? props.title + ' - ' : '') +
-    `Quasar v${Quasar.version}`
+    titleSuffix
   )
 })
 

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

@@ -96,7 +96,7 @@
 import { computed, inject, markRaw, ref, reactive, onBeforeUnmount, onMounted } from 'vue'
 import { openURL } from 'quasar'
 
-import { fabGithub, fabCodepen } from '@quasar/extras/fontawesome-v6'
+import { fabGithub, fabCodepen } from '@quasar/extras/fontawesome-v7'
 // import { mdiCompare } from '@quasar/extras/mdi-v7'
 
 import MarkdownCode from './MarkdownCode.vue'

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

@@ -10,7 +10,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { mdiLaunch } from '@quasar/extras/mdi-v6'
+import { mdiLaunch } from '@quasar/extras/mdi-v7'
 
 const props = defineProps({ to: { type: String, required: true } })
 const internal = computed(

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

@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import { mdiLaunch, mdiInformationOutline } from '@quasar/extras/mdi-v6'
+import { mdiLaunch, mdiInformationOutline } from '@quasar/extras/mdi-v7'
 
 const props = defineProps({
   def: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@md-plugins/quasar-app-extension-q-press",
-  "version": "0.1.0-beta.11",
+  "version": "0.1.0-beta.13",
   "description": "QPress - The Ultimate Markdown Solution for Quasar Framework",
   "keywords": [
     "markdown",
@@ -30,27 +30,27 @@
     "@types/markdown-it": "^14.1.2",
     "fs-extra": "^11.3.5",
     "markdown-it": "^14.2.0",
-    "@md-plugins/md-plugin-blockquote": "0.1.0-beta.11",
-    "@md-plugins/md-plugin-codeblocks": "0.1.0-beta.11",
-    "@md-plugins/md-plugin-image": "0.1.0-beta.11",
-    "@md-plugins/md-plugin-headers": "0.1.0-beta.11",
-    "@md-plugins/md-plugin-imports": "0.1.0-beta.11",
-    "@md-plugins/md-plugin-containers": "0.1.0-beta.11",
-    "@md-plugins/md-plugin-frontmatter": "0.1.0-beta.11",
-    "@md-plugins/md-plugin-link": "0.1.0-beta.11",
-    "@md-plugins/md-plugin-table": "0.1.0-beta.11",
-    "@md-plugins/md-plugin-inlinecode": "0.1.0-beta.11",
-    "@md-plugins/md-plugin-title": "0.1.0-beta.11",
-    "@md-plugins/vite-md-plugin": "0.1.0-beta.11",
-    "@md-plugins/shared": "0.1.0-beta.11"
+    "@md-plugins/md-plugin-blockquote": "0.1.0-beta.13",
+    "@md-plugins/md-plugin-containers": "0.1.0-beta.13",
+    "@md-plugins/md-plugin-headers": "0.1.0-beta.13",
+    "@md-plugins/md-plugin-imports": "0.1.0-beta.13",
+    "@md-plugins/md-plugin-image": "0.1.0-beta.13",
+    "@md-plugins/md-plugin-codeblocks": "0.1.0-beta.13",
+    "@md-plugins/md-plugin-frontmatter": "0.1.0-beta.13",
+    "@md-plugins/md-plugin-inlinecode": "0.1.0-beta.13",
+    "@md-plugins/md-plugin-link": "0.1.0-beta.13",
+    "@md-plugins/md-plugin-table": "0.1.0-beta.13",
+    "@md-plugins/md-plugin-title": "0.1.0-beta.13",
+    "@md-plugins/shared": "0.1.0-beta.13",
+    "@md-plugins/vite-md-plugin": "0.1.0-beta.13"
   },
   "devDependencies": {
-    "@quasar/app-vite": "3.0.0-beta.29",
+    "@quasar/app-vite": "3.0.0-beta.30",
     "@types/markdown-it": "^14.1.2",
     "vite": "^8.0.14"
   },
   "peerDependencies": {
-    "@quasar/app-vite": ">=3.0.0-beta.29",
+    "@quasar/app-vite": ">=3.0.0-beta.30",
     "markdown-it": "^14.2.0"
   },
   "engines": {

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

@@ -41,6 +41,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
@@ -49,8 +69,8 @@ function indent(code: string, spaces = 2) {
     .join('\n')
 }
 
-function getImportNames(content: string, packageName: string) {
-  const names = new Set<string>()
+function getImportParts(content: string, packageName: string) {
+  const parts: { importName: string; bindingName: string }[] = []
   const escapedPackageName = packageName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
   const importRe = new RegExp(
     `import\\s+(?!type\\b){([^}]*)}\\s+from\\s+['"]${escapedPackageName}['"];?`,
@@ -66,15 +86,32 @@ function getImportNames(content: string, packageName: string) {
         continue
       }
 
-      const name = rawName.replace(/\s+as\s+/g, ': ')
+      const [importName, bindingName = importName] = rawName.split(/\s+as\s+/)
 
-      if (name.length > 0) {
-        names.add(name)
+      if (importName !== undefined && importName.length > 0) {
+        parts.push({
+          importName,
+          bindingName,
+        })
       }
     }
   }
 
-  return [...names]
+  return parts
+}
+
+function getImportNames(content: string, packageName: string) {
+  return [
+    ...new Set(
+      getImportParts(content, packageName).map(({ importName, bindingName }) =>
+        importName === bindingName ? importName : `${importName}: ${bindingName}`,
+      ),
+    ),
+  ]
+}
+
+function getImportBindingNames(content: string, packageName: string) {
+  return [...new Set(getImportParts(content, packageName).map(({ bindingName }) => bindingName))]
 }
 
 function getGlobalPackageImportLines(content: string) {
@@ -98,6 +135,16 @@ function getGlobalImportLines(content: string) {
   ].filter((line) => line.length > 0)
 }
 
+function getGlobalImportBindingNames(content: string) {
+  return [
+    ...getImportBindingNames(content, 'vue'),
+    ...getImportBindingNames(content, 'quasar'),
+    ...(siteConfig.codepen?.globalPackages ?? []).flatMap(({ packageName }: CodepenGlobalPackage) =>
+      getImportBindingNames(content, packageName),
+    ),
+  ]
+}
+
 function stripImports(content: string) {
   return content
     .replace(/^\s*import\s+type\s+[\s\S]*?\s+from\s+['"][^'"]+['"];?\s*$/gm, '')
@@ -185,7 +232,9 @@ function createSetupScript(script: string) {
   const { content } = getScriptBlock(script, true)
   const globalImports = getGlobalImportLines(content)
   const setupContent = stripCompilerMacros(stripImports(content))
-  const returnNames = getSetupReturnNames(setupContent)
+  const returnNames = [
+    ...new Set([...getGlobalImportBindingNames(content), ...getSetupReturnNames(setupContent)]),
+  ]
   const setupBody = [
     setupContent.length > 0 ? indent(setupContent, 4) : '',
     returnNames.length > 0 ? `    return { ${returnNames.join(', ')} }` : '',
@@ -242,7 +291,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(() => {
@@ -268,13 +317,16 @@ 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) {
       return p1 + p2.replace(/>/g, '___TEMP_REPLACEMENT___') + p3
     })
-    .replace(/<(q-[\w-]+|div)([^>]*?)\s*?([\n\r][\t ]+)?\/>/gs, '<$1$2$3></$1>')
+    .replace(
+      /<([A-Z][\w-]*|[a-z][\w]*-[\w-]+|div)([^>]*?)\s*?([\n\r][\t ]+)?\/>/gs,
+      '<$1$2$3></$1>',
+    )
     .replace(
       /(<template[^>]*>)(\s*?(?:[\n\r][\t ]+)?)<(thead|tbody|tfoot)/gs,
       '$1$2<___PREVENT_TEMPLATE___$3',
@@ -299,6 +351,8 @@ const html = computed(() => {
     .replace(/___TEMP_REPLACEMENT___/g, '>')
     .replace(/^\s{2}/gm, '')
     .trim()
+
+  return rewriteRootRelativeUrls(content)
 })
 
 const editors = computed(() => {
@@ -310,10 +364,12 @@ const editors = computed(() => {
 })
 
 const computedTitle = computed(() => {
+  const titleSuffix = siteConfig.codepen?.titleSuffix ?? `Quasar v${Quasar.version}`
+
   return (
     (typeof document !== 'undefined' ? document.title.split(' | ')[0] + ': ' : '') +
     (props.title ? props.title + ' - ' : '') +
-    `Quasar v${Quasar.version}`
+    titleSuffix
   )
 })
 

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

@@ -96,7 +96,7 @@
 import { computed, inject, markRaw, ref, reactive, onBeforeUnmount, onMounted } from 'vue'
 import { openURL } from 'quasar'
 
-import { fabGithub, fabCodepen } from '@quasar/extras/fontawesome-v6'
+import { fabGithub, fabCodepen } from '@quasar/extras/fontawesome-v7'
 // import { mdiCompare } from '@quasar/extras/mdi-v7'
 
 import MarkdownCode from './MarkdownCode.vue'

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

@@ -10,7 +10,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { mdiLaunch } from '@quasar/extras/mdi-v6'
+import { mdiLaunch } from '@quasar/extras/mdi-v7'
 
 const props = defineProps({ to: { type: String, required: true } })
 const internal = computed(

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

@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import { mdiLaunch, mdiInformationOutline } from '@quasar/extras/mdi-v6'
+import { mdiLaunch, mdiInformationOutline } from '@quasar/extras/mdi-v7'
 
 const props = defineProps({
   def: {

package/src/templates/init/src/components/LandingPage/LandingPage.vue

@@ -113,7 +113,7 @@
 
 <script setup lang="ts">
 import { QIcon } from 'quasar'
-import { fabGithub } from '@quasar/extras/fontawesome-v6'
+import { fabGithub } from '@quasar/extras/fontawesome-v7'
 import { useRouter } from 'vue-router'
 import siteConfig from '../../siteConfig'
 

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

@@ -7,16 +7,16 @@ 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.29`.
+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.30`.
 
 ::: warning
-Q-Press and the Quasar app extensions now target Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.29`. 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.30`. 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.29`.
+- Upgrade the app to `@quasar/app-vite` `>=3.0.0-beta.30`.
 - 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`.

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.29` 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.30` at this time. TypeScript processing is also required. Do not use if you are using Webpack or have a JavaScript-only project.
 :::
 
 ::: tip

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.29`.
+This app extension targets Quasar Vite projects using `@quasar/app-vite` `>=3.0.0-beta.30`.
 :::
 
 ## Key Features

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

@@ -1,4 +1,4 @@
-import { fabGithub, fabXTwitter } from '@quasar/extras/fontawesome-v6'
+import { fabGithub, fabXTwitter } from '@quasar/extras/fontawesome-v7'
 import { slugify } from '@md-plugins/shared'
 import { version, productName } from '../../package.json'
 
@@ -75,6 +75,7 @@ export interface CodepenConfig {
   jsExternal?: string[]
   jsSetup?: string
   jsPreProcessor?: string
+  titleSuffix?: string
   head?: string
   globalPackages?: {
     packageName: string

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

@@ -41,6 +41,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
@@ -49,8 +69,8 @@ function indent(code: string, spaces = 2) {
     .join('\n')
 }
 
-function getImportNames(content: string, packageName: string) {
-  const names = new Set<string>()
+function getImportParts(content: string, packageName: string) {
+  const parts: { importName: string; bindingName: string }[] = []
   const escapedPackageName = packageName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
   const importRe = new RegExp(
     `import\\s+(?!type\\b){([^}]*)}\\s+from\\s+['"]${escapedPackageName}['"];?`,
@@ -66,15 +86,32 @@ function getImportNames(content: string, packageName: string) {
         continue
       }
 
-      const name = rawName.replace(/\s+as\s+/g, ': ')
+      const [importName, bindingName = importName] = rawName.split(/\s+as\s+/)
 
-      if (name.length > 0) {
-        names.add(name)
+      if (importName !== undefined && importName.length > 0) {
+        parts.push({
+          importName,
+          bindingName,
+        })
       }
     }
   }
 
-  return [...names]
+  return parts
+}
+
+function getImportNames(content: string, packageName: string) {
+  return [
+    ...new Set(
+      getImportParts(content, packageName).map(({ importName, bindingName }) =>
+        importName === bindingName ? importName : `${importName}: ${bindingName}`,
+      ),
+    ),
+  ]
+}
+
+function getImportBindingNames(content: string, packageName: string) {
+  return [...new Set(getImportParts(content, packageName).map(({ bindingName }) => bindingName))]
 }
 
 function getGlobalPackageImportLines(content: string) {
@@ -98,6 +135,16 @@ function getGlobalImportLines(content: string) {
   ].filter((line) => line.length > 0)
 }
 
+function getGlobalImportBindingNames(content: string) {
+  return [
+    ...getImportBindingNames(content, 'vue'),
+    ...getImportBindingNames(content, 'quasar'),
+    ...(siteConfig.codepen?.globalPackages ?? []).flatMap(({ packageName }: CodepenGlobalPackage) =>
+      getImportBindingNames(content, packageName),
+    ),
+  ]
+}
+
 function stripImports(content: string) {
   return content
     .replace(/^\s*import\s+type\s+[\s\S]*?\s+from\s+['"][^'"]+['"];?\s*$/gm, '')
@@ -185,7 +232,9 @@ function createSetupScript(script: string) {
   const { content } = getScriptBlock(script, true)
   const globalImports = getGlobalImportLines(content)
   const setupContent = stripCompilerMacros(stripImports(content))
-  const returnNames = getSetupReturnNames(setupContent)
+  const returnNames = [
+    ...new Set([...getGlobalImportBindingNames(content), ...getSetupReturnNames(setupContent)]),
+  ]
   const setupBody = [
     setupContent.length > 0 ? indent(setupContent, 4) : '',
     returnNames.length > 0 ? `    return { ${returnNames.join(', ')} }` : '',
@@ -242,7 +291,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(() => {
@@ -268,13 +317,16 @@ 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) {
       return p1 + p2.replace(/>/g, '___TEMP_REPLACEMENT___') + p3
     })
-    .replace(/<(q-[\w-]+|div)([^>]*?)\s*?([\n\r][\t ]+)?\/>/gs, '<$1$2$3></$1>')
+    .replace(
+      /<([A-Z][\w-]*|[a-z][\w]*-[\w-]+|div)([^>]*?)\s*?([\n\r][\t ]+)?\/>/gs,
+      '<$1$2$3></$1>',
+    )
     .replace(
       /(<template[^>]*>)(\s*?(?:[\n\r][\t ]+)?)<(thead|tbody|tfoot)/gs,
       '$1$2<___PREVENT_TEMPLATE___$3',
@@ -299,6 +351,8 @@ const html = computed(() => {
     .replace(/___TEMP_REPLACEMENT___/g, '>')
     .replace(/^\s{2}/gm, '')
     .trim()
+
+  return rewriteRootRelativeUrls(content)
 })
 
 const editors = computed(() => {
@@ -310,10 +364,12 @@ const editors = computed(() => {
 })
 
 const computedTitle = computed(() => {
+  const titleSuffix = siteConfig.codepen?.titleSuffix ?? `Quasar v${Quasar.version}`
+
   return (
     (typeof document !== 'undefined' ? document.title.split(' | ')[0] + ': ' : '') +
     (props.title ? props.title + ' - ' : '') +
-    `Quasar v${Quasar.version}`
+    titleSuffix
   )
 })
 

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

@@ -96,7 +96,7 @@
 import { computed, inject, markRaw, ref, reactive, onBeforeUnmount, onMounted } from 'vue'
 import { openURL } from 'quasar'
 
-import { fabGithub, fabCodepen } from '@quasar/extras/fontawesome-v6'
+import { fabGithub, fabCodepen } from '@quasar/extras/fontawesome-v7'
 // import { mdiCompare } from '@quasar/extras/mdi-v7'
 
 import MarkdownCode from './MarkdownCode.vue'

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

@@ -10,7 +10,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { mdiLaunch } from '@quasar/extras/mdi-v6'
+import { mdiLaunch } from '@quasar/extras/mdi-v7'
 
 const props = defineProps({ to: { type: String, required: true } })
 const internal = computed(

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

@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import { mdiLaunch, mdiInformationOutline } from '@quasar/extras/mdi-v6'
+import { mdiLaunch, mdiInformationOutline } from '@quasar/extras/mdi-v7'
 
 const props = defineProps({
   def: {