@md-plugins/quasar-app-extension-q-press 0.1.0-alpha.11 → 0.1.0-alpha.12

package/package.json

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

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

@@ -126,7 +126,7 @@ const props = defineProps({
 <style lang="scss">
 .markdown-page-footer {
   position: relative;
-  background-color: $brand-light;
+  background-color: $brand-light-bg;
   width: 100%;
   z-index: 1;
   border-top: 1px solid $separator-color;

package/src/templates/init/src/components/LandingPage/LandingPage.vue

@@ -40,20 +40,19 @@
       </div>
     </header>
     <div class="byline">
-      <p>Discover the power of Markdown Plugins and enhance your documentation experience!</p>
       <p>
-        <strong>NOTE:</strong> MD-Plugins are currently in development and not suitable for
-        production.
+        Markdown Plugins go beyond the standard Markdown syntax.<br />Discover the power of Markdown
+        Plugins and enhance your documentation experience!
       </p>
     </div>
     <div class="row justify-center hero">
       <div class="hero-title">Markdown-It! Plugins</div>
     </div>
-    <main class="content">
+    <main class="content grid-container">
       <div
         v-for="plugin in mdPlugins"
         :key="plugin.name"
-        class="section"
+        class="section grid-item"
         @click="navigate(plugin.path)"
       >
         <q-card flat style="background: transparent">
@@ -65,11 +64,11 @@
     <div class="row justify-center hero">
       <div class="hero-title">Vite Plugins</div>
     </div>
-    <main class="content">
+    <main class="content grid-container">
       <div
         v-for="plugin in vitePlugins"
         :key="plugin.name"
-        class="section"
+        class="section grid-item"
         @click="navigate(plugin.path)"
       >
         <h2>{{ plugin.name }}</h2>
@@ -79,8 +78,13 @@
     <div class="row justify-center hero">
       <div class="hero-title">Quasar App Extensions</div>
     </div>
-    <main class="content">
-      <div v-for="ext in appExtensions" :key="ext.name" class="section" @click="navigate(ext.path)">
+    <main class="content grid-container">
+      <div
+        v-for="ext in appExtensions"
+        :key="ext.name"
+        class="section grid-item"
+        @click="navigate(ext.path)"
+      >
         <h2>{{ ext.name }}</h2>
         <p>{{ ext.desc }}</p>
       </div>
@@ -281,6 +285,21 @@ body.body--dark .byline {
   padding: 20px;
 }
 
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 10px;
+  width: 100%;
+  max-width: 100%;
+  justify-content: center;
+  align-content: center;
+}
+
+.grid-item {
+  // aspect-ratio: 1 / 1;
+  cursor: pointer;
+}
+
 .section {
   flex: 1 1 300px;
   margin: 20px;

package/src/templates/init/src/markdown/__elements.md

@@ -531,8 +531,6 @@ Lorem ipsum dolor sit amet, **consectetur adipiscing** elit, sed do _eiusmod_ te
 
 Lorem ipsum dolor sit amet, **consectetur adipiscing** elit, sed do _eiusmod_ tempor incididunt ut labore et dolore magna aliqua.
 
-<!-- <MarkdownInstallation plugins="AppFullscreen" /> -->
-
 <script import>
 import MarkdownExampleApi from 'src/.q-press/api/components/MarkdownExample.json'
 import MarkdownPageApi from 'src/.q-press/api/components/MarkdownPage.json'

package/src/templates/init/src/markdown/__elements2.md

@@ -338,8 +338,6 @@ const x = {
 }
 ```
 
-<!-- <MarkdownInstallation plugins="AppFullscreen" /> -->
-
 <script import>
 import AvatarApi from 'quasar/dist/api/QAvatar.json'
 </script>

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

@@ -25,7 +25,6 @@ import MarkdownHeaderApi from 'src/.q-press/api/components/MarkdownHeader.json'
 import MarkdownHeaderIconLinksApi from 'src/.q-press/api/components/MarkdownHeaderIconLinks.json'
 import MarkdownHeaderMenuApi from 'src/.q-press/api/components/MarkdownHeaderMenu.json'
 import MarkdownHeaderTextLinksApi from 'src/.q-press/api/components/MarkdownHeaderTextLinks.json'
-import MarkdownInstallationApi from 'src/.q-press/api/components/MarkdownInstallation.json'
 
 import MarkdownLayoutApi from 'src/.q-press/api/components/MarkdownLayout.json'
 import MarkdownLinkApi from 'src/.q-press/api/components/MarkdownLink.json'
@@ -56,7 +55,6 @@ import MarkdownPrerenderApi from 'src/.q-press/api/components/MarkdownPrerender.
 <MarkdownApi :api="MarkdownHeaderIconLinksApi" name="MarkdownHeaderIconLinks"/>
 <MarkdownApi :api="MarkdownHeaderMenuApi" name="MarkdownHeaderMenu"/>
 <MarkdownApi :api="MarkdownHeaderTextLinksApi" name="MarkdownHeaderTextLinks"/>
-<MarkdownApi :api="MarkdownInstallationApi" name="MarkdownInstallation"/>
 
 <MarkdownApi :api="MarkdownLayoutApi" name="MarkdownLayout"/>
 <MarkdownApi :api="MarkdownLinkApi" name="MarkdownLink"/>

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

@@ -0,0 +1,114 @@
+---
+title: Q-Press Site Config
+desc: Site Config for Q-Press App-Extension for Quasar.
+---
+
+The Site Config lives in your `src/siteConfig/index.ts`. Here you can make changes to control the look and feel of your site.
+
+## Basic Config
+
+Look at the Site Config file and make any appropriate changes. This is where you can add a `title`, `description`, `logo` information, `license`, `privacy` and more.
+
+Use the `config` section to control how your site will look. Then, move onto the `links` section to create your header menus and the `sideBar` section to create your sidebar menus.
+
+## Menu System
+
+For each markdown file in your `src/markdown` folder, the Vue Router will automatically generate a path for it. When creating menus, you will use the same path as the markdown file.
+
+Menus that you create can also be displayed in the `sideBar` or `header`, or both, of your site.
+
+To create a top-level menu, create something similar to the following:
+
+```ts
+const mdPluginsMenu = {
+  name: 'MD Plugins',
+  mq: 600, // media query breakpoint
+  children: [
+    {
+      name: 'Blockquote',
+      children: [
+        { name: 'Overview', path: '/md-plugins/blockquote/overview' },
+        { name: 'Advanced', path: '/md-plugins/blockquote/advanced' },
+      ],
+    },
+    {
+      name: 'Codeblocks',
+      children: [
+        { name: 'Overview', path: '/md-plugins/codeblocks/overview' },
+        { name: 'Advanced', path: '/md-plugins/codeblocks/advanced' },
+      ],
+    },
+  ],
+}
+```
+
+Be sure the media query breakpoint matches the one you set in your `src/css/quasar.variables.(scss|sass)` file. See [Themes](/quasar-app-extensions/qpress/themes#media-query-breakpoints) for more info.
+
+Chose the toolbar and order you want the menu displayed on like this:
+
+```ts
+const secondaryToolbarLinks = [
+  gettingStartedMenu,
+  mdPluginsMenu, // <-- this is the menu we just created
+  vitePluginsMenu,
+  QuasarAppExts,
+  guidesMenu,
+  otherMenu,
+]
+```
+
+## MenuItem Type
+
+A `MenuItem` looks like this, but not all options are used for header menus:
+
+```ts
+interface MenuItem {
+  name: string
+  path?: string
+  icon?: string
+  iconColor?: string
+  rightIcon?: string
+  rightIconColor?: string
+  badge?: string
+  children?: MenuItem[] | undefined
+  external?: boolean
+  expanded?: boolean
+}
+```
+
+## Sidebar Menu Items
+
+Sidebar menu items need a bit more care. You can use the `sideBar` property in the Site Config to where the menu is displayed. But, we need to process it a bit:
+
+```ts
+const processedMdPluginsMenu = {
+  name: mdPluginsMenu.name,
+  path: slugify(mdPluginsMenu.name),
+  expanded: false,
+  children: mdPluginsMenu.children.map(processMenuItem),
+}
+```
+
+Now we have `processedMdPluginsMenu` which we can add to the `sideBar` array:
+
+```ts
+export const sidebar = [
+  {
+    name: gettingStartedMenu.name,
+    path: slugify(gettingStartedMenu.name),
+    expanded: false,
+    children: gettingStartedMenu.children.map((item) => ({
+      name: item.name,
+      path: slugify(item.name),
+    })),
+  },
+  processedMdPluginsMenu, // <-- this is the menu we just created
+  processedVitePluginsMenu,
+  processedQuasarAppExts,
+  processedGuidesMenu,
+]
+```
+
+## More Links
+
+The `moreLinks` controls a menu item called `More`. Items here are automatically displayed base on your media query breakpoints, and also removed from the header menu. This is useful for smaller displays, like mobile devices.

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

@@ -2,3 +2,129 @@
 title: Q-Press Themes
 desc: Themes for Q-Press App-Extension for Quasar.
 ---
+
+Currently, there are five themes available for **Q-Press**:
+
+- **Default**
+- **Mystic**
+- **Newspaper**
+- **Sunrise**
+- **Tawny**
+
+To use a theme, simply add the following line to your `src/css/quasar.variables.(scss|sass)` file:
+
+```scss
+@import '../.q-press/css/themes/sunrise.scss';
+```
+
+This will load the `sunrise` theme into your **Q-Press** enabled app.
+
+## Custom Themes
+
+If you want to build your own theme, add these variables to your `src/css/quasar.variables.(scss|sass)` file and modify them to your liking:
+
+```scss
+@use 'sass:color';
+
+$primary: #214466;
+$secondary: #266660;
+$accent: #853394;
+
+$positive: #2ecc71;
+$negative: #ff1732;
+$info: #10a0ff;
+$warning: #ffd52d;
+
+$brand-primary: #00bfff;
+$brand-secondary: #4b555c;
+$brand-accent: #ea5e13;
+$brand-dark: #2c3e50;
+$brand-light: #f5f5f5;
+$brand-medium: #6b7f86;
+$brand-light-text: #4d4d4d;
+$brand-light-bg: #fefefe;
+$brand-dark-bg: #080e1a;
+$brand-dark-text: #cbcbcb;
+$brand-light-codeblock-bg: #f5f5f5;
+$brand-light-codeblock-text: #4d4d4d;
+$brand-dark-codeblock-bg: #121212;
+$brand-dark-codeblock-text: #e6e6e6;
+
+$header-btn-color--light: #757575;
+$header-btn-hover-color--light: #212121;
+$header-btn-color--dark: #929397;
+$header-btn-hover-color--dark: #fff;
+
+$light-pill: $brand-light;
+$light-text: $brand-light-text;
+$light-bg: $brand-light-bg;
+
+$dark-pill: scale-color($brand-primary, $lightness: -80%);
+$dark-text: $brand-dark-text;
+$dark-bg: $brand-dark-bg;
+
+$separator-color: $brand-accent;
+$separator-color-dark: $brand-accent;
+
+$font-size: 16px;
+$font-size-brand: 16px;
+$font-weight-brand: 500;
+$font-weight-technical: 400;
+$letter-spacing-brand: 0.7px;
+
+$font-family-technical:
+  'Roboto',
+  -apple-system,
+  Avenir,
+  BlinkMacSystemFont,
+  'Segoe UI',
+  Helvetica,
+  Arial,
+  sans-serif;
+$font-family-examples: $font-family-technical;
+$font-family-brand: 'Montserrat', $font-family-technical;
+
+$shadow--large: 0 24px 24px 0 rgba(0, 179, 255, 0.24);
+$shadow--medium: 0 6px 6px 0 rgba($brand-primary, 0.38);
+$shadow--small: 0 6px 6px 0 rgba($brand-primary, 0.28);
+
+$header-height: 55px;
+$header-transition: 0.6s cubic-bezier(0.25, 0.8, 0.5, 1);
+$header-quick-transition: 0.28s ease-in-out;
+```
+
+## Media Query Breakpoints
+
+When setting up your menu system, you may need to adjust the media query breakpoints. You can add the following to your `src/css/quasar.variables.(scss|sass)` file:
+
+```scss
+$mq-list:
+  375,
+  470,
+  510,
+  600,
+  780,
+  860,
+  910,
+  1000,
+  1020,
+  1100,
+  1130,
+  1190,
+  1300 /* drawer */,
+  1310,
+  1400;
+@each $query in $mq-list {
+  @media (min-width: #{$query}px) {
+    .lt-#{$query} {
+      display: none;
+    }
+  }
+
+  @media (max-width: #{$query - 1}px) {
+    .gt-#{$query} {
+      display: none;
+    }
+  }
+}
+```

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

@@ -146,13 +146,13 @@ const footerLinks = [
   },
 ]
 
-const gettingStartedMenu = {
+const gettingStartedMenu: SiteMenuItem = {
   name: 'Getting Started',
   mq: 470, // media query breakpoint
   children: [{ name: 'Introduction', path: '/getting-started/introduction' }],
 }
 
-const mdPluginsMenu = {
+const mdPluginsMenu: SiteMenuItem = {
   name: 'MD Plugins',
   mq: 600, // media query breakpoint
   children: [
@@ -240,7 +240,7 @@ const mdPluginsMenu = {
   ],
 }
 
-const vitePluginsMenu = {
+const vitePluginsMenu: SiteMenuItem = {
   name: 'Vite Plugins',
   mq: 780, // media query breakpoint
   children: [
@@ -261,7 +261,7 @@ const vitePluginsMenu = {
   ],
 }
 
-const QuasarAppExts = {
+const QuasarAppExts: SiteMenuItem = {
   name: 'Quasar App Extensions',
   mq: 1020, // media query breakpoint
   children: [
@@ -278,13 +278,14 @@ const QuasarAppExts = {
         { name: 'Overview', path: '/quasar-app-extensions/qpress/overview' },
         { name: 'Advanced', path: '/quasar-app-extensions/qpress/advanced' },
         { name: 'Themes', path: '/quasar-app-extensions/qpress/themes' },
+        { name: 'Site Config', path: '/quasar-app-extensions/qpress/site-config' },
         { name: 'Components', path: '/quasar-app-extensions/qpress/components' },
       ],
     },
   ],
 }
 
-const guidesMenu = {
+const guidesMenu: SiteMenuItem = {
   name: 'Guides',
   mq: 1100, // media query breakpoint
   children: [
@@ -299,7 +300,7 @@ const guidesMenu = {
   ],
 }
 
-const otherMenu = {
+const otherMenu: SiteMenuItem = {
   name: 'Other',
   mq: 1190, // media query breakpoint
   children: [
@@ -314,28 +315,28 @@ const processedMdPluginsMenu = {
   name: mdPluginsMenu.name,
   path: slugify(mdPluginsMenu.name),
   expanded: false,
-  children: mdPluginsMenu.children.map(processMenuItem),
+  children: mdPluginsMenu.children ? mdPluginsMenu.children.map(processMenuItem) : [],
 }
 
 const processedVitePluginsMenu = {
   name: vitePluginsMenu.name,
   path: slugify(vitePluginsMenu.name),
   expanded: false,
-  children: vitePluginsMenu.children.map(processMenuItem),
+  children: vitePluginsMenu.children ? vitePluginsMenu.children.map(processMenuItem) : [],
 }
 
 const processedQuasarAppExts = {
   name: QuasarAppExts.name,
   path: slugify(QuasarAppExts.name),
   expanded: false,
-  children: QuasarAppExts.children.map(processMenuItem),
+  children: QuasarAppExts.children ? QuasarAppExts.children.map(processMenuItem) : [],
 }
 
 const processedGuidesMenu = {
   name: guidesMenu.name,
   path: slugify(guidesMenu.name),
   expanded: false,
-  children: guidesMenu.children.map(processMenuItem),
+  children: guidesMenu.children ? guidesMenu.children.map(processMenuItem) : [],
 }
 
 const secondaryToolbarLinks = [
@@ -347,7 +348,7 @@ const secondaryToolbarLinks = [
   otherMenu,
 ]
 
-export const moreLinks = [
+export const moreLinks: SiteMenuItem[] = [
   {
     name: 'More',
     // children: [...primaryToolbarLinks, { separator: true }, ...secondaryToolbarLinks, socialLinks],
@@ -360,10 +361,12 @@ export const sidebar = [
     name: gettingStartedMenu.name,
     path: slugify(gettingStartedMenu.name),
     expanded: false,
-    children: gettingStartedMenu.children.map((item) => ({
-      name: item.name,
-      path: slugify(item.name),
-    })),
+    children: gettingStartedMenu.children
+      ? gettingStartedMenu.children.map((item) => ({
+          name: item.name,
+          path: slugify(item.name),
+        }))
+      : [],
   },
   processedMdPluginsMenu,
   processedVitePluginsMenu,
@@ -419,17 +422,7 @@ const config = {
   links: {
     primaryHeaderLinks: [] as SiteMenuItem[], // [...primaryToolbarLinks],
     secondaryHeaderLinks: [...secondaryToolbarLinks] as SiteMenuItem[],
-    moreLinks: [
-      {
-        name: 'More',
-        children: [
-          // ...primaryToolbarLinks,
-          // { separator: true },
-          ...secondaryToolbarLinks,
-          socialLinks,
-        ],
-      },
-    ] as SiteMenuItem[],
+    moreLinks,
     footerLinks: [...footerLinks] as SiteMenuItem[],
     socialLinks: [...socialLinks.children] as SocialLink[],
   },

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

@@ -126,7 +126,7 @@ const props = defineProps({
 <style lang="scss">
 .markdown-page-footer {
   position: relative;
-  background-color: $brand-light;
+  background-color: $brand-light-bg;
   width: 100%;
   z-index: 1;
   border-top: 1px solid $separator-color;

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

@@ -1,166 +0,0 @@
-<template>
-  <q-card :id="id" class="markdown-installation q-my-xl" flat bordered>
-    <div class="header-toolbar row items-center">
-      <MarkdownCardTitle :title="props.title" />
-    </div>
-
-    <q-tabs
-      class="header-tabs"
-      v-model="currentTab"
-      align="left"
-      active-color="brand-primary"
-      indicator-color="brand-primary"
-      dense
-      :breakpoint="0"
-      shrink
-    >
-      <q-tab
-        v-for="tab in tabList"
-        :key="`installation-${tab}`"
-        :name="tab"
-        class="header-btn"
-        no-caps
-      >
-        {{ tab }}
-      </q-tab>
-    </q-tabs>
-
-    <q-separator />
-
-    <q-tab-panels v-model="currentTab" animated>
-      <q-tab-panel class="q-pa-none" name="Quasar CLI">
-        <MarkdownCode :code="QuasarCli" />
-      </q-tab-panel>
-
-      <q-tab-panel class="q-pa-none" name="Vite plugin / Vue CLI">
-        <MarkdownCode :code="ExternalCli" />
-      </q-tab-panel>
-
-      <q-tab-panel class="q-pa-none" name="UMD">
-        <MarkdownCode :code="UMD" />
-      </q-tab-panel>
-    </q-tab-panels>
-  </q-card>
-</template>
-
-<script setup>
-import { ref, computed } from 'vue'
-
-import MarkdownCode from './MarkdownCode.vue'
-import MarkdownCardTitle from './MarkdownCardTitle.vue'
-
-import { slugify } from '@md-plugins/shared'
-
-const props = defineProps({
-  components: [Array, String],
-  directives: [Array, String],
-  plugins: [Array, String],
-  config: String,
-  title: {
-    type: String,
-    default: 'Installation',
-  },
-})
-
-const tabList = ['Quasar CLI', 'Vite plugin / Vue CLI', 'UMD']
-const currentTab = ref('Quasar CLI')
-
-const id = computed(() => slugify(props.title))
-
-function nameAsString(name, indent, quotes = true) {
-  const wrapper = quotes ? (str) => `'${str}'` : (str) => str
-
-  return Array.isArray(name)
-    ? name.map(wrapper).join(',\n' + ''.padStart(indent, ' '))
-    : wrapper(name)
-}
-
-const quasarConf = computed(() => {
-  return props.config !== void 0
-    ? `${props.config}: /* look at QuasarConfOptions from the API card */`
-    : null
-})
-
-const QuasarCli = computed(() => {
-  if (props.plugins === void 0 && quasarConf.value === null) {
-    return `/*
- * No installation step is necessary.
- * It gets installed by default by @quasar/app-vite or @quasar/app-webpack.
- */`
-  }
-
-  const parts = []
-
-  if (props.plugins !== void 0) {
-    parts.push(`plugins: [
-      ${nameAsString(props.plugins, 6)}
-    ]`)
-  }
-
-  if (quasarConf.value !== null) {
-    parts.push(`config: {
-      ${quasarConf.value}
-    }`)
-  }
-
-  return `// quasar.config file
-
-return {
-  framework: {
-    ${parts.join(',\n    ')}
-  }
-}`
-})
-
-const UMD = computed(() => {
-  const config =
-    quasarConf.value !== null
-      ? `
-
-// Optional;
-// Place the global quasarConfig Object in a script tag BEFORE your Quasar script tag
-app.use(Quasar, {
-  config: {
-    ${quasarConf.value}
-  }
-}`
-      : ''
-
-  const content = `/*
- * No installation step is necessary.
- * It gets installed by default.
- */`
-
-  return content + config
-})
-
-const ExternalCli = computed(() => {
-  const types = []
-  const imports = ['Quasar']
-
-  ;['components', 'directives', 'plugins'].forEach((type) => {
-    if (props[type] !== void 0) {
-      imports.push(nameAsString(props[type], 2, false))
-      types.push(`${type}: {
-    ${nameAsString(props[type], 4, false)}
-  }`)
-    }
-  })
-
-  if (quasarConf.value !== null) {
-    types.push(`config: {
-    ${quasarConf.value}
-  }`)
-  }
-
-  return `// main.js
-
-import {
-  ${imports.join(',\n  ')}
-} from 'quasar'
-
-app.use(Quasar, {
-  ${types.join(',\n  ')}
-})`
-})
-</script>

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

@@ -1,166 +0,0 @@
-<template>
-  <q-card :id="id" class="markdown-installation q-my-xl" flat bordered>
-    <div class="header-toolbar row items-center">
-      <MarkdownCardTitle :title="props.title" />
-    </div>
-
-    <q-tabs
-      class="header-tabs"
-      v-model="currentTab"
-      align="left"
-      active-color="brand-primary"
-      indicator-color="brand-primary"
-      dense
-      :breakpoint="0"
-      shrink
-    >
-      <q-tab
-        v-for="tab in tabList"
-        :key="`installation-${tab}`"
-        :name="tab"
-        class="header-btn"
-        no-caps
-      >
-        {{ tab }}
-      </q-tab>
-    </q-tabs>
-
-    <q-separator />
-
-    <q-tab-panels v-model="currentTab" animated>
-      <q-tab-panel class="q-pa-none" name="Quasar CLI">
-        <MarkdownCode :code="QuasarCli" />
-      </q-tab-panel>
-
-      <q-tab-panel class="q-pa-none" name="Vite plugin / Vue CLI">
-        <MarkdownCode :code="ExternalCli" />
-      </q-tab-panel>
-
-      <q-tab-panel class="q-pa-none" name="UMD">
-        <MarkdownCode :code="UMD" />
-      </q-tab-panel>
-    </q-tab-panels>
-  </q-card>
-</template>
-
-<script setup>
-import { ref, computed } from 'vue'
-
-import MarkdownCode from './MarkdownCode.vue'
-import MarkdownCardTitle from './MarkdownCardTitle.vue'
-
-import { slugify } from '@md-plugins/shared'
-
-const props = defineProps({
-  components: [Array, String],
-  directives: [Array, String],
-  plugins: [Array, String],
-  config: String,
-  title: {
-    type: String,
-    default: 'Installation',
-  },
-})
-
-const tabList = ['Quasar CLI', 'Vite plugin / Vue CLI', 'UMD']
-const currentTab = ref('Quasar CLI')
-
-const id = computed(() => slugify(props.title))
-
-function nameAsString(name, indent, quotes = true) {
-  const wrapper = quotes ? (str) => `'${str}'` : (str) => str
-
-  return Array.isArray(name)
-    ? name.map(wrapper).join(',\n' + ''.padStart(indent, ' '))
-    : wrapper(name)
-}
-
-const quasarConf = computed(() => {
-  return props.config !== void 0
-    ? `${props.config}: /* look at QuasarConfOptions from the API card */`
-    : null
-})
-
-const QuasarCli = computed(() => {
-  if (props.plugins === void 0 && quasarConf.value === null) {
-    return `/*
- * No installation step is necessary.
- * It gets installed by default by @quasar/app-vite or @quasar/app-webpack.
- */`
-  }
-
-  const parts = []
-
-  if (props.plugins !== void 0) {
-    parts.push(`plugins: [
-      ${nameAsString(props.plugins, 6)}
-    ]`)
-  }
-
-  if (quasarConf.value !== null) {
-    parts.push(`config: {
-      ${quasarConf.value}
-    }`)
-  }
-
-  return `// quasar.config file
-
-return {
-  framework: {
-    ${parts.join(',\n    ')}
-  }
-}`
-})
-
-const UMD = computed(() => {
-  const config =
-    quasarConf.value !== null
-      ? `
-
-// Optional;
-// Place the global quasarConfig Object in a script tag BEFORE your Quasar script tag
-app.use(Quasar, {
-  config: {
-    ${quasarConf.value}
-  }
-}`
-      : ''
-
-  const content = `/*
- * No installation step is necessary.
- * It gets installed by default.
- */`
-
-  return content + config
-})
-
-const ExternalCli = computed(() => {
-  const types = []
-  const imports = ['Quasar']
-
-  ;['components', 'directives', 'plugins'].forEach((type) => {
-    if (props[type] !== void 0) {
-      imports.push(nameAsString(props[type], 2, false))
-      types.push(`${type}: {
-    ${nameAsString(props[type], 4, false)}
-  }`)
-    }
-  })
-
-  if (quasarConf.value !== null) {
-    types.push(`config: {
-    ${quasarConf.value}
-  }`)
-  }
-
-  return `// main.js
-
-import {
-  ${imports.join(',\n  ')}
-} from 'quasar'
-
-app.use(Quasar, {
-  ${types.join(',\n  ')}
-})`
-})
-</script>