devel #205
9 changed files with 51 additions and 167 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
7
assets/css/gruvbox.css
Normal file
7
assets/css/gruvbox.css
Normal file
|
|
@ -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}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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")
|
||||
|
|
@ -21,3 +25,5 @@ document
|
|||
})
|
||||
|
||||
GLightbox({ selector: ".lightbox" })
|
||||
|
||||
window.hljs = hljs
|
||||
9
assets/package-lock.json
generated
9
assets/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
133
assets/vendor/lolight.js
vendored
133
assets/vendor/lolight.js
vendored
|
|
@ -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, /<!--[\s\S]*?-->/],
|
||||
[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;
|
||||
}));
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -3,14 +3,24 @@
|
|||
<%= @note.name %>
|
||||
</.header>
|
||||
|
||||
<aside class="max-w-2xl mx-auto mt-8 prose prose-gruvbox bg-theme-background1 rounded p-2 empty:hidden">
|
||||
<%= raw Enum.map(render_outline(@note), &safe_to_string/1) %>
|
||||
</aside>
|
||||
<aside class="max-w-2xl mx-auto mt-8 prose prose-gruvbox bg-theme-background1 rounded p-2 empty:hidden"><%= raw render_outline(@note) %></aside>
|
||||
|
||||
<section class="mt-8 mx-auto prose prose-gruvbox md:prose-lg lg:prose-xl | p-summary e-content">
|
||||
<%= Markdown.render(@note.content) |> raw %>
|
||||
</section>
|
||||
|
||||
<%= if not Enum.empty?(@note.links_to) do %>
|
||||
<section class="mt-8 prose prose-gruvbox max-w-2xl mx-auto">
|
||||
<.divider text="" />
|
||||
Notes linking here:
|
||||
<ul class="">
|
||||
<%= for link <- @note.links_to do %>
|
||||
<li><a href={~p"/note/#{link.slug}"}><%= link.name %></a></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</section>
|
||||
<% end %>
|
||||
|
||||
<footer class="max-w-2xl mx-auto mt-8 text-theme-base">
|
||||
<%= if @note.published_at do %>
|
||||
<span>Published</span>
|
||||
|
|
|
|||
Loading…
Reference in a new issue