@md-plugins/quasar-app-extension-q-press 0.1.0-beta.2 → 0.1.0-beta.21

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

@@ -0,0 +1,123 @@
+<template>
+  <div class="markdown-mermaid q-my-md">
+    <div
+      v-if="errorMessage"
+      class="markdown-mermaid__error"
+      role="alert"
+    >
+      {{ errorMessage }}
+    </div>
+    <div
+      v-else-if="isRendering"
+      class="markdown-mermaid__loading"
+    >
+      Rendering diagram...
+    </div>
+    <div
+      ref="containerRef"
+      class="markdown-mermaid__diagram"
+    ></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { uid, useQuasar } from 'quasar'
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+const props = defineProps<{
+  code: string
+}>()
+
+const $q = useQuasar()
+const containerRef = ref<HTMLElement | null>(null)
+const errorMessage = ref('')
+const isRendering = ref(false)
+
+let disposed = false
+let renderRequest = 0
+
+async function renderDiagram(): Promise<void> {
+  if (import.meta.env.QUASAR_CLIENT !== true || containerRef.value === null) {
+    return
+  }
+
+  const requestId = ++renderRequest
+
+  errorMessage.value = ''
+  isRendering.value = true
+
+  await nextTick()
+
+  try {
+    const { default: mermaid } = await import('mermaid')
+
+    mermaid.initialize({
+      securityLevel: 'strict',
+      startOnLoad: false,
+      theme: $q.dark.isActive === true ? 'dark' : 'default',
+    })
+
+    const { svg, bindFunctions } = await mermaid.render(`markdown-mermaid-${uid()}`, props.code)
+
+    if (disposed === true || requestId !== renderRequest || containerRef.value === null) {
+      return
+    }
+
+    containerRef.value.innerHTML = svg
+    bindFunctions?.(containerRef.value)
+  } catch (error) {
+    if (disposed === false && requestId === renderRequest) {
+      errorMessage.value = error instanceof Error ? error.message : 'Unable to render diagram.'
+    }
+  } finally {
+    if (disposed === false && requestId === renderRequest) {
+      isRendering.value = false
+    }
+  }
+}
+
+onMounted(() => {
+  void renderDiagram()
+})
+
+watch(
+  () => [props.code, $q.dark.isActive] as const,
+  () => {
+    void renderDiagram()
+  },
+)
+
+onBeforeUnmount(() => {
+  disposed = true
+})
+</script>
+
+<style lang="scss">
+.markdown-mermaid {
+  border: 1px solid var(--q-separator-color);
+  border-radius: 8px;
+  overflow-x: auto;
+  padding: 1rem;
+
+  &__diagram {
+    min-width: 100%;
+    text-align: center;
+
+    svg {
+      max-width: 100%;
+      height: auto;
+    }
+  }
+
+  &__error {
+    color: var(--q-negative);
+    font-family: monospace;
+    white-space: pre-wrap;
+  }
+
+  &__loading {
+    color: var(--q-secondary);
+    font-style: italic;
+  }
+}
+</style>

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

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

package/src/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/src/templates/update/src/_q-press/css/app.scss

@@ -1,7 +1,9 @@
 @use 'sass:math';
+@use 'sass:color';
+@use './fonts.scss';
 
-@import './fonts.scss';
-@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';
@@ -82,9 +84,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 {
@@ -107,10 +110,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;
@@ -119,16 +125,16 @@ ul {
   }
 
   &--tip {
-    color: scale-color($positive, $lightness: -40%) !important;
-    background-color: scale-color($positive, $lightness: 85%);
+    color: color.scale($positive, $lightness: -40%) !important;
+    background-color: color.scale($positive, $lightness: 85%);
     border-color: $positive;
     .markdown-note__title,
     .markdown-link,
     .markdown-token {
-      color: scale-color($positive, $lightness: -40%);
+      color: color.scale($positive, $lightness: -40%);
     }
     .markdown-token {
-      border-color: scale-color($positive, $lightness: -40%);
+      border-color: color.scale($positive, $lightness: -40%);
     }
     & strong {
       font-weight: 700;
@@ -137,16 +143,16 @@ ul {
   }
 
   &--warning {
-    color: scale-color($warning, $lightness: -40%);
-    background-color: scale-color($warning, $lightness: 85%);
-    border-color: scale-color($warning, $lightness: -30%);
+    color: color.scale($warning, $lightness: -40%);
+    background-color: color.scale($warning, $lightness: 85%);
+    border-color: color.scale($warning, $lightness: -30%);
     .markdown-note__title,
     .markdown-link,
     .markdown-token {
-      color: scale-color($warning, $lightness: -40%);
+      color: color.scale($warning, $lightness: -40%);
     }
     .markdown-token {
-      border-color: scale-color($warning, $lightness: -40%);
+      border-color: color.scale($warning, $lightness: -40%);
     }
     & strong {
       font-weight: 700;
@@ -155,8 +161,8 @@ ul {
   }
 
   &--danger {
-    color: scale-color($negative, $lightness: -40%);
-    background-color: scale-color($negative, $lightness: 90%);
+    color: color.scale($negative, $lightness: -40%);
+    background-color: color.scale($negative, $lightness: 90%);
     border-color: $negative;
     .markdown-note__title,
     .markdown-link,
@@ -511,7 +517,7 @@ body.q-scroll--lock .q-page > .q-scroll--anchor {
 .markdown-heading .q-badge,
 .header-badge {
   color: $brand-primary;
-  background: scale-color($light-bg, $lightness: 15%);
+  background: color.scale($light-bg, $lightness: 15%);
   vertical-align: super;
   letter-spacing: $letter-spacing-brand;
   padding: 4px 8px;
@@ -552,6 +558,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;
@@ -591,9 +603,9 @@ body.body--dark {
 
   .markdown-note {
     &:not(.markdown-note--tip, .markdown-note--warning, .markdown-note--danger) {
-      color: scale-color($dark-pill, $lightness: 80%);
+      color: color.scale($dark-pill, $lightness: 80%);
       background-color: $dark-pill;
-      border-color: scale-color($dark-pill, $lightness: 50%);
+      border-color: color.scale($dark-pill, $lightness: 50%);
       .markdown-token {
         border-color: #ddd;
         color: #ddd;
@@ -605,7 +617,7 @@ body.body--dark {
 
     &--tip {
       border-color: $positive;
-      background-color: scale-color($positive, $lightness: -85%);
+      background-color: color.scale($positive, $lightness: -85%);
       .markdown-note__title,
       .markdown-link,
       .markdown-token {
@@ -618,7 +630,7 @@ body.body--dark {
 
     &--warning {
       border-color: $warning;
-      background-color: scale-color($warning, $lightness: -85%);
+      background-color: color.scale($warning, $lightness: -85%);
       .markdown-note__title,
       .markdown-link,
       .markdown-token {
@@ -631,7 +643,7 @@ body.body--dark {
 
     &--danger {
       border-color: $negative;
-      background-color: scale-color($negative, $lightness: -80%);
+      background-color: color.scale($negative, $lightness: -80%);
     }
   }
 
@@ -656,7 +668,7 @@ body.body--dark {
   padding: 4px 8px 4px 28px;
   position: relative;
   border-radius: 3px 5px 5px 0;
-  background: scale-color($brand-light, $lightness: -15%);
+  background: color.scale($brand-light, $lightness: -15%);
   color: $brand-secondary;
   font-size: ($font-size + 2px);
   letter-spacing: $letter-spacing-brand;
@@ -670,7 +682,7 @@ body.body--dark {
     height: 0;
     border: 0 solid transparent;
     border-width: 9px 0 0 11px;
-    border-top-color: scale-color($brand-light, $lightness: -25%);
+    border-top-color: color.scale($brand-light, $lightness: -25%);
   }
 }
 
@@ -678,6 +690,6 @@ body.body--dark .markdown-card-title {
   background: $brand-secondary;
   color: $dark-text;
   &:after {
-    border-top-color: scale-color($brand-secondary, $lightness: -30%);
+    border-top-color: color.scale($brand-secondary, $lightness: -30%);
   }
 }