Add prism!

This commit is contained in:
MattIPv4
2020-05-07 20:46:52 +01:00
parent 8ee4a8eb88
commit 8d9ffc6e39
7 changed files with 120 additions and 20 deletions

View File

@@ -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;
}
}
}
}
}
}
}

View File

@@ -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');
},
},
};

View File

@@ -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,
},

View File

@@ -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,
},

View File

@@ -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,
},