diff --git a/assets/css/app.css b/assets/css/app.css
index 3687625..294024a 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -3,7 +3,7 @@
@import "tailwindcss/utilities";
@import "./reset.css";
-@import "./lolight.css";
+@import "./gruvbox.css";
@import "./lightbox.css";
@layer base {
@@ -109,6 +109,10 @@
.prose h4 {
@apply before:content-['####'];
}
+
+ .prose pre {
+ @apply p-0;
+ }
}
@layer components {
diff --git a/assets/css/gruvbox.css b/assets/css/gruvbox.css
new file mode 100644
index 0000000..d82083e
--- /dev/null
+++ b/assets/css/gruvbox.css
@@ -0,0 +1,7 @@
+/*!
+ Theme: Gruvbox dark, hard
+ Author: Dawid Kurek (dawikur@gmail.com), morhetz (https://github.com/morhetz/gruvbox)
+ License: ~ MIT (or more permissive) [via base16-schemes-source]
+ Maintainer: @highlightjs/core-team
+ Version: 2021.09.0
+*/pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#d5c4a1;background:#1d2021}.hljs ::selection,.hljs::selection{background-color:#504945;color:#d5c4a1}.hljs-comment{color:#665c54}.hljs-tag{color:#bdae93}.hljs-operator,.hljs-punctuation,.hljs-subst{color:#d5c4a1}.hljs-operator{opacity:.7}.hljs-bullet,.hljs-deletion,.hljs-name,.hljs-selector-tag,.hljs-template-variable,.hljs-variable{color:#fb4934}.hljs-attr,.hljs-link,.hljs-literal,.hljs-number,.hljs-symbol,.hljs-variable.constant_{color:#fe8019}.hljs-class .hljs-title,.hljs-title,.hljs-title.class_{color:#fabd2f}.hljs-strong{font-weight:700;color:#fabd2f}.hljs-addition,.hljs-code,.hljs-string,.hljs-title.class_.inherited__{color:#b8bb26}.hljs-built_in,.hljs-doctag,.hljs-keyword.hljs-atrule,.hljs-quote,.hljs-regexp{color:#8ec07c}.hljs-attribute,.hljs-function .hljs-title,.hljs-section,.hljs-title.function_,.ruby .hljs-property{color:#83a598}.diff .hljs-meta,.hljs-keyword,.hljs-template-tag,.hljs-type{color:#d3869b}.hljs-emphasis{color:#d3869b;font-style:italic}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:#d65d0e}.hljs-meta .hljs-keyword,.hljs-meta-keyword{font-weight:700}
\ No newline at end of file
diff --git a/assets/css/lolight.css b/assets/css/lolight.css
deleted file mode 100644
index 75dc963..0000000
--- a/assets/css/lolight.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.ll-nam { /* words */
- @apply text-theme-base;
-}
-.ll-num { /* numbers */
- color: rgb(var(--color-purple));
-}
-.ll-str { /* strings */
- color: rgb(var(--color-yellow));
-}
-.ll-rex { /* regular expressions */
- color: rgb(var(--color-yellow));
-}
-.ll-pct { /* operators, punctation */
- @apply text-theme-primary;
-}
-.ll-key { /* keywords */
- @apply font-bold;
- color: rgb(var(--color-blue));
-}
-.ll-com { /* comments */
- @apply text-theme-base1;
- font-style: italic;
-}
diff --git a/assets/js/public.js b/assets/js/public.js
index dd4cee0..e68dfdb 100644
--- a/assets/js/public.js
+++ b/assets/js/public.js
@@ -1,10 +1,14 @@
// Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
import "phoenix_html"
-import lolight from "../vendor/lolight"
+import hljs from "highlight.js"
import GLightbox from 'glightbox'
-lolight("pre code")
+document.addEventListener('DOMContentLoaded', (event) => {
+ document.querySelectorAll('pre code').forEach((el) => {
+ hljs.highlightElement(el);
+ });
+});
document
.querySelector("#dark-mode-toggle")
@@ -20,4 +24,6 @@ document
}
})
-GLightbox({ selector: ".lightbox" })
\ No newline at end of file
+GLightbox({ selector: ".lightbox" })
+
+window.hljs = hljs
\ No newline at end of file
diff --git a/assets/package-lock.json b/assets/package-lock.json
index 6ded28c..ee10c27 100644
--- a/assets/package-lock.json
+++ b/assets/package-lock.json
@@ -7,6 +7,7 @@
"dependencies": {
"classnames": "^2.3.2",
"glightbox": "^3.2.0",
+ "highlight.js": "^11.8.0",
"kbar": "^0.1.0-beta.40",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
@@ -537,6 +538,14 @@
"resolved": "https://registry.npmjs.org/glightbox/-/glightbox-3.2.0.tgz",
"integrity": "sha512-iit1xYixqL4YVL+I2YJLfMeyJwvLi6FE6kY3qNKeZHEJgRIz80QU8Rm7YCyw1wOTgXvmNDnXGVhHOHRCwnDltQ=="
},
+ "node_modules/highlight.js": {
+ "version": "11.8.0",
+ "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.8.0.tgz",
+ "integrity": "sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==",
+ "engines": {
+ "node": ">=12.0.0"
+ }
+ },
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
diff --git a/assets/package.json b/assets/package.json
index 6d04eb6..7dca68f 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -5,6 +5,7 @@
"dependencies": {
"classnames": "^2.3.2",
"glightbox": "^3.2.0",
+ "highlight.js": "^11.8.0",
"kbar": "^0.1.0-beta.40",
"phoenix": "file:../deps/phoenix",
"phoenix_html": "file:../deps/phoenix_html",
diff --git a/assets/vendor/lolight.js b/assets/vendor/lolight.js
deleted file mode 100644
index 6c61117..0000000
--- a/assets/vendor/lolight.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/*! lolight v1.4.0 - https://larsjung.de/lolight/ */
-(function (root, factory) {
- if (typeof exports === 'object' && typeof module === 'object') {
- module.exports = factory(); // eslint-disable-line no-undef
- } else if (typeof define === 'function' && define.amd) { // eslint-disable-line no-undef
- define([], factory); // eslint-disable-line no-undef
- } else {
- root.lolight = factory();
- }
-}(this, function () {
- var SELECTOR = '.lolight';
- var CLS_PREFIX = 'll-';
- var STYLE = '_nam#2196f3}_num#ec407a}_str#43a047}_rex#ef6c00}_pct#666}_key#555;font-weight:bold}_com#aaa;font-style:italic}'.replace(/_/g, '.' + CLS_PREFIX).replace(/#/g, '{color:#');
-
- var KEYWORD_RE = /^(a(bstract|lias|nd|rguments|rray|s(m|sert)?|uto)|b(ase|egin|ool(ean)?|reak|yte)|c(ase|atch|har|hecked|lass|lone|ompl|onst|ontinue)|de(bugger|cimal|clare|f(ault|er)?|init|l(egate|ete)?)|do|double|e(cho|ls?if|lse(if)?|nd|nsure|num|vent|x(cept|ec|p(licit|ort)|te(nds|nsion|rn)))|f(allthrough|alse|inal(ly)?|ixed|loat|or(each)?|riend|rom|unc(tion)?)|global|goto|guard|i(f|mp(lements|licit|ort)|n(it|clude(_once)?|line|out|stanceof|t(erface|ernal)?)?|s)|l(ambda|et|ock|ong)|m(odule|utable)|NaN|n(amespace|ative|ext|ew|il|ot|ull)|o(bject|perator|r|ut|verride)|p(ackage|arams|rivate|rotected|rotocol|ublic)|r(aise|e(adonly|do|f|gister|peat|quire(_once)?|scue|strict|try|turn))|s(byte|ealed|elf|hort|igned|izeof|tatic|tring|truct|ubscript|uper|ynchronized|witch)|t(emplate|hen|his|hrows?|ransient|rue|ry|ype(alias|def|id|name|of))|u(n(checked|def(ined)?|ion|less|signed|til)|se|sing)|v(ar|irtual|oid|olatile)|w(char_t|hen|here|hile|ith)|xor|yield)$/;
-
- var COM = 'com';
- var KEY = 'key';
- var NAM = 'nam';
- var NUM = 'num';
- var PCT = 'pct';
- var REX = 'rex';
- var SPC = 'spc';
- var STR = 'str';
- var UNK = 'unk';
-
- var TOKEN_RES = [
- [NUM, /#([0-9a-f]{6}|[0-9a-f]{3})\b/],
- [COM, /(\/\/|#).*?(?=\n|$)/],
- [COM, /\/\*[\s\S]*?\*\//],
- [COM, //],
- [REX, /\/(\\\/|[^\n])*?\//],
- [STR, /(['"`])(\\\1|[\s\S])*?\1/],
- [NUM, /[+-]?([0-9]*\.?[0-9]+|[0-9]+\.?[0-9]*)([eE][+-]?[0-9]+)?/],
- [PCT, /[\\.,:;+\-*\/=<>()[\]{}|?!&@~]/],
- [SPC, /\s+/],
- [NAM, /[\w$]+/],
- [UNK, /./]
- ];
-
- var tokenize = function (text) {
- if (typeof text !== 'string') {
- throw new Error('tok: no string');
- }
-
- var tokens = [];
- var len = TOKEN_RES.length;
- var prefer_div_over_re = false;
-
- while (text) {
- for (var i = 0; i < len; i += 1) {
- var m = TOKEN_RES[i][1].exec(text);
- if (!m || m.index !== 0) {
- continue;
- }
-
- var cls = TOKEN_RES[i][0];
- if (cls === REX && prefer_div_over_re) {
- continue;
- }
-
- var tok = m[0];
-
- if (cls === NAM && KEYWORD_RE.test(tok)) {
- cls = KEY;
- }
- if (cls === SPC) {
- if (tok.indexOf('\n') >= 0) {
- prefer_div_over_re = false;
- }
- } else {
- prefer_div_over_re = cls === NUM || cls === NAM;
- }
-
- text = text.slice(tok.length);
- tokens.push([cls, tok]);
- break;
- }
- }
-
- return tokens;
- };
-
- var with_doc = function (fail, fn) {
- if (typeof document !== 'undefined') {
- fn(document); // eslint-disable-line no-undef
- } else if (fail) {
- throw new Error('no doc');
- }
- };
-
- var highlight_el = function (el) {
- with_doc(true, function (doc) {
- var tokens = tokenize(el.textContent);
- el.innerHTML = '';
- tokens.forEach(function (token) {
- var tok_el = doc.createElement('span');
- tok_el.className = CLS_PREFIX + token[0];
- tok_el.textContent = token[1];
- el.appendChild(tok_el);
- });
- });
- };
-
- var lolight = function (sel) {
- with_doc(true, function (doc) {
- [].forEach.call(doc.querySelectorAll(sel || SELECTOR), function (el) {
- highlight_el(el);
- });
- });
- };
-
- with_doc(false, function (doc) {
- // do it with style
- var head = doc.querySelector('head');
- var style = doc.createElement('style');
- style.textContent = STYLE;
- head.insertBefore(style, head.firstChild);
-
- // auto highlight
- if ((/^(i|c|loade)/).test(doc.readyState)) {
- lolight();
- } else {
- doc.addEventListener('DOMContentLoaded', function () {
- lolight();
- });
- }
- });
-
- lolight.tok = tokenize;
- lolight.el = highlight_el;
- return lolight;
-}));
diff --git a/lib/chiya_web/controllers/page_html.ex b/lib/chiya_web/controllers/page_html.ex
index 348679c..a2e64ec 100644
--- a/lib/chiya_web/controllers/page_html.ex
+++ b/lib/chiya_web/controllers/page_html.ex
@@ -8,16 +8,19 @@ defmodule ChiyaWeb.PageHTML do
def tag_list(tags), do: Enum.map_join(tags, ", ", fn t -> t.name end)
def render_outline(note) do
- list = ChiyaWeb.Outline.get(note.content)
- Enum.map(list, &do_render_outline/1)
+ note.content
+ |> ChiyaWeb.Outline.get()
+ |> Enum.map(&do_render_outline/1)
end
def do_render_outline(%{text: text, children: children, level: _level}) do
+ slug = Slugger.slugify_downcase(text)
content_tag(:ul, [class: "m-0"],
do: [
- content_tag(:li, do: content_tag(:a, text, href: "##{Slugger.slugify_downcase(text)}")),
+ content_tag(:li, do:
+ content_tag(:a, text, href: "##{slug}")),
Enum.map(children, &do_render_outline/1)
]
- )
+ ) |> safe_to_string()
end
end
diff --git a/lib/chiya_web/controllers/page_html/note.html.heex b/lib/chiya_web/controllers/page_html/note.html.heex
index 9b7977b..06d4c65 100644
--- a/lib/chiya_web/controllers/page_html/note.html.heex
+++ b/lib/chiya_web/controllers/page_html/note.html.heex
@@ -3,14 +3,24 @@
<%= @note.name %>
-
+
<%= Markdown.render(@note.content) |> raw %>
+ <%= if not Enum.empty?(@note.links_to) do %>
+
+ <.divider text="" />
+ Notes linking here:
+
+
+ <% end %>
+