Merge pull request #2644 from preschian/add-contribute-and-first-time…

…-pages

globals.d.ts

@@ -0,0 +1 @@
+declare module '*.md'

nuxt.config.js

@@ -265,6 +265,12 @@ export default {
       '@polkadot/types-codec',
     ],
     extend: function (config) {
+      // add markdown loader
+      config.module.rules.push({
+        test: /\.md$/,
+        use: 'raw-loader',
+      })
+
       config.module.rules.push({
         test: /\.js$/,
         loader: require.resolve('@open-wc/webpack-import-meta-loader'),

package.json

@@ -80,6 +80,7 @@
     "date-fns": "^2.28.0",
     "emoji-unicode": "^2.0.1",
     "graphql": "^16.3.0",
+    "highlight.js": "^11.5.0",
     "idb-keyval": "^6.1.0",
     "lazysizes": "^5.3.2",
     "lodash": "^4.17.21",
@@ -133,6 +134,7 @@
     "lint-staged": "^12.3.7",
     "netlify-lambda": "^2.0.15",
     "prettier": "2.6.0",
+    "raw-loader": "^4.0.2",
     "sass": "^1.49.9",
     "sass-loader": "^10.2",
     "ts-loader": "8.3.0",

pages/contribute.vue

@@ -0,0 +1,32 @@
+<template>
+  <section class="content">
+    <VueMarkdown :source="content" :options="options" />
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+import highlight from '~/utils/highlight'
+
+import '@/styles/content-markdown.scss'
+
+import Contributing from '../CONTRIBUTING.md'
+
+@Component({
+  components: {
+    VueMarkdown: () => import('vue-markdown-render'),
+  },
+  data() {
+    return {
+      options: {
+        highlight,
+      },
+    }
+  },
+})
+export default class Contribute extends Vue {
+  get content() {
+    return Contributing
+  }
+}
+</script>

pages/first-time.vue

@@ -0,0 +1,32 @@
+<template>
+  <section class="content">
+    <VueMarkdown :source="content" :options="options" />
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+import highlight from '~/utils/highlight'
+
+import '@/styles/content-markdown.scss'
+
+import FirstTimeMD from '../FIRST_TIME.md'
+
+@Component({
+  components: {
+    VueMarkdown: () => import('vue-markdown-render'),
+  },
+  data() {
+    return {
+      options: {
+        highlight,
+      },
+    }
+  },
+})
+export default class FirstTime extends Vue {
+  get content() {
+    return FirstTimeMD
+  }
+}
+</script>

styles/content-markdown.scss

@@ -0,0 +1,10 @@
+@import '~/node_modules/highlight.js/styles/github-dark.css';
+
+.content {
+  pre,
+  blockquote {
+    background-color: black;
+    border-left: 5px solid #dbdbdb;
+    padding: 1.25em 1.5em;
+  }
+}

utils/highlight.ts

@@ -0,0 +1,14 @@
+import hljs from 'highlight.js'
+
+const highlight = function (str, lang) {
+  if (lang && hljs.getLanguage(lang)) {
+    try {
+      return hljs.highlight(str, { language: lang }).value
+    } catch (__) {
+      return ''
+    }
+  }
+  return ''
+}
+
+export default highlight

yarn.lock

@@ -9265,6 +9265,11 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+highlight.js@^11.5.0:
+  version "11.5.0"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.5.0.tgz#00abb7ed926491adbdabc93a4f3fd2b88b451b4a"
+  integrity sha512-SM6WDj5/C+VfIY8pZ6yW6Xa0Fm1tniYVYWYW1Q/DcMnISZFrC3aQAZZZFAAZtybKNrGId3p/DNbFTtcTXXgYBw==
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -13560,6 +13565,14 @@ raw-body@2.4.3:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+raw-loader@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
+  integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 rc9@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/rc9/-/rc9-1.2.0.tgz#ef098181fdde714efc4c426383d6e46c14b1254a"