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

package/src/templates/update/src/_q-press/components/MarkdownPrerender.ts

@@ -0,0 +1,82 @@
+import { h, ref, computed, defineComponent, type PropType } from 'vue'
+import { QCard, QTabs, QTab, QTabPanels, QSeparator } from 'quasar'
+
+export default defineComponent({
+  name: 'MarkdownPrerender',
+
+  props: {
+    title: {
+      type: String as PropType<string>,
+      required: false,
+    },
+    tabs: {
+      type: Array as PropType<string[]>,
+      required: false,
+    },
+  },
+
+  setup(props, { slots }) {
+    const currentTab = ref(props.tabs !== undefined ? props.tabs[0] : null)
+
+    const hasHeader = computed(() => props.title !== undefined || props.tabs !== undefined)
+
+    function getContent() {
+      const acc: ReturnType<typeof h>[] = []
+
+      if (props.title !== undefined) {
+        acc.push(
+          h('div', { class: 'header-toolbar row items-center' }, [
+            h('div', { class: 'markdown-card-title q-my-xs q-mr-sm' }, props.title),
+          ]),
+        )
+      }
+
+      if (props.tabs !== undefined) {
+        acc.push(
+          h(
+            QTabs,
+            {
+              class: 'header-tabs',
+              align: 'left',
+              activeColor: 'brand-primary',
+              indicatorColor: 'brand-primary',
+              dense: true,
+              breakpoint: 0,
+              shrink: true,
+              modelValue: currentTab.value,
+              'onUpdate:modelValue': (v: string) => {
+                currentTab.value = v
+              },
+            },
+            () =>
+              props.tabs!.map((tab) =>
+                h(QTab, { name: tab, class: 'header-btn', noCaps: true }, () => tab),
+              ),
+          ),
+        )
+      }
+
+      if (hasHeader.value) {
+        acc.push(h(QSeparator))
+      }
+
+      acc.push(
+        props.tabs !== undefined
+          ? h(
+              QTabPanels,
+              {
+                class: 'markdown-copybtn-hover',
+                animated: true,
+                modelValue: currentTab.value,
+              },
+              slots.default,
+            )
+          : h('div', { class: 'markdown-copybtn-hover relative-position' }, slots.default?.()),
+      )
+
+      return acc
+    }
+
+    return () => h(QCard, { flat: true, bordered: true }, getContent)
+  },
+})

package/src/templates/update/src/_q-press/components/MarkdownTree.vue

@@ -0,0 +1,105 @@
+<template>
+  <q-tree class="markdown-tree" :nodes="nodes" node-key="id" children-key="c" default-expand-all>
+    <template #default-header="prop">
+      <div class="markdown-tree__label text-no-wrap">{{ prop.node.l }}</div>
+
+      <q-btn
+        v-if="prop.node.url"
+        class="markdown-tree__btn q-ml-sm"
+        padding="0"
+        color="brand-accent"
+        flat
+        :icon="mdiLaunch"
+        :href="prop.node.url"
+        target="_blank"
+        @click.stop
+      />
+
+      <template v-if="prop.node.e">
+        <q-icon
+          :name="mdiInformationOutline"
+          class="q-ml-sm lt-sm"
+          v-if="prop.node.e"
+          color="grey"
+          @click.stop
+          @touchstart.stop
+        >
+          <q-tooltip>{{ prop.node.e }}</q-tooltip>
+        </q-icon>
+        <div class="markdown-tree__explanation text-grey q-ml-sm gt-xs" v-if="prop.node.e">
+          # {{ prop.node.e }}
+        </div>
+      </template>
+    </template>
+  </q-tree>
+</template>
+
+<script setup>
+import { mdiLaunch, mdiInformationOutline } from '@quasar/extras/mdi-v6'
+
+const props = defineProps({
+  def: Object,
+})
+
+let id = 0
+const addId = (node) => {
+  node.id = id++
+  if (node.c !== void 0) {
+    node.l += '/'
+    node.c.forEach(addId)
+  }
+  return node
+}
+
+const nodes = [addId(props.def)]
+</script>
+
+<style lang="scss">
+.markdown-tree {
+  &__label {
+    font-size: ($font-size - 1px);
+  }
+
+  &__btn .q-icon {
+    font-size: 17px;
+  }
+
+  &__explanation {
+    font-size: ($font-size - 3px);
+    letter-spacing: 0.2px;
+  }
+
+  .q-tree__node {
+    padding: 0 0 3px 11px;
+
+    &:after {
+      left: -9px;
+    }
+  }
+
+  .q-tree__children {
+    padding-left: 19px;
+  }
+
+  .q-tree__node--parent {
+    padding-left: 4px;
+  }
+
+  .q-tree__node-header {
+    padding: 0 3px;
+
+    &:before {
+      left: -13px;
+    }
+  }
+
+  .q-tree__node--child {
+    padding-left: 10px;
+
+    > .q-tree__node-header:before {
+      left: -19px;
+      width: 15px;
+    }
+  }
+}
+</style>

package/src/templates/update/src/_q-press/components/markdown-utils.ts

@@ -0,0 +1,105 @@
+import { Notify } from 'quasar'
+import { slugify } from '@md-plugins/shared'
+
+/**
+ * Fallback function to copy text to clipboard when the Clipboard API is not available.
+ * This function creates a temporary textarea element, selects its content, and uses the
+ * deprecated execCommand('copy') method to copy the text.
+ *
+ * @param text - The string to be copied to the clipboard.
+ * @returns A boolean indicating whether the copy operation was successful (true) or not (false).
+ */
+function copyToClipboardFallback(text: string): boolean {
+  const textArea = document.createElement('textarea')
+  textArea.value = text
+  textArea.style.position = 'fixed' // avoid scrolling to bottom
+  document.body.appendChild(textArea)
+  textArea.focus()
+  textArea.select()
+
+  let res = false
+  try {
+    res = document.execCommand('copy')
+  } catch (err) {
+    console.error('Unable to copy to clipboard', err)
+  } finally {
+    document.body.removeChild(textArea)
+  }
+  return res
+}
+
+/**
+ * Copies the provided text to the clipboard using the Clipboard API if available,
+ * or falls back to a manual method if the API is not supported.
+ *
+ * @param text - The string to be copied to the clipboard.
+ * @returns A Promise that resolves when the text has been successfully copied,
+ *          or rejects if the copy operation fails.
+ * @throws Will throw an error if the Clipboard API fails or if the fallback method fails.
+ */
+export async function copyToClipboard(text: string): Promise<void> {
+  if (navigator.clipboard) {
+    try {
+      await navigator.clipboard.writeText(text)
+    } catch (err) {
+      console.error('Failed to copy text to clipboard using Clipboard API', err)
+      throw err
+    }
+  } else {
+    return new Promise((resolve, reject) => {
+      const res = copyToClipboardFallback(text)
+      if (res) {
+        resolve()
+      } else {
+        const error = new Error('Failed to copy text to clipboard using fallback method')
+        console.error(error)
+        reject(error)
+      }
+    })
+  }
+}
+
+/**
+ * Copies a heading's anchor link to the clipboard and updates the URL hash.
+ * This function performs the following actions:
+ * 1. Constructs the full URL with the anchor.
+ * 2. Temporarily removes the element's ID to prevent page jumping.
+ * 3. Updates the URL hash using history API or fallback method.
+ * 4. Restores the element's ID after a short delay.
+ * 5. Copies the constructed URL to the clipboard.
+ * 6. Displays a notification to confirm the copy action.
+ *
+ * @param id - The ID of the heading element to be copied.
+ * @returns void This function doesn't return a value.
+ */
+export function copyHeading(id: string): void {
+  const text = `${location.origin}${location.pathname}#${id}`
+  const el = document.getElementById(id)
+
+  if (el) {
+    el.id = '' // Temporarily clear the ID to avoid jumping
+  }
+
+  if ('replaceState' in history) {
+    history.replaceState(history.state, '', `${location.pathname}#${id}`)
+  } else {
+    location.hash = `#${id}`
+  }
+
+  if (el) {
+    setTimeout(() => {
+      el.id = id // Restore the ID
+    }, 300)
+  }
+
+  copyToClipboard(text)
+
+  Notify.create({
+    message: 'Anchor has been copied to clipboard.',
+    position: 'top',
+    actions: [{ icon: 'cancel', color: 'white', dense: true, round: true }],
+    timeout: 2000,
+  })
+}
+
+export { slugify }

package/src/templates/update/src/_q-press/composables/dark.ts

@@ -0,0 +1,39 @@
+import { useQuasar } from 'quasar'
+import { useMarkdownStore } from '../stores/markdown'
+import { computed, watch } from 'vue'
+
+export function useDark() {
+  const $q = useQuasar()
+  const markdownStore = useMarkdownStore()
+
+  const isDark = computed(() => markdownStore.dark)
+
+  function initDark() {
+    markdownStore.dark = $q.cookies.get('theme') !== 'light'
+    $q.dark.set(markdownStore.dark)
+  }
+
+  function toggleDark() {
+    $q.dark.toggle()
+    markdownStore.dark = $q.dark.isActive
+
+    $q.cookies.set('theme', markdownStore.dark ? 'dark' : 'light', {
+      path: '/',
+      sameSite: 'Strict',
+      expires: 400,
+    })
+  }
+
+  watch(
+    () => markdownStore.dark,
+    (val) => {
+      $q.dark.set(val)
+    },
+  )
+
+  return {
+    isDark,
+    initDark,
+    toggleDark,
+  }
+}

package/src/templates/update/src/_q-press/composables/scroll.ts

@@ -0,0 +1,115 @@
+import { scroll } from 'quasar'
+import { watch, onMounted, onBeforeUnmount } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useMarkdownStore } from '../stores/markdown'
+const { setVerticalScrollPosition, getVerticalScrollPosition } = scroll
+
+export function useScroll() {
+  let scrollTimer: ReturnType<typeof setTimeout> | undefined
+  const scrollDuration = 500
+  const route = useRoute()
+  const router = useRouter()
+  const markdownStore = useMarkdownStore()
+
+  let preventTocUpdate = route.hash.length > 1
+
+  // Watch for route changes
+  watch(
+    () => route.fullPath,
+    (newRoute, oldRoute) => {
+      setTimeout(() => {
+        scrollToCurrentAnchor(newRoute !== oldRoute)
+      })
+    },
+  )
+
+  function changeRouterHash(hash: string) {
+    if (route.hash !== hash) {
+      router.replace({ hash }).catch(() => {})
+    } else {
+      scrollToCurrentAnchor()
+    }
+  }
+
+  function scrollPage(el: HTMLElement, delay: number) {
+    const { top } = el.getBoundingClientRect()
+    const offset = Math.max(
+      0,
+      top + getVerticalScrollPosition(window) - 166, // TODO: dynamic header offset
+    )
+
+    clearTimeout(scrollTimer)
+
+    preventTocUpdate = true
+    setVerticalScrollPosition(window, offset, delay)
+
+    scrollTimer = setTimeout(() => {
+      preventTocUpdate = false
+    }, delay + 10)
+  }
+
+  function scrollTo(id: string) {
+    clearTimeout(scrollTimer)
+    changeRouterHash('#' + id)
+
+    setTimeout(() => {
+      markdownStore.setActiveToc(getVerticalScrollPosition(window))
+    }, scrollDuration + 50)
+  }
+
+  function onPageScroll({ position }: { position: number }) {
+    // @ts-expect-error Jeff - fix later when I can figure this one out
+    if (preventTocUpdate !== true && document.qScrollPrevented !== true) {
+      markdownStore.setActiveToc(position)
+    }
+  }
+
+  function scrollToCurrentAnchor(immediate?: boolean) {
+    const hash = location.hash
+    const el = hash.length > 1 ? document.getElementById(hash.substring(1)) : null
+
+    if (el !== null) {
+      if (immediate === true) {
+        let anchorEl: HTMLElement | null = el
+        while (
+          anchorEl?.parentElement !== null &&
+          !anchorEl.parentElement.classList.contains('q-page')
+        ) {
+          anchorEl = anchorEl.parentElement
+        }
+
+        if (anchorEl) {
+          document.body.classList.add('q-scroll--lock')
+          anchorEl.classList.add('q-scroll--anchor')
+
+          setTimeout(() => {
+            document.body.classList.remove('q-scroll--lock')
+            if (anchorEl) {
+              anchorEl.classList.remove('q-scroll--anchor')
+            }
+          }, 2000)
+        }
+      }
+
+      scrollPage(el, immediate === true ? 0 : scrollDuration)
+    } else {
+      preventTocUpdate = false
+      markdownStore.setActiveToc()
+    }
+  }
+
+  onMounted(() => {
+    setTimeout(() => {
+      scrollToCurrentAnchor(true)
+    })
+  })
+
+  onBeforeUnmount(() => {
+    clearTimeout(scrollTimer)
+  })
+
+  return {
+    scrollTo,
+    onPageScroll,
+  }
+}