diff --git a/package-lock.json b/package-lock.json
index c0035c1..785a17f 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index ddcb077..bcf03ef 100644
--- a/package.json
+++ b/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"
},
diff --git a/src/nginxconfig/scss/style.scss b/src/nginxconfig/scss/style.scss
index 36957ee..4704d08 100644
--- a/src/nginxconfig/scss/style.scss
+++ b/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;
+ }
+ }
+ }
+ }
+ }
+ }
}
diff --git a/src/nginxconfig/templates/setup_sections/certbot.vue b/src/nginxconfig/templates/setup_sections/certbot.vue
index 7198a56..054e8b1 100644
--- a/src/nginxconfig/templates/setup_sections/certbot.vue
+++ b/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;
- s/(ssl_(certificate|certificate_key|trusted_certificate) )/#;#\1/g' {{ sitesAvailable }}</code>
+ <Prism language="bash" :code="`sed -i -r 's/(listen .*443)/\\1;#/g; s/(ssl_(certificate|certificate_key|trusted_certificate) )/#;#\\1/g' ${sitesAvailable}`"></Prism>
</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>
- </template>
+ <br />
+ <Prism language="bash" :code="certbotCmds"></Prism>
</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');
},
},
};
diff --git a/src/nginxconfig/templates/setup_sections/download.vue b/src/nginxconfig/templates/setup_sections/download.vue
index cfbcd7a..2dccecb 100644
--- a/src/nginxconfig/templates/setup_sections/download.vue
+++ b/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,
},
diff --git a/src/nginxconfig/templates/setup_sections/go_live.vue b/src/nginxconfig/templates/setup_sections/go_live.vue
index 30c81d5..8ad85c4 100644
--- a/src/nginxconfig/templates/setup_sections/go_live.vue
+++ b/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,
},
diff --git a/src/nginxconfig/templates/setup_sections/ssl.vue b/src/nginxconfig/templates/setup_sections/ssl.vue
index cdd1cde..4b3cf45 100644
--- a/src/nginxconfig/templates/setup_sections/ssl.vue
+++ b/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,
},