Skip to content

Commit ea3f075

Browse files
benhatsorbenhatsor
authored
Merge pull request #283 from codeitcodes/alert-and-footnotes
Add Alert and Footnote support (Markdown)
2 parents 1e3a2e8 + e8e7792 commit ea3f075

File tree

8 files changed

+203
-13
lines changed

8 files changed

+203
-13
lines changed

‎full.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2008,7 +2008,7 @@ body.safari .console-sheet .logs .log .data.safari-margin-left-update {
20082008
}
20092009

20102010
.console-sheet .logs .log.debug {
2011-
--text-color: hsl(220deg 100% 65%);
2011+
--text-color: var(--rosemary-lighter);
20122012
}
20132013

20142014
.console-sheet .logs .log:is(.warn, .error) {

‎live-view/extensions/markdown/dev-marked-alert.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
(function(i, n) {
2+
typeof exports == "object" && typeof module < "u" ? module.exports = n() : typeof define == "function" && define.amd ? define(n) : (i = typeof globalThis < "u" ? globalThis : i || self, i.markedAlert = n())
3+
})(this, function() {
4+
"use strict";
5+
const i = [{
6+
type: "note",
7+
icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11 7H13V9H11V7ZM11 11H13V17H11V11ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z" fill="currentColor"></path> </svg>'
8+
}, {
9+
type: "tip",
10+
icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 21C9 21.55 9.45 22 10 22H14C14.55 22 15 21.55 15 21V20H9V21ZM12 2C8.14 2 5 5.14 5 9C5 11.38 6.19 13.47 8 14.74V17C8 17.55 8.45 18 9 18H15C15.55 18 16 17.55 16 17V14.74C17.81 13.47 19 11.38 19 9C19 5.14 15.86 2 12 2ZM14.85 13.1L14 13.7V16H10V13.7L9.15 13.1C7.8 12.16 7 10.63 7 9C7 6.24 9.24 4 12 4C14.76 4 17 6.24 17 9C17 10.63 16.2 12.16 14.85 13.1Z" fill="currentColor"></path> </svg>'
11+
}, {
12+
type: "important",
13+
icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C13.1 22 14 21.1 14 20H10C10 21.1 10.9 22 12 22ZM18 16V11C18 7.93 16.37 5.36 13.5 4.68V4C13.5 3.17 12.83 2.5 12 2.5C11.17 2.5 10.5 3.17 10.5 4V4.68C7.64 5.36 6 7.92 6 11V16L4 18V19H20V18L18 16ZM16 17H8V11C8 8.52 9.51 6.5 12 6.5C14.49 6.5 16 8.52 16 11V17Z" fill="currentColor"></path> </svg>'
14+
}, {
15+
type: "warning",
16+
icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0V0z" fill="none"></path> <g xmlns="http://www.w3.org/2000/svg" fill="currentColor"> <path d="M10.1283 5.05809C10.9277 3.6473 13.0723 3.6473 13.8717 5.05809L21.2493 18.0661C21.4222 18.3709 21.5083 18.7127 21.4994 19.0582C21.4904 19.4038 21.3866 19.7412 21.1981 20.0377C21.0096 20.3341 20.7429 20.5795 20.4238 20.7499C20.1048 20.9203 19.7443 21.0099 19.3776 21.01H4.62239C4.25568 21.0099 3.89524 20.9203 3.57619 20.7499C3.25715 20.5795 2.99038 20.3341 2.80189 20.0377C2.6134 19.7412 2.50961 19.4038 2.50064 19.0582C2.49166 18.7127 2.57781 18.3709 2.75069 18.0661L10.1283 5.05809ZM12.2669 5.86637C12.2409 5.821 12.2024 5.7831 12.1554 5.75668C12.1084 5.73026 12.0547 5.71631 12 5.71631C11.9453 5.71631 11.8916 5.73026 11.8446 5.75668C11.7976 5.7831 11.7591 5.821 11.7331 5.86637L4.35552 18.8744C4.33081 18.9179 4.31846 18.9667 4.3197 19.016C4.32094 19.0654 4.33571 19.1136 4.36258 19.156C4.38946 19.1983 4.42751 19.2334 4.47304 19.2578C4.51857 19.2822 4.57002 19.295 4.62239 19.2951H19.3776C19.43 19.295 19.4814 19.2822 19.527 19.2578C19.5725 19.2334 19.6105 19.1983 19.6374 19.156C19.6643 19.1136 19.6791 19.0654 19.6803 19.016C19.6815 18.9667 19.6692 18.9179 19.6445 18.8744L12.2669 5.86637Z"></path> <path d="M12.8111 13.293V10.4348C12.8111 10.2074 12.7207 9.98933 12.5599 9.82853C12.3991 9.66773 12.181 9.57739 11.9536 9.57739C11.7262 9.57739 11.5081 9.66773 11.3473 9.82853C11.1865 9.98933 11.0962 10.2074 11.0962 10.4348V13.293C11.0962 13.5204 11.1865 13.7385 11.3473 13.8993C11.5081 14.0601 11.7262 14.1504 11.9536 14.1504C12.181 14.1504 12.3991 14.0601 12.5599 13.8993C12.7207 13.7385 12.8111 13.5204 12.8111 13.293Z"></path> <path d="M12.762 17.2454C12.9764 17.031 13.0969 16.7402 13.0969 16.437C13.0969 16.1337 12.9764 15.843 12.762 15.6285C12.5476 15.4141 12.2569 15.2937 11.9536 15.2937C11.6504 15.2937 11.3596 15.4141 11.1452 15.6285C10.9308 15.843 10.8104 16.1337 10.8104 16.437C10.8104 16.7402 10.9308 17.031 11.1452 17.2454C11.3596 17.4598 11.6504 17.5802 11.9536 17.5802C12.2569 17.5802 12.5476 17.4598 12.762 17.2454Z"></path> </g> </svg>'
17+
}, {
18+
type: "caution",
19+
icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0V0z" fill="none"></path><g fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z"></path><path d="M12 17.25C11.6685 17.25 11.3505 17.1183 11.1161 16.8839C10.8817 16.6495 10.75 16.3315 10.75 16C10.75 15.6685 10.8817 15.3505 11.1161 15.1161C11.3505 14.8817 11.6685 14.75 12 14.75C12.3315 14.75 12.6495 14.8817 12.8839 15.1161C13.1183 15.3505 13.25 15.6685 13.25 16C13.25 16.3315 13.1183 16.6495 12.8839 16.8839C12.6495 17.1183 12.3315 17.25 12 17.25Z"></path><path d="M13 8C13 7.45 12.55 7 12 7C11.45 7 11 7.45 11 8V12C11 12.55 11.45 13 12 13C12.55 13 13 12.55 13 12V8Z"></path></g> </svg>'
20+
}];
21+
22+
function n(a) {
23+
return a.length ? Object.values([...i, ...a].reduce((s, r) => (s[r.type] = r, s), {})) : i
24+
}
25+
26+
function h(a) {
27+
return `^(?:\\[\\!${a.toUpperCase()}\\])s*? ?`
28+
}
29+
30+
function f(a) {
31+
return a.slice(0, 1).toUpperCase() + a.slice(1).toLowerCase()
32+
}
33+
34+
function m(a = {}) {
35+
const {
36+
className: s = "markdown-alert",
37+
variants: r = []
38+
} = a, g = n(r);
39+
return {
40+
walkTokens(e) {
41+
var t, p, d, v;
42+
if (e.type !== "blockquote") return;
43+
const o = g.find(({
44+
type: c
45+
}) => new RegExp(h(c)).test(e.text));
46+
if (o) {
47+
const {
48+
type: c,
49+
icon: Z,
50+
title: w = f(c),
51+
titleClassName: x = `${s}-title`
52+
} = o;
53+
Object.assign(e, {
54+
type: "alert",
55+
meta: {
56+
className: s,
57+
variant: c,
58+
icon: Z,
59+
title: w,
60+
titleClassName: x
61+
}
62+
});
63+
const l = (t = e.tokens) == null ? void 0 : t[0],
64+
u = (p = l.raw) == null ? void 0 : p.replace(new RegExp(h(c)), "").trim();
65+
u ? (l.tokens = this.Lexer.lexInline(u), (d = e.tokens) == null || d.splice(0, 1, l)) : (v = e.tokens) == null || v.shift()
66+
}
67+
},
68+
extensions: [{
69+
name: "alert",
70+
level: "block",
71+
renderer({
72+
meta: e,
73+
tokens: o = []
74+
}) {
75+
let t = `<div class="${e.className} ${e.className}-${e.variant}"> `;
76+
return t += `<p class="${e.titleClassName}">`, t += e.icon, t += e.title, t += `</p> `, t += this.parser.parse(o), t += `</div> `, t
77+
}
78+
}]
79+
}
80+
}
81+
return m
82+
});

‎live-view/extensions/markdown-dark.css‎ renamed to ‎live-view/extensions/markdown/markdown-dark.css‎

Lines changed: 85 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
--title-color: rgba(241,241,242,0.92);
88
--heading-color: hsl(240deg 5% 89% / 92%);
99
--bg-color: hsl(228deg 16% 12%);
10-
--link-color: hsl(223deg 86% 73%);
10+
--link-color: var(--rosemary-lightness-deluxe);
1111
--font-family: 'Inter', system-ui, sans-serif;
1212
--mono-font-family: 'Mono Sans', 'Roboto Mono', consolas, lucida console, courier new, monospace;
1313
--mono-font-color: #a6c3d4;
@@ -18,6 +18,8 @@
1818
--color-canvas-default: var(--bg-color);
1919
--color-fg-muted: #b3b3b3;
2020
--table-border-color: hsl(217deg 24% 20% / 50%);
21+
--rosemary-lighter: hsl(223deg 86% 64%);
22+
--rosemary-lightness-deluxe: hsl(223deg 86% 73%);
2123
}
2224

2325

@@ -116,7 +118,7 @@ body form {
116118
display: none;
117119
}
118120

119-
body p, body blockquote, body ul, body ol, body dl, body table, body pre, body details, body img, body cd-el {
121+
body p, body blockquote, body .markdown-alert, body ul, body ol, body dl, body table, body pre, body details, body img, body cd-el {
120122
margin-top: 0;
121123
margin-bottom: 16px;
122124
}
@@ -247,7 +249,7 @@ body blockquote {
247249
padding-left: calc(1em + 0.25em);
248250
}
249251

250-
body blockquote::before {
252+
body :is(blockquote, .markdown-alert)::before {
251253
content: '';
252254
height: 100%;
253255
width: 0.25em;
@@ -258,6 +260,60 @@ body blockquote::before {
258260
border-radius: 10px;
259261
}
260262

263+
body .markdown-alert {
264+
padding: .5em 1em;
265+
padding-left: calc(1em + 0.25em);
266+
position: relative;
267+
}
268+
269+
body .markdown-alert .markdown-alert-title {
270+
display: flex;
271+
font-weight: 500;
272+
align-items: center;
273+
line-height: 1;
274+
}
275+
276+
body .markdown-alert.markdown-alert-note .markdown-alert-title {
277+
color: var(--rosemary-lighter);
278+
}
279+
280+
body .markdown-alert.markdown-alert-tip .markdown-alert-title,
281+
body .markdown-alert.markdown-alert-tip::before {
282+
color: hsl(42deg 87% 60% / 93%);
283+
}
284+
285+
body .markdown-alert.markdown-alert-important .markdown-alert-title,
286+
body .markdown-alert.markdown-alert-important::before {
287+
color: #ce8de2;
288+
}
289+
290+
body .markdown-alert.markdown-alert-warning .markdown-alert-title,
291+
body .markdown-alert.markdown-alert-warning::before {
292+
color: hsl(15deg 57% 76%);
293+
}
294+
295+
body .markdown-alert.markdown-alert-caution .markdown-alert-title,
296+
body .markdown-alert.markdown-alert-caution::before {
297+
color: hsl(354deg 61% 73%);
298+
}
299+
300+
body .markdown-alert:not(.markdown-alert-note)::before {
301+
background: currentColor;
302+
opacity: 0.11;
303+
}
304+
305+
body .markdown-alert .markdown-alert-title svg {
306+
margin-right: 7px;
307+
height: 20px;
308+
width: 20px;
309+
fill: currentColor;
310+
opacity: .72;
311+
}
312+
313+
body .markdown-alert > :last-child {
314+
margin-bottom: 0;
315+
}
316+
261317
body dl {
262318
padding: 0;
263319
}
@@ -275,6 +331,32 @@ body dl dd {
275331
margin-bottom: 16px;
276332
}
277333

334+
body .sr-only {
335+
display: none;
336+
}
337+
338+
body [data-footnote-ref]::before {
339+
content: '[';
340+
}
341+
342+
body [data-footnote-ref]::after {
343+
content: ']';
344+
}
345+
346+
body .footnotes {
347+
font-size: 85%;
348+
color: var(--color-fg-muted);
349+
border-top: 1px solid var(--color-border-default);
350+
}
351+
352+
body .footnotes ol {
353+
padding-left: 16px;
354+
}
355+
356+
body li > p {
357+
margin-top: 16px;
358+
}
359+
278360
body cd-el {
279361
padding: 16px;
280362
display: block;
@@ -334,4 +416,3 @@ html, body {
334416
-webkit-text-size-adjust: 100%;
335417
-webkit-overflow-scrolling: touch;
336418
}
337-

‎live-view/extensions/markdown-light-alt.css‎ renamed to ‎live-view/extensions/markdown/markdown-light-alt.css‎

File renamed without changes.

‎live-view/extensions/marked.min.js‎ renamed to ‎live-view/extensions/markdown/marked.min.js‎

Lines changed: 17 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎live-view/extensions/mobile-console/console-sheet.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -941,9 +941,13 @@ class ConsoleSheet {
941941
`,
942942

943943
warn: `
944-
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="icon">
944+
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="icon">
945945
<path d="M0 0h24v24H0V0z" fill="none"></path>
946-
<path d="M12 5.99L19.53 19H4.47L12 5.99ZM2.74 18C1.97 19.33 2.93 21 4.47 21H19.53C21.07 21 22.03 19.33 21.26 18L13.73 4.99C12.96 3.66 11.04 3.66 10.27 4.99L2.74 18ZM11 11V13C11 13.55 11.45 14 12 14C12.55 14 13 13.55 13 13V11C13 10.45 12.55 10 12 10C11.45 10 11 10.45 11 11ZM11 16.25C11 16.1119 11.1119 16 11.25 16H12.75C12.8881 16 13 16.1119 13 16.25V17.75C13 17.8881 12.8881 18 12.75 18H11.25C11.1119 18 11 17.8881 11 17.75V16.25Z" fill="currentColor"></path>
946+
<g xmlns="http://www.w3.org/2000/svg" fill="currentColor">
947+
<path d="M10.1283 5.05809C10.9277 3.6473 13.0723 3.6473 13.8717 5.05809L21.2493 18.0661C21.4222 18.3709 21.5083 18.7127 21.4994 19.0582C21.4904 19.4038 21.3866 19.7412 21.1981 20.0377C21.0096 20.3341 20.7429 20.5795 20.4238 20.7499C20.1048 20.9203 19.7443 21.0099 19.3776 21.01H4.62239C4.25568 21.0099 3.89524 20.9203 3.57619 20.7499C3.25715 20.5795 2.99038 20.3341 2.80189 20.0377C2.6134 19.7412 2.50961 19.4038 2.50064 19.0582C2.49166 18.7127 2.57781 18.3709 2.75069 18.0661L10.1283 5.05809ZM12.2669 5.86637C12.2409 5.821 12.2024 5.7831 12.1554 5.75668C12.1084 5.73026 12.0547 5.71631 12 5.71631C11.9453 5.71631 11.8916 5.73026 11.8446 5.75668C11.7976 5.7831 11.7591 5.821 11.7331 5.86637L4.35552 18.8744C4.33081 18.9179 4.31846 18.9667 4.3197 19.016C4.32094 19.0654 4.33571 19.1136 4.36258 19.156C4.38946 19.1983 4.42751 19.2334 4.47304 19.2578C4.51857 19.2822 4.57002 19.295 4.62239 19.2951H19.3776C19.43 19.295 19.4814 19.2822 19.527 19.2578C19.5725 19.2334 19.6105 19.1983 19.6374 19.156C19.6643 19.1136 19.6791 19.0654 19.6803 19.016C19.6815 18.9667 19.6692 18.9179 19.6445 18.8744L12.2669 5.86637Z"></path>
948+
<path d="M12.8111 13.293V10.4348C12.8111 10.2074 12.7207 9.98933 12.5599 9.82853C12.3991 9.66773 12.181 9.57739 11.9536 9.57739C11.7262 9.57739 11.5081 9.66773 11.3473 9.82853C11.1865 9.98933 11.0962 10.2074 11.0962 10.4348V13.293C11.0962 13.5204 11.1865 13.7385 11.3473 13.8993C11.5081 14.0601 11.7262 14.1504 11.9536 14.1504C12.181 14.1504 12.3991 14.0601 12.5599 13.8993C12.7207 13.7385 12.8111 13.5204 12.8111 13.293Z"></path>
949+
<path d="M12.762 17.2454C12.9764 17.031 13.0969 16.7402 13.0969 16.437C13.0969 16.1337 12.9764 15.843 12.762 15.6285C12.5476 15.4141 12.2569 15.2937 11.9536 15.2937C11.6504 15.2937 11.3596 15.4141 11.1452 15.6285C10.9308 15.843 10.8104 16.1337 10.8104 16.437C10.8104 16.7402 10.9308 17.031 11.1452 17.2454C11.3596 17.4598 11.6504 17.5802 11.9536 17.5802C12.2569 17.5802 12.5476 17.4598 12.762 17.2454Z"></path>
950+
</g>
947951
</svg>
948952
`,
949953

‎live-view/live-view.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1192,8 +1192,15 @@ async function renderLiveViewMarkdown(file) {
11921192
typeof DOMPurify === 'undefined') {
11931193

11941194
// load markdown compiler
1195-
await loadScript('live-view/extensions/marked.min.js');
1195+
await loadScript('live-view/extensions/markdown/marked.min.js');
1196+
1197+
1198+
// apply markdown compiler extensions
11961199

1200+
marked.use(markedAlert());
1201+
marked.use(markedFootnote());
1202+
marked.use(markedBidi());
1203+
11971204
}
11981205

11991206

@@ -1206,7 +1213,6 @@ async function renderLiveViewMarkdown(file) {
12061213
frameDoc.body.innerHTML = html;
12071214

12081215
if (isMobile) frameDoc.body.classList.add('mobile');
1209-
setAttr(frameDoc.body, 'dir', 'auto');
12101216

12111217
frameDoc.body.querySelectorAll('a[href]:not([target="_blank"])').forEach(link => {
12121218

@@ -1253,7 +1259,7 @@ async function renderLiveViewMarkdown(file) {
12531259

12541260
fetchPromises.push((async (i) => {
12551261

1256-
await loadStyleSheet(window.location.origin + '/live-view/extensions/markdown-dark.css', frameDoc.head)
1262+
await loadStyleSheet(window.location.origin + '/live-view/extensions/markdown/markdown-dark.css', frameDoc.head)
12571263

12581264
fetchPromises.splice(i, 1);
12591265
})(fetchPromises.length));

‎service-worker.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22
// update worker name when updating cached files
3-
const WORKER_NAME = 'codeit-worker-v773';
3+
const WORKER_NAME = 'codeit-worker-v774';
44

55

66
self.importScripts('/worker/client-channel.js');
@@ -54,8 +54,8 @@ const FILES_TO_CACHE = [
5454
'/live-view/extensions/mobile-console/logger.js',
5555
'/live-view/extensions/mobile-console/safari-keyboard.js',
5656

57-
'/live-view/extensions/marked.min.js',
58-
'/live-view/extensions/markdown-dark.css',
57+
'/live-view/extensions/markdown/marked.min.js',
58+
'/live-view/extensions/markdown/markdown-dark.css',
5959

6060
'/editor-theme.css',
6161

0 commit comments

Comments
 (0)