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

package/dist/templates/update/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: color.scale($brand-dark-bg, $lightness: 12%);
 $dark-text: $brand-dark-text;
 $dark-bg: $brand-dark-bg;
 

package/dist/templates/update/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: color.scale($brand-dark-bg, $lightness: 12%);
 $dark-text: $brand-dark-text;
 $dark-bg: $brand-dark-bg;
 

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/MarkdownHeader.vue

@@ -306,7 +306,7 @@ const hasMoreLinks = computed(() => siteConfig.links.moreLinks.length > 0)
   }
 
   &__links {
-    justify-content: end;
+    justify-content: flex-end;
 
     @media (min-width: 1921px) {
       justify-content: center;

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'
@@ -101,7 +101,7 @@ const pageContentClass = computed(
       }
 
       @media (max-width: 1845px) {
-        justify-content: start;
+        justify-content: flex-start;
 
         .markdown-page__toc-container--flowing {
           display: none;

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

@@ -49,7 +49,7 @@
 
     <slot />
 
-    <div v-if="props.nav" class="markdown-page__nav markdown-page__nav--footer">
+    <div v-if="showFooterNav" class="markdown-page__nav markdown-page__nav--footer">
       <div class="text-h6 q-pb-md markdown-heading">Ready for more?</div>
       <div class="q-gutter-sm flex">
         <router-link
@@ -94,7 +94,6 @@ import { useRoute } from 'vue-router'
 import { mdiPencil, mdiFlash, mdiLaunch } from '@quasar/extras/mdi-v7'
 
 import type { NavItem, RelatedItem } from '@md-plugins/vite-md-plugin'
-import type { TocItem } from '@md-plugins/md-plugin-headers'
 import MarkdownLink from '../components/MarkdownLink.vue'
 import MarkdownPageToc from './MarkdownPageToc.vue'
 
@@ -129,7 +128,7 @@ const props = defineProps({
   },
 
   toc: {
-    type: Array<TocItem>,
+    type: Array<TocMenuItem>,
     default: () => [],
   },
   related: {
@@ -164,6 +163,8 @@ const editHref = computed(() => `${siteConfig.githubEditRootSrc}/markdown/${prop
 
 const isFullscreen = computed(() => route.meta.fullscreen === true || props.fullscreen)
 
+const showFooterNav = computed(() => isFullscreen.value !== true && props.nav.length > 0)
+
 const hasToc = computed(
   () =>
     route.meta.fullwidth !== true &&

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

@@ -39,7 +39,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { useQuasar } from 'quasar'
 import { computed, ref, watch, markRaw, onMounted, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter } from 'vue-router'

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

@@ -1,7 +1,6 @@
 import { defineStore, acceptHMRUpdate } from 'pinia'
 import { useRoute } from 'vue-router'
 import { useScroll } from '../composables/scroll'
-import type { TocItem } from '@md-plugins/md-plugin-headers'
 
 export const useMarkdownStore = defineStore('markdown-store', {
   state: () => ({
@@ -60,7 +59,7 @@ export const useMarkdownStore = defineStore('markdown-store', {
       }
     },
 
-    setToc(toc: TocItem[]) {
+    setToc(toc: TocMenuItem[]) {
       const { scrollTo } = useScroll()
       this.toc =
         toc !== void 0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@md-plugins/quasar-app-extension-q-press",
-  "version": "0.1.0-beta.2",
+  "version": "0.1.0-beta.21",
   "description": "QPress - The Ultimate Markdown Solution for Quasar Framework",
   "keywords": [
     "markdown",
@@ -22,39 +22,40 @@
   },
   "type": "module",
   "main": "dist/index.js",
+  "types": "dist/q-press-globals.d.ts",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "@types/markdown-it": "^14.1.2",
-    "fs-extra": "^11.3.4",
-    "markdown-it": "^14.1.1",
-    "@md-plugins/md-plugin-blockquote": "0.1.0-beta.2",
-    "@md-plugins/md-plugin-containers": "0.1.0-beta.2",
-    "@md-plugins/md-plugin-image": "0.1.0-beta.2",
-    "@md-plugins/md-plugin-frontmatter": "0.1.0-beta.2",
-    "@md-plugins/md-plugin-headers": "0.1.0-beta.2",
-    "@md-plugins/md-plugin-imports": "0.1.0-beta.2",
-    "@md-plugins/md-plugin-inlinecode": "0.1.0-beta.2",
-    "@md-plugins/md-plugin-link": "0.1.0-beta.2",
-    "@md-plugins/md-plugin-table": "0.1.0-beta.2",
-    "@md-plugins/md-plugin-codeblocks": "0.1.0-beta.2",
-    "@md-plugins/vite-md-plugin": "0.1.0-beta.2",
-    "@md-plugins/shared": "0.1.0-beta.2",
-    "@md-plugins/md-plugin-title": "0.1.0-beta.2"
+    "fs-extra": "^11.3.5",
+    "markdown-it": "^14.2.0",
+    "@md-plugins/md-plugin-blockquote": "0.1.0-beta.21",
+    "@md-plugins/md-plugin-containers": "0.1.0-beta.21",
+    "@md-plugins/md-plugin-headers": "0.1.0-beta.21",
+    "@md-plugins/md-plugin-frontmatter": "0.1.0-beta.21",
+    "@md-plugins/md-plugin-inlinecode": "0.1.0-beta.21",
+    "@md-plugins/md-plugin-imports": "0.1.0-beta.21",
+    "@md-plugins/md-plugin-image": "0.1.0-beta.21",
+    "@md-plugins/md-plugin-codeblocks": "0.1.0-beta.21",
+    "@md-plugins/md-plugin-link": "0.1.0-beta.21",
+    "@md-plugins/md-plugin-mermaid": "0.1.0-beta.21",
+    "@md-plugins/md-plugin-table": "0.1.0-beta.21",
+    "@md-plugins/md-plugin-title": "0.1.0-beta.21",
+    "@md-plugins/vite-md-plugin": "0.1.0-beta.21"
   },
   "devDependencies": {
-    "@quasar/app-vite": "3.0.0-beta.14",
+    "@quasar/app-vite": "3.0.0-beta.33",
     "@types/markdown-it": "^14.1.2",
-    "vite": "^8.0.3"
+    "vite": "^8.0.14"
   },
   "peerDependencies": {
-    "@quasar/app-vite": ">=3.0.0-beta.14",
-    "markdown-it": "^14.1.0"
+    "@quasar/app-vite": ">=3.0.0-beta.33",
+    "markdown-it": "^14.2.0"
   },
   "engines": {
     "node": ">=22.13",
-    "pnpm": ">=11.1.0"
+    "pnpm": ">=11.3.0"
   },
   "scripts": {
     "build": "pnpm exec tsc -p ./tsconfig.build.json && node ./scripts/build.js",

package/src/index.ts

@@ -6,28 +6,95 @@
  */
 
 import { defineIndexScript } from '@quasar/app-vite'
+import { fileURLToPath } from 'node:url'
 
 // import fse from 'fs-extra'
 // import { viteMdPlugin } from '@md-plugins/vite-md-plugin'
 
-export default defineIndexScript((api) => {
-  // verify this is a Vite project
-  if (!api.hasVite) {
-    throw new Error('This extension requires Vite')
+type ViteAliasEntry = {
+  find: string | RegExp
+  replacement: string
+}
+
+type ViteAlias = readonly ViteAliasEntry[] | Record<string, string>
+
+type ViteConfigWithAlias = {
+  resolve?: {
+    alias?: ViteAlias
+  }
+}
+
+type QuasarTsConfig = {
+  files?: string[]
+}
+
+type QuasarTypescriptConfig = {
+  extendTsConfig?: (tsConfig: QuasarTsConfig) => void
+}
+
+const qPressGlobalsTsConfigPath = fileURLToPath(
+  new URL('./q-press-globals.d.ts', import.meta.url),
+).replace(/\\/g, '/')
+
+function normalizeAlias(alias: ViteAlias | undefined): ViteAliasEntry[] {
+  if (Array.isArray(alias)) {
+    return [...alias]
   }
 
+  return Object.entries(alias ?? {}).map(([find, replacement]) => ({
+    find,
+    replacement,
+  }))
+}
+
+function addQuasarSourceAlias(viteConf: ViteConfigWithAlias, appDir: string): void {
+  const alias = normalizeAlias(viteConf.resolve?.alias)
+
+  viteConf.resolve ??= {}
+  viteConf.resolve.alias = [
+    ...alias,
+    {
+      find: /^quasar\/src\/(.*)$/,
+      replacement: `${appDir.replace(/\\/g, '/')}/node_modules/quasar/src/$1`,
+    },
+  ]
+}
+
+function addQPressGlobalsToTsConfig(tsConfig: QuasarTsConfig): void {
+  tsConfig.files ??= []
+
+  if (!tsConfig.files.includes(qPressGlobalsTsConfigPath)) {
+    tsConfig.files.push(qPressGlobalsTsConfigPath)
+  }
+}
+
+function extendTypeScriptConfig(typescriptConfig: QuasarTypescriptConfig): void {
+  const userExtendTsConfig = typescriptConfig.extendTsConfig
+
+  typescriptConfig.extendTsConfig = (tsConfig) => {
+    userExtendTsConfig?.(tsConfig)
+    addQPressGlobalsToTsConfig(tsConfig)
+  }
+}
+
+export default defineIndexScript((api) => {
   api.compatibleWith('quasar', '^2.0.0')
-  api.compatibleWith('@quasar/app-vite', '>=3.0.0-beta.14')
+  api.compatibleWith('@quasar/app-vite', '>=3.0.0-beta.33')
 
   // here we extend /quasar.config, so we can add some Vite/Vue stuff
   api.extendQuasarConf(async (config) => {
     config.build ??= {}
+    config.build.typescript ??= {}
     config.build.viteVuePluginOptions ??= {}
     config.framework ??= {}
 
+    extendTypeScriptConfig(config.build.typescript)
+
     // make sure 'vueRouterMode' has 'history' mode
     if (config.build.vueRouterMode !== 'history') {
-      console.warn('Changing vueRouterMode to "history" - required for hash links to work correctly')
+      console.warn(
+        'Changing vueRouterMode to "history" - required for hash links to work correctly',
+      )
       config.build.vueRouterMode = 'history'
     }
 
@@ -35,11 +102,9 @@ export default defineIndexScript((api) => {
     const include = config.build.viteVuePluginOptions.include
     if (Array.isArray(include)) {
       include.push(/\.(vue|md)$/)
-    }
-    else if (include !== void 0) {
+    } else if (include !== void 0) {
       config.build.viteVuePluginOptions.include = [include, /\.(vue|md)$/]
-    }
-    else {
+    } else {
       config.build.viteVuePluginOptions.include = [/\.(vue|md)$/]
     }
 
@@ -67,4 +132,8 @@ export default defineIndexScript((api) => {
     //   config.vite.plugins.push(viteMdPlugin({ path: markdownPath, menu: sidebar }))
     // }
   })
-})
+
+  api.extendViteConf((viteConf, _invoke, aeApi) => {
+    addQuasarSourceAlias(viteConf, aeApi.appDir)
+  })
+})

package/src/install.ts

@@ -8,13 +8,8 @@ import { defineInstallScript } from '@quasar/app-vite'
 import { existsSync } from 'node:fs'
 
 export default defineInstallScript(async (api) => {
-  // verify this is a Vite project
-  if (!api.hasVite) {
-    throw new Error('This extension requires Vite')
-  }
-
   api.compatibleWith('quasar', '^2.0.0')
-  api.compatibleWith('@quasar/app-vite', '>=3.0.0-beta.14')
+  api.compatibleWith('@quasar/app-vite', '>=3.0.0-beta.33')
 
   // project must have pinia installed
   if ((await api.getStorePackageName()) !== 'pinia') {
@@ -32,6 +27,13 @@ export default defineInstallScript(async (api) => {
     throw new Error('This extension requires TypeScript')
   }
 
+  api.extendPackageJson({
+    dependencies: {
+      mermaid: '^11.15.0',
+      shiki: '^4.1.0',
+    },
+  })
+
   const path = api.resolve.src('siteConfig')
   if (existsSync(path)) {
     // this is an update scenario
@@ -39,12 +41,11 @@ export default defineInstallScript(async (api) => {
     console.warn("Update only for 'src/.q-press' folder")
     console.warn('-------------------------------------')
     api.render('./templates/update')
-  }
-  else {
+  } else {
     // this is a project initial setup
     console.warn('--------------------------------------------')
     console.warn('Initial setup. Be sure to read the\ndocumentation on the manual set up required.')
     console.warn('--------------------------------------------')
     api.render('./templates/init')
   }
-})
+})

package/src/q-press-globals.d.ts

@@ -0,0 +1,49 @@
+/// <reference types="@quasar/app-vite/client" />
+
+declare module '*.md'
+
+declare global {
+  interface ImportMetaHot {
+    accept(callback?: (..._args: unknown[]) => unknown): void
+  }
+
+  interface ImportMeta {
+    readonly env: ImportMetaEnv
+    glob: <T = unknown>(pattern: string) => Record<string, () => Promise<T>>
+    hot?: ImportMetaHot
+  }
+
+  interface TocMenuItem {
+    id: string
+    level: number
+    title: string
+    link?: string
+    deep?: boolean
+    sub?: boolean
+    onClick?: () => void
+    children?: TocMenuItem[]
+  }
+
+  interface MarkdownModule {
+    title?: string
+    headers?: TocMenuItem[]
+    frontmatter?: Record<string, unknown>
+    filename?: string
+    render: (..._args: unknown[]) => unknown
+  }
+
+  interface MenuItem {
+    name: string
+    path?: string
+    icon?: string
+    iconColor?: string
+    rightIcon?: string
+    rightIconColor?: string
+    badge?: string
+    children?: MenuItem[] | undefined
+    external?: boolean
+    expanded?: boolean
+  }
+}
+
+export {}

package/src/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/src/templates/init/src/_q-press/api/components/MarkdownCodepen.json

@@ -4,18 +4,15 @@
     "docsUrl": "https://path-to-your-docs/markdown-codepen"
   },
   "props": {
-    "active": {
-      "type": "Boolean",
-      "desc": "Flag to indicate if the form should be active",
-      "category": "state"
-    },
-    "options": {
+    "title": {
       "type": "String",
-      "desc": "JSON string containing the CodePen options",
+      "desc": "Title used for the generated CodePen",
+      "required": true,
       "examples": [
-        "'{\"title\":\"My Pen\",\"html\":\"<div>Hello World</div>\"}'"
+        "'Basic Example'",
+        "'Advanced Playground'"
       ],
       "category": "content"
     }
   }
-}
+}

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

@@ -13,10 +13,35 @@
       ],
       "category": "content"
     },
+    "file": {
+      "type": "String",
+      "desc": "Vue example file name without the .vue extension",
+      "required": true,
+      "examples": [
+        "'Basic'",
+        "'AdvancedUsage'"
+      ],
+      "category": "content"
+    },
+    "noEdit": {
+      "type": "Boolean",
+      "desc": "Hide the CodePen edit button",
+      "category": "behavior"
+    },
     "noGithub": {
       "type": "Boolean",
-      "desc": "Flag to indicate if the GitHub button should be hidden",
+      "desc": "Hide the GitHub source button",
+      "category": "behavior"
+    },
+    "scrollable": {
+      "type": "Boolean",
+      "desc": "Constrain the example content to a scrollable area",
+      "category": "content"
+    },
+    "overflow": {
+      "type": "Boolean",
+      "desc": "Allow the example content to manage overflow automatically",
       "category": "behavior"
     }
   }
-}
+}