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

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

@@ -0,0 +1,100 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://cdn.quasar.dev/fonts/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2)
+    format('woff2');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  src: url(https://cdn.quasar.dev/fonts/roboto/KFOkCnqEu92Fr1MmgVxIIzQ.woff) format('woff');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: url(https://cdn.quasar.dev/fonts/roboto/KFOlCnqEu92Fr1MmSU5fBBc-.woff) format('woff');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://cdn.quasar.dev/fonts/roboto/KFOmCnqEu92Fr1Mu4mxM.woff) format('woff');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: url(https://cdn.quasar.dev/fonts/roboto/KFOlCnqEu92Fr1MmEU9fBBc-.woff) format('woff');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: url(https://cdn.quasar.dev/fonts/roboto/KFOlCnqEu92Fr1MmWUlfBBc-.woff) format('woff');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: url(https://cdn.quasar.dev/fonts/roboto/KFOlCnqEu92Fr1MmYUtfBBc-.woff) format('woff');
+}
+
+$unicodeMap: (
+  latin: (
+    U+0000-00FF,
+    U+0131,
+    U+0152-0153,
+    U+02BB-02BC,
+    U+02C6,
+    U+02DA,
+    U+02DC,
+    U+2000-206F,
+    U+2074,
+    U+20AC,
+    U+2122,
+    U+2191,
+    U+2193,
+    U+2212,
+    U+2215,
+    U+FEFF,
+    U+FFFD,
+  ),
+);
+
+@mixin fontFace($weight, $style) {
+  @each $subset, $unicodeRangeValues in $unicodeMap {
+    @font-face {
+      font-family: 'Montserrat';
+      font-style: $style;
+      font-weight: $weight;
+      src:
+        url('https://cdn.quasar.dev/fonts/montserrat/v25-fix-2/montserrat-#{$subset}-variable-wghtOnly-#{$style}.woff2')
+          format('woff2-variations'),
+        url('https://cdn.quasar.dev/fonts/montserrat/v25-fix-2/montserrat-#{$subset}-#{$weight}-#{$style}.woff2')
+          format('woff2');
+      unicode-range: $unicodeRangeValues;
+    }
+  }
+}
+
+@for $weight from 3 through 8 {
+  // 300 - 700
+  @include fontFace($weight * 100, normal);
+}
+
+@for $weight from 3 through 8 {
+  // 300 - 700
+  @include fontFace($weight * 100, italic);
+}
+
+@include fontFace(900, normal);
+@include fontFace(900, italic);

package/src/templates/init/src/_q-press/css/prism-theme.scss

@@ -0,0 +1,298 @@
+.markdown-code {
+  margin: 0;
+  position: relative;
+  overflow: auto;
+  border-radius: inherit;
+
+  code {
+    display: block;
+    padding: 16px;
+    width: fit-content;
+    min-width: 100%;
+
+    font-size: ($font-size - 2px);
+    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    line-height: 1.5em;
+    tab-size: 2;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    hyphens: none;
+
+    color: inherit;
+    background-color: inherit;
+    border-radius: inherit;
+  }
+
+  &--copying {
+    .c-lpref,
+    .c-line,
+    .token.deleted-sign,
+    .token.prefix {
+      display: none;
+    }
+  }
+}
+
+.c-line {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 0;
+  &:before {
+    content: ' ';
+    position: absolute;
+    pointer-events: none;
+    top: 1px;
+    left: -16px;
+    right: -16px;
+    height: 1.5em;
+  }
+}
+
+.c-lpref {
+  position: sticky;
+  pointer-events: none;
+  user-select: none;
+  left: 8px;
+  padding: 0 16px 0 8px;
+  margin: -16px 0 -16px -8px;
+  &:before {
+    border-right: 1px solid;
+    content: '';
+    position: absolute;
+    pointer-events: none;
+    top: -1px;
+    left: -8px;
+    right: 8px;
+    bottom: -2px;
+    z-index: -1;
+    height: 1.5em;
+  }
+}
+
+.line-add:before,
+.token.inserted-sign:before {
+  background: rgba($positive, 0.2);
+}
+
+.token.deleted-sign,
+.token.inserted-sign {
+  position: relative;
+  display: block;
+  width: 100%;
+
+  &:before {
+    content: '';
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    left: -16px;
+    right: -16px;
+    bottom: 0;
+  }
+}
+
+.token.prefix {
+  margin-right: 8px;
+}
+
+body.body--light {
+  .markdown-code {
+    color: $brand-light-codeblock-text;
+    background-color: $brand-light-codeblock-bg;
+  }
+
+  .line-highlight:before {
+    background: rgba($grey, 0.2);
+  }
+  .line-rem:before,
+  .token.deleted-sign:before {
+    background: rgba($negative, 0.2);
+  }
+
+  .c-lpref {
+    color: $brand-light-codeblock-text;
+    &:before {
+      border-right-color: $separator-color;
+      background: $brand-light-codeblock-bg;
+    }
+  }
+
+  .token.comment,
+  .token.block-comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #7d8b99;
+  }
+
+  .token {
+    &.punctuation {
+      color: #5f6364;
+    }
+    &.important {
+      font-weight: 400;
+    }
+    &.bold {
+      font-weight: 700;
+    }
+    &.italic {
+      font-style: italic;
+    }
+    &.entity {
+      cursor: help;
+    }
+  }
+
+  .token.property,
+  .token.tag,
+  .token.boolean,
+  .token.number,
+  .token.function-name,
+  .token.constant,
+  .token.symbol,
+  .token.deleted {
+    color: #c92c2c;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.function,
+  .token.builtin,
+  .token.inserted {
+    color: #2f9c0a;
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .token.variable {
+    color: #da5a20;
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword,
+  .token.class-name {
+    color: #1990b8;
+  }
+
+  .token.regex,
+  .token.important {
+    color: #e90;
+  }
+
+  .language-css .token.string,
+  .style .token.string {
+    color: #a67f59;
+    background: rgba(255, 255, 255, 0.5);
+  }
+
+  .namespace {
+    opacity: 0.7;
+  }
+
+  .token.tab:not(:empty):before,
+  .token.cr:before,
+  .token.lf:before {
+    color: #e0d7d1;
+  }
+}
+
+body.body--dark {
+  .markdown-code {
+    color: $brand-dark-codeblock-text;
+    background-color: $brand-dark-codeblock-bg;
+  }
+
+  .line-highlight:before {
+    background: rgba($grey-3, 0.2);
+  }
+  .line-rem:before,
+  .token.deleted-sign:before {
+    background: rgba($red, 0.3);
+  }
+
+  .c-lpref {
+    color: $brand-light-codeblock-text;
+    &:before {
+      border-right-color: $separator-dark-color;
+      background: $brand-dark-codeblock-bg;
+    }
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #d4d0ab;
+  }
+
+  .token.punctuation {
+    color: #fefefe;
+  }
+
+  .token.property,
+  .token.tag,
+  .token.constant,
+  .token.symbol,
+  .token.deleted {
+    color: #ffa07a;
+  }
+
+  .token.boolean,
+  .token.number {
+    color: #00e0e0;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: #abe338;
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string,
+  .token.variable {
+    color: #00e0e0;
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.function {
+    color: #ffd700;
+  }
+
+  .token.keyword {
+    color: #00e0e0;
+  }
+
+  .token.regex,
+  .token.important {
+    color: #ffd700;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: 700;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+}

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

@@ -0,0 +1,68 @@
+@use 'sass:color';
+
+$primary: #214466;
+$secondary: #266660;
+$accent: #853394;
+
+$positive: #38ff66;
+$negative: #ff1732;
+$info: #6ee4fc;
+$warning: #f3ce6a;
+
+$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; // $grey-10
+$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;
+$separrator-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

@@ -0,0 +1,69 @@
+@use 'sass:color';
+
+// Newspaper Theme Variables
+$primary: #000000; // Black
+$secondary: #333333; // Dark grey
+$accent: #666666; // Medium grey
+
+$positive: #55ff3e;
+$negative: #ff3434;
+$info: #bc2cff; // Lighter grey
+$warning: #ffb310; // Very light grey
+
+$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
+
+$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
+
+$light-pill: $brand-light;
+$light-text: $brand-light-text;
+$light-bg: $brand-light-bg;
+
+$dark-pill: scale-color($brand-primary, $lightness: -60%);
+$dark-text: $brand-dark-text;
+$dark-bg: $brand-dark-bg;
+
+$separator-color: $brand-accent;
+$separrator-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/sunrise.scss

@@ -0,0 +1,67 @@
+// Custom Theme Variables
+$primary: #e74c3c; // Change primary color to red
+$secondary: #8e44ad; // Change secondary color to purple
+$accent: #f39c12; // Change accent color to orange
+
+$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
+
+$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
+
+$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
+
+$light-pill: $brand-light;
+$light-text: $brand-light-text;
+$light-bg: $brand-light-bg;
+
+$dark-pill: scale-color($brand-dark, $lightness: 20%);
+$dark-text: $brand-dark-text;
+$dark-bg: $brand-dark-bg;
+
+$separator-color: $brand-accent;
+$separrator-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/tawny.scss

@@ -0,0 +1,69 @@
+@use 'sass:color';
+
+// Tawny Theme Variables
+$primary: #8b4513; // SaddleBrown
+$secondary: #a0522d; // Sienna
+$accent: #d2691e; // Chocolate
+
+$positive: #cd853f; // Peru
+$negative: #8b0000; // DarkRed
+$info: #deb887; // BurlyWood
+$warning: #f4a460; // SandyBrown
+
+$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
+
+$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
+
+$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;
+$separrator-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/layouts/MarkdownDrawerSidebar.vue

@@ -0,0 +1,32 @@
+<template>
+  <q-drawer
+    id="menu-drawer"
+    v-model="markdownStore.menuDrawer"
+    class="markdown-drawer"
+    behavior="mobile"
+    :width="330"
+    aria-label="Sidebar Navigation"
+    role="navigation"
+  >
+    <div class="markdown-drawer__header row justify-end no-wrap q-pt-sm q-pb-md q-px-xs">
+      <q-btn
+        :icon="mdiClose"
+        round
+        dense
+        flat
+        color="brand-accent"
+        @click="markdownStore.toggleMenuDrawer"
+      />
+    </div>
+    <MarkdownPageSidebar class="q-mx-xs q-mb-lg" />
+  </q-drawer>
+</template>
+
+<script setup lang="ts">
+import { mdiClose } from '@quasar/extras/mdi-v7'
+
+import { useMarkdownStore } from 'src/.q-press/stores/markdown'
+import MarkdownPageSidebar from './MarkdownPageSidebar'
+
+const markdownStore = useMarkdownStore()
+</script>