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

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.
 

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
@@ -271,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(() => {
@@ -297,7 +317,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 +351,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/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
@@ -271,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(() => {
@@ -297,7 +317,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 +351,8 @@ const html = computed(() => {
     .replace(/___TEMP_REPLACEMENT___/g, '>')
     .replace(/^\s{2}/gm, '')
     .trim()
+
+  return rewriteRootRelativeUrls(content)
 })
 
 const editors = computed(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@md-plugins/quasar-app-extension-q-press",
-  "version": "0.1.0-beta.12",
+  "version": "0.1.0-beta.13",
   "description": "QPress - The Ultimate Markdown Solution for Quasar Framework",
   "keywords": [
     "markdown",
@@ -30,19 +30,19 @@
     "@types/markdown-it": "^14.1.2",
     "fs-extra": "^11.3.5",
     "markdown-it": "^14.2.0",
-    "@md-plugins/md-plugin-containers": "0.1.0-beta.12",
-    "@md-plugins/md-plugin-codeblocks": "0.1.0-beta.12",
-    "@md-plugins/md-plugin-headers": "0.1.0-beta.12",
-    "@md-plugins/md-plugin-frontmatter": "0.1.0-beta.12",
-    "@md-plugins/md-plugin-image": "0.1.0-beta.12",
-    "@md-plugins/md-plugin-blockquote": "0.1.0-beta.12",
-    "@md-plugins/md-plugin-imports": "0.1.0-beta.12",
-    "@md-plugins/md-plugin-inlinecode": "0.1.0-beta.12",
-    "@md-plugins/md-plugin-link": "0.1.0-beta.12",
-    "@md-plugins/md-plugin-table": "0.1.0-beta.12",
-    "@md-plugins/md-plugin-title": "0.1.0-beta.12",
-    "@md-plugins/shared": "0.1.0-beta.12",
-    "@md-plugins/vite-md-plugin": "0.1.0-beta.12"
+    "@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.30",

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
@@ -271,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(() => {
@@ -297,7 +317,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 +351,8 @@ const html = computed(() => {
     .replace(/___TEMP_REPLACEMENT___/g, '>')
     .replace(/^\s{2}/gm, '')
     .trim()
+
+  return rewriteRootRelativeUrls(content)
 })
 
 const editors = computed(() => {

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
@@ -271,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(() => {
@@ -297,7 +317,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 +351,8 @@ const html = computed(() => {
     .replace(/___TEMP_REPLACEMENT___/g, '>')
     .replace(/^\s{2}/gm, '')
     .trim()
+
+  return rewriteRootRelativeUrls(content)
 })
 
 const editors = computed(() => {