From ad30544e264a638974ceb5daed0e775c31552c6e Mon Sep 17 00:00:00 2001 From: Tuure Date: Mon, 22 Jul 2024 14:25:29 +0300 Subject: [PATCH 1/6] feat(#89): github alert markdown test section --- tests/markdown-additional.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/tests/markdown-additional.md b/tests/markdown-additional.md index 99c16dd6..b3bed8b1 100644 --- a/tests/markdown-additional.md +++ b/tests/markdown-additional.md @@ -32,3 +32,20 @@ Press Ctrl + C to copy, and Ctrl + V ## Custom attributes This paragraph has a red background color.{style=background-color:red} + +## Github alert blockquote + +> [!NOTE] +> Something to take into account + +> [!TIP] +> Did you know you can do this and that + +> [!IMPORTANT] +> Crucial information here + +> [!WARNING] +> Critical content demanding immediate attention + +> [!CAUTION] +> Do not do this and that! From f6e462f5e7baec5b1bdd99871eeb1b22468c9ea9 Mon Sep 17 00:00:00 2001 From: Tuure Date: Mon, 22 Jul 2024 14:33:29 +0300 Subject: [PATCH 2/6] feat(#89): github alerts plugin --- package.json | 1 + src/parser/markdown.ts | 3 +++ yarn.lock | 5 +++++ 3 files changed, 9 insertions(+) diff --git a/package.json b/package.json index cc233cd6..e4ca57ec 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "markdown-it-deflist": "^3.0.0", "markdown-it-emoji": "^3.0.0", "markdown-it-footnote": "^4.0.0", + "markdown-it-github-alerts": "^0.3.0", "markdown-it-inject-linenumbers": "^0.3.0", "markdown-it-mark": "^4.0.0", "markdown-it-sub": "^2.0.0", diff --git a/src/parser/markdown.ts b/src/parser/markdown.ts index 2b839abb..5a567734 100644 --- a/src/parser/markdown.ts +++ b/src/parser/markdown.ts @@ -54,6 +54,9 @@ mdit.use(attributes); // MARK: untyped plugins done +import githubAlerts from 'markdown-it-github-alerts'; +mdit.use(githubAlerts); + // anchor has to be added after attribute plugin for ids to work mdit.use(anchor, { permalink: anchor.permalink.ariaHidden({ diff --git a/yarn.lock b/yarn.lock index 0a7c953a..b5fceac1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1762,6 +1762,11 @@ markdown-it-footnote@^4.0.0: resolved "https://registry.yarnpkg.com/markdown-it-footnote/-/markdown-it-footnote-4.0.0.tgz#02ede0cb68a42d7e7774c3abdc72d77aaa24c531" integrity sha512-WYJ7urf+khJYl3DqofQpYfEYkZKbmXmwxQV8c8mO/hGIhgZ1wOe7R4HLFNwqx7TjILbnC98fuyeSsin19JdFcQ== +markdown-it-github-alerts@^0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/markdown-it-github-alerts/-/markdown-it-github-alerts-0.3.0.tgz#acab7db57f4e204c8d1c987403c367738d7026b0" + integrity sha512-qyIuDyfdrVGHhY+E/44yMyNA3ZnayaT/KKT2VgkIz1nmrgiuPkdgPUh4YBZwgJ9VKEGJvGd82Ndrc4oGftrJWg== + markdown-it-inject-linenumbers@^0.3.0: version "0.3.0" resolved "https://registry.yarnpkg.com/markdown-it-inject-linenumbers/-/markdown-it-inject-linenumbers-0.3.0.tgz#654364fa7a2dcb5f4461ef6d29d2603b74b29fd7" From 6440deace01cafbd49608764fa380bdc268639a1 Mon Sep 17 00:00:00 2001 From: Tuure Date: Mon, 22 Jul 2024 15:20:33 +0300 Subject: [PATCH 3/6] refactor(#89): clean up error descriptions and move import --- src/parser/markdown.ts | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/src/parser/markdown.ts b/src/parser/markdown.ts index 5a567734..69ee1387 100644 --- a/src/parser/markdown.ts +++ b/src/parser/markdown.ts @@ -2,6 +2,7 @@ import MarkdownIt from 'markdown-it'; import anchor from 'markdown-it-anchor'; import highlight from './highlight.js'; import graphviz from './dot.js'; +import githubAlerts from 'markdown-it-github-alerts'; import config from './config.js'; import { Renderer } from './parser.js'; @@ -15,48 +16,45 @@ const mdit = new MarkdownIt({ // ts-expect-error for blocks so this is ugly: // https://github.com/Microsoft/TypeScript/issues/19573 -/* @ts-expect-error: markdown-it modules aren't typed */ +/* @ts-expect-error: module not typed */ import { full as emoji } from 'markdown-it-emoji'; mdit.use(emoji); -/* @ts-expect-error: markdown-it modules aren't typed */ +/* @ts-expect-error: module not typed */ import taskLists from 'markdown-it-task-lists'; mdit.use(taskLists); -/* @ts-expect-error: markdown-it modules aren't typed */ +/* @ts-expect-error: module not typed */ import footNote from 'markdown-it-footnote'; mdit.use(footNote); -/* @ts-expect-error: markdown-it modules aren't typed */ +/* @ts-expect-error: most module not typed */ import lineNumbers from 'markdown-it-inject-linenumbers'; mdit.use(lineNumbers); -/* @ts-expect-error: markdown-it modules aren't typed */ +/* @ts-expect-error: module not typed */ import texMath from 'markdown-it-texmath'; -/* @ts-expect-error: markdown-it modules aren't typed */ +/* @ts-expect-error: module not typed */ import katex from 'katex'; mdit.use(texMath, { engine: katex, delimiters: 'dollars', katexOptions: config.katexOptions, }); -/* @ts-expect-error: markdown-it modules aren't typed */ +/* @ts-expect-error: module not typed */ import defList from 'markdown-it-deflist'; mdit.use(defList); -/* @ts-expect-error: markdown-it modules aren't typed */ +/* @ts-expect-error: module not typed */ import sub from 'markdown-it-sub'; mdit.use(sub); -/* @ts-expect-error: markdown-it modules aren't typed */ +/* @ts-expect-error: module not typed */ import sup from 'markdown-it-sup'; mdit.use(sup); -/* @ts-expect-error: markdown-it modules aren't typed */ +/* @ts-expect-error: module not typed */ import mark from 'markdown-it-mark'; mdit.use(mark); -/* @ts-expect-error: markdown-it modules aren't typed */ +/* @ts-expect-error: module not typed */ import attributes from 'markdown-it-attrs'; mdit.use(attributes); // MARK: untyped plugins done -import githubAlerts from 'markdown-it-github-alerts'; -mdit.use(githubAlerts); - // anchor has to be added after attribute plugin for ids to work mdit.use(anchor, { permalink: anchor.permalink.ariaHidden({ @@ -64,6 +62,7 @@ mdit.use(anchor, { }), }); mdit.use(graphviz); +mdit.use(githubAlerts); const renderMarkdown: Renderer = (content: string) => { return mdit.render(content); From 5b7d866410133d24143d92879ff75312e3e1baf9 Mon Sep 17 00:00:00 2001 From: Tuure Date: Mon, 22 Jul 2024 16:06:10 +0300 Subject: [PATCH 4/6] feat(#89): add example with custom title --- tests/markdown-additional.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/tests/markdown-additional.md b/tests/markdown-additional.md index b3bed8b1..87d7808a 100644 --- a/tests/markdown-additional.md +++ b/tests/markdown-additional.md @@ -49,3 +49,8 @@ This paragraph has a red background color.{style=background-color:red} > [!CAUTION] > Do not do this and that! + +With a custom title: + +> [!NOTE] Foo bar +> Hello From 25bbe2c1dbd1f8e3f4a75fedce6a01d5ae59ed8d Mon Sep 17 00:00:00 2001 From: Tuure Date: Mon, 22 Jul 2024 22:26:19 +0300 Subject: [PATCH 5/6] feat(#89): github alert styles --- static/style.css | 89 ++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 79 insertions(+), 10 deletions(-) diff --git a/static/style.css b/static/style.css index bee9dc94..415d34ee 100644 --- a/static/style.css +++ b/static/style.css @@ -1,3 +1,11 @@ +:root { + --color-alert-note: #a5d5fe; + --color-alert-tip: #b4fa72; + --color-alert-important: #ff8ffd; + --color-alert-warning: #fefdc2; + --color-alert-caution: #ff8272; +} + html { background-color: black; color: #aaa; @@ -122,7 +130,6 @@ section.footnotes { /* -------------------------------------------------------------------------- * DEFIITION LISTS ---------------------------------------------------------- */ - dl { display: flex; flex-flow: row wrap; @@ -158,6 +165,68 @@ dt + dt + dd { margin-top: -2.25em; /* Align definition with last term */ } /* Self height - margin - padding */ +/* -------------------------------------------------------------------------- + * QUOTES AND ALERTS--------------------------------------------------------- */ +blockquote { + padding: 0 1rem; + color: #6a6a6a; + border-left: .25rem solid #353535; + margin-left: 0; +} +/* GitHub-style alerts */ +.markdown-alert { + padding: 0.5rem 1rem; + margin-bottom: 1rem; +} +.markdown-alert > :first-child { + margin-top: 0; +} +.markdown-alert > :last-child { + margin-bottom: 0; +} +.markdown-alert .markdown-alert-title { + display: flex; + font-weight: 500; + align-items: center; + line-height: 1; +} +.markdown-alert .markdown-alert-title .octicon { + margin-right: 0.5rem; + display: inline-block; + overflow: visible !important; + vertical-align: text-bottom; + fill: currentColor; +} +.markdown-alert-note { + border-left: .25rem solid var(--color-alert-note); +} +.markdown-alert-note .markdown-alert-title { + color: var(--color-alert-note); +} +.markdown-alert-tip { + border-left: .25rem solid var(--color-alert-tip); +} +.markdown-alert-tip .markdown-alert-title { + color: var(--color-alert-tip); +} +.markdown-alert-important { + border-left: .25rem solid var(--color-alert-important); +} +.markdown-alert-important .markdown-alert-title { + color: var(--color-alert-important); +} +.markdown-alert-warning { + border-left: .25rem solid var(--color-alert-warning); +} +.markdown-alert-warning .markdown-alert-title { + color: var(--color-alert-warning); +} +.markdown-alert-caution { + border-left: .25rem solid var(--color-alert-caution); +} +.markdown-alert-caution .markdown-alert-title { + color: var(--color-alert-caution); +} /* -------------------------------------------------------------------------- * MISCELLANEOUS ------------------------------------------------------------ */ /* headings */ @@ -165,13 +234,6 @@ h1, h2 { border-bottom: 0.2px solid #444; padding-bottom: 0.75rem; } -/* quotes */ -blockquote { - padding: 0 1em; - color: #6a6a6a; - border-left: .25em solid #353535; - margin-left: 0 -} /* images */ img, svg { max-width: 100%; } @@ -186,13 +248,20 @@ kbd { /* highlight/mark */ mark { - background-color: rgba(255, 255, 175, 0.8); - color: #222; + background-color: rgba(255, 255, 175, 0.8); + color: #222; } /* -------------------------------------------------------------------------- * LIGHT MODE --------------------------------------------------------------- */ @media (prefers-color-scheme: light) { + :root { + --color-alert-note: #0969da; + --color-alert-tip: #1a7f37; + --color-alert-important: #8250df; + --color-alert-warning: #bf8700; + --color-alert-caution: #cf222e; + } html { background-color: white; color: #1f2328; From 01366e7bb81a49f64feaeef694b4ae06dcd80790 Mon Sep 17 00:00:00 2001 From: Tuure Date: Thu, 25 Jul 2024 18:10:52 +0300 Subject: [PATCH 6/6] feat(#89): update dark theme colors --- static/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/static/style.css b/static/style.css index 415d34ee..1b05c4d1 100644 --- a/static/style.css +++ b/static/style.css @@ -2,8 +2,8 @@ --color-alert-note: #a5d5fe; --color-alert-tip: #b4fa72; --color-alert-important: #ff8ffd; - --color-alert-warning: #fefdc2; - --color-alert-caution: #ff8272; + --color-alert-warning: #ffaf00; + --color-alert-caution: #ff5f5f; } html {