chore(docs): updated enhancements

quasarframework · Sep 19, 2021 · 314e9b2 · 314e9b2
1 parent ccba6a4
commit 314e9b2
Show file tree

Hide file tree

Showing 13 changed files with 72 additions and 58 deletions.
diff --git a/docs/build/markdown.js b/docs/build/markdown.js
@@ -42,7 +42,7 @@ function highlight (str, lang) {
     const code = Prism.highlight(str, Prism.languages[ lang ], lang)
 
     return '<pre class="markdown--code">'
-      + `<code class="markdown--code__inner language-${ lang }">${ code }</code></pre>\n`
+      + `<code class="markdown--code__inner markdown--code__inner--prerendered language-${ lang }">${ code }</code></pre>\n`
   }
 
   return ''

diff --git a/docs/quasar.conf.js b/docs/quasar.conf.js
@@ -28,8 +28,7 @@ module.exports = configure(function (ctx) {
 
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
     css: [
-      'app.sass',
-      'Markdown.sass'
+      'app.sass'
     ],
 
     // https://github.com/quasarframework/quasar/tree/dev/extras

diff --git a/docs/src/components/DocsMenu.js b/docs/src/components/DocsMenu.js
@@ -8,7 +8,6 @@ import {
   Ripple
 } from 'quasar'
 
-// import { mdiArrowDownThinCircleOutline } from '@quasar/extras/mdi-v5'
 import { biCaretDown, biCaretDownFill } from '@quasar/extras/bootstrap-icons'
 import { h, ref, watch, onMounted, onBeforeUpdate, withDirectives } from 'vue'
 import { useRoute } from 'vue-router'

diff --git a/docs/src/components/MarkdownPage.vue b/docs/src/components/MarkdownPage.vue
@@ -6,51 +6,53 @@
       :nav="nav"
     />
 
-    <slot></slot>
-
-    <div v-if="related !== undefined" class="full-width">
-      <h5 class="q-ma-none">Related</h5>
-      <q-separator />
-      <div class="q-gutter-md flex flex-center q-mt-md markdown-page__related">
-        <router-link
-          v-for="link in related"
-          :key="link.category + link.path"
-          :to="link.path"
-          class="markdown-page__related--link markdown-page__related--bordered rounded-borders q-pa-md cursor-pointer column justify-center bg-grey-3"
-        >
-          <div class="row no-wrap items-center justify-center">
-            <div class="col">
-              <div class="markdown-page__nav--cat">{{ link.category || 'Docs' }}</div>
-              <div class="markdown-page__nav--name text-weight-bold">{{ link.name }}</div>
+    <div :class="$route.path !== '/' ? 'q-ma-xs' : ''">
+      <slot></slot>
+
+      <div v-if="related !== undefined" class="full-width">
+        <h5 class="q-ma-none q-mt-lg">Related</h5>
+        <q-separator />
+        <div class="q-gutter-md flex flex-center q-mt-md markdown-page__related">
+          <router-link
+            v-for="link in related"
+            :key="link.category + link.path"
+            :to="link.path"
+            class="markdown-page__related--link markdown-page__related--bordered rounded-borders q-pa-md cursor-pointer column justify-center bg-grey-3"
+          >
+            <div class="row no-wrap items-center justify-center">
+              <div class="col">
+                <div class="markdown-page__nav--cat">{{ link.category || 'Docs' }}</div>
+                <div class="markdown-page__nav--name text-weight-bold">{{ link.name }}</div>
+              </div>
+              <q-icon :name="biBoxArrowUpRight" class="q-ml-lg" />
             </div>
-            <q-icon :name="biBoxArrowUpRight" class="q-ml-lg" />
-          </div>
-        </router-link>
+          </router-link>
+        </div>
       </div>
-    </div>
 
 
-    <div class="markdown-page__footer">
-      <q-separator class="q-mb-lg" />
-      <div v-if="path && noEdit !== true">
-        <div class="full-width row justify-center items-center">
-          Found an error on this page or feel it could be improved?
-          <markdown-link
-            :to="'https://github.com/quasarframework/quasar-ui-qiconpicker/edit/next/docs/src/pages' + path + '.md'"
-          >
-            &nbsp; Edit this page on GitHub
-          </markdown-link>
+      <div class="markdown-page__footer">
+        <q-separator class="q-mb-lg" />
+        <div v-if="path && noEdit !== true">
+          <div class="full-width row justify-center items-center">
+            Found an error on this page or feel it could be improved?
+            <markdown-link
+              :to="'https://github.com/quasarframework/quasar-ui-qiconpicker/edit/next/docs/src/pages' + path + '.md'"
+            >
+              &nbsp; Edit this page on GitHub
+            </markdown-link>
+          </div>
         </div>
-      </div>
 
-      <markdown-footer />
+        <markdown-footer />
 
-      <div class="row justify-center">
-        <a href="https://www.netlify.com" target="_blank" noopener noreferrer class="row justify-center">
-          <img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" />
-        </a>
-      </div>
+        <div class="row justify-center">
+          <a href="https://www.netlify.com" target="_blank" noopener noreferrer class="row justify-center">
+            <img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" />
+          </a>
+        </div>
 
+      </div>
     </div>
     <div class="q-mb-md"></div>
   </div>

diff --git a/docs/src/components/page-parts/releases/PackageReleases.vue b/docs/src/components/page-parts/releases/PackageReleases.vue
@@ -38,13 +38,13 @@ import sanitize from './sanitize'
 import parseMdTable from './md-table-parser'
 
 export default {
-  props: [ 'active', 'releases' ],
+  props: [ 'latestVersion', 'releases' ],
 
   setup (props) {
     const search = ref('')
-    const selectedVersion = ref(props.active)
+    const selectedVersion = ref(props.latestVersion)
 
-    watch(() => props.active, val => {
+    watch(() => props.latestVersion, val => {
       selectedVersion.value = val
     })
 
@@ -75,7 +75,7 @@ export default {
         .replace(/# ([\S ]+)/g, '<div class="text-h4">$1</div>')
         .replace(/\*\*([\S ]*?)\*\*/g, '<strong>$1</strong>')
         .replace(/\*([\S ]*?)\*/g, '<em>$1</em>')
-        .replace(/```([\S]+)/g, '<code class="markdown--code__inner release__code">')
+        .replace(/```([\S]+)/g, '<code class="markdown--code__inner markdown--code__inner--prerendered release__code">')
         .replace(/```\n/g, '</code>')
         .replace(/\`(.*?)\`/g, '<code class="markdown--token">$1</code>')
         .replace(/#([\d]+)/g, '<a class="markdown-link" href="https://github.com/quasarframework/quasar-ui-qiconpicker/issues/$1" target="_blank">#$1</a>')
@@ -84,6 +84,7 @@ export default {
         .replace(/^ {2}[-*] ([\S .]+)$/gm, '<li class="q-pl-md">$1</li>')
         .replace(/^[-*] ([\S .]+)$/gm, '<li>$1</li>')
         .replace(/<\/li>[\s\n\r]*<li/g, '</li><li')
+        .replace(/\n/g, '<br>')
 
       return content.indexOf('| -') > -1
         ? parseMdTable(content)

diff --git a/...ge-parts/releases/QIconPickerReleases.vue → ...mponents/page-parts/releases/Releases.vue b/...ge-parts/releases/QIconPickerReleases.vue → ...mponents/page-parts/releases/Releases.vue
@@ -16,7 +16,7 @@
       <q-separator />
       <q-tab-panels v-model="currentPackage" animated class="packages-container">
         <q-tab-panel v-for="(packageReleases, packageName) in packages" :name="packageName" :key="packageName" class="q-pa-none">
-          <package-releases :active="latestVersions[packageName]" :releases="packageReleases" />
+          <package-releases :latest-version="latestVersions[packageName]" :releases="packageReleases" />
         </q-tab-panel>
       </q-tab-panels>
     </template>
@@ -32,7 +32,7 @@ import PackageReleases from './PackageReleases'
 const { extractDate, formatDate } = date
 
 export default {
-  name: 'QIconPickerReleases',
+  name: 'Releases',
 
   components: {
     PackageReleases

diff --git a/docs/src/css/app.sass b/docs/src/css/app.sass
@@ -1,7 +1,6 @@
 
-// @import 'quasar/src/css/variables.sass'
-@import './quasar.variables.sass'
-@import './Markdown.sass'
+@import 'quasar/src/css/variables.sass'
+@import 'markdown.sass'
 @import 'quasar-ui-example-viewer/src/index.sass'
 @import 'quasar-ui-json-api-viewer/src/index.sass'
 

diff --git a/docs/src/css/Markdown.sass → docs/src/css/markdown.sass b/docs/src/css/Markdown.sass → docs/src/css/markdown.sass
@@ -261,6 +261,10 @@
   &--code__inner
     margin: 0
     position: relative
+    font-size: 12px
+    color: $grey-10
+    background-color: $blue-grey-1
+    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace
     text-align: left
     white-space: pre
     word-spacing: normal
@@ -269,21 +273,28 @@
     line-height: 1.5
     tab-size: 4
     hyphens: none
-    border-radius: $generic-border-radius
-    background: $blue-grey-1
-    color: $grey-10
-
 
   &--code
     overflow: visible
     padding: 0
+    border-radius: $generic-border-radius
 
     &__inner
+      background-color: $grey-2
       max-height: inherit
       height: inherit
+      padding: 1em
       display: block
       overflow: auto
 
+      &--prerendered
+        border-width: 1px 4px
+        border-style: solid
+        border-color: $separator-color
+        border-left-color: $primary
+        border-right-color: $primary
+        border-radius: $generic-border-radius
+
   &--table
     border-color: $grey-4
     background: $grey-1

diff --git a/docs/src/pages/all-about-qiconpicker/installation-types.md b/docs/src/pages/all-about-qiconpicker/installation-types.md
@@ -125,7 +125,7 @@ import '@quasar/quasar-ui-qiconpicker/dist/icon-set/mdi-v4.umd.js'
 import '@quasar/quasar-ui-qiconpicker/dist/icon-set/mdi-v5.umd.js'
 import '@quasar/quasar-ui-qiconpicker/dist/icon-set/mdi-v6.umd.js'
 import '@quasar/quasar-ui-qiconpicker/dist/icon-set/themify.umd.js'
-import '@quasar/quasar-ui-qiconpicker/dist/icon-set/lineawesome.umd.js'
+import '@quasar/quasar-ui-qiconpicker/dist/icon-set/line-awesome.umd.js'
 import '@quasar/quasar-ui-qiconpicker/dist/icon-set/bootstrap-icons.umd.js'
 export default {
   name: 'App'
@@ -224,7 +224,7 @@ Choices are:
 7. material-icons.umd.js
 8. mdi-v4.umd.js
 9. mdi-v5.umd.js
-10. mdi-v5.umd.js
+10. mdi-v6.umd.js
 11. themify.umd.js
 12. line-awesome.umd.js
 13. bootstrap-icons.umd.js

diff --git a/docs/src/pages/all-about-qiconpicker/what-is-qiconpicker.md b/docs/src/pages/all-about-qiconpicker/what-is-qiconpicker.md
@@ -38,6 +38,7 @@ QIconPicker is an icon picker for your Quasar application. It allows you to have
   - mdi-v5
   - mdi-v6
   - fontawesome-v5
+  - line-awesome
   - eva-icons
   - themify
   - bootstrap-icons
diff --git a/docs/src/pages/latest-news/changelog.md b/docs/src/pages/latest-news/changelog.md
@@ -3,6 +3,6 @@ title: Changelog
 desc: The latest QIconPicker releases
 keys: latest-news
 components:
-  - releases/QIconPickerReleases
+  - releases/Releases
 ---
-<q-icon-picker-releases class="q-mt-sm"/>
+<releases class="q-mt-sm"/>
diff --git a/ui/README.md b/ui/README.md
@@ -87,6 +87,7 @@ You can do this by adding to your **App.vue** (or, any other appropriate) file:
 <script>
 import '@quasar/quasar-ui-qiconpicker/dist/icon-set/eva-icons.umd.js'
 import '@quasar/quasar-ui-qiconpicker/dist/icon-set/fontawesome-v5.umd.js'
+import '@quasar/quasar-ui-qiconpicker/dist/icon-set/line-awesome.umd.js'
 import '@quasar/quasar-ui-qiconpicker/dist/icon-set/ionicons-v4.umd.js'
 import '@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons-outlined.umd.js'
 import '@quasar/quasar-ui-qiconpicker/dist/icon-set/material-icons-round.umd.js'

diff --git a/ui/src/components/QIconPicker.json b/ui/src/components/QIconPicker.json
@@ -27,6 +27,7 @@
         "mdi-v5",
         "mdi-v6",
         "fontawesome-v5",
+        "line-awesome",
         "eva-icons",
         "themify",
         "bootstrap-icons"