Template Codeblock with example for index.vue (#29)

* Replace runkit GIF with actual code on index.vue Sometimes the GIF will not load due to a slow or crappy connection. Syntax highlighting could be added at a later date. * Added syntax highlighting with vue highlightJS * Move scss to highlightjs.scss * Introduce better syntax highlighting. * Changed to monospace font
2020-11-16 13:28:33 +00:00 · 2020-11-16 13:28:33 +00:00 · ac65357c8a
commit ac65357c8a
parent 07c255f7f8
7 changed files with 173 additions and 14 deletions
--- a/assets/styles/global.scss
+++ b/assets/styles/global.scss
@ -104,9 +104,9 @@ input {
  }
 }

-
-
+@import "~assets/styles/highlightjs.scss";
@import "~assets/styles/layout.scss";
@import "~assets/styles/utils.scss";
@import "~assets/styles/components.scss";
@import "~assets/styles/normalize.scss";
+
--- a/assets/styles/highlightjs.scss
+++ b/assets/styles/highlightjs.scss
@ -0,0 +1,95 @@
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #F0F0F0
+}
+
+.hljs,
+.hljs-subst {
+  color: #444
+}
+
+.hljs-comment {
+  color: #888888
+}
+
+.hljs-keyword,
+.hljs-attribute,
+.hljs-selector-tag,
+.hljs-meta-keyword,
+.hljs-doctag,
+.hljs-name {
+  color: #f58300;
+  font-weight: bold
+}
+
+.hljs-type,
+.hljs-string,
+.hljs-number,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-quote,
+.hljs-template-tag,
+.hljs-deletion {
+  color: #06b800
+}
+
+.hljs-title,
+.hljs-section {
+  color: #008888;
+  font-weight: bold
+}
+
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #BC6060
+}
+
+.hljs-literal {
+  color: #78A960
+}
+
+.hljs-built_in,
+.hljs-bullet,
+.hljs-code,
+.hljs-addition {
+  color: #f58300
+}
+
+.hljs-meta {
+  color: #1f7199
+}
+
+.hljs-meta-string {
+  color: #4d99bf
+}
+
+.hljs-emphasis {
+  font-style: italic
+}
+
+.hljs-strong {
+  font-weight: bold
+}
+
+pre {
+  background-color: #222222;
+  padding: 1em 1em 1em 1em;
+  border-width: 5px;
+  border-radius: 2em;
+  border-color: var(--color-brand);
+
+  code {
+    line-height: 100%;
+    padding: 0.2em;
+    letter-spacing: -0.05em;
+    word-break: normal;
+    font-family: monospace;
+  }
+}
--- a/nuxt.config.js
+++ b/nuxt.config.js
@ -93,7 +93,11 @@ export default {
   ** Plugins to load before mounting the App
   ** https://nuxtjs.org/guide/plugins
   */
-  plugins: ['~/plugins/vue-tooltip.js', '~/plugins/vue-notification.js'],
+  plugins: [
+    '~/plugins/vue-tooltip.js',
+    '~/plugins/vue-notification.js',
+    '~/plugins/vue-syntax.js',
+  ],
  /*
   ** Auto import components
   ** See https://nuxtjs.org/api/configuration-components
--- a/package-lock.json
+++ b/package-lock.json
@ -3397,6 +3397,15 @@
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz",
      "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ=="
    },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
    "block-stream": {
      "version": "0.0.9",
      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
@ -6252,6 +6261,12 @@
        "schema-utils": "^2.5.0"
      }
    },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "optional": true
+    },
    "filesize": {
      "version": "3.6.1",
      "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.1.tgz",
@ -6965,6 +6980,11 @@
      "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
    },
+    "highlight.js": {
+      "version": "10.3.2",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.3.2.tgz",
+      "integrity": "sha512-3jRT7OUYsVsKvukNKZCtnvRcFyCJqSEIuIMsEybAXRiFSwpt65qjPd/Pr+UOdYt7WJlt+lj3+ypUsHiySBp/Jw=="
+    },
    "hmac-drbg": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@ -12788,6 +12808,14 @@
        }
      }
    },
+    "vue-highlightjs": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/vue-highlightjs/-/vue-highlightjs-1.3.3.tgz",
+      "integrity": "sha1-KaDVcTL8HOFc+mHolpGPW3GMXVI=",
+      "requires": {
+        "highlight.js": "*"
+      }
+    },
    "vue-hot-reload-api": {
      "version": "2.3.4",
      "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@ -13011,7 +13039,6 @@
          "version": "2.3.2",
          "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
          "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
-          "optional": true,
          "requires": {
            "arr-flatten": "^1.1.0",
            "array-unique": "^0.3.2",
@ -13029,7 +13056,6 @@
              "version": "2.0.1",
              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "optional": true,
              "requires": {
                "is-extendable": "^0.1.0"
              }
@ -13060,7 +13086,6 @@
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
          "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
-          "optional": true,
          "requires": {
            "extend-shallow": "^2.0.1",
            "is-number": "^3.0.0",
@ -13072,7 +13097,6 @@
              "version": "2.0.1",
              "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
              "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
-              "optional": true,
              "requires": {
                "is-extendable": "^0.1.0"
              }
@ -13085,6 +13109,7 @@
          "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
          "optional": true,
          "requires": {
+            "bindings": "^1.5.0",
            "nan": "^2.12.1"
          }
        },
@ -13122,7 +13147,6 @@
          "version": "3.0.0",
          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-          "optional": true,
          "requires": {
            "kind-of": "^3.0.2"
          },
@ -13131,7 +13155,6 @@
              "version": "3.2.2",
              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-              "optional": true,
              "requires": {
                "is-buffer": "^1.1.5"
              }
@ -13142,7 +13165,6 @@
          "version": "3.1.10",
          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
          "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
-          "optional": true,
          "requires": {
            "arr-diff": "^4.0.0",
            "array-unique": "^0.3.2",
@ -13188,8 +13210,7 @@
        "safe-buffer": {
          "version": "5.1.2",
          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-          "optional": true
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
        },
        "string_decoder": {
          "version": "1.1.1",
@ -13204,7 +13225,6 @@
          "version": "2.1.1",
          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
          "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
-          "optional": true,
          "requires": {
            "is-number": "^3.0.0",
            "repeat-string": "^1.6.1"
--- a/package.json
+++ b/package.json
@ -17,9 +17,11 @@
    "@nuxtjs/dayjs": "^1.2.0",
    "@nuxtjs/robots": "^2.4.2",
    "@nuxtjs/sitemap": "^2.4.0",
+    "highlight.js": "^10.3.2",
    "marked": "^1.2.0",
    "nuxt": "^2.14.7",
    "v-tooltip": "^2.0.3",
+    "vue-highlightjs": "^1.3.3",
    "vue-multiselect": "^2.1.6",
    "vue-notification": "^1.3.20",
    "xss": "^1.0.8"
--- a/pages/index.vue
+++ b/pages/index.vue
@ -147,7 +147,16 @@
        </p>
      </div>
      <div class="right hero-image">
-        <img src="~/assets/images/api.gif" alt="api" loading="lazy" />
+        <pre v-highlightjs>
+<code class="javascript">const fetch = require('node-fetch');
+fetch('https://api.modrinth.com/api/v1/mod').then(res => res.json()).then(data => {
+    console.log(data);
+    // hits: [Object {author: "mezz", author_url: "https://www.curseforge.com/members/17072262-mezz?username=mezz", …}, …]
+    // limit: 10
+    // offset: 0
+    /// total_hits: 19440
+});</code>
+        </pre>
      </div>
    </div>
  </div>
@ -283,6 +292,7 @@ export default {
    right: 0;
    z-index: -1;
    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
  }

  &:before {
--- a/plugins/vue-syntax.js
+++ b/plugins/vue-syntax.js
@ -0,0 +1,28 @@
+import Vue from 'vue'
+import hljs from 'highlight.js'
+
+Vue.directive('highlightjs', {
+  deep: true,
+  bind(el, binding) {
+    // on first bind, highlight all targets
+    const targets = el.querySelectorAll('code')
+    targets.forEach((target) => {
+      // if a value is directly assigned to the directive, use this
+      // instead of the element content.
+      if (binding.value) {
+        target.textContent = binding.value
+      }
+      hljs.highlightBlock(target)
+    })
+  },
+  componentUpdated(el, binding) {
+    // after an update, re-fill the content and then highlight
+    const targets = el.querySelectorAll('code')
+    targets.forEach((target) => {
+      if (binding.value) {
+        target.textContent = binding.value
+        hljs.highlightBlock(target)
+      }
+    })
+  },
+})