Use the same thing for all the other setup sections

package-lock.json

@@ -8874,11 +8874,6 @@
       "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

@@ -51,7 +51,6 @@
     "tar-stream": "^2.1.2",
     "vue": "^2.6.11",
     "vue-hot-reload-api": "^2.3.3",
-    "vue-prism-component": "^1.2.0",
     "vue-select": "^3.10.3"
   },
   "devDependencies": {

src/nginxconfig/templates/setup_sections/certbot.vue

@@ -16,7 +16,7 @@
                     Reload your NGINX server:
                     <br />
                 </p>
-                <BashPrism :cmd="'sudo nginx -t && sudo systemctl reload nginx'"></BashPrism>
+                <BashPrism cmd="sudo nginx -t && sudo systemctl reload nginx"></BashPrism>
             </li>
 
             <li>
@@ -40,7 +40,7 @@
                     Reload your NGINX server:
                     <br />
                 </p>
-                <BashPrism :cmd="'sudo nginx -t && sudo systemctl reload nginx'"></BashPrism>
+                <BashPrism cmd="sudo nginx -t && sudo systemctl reload nginx"></BashPrism>
             </li>
 
             <li>
@@ -48,9 +48,8 @@
                     Configure Certbot to reload NGINX when it successfully renews certificates:
                     <br />
                 </p>
-                <BashPrism :cmd="'echo -e \'#!/bin/bash\\nnginx -t && systemctl reload nginx\' | sudo tee /etc/letsencrypt/renewal-hooks/post/nginx-reload.sh'"></BashPrism>
+                <BashPrism cmd="echo -e '#!/bin/bash\nnginx -t && systemctl reload nginx' | sudo tee /etc/letsencrypt/renewal-hooks/post/nginx-reload.sh"></BashPrism>
-                <br />
+                <BashPrism cmd="sudo chmod a+x /etc/letsencrypt/renewal-hooks/post/nginx-reload.sh"></BashPrism>
-                <BashPrism :cmd="'sudo chmod a+x /etc/letsencrypt/renewal-hooks/post/nginx-reload.sh'"></BashPrism>
             </li>
         </ol>
 

src/nginxconfig/templates/setup_sections/download.vue

@@ -17,7 +17,7 @@
                 <p>
                     Navigate to your NGINX <b>configuration directory</b> on your server:
                     <br />
-                    <Prism language="bash" :code="`cd ${$parent.nginxDir}`"></Prism>
+                    <BashPrism :key="$parent.nginxDir" :cmd="`cd ${$parent.nginxDir}`"></BashPrism>
                 </p>
             </li>
 
@@ -25,7 +25,7 @@
                 <p>
                     Create a <b>backup</b> of your current NGINX configuration:
                     <br />
-                    <Prism language="bash" code="tar -czvf nginx_$(date +'%F_%H-%M-%S').tar.gz nginx.conf sites-available/ sites-enabled/ nginxconfig.io/"></Prism>
+                    <BashPrism cmd="tar -czvf nginx_$(date +'%F_%H-%M-%S').tar.gz nginx.conf sites-available/ sites-enabled/ nginxconfig.io/"></BashPrism>
                 </p>
             </li>
 
@@ -33,7 +33,7 @@
                 <p>
                     <b>Extract</b> the new compressed configuration archive using tar:
                     <br />
-                    <Prism language="bash" :code="`tar -xzvf ${$parent.tarName}`"></Prism>
+                    <BashPrism :key="$parent.tarName" :cmd="`tar -xzvf ${$parent.tarName}`"></BashPrism>
                 </p>
             </li>
         </ol>
@@ -41,16 +41,15 @@
 </template>
 
 <script>
-    import Prism from 'vue-prism-component';
-    import 'prismjs/components/prism-bash';
     import i18n from '../../i18n';
+    import BashPrism from '../prism/bash';
 
     export default {
         name: 'SetupDownload',
         display: 'Download',
         key: 'download',
         components: {
-            Prism,
+            BashPrism,
         },
         props: {
             data: Object,

src/nginxconfig/templates/setup_sections/go_live.vue

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

src/nginxconfig/templates/setup_sections/ssl.vue

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