From ac65357c8a86ce41139c2e119cdb84d1d7110f8e Mon Sep 17 00:00:00 2001 From: diabolical17 Date: Mon, 16 Nov 2020 13:28:33 +0000 Subject: [PATCH] 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 --- assets/styles/global.scss | 4 +- assets/styles/highlightjs.scss | 95 ++++++++++++++++++++++++++++++++++ nuxt.config.js | 6 ++- package-lock.json | 40 ++++++++++---- package.json | 2 + pages/index.vue | 12 ++++- plugins/vue-syntax.js | 28 ++++++++++ 7 files changed, 173 insertions(+), 14 deletions(-) create mode 100644 assets/styles/highlightjs.scss create mode 100644 plugins/vue-syntax.js diff --git a/assets/styles/global.scss b/assets/styles/global.scss index 0c687393f..3f61b89f3 100644 --- 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"; + diff --git a/assets/styles/highlightjs.scss b/assets/styles/highlightjs.scss new file mode 100644 index 000000000..ab928481e --- /dev/null +++ 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; + } +} diff --git a/nuxt.config.js b/nuxt.config.js index 00117efc9..16182d25d 100644 --- 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 diff --git a/package-lock.json b/package-lock.json index 6c493fd1c..3e20b06e2 100644 --- 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" diff --git a/package.json b/package.json index 014bd5c4d..a945e5cc5 100644 --- 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" diff --git a/pages/index.vue b/pages/index.vue index 1d06b29b1..a9105ef76 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -147,7 +147,16 @@

- api + 
+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
+});
+
@@ -283,6 +292,7 @@ export default { right: 0; z-index: -1; -webkit-backface-visibility: hidden; + backface-visibility: hidden; } &:before { diff --git a/plugins/vue-syntax.js b/plugins/vue-syntax.js new file mode 100644 index 000000000..dcf398090 --- /dev/null +++ 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) + } + }) + }, +})