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

package/README.md

@@ -44,7 +44,7 @@ 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`, your own or a 3rd-party theme)
+- import a Q-Press theme (`default`, `sunrise`, `newspaper`, `tawny`, `mystic`, your own or a 3rd-party theme)
 - `@import '../.q-press/css/themes/sunrise.scss';`
 
 2. Modify your `src/css/app.scss`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@md-plugins/quasar-app-extension-q-press",
-  "version": "0.1.0-alpha.10",
+  "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-codeblocks": "0.1.0-alpha.10",
-    "@md-plugins/md-plugin-containers": "0.1.0-alpha.10",
-    "@md-plugins/md-plugin-headers": "0.1.0-alpha.10",
-    "@md-plugins/md-plugin-blockquote": "0.1.0-alpha.10",
-    "@md-plugins/md-plugin-imports": "0.1.0-alpha.10",
-    "@md-plugins/md-plugin-frontmatter": "0.1.0-alpha.10",
-    "@md-plugins/md-plugin-inlinecode": "0.1.0-alpha.10",
-    "@md-plugins/md-plugin-image": "0.1.0-alpha.10",
-    "@md-plugins/md-plugin-link": "0.1.0-alpha.10",
-    "@md-plugins/md-plugin-table": "0.1.0-alpha.10",
-    "@md-plugins/md-plugin-title": "0.1.0-alpha.10",
-    "@md-plugins/vite-md-plugin": "0.1.0-alpha.10",
-    "@md-plugins/shared": "0.1.0-alpha.10"
+    "@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/css/prism-theme.scss

@@ -75,7 +75,7 @@
 
 .line-add:before,
 .token.inserted-sign:before {
-  background: rgba($positive, 0.2);
+  background: rgba($positive, 0.4);
 }
 
 .token.deleted-sign,

package/src/templates/init/src/_q-press/css/themes/default.scss

@@ -4,10 +4,10 @@ $primary: #214466;
 $secondary: #266660;
 $accent: #853394;
 
-$positive: #38ff66;
+$positive: #2ecc71;
 $negative: #ff1732;
-$info: #6ee4fc;
-$warning: #f3ce6a;
+$info: #10a0ff;
+$warning: #ffd52d;
 
 $brand-primary: #00bfff;
 $brand-secondary: #4b555c;
@@ -25,7 +25,7 @@ $brand-dark-codeblock-bg: #121212;
 $brand-dark-codeblock-text: #e6e6e6;
 
 $header-btn-color--light: #757575;
-$header-btn-hover-color--light: #212121; // $grey-10
+$header-btn-hover-color--light: #212121;
 $header-btn-color--dark: #929397;
 $header-btn-hover-color--dark: #fff;
 
@@ -38,7 +38,7 @@ $dark-text: $brand-dark-text;
 $dark-bg: $brand-dark-bg;
 
 $separator-color: $brand-accent;
-$separrator-color-dark: $brand-accent;
+$separator-color-dark: $brand-accent;
 
 $font-size: 16px;
 $font-size-brand: 16px;

package/src/templates/init/src/_q-press/css/themes/mystic.scss

@@ -0,0 +1,73 @@
+@use 'sass:color';
+
+// Mystic Theme Variables
+$primary: #8a2be2;
+$secondary: #00ced1;
+$accent: #ff4500;
+
+$positive: #2ecc71;
+$negative: #ff1732;
+$info: #10a0ff;
+$warning: #ffd52d;
+
+$brand-primary: #8a2be2;
+$brand-secondary: #00ced1;
+$brand-accent: #ff4500;
+$brand-dark: #8d66da;
+$brand-light: #e6e6fa;
+$brand-medium: #9370db;
+$brand-light-text: #4b0082;
+$brand-light-bg: #e6e6fa;
+$brand-dark-bg: #171122;
+$brand-dark-text: #e6e6fa;
+
+$brand-light-codeblock-bg: #f8f8ff;
+$brand-light-codeblock-text: #9370db;
+$brand-dark-codeblock-bg: #4b0082;
+$brand-dark-codeblock-text: #e6e6fa;
+
+$header-btn-color--light: #8a2be2;
+$header-btn-hover-color--light: #ff4500;
+$header-btn-color--dark: #00ced1;
+$header-btn-hover-color--dark: #9370db;
+
+$light-pill: $brand-light;
+$light-text: $brand-light-text;
+
+$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);
+
+// also update QHeader :height-hint
+$header-height: 55px;
+$header-transition: 0.6s cubic-bezier(0.25, 0.8, 0.5, 1);
+$header-quick-transition: 0.28s ease-in-out;

package/src/templates/init/src/_q-press/css/themes/newspaper.scss

@@ -1,34 +1,34 @@
 @use 'sass:color';
 
 // Newspaper Theme Variables
-$primary: #000000; // Black
-$secondary: #333333; // Dark grey
-$accent: #666666; // Medium grey
+$primary: #000000;
+$secondary: #333333;
+$accent: #666666;
 
-$positive: #55ff3e;
-$negative: #ff3434;
-$info: #bc2cff; // Lighter grey
-$warning: #ffb310; // Very light grey
+$positive: #2ecc71;
+$negative: #ff1732;
+$info: #10a0ff;
+$warning: #ffd52d;
 
 $brand-primary: #8793fc;
-$brand-secondary: #333333; // Dark grey
-$brand-accent: #666666; // Medium grey
-$brand-dark: #000000; // Black
-$brand-light: #ffffff; // White
-$brand-medium: #808080; // Grey
-$brand-light-text: #333333; // Dark grey
-$brand-light-bg: #f5f5f5; // Light grey background
-$brand-dark-bg: #000000; // Black background
-$brand-dark-text: #ffffff; // White text
-$brand-light-codeblock-bg: #f5f5f5; // Light grey background
-$brand-light-codeblock-text: #333333; // Dark grey text
-$brand-dark-codeblock-bg: #1a1a1a; // Very dark grey background
-$brand-dark-codeblock-text: #e6e6e6; // Light grey text
+$brand-secondary: #333333;
+$brand-accent: #666666;
+$brand-dark: #000000;
+$brand-light: #ffffff;
+$brand-medium: #808080;
+$brand-light-text: #333333;
+$brand-light-bg: #f5f5f5;
+$brand-dark-bg: #000000;
+$brand-dark-text: #ffffff;
+$brand-light-codeblock-bg: #f5f5f5;
+$brand-light-codeblock-text: #333333;
+$brand-dark-codeblock-bg: #1a1a1a;
+$brand-dark-codeblock-text: #e6e6e6;
 
-$header-btn-color--light: #4d4d4d; // Dark grey
-$header-btn-hover-color--light: #1a1a1a; // Very dark grey
-$header-btn-color--dark: #999999; // Light grey
-$header-btn-hover-color--dark: #cccccc; // Very light grey
+$header-btn-color--light: #4d4d4d;
+$header-btn-hover-color--light: #1a1a1a;
+$header-btn-color--dark: #999999;
+$header-btn-hover-color--dark: #cccccc;
 
 $light-pill: $brand-light;
 $light-text: $brand-light-text;
@@ -39,7 +39,7 @@ $dark-text: $brand-dark-text;
 $dark-bg: $brand-dark-bg;
 
 $separator-color: $brand-accent;
-$separrator-color-dark: $brand-accent;
+$separator-color-dark: $brand-accent;
 
 $font-size: 16px;
 $font-size-brand: 16px;

package/src/templates/init/src/_q-press/css/themes/sunrise.scss

@@ -1,32 +1,34 @@
-// Custom Theme Variables
-$primary: #e74c3c; // Change primary color to red
-$secondary: #8e44ad; // Change secondary color to purple
-$accent: #f39c12; // Change accent color to orange
+@use 'sass:color';
 
-$positive: #2ecc71; // Change positive color to green
-$negative: #e74c3c; // Change negative color to red
-$info: #3498db; // Change info color to blue
-$warning: #f1c40f; // Change warning color to yellow
+// Sunrise Theme Variables
+$primary: #e74c3c;
+$secondary: #8e44ad;
+$accent: #f39c12;
 
-$brand-primary: #e74c3c; // Change brand primary color to red
-$brand-secondary: #5186bb; // Change brand secondary color to purple
-$brand-accent: #f39c12; // Change brand accent color to orange
-$brand-dark: #2c3e50; // Change brand dark color to dark blue
-$brand-light: #ecf0f1; // Change brand light color to light grey
-$brand-medium: #95a5a6; // Change brand medium color to grey
-$brand-light-text: #2c3e50; // Change brand light text color to dark blue
-$brand-light-bg: #ecf0f1; // Change brand light background color to light grey
-$brand-dark-bg: #34495e; // Change brand dark background color to dark grey
-$brand-dark-text: #ecf0f1; // Change brand dark text color to light grey
-$brand-light-codeblock-bg: #ecf0f1; // Change brand light codeblock background color to light grey
-$brand-light-codeblock-text: #2c3e50; // Change brand light codeblock text color to dark blue
-$brand-dark-codeblock-bg: #2c3e50; // Change brand dark codeblock background color to dark blue
-$brand-dark-codeblock-text: #ecf0f1; // Change brand dark codeblock text color to light grey
+$positive: #2ecc71;
+$negative: #ff1732;
+$info: #10a0ff;
+$warning: #ffd52d;
 
-$header-btn-color--light: #c0392b; // Change header button color for light theme to red
-$header-btn-hover-color--light: #e74c3c; // Change header button hover color for light theme to red
-$header-btn-color--dark: #c0392b; // Change header button color for dark theme to purple
-$header-btn-hover-color--dark: #e74c3c; // Change header button hover color for dark theme to purple
+$brand-primary: #e74c3c;
+$brand-secondary: #5186bb;
+$brand-accent: #f39c12;
+$brand-dark: #2c3e50;
+$brand-light: #ecf0f1;
+$brand-medium: #95a5a6;
+$brand-light-text: #2c3e50;
+$brand-light-bg: #ecf0f1;
+$brand-dark-bg: #34495e;
+$brand-dark-text: #ecf0f1;
+$brand-light-codeblock-bg: #ecf0f1;
+$brand-light-codeblock-text: #2c3e50;
+$brand-dark-codeblock-bg: #2c3e50;
+$brand-dark-codeblock-text: #ecf0f1;
+
+$header-btn-color--light: #c0392b;
+$header-btn-hover-color--light: #e74c3c;
+$header-btn-color--dark: #c0392b;
+$header-btn-hover-color--dark: #e74c3c;
 
 $light-pill: $brand-light;
 $light-text: $brand-light-text;
@@ -37,7 +39,7 @@ $dark-text: $brand-dark-text;
 $dark-bg: $brand-dark-bg;
 
 $separator-color: $brand-accent;
-$separrator-color-dark: $brand-accent;
+$separator-color-dark: $brand-accent;
 
 $font-size: 16px;
 $font-size-brand: 16px;

package/src/templates/init/src/_q-press/css/themes/tawny.scss

@@ -1,34 +1,34 @@
 @use 'sass:color';
 
 // Tawny Theme Variables
-$primary: #8b4513; // SaddleBrown
-$secondary: #a0522d; // Sienna
-$accent: #d2691e; // Chocolate
+$primary: #8b4513;
+$secondary: #a0522d;
+$accent: #d2691e;
 
-$positive: #cd853f; // Peru
-$negative: #8b0000; // DarkRed
-$info: #deb887; // BurlyWood
-$warning: #f4a460; // SandyBrown
+$positive: #2ecc71;
+$negative: #ff1732;
+$info: #10a0ff;
+$warning: #ffd52d;
 
-$brand-primary: #8b4513; // SaddleBrown
-$brand-secondary: #a0522d; // Sienna
-$brand-accent: #d2691e; // Chocolate
-$brand-dark: #5c4033; // DarkBrown
-$brand-light: #f5f5dc; // Beige
-$brand-medium: #c19a6b; // Camel
-$brand-light-text: #5c4033; // DarkBrown
-$brand-light-bg: #f5f5dc; // Beige
-$brand-dark-bg: #3e2723; // DarkerBrown
-$brand-dark-text: #f5f5dc; // Beige
-$brand-light-codeblock-bg: #f5f5dc; // Beige
-$brand-light-codeblock-text: #5c4033; // DarkBrown
-$brand-dark-codeblock-bg: #3e2723; // DarkerBrown
-$brand-dark-codeblock-text: #f5f5dc; // Beige
+$brand-primary: #8b4513;
+$brand-secondary: #a0522d;
+$brand-accent: #d2691e;
+$brand-dark: #5c4033;
+$brand-light: #f5f5dc;
+$brand-medium: #c19a6b;
+$brand-light-text: #5c4033;
+$brand-light-bg: #f5f5dc;
+$brand-dark-bg: #3e2723;
+$brand-dark-text: #f5f5dc;
+$brand-light-codeblock-bg: #fdfdfd;
+$brand-light-codeblock-text: #5c4033;
+$brand-dark-codeblock-bg: #5c4033;
+$brand-dark-codeblock-text: #f5f5dc;
 
-$header-btn-color--light: #8b4513; // SaddleBrown
-$header-btn-hover-color--light: #a0522d; // Sienna
-$header-btn-color--dark: #d2691e; // Chocolate
-$header-btn-hover-color--dark: #cd853f; // Peru
+$header-btn-color--light: #8b4513;
+$header-btn-hover-color--light: #a0522d;
+$header-btn-color--dark: #d2691e;
+$header-btn-hover-color--dark: #cd853f;
 
 $light-pill: $brand-light;
 $light-text: $brand-light-text;
@@ -39,7 +39,7 @@ $dark-text: $brand-dark-text;
 $dark-bg: $brand-dark-bg;
 
 $separator-color: $brand-accent;
-$separrator-color-dark: $brand-accent;
+$separator-color-dark: $brand-accent;
 
 $font-size: 16px;
 $font-size-brand: 16px;

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,18 +531,12 @@ 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.
 
-<!-- <DocInstallation plugins="AppFullscreen" /> -->
-
 <script import>
-import AvatarApi from 'quasar/dist/api/QAvatar.json'
+import MarkdownExampleApi from 'src/.q-press/api/components/MarkdownExample.json'
+import MarkdownPageApi from 'src/.q-press/api/components/MarkdownPage.json'
 </script>
 
-<MarkdownApi :api="AvatarApi" name="QAvatar"/>
-
-<!-- <DocApi file="QSelect" /> -->
-
-<!-- <DocApi file="TouchSwipe" /> -->
-
-<!-- <DocApi file="Loading" /> -->
+<MarkdownApi :api="MarkdownExampleApi" name="MarkdownExample"/>
+<MarkdownApi :api="MarkdownPageApi" name="MarkdownPage"/>
 
 <MarkdownExample title="Title for example card" file="BasicExample" />

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

@@ -338,10 +338,18 @@ const x = {
 }
 ```
 
-<MarkdownInstallation plugins="AppFullscreen" />
-
 <script import>
 import AvatarApi from 'quasar/dist/api/QAvatar.json'
 </script>
 
 <MarkdownApi :api="AvatarApi" name="QAvatar"/>
+
+<script import>
+import MarkdownExampleApi from 'src/.q-press/api/components/MarkdownExample.json'
+import MarkdownPageApi from 'src/.q-press/api/components/MarkdownPage.json'
+</script>
+
+<MarkdownApi :api="MarkdownExampleApi" name="MarkdownExample"/>
+<MarkdownApi :api="MarkdownPageApi" name="MarkdownPage"/>
+
+<MarkdownExample title="Title for example card" file="BasicExample" />

package/src/templates/init/src/markdown/md-plugins/codeblocks/overview.md

@@ -486,6 +486,7 @@ echo 'This line will be removed' # Line 5
 
 ````markup
 ```tabs Examples
+<<| javascript [numbered highlight=2,4 add=3 rem=5] javascript |>>
 console.log('Hello, world!'); // Line 1
 const a = 10; // Line 2
 const b = 20; // Line 3

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/overview.md

@@ -70,7 +70,7 @@ pnpm i prismjs
 
 ### Modify `src/css/quasar.variables.scss`
 
-Import a Q-Press theme (`default`, `sunrise`, `newspaper`, `tawny`, your own or a 3rd-party theme):
+Import a Q-Press theme (`default`, `sunrise`, `newspaper`, `tawny`, `mystic`, your own or a 3rd-party theme):
 
 ```scss
 @import '../.q-press/css/themes/sunrise.scss';
@@ -88,7 +88,7 @@ Import Q-Press styles:
 
 ### Modify `quasar.config.ts`
 
-```typescript
+```ts [maxheight=400px]
 import { defineConfig } from '#q-app/wrappers'
 import type { Plugin } from 'vite'
 import { viteMdPlugin, type MenuItem } from '@md-plugins/vite-md-plugin'
@@ -118,7 +118,7 @@ export default defineConfig(async (ctx) => {
 
 ### Modify `src/routes/routes.ts`
 
-```typescript
+```ts [maxheight=400px]
 import mdPageList from 'src/markdown/listing'
 
 const routes = [