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

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

@@ -0,0 +1,239 @@
+<template>
+  <q-layout class="markdown-layout markdown-technical" view="hHh LpR fff" @scroll="onPageScroll">
+    <MarkdownHeader />
+
+    <q-page-container>
+      <q-page :class="pageClass" key="q-page">
+        <router-view v-if="isFullscreen" key="page-fullscreen" />
+        <div v-else :class="pageContentClass" key="page-standard">
+          <div
+            v-if="siteConfig.config.useSidebar === true"
+            class="markdown-layout__menu-container row justify-center"
+          >
+            <q-scroll-area class="markdown-layout__menu q-ml-md">
+              <MarkdownPageSidebar />
+            </q-scroll-area>
+          </div>
+          <router-view />
+        </div>
+      </q-page>
+      <MarkdownPageFooter :fullscreen="isFullscreen" />
+    </q-page-container>
+
+    <q-page-scroller>
+      <q-btn fab-mini color="brand-accent" :icon="mdiArrowUp" aria-label="Back to top">
+        <q-tooltip>Back to top</q-tooltip>
+      </q-btn>
+    </q-page-scroller>
+
+    <q-no-ssr>
+      <MarkdownDrawerSidebar v-if="siteConfig.config.useSidebar === true" />
+      <MarkdownDrawerToc v-if="siteConfig.config.useToc === true" />
+    </q-no-ssr>
+  </q-layout>
+</template>
+
+<script setup lang="ts">
+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 { useScroll } from '../composables/scroll'
+
+import MarkdownHeader from './MarkdownHeader.vue'
+import MarkdownDrawerSidebar from './MarkdownDrawerSidebar.vue'
+import MarkdownDrawerToc from './MarkdownDrawerToc.vue'
+import MarkdownPageSidebar from './MarkdownPageSidebar'
+import MarkdownPageFooter from './MarkdownPageFooter.vue'
+
+import siteConfig from '../../siteConfig'
+
+const { onPageScroll } = useScroll()
+
+const route = useRoute()
+// const markdownStore = useMarkdownStore()
+
+const isFullscreen = computed(() => route.meta.fullscreen === true)
+const pageClass = computed(
+  () => `markdown-layout__page--${isFullscreen.value === true ? 'fullscreen' : 'standard'}`,
+)
+const pageContentClass = computed(
+  () =>
+    'markdown-layout__page row no-wrap justify-start ' +
+    `markdown-layout__page--${route.meta.fullwidth === true ? 'fullwidth' : 'standard'}`,
+)
+</script>
+
+<style lang="scss">
+.markdown-layout {
+  .q-page-container :target {
+    scroll-margin-top: $header-height;
+  }
+
+  // keep the button on top of sticky in examples
+  .q-page-scroller > .q-page-sticky {
+    z-index: 1;
+  }
+
+  &__page {
+    width: 100%;
+
+    &--standard {
+      /**
+        16px  - left menu margin
+        + 330px - left menu
+        + 1200px - page content
+        + 300px - toc menu
+       */
+      max-width: 2500px;
+
+      .markdown-page__content {
+        width: auto;
+        min-width: 0;
+        flex: 10000 1 0%;
+        max-width: 1200px;
+
+        > div,
+        > pre {
+          margin-bottom: 22px;
+        }
+      }
+
+      @media (max-width: 1845px) {
+        justify-content: start;
+
+        .markdown-page__toc-container--flowing {
+          display: none;
+        }
+      }
+
+      @media (min-width: 1846px) {
+        .markdown-layout__menu-container {
+          flex: 1 0 auto;
+          width: auto;
+          min-width: 0;
+          max-width: 100%;
+        }
+      }
+    }
+
+    &--fullwidth,
+    &--fullscreen {
+      .markdown-page__content {
+        width: 100%;
+        padding: 0 !important;
+      }
+
+      .markdown-page__toc-container {
+        display: none;
+      }
+    }
+  }
+
+  &__page-el--standard {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__menu {
+    position: sticky;
+    top: $header-height;
+    height: calc(100vh - #{$header-height});
+    width: 330px;
+    min-width: 330px;
+    border-right: 1px solid $separator-color;
+
+    .markdown-page-menu {
+      padding: 32px 16px 32px 0; // page top padding
+    }
+  }
+
+  &__item.q-item,
+  &__item .q-item {
+    letter-spacing: $letter-spacing-brand;
+    border-radius: 10px;
+    margin-top: 2px;
+    min-height: 30px;
+    padding: 0 4px 0 6px;
+    color: $light-text;
+    transition: none;
+
+    &:hover {
+      color: #000 !important; // $header-btn-hover-color--light makes little difference
+    }
+
+    .q-item__section {
+      padding-top: 2px;
+      padding-bottom: 2px;
+    }
+
+    &.q-item--dark {
+      color: $dark-text;
+
+      &:hover {
+        color: $header-btn-hover-color--dark !important;
+      }
+    }
+
+    .q-item__section--main ~ .q-item__section--side {
+      padding-left: 4px;
+    }
+  }
+
+  &__item .q-expansion-item > .q-expansion-item__container > .q-item .q-item__label {
+    padding-left: 8.5px;
+  }
+
+  &__item--active {
+    color: $brand-primary !important;
+    background: scale-color($primary, $lightness: 90%);
+
+    &.q-item--dark {
+      background: scale-color($primary, $lightness: -50%);
+    }
+  }
+}
+
+@media (max-width: 1300px) {
+  .markdown-layout__menu,
+  .markdown-page__toc-container--flowing {
+    // let's position them off-screen
+    // instead of "display: none"
+    // so that QScrollArea won't compute the size uselessly
+    position: fixed;
+    left: -1000px;
+    top: 0;
+  }
+}
+
+.markdown-drawer {
+  // only show the shadow when the drawer is open
+  .q-drawer:not(.q-layout--prevent-focus) & {
+    box-shadow: 0 0 6px 3px $separator-color;
+  }
+
+  &__header {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: linear-gradient(to bottom, #fff 0%, #fff 75%, transparent);
+  }
+}
+
+body.body--dark {
+  .markdown-layout__menu {
+    border-right-color: $separator-dark-color;
+  }
+
+  // only show the shadow when the drawer is open
+  .q-drawer:not(.q-layout--prevent-focus) .markdown-drawer {
+    box-shadow: 0 0 6px 3px $brand-primary;
+  }
+
+  .markdown-drawer__header {
+    background: linear-gradient(to bottom, $dark 0%, $dark 75%, transparent);
+  }
+}
+</style>

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

@@ -0,0 +1,307 @@
+<template>
+  <div class="markdown-page__content">
+    <div v-if="!isFullscreen && props.overline" class="markdown-page__overline text-brand-primary">
+      {{ props.overline }}
+    </div>
+
+    <div v-if="!isFullscreen && props.title" class="markdown-heading markdown-h1" id="introduction">
+      <div class="row items-center q-gutter-sm">
+        <div>{{ props.title }}</div>
+        <q-badge v-if="props.badge" :label="props.badge" />
+      </div>
+
+      <q-space />
+
+      <q-btn
+        v-if="props.editLink"
+        class="self-start q-ml-sm"
+        :href="editHref"
+        target="_blank"
+        rel="noopener noreferrer"
+        flat
+        round
+        color="brand-primary"
+        :icon="mdiPencil"
+      >
+        <q-tooltip class="row no-wrap items-center">
+          <span>Caught a mistake? Edit this page in browser</span>
+          <q-icon class="q-ml-xs" :name="mdiFlash" size="2em" />
+        </q-tooltip>
+      </q-btn>
+    </div>
+
+    <div class="markdown-page__nav" v-if="props.related">
+      <div class="q-gutter-sm flex">
+        <router-link
+          class="q-link markdown-page__related rounded-borders cursor-pointer column justify-center"
+          v-for="link in props.related"
+          :key="link.category + link.path"
+          :to="link.path"
+        >
+          <div class="markdown-page__nav-categ">{{ link.category || 'Docs' }}</div>
+          <div class="markdown-page__nav-name text-weight-bold row items-center no-wrap">
+            <div class="q-mr-xs">{{ link.name }}</div>
+            <q-icon :name="mdiLaunch" />
+          </div>
+        </router-link>
+      </div>
+    </div>
+
+    <slot />
+
+    <div class="markdown-page__nav markdown-page__nav--footer" v-if="props.nav">
+      <div class="text-h6 q-pb-md markdown-heading">Ready for more?</div>
+      <div class="q-gutter-sm flex">
+        <router-link
+          v-for="link in props.nav"
+          :key="link.category + link.path"
+          :to="link.path"
+          class="q-link markdown-page__related rounded-borders cursor-pointer column justify-center"
+          :class="link.classes"
+        >
+          <div class="markdown-page__nav-categ">{{ link.category || 'Docs' }}</div>
+          <div class="markdown-page__nav-name text-weight-bold">{{ link.name }}</div>
+        </router-link>
+      </div>
+    </div>
+
+    <div class="markdown-page__content-footer" v-if="props.editLink">
+      <q-separator class="q-mb-sm" />
+
+      <div class="q-mb-md">
+        <span>Caught a mistake?</span>
+        <MarkdownLink class="q-ml-xs" :to="editHref">Edit this page in browser</MarkdownLink>
+      </div>
+    </div>
+  </div>
+
+  <div
+    v-if="hasToc"
+    class="markdown-page__toc-container col-grow row justify-center gt-sm"
+    :class="tocClass"
+  >
+    <q-scroll-area class="markdown-page__toc-area">
+      <MarkdownPageToc />
+    </q-scroll-area>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useMeta } from 'quasar'
+import { computed } from 'vue'
+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'
+
+import getMeta from '../assets/get-meta'
+import { useMarkdownStore } from '../stores/markdown'
+import siteConfig from '../../siteConfig'
+
+const props = defineProps({
+  title: String,
+  desc: String,
+  overline: String,
+  badge: String,
+
+  fullscreen: Boolean,
+
+  heading: Boolean,
+  editLink: String,
+
+  toc: Array<TocItem>,
+  related: Array<RelatedItem>,
+  nav: Array<NavItem>,
+})
+
+useMeta(
+  props.desc !== void 0
+    ? {
+        title: props.title ?? '',
+        meta: getMeta(`${props.title ?? ''} || ${siteConfig.title ?? ''}`, props.desc),
+      }
+    : { title: props.title ?? '' },
+)
+
+const route = useRoute()
+const markdownStore = useMarkdownStore()
+
+// console.log('toc', props.toc)
+
+if (props.toc !== void 0) {
+  markdownStore.setToc(props.toc)
+}
+
+const editHref = computed(() => `${siteConfig.githubEditRoot}${props.editLink}.md`)
+
+const isFullscreen = computed(() => route.meta.fullscreen === true || props.fullscreen)
+
+const hasToc = computed(
+  () =>
+    route.meta.fullwidth !== true &&
+    route.meta.fullscreen !== true &&
+    props.fullscreen !== true &&
+    siteConfig.config.useToc &&
+    markdownStore.toc.length !== 0,
+)
+
+const tocClass = computed(
+  () => `markdown-page__toc-container--${props.toc !== void 0 ? 'fixed' : 'flowing'}`,
+)
+
+console.log('MarkdownPage props', props)
+</script>
+
+<style lang="scss">
+.markdown-page {
+  &__content {
+    padding: 80px 42px;
+    line-height: 1.5em;
+
+    @media (max-width: 1300px) {
+      padding: 32px;
+    }
+
+    @media (max-width: 850px) {
+      padding: 32px 16px;
+    }
+
+    > .q-btn {
+      background: $brand-accent;
+      color: #fff;
+      font-weight: 700;
+      font-size: $font-size;
+      letter-spacing: $letter-spacing-brand;
+      padding: 8px 16px;
+      text-transform: none;
+
+      .on-right {
+        margin-left: 8px;
+      }
+
+      .on-left {
+        margin-right: 8px;
+      }
+    }
+  }
+
+  &__toc-container {
+    position: sticky;
+    top: $header-height;
+    height: calc(100vh - #{$header-height});
+    min-width: 300px !important;
+
+    &--fixed {
+      .markdown-page__toc {
+        padding: 32px 16px 32px 0; // page top padding
+      }
+    }
+  }
+
+  &__toc-area {
+    width: 300px;
+  }
+
+  &__toc {
+    font-size: ($font-size - 2px);
+  }
+
+  &__content-footer {
+    margin-top: 64px;
+  }
+
+  &__overline {
+    letter-spacing: $letter-spacing-brand;
+    margin-bottom: 0 !important;
+
+    & + .markdown-h1 {
+      margin-top: 0 !important;
+      padding-top: 0 !important;
+    }
+  }
+
+  &__related {
+    transition: color $header-transition;
+    word-break: break-word;
+    line-height: 1.4em;
+    padding: 16px 20px;
+
+    &:hover {
+      color: $brand-primary !important;
+    }
+
+    &--left {
+      justify-content: flex-start;
+      text-align: left;
+
+      .markdown-page__nav-name:before {
+        content: '« ';
+        font-size: 1.2em;
+      }
+    }
+
+    &--right {
+      justify-content: flex-end;
+      text-align: right;
+
+      .markdown-page__nav-name:after {
+        content: ' »';
+        font-size: 1.2em;
+      }
+    }
+  }
+
+  &__nav {
+    color: $brand-light-text;
+
+    &--footer {
+      margin: 68px 0 0;
+      margin-bottom: 0 !important;
+    }
+
+    & + & {
+      margin-top: 0;
+    }
+
+    &-categ {
+      font-size: 0.9em;
+    }
+
+    &-name {
+      letter-spacing: $letter-spacing-brand;
+    }
+  }
+}
+
+body.body--light .markdown-page {
+  &__related {
+    color: $light-text;
+    background: $brand-light;
+    border: 1px solid $light-text; // match dark to avoid page reflow
+  }
+
+  &__toc-container .q-item {
+    color: $header-btn-color--light;
+  }
+}
+
+body.body--dark .markdown-page {
+  &__related {
+    color: $dark-text;
+    background: $brand-dark;
+    border: 1px solid $dark-text;
+  }
+
+  &__nav-name {
+    color: $brand-dark-text;
+  }
+
+  &__toc-container .q-item {
+    color: $header-btn-color--dark;
+  }
+}
+</style>