diff --git a/app.vue b/app.vue index aa3e784..58ad70f 100644 --- a/app.vue +++ b/app.vue @@ -12,6 +12,7 @@ import './assets/style.css' name: 'page', mode: 'out-in' }" /> +
diff --git a/assets/markdown_conf.ts b/assets/markdown_conf.ts index 6936638..0b044ae 100644 --- a/assets/markdown_conf.ts +++ b/assets/markdown_conf.ts @@ -1,5 +1,6 @@ -import hljs from 'highlight.js'; -import MarkdownIt from 'markdown-it'; +import hljs from "highlight.js"; +import MarkdownIt from "markdown-it"; +import Token from "markdown-it/lib/token.mjs"; export default function configured_markdown(): MarkdownIt { const md: MarkdownIt = MarkdownIt({ @@ -10,27 +11,35 @@ export default function configured_markdown(): MarkdownIt { if (lang && hljs.getLanguage(lang)) { try { return '
' +
-                        hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
-                        '
'; - } catch (__) { } + hljs.highlight(str, { + language: lang, + ignoreIllegals: true, + }).value + + ""; + } catch (__) {} } - - return '
' + md.utils.escapeHtml(str) + '
'; - } - }) - - - md.renderer.rules.hr = function (tokens, idx, options, env, self) { - return '
' - } - + + return '
' + md.utils.escapeHtml(str) +
+                "
"; + }, + }); + + md.renderer.rules.h6 = function (tokens, idx, options, env, self) { + return '

' + + tokens[idx].content + "
"; + }; + md.renderer.rules.softbreak = function (tokens, idx, options, env, self) { - return '
' - } - + return "
"; + }; + md.renderer.rules.hardbreak = function (tokens, idx, options, env, self) { - return '

' + return "

"; + }; + + md.renderer.rules.text = function (tokens, idx, options, env, self) { + return tokens[idx].content; } return md; -} \ No newline at end of file +} diff --git a/assets/style.css b/assets/style.css index 6a11748..85f1fe3 100644 --- a/assets/style.css +++ b/assets/style.css @@ -15,6 +15,7 @@ h1 { } h2 { + font-family: 'Lobster', cursive, 'Courier New', Courier, monospace; @apply text-2xl font-bold; } @@ -35,7 +36,7 @@ h6 { } a { - @apply transition text-purple-400 hover:text-purple-500; + @apply transition text-purple-400 hover:text-purple-600; } @@ -82,6 +83,19 @@ code { @apply p-1 border-purple-800 border rounded-lg; } +/* Markdown improvements to headers when a descendent of class="md-contents" */ +/* h1 to h2; Add a border to the bottom of the header */ +.md-contents h1:not(.md-override) { + @apply border-b-4 border-purple-600 mb-3; +} +.md-contents h2:not(.md-override) { + @apply border-b border-purple-600 mb-3; +} + +.md-contents div:not(.md-override) { + @apply mb-3 mt-3; +} + /* Code theme */ .hljs { diff --git a/components/BackgroundCalm.vue b/components/BackgroundCalm.vue index 3e1cf32..b00c904 100644 --- a/components/BackgroundCalm.vue +++ b/components/BackgroundCalm.vue @@ -7,17 +7,18 @@ const onLoad = (container: Container) => { \ No newline at end of file diff --git a/pages/blog.vue b/pages/blog.vue index 0ce9e2d..10d40c6 100644 --- a/pages/blog.vue +++ b/pages/blog.vue @@ -162,7 +162,7 @@ watch(url, async () => {
-
+
diff --git a/pages/index.vue b/pages/index.vue index af2a9e2..854b5d2 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -17,15 +17,15 @@ fetch("/about_me.md")