Add more robust styling

Signed-off-by: Jacob Kiers <jacob@jacobkiers.net>
This commit is contained in:
Jacob Kiers 2021-08-21 12:11:24 +02:00
parent 2d477bb77e
commit 5dd7a230fb
4 changed files with 1151 additions and 10 deletions

View File

@ -22,7 +22,7 @@ fetch("https://cloudflare-dns.com/dns-query?ct=application/dns-json&type=TXT&nam
The content itself is served over DNS, using CoreDNS, with these contents: The content itself is served over DNS, using CoreDNS, with these contents:
```js ```hcl
hod.experiments.jacobkiers.net.:53 { hod.experiments.jacobkiers.net.:53 {
log log
auto hod.experiments.jacobkiers.net. { auto hod.experiments.jacobkiers.net. {
@ -34,7 +34,7 @@ hod.experiments.jacobkiers.net.:53 {
This feeds into a zone file, which looks like this: This feeds into a zone file, which looks like this:
```js ```dns
$TTL 5m ; Default TTL $TTL 5m ; Default TTL
@ IN SOA experiments.jacobkiers.net. postmaster.jacobkiers.net. ( @ IN SOA experiments.jacobkiers.net. postmaster.jacobkiers.net. (
2021081612 ; serial 2021081612 ; serial

7
public/equilibrium-light.min.css vendored Normal file
View File

@ -0,0 +1,7 @@
/*!
Theme: Equilibrium Light
Author: Carlo Abelli
License: ~ MIT (or more permissive) [via base16-schemes-source]
Maintainer: @highlightjs/core-team
Version: 2021.05.0
*/pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#43474e;background:#f5f0e7}.hljs ::selection{color:#d8d4cb}.hljs-comment{color:#73777f}.hljs-tag{color:#5a5f66}.hljs-operator,.hljs-punctuation,.hljs-subst{color:#43474e}.hljs-operator{opacity:.7}.hljs-bullet,.hljs-deletion,.hljs-name,.hljs-selector-tag,.hljs-template-variable,.hljs-variable{color:#d02023}.hljs-attr,.hljs-link,.hljs-literal,.hljs-number,.hljs-symbol,.hljs-variable.constant_{color:#bf3e05}.hljs-class .hljs-title,.hljs-title,.hljs-title.class_{color:#9d6f00}.hljs-strong{font-weight:700;color:#9d6f00}.hljs-addition,.hljs-code,.hljs-string,.hljs-title.class_.inherited__{color:#637200}.hljs-built_in,.hljs-doctag,.hljs-keyword.hljs-atrule,.hljs-quote,.hljs-regexp{color:#007a72}.hljs-attribute,.hljs-function .hljs-title,.hljs-section,.hljs-title.function_,.ruby .hljs-property{color:#0073b5}.diff .hljs-meta,.hljs-keyword,.hljs-template-tag,.hljs-type{color:#4e66b6}.hljs-emphasis{color:#4e66b6;font-style:italic}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:#c42775}.hljs-meta .hljs-keyword,.hljs-meta-keyword{font-weight:700}

1131
public/highlight.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -3,8 +3,8 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Blog over DNS</title> <title>Blog over DNS</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.2.0/build/styles/default.min.css"> <link rel="stylesheet" href="equilibrium-light.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.2.0/build/highlight.min.js"></script> <script src="highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script> <script>
class Content { class Content {
@ -133,12 +133,15 @@ async function handleMarkdown(content)
console.log("Got me some markdown!"); console.log("Got me some markdown!");
marked.setOptions({ marked.setOptions({
highlight: function(code, lang) { highlight: function(code, lang) {
return hljs.highlight(lang, code).value; const avialable_languages = hljs.listLanguages();
const has_language = hljs.getLanguage(lang);
if (typeof has_language === "undefined") return code;
const result = hljs.highlight(code, { language: lang, ignoreIllegals: true});
return result.value;
}, },
// langPrefix: ''
}); });
if (content.metaData.title != undefined) document.title = content.metaData.title; if (typeof content.metaData.title !== "undefined") document.title = content.metaData.title;
document.getElementById("post").innerHTML = marked(content.content); document.getElementById("post").innerHTML = marked(content.content);
let title = document.createElement("h1"); let title = document.createElement("h1");
title.innerHTML = content.metaData.title; title.innerHTML = content.metaData.title;