@md-plugins/quasar-app-extension-q-press 0.1.0-alpha.16 → 0.1.0-alpha.18

package/README.md

@@ -38,7 +38,7 @@ The Ultimate Markdown Solution for the Quasar Framework.
 
 - `npm i prismjs`
 - `yarn add prismjs`
-- `pnpm i prismjs`
+- `pnpm add prismjs`
 
 ## Modifications
 
@@ -57,48 +57,51 @@ The Ultimate Markdown Solution for the Quasar Framework.
   @import '../.q-press/css/prism-theme.scss';
   ```
 
+````
+
 3. Modify your `quasar.config.ts`
 
-```ts
+- ```ts
 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 {
-    build: {
-      vitePlugins: [
-        // add this plugin
-        [
-          viteMdPlugin,
-          {
-            path: ctx.appPaths.srcDir + '/markdown',
-            menu: sidebar as MenuItem[],
-          },
-        ],
-        // ...
-```
+// 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[],
+        },
+      ],
+      // ...
+````
 
 4. Modify your `src/routes/routes.ts`
 
-```ts
-import mdPageList from 'src/markdown/listing'
+- ```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 },
-        })),
+{
+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)
@@ -121,22 +124,24 @@ const routes = [
           return acc
         }),
     ],
-  },
 
-  // Always leave this as last one,
-  // but you can also remove it
-  {
-    path: '/:catchAll(.*)*',
-    component: () => import('pages/ErrorNotFound.vue'),
-  },
+},
+
+// 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
+  - ```ts
 <template>
   <router-view />
 </template>
@@ -146,7 +151,7 @@ import { useDark } from 'src/.q-press/composables/dark'
 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.16",
+  "version": "0.1.0-alpha.18",
   "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.16",
-    "@md-plugins/md-plugin-codeblocks": "0.1.0-alpha.16",
-    "@md-plugins/md-plugin-frontmatter": "0.1.0-alpha.16",
-    "@md-plugins/md-plugin-headers": "0.1.0-alpha.16",
-    "@md-plugins/md-plugin-containers": "0.1.0-alpha.16",
-    "@md-plugins/md-plugin-image": "0.1.0-alpha.16",
-    "@md-plugins/md-plugin-imports": "0.1.0-alpha.16",
-    "@md-plugins/md-plugin-inlinecode": "0.1.0-alpha.16",
-    "@md-plugins/md-plugin-link": "0.1.0-alpha.16",
-    "@md-plugins/vite-md-plugin": "0.1.0-alpha.16",
-    "@md-plugins/shared": "0.1.0-alpha.16",
-    "@md-plugins/md-plugin-table": "0.1.0-alpha.16",
-    "@md-plugins/md-plugin-title": "0.1.0-alpha.16"
+    "@md-plugins/md-plugin-blockquote": "0.1.0-alpha.18",
+    "@md-plugins/md-plugin-codeblocks": "0.1.0-alpha.18",
+    "@md-plugins/md-plugin-headers": "0.1.0-alpha.18",
+    "@md-plugins/md-plugin-frontmatter": "0.1.0-alpha.18",
+    "@md-plugins/md-plugin-imports": "0.1.0-alpha.18",
+    "@md-plugins/md-plugin-inlinecode": "0.1.0-alpha.18",
+    "@md-plugins/md-plugin-table": "0.1.0-alpha.18",
+    "@md-plugins/md-plugin-containers": "0.1.0-alpha.18",
+    "@md-plugins/md-plugin-image": "0.1.0-alpha.18",
+    "@md-plugins/md-plugin-title": "0.1.0-alpha.18",
+    "@md-plugins/shared": "0.1.0-alpha.18",
+    "@md-plugins/md-plugin-link": "0.1.0-alpha.18",
+    "@md-plugins/vite-md-plugin": "0.1.0-alpha.18"
   },
   "devDependencies": {
     "@types/markdown-it": "^14.1.2",

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

@@ -110,6 +110,8 @@ import MarkdownCode from './MarkdownCode.vue'
 import MarkdownCodepen from './MarkdownCodepen.vue'
 import MarkdownCardTitle from './MarkdownCardTitle.vue'
 
+import siteConfig from '../../siteConfig'
+
 const props = defineProps({
   title: String,
   file: String,
@@ -167,7 +169,7 @@ function parseComponent(comp) {
 
 function openGitHub() {
   openURL(
-    `https://github.com/quasarframework/quasar/tree/${process.env.DOCS_BRANCH}/docs/src/examples/${examples.name}/${props.file}.vue`,
+    `${siteConfig.githubEditRootSrc}/examples/${examples.name}/${props.file}.vue`,
   )
 }
 

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

@@ -136,7 +136,7 @@ if (props.toc !== void 0) {
   markdownStore.setToc(props.toc)
 }
 
-const editHref = computed(() => `${siteConfig.githubEditRoot}${props.editLink}.md`)
+const editHref = computed(() => `${siteConfig.githubEditRootSrc}/markdown/${props.editLink}.md`)
 
 const isFullscreen = computed(() => route.meta.fullscreen === true || props.fullscreen)
 

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

@@ -63,11 +63,21 @@ npm i prismjs
 <<| bash yarn |>>
 yarn add prismjs
 <<| bash pnpm |>>
-pnpm i prismjs
+pnpm add prismjs
 ```
 
 ## Configuration
 
+### Modify `tsconfig.json`
+
+Add the `resolveJsonModule: true` to your `tsconfig.json` file in your route folder:
+
+```json
+  "compilerOptions": {
+    "resolveJsonModule": true
+  }
+```
+
 ### Modify `src/css/quasar.variables.scss`
 
 Import a Q-Press theme (`default`, `sunrise`, `newspaper`, `tawny`, `mystic`, your own or a 3rd-party theme):
@@ -210,6 +220,16 @@ Update your `App.vue`:
 
 :::
 
+:::details Q. I see linting issues regarding `any`, what should I do?
+
+**A.** In your `eslint.config.js` file, add/replace the following in your rules:
+
+```js
+'@typescript-eslint/no-explicit-any': 'off',
+```
+
+:::
+
 :::details Q. Every time I save a markdown file, `prettier` changes it so that it breaks. How can I prevent this?
 
 **A.** This is both a `prettier` and `eslint` issue. In `eslint.config.js`, add the following to the top of the file, right after `export default [`:

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

@@ -77,7 +77,7 @@ export interface SiteConfig {
   theme: string
   version: string
   copyright: CopyrightConfig
-  githubEditRoot: string
+  githubEditRootSrc: string // src folder for github edit links (appended with 'markdown' and 'examples')
   license: LicenseConfig
   privacy: PrivacyConfig
   logoConfig: LogoConfig
@@ -385,7 +385,7 @@ const config = {
     line1: `Copyright © 2024-${new Date().getFullYear()} MD-PLUGINS`,
     line2: '',
   } as CopyrightConfig,
-  githubEditRoot: 'https://github.com/md-plugins/md-plugins/edit/dev/packages/docs/src/markdown/',
+  githubEditRootSrc: 'https://github.com/md-plugins/md-plugins/edit/dev/packages/docs/src/',
   license: {
     label: 'MIT License',
     link: 'https://github.com/md-plugins/md-plugins/blob/dev/LICENSE.md',

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

@@ -110,6 +110,8 @@ import MarkdownCode from './MarkdownCode.vue'
 import MarkdownCodepen from './MarkdownCodepen.vue'
 import MarkdownCardTitle from './MarkdownCardTitle.vue'
 
+import siteConfig from '../../siteConfig'
+
 const props = defineProps({
   title: String,
   file: String,
@@ -167,7 +169,7 @@ function parseComponent(comp) {
 
 function openGitHub() {
   openURL(
-    `https://github.com/quasarframework/quasar/tree/${process.env.DOCS_BRANCH}/docs/src/examples/${examples.name}/${props.file}.vue`,
+    `${siteConfig.githubEditRootSrc}/examples/${examples.name}/${props.file}.vue`,
   )
 }
 

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

@@ -136,7 +136,7 @@ if (props.toc !== void 0) {
   markdownStore.setToc(props.toc)
 }
 
-const editHref = computed(() => `${siteConfig.githubEditRoot}${props.editLink}.md`)
+const editHref = computed(() => `${siteConfig.githubEditRootSrc}/markdown/${props.editLink}.md`)
 
 const isFullscreen = computed(() => route.meta.fullscreen === true || props.fullscreen)