@md-plugins/quasar-app-extension-q-press 0.1.0-alpha.15 → 0.1.0-alpha.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@md-plugins/quasar-app-extension-q-press",
-  "version": "0.1.0-alpha.15",
+  "version": "0.1.0-alpha.17",
   "description": "QPress - The Ultimate Markdown Solution for Quasar Framework",
   "author": "hawkeye64 <galbraith64@gmail.com>",
   "keywords": [
@@ -29,19 +29,19 @@
   "dependencies": {
     "@types/markdown-it": "^14.1.2",
     "markdown-it": "^14.1.0",
-    "@md-plugins/md-plugin-containers": "0.1.0-alpha.15",
-    "@md-plugins/md-plugin-blockquote": "0.1.0-alpha.15",
-    "@md-plugins/md-plugin-frontmatter": "0.1.0-alpha.15",
-    "@md-plugins/md-plugin-headers": "0.1.0-alpha.15",
-    "@md-plugins/md-plugin-imports": "0.1.0-alpha.15",
-    "@md-plugins/md-plugin-image": "0.1.0-alpha.15",
-    "@md-plugins/md-plugin-inlinecode": "0.1.0-alpha.15",
-    "@md-plugins/md-plugin-table": "0.1.0-alpha.15",
-    "@md-plugins/md-plugin-link": "0.1.0-alpha.15",
-    "@md-plugins/md-plugin-title": "0.1.0-alpha.15",
-    "@md-plugins/shared": "0.1.0-alpha.15",
-    "@md-plugins/md-plugin-codeblocks": "0.1.0-alpha.15",
-    "@md-plugins/vite-md-plugin": "0.1.0-alpha.15"
+    "@md-plugins/md-plugin-blockquote": "0.1.0-alpha.17",
+    "@md-plugins/md-plugin-containers": "0.1.0-alpha.17",
+    "@md-plugins/md-plugin-codeblocks": "0.1.0-alpha.17",
+    "@md-plugins/md-plugin-image": "0.1.0-alpha.17",
+    "@md-plugins/md-plugin-frontmatter": "0.1.0-alpha.17",
+    "@md-plugins/md-plugin-headers": "0.1.0-alpha.17",
+    "@md-plugins/md-plugin-imports": "0.1.0-alpha.17",
+    "@md-plugins/md-plugin-inlinecode": "0.1.0-alpha.17",
+    "@md-plugins/md-plugin-link": "0.1.0-alpha.17",
+    "@md-plugins/md-plugin-table": "0.1.0-alpha.17",
+    "@md-plugins/md-plugin-title": "0.1.0-alpha.17",
+    "@md-plugins/shared": "0.1.0-alpha.17",
+    "@md-plugins/vite-md-plugin": "0.1.0-alpha.17"
   },
   "devDependencies": {
     "@types/markdown-it": "^14.1.2",

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

@@ -110,6 +110,8 @@ import MarkdownCode from './MarkdownCode.vue'
 import MarkdownCodepen from './MarkdownCodepen.vue'
 import MarkdownCardTitle from './MarkdownCardTitle.vue'
 
+import siteConfig from '../../siteConfig'
+
 const props = defineProps({
   title: String,
   file: String,
@@ -167,7 +169,7 @@ function parseComponent(comp) {
 
 function openGitHub() {
   openURL(
-    `https://github.com/quasarframework/quasar/tree/${process.env.DOCS_BRANCH}/docs/src/examples/${examples.name}/${props.file}.vue`,
+    `${siteConfig.githubEditRootSrc}/examples/${examples.name}/${props.file}.vue`,
   )
 }
 

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

@@ -136,7 +136,7 @@ if (props.toc !== void 0) {
   markdownStore.setToc(props.toc)
 }
 
-const editHref = computed(() => `${siteConfig.githubEditRoot}${props.editLink}.md`)
+const editHref = computed(() => `${siteConfig.githubEditRootSrc}/markdown/${props.editLink}.md`)
 
 const isFullscreen = computed(() => route.meta.fullscreen === true || props.fullscreen)
 

package/src/templates/init/src/markdown/other/release-notes.md

@@ -4,9 +4,3 @@ desc: The changelog for MD-Plugins packages.
 ---
 
 Release notes (with changelog) for MD-Plugins packages are available on [GitHub Releases](https://github.com/md-plugins/md-plugins/releases).
-
-<!-- <script import>
-import PublicReleases from 'components/Releases/PublicReleases.vue'
-</script>
-
-<PublicReleases /> -->

package/src/templates/init/src/markdown/quasar-app-extensions/qpress/overview.md

@@ -68,6 +68,16 @@ pnpm i prismjs
 
 ## Configuration
 
+### Modify `tsconfig.json`
+
+Add the `resolveJsonModule: true` to your `tsconfig.json` file in your route folder:
+
+```json
+  "compilerOptions": {
+    "resolveJsonModule": true
+  }
+```
+
 ### Modify `src/css/quasar.variables.scss`
 
 Import a Q-Press theme (`default`, `sunrise`, `newspaper`, `tawny`, `mystic`, your own or a 3rd-party theme):
@@ -210,6 +220,16 @@ Update your `App.vue`:
 
 :::
 
+:::details Q. I see linting issues regarding `any`, what should I do?
+
+**A.** In your `eslint.config.js` file, add/replace the following in your rules:
+
+```js
+'@typescript-eslint/no-explicit-any': 'off',
+```
+
+:::
+
 :::details Q. Every time I save a markdown file, `prettier` changes it so that it breaks. How can I prevent this?
 
 **A.** This is both a `prettier` and `eslint` issue. In `eslint.config.js`, add the following to the top of the file, right after `export default [`:

package/src/templates/init/src/siteConfig/index.ts

@@ -77,7 +77,7 @@ export interface SiteConfig {
   theme: string
   version: string
   copyright: CopyrightConfig
-  githubEditRoot: string
+  githubEditRootSrc: string // src folder for github edit links (appended with 'markdown' and 'examples')
   license: LicenseConfig
   privacy: PrivacyConfig
   logoConfig: LogoConfig
@@ -385,7 +385,7 @@ const config = {
     line1: `Copyright © 2024-${new Date().getFullYear()} MD-PLUGINS`,
     line2: '',
   } as CopyrightConfig,
-  githubEditRoot: 'https://github.com/md-plugins/md-plugins/edit/dev/packages/docs/src/markdown/',
+  githubEditRootSrc: 'https://github.com/md-plugins/md-plugins/edit/dev/packages/docs/src/',
   license: {
     label: 'MIT License',
     link: 'https://github.com/md-plugins/md-plugins/blob/dev/LICENSE.md',

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

@@ -110,6 +110,8 @@ import MarkdownCode from './MarkdownCode.vue'
 import MarkdownCodepen from './MarkdownCodepen.vue'
 import MarkdownCardTitle from './MarkdownCardTitle.vue'
 
+import siteConfig from '../../siteConfig'
+
 const props = defineProps({
   title: String,
   file: String,
@@ -167,7 +169,7 @@ function parseComponent(comp) {
 
 function openGitHub() {
   openURL(
-    `https://github.com/quasarframework/quasar/tree/${process.env.DOCS_BRANCH}/docs/src/examples/${examples.name}/${props.file}.vue`,
+    `${siteConfig.githubEditRootSrc}/examples/${examples.name}/${props.file}.vue`,
   )
 }
 

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

@@ -136,7 +136,7 @@ if (props.toc !== void 0) {
   markdownStore.setToc(props.toc)
 }
 
-const editHref = computed(() => `${siteConfig.githubEditRoot}${props.editLink}.md`)
+const editHref = computed(() => `${siteConfig.githubEditRootSrc}/markdown/${props.editLink}.md`)
 
 const isFullscreen = computed(() => route.meta.fullscreen === true || props.fullscreen)
 

package/src/templates/init/src/components/Releases/PackageReleases.vue

@@ -1,164 +0,0 @@
-<template>
-  <div>
-    <q-input class="header-toolbar q-px-md" v-model="search" dense square borderless color="white" placeholder="Search..." clearable>
-      <template #prepend>
-        <q-icon :name="mdiMagnify" />
-      </template>
-    </q-input>
-
-    <q-separator />
-
-    <q-splitter class="release__splitter" :model-value="20" :limits="[14, 90]">
-      <template #before>
-        <q-scroll-area>
-          <q-tabs class="header-tabs" vertical v-model="selectedVersion" active-color="brand-primary" indicator-color="brand-primary">
-            <q-tab v-for="releaseInfo in filteredReleases" class="header-btn" :key="releaseInfo.version" :name="releaseInfo.version" no-caps>
-              <div class="release__tab-label q-pt-xs">{{ releaseInfo.version }}</div>
-              <div class="release__tab-date q-pb-xs">{{ releaseInfo.date }}</div>
-            </q-tab>
-          </q-tabs>
-        </q-scroll-area>
-      </template>
-
-      <template #after>
-        <q-tab-panels class="releases-container" v-model="selectedVersion" animated transition-prev="slide-down" transition-next="slide-up">
-          <q-tab-panel class="q-pa-none" v-for="releaseInfo in filteredReleases" :key="releaseInfo.version" :name="releaseInfo.version">
-            <q-scroll-area>
-              <div class="release__body q-pa-md" v-html="currentReleaseBody" />
-            </q-scroll-area>
-          </q-tab-panel>
-        </q-tab-panels>
-      </template>
-    </q-splitter>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import { mdiMagnify } from '@quasar/extras/mdi-v6'
-
-interface Release {
-  version: string
-  body: string
-  date: string
-  label: string
-}
-
-const props = defineProps<{ releases: Release[] }>()
-
-const search = ref('')
-const selectedVersion = ref(getLatestVersion())
-
-watch(
-  () => props.releases,
-  () => { selectedVersion.value = getLatestVersion() }
-)
-
-function getLatestVersion (): string {
-  return props.releases && props.releases.length > 0 ? props.releases[0]!.version : 'unknown'
-}
-
-const filteredReleases = computed(() => {
-  if (search.value) {
-    const val = search.value.toLowerCase()
-    return props.releases.filter(release => (
-      release.version.indexOf(val) !== -1 ||
-      release.body.toLowerCase().indexOf(val) !== -1
-    ))
-  }
-
-  return props.releases
-})
-
-const currentReleaseBody = computed(() => {
-  const release = props.releases.find(r => r.version === selectedVersion.value)
-  return release ? release.body : ''
-})
-</script>
-
-<style lang="scss">
-.release__splitter .q-scrollarea {
-  height: 600px;
-}
-
-.release__tab-label {
-  font-size: $font-size;
-  font-weight: 700;
-  line-height: ($font-size + 3px);
-}
-
-.release__tab-date {
-  font-size: ($font-size - 3px);
-  line-height: ($font-size + 3px);
-}
-
-.release__body {
-  h1, h2, h3, h4, h5, h6 {
-    padding: 0;
-    margin: .7em 0 .5em;
-    line-height: 1.1em;
-    color: $brand-primary;
-
-    &:first-child {
-      margin-top: 0;
-    }
-  }
-
-  h1 {
-    font-size: ($font-size + 18px);
-  }
-
-  h2 {
-    font-size: ($font-size + 14px);
-  }
-
-  h3 {
-    font-size: ($font-size + 10px);
-  }
-
-  h4 {
-    font-size: ($font-size + 6px);
-  }
-
-  h5 {
-    font-size: ($font-size + 4px);
-  }
-
-  h6 {
-    font-size: ($font-size + 2px);
-  }
-
-  table {
-    white-space: normal;
-    border: 1px solid $separator-color;
-    border-radius: $generic-border-radius;
-    width: 100%;
-    max-width: 100%;
-    border-collapse: separate;
-    border-spacing: 0;
-
-    th, td {
-      text-align: left;
-      padding: 8px 16px;
-    }
-
-    th {
-      font-weight: 700;
-      letter-spacing: $letter-spacing-brand;
-      border-bottom: 1px solid $separator-color;
-    }
-
-    tr:not(:first-child) td {
-      border-top: 1px solid $separator-color;
-    }
-  }
-}
-
-body.body--dark .release__body {
-  table {
-    &, th, tr:not(:first-child) td {
-      border-color: $separator-dark-color;
-    }
-  }
-}
-</style>

package/src/templates/init/src/components/Releases/PublicReleases.vue

@@ -1,149 +0,0 @@
-<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
-            v-if="String(latestVersions[packageName]) && packageReleases.length > 0"
-            :latest-version="String(latestVersions[packageName])"
-            :releases="packageReleases"
-          />
-        </q-tab-panel>
-      </q-tab-panels>
-    </template>
-  </q-card>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { date } from 'quasar'
-
-import PackageReleases from './PackageReleases.vue'
-
-const { extractDate, formatDate } = date
-
-// Types
-interface ReleaseInfo {
-  version: string
-  date: string
-  body: string
-  label: string
-}
-
-interface PackageReleasesMap {
-  [key: string]: ReleaseInfo[]
-}
-
-// Reactive state
-const packages = ref<PackageReleasesMap>({
-  'MD-Plugins': [],
-})
-const loading = ref<boolean>(false)
-const error = ref<boolean>(false)
-const currentPackage = ref<string>('MD-Plugins')
-const latestVersions = ref<Record<string, string>>({})
-
-function queryReleases(page = 1): void {
-  loading.value = true
-  error.value = false
-
-  const xhr = new XMLHttpRequest()
-
-  xhr.addEventListener('load', function () {
-    const releases = JSON.parse(this.responseText)
-
-    if (!releases || releases.length === 0) {
-      error.value = true
-      return
-    }
-
-    error.value = false
-    let stopQuery = true
-
-    for (const release of releases) {
-      const [name, version] = release.name.split('v')
-
-      if (name.startsWith('@quasar')) {
-        continue
-      }
-
-      const packageName = currentPackage.value
-
-      if (!version) {
-        stopQuery = true
-        continue
-      }
-
-      if (!packages.value[packageName]) {
-        packages.value[packageName] = []
-      }
-
-      const releaseInfo: ReleaseInfo = {
-        version,
-        date: formatDate(extractDate(release.published_at, 'YYYY-MM-DD'), 'YYYY-MM-DD'),
-        body: release.body,
-        label: version,
-      }
-
-      packages.value[packageName].push(releaseInfo)
-
-      if (!latestVersions.value[packageName]) {
-        latestVersions.value[packageName] = releaseInfo.label
-      }
-    }
-
-    if (!stopQuery) {
-      queryReleases(page + 1)
-    }
-
-    if (packages.value['MD-Plugins']) {
-      packages.value['MD-Plugins'].sort((a, b) => {
-        return parseInt(b.date.replace(/-/g, ''), 10) - parseInt(a.date.replace(/-/g, ''), 10)
-      })
-    }
-
-    loading.value = false
-    console.log('Packages:', packages.value)
-    console.log('Latest versions:', latestVersions.value)
-  })
-
-  xhr.addEventListener('error', () => {
-    error.value = true
-  })
-
-  xhr.open(
-    'GET',
-    `https://api.github.com/repos/md-plugins/md-plugins/releases?page=${page}&per_page=100`,
-  )
-  xhr.send()
-}
-
-onMounted(() => {
-  queryReleases()
-})
-</script>
-
-<style lang="scss">
-.packages-container {
-  .q-tab-panel {
-    padding-right: 0;
-    padding-top: 0;
-  }
-}
-</style>

package/src/templates/init/src/components/Releases/ReleasesAvailable.vue

@@ -1,74 +0,0 @@
-<template>
-  <q-card flat bordered>
-    <q-card-section class="row no-wrap items-center" v-if="error">
-      <q-icon class="q-mr-md" name="warning" size="24px" color="negative" />
-      <div>Cannot fetch the release notes. Please use the links above instead.</div>
-    </q-card-section>
-
-    <q-card-section class="row no-wrap items-center" v-else-if="loading">
-      <q-spinner class="q-mr-md" size="24px" color="brand-primary" />
-      <div>Loading release notes...</div>
-    </q-card-section>
-
-    <template v-else>
-      <q-tabs class="header-tabs" v-model="currentPackage" no-caps align="left" active-color="brand-primary" indicator-color="brand-primary">
-        <q-tab v-for="packageName in packageList" class="header-btn" :name="packageName" :key="packageName">
-          {{ packageName }}
-        </q-tab>
-      </q-tabs>
-
-      <q-separator />
-
-      <q-tab-panels class="packages-container" v-model="currentPackage" animated>
-        <q-tab-panel class="q-pa-none" v-for="(packageReleases, packageName) in packages" :key="packageName" :name="packageName">
-          <PackageReleases :releases="packageReleases" />
-        </q-tab-panel>
-      </q-tab-panels>
-    </template>
-  </q-card>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { date } from 'quasar'
-
-import PackageReleases from './PackageReleases.vue'
-
-const { extractDate } = date
-
-const loading = ref(true)
-const error = ref(false)
-
-const currentPackage = ref('quasar')
-const packages = ref({})
-const packageList = ref([])
-
-function queryReleases () {
-  fetch('https://cdn.quasar.dev/release-notes/v2.json')
-    .then(response => response.json())
-    .then(data => {
-      const list = Object.keys(data)
-
-      for (const packageName of list) {
-        const target = data[ packageName ]
-        target.forEach(entry => {
-          entry.date = extractDate(entry.date, 'YYYY-MM-DD').toLocaleDateString()
-        })
-      }
-
-      packages.value = data
-      packageList.value = list
-
-      loading.value = false
-    })
-    .catch(err => {
-      console.error(err)
-      error.value = true
-    })
-}
-
-onMounted(() => { queryReleases() })
-</script>
-
-<style lang="sass">
-</style>