@md-plugins/quasar-app-extension-q-press 0.1.0-alpha.25 → 0.1.0-alpha.26

package/README.md

@@ -87,57 +87,61 @@ The Ultimate Markdown Solution for the Quasar Framework.
 4. Modify your `src/routes/routes.ts`
 
 - ```ts
+  import type { RouteRecordRaw } from 'vue-router'
   import mdPageList from 'src/markdown/listing'
-
-  const routes = [
-    {
-      path: '/',
-      component: () => import('src/.q-press/layouts/MarkdownLayout.vue'),
-      children: [
-        // Include the Landing Page route first
-        ...Object.entries(mdPageList)
-          .filter(([key]) => key.includes('landing-page.md'))
-          .map(([_key, component]) => ({
-            path: '',
-            name: 'Landing Page',
-            component,
-            meta: { fullscreen: true, dark: true },
-          })),
-
-        // Now include all other routes, excluding the landing-page
-        ...Object.keys(mdPageList)
-          .filter((key) => !key.includes('landing-page.md')) // Exclude duplicates
-          .map((key) => {
-            const acc = {
-              path: '',
-              component: mdPageList[key],
-            }
-
-            if (acc.path === '') {
-              // Remove '.md' from the end of the filename
-              const parts = key.substring(1, key.length - 3).split('/')
-              const len = parts.length
-              const path = parts[len - 2] === parts[len - 1] ? parts.slice(0, len - 1) : parts
-
-              acc.path = path.join('/')
-            }
-
-            return acc
-          }),
-      ],
-    },
-
-    // Always leave this as last one,
-    // but you can also remove it
-    {
-      path: '/:catchAll(._)_',
-      component: () => import('pages/ErrorNotFound.vue'),
-    },
-  ]
-
-  export default routes
   ```
 
+const routes = [
+{
+path: '/',
+component: () => import('src/.q-press/layouts/MarkdownLayout.vue'),
+children: [
+// Include the Landing Page route first
+...Object.entries(mdPageList)
+.filter(([key]) => key.includes('landing-page.md'))
+.map(([_key, component]) => ({
+path: '',
+name: 'Landing Page',
+component,
+meta: { fullscreen: true, dark: true },
+})),
+
+    // Now include all other routes, excluding the landing-page
+    ...Object.keys(mdPageList)
+      .filter((key) => !key.includes('landing-page.md')) // Exclude duplicates
+      .map((key) => {
+        const acc = {
+          path: '',
+          component: mdPageList[key],
+        }
+
+        if (acc.path === '') {
+          // Remove '.md' from the end of the filename
+          const parts = key.substring(1, key.length - 3).split('/')
+          const len = parts.length
+          const path = parts[len - 2] === parts[len - 1] ? parts.slice(0, len - 1) : parts
+
+          acc.path = path.join('/')
+        }
+
+        return acc
+      }),
+    ],
+
+},
+
+// Always leave this as last one,
+// but you can also remove it
+{
+path: '/:catchAll(._)_',
+component: () => import('pages/ErrorNotFound.vue'),
+},
+] as RouteRecordRaw[]
+
+export default routes
+
+````
+
 5. Set up for Dark mode support, update your App.vue
 
 - ```ts
@@ -151,7 +155,7 @@ The Ultimate Markdown Solution for the Quasar Framework.
   const { initDark } = useDark()
   initDark()
   </script>
-  ```
+````
 
 ## Running the App
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@md-plugins/quasar-app-extension-q-press",
-  "version": "0.1.0-alpha.25",
+  "version": "0.1.0-alpha.26",
   "description": "QPress - The Ultimate Markdown Solution for Quasar Framework",
   "author": "hawkeye64 <galbraith64@gmail.com>",
   "keywords": [
@@ -29,19 +29,19 @@
   "dependencies": {
     "@types/markdown-it": "^14.1.2",
     "markdown-it": "^14.1.0",
-    "@md-plugins/md-plugin-blockquote": "0.1.0-alpha.25",
-    "@md-plugins/md-plugin-headers": "0.1.0-alpha.25",
-    "@md-plugins/md-plugin-codeblocks": "0.1.0-alpha.25",
-    "@md-plugins/md-plugin-frontmatter": "0.1.0-alpha.25",
-    "@md-plugins/md-plugin-inlinecode": "0.1.0-alpha.25",
-    "@md-plugins/md-plugin-image": "0.1.0-alpha.25",
-    "@md-plugins/md-plugin-imports": "0.1.0-alpha.25",
-    "@md-plugins/md-plugin-containers": "0.1.0-alpha.25",
-    "@md-plugins/md-plugin-table": "0.1.0-alpha.25",
-    "@md-plugins/md-plugin-title": "0.1.0-alpha.25",
-    "@md-plugins/vite-md-plugin": "0.1.0-alpha.25",
-    "@md-plugins/md-plugin-link": "0.1.0-alpha.25",
-    "@md-plugins/shared": "0.1.0-alpha.25"
+    "@md-plugins/md-plugin-blockquote": "0.1.0-alpha.26",
+    "@md-plugins/md-plugin-codeblocks": "0.1.0-alpha.26",
+    "@md-plugins/md-plugin-frontmatter": "0.1.0-alpha.26",
+    "@md-plugins/md-plugin-image": "0.1.0-alpha.26",
+    "@md-plugins/md-plugin-headers": "0.1.0-alpha.26",
+    "@md-plugins/md-plugin-containers": "0.1.0-alpha.26",
+    "@md-plugins/md-plugin-imports": "0.1.0-alpha.26",
+    "@md-plugins/md-plugin-inlinecode": "0.1.0-alpha.26",
+    "@md-plugins/md-plugin-link": "0.1.0-alpha.26",
+    "@md-plugins/md-plugin-table": "0.1.0-alpha.26",
+    "@md-plugins/md-plugin-title": "0.1.0-alpha.26",
+    "@md-plugins/shared": "0.1.0-alpha.26",
+    "@md-plugins/vite-md-plugin": "0.1.0-alpha.26"
   },
   "devDependencies": {
     "@types/markdown-it": "^14.1.2",

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

@@ -8,9 +8,9 @@
         @click="onSearchFieldClick"
       >
         <input
-          class="col markdown-api__search text-right"
           ref="inputRef"
           v-model="filter"
+          class="col markdown-api__search text-right"
           name="filter"
           placeholder="Filter..."
         />
@@ -25,8 +25,8 @@
       </div>
 
       <q-btn
-        class="q-ml-sm header-btn"
         v-if="props.pageLink"
+        class="q-ml-sm header-btn"
         size="sm"
         padding="xs sm"
         no-caps
@@ -45,8 +45,8 @@
     </template>
     <template v-else>
       <q-tabs
-        class="header-tabs"
         v-model="currentTab"
+        class="header-tabs"
         active-color="brand-primary"
         indicator-color="brand-primary"
         align="left"
@@ -63,12 +63,12 @@
       <q-separator />
 
       <q-tab-panels v-model="currentTab" animated>
-        <q-tab-panel class="q-pa-none" v-for="tab in tabsList" :name="tab" :key="tab">
-          <div class="markdown-api__container row no-wrap" v-if="innerTabsList[tab].length !== 1">
+        <q-tab-panel v-for="tab in tabsList" :key="tab" class="q-pa-none" :name="tab">
+          <div v-if="innerTabsList[tab].length !== 1" class="markdown-api__container row no-wrap">
             <div class="col-auto">
               <q-tabs
-                class="header-tabs markdown-api__subtabs"
                 v-model="currentInnerTab"
+                class="header-tabs markdown-api__subtabs"
                 active-color="brand-primary"
                 indicator-color="brand-primary"
                 :breakpoint="0"
@@ -77,9 +77,9 @@
                 shrink
               >
                 <q-tab
-                  class="markdown-api__subtabs-item header-btn"
                   v-for="innerTab in innerTabsList[tab]"
                   :key="`api-inner-tab-${innerTab}`"
+                  class="markdown-api__subtabs-item header-btn"
                   :name="innerTab"
                 >
                   <div class="row no-wrap items-center self-stretch q-pl-sm">
@@ -97,23 +97,23 @@
             <q-separator vertical />
 
             <q-tab-panels
-              class="col"
               v-model="currentInnerTab"
+              class="col"
               animated
               transition-prev="slide-down"
               transition-next="slide-up"
             >
               <q-tab-panel
-                class="q-pa-none"
                 v-for="innerTab in innerTabsList[tab]"
-                :name="innerTab"
                 :key="innerTab"
+                class="q-pa-none"
+                :name="innerTab"
               >
                 <MarkdownApiEntry :type="tab" :definition="filteredApi[tab][innerTab]" />
               </q-tab-panel>
             </q-tab-panels>
           </div>
-          <div class="markdown-api__container" v-else>
+          <div v-else class="markdown-api__container">
             <MarkdownApiEntry :type="tab" :definition="filteredApi[tab][defaultInnerTabName]" />
           </div>
         </q-tab-panel>
@@ -369,12 +369,17 @@ const props = defineProps({
   file: {
     type: String,
     required: false,
+    default: '',
   },
   api: {
     type: Object,
     required: false,
+    default: null,
+  },
+  name: {
+    type: String,
+    default: 'API Documentation',
   },
-  name: String,
   pageLink: Boolean,
 })
 

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="markdown-card-title q-my-xs q-mr-sm cursor-pointer" :id="id" @click="onClick">
+  <div :id="id" class="markdown-card-title q-my-xs q-mr-sm cursor-pointer" @click="onClick">
     {{ props.title }}
   </div>
 </template>
@@ -9,8 +9,14 @@ import { computed } from 'vue'
 import { copyHeading, slugify } from './markdown-utils'
 
 const props = defineProps({
-  title: String,
-  prefix: String,
+  title: {
+    type: String,
+    required: true,
+  },
+  prefix: {
+    type: String,
+    default: '',
+  },
 })
 
 const id = computed(() => (props.prefix || '') + slugify(props.title))

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

@@ -12,8 +12,14 @@ import MarkdownCodePrism from './MarkdownCodePrism'
 import MarkdownCopyButton from './MarkdownCopyButton.vue'
 
 const props = defineProps({
-  code: String,
-  maxHeight: String,
+  code: {
+    type: String,
+    required: true,
+  },
+  maxHeight: {
+    type: String,
+    default: void 0,
+  },
 
   lang: {
     type: String,

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

@@ -45,7 +45,7 @@ const replace = (name) =>
     return text.join('\n')
   }
 
-const props = defineProps({ title: String })
+const props = defineProps({ title: { type: String, required: true } })
 
 const active = ref(false)
 const formRef = ref(null)

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

@@ -3,7 +3,7 @@
     <q-icon :name="mdiClipboardOutline" color="brand-primary" @click="copy" />
 
     <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
-      <q-badge class="absolute header-badge" v-show="copied" label="Copied to clipboard" />
+      <q-badge v-show="copied" class="absolute header-badge" label="Copied to clipboard" />
     </transition>
   </div>
 </template>
@@ -14,7 +14,10 @@ import { copyToClipboard } from './markdown-utils'
 import { mdiClipboardOutline } from '@quasar/extras/mdi-v7'
 
 const props = defineProps({
-  lang: String,
+  lang: {
+    type: String,
+    default: 'markdown',
+  },
 })
 
 const { proxy } = getCurrentInstance()

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

@@ -24,14 +24,14 @@
           <q-tooltip>View on GitHub</q-tooltip>
         </q-btn>
         <q-btn
-          class="header-btn q-ml-xs"
           v-if="props.noEdit !== true"
+          class="header-btn q-ml-xs"
           dense
           flat
           round
           :icon="fabCodepen"
-          @click="openCodepen"
           :disable="isBusy"
+          @click="openCodepen"
         >
           <q-tooltip>Edit in Codepen</q-tooltip>
         </q-btn>
@@ -41,8 +41,8 @@
           flat
           round
           icon="code"
-          @click="toggleExpand"
           :disable="isBusy"
+          @click="toggleExpand"
         >
           <q-tooltip>View Source</q-tooltip>
         </q-btn>
@@ -52,8 +52,8 @@
     <q-slide-transition>
       <div v-show="expanded">
         <q-tabs
-          class="header-tabs"
           v-model="currentTab"
+          class="header-tabs"
           align="left"
           no-caps
           active-color="brand-primary"
@@ -68,8 +68,8 @@
 
         <q-separator />
 
-        <q-tab-panels class="text-grey-3 text-weight-regular" v-model="currentTab" animated>
-          <q-tab-panel class="q-pa-none" v-for="tab in def.tabs" :key="`pane-${tab}`" :name="tab">
+        <q-tab-panels v-model="currentTab" class="text-grey-3 text-weight-regular" animated>
+          <q-tab-panel v-for="tab in def.tabs" :key="`pane-${tab}`" class="q-pa-none" :name="tab">
             <MarkdownCode lang="markup" :code="def.parts[tab]" max-height="70vh" />
           </q-tab-panel>
         </q-tab-panels>
@@ -83,9 +83,9 @@
     <div class="row overflow-hidden">
       <q-linear-progress v-if="isBusy" color="brand-primary" indeterminate />
       <component
-        class="col markdown-example__content markdown-example-typography"
-        v-else
         :is="component"
+        v-else
+        class="col markdown-example__content markdown-example-typography"
         :class="componentClass"
       />
     </div>
@@ -107,8 +107,14 @@ import MarkdownCardTitle from './MarkdownCardTitle.vue'
 import siteConfig from '../../siteConfig'
 
 const props = defineProps({
-  title: String,
-  file: String,
+  title: {
+    type: String,
+    required: true,
+  },
+  file: {
+    type: String,
+    required: true,
+  },
   noEdit: Boolean, // no codepen edit
   scrollable: Boolean,
   overflow: Boolean,

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

@@ -12,7 +12,7 @@
 import { computed } from 'vue'
 import { mdiLaunch } from '@quasar/extras/mdi-v6'
 
-const props = defineProps({ to: String })
+const props = defineProps({ to: { type: String, required: true } })
 const internal = computed(
   () => props.to.charAt(0) === '/' || props.to.charAt(0) === '.' || props.to.charAt(0) === '#',
 )

package/src/templates/init/src/_q-press/components/MarkdownPrerender.ts

@@ -8,10 +8,12 @@ export default defineComponent({
     title: {
       type: String as PropType<string>,
       required: false,
+      default: undefined,
     },
     tabs: {
       type: Array as PropType<string[]>,
       required: false,
+      default: undefined,
     },
   },
 

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

@@ -17,16 +17,16 @@
 
       <template v-if="prop.node.e">
         <q-icon
+          v-if="prop.node.e"
           :name="mdiInformationOutline"
           class="q-ml-sm lt-sm"
-          v-if="prop.node.e"
           color="grey"
           @click.stop
           @touchstart.stop
         >
           <q-tooltip>{{ prop.node.e }}</q-tooltip>
         </q-icon>
-        <div class="markdown-tree__explanation text-grey q-ml-sm gt-xs" v-if="prop.node.e">
+        <div v-if="prop.node.e" class="markdown-tree__explanation text-grey q-ml-sm gt-xs">
           # {{ prop.node.e }}
         </div>
       </template>
@@ -38,7 +38,10 @@
 import { mdiLaunch, mdiInformationOutline } from '@quasar/extras/mdi-v6'
 
 const props = defineProps({
-  def: Object,
+  def: {
+    type: Object,
+    required: true,
+  },
 })
 
 let id = 0

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

@@ -112,6 +112,10 @@ ul {
     .markdown-token {
       border-color: $brand-primary;
     }
+    & strong {
+      font-weight: 700;
+      color: scale-color($brand-light-text, $lightness: 90%);
+    }
   }
 
   &--tip {
@@ -126,6 +130,10 @@ ul {
     .markdown-token {
       border-color: scale-color($positive, $lightness: -40%);
     }
+    & strong {
+      font-weight: 700;
+      color: scale-color($positive, $lightness: 90%);
+    }
   }
 
   &--warning {
@@ -140,6 +148,10 @@ ul {
     .markdown-token {
       border-color: scale-color($warning, $lightness: -40%);
     }
+    & strong {
+      font-weight: 700;
+      color: scale-color($warning, $lightness: 90%);
+    }
   }
 
   &--danger {
@@ -154,6 +166,11 @@ ul {
     .markdown-token {
       border-color: $negative;
     }
+
+    & strong {
+      font-weight: 700;
+      color: scale-color($negative, $lightness: 90%);
+    }
   }
 
   &--details {

package/src/templates/init/src/_q-press/layouts/MarkdownHeaderTextLinks.vue

@@ -30,8 +30,17 @@ import MarkdownHeaderMenu from './MarkdownHeaderMenu'
 import type { SiteMenuItem } from '../../siteConfig'
 
 const props = defineProps({
-  menu: Array<SiteMenuItem>,
-  mqPrefix: String,
-  navClass: String,
+  menu: {
+    type: Array<SiteMenuItem>,
+    required: true,
+  },
+  mqPrefix: {
+    type: String,
+    default: '',
+  },
+  navClass: {
+    type: String,
+    default: '',
+  },
 })
 </script>

package/src/templates/init/src/_q-press/layouts/MarkdownLayout.vue

@@ -3,9 +3,9 @@
     <MarkdownHeader />
 
     <q-page-container>
-      <q-page :class="pageClass" key="q-page">
+      <q-page key="q-page" :class="pageClass">
         <router-view v-if="isFullscreen" key="page-fullscreen" />
-        <div v-else :class="pageContentClass" key="page-standard">
+        <div v-else key="page-standard" :class="pageContentClass">
           <div
             v-if="siteConfig.config.useSidebar === true"
             class="markdown-layout__menu-container row justify-center"

package/src/templates/init/src/_q-press/layouts/MarkdownPage.vue

@@ -4,7 +4,7 @@
       {{ props.overline }}
     </div>
 
-    <div v-if="!isFullscreen && props.title" class="markdown-heading markdown-h1" id="introduction">
+    <div v-if="!isFullscreen && props.title" id="introduction" class="markdown-heading markdown-h1">
       <div class="row items-center q-gutter-sm">
         <div>{{ props.title }}</div>
         <q-badge v-if="props.badge" :label="props.badge" />
@@ -30,12 +30,12 @@
       </q-btn>
     </div>
 
-    <div class="markdown-page__nav" v-if="props.related">
+    <div v-if="props.related" class="markdown-page__nav">
       <div class="q-gutter-sm flex">
         <router-link
-          class="q-link markdown-page__related rounded-borders cursor-pointer column justify-center"
           v-for="link in props.related"
           :key="link.category + link.path"
+          class="q-link markdown-page__related rounded-borders cursor-pointer column justify-center"
           :to="link.path"
         >
           <div class="markdown-page__nav-categ">{{ link.category || 'Docs' }}</div>
@@ -49,7 +49,7 @@
 
     <slot />
 
-    <div class="markdown-page__nav markdown-page__nav--footer" v-if="props.nav">
+    <div v-if="props.nav" 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
@@ -65,7 +65,7 @@
       </div>
     </div>
 
-    <div class="markdown-page__content-footer" v-if="props.editLink">
+    <div v-if="props.editLink" class="markdown-page__content-footer">
       <q-separator class="q-mb-sm" />
 
       <div class="q-mb-md">
@@ -103,19 +103,43 @@ import { useMarkdownStore } from '../stores/markdown'
 import siteConfig from '../../siteConfig'
 
 const props = defineProps({
-  title: String,
-  desc: String,
-  overline: String,
-  badge: String,
+  title: {
+    type: String,
+    default: null,
+  },
+  desc: {
+    type: String,
+    default: null,
+  },
+  overline: {
+    type: String,
+    default: null,
+  },
+  badge: {
+    type: String,
+    default: null,
+  },
 
   fullscreen: Boolean,
 
   heading: Boolean,
-  editLink: String,
-
-  toc: Array<TocItem>,
-  related: Array<RelatedItem>,
-  nav: Array<NavItem>,
+  editLink: {
+    type: String,
+    default: null,
+  },
+
+  toc: {
+    type: Array<TocItem>,
+    default: () => [],
+  },
+  related: {
+    type: Array<RelatedItem>,
+    default: () => [],
+  },
+  nav: {
+    type: Array<NavItem>,
+    default: () => [],
+  },
 })
 
 useMeta(

package/src/templates/init/src/_q-press/layouts/MarkdownPageFooter.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="siteConfig.config.useFooter" class="markdown-page-footer markdown-brand">
     <template v-if="props.fullscreen">
-      <nav class="markdown-page-footer__nav" v-once>
+      <nav v-once class="markdown-page-footer__nav">
         <q-list v-for="entry in links" :key="entry.name" role="list">
           <q-item-label
             class="markdown-page-footer__title markdown-page-footer__margin row items-end text-weight-bold letter-spacing-225 q-mb-md"

package/src/templates/init/src/_q-press/layouts/MarkdownPageToc.vue

@@ -2,12 +2,12 @@
   <q-list class="markdown-page__toc">
     <q-item
       v-for="tocItem in markdownStore.toc"
-      :key="tocItem.id"
       :id="`toc--${tocItem.id}`"
+      :key="tocItem.id"
+      v-ripple
       clickable
       class="markdown-layout__item"
       active-class="markdown-layout__item--active"
-      v-ripple
       :active="markdownStore.activeToc === tocItem.id"
       @click="tocItem.onClick"
     >