instructions

assets/styles/app.scss

@@ -10,6 +10,7 @@
 @import 'components/status';
 @import 'components/fieldset';
 @import 'components/form';
+@import '~highlight.js/scss/vs2015.scss';
 
 .wrapper {
   display: flex;

assets/styles/components/_base.scss

@@ -10,6 +10,7 @@ $warning: #ff8a00;
 $black: #2c4538;
 $danger: #FF0658;
 $dark: #242424;
+$pre: #DCDCDC;
 $info: $primary-invert;
 $info-invert: $white;
 $custom-colors: ("black": ($black, $primary-invert));
@@ -159,6 +160,8 @@ $pagination-current-color: $primary-invert;
 $pagination-current-background-color: $primary;
 $pagination-current-border-color: $primary;
 
+$pre-background: #1E1E1E;
+
 .columns {
   @include from(576px) {
     &.is-small {

assets/styles/components/_ceremony.scss

@@ -25,6 +25,10 @@
         text-decoration: underline;
       }
     }
+
+    ul {
+      list-style: none;
+    }
   }
 
   .columns:not(:last-child) {

components/Navbar.vue

@@ -6,7 +6,7 @@
       </b-navbar-item>
     </template>
     <template slot="end">
-      <b-navbar-item href="#">
+      <b-navbar-item tag="router-link" to="/instructions">
         Instructions
       </b-navbar-item>
       <b-navbar-item href="#">

nuxt.config.js

@@ -72,7 +72,7 @@ module.exports = {
   /*
    ** Plugins to load before mounting the App
    */
-  plugins: [{ src: '~plugins/phase2', ssr: false }],
+  plugins: [{ src: '~plugins/phase2', ssr: false }, '~plugins/highlight'],
   /*
    ** Nuxt.js dev-modules
    */

package.json

@@ -29,7 +29,8 @@
     "nuxt-buefy": "^0.3.2",
     "oauth": "^0.9.15",
     "sequelize": "^5.21.3",
-    "twitter": "^1.7.1"
+    "twitter": "^1.7.1",
+    "vue-highlightjs": "^1.3.3"
   },
   "devDependencies": {
     "@nuxtjs/eslint-config": "^1.0.1",

pages/instructions.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="ceremony">
+    <h1 class="title is-size-1 is-size-2-mobile is-spaced">
+      Instructions
+    </h1>
+
+    <h2 class="subtitle">
+      for Rust:
+    </h2>
+    <figure class="highlight">
+      <pre v-highlightjs><code class="bash"># Install rust
+curl -sSf https://sh.rustup.rs | sh
+
+# Clone the repository with ceremony code
+git clone -b ceremony https://github.com/tornadocash/phase2-bn254
+cd phase2-bn254/phase2
+
+# Run the ceremony
+cargo run --release --bin tornado</code></pre>
+    </figure>
+
+    <h2 class="subtitle">
+      for Docker:
+    </h2>
+
+    <div class="content p">
+      <p>
+        Using this method you will download and compile ceremony source code from our git repo in a
+        stock Rust container. This is not a prebuilt container distribution.
+      </p>
+      <p>
+        First you need to install the docker on your system:
+      </p>
+      <ul>
+        <li>
+          <a
+            href="https://download.docker.com/win/stable/Docker%20Desktop%20Installer.exe"
+            target="_blank"
+          >
+            Download Docker for Windows</a
+          >
+        </li>
+        <li>
+          <a href="https://download.docker.com/mac/stable/Docker.dmg" target="_blank">
+            Download Docker for Mac</a
+          >
+        </li>
+      </ul>
+    </div>
+
+    <figure class="highlight">
+      <pre v-highlightjs><code class="bash"># Download dockerfile
+wget https://raw.githubusercontent.com/tornadocash/phase2-bn254/ceremony/Dockerfile
+
+# Build docker image
+docker build . -t ceremony
+
+# Run the ceremony
+docker run -ti ceremony</code></pre>
+    </figure>
+  </div>
+</template>

pages/make-contribution.vue

@@ -66,8 +66,9 @@
       </b-button>
     </div>
     <p class="p">
-      If you don’t trust binaries, we encorage you to follow this <a href="">instruction</a> to
-      contribute by compiling from source code. It is very easy!
+      If you don’t trust binaries, we encorage you to follow this
+      <router-link to="/instructions">instruction</router-link> to contribute by compiling from
+      source code. It is very easy!
     </p>
   </div>
 </template>

plugins/highlight.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VueHighlightJS from 'vue-highlightjs'
+
+Vue.use(VueHighlightJS)

yarn.lock

@@ -4448,6 +4448,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@*:
+  version "9.18.1"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.1.tgz#ed21aa001fe6252bb10a3d76d47573c6539fe13c"
+  integrity sha512-OrVKYz70LHsnCgmbXctv/bfuvntIKDz177h0Co37DQ5jamGZLVmoCVMtjMtNZY3X9DrCcKfklHPNeA0uPZhSJg==
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -9354,6 +9359,13 @@ vue-eslint-parser@^7.0.0:
     esquery "^1.0.1"
     lodash "^4.17.15"
 
+vue-highlightjs@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/vue-highlightjs/-/vue-highlightjs-1.3.3.tgz#29a0d57132fc1ce15cfa61e896918f5b718c5d52"
+  integrity sha1-KaDVcTL8HOFc+mHolpGPW3GMXVI=
+  dependencies:
+    highlight.js "*"
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"