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

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.25",
   "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.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"
   },
   "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/MarkdownCodepen.vue

@@ -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/MarkdownPrerender.ts

@@ -20,6 +20,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/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/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>

package/src/templates/init/src/_q-press/layouts/MarkdownHeaderMenu.ts

@@ -1,4 +1,14 @@
-import { QMenu, QIcon, QList, QItem, QItemSection, QItemLabel, QSeparator, Screen } from 'quasar'
+import {
+  QMenu,
+  QIcon,
+  QAvatar,
+  QList,
+  QItem,
+  QItemSection,
+  QItemLabel,
+  QSeparator,
+  Screen,
+} from 'quasar'
 import { h } from 'vue'
 import { mdiMenuRight } from '@quasar/extras/mdi-v7'
 
@@ -10,6 +20,8 @@ interface MenuElement {
   icon?: string
   name?: string
   mq?: string
+  color?: string
+  image?: boolean
   children?: MenuElement[]
 }
 
@@ -52,8 +64,12 @@ export default {
             () => {
               const acc: any[] = []
 
+              const iconOrImage = !entry.image
+                ? h(QIcon, { name: entry.icon, color: entry.color ? entry.color : void 0 })
+                : h(QAvatar, { size: '28px' }, () => h('img', { src: entry.icon }))
+
               if (entry.icon !== void 0) {
-                acc.push(h(QItemSection, { side: true }, () => h(QIcon, { name: entry.icon })))
+                acc.push(h(QItemSection, { side: true }, () => iconOrImage))
               }
 
               acc.push(h(QItemSection, { class: 'text-no-wrap' }, () => entry.name))

package/src/templates/init/src/markdown/quasar-app-extensions/qpress/advanced.md

@@ -42,7 +42,7 @@ In your markdown file, you can add the following to create an `api` card:
 
 ::: tip
 The API format conforms to Quasar's API format.
-We will touch on this at a later date.
+We will touch on this at a later date. For now, you can look at the Api folder in the .q-press folder.
 :::
 
 ```markdown

package/src/templates/init/src/markdown/quasar-app-extensions/qpress/overview.md

@@ -70,7 +70,7 @@ pnpm add prismjs
 
 ### Modify `tsconfig.json`
 
-Add the `resolveJsonModule: true` to your `tsconfig.json` file in your route folder:
+Add the `resolveJsonModule: true` to your `tsconfig.json` file in your root folder:
 
 ```json
   "compilerOptions": {

package/src/templates/init/src/siteConfig/index.ts

@@ -112,7 +112,7 @@ const socialLinks = {
       path: 'https://twitter.com/md_plugins',
       external: true,
     },
-  ],
+  ] as SocialLink[],
 }
 
 const netlifyLink = {
@@ -348,7 +348,7 @@ const secondaryToolbarLinks = [
   otherMenu,
 ]
 
-export const moreLinks: SiteMenuItem[] = [
+export const moreLinks = [
   {
     name: 'More',
     // children: [...primaryToolbarLinks, { separator: true }, ...secondaryToolbarLinks, socialLinks],

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

@@ -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/update/src/_q-press/components/MarkdownPrerender.ts

@@ -20,6 +20,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/update/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/update/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>

package/src/templates/update/src/_q-press/layouts/MarkdownHeaderMenu.ts

@@ -1,4 +1,14 @@
-import { QMenu, QIcon, QList, QItem, QItemSection, QItemLabel, QSeparator, Screen } from 'quasar'
+import {
+  QMenu,
+  QIcon,
+  QAvatar,
+  QList,
+  QItem,
+  QItemSection,
+  QItemLabel,
+  QSeparator,
+  Screen,
+} from 'quasar'
 import { h } from 'vue'
 import { mdiMenuRight } from '@quasar/extras/mdi-v7'
 
@@ -10,6 +20,8 @@ interface MenuElement {
   icon?: string
   name?: string
   mq?: string
+  color?: string
+  image?: boolean
   children?: MenuElement[]
 }
 
@@ -52,8 +64,12 @@ export default {
             () => {
               const acc: any[] = []
 
+              const iconOrImage = !entry.image
+                ? h(QIcon, { name: entry.icon, color: entry.color ? entry.color : void 0 })
+                : h(QAvatar, { size: '28px' }, () => h('img', { src: entry.icon }))
+
               if (entry.icon !== void 0) {
-                acc.push(h(QItemSection, { side: true }, () => h(QIcon, { name: entry.icon })))
+                acc.push(h(QItemSection, { side: true }, () => iconOrImage))
               }
 
               acc.push(h(QItemSection, { class: 'text-no-wrap' }, () => entry.name))