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

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

@@ -0,0 +1,183 @@
+<template>
+  <form
+    ref="formRef"
+    method="post"
+    action="https://codepen.io/pen/define/"
+    target="_blank"
+    rel="noopener"
+    class="hidden"
+  >
+    <input v-if="active" type="hidden" name="data" :value="options" />
+  </form>
+</template>
+
+<script setup>
+import { Quasar } from 'quasar'
+import { ref, reactive, computed, nextTick } from 'vue'
+
+import { slugify } from '@md-plugins/shared'
+
+const cssResources = [
+  'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons',
+  `https://cdn.jsdelivr.net/npm/quasar@${Quasar.version}/dist/quasar.min.css`,
+].join(';')
+
+const jsResources = [
+  'https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js',
+  `https://cdn.jsdelivr.net/npm/quasar@${Quasar.version}/dist/quasar.umd.prod.js`,
+].join(';')
+
+const replace = (name) =>
+  function (_, p1) {
+    const parts = p1
+      .split(',')
+      .map((p) => p.trim())
+      .filter((p) => p.length > 0)
+      .reduce((acc, p) => {
+        acc.push(p)
+        return acc
+      }, [])
+
+    const text = []
+    if (parts.length > 0) {
+      text.push('const { ' + parts.join(', ') + ' } = ' + name)
+    }
+    return text.join('\n')
+  }
+
+const props = defineProps({ title: String })
+
+const active = ref(false)
+const formRef = ref(null)
+const def = reactive({ parts: {} })
+
+const css = computed(() => {
+  return (def.parts.Style || '').replace(/(<style.*?>|<\/style>)/g, '').trim()
+})
+
+const cssPreprocessor = computed(() => {
+  const lang = /<style.*lang=["'](.*)["'].*>/.exec(def.parts.Style || '')
+
+  return lang ? lang[1] : 'none'
+})
+
+const js = computed(() => {
+  const quasarImports = /import\s+{([^}'\n]+)}\s+from\s+'quasar'/g
+  const vueImports = /import\s+{([^}'\n]+)}\s+from\s+'vue'/g
+  const otherImports = /import ([^'\n]*) from ([^\n]*)/g
+  let component = /export default {([\s\S]*)}/g.exec(def.parts.Script || '')
+
+  component = ((component && component[1]) || '').trim()
+  if (component.length > 0) {
+    component = '\n  ' + component + '\n'
+  }
+
+  let script = /<script>([\s\S]*)export default {/g.exec(def.parts.Script || '')
+  script = ((script && script[1]) || '')
+    .replace(quasarImports, replace('Quasar'))
+    .replace(vueImports, replace('Vue'))
+    .replace(otherImports, '')
+    .trim()
+
+  script += script ? '\n\n' : ''
+  return (
+    script +
+    `const app = Vue.createApp({${component}})
+
+app.use(Quasar, { config: {} })
+app.mount('#q-app')
+`
+  )
+})
+
+const html = computed(() => {
+  return (def.parts.Template || '')
+    .replace(/(<template>|<\/template>$)/g, '')
+    .replace(/\n/g, '\n  ')
+    .replace(/([\w]+=")([^"]*?)(")/g, function (match, p1, p2, p3) {
+      return p1 + p2.replace(/>/g, '___TEMP_REPLACEMENT___') + p3
+    })
+    .replace(/<(q-[\w-]+|div)([^>]*?)\s*?([\n\r][\t ]+)?\/>/gs, '<$1$2$3></$1>')
+    .replace(
+      /(<template[^>]*>)(\s*?(?:[\n\r][\t ]+)?)<(thead|tbody|tfoot)/gs,
+      '$1$2<___PREVENT_TEMPLATE___$3',
+    )
+    .replace(/<(thead|tbody|tfoot)(.*?)[\n\r]?(\s*)<\/\1>/gs, function (match, p1, p2, p3) {
+      return (
+        '<template>\n' +
+        p3 +
+        '  <' +
+        p1 +
+        p2.split(/[\n\r]+/g).join('\n  ') +
+        '\n' +
+        p3 +
+        '  </' +
+        p1 +
+        '>\n' +
+        p3 +
+        '</template>'
+      )
+    })
+    .replace(/___PREVENT_TEMPLATE___/g, '')
+    .replace(/___TEMP_REPLACEMENT___/g, '>')
+    .replace(/^\s{2}/gm, '')
+    .trim()
+})
+
+const editors = computed(() => {
+  const flag = (html.value && 0b100) | (css.value && 0b010) | (js.value && 0b001)
+  return flag.toString(2)
+})
+
+const computedTitle = computed(() => {
+  return (
+    (typeof document !== 'undefined' ? document.title.split(' | ')[0] + ': ' : '') +
+    (props.title ? props.title + ' - ' : '') +
+    `Quasar v${Quasar.version}`
+  )
+})
+
+const slugifiedTitle = computed(() => {
+  return 'example--' + slugify(props.title)
+})
+
+const options = computed(() => {
+  const data = {
+    title: computedTitle.value,
+    html: `<!--
+Forked from:
+${location.origin + location.pathname}#${slugifiedTitle.value}
+-->
+<div id="q-app" style="min-height: 100vh;">
+${html.value}
+</div>`,
+    head: '',
+    html_pre_processor: 'none',
+    css: css.value,
+    css_pre_processor: cssPreprocessor.value,
+    css_external: cssResources,
+    js: js.value,
+    js_pre_processor: 'babel',
+    js_external: jsResources,
+    editors: editors.value,
+  }
+  return JSON.stringify(data)
+})
+
+function open(whichParts) {
+  def.parts = whichParts
+
+  if (active.value) {
+    formRef.value.submit()
+    return
+  }
+
+  active.value = true
+
+  nextTick(() => {
+    formRef.value.submit()
+  })
+}
+
+defineExpose({ open })
+</script>

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

@@ -0,0 +1,104 @@
+<template>
+  <div class="markdown-copy-btn">
+    <q-icon :name="mdiClipboardOutline" color="brand-primary" @click="copy" />
+
+    <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
+      <q-badge class="absolute header-badge" v-show="copied" label="Copied to clipboard" />
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { ref, getCurrentInstance } from 'vue'
+import { copyToClipboard } from './markdown-utils'
+import { mdiClipboardOutline } from '@quasar/extras/mdi-v7'
+
+const props = defineProps({
+  lang: String,
+})
+
+const { proxy } = getCurrentInstance()
+
+let timer
+const copied = ref(false)
+
+function copy() {
+  const target = proxy.$el.previousSibling
+
+  // We need to remove artifacts (like line numbers)
+  // before we copy the content.
+  // The markdown-code--copying class will do that for us
+  target.classList.add('markdown-code--copying')
+  let text = target.innerText
+  target.classList.remove('markdown-code--copying')
+
+  if (props.lang === 'bash') {
+    const bashStartRE = /^\$ /
+    text = text
+      .split('\n')
+      .map((line) => line.replace(bashStartRE, ''))
+      .join('\n')
+  }
+
+  copyToClipboard(text)
+    .then(() => {
+      copied.value = true
+      clearTimeout(timer)
+      timer = setTimeout(() => {
+        copied.value = false
+        timer = null
+      }, 2000)
+    })
+    .catch(() => {})
+}
+</script>
+
+<style lang="scss">
+.markdown-copy-btn {
+  position: absolute;
+  top: 8px;
+  right: 16px; // account for scrollbar
+
+  .q-icon {
+    cursor: pointer;
+    color: $brand-primary;
+    font-size: 20px;
+    padding: 4px;
+    border-radius: $generic-border-radius;
+    border: 1px solid $brand-primary;
+    opacity: 0;
+    transition: opacity 0.28s;
+  }
+
+  .q-badge {
+    top: 4px;
+    right: 34px;
+  }
+}
+
+body.body--light {
+  .markdown-copy-btn .q-icon {
+    background-color: $light-pill;
+
+    &:hover {
+      background-color: #fff;
+    }
+  }
+}
+
+body.body--dark {
+  .markdown-copy-btn .q-icon {
+    background-color: $dark-pill;
+
+    &:hover {
+      background-color: #000;
+    }
+  }
+}
+
+.markdown-copybtn-hover:hover {
+  .markdown-copy-btn .q-icon {
+    opacity: 1;
+  }
+}
+</style>

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

@@ -0,0 +1,221 @@
+<template>
+  <q-card class="markdown-example q-my-lg" flat bordered>
+    <div class="header-toolbar row items-center q-pr-sm">
+      <MarkdownCardTitle :title="props.title" prefix="example--" />
+
+      <q-space />
+
+      <div class="markdown-example__actions row no-wrap items-center">
+        <!-- <q-btn
+          class="header-btn"
+          dense
+          flat
+          round
+          :icon="mdiCompare"
+          @click="markdownStore.toggleDark"
+        >
+          <q-tooltip>Toggle dark mode</q-tooltip>
+        </q-btn> -->
+
+        <q-separator class="q-mx-xs" vertical inset />
+
+        <q-btn
+          v-if="props.noGithub !== true"
+          class="header-btn"
+          dense
+          flat
+          round
+          :icon="fabGithub"
+          @click="openGitHub"
+        >
+          <q-tooltip>View on GitHub</q-tooltip>
+        </q-btn>
+        <q-btn
+          class="header-btn q-ml-xs"
+          v-if="props.noEdit !== true"
+          dense
+          flat
+          round
+          :icon="fabCodepen"
+          @click="openCodepen"
+          :disable="isBusy"
+        >
+          <q-tooltip>Edit in Codepen</q-tooltip>
+        </q-btn>
+        <q-btn
+          class="header-btn q-ml-xs"
+          dense
+          flat
+          round
+          icon="code"
+          @click="toggleExpand"
+          :disable="isBusy"
+        >
+          <q-tooltip>View Source</q-tooltip>
+        </q-btn>
+      </div>
+    </div>
+
+    <q-slide-transition>
+      <div v-show="expanded">
+        <q-tabs
+          class="header-tabs"
+          v-model="currentTab"
+          align="left"
+          no-caps
+          active-color="brand-primary"
+          indicator-color="brand-primary"
+          dense
+          :breakpoint="0"
+        >
+          <q-tab v-for="tab in def.tabs" :key="`tab-${tab}`" :name="tab" class="header-btn">
+            {{ tab }}
+          </q-tab>
+        </q-tabs>
+
+        <q-separator />
+
+        <q-tab-panels class="text-grey-3 text-weight-regular" v-model="currentTab" animated>
+          <q-tab-panel class="q-pa-none" v-for="tab in def.tabs" :key="`pane-${tab}`" :name="tab">
+            <MarkdownCode lang="markup" :code="def.parts[tab]" max-height="70vh" />
+          </q-tab-panel>
+        </q-tab-panels>
+      </div>
+    </q-slide-transition>
+
+    <MarkdownCodepen v-if="!isBusy" ref="codepenRef" :title="props.title" />
+
+    <q-separator />
+
+    <div class="row overflow-hidden">
+      <q-linear-progress v-if="isBusy" color="brand-primary" indeterminate />
+      <component
+        class="col markdown-example__content markdown-example-typography"
+        v-else
+        :is="component"
+        :class="componentClass"
+      />
+    </div>
+  </q-card>
+</template>
+
+<script setup>
+import { computed, inject, markRaw, ref, reactive, onMounted } from 'vue'
+import { openURL } from 'quasar'
+
+import { fabGithub, fabCodepen } from '@quasar/extras/fontawesome-v6'
+// import { mdiCompare } from '@quasar/extras/mdi-v7'
+
+import MarkdownCode from './MarkdownCode.vue'
+import MarkdownCodepen from './MarkdownCodepen.vue'
+import MarkdownCardTitle from './MarkdownCardTitle.vue'
+
+const props = defineProps({
+  title: String,
+  file: String,
+  noEdit: Boolean, // no codepen edit
+  scrollable: Boolean,
+  overflow: Boolean,
+  noGithub: Boolean,
+})
+
+const examples = inject('_markdown_examples_')
+
+const codepenRef = ref(null)
+const isBusy = ref(true)
+
+const component = ref(null)
+const def = reactive({
+  tabs: [],
+  parts: {},
+})
+const currentTab = ref('Template')
+const expanded = ref(false)
+
+const componentClass = computed(() => {
+  return props.scrollable === true
+    ? 'markdown-example__content--scrollable scroll-y'
+    : props.overflow === true
+      ? 'overflow-auto'
+      : ''
+})
+
+function parseTemplate(target, template) {
+  const string = `(<${target}(.*)?>[\\w\\W]*<\\/${target}>)`,
+    regex = new RegExp(string, 'g'),
+    parsed = regex.exec(template) || []
+
+  return parsed[1] || ''
+}
+
+function parseComponent(comp) {
+  def.parts = {
+    Template: parseTemplate('template', comp),
+    Script: parseTemplate('script', comp),
+    Style: parseTemplate('style', comp),
+  }
+
+  const tabs = ['Template', 'Script', 'Style'].filter((type) => def.parts[type])
+
+  if (tabs.length > 1) {
+    def.parts.All = comp
+    tabs.push('All')
+  }
+
+  def.tabs = tabs
+}
+
+function openGitHub() {
+  openURL(
+    `https://github.com/quasarframework/quasar/tree/${process.env.DOCS_BRANCH}/docs/src/examples/${examples.name}/${props.file}.vue`,
+  )
+}
+
+function openCodepen() {
+  codepenRef.value.open(def.parts)
+}
+
+function toggleExpand() {
+  expanded.value = expanded.value === false
+}
+
+if (process.env.CLIENT) {
+  onMounted(() => {
+    examples.list.then((list) => {
+      component.value = markRaw(
+        process.env.DEV
+          ? list.code[`/src/examples/${examples.name}/${props.file}.vue`].default
+          : list[props.file],
+      )
+
+      parseComponent(
+        process.env.DEV
+          ? list.source[`/src/examples/${examples.name}/${props.file}.vue`]
+          : list[`Raw${props.file}`],
+      )
+
+      isBusy.value = false
+    })
+  })
+}
+</script>
+
+<style lang="scss">
+.markdown-example {
+  &__actions {
+    padding: 3px 0 3px 7px;
+  }
+
+  &__content {
+    position: relative;
+
+    // reset markdown style
+    font-weight: 400;
+    font-family: $font-family-examples;
+
+    &--scrollable {
+      height: 500px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,166 @@
+<template>
+  <q-card :id="id" class="markdown-installation q-my-xl" flat bordered>
+    <div class="header-toolbar row items-center">
+      <MarkdownCardTitle :title="props.title" />
+    </div>
+
+    <q-tabs
+      class="header-tabs"
+      v-model="currentTab"
+      align="left"
+      active-color="brand-primary"
+      indicator-color="brand-primary"
+      dense
+      :breakpoint="0"
+      shrink
+    >
+      <q-tab
+        v-for="tab in tabList"
+        :key="`installation-${tab}`"
+        :name="tab"
+        class="header-btn"
+        no-caps
+      >
+        {{ tab }}
+      </q-tab>
+    </q-tabs>
+
+    <q-separator />
+
+    <q-tab-panels v-model="currentTab" animated>
+      <q-tab-panel class="q-pa-none" name="Quasar CLI">
+        <MarkdownCode :code="QuasarCli" />
+      </q-tab-panel>
+
+      <q-tab-panel class="q-pa-none" name="Vite plugin / Vue CLI">
+        <MarkdownCode :code="ExternalCli" />
+      </q-tab-panel>
+
+      <q-tab-panel class="q-pa-none" name="UMD">
+        <MarkdownCode :code="UMD" />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-card>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+import MarkdownCode from './MarkdownCode.vue'
+import MarkdownCardTitle from './MarkdownCardTitle.vue'
+
+import { slugify } from '@md-plugins/shared'
+
+const props = defineProps({
+  components: [Array, String],
+  directives: [Array, String],
+  plugins: [Array, String],
+  config: String,
+  title: {
+    type: String,
+    default: 'Installation',
+  },
+})
+
+const tabList = ['Quasar CLI', 'Vite plugin / Vue CLI', 'UMD']
+const currentTab = ref('Quasar CLI')
+
+const id = computed(() => slugify(props.title))
+
+function nameAsString(name, indent, quotes = true) {
+  const wrapper = quotes ? (str) => `'${str}'` : (str) => str
+
+  return Array.isArray(name)
+    ? name.map(wrapper).join(',\n' + ''.padStart(indent, ' '))
+    : wrapper(name)
+}
+
+const quasarConf = computed(() => {
+  return props.config !== void 0
+    ? `${props.config}: /* look at QuasarConfOptions from the API card */`
+    : null
+})
+
+const QuasarCli = computed(() => {
+  if (props.plugins === void 0 && quasarConf.value === null) {
+    return `/*
+ * No installation step is necessary.
+ * It gets installed by default by @quasar/app-vite or @quasar/app-webpack.
+ */`
+  }
+
+  const parts = []
+
+  if (props.plugins !== void 0) {
+    parts.push(`plugins: [
+      ${nameAsString(props.plugins, 6)}
+    ]`)
+  }
+
+  if (quasarConf.value !== null) {
+    parts.push(`config: {
+      ${quasarConf.value}
+    }`)
+  }
+
+  return `// quasar.config file
+
+return {
+  framework: {
+    ${parts.join(',\n    ')}
+  }
+}`
+})
+
+const UMD = computed(() => {
+  const config =
+    quasarConf.value !== null
+      ? `
+
+// Optional;
+// Place the global quasarConfig Object in a script tag BEFORE your Quasar script tag
+app.use(Quasar, {
+  config: {
+    ${quasarConf.value}
+  }
+}`
+      : ''
+
+  const content = `/*
+ * No installation step is necessary.
+ * It gets installed by default.
+ */`
+
+  return content + config
+})
+
+const ExternalCli = computed(() => {
+  const types = []
+  const imports = ['Quasar']
+
+  ;['components', 'directives', 'plugins'].forEach((type) => {
+    if (props[type] !== void 0) {
+      imports.push(nameAsString(props[type], 2, false))
+      types.push(`${type}: {
+    ${nameAsString(props[type], 4, false)}
+  }`)
+    }
+  })
+
+  if (quasarConf.value !== null) {
+    types.push(`config: {
+    ${quasarConf.value}
+  }`)
+  }
+
+  return `// main.js
+
+import {
+  ${imports.join(',\n  ')}
+} from 'quasar'
+
+app.use(Quasar, {
+  ${types.join(',\n  ')}
+})`
+})
+</script>

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

@@ -0,0 +1,38 @@
+<template>
+  <router-link v-if="internal === true" v-bind="$attrs" class="markdown-link" :to="to">
+    <slot />
+  </router-link>
+  <a v-else v-bind="$attrs" class="markdown-link" :href="props.to" target="_blank" rel="noopener">
+    <slot />
+    <q-icon :name="mdiLaunch" />
+  </a>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { mdiLaunch } from '@quasar/extras/mdi-v6'
+
+const props = defineProps({ to: String })
+const internal = computed(
+  () => props.to.charAt(0) === '/' || props.to.charAt(0) === '.' || props.to.charAt(0) === '#',
+)
+</script>
+
+<style lang="scss">
+.markdown-link {
+  color: $brand-primary;
+  text-decoration: none;
+  border-bottom: 1px dotted currentColor;
+  outline: 0;
+  transition: color $header-quick-transition;
+
+  &:hover {
+    color: inherit !important;
+  }
+
+  .q-icon {
+    margin-top: -2px;
+    margin-left: 4px;
+  }
+}
+</style>