@md-plugins/quasar-app-extension-q-press 0.1.0-alpha.19 → 0.1.0-alpha.20

package/README.md

@@ -11,6 +11,7 @@ The Ultimate Markdown Solution for the Quasar Framework.
 - **Markdown Components**
 - **siteConfig**
 - **CSS Themes**
+- **Automatic Routing**
 
 ## Installation
 
@@ -45,7 +46,9 @@ The Ultimate Markdown Solution for the Quasar Framework.
 1. Modify your `src/css/quasar.variables.scss`
 
 - import a Q-Press theme (`default`, `sunrise`, `newspaper`, `tawny`, `mystic`, your own or a 3rd-party theme)
-- `@import '../.q-press/css/themes/sunrise.scss';`
+- ```ts
+  @import '../.q-press/css/themes/sunrise.scss';
+  ```
 
 2. Modify your `src/css/app.scss`
 
@@ -57,101 +60,98 @@ The Ultimate Markdown Solution for the Quasar Framework.
   @import '../.q-press/css/prism-theme.scss';
   ```
 
-````
-
 3. Modify your `quasar.config.ts`
 
 - ```ts
-import { viteMdPlugin, type MenuItem } from '@md-plugins/vite-md-plugin'
+  import { viteMdPlugin, type MenuItem } from '@md-plugins/vite-md-plugin'
+
 
-export default defineConfig(async (ctx) => {
-// Dynamically import siteConfig
-const siteConfig = await import('./src/siteConfig')
-const { sidebar } = siteConfig
-return {
+  export default defineConfig(async (ctx) => {
+  // Dynamically import siteConfig
+  const siteConfig = await import('./src/siteConfig')
+  const { sidebar } = siteConfig
+  return {
   build: {
-    vitePlugins: [
-      // add this plugin
-      [
-        viteMdPlugin,
-        {
-          path: ctx.appPaths.srcDir + '/markdown',
-          menu: sidebar as MenuItem[],
-        },
-      ],
-      // ...
-````
+  vitePlugins: [
+  // add this plugin
+  [
+  viteMdPlugin,
+  {
+  path: ctx.appPaths.srcDir + '/markdown',
+  menu: sidebar as MenuItem[],
+  },
+  ],
+  // ...
+  ```
 
 4. Modify your `src/routes/routes.ts`
 
 - ```ts
   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 = {
+  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: '',
-            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'),
-},
-]
+            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
+          }),
+      ],
+    },
 
-export default routes
+    // Always leave this as last one,
+    // but you can also remove it
+    {
+      path: '/:catchAll(._)_',
+      component: () => import('pages/ErrorNotFound.vue'),
+    },
+  ]
 
-````
+  export default routes
+  ```
 
 5. Set up for Dark mode support, update your App.vue
 
-  - ```ts
-<template>
-  <router-view />
-</template>
+- ```ts
+  <template>
+    <router-view />
+  </template>
 
-<script setup lang="ts">
-import { useDark } from 'src/.q-press/composables/dark'
-const { initDark } = useDark()
-initDark()
-</script>
-````
+
+  <script setup lang="ts">
+  import { useDark } from 'src/.q-press/composables/dark'
+  const { initDark } = useDark()
+  initDark()
+  </script>
+  ```
 
 ## Running the App
 
@@ -161,11 +161,11 @@ All you need to do now is change the configuration and landing page to make it y
 
 ## Configuration
 
-### `src/siteConfig/index.ts`
+### Modify `src/siteConfig/index.ts`
 
 1. Make any appropriate changes to the `siteConfig.ts` file
 
-### `src/components/LandingPage/LandingPage.vue`
+### Modify `src/components/LandingPage/LandingPage.vue`
 
 1. Update the `LandingPage.vue` file to include your own content
 
@@ -233,3 +233,11 @@ In case this README falls out of date, please refer to the [documentation](https
 ## License
 
 This project is licensed under the MIT License. See the [LICENSE](LICENSE.md) file for details.
+
+```
+
+```
+
+```
+
+```

package/package.json

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

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

@@ -77,6 +77,7 @@ ul {
 .markdown-token {
   display: inline-block;
   padding: 4px 6px;
+  margin: 1px 0;
   font-size: $font-size;
   line-height: $font-size;
   border-radius: $generic-border-radius;

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

@@ -196,6 +196,35 @@ Update your `App.vue`:
 </script>
 ```
 
+### Set Up for Meta Tags
+
+This is optional, but it's recommended to set up meta tags for SEO and social media sharing, and especially for SSR.
+
+Update your `App.vue`:
+
+```ts
+<template>
+  <router-view />
+</template>
+
+<script setup lang="ts">
+// don't forget to add the Quasar 'Meta' plugin into your quasar.config file!
+import { useMeta } from 'quasar'
+import getMeta from 'src/.q-press/assets/get-meta'
+
+// You can use the `getMeta` function to get the meta tags for your page and provide default values
+useMeta({
+  title: 'MD-Plugins for Vue and Quasar',
+  titleTemplate: (title) => `${title} | MD-Plugins`,
+
+  meta: getMeta(
+    'MD-Plugins - Build markdown user interfaces in record time',
+    'MD-Plugins is a collection of Markdown and Vite plugins that make it easy to build markdown user interfaces in Vue and Quasar applications.',
+  ),
+})
+</script>
+```
+
 ## FAQ
 
 :::details Q. I have errors in my`routes.ts` file, what should I do?

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

@@ -77,6 +77,7 @@ ul {
 .markdown-token {
   display: inline-block;
   padding: 4px 6px;
+  margin: 1px 0;
   font-size: $font-size;
   line-height: $font-size;
   border-radius: $generic-border-radius;