aboutsummaryrefslogtreecommitdiff
path: root/loaders
diff options
context:
space:
mode:
authorflu0r1ne <flu0r1ne@flu0r1ne.net>2023-09-07 21:28:37 -0500
committerflu0r1ne <flu0r1ne@flu0r1ne.net>2023-09-07 21:28:37 -0500
commitd67f3514eff4f45ad1ca84cde6465e622acd4dcc (patch)
tree55f9c8e4f68f1269300b937fb14ae76e3446d621 /loaders
parentef4fb0a5277ee99bd0f1747b77e733ef7f02460d (diff)
downloadhomepage-d67f3514eff4f45ad1ca84cde6465e622acd4dcc.tar.xz
homepage-d67f3514eff4f45ad1ca84cde6465e622acd4dcc.zip
Scoped global styling to all markdown
Make React compatible with markdown-style HTML by added components with identical styling to markdown. This is done while CSS scoping is maintained. Additional style is loaded through the markdown loader by injecting default-styling tags into the components. This allows default-margin to be added to these elements in addition to the styling found in the React elements. The homepage reflects the domain, as defined by an environmental variable.
Diffstat (limited to 'loaders')
-rw-r--r--loaders/marked-renderer.js92
-rw-r--r--loaders/marked.js4
2 files changed, 95 insertions, 1 deletions
diff --git a/loaders/marked-renderer.js b/loaders/marked-renderer.js
new file mode 100644
index 0000000..0b55304
--- /dev/null
+++ b/loaders/marked-renderer.js
@@ -0,0 +1,92 @@
+const prefix = "md-";
+const selectall = `${prefix}dl`;
+
+const renderer = {
+ // Block-level methods
+ code(code, infostring, escaped) {
+ return `<pre class="${selectall} ${prefix}pre"><code class="${selectall} ${prefix}code">${code}</code></pre>`;
+ },
+ blockquote(quote) {
+ return `<blockquote class="${selectall} ${prefix}blockquote">${quote}</blockquote>`;
+ },
+ html(html, block) {
+ return block ? html : `<span class="${selectall} ${prefix}inline-html">${html}</span>`;
+ },
+ heading(text, level, raw, slugger) {
+ return `<h${level} class="${selectall} ${prefix}h${level}">${text}</h${level}>`;
+ },
+ hr() {
+ return `<hr class="${selectall} ${prefix}hr" />`;
+ },
+ list(body, ordered, start) {
+ const tag = ordered ? 'ol' : 'ul';
+ return `<${tag} class="${selectall} ${prefix}list ${prefix}${tag}"${ordered && start !== 1 ? ` start="${start}"` : ''}>${body}</${tag}>`;
+ },
+ listitem(text, task, checked) {
+ let classList = `${prefix}li`;
+
+ if(task) {
+ classList += ` ${prefix}li-checkbox`;
+ } else {
+ classList += ` ${prefix}li-nocheckbox`;
+ }
+
+ return `<li class="${selectall} ${classList}">${text}</li>`;
+ },
+ checkbox(checked) {
+ return `<input type="checkbox" class="${selectall} ${prefix}checkbox" ${checked ? 'checked' : ''} disabled />`;
+ },
+ paragraph(text) {
+ return `<p class="${selectall} ${prefix}p">${text}</p>`;
+ },
+ table(header, body) {
+ return `<table class="${selectall} ${prefix}table"><thead class="${selectall} ${prefix}thead">${header}</thead><tbody class="${selectall} ${prefix}tbody">${body}</tbody></table>`;
+ },
+ tablerow(content) {
+ return `<tr class="${selectall} ${prefix}tr">${content}</tr>`;
+ },
+ tablecell(content, flags) {
+ const type = flags.header ? 'th' : 'td';
+ return `<${type} class="${selectall} ${prefix}${type}">${content}</${type}>`;
+ },
+
+ // Inline-level methods
+ strong(text) {
+ return `<strong class="${selectall} ${prefix}strong">${text}</strong>`;
+ },
+ em(text) {
+ return `<em class="${selectall} ${prefix}em">${text}</em>`;
+ },
+ codespan(code) {
+ return `<code class="${selectall} ${prefix}codespan">${code}</code>`;
+ },
+ br() {
+ return `<br class="${selectall} ${prefix}br" />`;
+ },
+ del(text) {
+ return `<del class="${selectall} ${prefix}del">${text}</del>`;
+ },
+ link(href, title, text) {
+ return `<a href="${href}" class="${selectall} ${prefix}a"${title ? ` title="${title}"` : ''}>${text}</a>`;
+ },
+ image(href, title, text) {
+ return `<img src="${href}" alt="${text}" class="${selectall} ${prefix}img"${title ? ` title="${title}"` : ''} />`;
+ },
+ text(text) {
+ return text; // text-level elements typically don't have classes
+ },
+};
+
+const hooks = {
+ postprocess(html) {
+ return `<div class="${selectall} ${prefix}wrapper" >${html}</div>`;
+ },
+ preprocess(md) {
+ return md;
+ }
+};
+
+module.exports = {
+ renderer,
+ hooks
+};
diff --git a/loaders/marked.js b/loaders/marked.js
index f3c8fcb..a1ed8c3 100644
--- a/loaders/marked.js
+++ b/loaders/marked.js
@@ -1,15 +1,17 @@
const { Marked } = require('marked');
const { markedHighlight } = require('marked-highlight');
const hljs = require('highlight.js');
+const { renderer, hooks } = require('./marked-renderer.js');
module.exports = function loader(source) {
const marker = new Marked(
+ { renderer, hooks },
markedHighlight({
highlight(code, lang) {
const language = hljs.getLanguage(lang) ? lang : 'plaintext';
return hljs.highlight(code, { language }).value;
}
- })
+ }),
);
return marker.parse(source);