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

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

@@ -0,0 +1,187 @@
+<template>
+  <div v-if="siteConfig.config.useFooter" class="markdown-page-footer markdown-brand">
+    <template v-if="props.fullscreen">
+      <nav class="markdown-page-footer__nav" v-once>
+        <q-list v-for="entry in links" :key="entry.name" role="list">
+          <q-item-label
+            class="markdown-page-footer__title markdown-page-footer__margin row items-end text-weight-bold letter-spacing-225 q-mb-md"
+            >{{ entry.name }}</q-item-label
+          >
+
+          <q-item
+            v-for="(item, index) in entry.children"
+            :key="index"
+            dense
+            :flat="item.image"
+            clickable
+            :to="item.path"
+            :href="item.external ? item.path : void 0"
+            :target="item.external ? '_blank' : void 0"
+            class="markdown-layout__item"
+          >
+            <q-item-section v-if="item.image" class="letter-spacing-100"
+              ><q-img :src="item.image" :style="{ maxWidth: item.maxWidth ?? '150px' }"
+            /></q-item-section>
+            <q-item-section v-else class="letter-spacing-100">{{ item.name }}</q-item-section>
+          </q-item>
+        </q-list>
+      </nav>
+
+      <q-separator class="landing-mx--large" />
+    </template>
+
+    <div
+      v-if="!!siteConfig.license"
+      class="markdown-page-footer__license row justify-center q-mt-md letter-spacing-225"
+    >
+      <q-btn
+        v-if="!!siteConfig.license.label && !!siteConfig.license.link"
+        no-caps
+        flat
+        :href="siteConfig.license.link"
+        target="_blank"
+        class="header-btn text-weight-bold"
+        :label="siteConfig.license.label"
+      />
+      <template
+        v-if="!!siteConfig.privacy && !!siteConfig.privacy.label && !!siteConfig.privacy.link"
+      >
+        <q-btn
+          v-if="isPrivacyLocal"
+          no-caps
+          flat
+          :to="siteConfig.privacy.link"
+          class="header-btn text-weight-bold"
+          :label="siteConfig.privacy.label"
+        />
+        <q-btn
+          v-else
+          no-caps
+          flat
+          :href="siteConfig.privacy.link"
+          target="_blank"
+          class="header-btn text-weight-bold"
+          :label="siteConfig.privacy.label"
+        />
+      </template>
+    </div>
+
+    <div class="markdown-page-footer__copyright text-center q-pa-lg letter-spacing-100">
+      <div v-if="siteConfig.copyright.line1">
+        {{ siteConfig.copyright.line1 }}
+      </div>
+      <div v-if="siteConfig.copyright.line2">
+        {{ siteConfig.copyright.line2 }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import siteConfig from '../../siteConfig'
+import type { SiteMenuItem } from '../../siteConfig'
+
+const isPrivacyLocal = computed(() => {
+  return siteConfig?.privacy?.link?.startsWith('/') || siteConfig?.privacy?.link?.startsWith('.')
+})
+
+/**
+ * Loop through the menus and extract all menu items therein, including children to a flat array of menu items
+ * @param menus menu items to extract from
+ * @return {*[]} An array of flattened menu items (no more children, they move up to the same level as others)
+ */
+function getMenu(path: string): SiteMenuItem[] {
+  const children: SiteMenuItem[] = []
+  const menuItem: SiteMenuItem | undefined = siteConfig.sidebar.find(
+    (item) => item.path === path,
+  ) as SiteMenuItem
+
+  if (menuItem !== void 0 && menuItem.children) {
+    for (const item of menuItem.children) {
+      if (item.children === void 0) {
+        children.push({
+          name: item.name,
+          path: item.external === true ? item.path : `/${path}/${item.path}`,
+          external: item.external,
+          image: item.image ?? void 0,
+        } as SiteMenuItem)
+      }
+    }
+  }
+
+  return children
+}
+
+const links = siteConfig.links.footerLinks.flatMap((nav) => ({
+  name: nav.name,
+  children: [...(nav.children || []), ...((nav.extract !== void 0 && getMenu(nav.extract)) || [])],
+}))
+
+const props = defineProps({
+  fullscreen: Boolean,
+})
+</script>
+
+<style lang="scss">
+.markdown-page-footer {
+  position: relative;
+  background-color: $brand-light;
+  width: 100%;
+  z-index: 1;
+  border-top: 1px solid $separator-color;
+
+  &__margin {
+    margin-left: 6px;
+  }
+
+  .markdown-layout__item,
+  &__title {
+    font-size: ($font-size - 2px);
+  }
+
+  &__nav {
+    display: grid;
+    grid-row-gap: 64px;
+    grid-column-gap: 32px;
+    padding: 64px 32px;
+    grid-template-columns: 1fr;
+
+    @media (min-width: 720px) {
+      padding-left: 64px;
+      padding-right: 64px;
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (min-width: 830px) {
+      grid-column-gap: 64px;
+    }
+
+    @media (min-width: 1070px) {
+      padding-top: 100px;
+      padding-bottom: 100px;
+      grid-row-gap: 64px;
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    @media (min-width: 1417px) {
+      grid-template-columns: repeat(4, 1fr);
+    }
+
+    @media (min-width: 2060px) {
+      grid-template-columns: repeat(5, 1fr);
+    }
+  }
+
+  &__copyright {
+    font-size: ($font-size - 2px);
+  }
+}
+
+body.body--dark {
+  .markdown-page-footer {
+    background-color: $dark-bg;
+    border-top-color: $separator-dark-color;
+  }
+}
+</style>

package/src/templates/init/src/_q-press/layouts/MarkdownPageSidebar.scss

@@ -0,0 +1,54 @@
+.markdown-page-menu {
+  font-size: ($font-size - 2px);
+
+  .q-icon {
+    font-size: 24px;
+  }
+
+  .q-item__section--avatar {
+    color: $brand-primary;
+    min-width: 28px;
+    padding-right: 12px;
+  }
+
+  .q-expansion-item__content {
+    margin-left: 18px;
+    padding-left: 4px;
+    border-left: 1px solid $separator-color;
+
+    .q-expansion-item__content {
+      margin-left: 26px;
+      padding-left: 2px !important;
+
+      .q-item {
+        padding-left: 16px !important;
+        margin-left: 2px;
+      }
+    }
+  }
+
+  .q-expansion-item__toggle-icon {
+    color: $grey-5;
+  }
+
+  .q-expansion-item--expanded > div > .q-item {
+    > .q-item__section--main {
+      color: $brand-primary;
+    }
+    > .q-item__section--side .q-expansion-item__toggle-icon {
+      color: $brand-primary;
+    }
+  }
+
+  &__deep-expansion > .q-expansion-item__container > .q-item {
+    .q-item__section--avatar {
+      min-width: 16px;
+      padding-left: 8px;
+      padding-right: 0;
+    }
+  }
+}
+
+body.body--dark .markdown-page-menu .q-expansion-item__content {
+  border-left-color: $separator-dark-color;
+}

package/src/templates/init/src/_q-press/layouts/MarkdownPageSidebar.ts

@@ -0,0 +1,218 @@
+import { QExpansionItem, QList, QItem, QItemSection, QIcon, QBadge, Ripple } from 'quasar'
+
+import { mdiMenuDown } from '@quasar/extras/mdi-v7'
+import { h, ref, watch, onBeforeUpdate, withDirectives, type VNode } from 'vue'
+import { useRoute } from 'vue-router'
+
+import siteConfig from '../../siteConfig'
+
+import './MarkdownPageSidebar.scss'
+
+interface ComponentProxy {
+  $parent?: ComponentProxy
+  $: {
+    parent?: {
+      proxy?: ComponentProxy
+      parent?: ComponentProxy
+    }
+  }
+  show?: () => void
+}
+
+function getParentProxy(proxy: ComponentProxy): ComponentProxy | undefined {
+  if (Object(proxy.$parent) === proxy.$parent) {
+    return proxy.$parent
+  }
+
+  let parent = proxy.$?.parent
+
+  if (parent) {
+    while (Object(parent) === parent) {
+      if (Object(parent.proxy) === parent.proxy) {
+        return parent.proxy
+      }
+
+      parent = parent.parent as { proxy?: ComponentProxy; parent?: ComponentProxy } | undefined
+      if (!parent) {
+        break
+      }
+    }
+  }
+
+  return undefined
+}
+
+export default {
+  setup() {
+    const $route = useRoute()
+    const routePath = $route.path
+
+    const rootRef = ref(null)
+
+    watch(
+      () => $route.path,
+      (val: string) => {
+        showMenu(childRefs[val] as ComponentProxy | null)
+      },
+    )
+
+    let childRefs: { [key: string]: ComponentProxy } = {}
+
+    onBeforeUpdate(() => {
+      childRefs = {}
+    })
+
+    function showMenu(proxy: ComponentProxy | null): void {
+      if (proxy !== undefined && proxy !== rootRef.value) {
+        if (proxy.show !== undefined) proxy.show()
+        const parent = getParentProxy(proxy)
+        if (parent !== undefined) {
+          showMenu(parent)
+        }
+      }
+    }
+
+    function getDrawerMenu(menu: MenuItem, path: string, level: number): VNode {
+      if (menu.children !== void 0) {
+        return h(
+          QExpansionItem,
+          {
+            class:
+              'markdown-layout__item non-selectable' +
+              (level !== 0 ? ' markdown-page-menu__deep-expansion' : ''),
+            ref: (vm: any) => {
+              if (vm) {
+                childRefs[path] = vm
+              }
+            },
+            key: `${menu.name}-${path}`,
+            label: menu.name,
+            icon: menu.icon,
+            expandIcon: mdiMenuDown,
+            defaultOpened: menu.expanded || routePath.startsWith(path),
+            switchToggleSide: level !== 0,
+            denseToggle: level !== 0,
+            activeClass: 'markdown-layout__item--active',
+          },
+          () =>
+            menu.children?.map(
+              (item: MenuItem) =>
+                item.name &&
+                getDrawerMenu(
+                  item,
+                  path + (item.path !== void 0 ? '/' + item.path : ''),
+                  level / 2 + 0.1,
+                ),
+            ),
+        )
+      }
+
+      const props: any = {
+        ref: (vm: any) => {
+          if (vm) {
+            childRefs[path] = vm
+          }
+        },
+        key: path,
+        class: 'markdown-layout__item non-selectable',
+        to: path,
+        activeClass: 'markdown-layout__item--active',
+      }
+
+      if (level !== 0) {
+        props.insetLevel = Math.min(level, 1)
+      }
+
+      if (menu.external === true) {
+        Object.assign(props, {
+          to: void 0,
+          clickable: true,
+          tag: 'a',
+          href: menu.path,
+          target: '_blank',
+        })
+      }
+
+      const child: any[] = []
+
+      if (menu.icon !== void 0) {
+        child.push(
+          h(
+            QItemSection,
+            {
+              avatar: true,
+            },
+            () => h(QIcon, { name: menu.icon, color: menu.iconColor ? menu.iconColor : undefined }),
+          ),
+        )
+      }
+
+      child.push(h(QItemSection, () => menu.name))
+
+      if (menu.rightIcon !== void 0) {
+        child.push(
+          h(
+            QItemSection,
+            {
+              avatar: true,
+            },
+            () =>
+              h(QIcon, {
+                name: menu.rightIcon,
+                color: menu.rightIconColor ? menu.rightIconColor : undefined,
+              }),
+          ),
+        )
+      }
+
+      if (menu.badge !== void 0) {
+        child.push(
+          h(
+            QItemSection,
+            {
+              side: true,
+            },
+            () => h(QBadge, { label: menu.badge, class: 'header-badge' }),
+          ),
+        )
+      }
+
+      return withDirectives(
+        h(QItem, props, () => child),
+        [[Ripple]],
+      )
+    }
+
+    function showDrawerVersion(): VNode | undefined {
+      if (
+        siteConfig.versionConfig.showOnSidebar === true &&
+        (siteConfig.versionConfig.showVersion === true ||
+          siteConfig.versionConfig.showTitle === true)
+      ) {
+        return h(QItem, { class: 'markdown-layout__item non-selectable' }, () => [
+          siteConfig.versionConfig.showTitle &&
+            h(QItemSection, { class: 'text-right' }, () => siteConfig.title),
+          siteConfig.versionConfig.showVersion &&
+            h(QItemSection, { class: 'text-left' }, () => 'v' + siteConfig.version),
+        ])
+      }
+    }
+
+    function showDrawerMenu(): VNode {
+      return h(QList, { ref: rootRef, class: 'markdown-page-menu', dense: true }, () => [
+        siteConfig.sidebar.map((item) => getDrawerMenu(item, '/' + item.path, 0)),
+      ])
+    }
+
+    return () => {
+      if (
+        siteConfig.config.useSidebar === true &&
+        siteConfig.sidebar &&
+        Array.isArray(siteConfig.sidebar) &&
+        siteConfig.sidebar.length > 0
+      ) {
+        return h('div', { class: 'markdown-layout' }, [showDrawerVersion(), showDrawerMenu()])
+      }
+    }
+  },
+}

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

@@ -0,0 +1,23 @@
+<template>
+  <q-list class="markdown-page__toc">
+    <q-item
+      v-for="tocItem in markdownStore.toc"
+      :key="tocItem.id"
+      :id="`toc--${tocItem.id}`"
+      clickable
+      class="markdown-layout__item"
+      active-class="markdown-layout__item--active"
+      v-ripple
+      :active="markdownStore.activeToc === tocItem.id"
+      @click="tocItem.onClick"
+    >
+      <q-item-section v-if="tocItem.sub === true" side />
+      <q-item-section>{{ tocItem.title }}</q-item-section>
+    </q-item>
+  </q-list>
+</template>
+
+<script setup lang="ts">
+import { useMarkdownStore } from '../stores/markdown'
+const markdownStore = useMarkdownStore()
+</script>