add contributing and first_time pages

components/ContentMarkdown.vue

@@ -0,0 +1,35 @@
+<template>
+  <section class="content">
+    <Contributing v-if="type === 'contribute'" />
+    <FirstTime v-else />
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'nuxt-property-decorator'
+import Contributing from '../CONTRIBUTING.md'
+import FirstTime from '../FIRST_TIME.md'
+
+@Component({
+  components: {
+    Contributing,
+    FirstTime,
+  },
+})
+export default class Contribute extends Vue {
+  @Prop(String) public type!: 'contribute' | 'first_time'
+}
+</script>
+
+<style lang="scss">
+@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;
+  }
+}
+</style>

globals.d.ts

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

nuxt.config.js

@@ -1,3 +1,4 @@
+import hljs from 'highlight.js'
 import defineApolloConfig, {
   toApolloEndpoint,
 } from './utils/config/defineApolloConfig'
@@ -265,6 +266,32 @@ export default {
       '@polkadot/types-codec',
     ],
     extend: function (config) {
+      // add markdown loader
+      config.module.rules.push({
+        test: /\.md$/,
+        loaders: [
+          'vue-loader',
+          {
+            loader: 'vue-md-loader',
+            options: {
+              markdown: {
+                highlight: function (str, lang) {
+                  if (lang && hljs.getLanguage(lang)) {
+                    try {
+                      return hljs.highlight(str, { language: lang }).value
+                    } catch (__) {
+                      return ''
+                    }
+                  }
+
+                  return ''
+                },
+              },
+            },
+          },
+        ],
+      })
+
       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",
     "mingo": "^5.1.0",
@@ -137,6 +138,7 @@
     "sass-loader": "^10.2",
     "typescript": "^4.6.2",
     "vue-debounce-decorator": "^1.0.1",
+    "vue-md-loader": "1.1.10",
     "vue-template-compiler": "^2.6.14"
   }
 }

pages/contribute.vue

@@ -0,0 +1,14 @@
+<template>
+  <ContentMarkdown type="contribute" />
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+
+@Component({
+  components: {
+    ContentMarkdown: () => import('@/components/ContentMarkdown.vue'),
+  },
+})
+export default class Contribute extends Vue {}
+</script>

pages/first_time.vue

@@ -0,0 +1,14 @@
+<template>
+  <ContentMarkdown type="first_time" />
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+
+@Component({
+  components: {
+    ContentMarkdown: () => import('@/components/ContentMarkdown.vue'),
+  },
+})
+export default class Contribute extends Vue {}
+</script>

yarn.lock

@@ -9483,6 +9483,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.0.0, 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"
@@ -11596,7 +11601,7 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
-markdown-it@^12.2.0:
+markdown-it@^12.0.0, markdown-it@^12.2.0:
   version "12.3.2"
   resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.3.2.tgz#bf92ac92283fe983fe4de8ff8abfb5ad72cd0c90"
   integrity sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==
@@ -16541,6 +16546,15 @@ vue-markdown-render@^1.1.3:
     markdown-it "^12.2.0"
     vue "^2.6.14"
 
+vue-md-loader@1.1.10:
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/vue-md-loader/-/vue-md-loader-1.1.10.tgz#ab9a4990568d5f346c4d4b9cd8c020f0992de82e"
+  integrity sha512-oID1rdyL7pvC7utPUXGkz2wjnjjrsUnyAHjoYb3qcM6VumvjkJGZG88/CcJOLpguXev5Ofhz3gph0u1v6Kp2tA==
+  dependencies:
+    highlight.js "^11.0.0"
+    loader-utils "^2.0.0"
+    markdown-it "^12.0.0"
+
 vue-meta@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/vue-meta/-/vue-meta-2.4.0.tgz#a419fb4b4135ce965dab32ec641d1989c2ee4845"