Add prism!

package-lock.json

@@ -1859,6 +1859,17 @@
       "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==",
       "dev": true
     },
+    "clipboard": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
+      "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
+      "optional": true,
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "cliui": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
@@ -2608,6 +2619,12 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "optional": true
+    },
     "depd": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -4165,6 +4182,15 @@
         }
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "optional": true,
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "graceful-fs": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.3.tgz",
@@ -6407,6 +6433,14 @@
         "pretty-checkbox": "^3.0.3"
       }
     },
+    "prismjs": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.20.0.tgz",
+      "integrity": "sha512-AEDjSrVNkynnw6A+B1DsFkd6AVdTnp+/WoUixFRULlCLZVRZlVQMVWio/16jv7G1FscUxQxOQhWwApgbnxr6kQ==",
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -7427,6 +7461,12 @@
         "xmlchars": "^2.1.1"
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
+      "optional": true
+    },
     "semver": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -8071,6 +8111,12 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "optional": true
+    },
     "tiny-inflate": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz",
@@ -8564,6 +8610,11 @@
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog=="
     },
+    "vue-prism-component": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/vue-prism-component/-/vue-prism-component-1.2.0.tgz",
+      "integrity": "sha512-0N9CNuQu+36CJpdsZHrhdq7d18oBvjVMjawyKdIr8xuzFWLfdxECZQYbFaYoopPBg3SvkEEMtkhYqdgTQl5Y+A=="
+    },
     "vue-select": {
       "version": "3.10.3",
       "resolved": "https://registry.npmjs.org/vue-select/-/vue-select-3.10.3.tgz",

package.json

@@ -40,9 +40,11 @@
     "do-vue": "git+https://github.com/do-community/do-vue.git",
     "parcel-bundler": "^1.12.4",
     "pretty-checkbox-vue": "^1.1.9",
+    "prismjs": "^1.20.0",
     "qs": "^6.9.4",
     "vue": "^2.6.11",
     "vue-hot-reload-api": "^2.3.3",
+    "vue-prism-component": "^1.2.0",
     "vue-select": "^3.10.3",
     "vuex": "^3.3.0"
   },

src/nginxconfig/scss/style.scss

@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+@import url("https://assets.digitalocean.com/prism/prism.css");
+
 $header: #0071fe;
 $highlight: #f2c94c;
 @import "~do-bulma/src/style";
@@ -379,4 +381,32 @@ $highlight: #f2c94c;
       margin: 1rem 0;
     }
   }
+
+  pre {
+    &[class*="language-"] {
+      padding: .5rem 1rem;
+
+      code {
+        &[class*="language-"] {
+          .token {
+            font-weight: normal;
+
+            // Fix Bulma interfering with Prism
+            &.number,
+            &.tag {
+              background: transparent;
+              border-radius: initial;
+              color: inherit;
+              display: initial;
+              font-size: inherit;
+              margin: initial;
+              padding: initial;
+              text-align: initial;
+              vertical-align: initial;
+            }
+          }
+        }
+      }
+    }
+  }
 }

src/nginxconfig/templates/setup_sections/certbot.vue

@@ -5,8 +5,7 @@
                 <p>
                     Comment out SSL related directives in the configuration:
                     <br />
-                    <code class="slim">sed -i -r 's/(listen .*443)/\1;#/g;
+                    <Prism language="bash" :code="`sed -i -r 's/(listen .*443)/\\1;#/g; s/(ssl_(certificate|certificate_key|trusted_certificate) )/#;#\\1/g' ${sitesAvailable}`"></Prism>
-                        s/(ssl_(certificate|certificate_key|trusted_certificate) )/#;#\1/g' {{ sitesAvailable }}</code>
                 </p>
             </li>
 
@@ -14,17 +13,15 @@
                 <p>
                     Reload your NGINX server:
                     <br />
-                    <code class="slim">sudo nginx -t && sudo systemctl reload nginx</code>
+                    <Prism language="bash" code="sudo nginx -t && sudo systemctl reload nginx"></Prism>
                 </p>
             </li>
 
             <li>
                 <p>
                     Obtain SSL certificates from Let's Encrypt using Certbot:
-                    <template v-for="cmd in certbotCmds">
                     <br />
-                        <code class="slim">{{ cmd }}</code>
+                    <Prism language="bash" :code="certbotCmds"></Prism>
-                    </template>
                 </p>
             </li>
 
@@ -32,7 +29,7 @@
                 <p>
                     Uncomment SSL related directives in the configuration:
                     <br />
-                    <code class="slim">sed -i -r 's/#?;#//g' {{ sitesAvailable }}</code>
+                    <Prism language="bash" :code="`sed -i -r 's/#?;#//g' ${sitesAvailable}`"></Prism>
                 </p>
             </li>
 
@@ -40,7 +37,7 @@
                 <p>
                     Reload your NGINX server:
                     <br />
-                    <code class="slim">sudo nginx -t && sudo systemctl reload nginx</code>
+                    <Prism language="bash" code="sudo nginx -t && sudo systemctl reload nginx"></Prism>
                 </p>
             </li>
 
@@ -48,9 +45,9 @@
                 <p>
                     Configure Certbot to reload NGINX when it successfully renews certificates:
                     <br />
-                    <code class="slim">echo -e '#!/bin/bash\nnginx -t && systemctl reload nginx' | sudo tee /etc/letsencrypt/renewal-hooks/post/nginx-reload.sh</code>
+                    <Prism language="bash" code="echo -e '#!/bin/bash\nnginx -t && systemctl reload nginx' | sudo tee /etc/letsencrypt/renewal-hooks/post/nginx-reload.sh"></Prism>
                     <br />
-                    <code class="slim">sudo chmod a+x /etc/letsencrypt/renewal-hooks/post/nginx-reload.sh</code>
+                    <Prism language="bash" code="sudo chmod a+x /etc/letsencrypt/renewal-hooks/post/nginx-reload.sh"></Prism>
                 </p>
             </li>
         </ol>
@@ -70,12 +67,17 @@
 </template>
 
 <script>
+    import Prism from 'vue-prism-component';
+    import 'prismjs/components/prism-bash';
     import i18n from '../../i18n';
 
     export default {
         name: 'SetupCertbot',
         display: 'Certbot',
         key: 'certbot',
+        components: {
+            Prism,
+        },
         props: {
             data: Object,
         },
@@ -121,7 +123,7 @@
                             `-w ${this.letsEncryptDir}`,
                             '-n --agree-tos --force-renewal',
                         ].filter(x => x !== null).join(' ')
-                    ));
+                    )).join('\n');
             },
         },
     };

src/nginxconfig/templates/setup_sections/download.vue

@@ -17,7 +17,7 @@
                 <p>
                     Check that you have <b>unzip</b> installed, or install it, on your server by running this command:
                     <br />
-                    <code class="slim">(unzip -v >/dev/null 2>&1 && echo 'unzip already installed') || sudo apt-get install unzip</code>
+                    <Prism language="bash" code="(unzip -v >/dev/null 2>&1 && echo 'unzip already installed') || sudo apt-get install unzip"></Prism>
                 </p>
             </li>
 
@@ -25,7 +25,7 @@
                 <p>
                     Navigate to your NGINX <b>configuration directory</b> on your server:
                     <br />
-                    <code class="slim">cd {{ $parent.nginxDir }}</code>
+                    <Prism language="bash" :code="`cd ${$parent.nginxDir}`"></Prism>
                 </p>
             </li>
 
@@ -33,7 +33,7 @@
                 <p>
                     Create a <b>backup</b> of your current NGINX configuration:
                     <br />
-                    <code class="slim">tar -czvf nginx_$(date +'%F_%H-%M-%S').tar.gz nginx.conf sites-available/ sites-enabled/ nginxconfig.io/</code>
+                    <Prism language="bash" code="tar -czvf nginx_$(date +'%F_%H-%M-%S').tar.gz nginx.conf sites-available/ sites-enabled/ nginxconfig.io/"></Prism>
                 </p>
             </li>
 
@@ -41,7 +41,7 @@
                 <p>
                     <b>Unzip</b> the new compressed configuration archive:
                     <br />
-                    <code class="slim">unzip -o {{ $parent.zipName }}</code>
+                    <Prism language="bash" :code="`unzip -o ${$parent.nginxDir}`"></Prism>
                 </p>
             </li>
         </ol>
@@ -49,12 +49,17 @@
 </template>
 
 <script>
+    import Prism from 'vue-prism-component';
+    import 'prismjs/components/prism-bash';
     import i18n from '../../i18n';
 
     export default {
         name: 'SetupDownload',
         display: 'Download',
         key: 'download',
+        components: {
+            Prism,
+        },
         props: {
             data: Object,
         },

src/nginxconfig/templates/setup_sections/go_live.vue

@@ -6,18 +6,23 @@
         <p>
             Reload NGINX to load in your new configuration:
             <br />
-            <code class="slim">sudo nginx -t && sudo systemctl reload nginx</code>
+            <Prism language="bash" code="sudo nginx -t && sudo systemctl reload nginx"></Prism>
         </p>
     </div>
 </template>
 
 <script>
+    import Prism from 'vue-prism-component';
+    import 'prismjs/components/prism-bash';
     import i18n from '../../i18n';
 
     export default {
         name: 'SetupGoLive',
         display: 'Go live!',
         key: 'goLive',
+        components: {
+            Prism,
+        },
         props: {
             data: Object,
         },

src/nginxconfig/templates/setup_sections/ssl.vue

@@ -5,7 +5,7 @@
                 <p>
                     Generate <b>Diffie-Hellman keys</b> by running this command on your server:
                     <br />
-                    <code class="slim">openssl dhparam -out {{ nginxDir }}/dhparam.pem {{ diffieHellmanValue }}</code>
+                    <Prism language="bash" :code="`openssl dhparam -out ${nginxDir}/dhparam.pem ${diffieHellmanValue}`"></Prism>
                 </p>
             </li>
 
@@ -13,9 +13,9 @@
                 <p>
                     Create a common <b>ACME-challenge</b> directory (for <b>Let's Encrypt</b>):
                     <br />
-                    <code class="slim">mkdir -p {{ letsEncryptDir }}</code>
+                    <Prism language="bash" :code="`mkdir -p ${letsEncryptDir}`"></Prism>
                     <br />
-                    <code class="slim">chown {{ nginxUser }} {{ letsEncryptDir }}</code>
+                    <Prism language="bash" :code="`chown ${nginxUser} ${letsEncryptDir}`"></Prism>
                 </p>
             </li>
         </ol>
@@ -35,12 +35,17 @@
 </template>
 
 <script>
+    import Prism from 'vue-prism-component';
+    import 'prismjs/components/prism-bash';
     import i18n from '../../i18n';
 
     export default {
         name: 'SetupSSL',
         display: 'SSL init',
         key: 'ssl',
+        components: {
+            Prism,
+        },
         props: {
             data: Object,
         },