@md-plugins/quasar-app-extension-q-press 0.1.0-beta.2 → 0.1.0-beta.21

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

@@ -34,7 +34,7 @@ $light-pill: $brand-light;
 $light-text: $brand-light-text;
 $light-bg: $brand-light-bg;
 
-$dark-pill: scale-color($brand-dark, $lightness: 20%);
+$dark-pill: color.scale($brand-dark-bg, $lightness: 12%);
 $dark-text: $brand-dark-text;
 $dark-bg: $brand-dark-bg;
 

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

@@ -34,7 +34,7 @@ $light-pill: $brand-light;
 $light-text: $brand-light-text;
 $light-bg: $brand-light-bg;
 
-$dark-pill: scale-color($brand-primary, $lightness: -80%);
+$dark-pill: color.scale($brand-dark-bg, $lightness: 12%);
 $dark-text: $brand-dark-text;
 $dark-bg: $brand-dark-bg;
 

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

@@ -25,7 +25,7 @@
 <script setup lang="ts">
 import { mdiClose } from '@quasar/extras/mdi-v7'
 
-import { useMarkdownStore } from 'src/.q-press/stores/markdown'
+import { useMarkdownStore } from '@/.q-press/stores/markdown'
 import MarkdownPageSidebar from './MarkdownPageSidebar'
 
 const markdownStore = useMarkdownStore()

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

@@ -29,7 +29,7 @@
 <script setup lang="ts">
 import { mdiClose } from '@quasar/extras/mdi-v7'
 
-import { useMarkdownStore } from 'src/.q-press/stores/markdown'
+import { useMarkdownStore } from '@/.q-press/stores/markdown'
 
 import MarkdownPageToc from './MarkdownPageToc.vue'
 

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

@@ -306,7 +306,7 @@ const hasMoreLinks = computed(() => siteConfig.links.moreLinks.length > 0)
   }
 
   &__links {
-    justify-content: end;
+    justify-content: flex-end;
 
     @media (min-width: 1921px) {
       justify-content: center;

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

@@ -38,7 +38,7 @@ import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { mdiArrowUp } from '@quasar/extras/mdi-v7'
 
-// import { useMarkdownStore } from 'src/.q-press/stores/doc'
+// import { useMarkdownStore } from '@/.q-press/stores/doc'
 import { useScroll } from '../composables/scroll'
 
 import MarkdownHeader from './MarkdownHeader.vue'
@@ -101,7 +101,7 @@ const pageContentClass = computed(
       }
 
       @media (max-width: 1845px) {
-        justify-content: start;
+        justify-content: flex-start;
 
         .markdown-page__toc-container--flowing {
           display: none;

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

@@ -49,7 +49,7 @@
 
     <slot />
 
-    <div v-if="props.nav" class="markdown-page__nav markdown-page__nav--footer">
+    <div v-if="showFooterNav" class="markdown-page__nav markdown-page__nav--footer">
       <div class="text-h6 q-pb-md markdown-heading">Ready for more?</div>
       <div class="q-gutter-sm flex">
         <router-link
@@ -94,7 +94,6 @@ import { useRoute } from 'vue-router'
 import { mdiPencil, mdiFlash, mdiLaunch } from '@quasar/extras/mdi-v7'
 
 import type { NavItem, RelatedItem } from '@md-plugins/vite-md-plugin'
-import type { TocItem } from '@md-plugins/md-plugin-headers'
 import MarkdownLink from '../components/MarkdownLink.vue'
 import MarkdownPageToc from './MarkdownPageToc.vue'
 
@@ -129,7 +128,7 @@ const props = defineProps({
   },
 
   toc: {
-    type: Array<TocItem>,
+    type: Array<TocMenuItem>,
     default: () => [],
   },
   related: {
@@ -164,6 +163,8 @@ const editHref = computed(() => `${siteConfig.githubEditRootSrc}/markdown/${prop
 
 const isFullscreen = computed(() => route.meta.fullscreen === true || props.fullscreen)
 
+const showFooterNav = computed(() => isFullscreen.value !== true && props.nav.length > 0)
+
 const hasToc = computed(
   () =>
     route.meta.fullwidth !== true &&

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

@@ -39,7 +39,7 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { useQuasar } from 'quasar'
 import { computed, ref, watch, markRaw, onMounted, onBeforeUnmount } from 'vue'
 import { useRoute, useRouter } from 'vue-router'

package/src/templates/init/src/_q-press/stores/markdown.ts

@@ -1,7 +1,6 @@
 import { defineStore, acceptHMRUpdate } from 'pinia'
 import { useRoute } from 'vue-router'
 import { useScroll } from '../composables/scroll'
-import type { TocItem } from '@md-plugins/md-plugin-headers'
 
 export const useMarkdownStore = defineStore('markdown-store', {
   state: () => ({
@@ -60,7 +59,7 @@ export const useMarkdownStore = defineStore('markdown-store', {
       }
     },
 
-    setToc(toc: TocItem[]) {
+    setToc(toc: TocMenuItem[]) {
       const { scrollTo } = useScroll()
       this.toc =
         toc !== void 0

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

@@ -25,6 +25,16 @@
             Get Started
           </span>
         </router-link>
+        <router-link
+          to="/other/upgrade-guide"
+          class="hero-button q-btn q-btn-item non-selectable no-outline q-btn--standard q-btn--rectangle q-btn--actionable q-focusable q-hoverable q-btn--no-uppercase q-btn--rounded q-btn--dense"
+        >
+          <span
+            class="q-btn__content text-center col items-center q-anchor--skip justify-center row"
+          >
+            Upgrade Guide
+          </span>
+        </router-link>
         <a
           href="https://github.com/md-plugins/md-plugins"
           target="_blank"
@@ -44,6 +54,10 @@
         Markdown Plugins go beyond the standard Markdown syntax.<br />Discover the power of Markdown
         Plugins and enhance your documentation experience!
       </p>
+      <p>
+        Use the Markdown-it and Vite plugins in Vue/Vite projects, or choose the Quasar app
+        extensions when you want Q-Press and Quasar CLI Vite integration.
+      </p>
     </div>
     <div class="row justify-center hero">
       <div class="hero-title">Markdown-It! Plugins</div>
@@ -113,7 +127,7 @@
 
 <script setup lang="ts">
 import { QIcon } from 'quasar'
-import { fabGithub } from '@quasar/extras/fontawesome-v6'
+import { fabGithub } from '@quasar/extras/fontawesome-v7'
 import { useRouter } from 'vue-router'
 import siteConfig from '../../siteConfig'
 

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

@@ -0,0 +1,336 @@
+<template>
+  <div class="qpress-theme-gallery">
+    <article
+      v-for="theme in themes"
+      :key="theme.name"
+      class="qpress-theme-preview"
+      :style="getThemeStyle(theme)"
+    >
+      <div class="qpress-theme-preview__heading">
+        <span class="qpress-theme-preview__eyebrow">{{ theme.name }}</span>
+        <strong>{{ theme.tagline }}</strong>
+        <p>{{ theme.description }}</p>
+      </div>
+
+      <div class="qpress-theme-preview__pair">
+        <section class="qpress-theme-preview__panel qpress-theme-preview__panel--light">
+          <span class="qpress-theme-preview__surface">Light</span>
+          <div class="qpress-theme-preview__swatches" aria-label="Light theme color swatches">
+            <span class="qpress-theme-preview__swatch qpress-theme-preview__swatch--primary"></span>
+            <span
+              class="qpress-theme-preview__swatch qpress-theme-preview__swatch--secondary"
+            ></span>
+            <span class="qpress-theme-preview__swatch qpress-theme-preview__swatch--accent"></span>
+          </div>
+          <p>Light surface, body text, and inline token treatment.</p>
+          <code class="qpress-theme-preview__code qpress-theme-preview__code--light"
+            >markdown-token</code
+          >
+        </section>
+
+        <section class="qpress-theme-preview__panel qpress-theme-preview__panel--dark">
+          <span class="qpress-theme-preview__surface">Dark</span>
+          <div class="qpress-theme-preview__swatches" aria-label="Dark theme color swatches">
+            <span class="qpress-theme-preview__swatch qpress-theme-preview__swatch--primary"></span>
+            <span
+              class="qpress-theme-preview__swatch qpress-theme-preview__swatch--secondary"
+            ></span>
+            <span class="qpress-theme-preview__swatch qpress-theme-preview__swatch--accent"></span>
+          </div>
+          <p>Dark surface, body text, and inline token treatment.</p>
+          <code class="qpress-theme-preview__code qpress-theme-preview__code--dark"
+            >markdown-token</code
+          >
+        </section>
+      </div>
+    </article>
+  </div>
+</template>
+
+<script setup lang="ts">
+type ThemePalette = {
+  primary: string
+  secondary: string
+  accent: string
+  lightBg: string
+  lightText: string
+  lightCodeBg: string
+  lightCodeText: string
+  darkBg: string
+  darkText: string
+  darkCodeBg: string
+  darkCodeText: string
+  shadow: string
+}
+
+type ThemePreview = {
+  name: string
+  tagline: string
+  description: string
+  palette: ThemePalette
+}
+
+const themes: ThemePreview[] = [
+  {
+    name: 'Default',
+    tagline: 'Clean technical docs',
+    description: 'A crisp blue and orange palette with neutral surfaces.',
+    palette: {
+      primary: '#00bfff',
+      secondary: '#4b555c',
+      accent: '#ea5e13',
+      lightBg: '#fefefe',
+      lightText: '#4d4d4d',
+      lightCodeBg: '#f5f5f5',
+      lightCodeText: '#4d4d4d',
+      darkBg: '#080e1a',
+      darkText: '#cbcbcb',
+      darkCodeBg: '#121212',
+      darkCodeText: '#e6e6e6',
+      shadow: 'rgba(0, 191, 255, 0.22)',
+    },
+  },
+  {
+    name: 'Mystic',
+    tagline: 'Vivid reference sites',
+    description: 'A purple, cyan, and ember palette with a more expressive voice.',
+    palette: {
+      primary: '#8a2be2',
+      secondary: '#00ced1',
+      accent: '#ff4500',
+      lightBg: '#e6e6fa',
+      lightText: '#4b0082',
+      lightCodeBg: '#f8f8ff',
+      lightCodeText: '#9370db',
+      darkBg: '#171122',
+      darkText: '#e6e6fa',
+      darkCodeBg: '#4b0082',
+      darkCodeText: '#e6e6fa',
+      shadow: 'rgba(138, 43, 226, 0.32)',
+    },
+  },
+  {
+    name: 'Newspaper',
+    tagline: 'Editorial documentation',
+    description: 'A restrained black, white, and slate palette for classic docs.',
+    palette: {
+      primary: '#8793fc',
+      secondary: '#333333',
+      accent: '#666666',
+      lightBg: '#f5f5f5',
+      lightText: '#333333',
+      lightCodeBg: '#f5f5f5',
+      lightCodeText: '#333333',
+      darkBg: '#000000',
+      darkText: '#ffffff',
+      darkCodeBg: '#1a1a1a',
+      darkCodeText: '#e6e6e6',
+      shadow: 'rgba(0, 0, 0, 0.24)',
+    },
+  },
+  {
+    name: 'Sunrise',
+    tagline: 'Warm product guides',
+    description: 'A red, blue, and amber palette with bright approachable contrast.',
+    palette: {
+      primary: '#e74c3c',
+      secondary: '#5186bb',
+      accent: '#f39c12',
+      lightBg: '#ecf0f1',
+      lightText: '#2c3e50',
+      lightCodeBg: '#ecf0f1',
+      lightCodeText: '#2c3e50',
+      darkBg: '#34495e',
+      darkText: '#ecf0f1',
+      darkCodeBg: '#2c3e50',
+      darkCodeText: '#ecf0f1',
+      shadow: 'rgba(231, 76, 60, 0.26)',
+    },
+  },
+  {
+    name: 'Tawny',
+    tagline: 'Earthy knowledge bases',
+    description: 'A grounded brown and sand palette for warm, calm documentation.',
+    palette: {
+      primary: '#8b4513',
+      secondary: '#a0522d',
+      accent: '#d2691e',
+      lightBg: '#f5f5dc',
+      lightText: '#5c4033',
+      lightCodeBg: '#fdfdfd',
+      lightCodeText: '#5c4033',
+      darkBg: '#3e2723',
+      darkText: '#f5f5dc',
+      darkCodeBg: '#5c4033',
+      darkCodeText: '#f5f5dc',
+      shadow: 'rgba(139, 69, 19, 0.3)',
+    },
+  },
+  {
+    name: 'Evergreen',
+    tagline: 'Durable field manuals',
+    description: 'A spruce, moss, and amber palette for calm long-lived docs.',
+    palette: {
+      primary: '#14b8a6',
+      secondary: '#3f8f68',
+      accent: '#f59e0b',
+      lightBg: '#f3faf6',
+      lightText: '#173b2f',
+      lightCodeBg: '#e6f6ee',
+      lightCodeText: '#0f5132',
+      darkBg: '#071914',
+      darkText: '#d7f3e6',
+      darkCodeBg: '#0e2a22',
+      darkCodeText: '#b8f5d4',
+      shadow: 'rgba(20, 184, 166, 0.28)',
+    },
+  },
+]
+
+function getThemeStyle(theme: ThemePreview): Record<string, string> {
+  return {
+    '--qpress-theme-primary': theme.palette.primary,
+    '--qpress-theme-secondary': theme.palette.secondary,
+    '--qpress-theme-accent': theme.palette.accent,
+    '--qpress-theme-light-bg': theme.palette.lightBg,
+    '--qpress-theme-light-text': theme.palette.lightText,
+    '--qpress-theme-light-code-bg': theme.palette.lightCodeBg,
+    '--qpress-theme-light-code-text': theme.palette.lightCodeText,
+    '--qpress-theme-dark-bg': theme.palette.darkBg,
+    '--qpress-theme-dark-text': theme.palette.darkText,
+    '--qpress-theme-dark-code-bg': theme.palette.darkCodeBg,
+    '--qpress-theme-dark-code-text': theme.palette.darkCodeText,
+    '--qpress-theme-shadow': theme.palette.shadow,
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.qpress-theme-gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
+  gap: 18px;
+  margin: 24px 0 32px;
+}
+
+.qpress-theme-preview {
+  overflow: hidden;
+  border: 1px solid var(--qpress-theme-accent);
+  border-radius: 16px;
+  background: var(--qpress-theme-light-bg);
+  box-shadow: 0 18px 36px -28px var(--qpress-theme-shadow);
+
+  &__heading {
+    display: grid;
+    gap: 6px;
+    padding: 18px 20px;
+    color: var(--qpress-theme-dark-text);
+    background:
+      linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 42%),
+      var(--qpress-theme-dark-bg);
+    border-bottom: 5px solid var(--qpress-theme-accent);
+
+    p {
+      margin: 0;
+      opacity: 0.86;
+    }
+  }
+
+  &__eyebrow,
+  &__surface {
+    color: var(--qpress-theme-primary);
+    font-size: 0.76rem;
+    font-weight: 700;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+  }
+
+  &__pair {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  &__panel {
+    display: grid;
+    align-content: start;
+    gap: 12px;
+    min-height: 230px;
+    padding: 18px;
+
+    p {
+      margin: 0;
+    }
+
+    &--light {
+      color: var(--qpress-theme-light-text);
+      background: var(--qpress-theme-light-bg);
+    }
+
+    &--dark {
+      color: var(--qpress-theme-dark-text);
+      background: var(--qpress-theme-dark-bg);
+      border-left: 1px solid var(--qpress-theme-accent);
+
+      .qpress-theme-preview__swatch {
+        border-color: rgba(255, 255, 255, 0.22);
+      }
+    }
+  }
+
+  &__swatches {
+    display: flex;
+    gap: 8px;
+  }
+
+  &__swatch {
+    width: 34px;
+    height: 34px;
+    border: 2px solid rgba(0, 0, 0, 0.16);
+    border-radius: 50%;
+
+    &--primary {
+      background: var(--qpress-theme-primary);
+    }
+
+    &--secondary {
+      background: var(--qpress-theme-secondary);
+    }
+
+    &--accent {
+      background: var(--qpress-theme-accent);
+    }
+  }
+
+  &__code {
+    width: fit-content;
+    padding: 5px 8px;
+    border: 1px solid var(--qpress-theme-primary);
+    border-radius: 6px;
+
+    &--light {
+      color: var(--qpress-theme-light-code-text);
+      background: var(--qpress-theme-light-code-bg);
+    }
+
+    &--dark {
+      color: var(--qpress-theme-dark-code-text);
+      background: var(--qpress-theme-dark-code-bg);
+    }
+  }
+}
+
+@media (max-width: 600px) {
+  .qpress-theme-gallery {
+    grid-template-columns: 1fr;
+  }
+
+  .qpress-theme-preview__pair {
+    grid-template-columns: 1fr;
+  }
+
+  .qpress-theme-preview__panel--dark {
+    border-top: 1px solid var(--qpress-theme-accent);
+    border-left: 0;
+  }
+}
+</style>

package/src/templates/init/src/components/page-parts/releases/GitHubReleases.vue

@@ -0,0 +1,121 @@
+<template>
+  <q-card flat bordered>
+    <q-card-section v-if="error" class="row no-wrap items-center">
+      <q-icon name="warning" size="24px" color="negative" class="q-mr-sm" />
+      <div>Cannot connect to GitHub. Try again later.</div>
+    </q-card-section>
+    <q-card-section v-else-if="loading" class="row no-wrap items-center">
+      <q-spinner size="24px" color="primary" class="q-mr-sm" />
+      <div>Loading release notes from GitHub</div>
+    </q-card-section>
+    <template v-else>
+      <q-separator />
+      <q-tab-panels v-model="currentPackage" animated class="packages-container">
+        <q-tab-panel
+          v-for="(packageReleases, packageName) in packages"
+          :key="packageName"
+          :name="packageName"
+          class="q-pa-none"
+        >
+          <PackageReleases
+            :latest-version="latestVersions[packageName]"
+            :releases="packageReleases"
+            repo-url="https://github.com/md-plugins/md-plugins"
+          />
+        </q-tab-panel>
+      </q-tab-panels>
+    </template>
+  </q-card>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { date } from 'quasar'
+
+import PackageReleases from './PackageReleases.vue'
+import type { ReleaseInfo } from './PackageReleases.vue'
+
+const { extractDate, formatDate } = date
+const packageName = 'MD-Plugins'
+
+interface GitHubRelease {
+  name?: string
+  tag_name?: string
+  published_at: string
+  body?: string
+}
+
+type ReleasePackageMap = Record<string, ReleaseInfo[]>
+
+const loading = ref(false)
+const error = ref(false)
+const packages = ref<ReleasePackageMap>({ [packageName]: [] })
+const currentPackage = ref(packageName)
+const latestVersions = ref<Record<string, string>>({})
+
+function getReleaseVersion(release: GitHubRelease): string | undefined {
+  const name = release.name || release.tag_name || ''
+  const match = name.match(/(?:^|\s)v?(\d+\.\d+\.\d+(?:[-\w.]+)?)/)
+
+  return match?.[1] ?? release.tag_name?.replace(/^v/, '')
+}
+
+async function queryReleases(): Promise<void> {
+  loading.value = true
+  error.value = false
+
+  try {
+    const response = await fetch(
+      'https://api.github.com/repos/md-plugins/md-plugins/releases?per_page=100',
+    )
+
+    if (response.ok === false) {
+      throw new Error(`GitHub request failed with ${response.status}`)
+    }
+
+    const releases = (await response.json()) as GitHubRelease[]
+    const parsedReleases = releases
+      .map((release) => {
+        const version = getReleaseVersion(release)
+
+        if (version === undefined) {
+          return null
+        }
+
+        return {
+          version,
+          date: formatDate(extractDate(release.published_at, 'YYYY-MM-DD'), 'YYYY-MM-DD'),
+          body: release.body || '',
+          label: version,
+        }
+      })
+      .filter((release): release is ReleaseInfo => release !== null)
+      .sort((a, b) => {
+        return (
+          Number.parseInt(b.date.replace(/-/g, ''), 10) -
+          Number.parseInt(a.date.replace(/-/g, ''), 10)
+        )
+      })
+
+    if (parsedReleases.length === 0) {
+      throw new Error('No releases returned from GitHub')
+    }
+
+    packages.value = { [packageName]: parsedReleases }
+    latestVersions.value = { [packageName]: parsedReleases[0]?.label ?? '' }
+  } catch {
+    error.value = true
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(queryReleases)
+</script>
+
+<style lang="scss">
+.packages-container .q-tab-panel {
+  padding-right: 0;
+  padding-top: 0;
+}
+</style>