pantsdown 1.7.1 → 1.8.0

package/LICENSE

@@ -22,6 +22,32 @@ THE SOFTWARE.
 
 ----------------------------------------------------
 
+marked-extensions (https://github.com/bent10/marked-extensions)
+
+The MIT License (MIT)
+
+Copyright (c) 2023 Stilearning (https://stilearning.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+----------------------------------------------------
+
 highlight.js (https://github.com/highlightjs/highlight.js)
 
 BSD 3-Clause License

package/README.md

@@ -11,9 +11,9 @@ some features developed specifically for [github-preview.nvim](https://github.co
 If you need a feature that's supported by GitHub and is not already listed in the [Roadmap](#roadmap),
 feel free to open an issue.
 
-### [Demo](https://wallpants.github.io/pantsdown/)
+## [▶️ Demo](https://wallpants.github.io/pantsdown/)
 
-## Installation
+## 📦 Installation
 
 🚨 Pantsdown is distributed only as a TypeScript module. This means you'll need a bundler to handle transpilation.
 See below for usage examples.
@@ -25,7 +25,7 @@ bun install pantsdown
 npm install pantsdown
 ```
 
-## Usage
+## 💻 Usage
 
 ### Styles
 
@@ -79,7 +79,7 @@ function App() {
         if (container) container.innerHTML = html;
     }, []);
 
-    // 🚨 for styles to be applied, a parent element must have
+    // ⚠️ for styles to be applied, a parent element must have
     // the classes "pantsdown light" or "pantsdown dark" added
     return <div id="markdown-container" className="pantsdown light" />;
 }
@@ -87,7 +87,7 @@ function App() {
 export default App;
 ```
 
-## Configuration
+## ⚙️ Configuration
 
 The Pantsdown constructor accepts an optional configuration object:
 
@@ -129,6 +129,18 @@ const html = pantsdown.parse(markdown);
 console.log(html);
 ```
 
-## Roadmap
+## 🤝 Acknowledgements
 
+<a href="https://marked.js.org">
+  <img width="60px" height="60px" src="https://marked.js.org/img/logo-black.svg" align="right" />
+</a>
+
+Pantsdown is based on [Marked](https://github.com/markedjs/marked).
+Without their hard work, Pantsdown would not exist.
+
+## 🚀 Roadmap
+
+-   [ ] check if copy code button works with current vite docs
+-   [ ] showcase more in demo | list features
+-   [ ] [Alerts](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts)
 -   [ ] [Mermaid](https://mermaid.js.org/) usage docs.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pantsdown",
-  "version": "1.7.1",
+  "version": "1.8.0",
   "author": "wallpants",
   "description": "Markdown to 'GitHub HTML' parser",
   "license": "MIT",

package/src/css/styles.css

@@ -19,9 +19,11 @@
     --color-neutral-muted: rgba(110, 118, 129, 0.4);
     --color-accent-fg: #2f81f7;
     --color-accent-emphasis: #1f6feb;
+    --color-fg-attention: #d29922;
     --color-attention-subtle: rgba(187, 128, 9, 0.15);
     --color-attention-muted: rgba(187, 128, 9, 0.4);
     --color-danger-fg: #f85149;
+    --color-done-fg: #a371f7;
     --color-icon-directory: #7d8590;
     --color-icon-file: #7d8590;
     --color-btn-bg: #21262d;
@@ -41,9 +43,11 @@
     --color-neutral-muted: rgba(175, 184, 193, 0.2);
     --color-accent-fg: #0969da;
     --color-accent-emphasis: #0969da;
+    --color-fg-attention: #9a6700;
     --color-attention-subtle: #fff8c5;
     --color-attention-muted: rgba(212, 167, 44, 0.4);
     --color-danger-fg: #d1242f;
+    --color-done-fg: #8250df;
     --color-icon-directory: #54aeff;
     --color-icon-file: #656d76;
     --color-btn-bg: #f6f8fa;
@@ -64,6 +68,41 @@
     word-wrap: break-word;
 }
 
+.pantsdown .markdown-alert {
+    border-left: 0.25em solid;
+    margin-bottom: 16px;
+    padding: 0 1em;
+    color: inherit;
+}
+
+.pantsdown .markdown-alert span {
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    margin-bottom: 4px;
+}
+
+.pantsdown .markdown-alert-note {
+    border-color: var(--color-accent-fg);
+}
+.pantsdown .markdown-alert-note span {
+    color: var(--color-accent-fg);
+}
+
+.pantsdown .markdown-alert-important {
+    border-color: var(--color-done-fg);
+}
+.pantsdown .markdown-alert-important span {
+    color: var(--color-done-fg);
+}
+
+.pantsdown .markdown-alert-warning {
+    border-color: var(--color-fg-attention);
+}
+.pantsdown .markdown-alert-warning span {
+    color: var(--color-fg-attention);
+}
+
 .pantsdown .copy-button {
     position: absolute;
     left: calc(100% - 36px);
@@ -113,6 +152,15 @@
     outline: none;
 }
 
+.pantsdown h1 a,
+.pantsdown h2 a,
+.pantsdown h3 a,
+.pantsdown h4 a,
+.pantsdown h5 a,
+.pantsdown h6 a {
+    text-decoration: none;
+}
+
 .pantsdown h1 .anchor.octicon-link:after,
 .pantsdown h2 .anchor.octicon-link:after,
 .pantsdown h3 .anchor.octicon-link:after,

package/src/parser.ts

@@ -75,6 +75,11 @@ export class Parser {
                     out += this.renderer.table(header, body);
                     continue;
                 }
+                case "alert": {
+                    const body = this.parse(token.tokens);
+                    out += this.renderer.alert(body, token);
+                    continue;
+                }
                 case "blockquote": {
                     const body = this.parse(token.tokens);
                     out += this.renderer.blockquote(body);

package/src/renderer.ts

@@ -52,6 +52,13 @@ export class Renderer {
         return injectHtmlAttributes(result, [], sourceMap);
     }
 
+    alert(body: string, token: Tokens["Alert"]): string {
+        const result = `<div>\n${body}</div>\n`;
+        return injectHtmlAttributes(result, [
+            ["class", `markdown-alert markdown-alert-${token.variant.toLowerCase()}`],
+        ]);
+    }
+
     blockquote(quote: string): string {
         return `<blockquote>\n${quote}</blockquote>\n`;
     }

package/src/rules/block.ts

@@ -111,10 +111,6 @@ const block_blockquote = edit(/^( {0,3}> ?(paragraph|[^\n]*)(?:\n|$))+/)
     .replace("paragraph", block_paragraph)
     .getRegex();
 
-const block_footnote = edit(/^( {0,3}\[\^(\d+)\]:(?:[ \t]+|[\n]*?|$)?(paragraph|[^\n]*))+/)
-    .replace("paragraph", block_paragraph)
-    .getRegex();
-
 export const block: Record<BlockRuleNames, RegExp> = {
     newline: /^(?: *(?:\n|$))+/,
     code: /^( {4}[^\n]+(?:\n(?: *(?:\n|$))*)?)+/,
@@ -130,6 +126,6 @@ export const block: Record<BlockRuleNames, RegExp> = {
     table: block_table,
     lheading: block_lheading,
     paragraph: block_paragraph,
-    footnote: block_footnote,
+    footnote: /^\[\^([^\]\n]+)\]:(?:[ \t]+|[\n]*?|$)([^\[\n]*?(?:\n|$)(?:[\n]*?[ ]{4,}[^\[\n]*)*)/,
     text: /^[^\n]+/,
 };

package/src/tokenizer.ts

@@ -3,6 +3,7 @@ import { block } from "./rules/block.ts";
 import { inline } from "./rules/inline.ts";
 import { type Links, type Tokens } from "./types.ts";
 import {
+    ALERTS,
     escape,
     findClosingBracket,
     indentCodeCompensation,
@@ -100,7 +101,7 @@ export class Tokenizer {
         };
     }
 
-    blockquote(src: string): Tokens["Blockquote"] | undefined {
+    blockquote(src: string): Tokens["Blockquote"] | Tokens["Alert"] | undefined {
         const cap = block.blockquote.exec(src);
         if (!cap) return undefined;
 
@@ -110,12 +111,42 @@ export class Tokenizer {
         const tokens = this.lexer.blockTokens(text, []);
         this.lexer.state.top = top;
         this.lexer.line++;
-        return {
+
+        const blockquoteToken: Tokens["Blockquote"] = {
             type: "blockquote",
             raw: cap[0],
             tokens,
             text,
         };
+
+        const matchedVariant = ALERTS.find(({ regex }) => regex.test(blockquoteToken.text));
+
+        if (matchedVariant) {
+            const { variant, icon, regex } = matchedVariant;
+
+            const firstLine = blockquoteToken.tokens[0] as Tokens["Paragraph"];
+            const firstLineText = firstLine.raw.replace(regex, "");
+            firstLine.tokens = [
+                {
+                    type: "text",
+                    raw: firstLine.raw,
+                    text: `<span>${icon + variant}</span>${firstLineText}`,
+                },
+            ];
+
+            const alertToken: Tokens["Alert"] = {
+                ...blockquoteToken,
+                type: "alert",
+                variant: variant as Tokens["Alert"]["variant"],
+                icon,
+            };
+
+            alertToken.tokens.splice(0, 1, firstLine);
+
+            return alertToken;
+        }
+
+        return blockquoteToken;
     }
 
     list(src: string): Tokens["List"] | undefined {
@@ -330,8 +361,8 @@ export class Tokenizer {
         const cap = block.footnote.exec(src);
         if (!cap) return undefined;
 
-        const label = cap[2] ?? "";
-        let text = cap[3] ? rtrim(cap[3].replace(/^ *[ \t]?/gm, ""), "\n") : "";
+        const label = cap[1] ?? "";
+        let text = cap[2] ? rtrim(cap[2].replace(/^ *[ \t]?/gm, ""), "\n") : "";
 
         text += `<a href="#footnote-ref-${encodeURIComponent(
             label,

package/src/types.ts

@@ -23,6 +23,14 @@ export interface Tokens extends Record<string, BaseToken> {
         lang?: string | undefined;
         sourceMap: SourceMap;
     };
+    Alert: {
+        type: "alert";
+        raw: string;
+        text: string;
+        icon: string;
+        tokens: Token[];
+        variant: "Note" | "Important" | "Warning";
+    };
     Heading: {
         type: "heading";
         raw: string;
@@ -203,6 +211,7 @@ export type Token =
     | Tokens["Codespan"]
     | Tokens["Br"]
     | Tokens["Del"]
+    | Tokens["Alert"]
     | Tokens["Footnote"]
     | Tokens["FootnoteRef"]
     | Tokens["Footnotes"];

package/src/utils.ts

@@ -98,6 +98,7 @@ export function fixLocalImageHref(
         return href;
     }
 
+    // TODO: do we need this?
     if (href.startsWith("/")) {
         // the URL is from root
         return href;
@@ -275,3 +276,25 @@ export function indentCodeCompensation(raw: string, text: string) {
         })
         .join("\n");
 }
+
+function makeAlertRegex(type: string) {
+    return new RegExp(`^(?:\\[\\!${type.toUpperCase()}\\]|[\\*]{2}${type}[\\*]{2})[\s]*?\n?`);
+}
+
+export const ALERTS = [
+    {
+        variant: "Note",
+        regex: makeAlertRegex("Note"),
+        icon: '<svg class="octicon octicon-info mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>',
+    },
+    {
+        variant: "Important",
+        regex: makeAlertRegex("Important"),
+        icon: '<svg class="octicon octicon-report mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>',
+    },
+    {
+        variant: "Warning",
+        regex: makeAlertRegex("Warning"),
+        icon: '<svg class="octicon octicon-alert mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg>',
+    },
+];