@md-plugins/quasar-app-extension-q-press 0.1.0-alpha.24 → 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.24",
+  "version": "0.1.0-alpha.26",
   "description": "QPress - The Ultimate Markdown Solution for Quasar Framework",
   "author": "hawkeye64 <galbraith64@gmail.com>",
   "keywords": [
@@ -29,24 +29,24 @@
   "dependencies": {
     "@types/markdown-it": "^14.1.2",
     "markdown-it": "^14.1.0",
-    "@md-plugins/md-plugin-codeblocks": "0.1.0-alpha.24",
-    "@md-plugins/md-plugin-blockquote": "0.1.0-alpha.24",
-    "@md-plugins/md-plugin-containers": "0.1.0-alpha.24",
-    "@md-plugins/md-plugin-frontmatter": "0.1.0-alpha.24",
-    "@md-plugins/md-plugin-headers": "0.1.0-alpha.24",
-    "@md-plugins/md-plugin-image": "0.1.0-alpha.24",
-    "@md-plugins/md-plugin-imports": "0.1.0-alpha.24",
-    "@md-plugins/md-plugin-link": "0.1.0-alpha.24",
-    "@md-plugins/md-plugin-inlinecode": "0.1.0-alpha.24",
-    "@md-plugins/md-plugin-table": "0.1.0-alpha.24",
-    "@md-plugins/md-plugin-title": "0.1.0-alpha.24",
-    "@md-plugins/shared": "0.1.0-alpha.24",
-    "@md-plugins/vite-md-plugin": "0.1.0-alpha.24"
+    "@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",
     "fs-extra": "^11.3.0",
-    "vite": "^6.0.11"
+    "vite": "^6.1.0"
   },
   "peerDependencies": {
     "markdown-it": "^14.1.0"

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)
@@ -141,6 +141,12 @@ const slugifiedTitle = computed(() => {
   return slugify('example-' + props.title)
 })
 
+/**
+ * Computed property that returns the options for the component.
+ * This property is reactive and will update whenever its dependencies change.
+ *
+ * @returns {Object} The options object for the component.
+ */
 const options = computed(() => {
   const data = {
     title: computedTitle.value,
@@ -164,6 +170,11 @@ ${html.value}
   return JSON.stringify(data)
 })
 
+/**
+ * Opens a specific part of the application.
+ *
+ * @param {string} whichParts - The parts of the application to open.
+ */
 function open(whichParts) {
   def.parts = whichParts
 

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,
     },
   },
 
@@ -20,6 +22,15 @@ export default defineComponent({
 
     const hasHeader = computed(() => props.title !== undefined || props.tabs !== undefined)
 
+    /**
+     * Generates an array of VNode elements based on the provided props and slots.
+     *
+     * This function constructs a list of VNode elements to be rendered, including
+     * a title, tabs, a separator, and the main content. The content is conditionally
+     * wrapped in QTabPanels or a div based on the presence of tabs.
+     *
+     * @returns {ReturnType<typeof h>[]} An array of VNode elements to be rendered.
+     */
     function getContent() {
       const acc: ReturnType<typeof h>[] = []
 

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/composables/scroll.ts

@@ -23,6 +23,12 @@ export function useScroll() {
     },
   )
 
+  /**
+   * Changes the router's hash to the specified value. If the current hash is different from the provided hash,
+   * it replaces the current hash with the new one. If the hash is the same, it scrolls to the current anchor.
+   *
+   * @param hash - The new hash value to set in the router.
+   */
   function changeRouterHash(hash: string) {
     if (route.hash !== hash) {
       router.replace({ hash }).catch(() => {})
@@ -31,6 +37,12 @@ export function useScroll() {
     }
   }
 
+  /**
+   * Scrolls the page to the specified HTML element with a given delay.
+   *
+   * @param el - The HTML element to scroll to.
+   * @param delay - The delay in milliseconds for the scroll animation.
+   */
   function scrollPage(el: HTMLElement, delay: number) {
     const { top } = el.getBoundingClientRect()
     const offset = Math.max(
@@ -48,6 +60,11 @@ export function useScroll() {
     }, delay + 10)
   }
 
+  /**
+   * Scrolls the page to the HTML element with the specified ID, updates the router's hash, and sets the active TOC (table of contents) item.
+   *
+   * @param id - The ID of the HTML element to scroll to.
+   */
   function scrollTo(id: string) {
     clearTimeout(scrollTimer)
     changeRouterHash('#' + id)
@@ -57,6 +74,11 @@ export function useScroll() {
     }, scrollDuration + 50)
   }
 
+  /**
+   * Handles the page scroll event and updates the active TOC (table of contents) item, unless the TOC update is prevented.
+   *
+   * @param position - The current vertical scroll position of the page.
+   */
   function onPageScroll({ position }: { position: number }) {
     // @ts-expect-error Jeff - fix later when I can figure this one out
     if (preventTocUpdate !== true && document.qScrollPrevented !== true) {
@@ -64,6 +86,11 @@ export function useScroll() {
     }
   }
 
+  /**
+   * Scrolls the page to the current anchor element, optionally with an immediate scroll.
+   *
+   * @param immediate - If true, the scroll will be immediate without any animation.
+   */
   function scrollToCurrentAnchor(immediate?: boolean) {
     const hash = location.hash
     const el = hash.length > 1 ? document.getElementById(hash.substring(1)) : null

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

@@ -6,12 +6,17 @@
       class="header-btn"
       flat
       round
-      :icon="entry.icon"
+      :icon="!entry.image ? entry.icon : void 0"
       :to="entry.path"
+      :color="entry.color ? entry.color : void 0"
       :href="entry.external ? entry.path : void 0"
       :target="entry.external ? '_blank' : void 0"
       :aria-label="entry.name"
-    />
+    >
+      <q-avatar v-if="entry.image" size="28px">
+        <img :src="entry.icon" />
+      </q-avatar>
+    </q-btn>
   </div>
 </template>
 
@@ -21,11 +26,11 @@ interface MenuEntry {
   path: string
   external?: boolean
   name: string
+  color?: string
+  image?: boolean
 }
 
 const props = defineProps<{
   menu: MenuEntry[]
 }>()
-
-console.log('props.menu:', props.menu)
 </script>