@md-plugins/quasar-app-extension-q-press 0.1.0-beta.17 → 0.1.0-beta.18

package/README.md

@@ -40,12 +40,12 @@ See the [documentation](https://md-plugins.netlify.app/quasar-app-extensions/qpr
 - `pnpm i -D markdown-it @types/markdown-it`
 - `bun add -d markdown-it @types/markdown-it`
 
-3. Add `prismjs` to your project dependencies
+3. Q-Press adds `shiki` to your project dependencies when invoked. If you are wiring the generated files manually, add it yourself:
 
-- `npm i prismjs`
-- `yarn add prismjs`
-- `pnpm add prismjs`
-- `bun add prismjs`
+- `npm i shiki`
+- `yarn add shiki`
+- `pnpm add shiki`
+- `bun add shiki`
 
 ## Modifications
 

package/dist/install.js

@@ -22,6 +22,11 @@ export default defineInstallScript(async (api) => {
         console.error('----------------------------------');
         throw new Error('This extension requires TypeScript');
     }
+    api.extendPackageJson({
+        dependencies: {
+            shiki: '^4.1.0',
+        },
+    });
     const path = api.resolve.src('siteConfig');
     if (existsSync(path)) {
         // this is an update scenario

package/dist/templates/init/src/_q-press/api/components/MarkdownCode.json

@@ -6,7 +6,7 @@
   "props": {
     "code": {
       "type": "String",
-      "desc": "The code to display",
+      "desc": "The code to display with Shiki syntax highlighting",
       "examples": [
         "'const a = 1;'",
         "'<div>Hello World</div>'"
@@ -34,4 +34,4 @@
       "category": "content"
     }
   }
-}
+}

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

@@ -1,14 +1,20 @@
 <template>
   <div class="relative-position markdown-copybtn-hover">
-    <MarkdownCodePrism :lang="props.lang" :code="props.code" :style="style" />
+    <pre class="markdown-code" :class="block.className" :style="[style, block.style]"><code v-html="block.code"></code></pre>
     <MarkdownCopyButton />
   </div>
 </template>
 
 <script setup lang="ts">
+import { createHighlighterCoreSync } from 'shiki/core'
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
+import htmlLang from 'shiki/langs/html.mjs'
+import javascriptLang from 'shiki/langs/javascript.mjs'
+import vueLang from 'shiki/langs/vue.mjs'
+import githubDark from 'shiki/themes/github-dark.mjs'
+import githubLight from 'shiki/themes/github-light.mjs'
 import { computed } from 'vue'
 
-import MarkdownCodePrism from './MarkdownCodePrism'
 import MarkdownCopyButton from './MarkdownCopyButton.vue'
 
 const props = defineProps({
@@ -28,4 +34,66 @@ const props = defineProps({
 })
 
 const style = computed(() => (props.maxHeight !== void 0 ? { maxHeight: props.maxHeight } : null))
+
+const block = computed(() => {
+  return parseHighlightedBlock(highlightCode(props.code, props.lang))
+})
+
+const highlighter = createHighlighterCoreSync({
+  engine: createJavaScriptRegexEngine(),
+  themes: [githubLight, githubDark],
+  langs: [htmlLang, javascriptLang, vueLang].flat(),
+  langAlias: {
+    bash: 'javascript',
+    css: 'html',
+    js: 'javascript',
+    markup: 'vue',
+    sass: 'html',
+    scss: 'html',
+    sh: 'javascript',
+    shell: 'javascript',
+    ts: 'javascript',
+  },
+})
+
+function highlightCode(code: string, lang: string): string {
+  const options = {
+    lang: normalizeLang(lang),
+    themes: {
+      light: 'github-light',
+      dark: 'github-dark',
+    },
+    defaultColor: false,
+  } as const
+
+  try {
+    return highlighter.codeToHtml(code, options)
+  } catch {
+    return highlighter.codeToHtml(code, {
+      ...options,
+      lang: 'text',
+    })
+  }
+}
+
+function normalizeLang(lang: string): string {
+  return (
+    {
+      js: 'javascript',
+      markup: 'html',
+      ts: 'typescript',
+    }[lang] ?? lang
+  )
+}
+
+function parseHighlightedBlock(html: string): { className: string; code: string; style: string } {
+  const match = html.match(/^<pre(?<attrs>[^>]*)><code>(?<code>[\s\S]*)<\/code><\/pre>$/)
+  const attrs = match?.groups?.attrs ?? ''
+
+  return {
+    className: attrs.match(/class="(?<value>[^"]*)"/)?.groups?.value ?? 'shiki',
+    code: match?.groups?.code ?? '',
+    style: attrs.match(/style="(?<value>[^"]*)"/)?.groups?.value ?? '',
+  }
+}
 </script>

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

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

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

@@ -1,8 +1,8 @@
 @use 'sass:math';
 @use './fonts.scss';
 
-// Keep this import so Prism shares the selected qPress theme variables.
-@import './prism-theme.scss';
+// Keep this import so Shiki code blocks share the selected qPress theme variables.
+@import './code-theme.scss';
 
 .material-icons {
   font-family: 'Material Icons';
@@ -83,9 +83,10 @@ ul {
   line-height: $font-size;
   border-radius: $generic-border-radius;
   font-family: inherit;
-  color: scale-color($brand-primary, $lightness: -35%);
+  color: $brand-light-text;
+  background-color: rgba($brand-primary, 0.08);
   vertical-align: baseline;
-  border: 1px solid currentColor;
+  border: 1px solid rgba($brand-primary, 0.5);
 }
 
 .markdown-note {
@@ -108,10 +109,13 @@ ul {
     // .markdown-note__title,
     .markdown-link,
     .markdown-token {
-      color: scale-color($brand-primary, $lightness: -35%);
+      color: $brand-light-text;
+    }
+    .markdown-link {
+      border-bottom-color: rgba($brand-primary, 0.78);
     }
     .markdown-token {
-      border-color: scale-color($brand-primary, $lightness: -35%);
+      border-color: rgba($brand-primary, 0.5);
     }
     & strong {
       font-weight: 700;
@@ -553,6 +557,12 @@ $letter-spacing-list: 40, 100, 225, 263, 300, 375, 450;
 }
 
 body.body--dark {
+  .markdown-token {
+    color: $brand-dark-text;
+    background-color: rgba($brand-primary, 0.18);
+    border-color: rgba($brand-primary, 0.72);
+  }
+
   .markdown-technical {
     color: $brand-dark-text;
     background: $brand-dark-bg;

package/{src/templates/update/src/_q-press/css/prism-theme.scss → dist/templates/init/src/_q-press/css/code-theme.scss}

@@ -29,11 +29,16 @@
   &--copying {
     .c-lpref,
     .c-line,
-    .token.deleted-sign,
-    .token.prefix {
+    .line.diff.remove {
       display: none;
     }
   }
+
+  .line {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+  }
 }
 
 .c-line {
@@ -100,6 +105,11 @@
 }
 
 body.body--light {
+  .shiki,
+  .shiki span {
+    color: var(--shiki-light);
+  }
+
   .markdown-code {
     color: $brand-light-codeblock-text;
     background-color: $brand-light-codeblock-bg;
@@ -205,6 +215,11 @@ body.body--light {
 }
 
 body.body--dark {
+  .shiki,
+  .shiki span {
+    color: var(--shiki-dark);
+  }
+
   .markdown-code {
     color: $brand-dark-codeblock-text;
     background-color: $brand-dark-codeblock-bg;

package/dist/templates/init/src/_q-press/css/themes/default.scss

@@ -33,7 +33,7 @@ $light-pill: $brand-light;
 $light-text: $brand-light-text;
 $light-bg: $brand-light-bg;
 
-$dark-pill: scale-color($brand-primary, $lightness: -80%);
+$dark-pill: scale-color($brand-dark-bg, $lightness: 12%);
 $dark-text: $brand-dark-text;
 $dark-bg: $brand-dark-bg;
 

package/dist/templates/init/src/_q-press/css/themes/mystic.scss

@@ -38,7 +38,7 @@ $light-pill: $brand-light;
 $light-text: $brand-light-text;
 $light-bg: $brand-light-bg;
 
-$dark-pill: scale-color($brand-primary, $lightness: -80%);
+$dark-pill: scale-color($brand-dark-bg, $lightness: 12%);
 $dark-text: $brand-dark-text;
 $dark-bg: $brand-dark-bg;
 

package/dist/templates/init/src/_q-press/css/themes/newspaper.scss

@@ -34,7 +34,7 @@ $light-pill: $brand-light;
 $light-text: $brand-light-text;
 $light-bg: $brand-light-bg;
 
-$dark-pill: scale-color($brand-primary, $lightness: -60%);
+$dark-pill: scale-color($brand-dark-bg, $lightness: 12%);
 $dark-text: $brand-dark-text;
 $dark-bg: $brand-dark-bg;
 

package/dist/templates/init/src/_q-press/css/themes/sunrise.scss

@@ -34,7 +34,7 @@ $light-pill: $brand-light;
 $light-text: $brand-light-text;
 $light-bg: $brand-light-bg;
 
-$dark-pill: scale-color($brand-dark, $lightness: 20%);
+$dark-pill: scale-color($brand-dark-bg, $lightness: 12%);
 $dark-text: $brand-dark-text;
 $dark-bg: $brand-dark-bg;
 

package/dist/templates/init/src/_q-press/css/themes/tawny.scss

@@ -34,7 +34,7 @@ $light-pill: $brand-light;
 $light-text: $brand-light-text;
 $light-bg: $brand-light-bg;
 
-$dark-pill: scale-color($brand-primary, $lightness: -80%);
+$dark-pill: scale-color($brand-dark-bg, $lightness: 12%);
 $dark-text: $brand-dark-text;
 $dark-bg: $brand-dark-bg;
 

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

@@ -26,7 +26,7 @@
           </span>
         </router-link>
         <router-link
-          to="/guides/upgrade-guide"
+          to="/other/upgrade-guide"
           class="hero-button q-btn q-btn-item non-selectable no-outline q-btn--standard q-btn--rectangle q-btn--actionable q-focusable q-hoverable q-btn--no-uppercase q-btn--rounded q-btn--dense"
         >
           <span
@@ -54,6 +54,10 @@
         Markdown Plugins go beyond the standard Markdown syntax.<br />Discover the power of Markdown
         Plugins and enhance your documentation experience!
       </p>
+      <p>
+        Use the Markdown-it and Vite plugins in Vue/Vite projects, or choose the Quasar app
+        extensions when you want Q-Press and Quasar CLI Vite integration.
+      </p>
     </div>
     <div class="row justify-center hero">
       <div class="hero-title">Markdown-It! Plugins</div>

package/dist/templates/init/src/components/page-parts/releases/GitHubReleases.vue

@@ -0,0 +1,121 @@
+<template>
+  <q-card flat bordered>
+    <q-card-section v-if="error" class="row no-wrap items-center">
+      <q-icon name="warning" size="24px" color="negative" class="q-mr-sm" />
+      <div>Cannot connect to GitHub. Try again later.</div>
+    </q-card-section>
+    <q-card-section v-else-if="loading" class="row no-wrap items-center">
+      <q-spinner size="24px" color="primary" class="q-mr-sm" />
+      <div>Loading release notes from GitHub</div>
+    </q-card-section>
+    <template v-else>
+      <q-separator />
+      <q-tab-panels v-model="currentPackage" animated class="packages-container">
+        <q-tab-panel
+          v-for="(packageReleases, packageName) in packages"
+          :key="packageName"
+          :name="packageName"
+          class="q-pa-none"
+        >
+          <PackageReleases
+            :latest-version="latestVersions[packageName]"
+            :releases="packageReleases"
+            repo-url="https://github.com/md-plugins/md-plugins"
+          />
+        </q-tab-panel>
+      </q-tab-panels>
+    </template>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { date } from 'quasar'
+
+import PackageReleases from './PackageReleases.vue'
+import type { ReleaseInfo } from './PackageReleases.vue'
+
+const { extractDate, formatDate } = date
+const packageName = 'MD-Plugins'
+
+interface GitHubRelease {
+  name?: string
+  tag_name?: string
+  published_at: string
+  body?: string
+}
+
+type ReleasePackageMap = Record<string, ReleaseInfo[]>
+
+const loading = ref(false)
+const error = ref(false)
+const packages = ref<ReleasePackageMap>({ [packageName]: [] })
+const currentPackage = ref(packageName)
+const latestVersions = ref<Record<string, string>>({})
+
+function getReleaseVersion(release: GitHubRelease): string | undefined {
+  const name = release.name || release.tag_name || ''
+  const match = name.match(/(?:^|\s)v?(\d+\.\d+\.\d+(?:[-\w.]+)?)/)
+
+  return match?.[1] ?? release.tag_name?.replace(/^v/, '')
+}
+
+async function queryReleases(): Promise<void> {
+  loading.value = true
+  error.value = false
+
+  try {
+    const response = await fetch(
+      'https://api.github.com/repos/md-plugins/md-plugins/releases?per_page=100',
+    )
+
+    if (response.ok === false) {
+      throw new Error(`GitHub request failed with ${response.status}`)
+    }
+
+    const releases = (await response.json()) as GitHubRelease[]
+    const parsedReleases = releases
+      .map((release) => {
+        const version = getReleaseVersion(release)
+
+        if (version === undefined) {
+          return null
+        }
+
+        return {
+          version,
+          date: formatDate(extractDate(release.published_at, 'YYYY-MM-DD'), 'YYYY-MM-DD'),
+          body: release.body || '',
+          label: version,
+        }
+      })
+      .filter((release): release is ReleaseInfo => release !== null)
+      .sort((a, b) => {
+        return (
+          Number.parseInt(b.date.replace(/-/g, ''), 10) -
+          Number.parseInt(a.date.replace(/-/g, ''), 10)
+        )
+      })
+
+    if (parsedReleases.length === 0) {
+      throw new Error('No releases returned from GitHub')
+    }
+
+    packages.value = { [packageName]: parsedReleases }
+    latestVersions.value = { [packageName]: parsedReleases[0]?.label ?? '' }
+  } catch {
+    error.value = true
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(queryReleases)
+</script>
+
+<style lang="scss">
+.packages-container .q-tab-panel {
+  padding-right: 0;
+  padding-top: 0;
+}
+</style>

package/dist/templates/init/src/components/page-parts/releases/PackageReleases.vue

@@ -0,0 +1,191 @@
+<template>
+  <div>
+    <q-input
+      v-model="search"
+      dense
+      square
+      borderless
+      color="white"
+      placeholder="Search..."
+      clearable
+      class="q-mx-md"
+    >
+      <template #prepend>
+        <q-icon :name="mdiMagnify" />
+      </template>
+    </q-input>
+    <q-separator />
+    <q-splitter :model-value="20" :limits="[14, 90]" class="release__splitter">
+      <template #before>
+        <q-scroll-area>
+          <q-tabs
+            v-model="selectedVersion"
+            vertical
+            active-color="primary"
+            active-bg-color="blue-1"
+            indicator-color="primary"
+          >
+            <q-tab
+              v-for="releaseInfo in filteredReleases"
+              :key="releaseInfo.label"
+              :name="releaseInfo.label"
+            >
+              <div class="q-tab__label">{{ releaseInfo.version }}</div>
+              <small class="text-grey-7">{{ releaseInfo.date }}</small>
+            </q-tab>
+          </q-tabs>
+        </q-scroll-area>
+      </template>
+      <template #after>
+        <q-tab-panels
+          v-model="selectedVersion"
+          animated
+          transition-prev="slide-down"
+          transition-next="slide-up"
+          class="releases-container"
+        >
+          <q-tab-panel
+            v-for="releaseInfo in filteredReleases"
+            :key="releaseInfo.label"
+            :name="releaseInfo.label"
+            class="q-pa-none"
+          >
+            <q-scroll-area>
+              <div class="q-pa-md" v-html="currentReleaseBody" />
+            </q-scroll-area>
+          </q-tab-panel>
+        </q-tab-panels>
+      </template>
+    </q-splitter>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { mdiMagnify } from '@quasar/extras/mdi-v7'
+
+import sanitize from './sanitize'
+import parseMdTable from './md-table-parser'
+
+export interface ReleaseInfo {
+  version: string
+  date: string
+  body: string
+  label: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    latestVersion?: string | undefined
+    releases?: ReleaseInfo[]
+    repoUrl?: string
+  }>(),
+  {
+    releases: () => [],
+    repoUrl: 'https://github.com/md-plugins/md-plugins',
+  },
+)
+
+const search = ref('')
+const selectedVersion = ref<string | undefined>(props.latestVersion)
+
+watch(
+  () => props.latestVersion,
+  (val) => {
+    selectedVersion.value = val
+  },
+)
+
+const filteredReleases = computed(() => {
+  if (search.value !== '') {
+    const val = search.value.toLowerCase()
+
+    return props.releases.filter((release) => release.body.toLowerCase().includes(val))
+  }
+
+  return props.releases
+})
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+function parse(body: string): string {
+  let content = sanitize(body) + '\n'
+
+  if (search.value !== '') {
+    content = content.replace(
+      new RegExp(`(${escapeRegExp(search.value)})`, 'gi'),
+      '<span class="bg-accent text-white">$1</span>',
+    )
+  }
+
+  content = content
+    .replace(/### ([\S ]+)/g, '<div class="text-h6">$1</div>')
+    .replace(/## ([\S ]+)/g, '<div class="text-h5">$1</div>')
+    .replace(/# ([\S ]+)/g, '<div class="text-h4">$1</div>')
+    .replace(/\*\*([\S ]*?)\*\*/g, '<strong>$1</strong>')
+    .replace(/\*([\S ]*?)\*/g, '<em>$1</em>')
+    .replace(/```([\S]+)/g, '<pre class="markdown-code release__code"><code>')
+    .replace(/```\n/g, '</code></pre>')
+    .replace(/`(.*?)`/g, '<code class="markdown-token">$1</code>')
+    .replace(
+      /#([\d]+)/g,
+      `<a class="markdown-link" href="${props.repoUrl}/issues/$1" target="_blank">#$1</a>`,
+    )
+    .replace(/^&gt; ([\S ]+)$/gm, '<div class="release__blockquote">$1</div>')
+    .replace(
+      /\[([\S ]*?)\]\((\S*?)\)/g,
+      '<a class="markdown-link" href="$2" target="_blank">$1</a>',
+    )
+    .replace(/^ {2}[-*] ([\S .]+)$/gm, '<li class="q-pl-md">$1</li>')
+    .replace(/^[-*] ([\S .]+)$/gm, '<li>$1</li>')
+    .replace(/<\/li>[\s\n\r]*<li/g, '</li><li')
+    .replace(/(<li(?: class="[^"]*")?>.*?<\/li>)+/g, '<ul class="release__list">$&</ul>')
+    .replace(/\n/g, '<br>')
+
+  return content.includes('| -') ? parseMdTable(content) : content
+}
+
+const currentReleaseBody = computed(() => {
+  const release = props.releases.find((entry) => entry.label === selectedVersion.value)
+
+  return release ? parse(release.body) : ''
+})
+</script>
+
+<style lang="scss">
+.release__splitter .q-scrollarea {
+  height: 600px;
+}
+
+.release__body {
+  white-space: pre-line;
+
+  .q-markup-table {
+    white-space: normal;
+  }
+}
+
+.release__list {
+  margin: 8px 0 16px;
+  padding-left: 28px;
+
+  li {
+    margin: 4px 0;
+    padding-left: 4px;
+  }
+}
+
+.release__blockquote {
+  background: rgba($primary, 0.05);
+  border: 1px solid $primary;
+  padding: 4px 8px;
+  border-radius: $generic-border-radius;
+}
+
+.release__code {
+  padding: 4px;
+  margin: 8px;
+}
+</style>

package/dist/templates/init/src/components/page-parts/releases/md-table-parser.ts

@@ -0,0 +1,52 @@
+function getTable(rows: string[]): string {
+  const header = (rows[0] ?? '')
+    .split('|')
+    .filter((col) => col)
+    .map((col) => `<th class="text-left">${col.trim()}</th>`)
+    .join('')
+
+  const body = rows
+    .slice(2)
+    .map(
+      (row) =>
+        '<tr>' +
+        row
+          .split('|')
+          .filter((col) => col)
+          .map((col) => `<td>${col.trim()}</td>`)
+          .join('') +
+        '</tr>',
+    )
+    .join('')
+
+  return (
+    '<div class="q-markup-table q-table__container q-table__card ' +
+    'q-table--horizontal-separator q-table--flat q-table--bordered ' +
+    'q-table--no-wrap q-table--dense">' +
+    `<table class="q-table"><thead>${header}</thead>` +
+    `<tbody>${body}</tbody></table></div>`
+  )
+}
+
+export default function parseMdTable(raw: string): string {
+  let content = ''
+  let tableRows: string[] = []
+
+  for (const row of raw.split('\n')) {
+    if (row.indexOf('|') > -1) {
+      tableRows.push(row.trim())
+    } else {
+      if (tableRows.length > 0) {
+        content += getTable(tableRows) + '\n'
+        tableRows = []
+      }
+      content += row + '\n'
+    }
+  }
+
+  if (tableRows.length > 0) {
+    content += getTable(tableRows) + '\n'
+  }
+
+  return content
+}