pantsdown 1.7.2 → 1.8.1

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

@@ -8,10 +8,10 @@
 Pantsdown is a **Markdown** to **HTML** converter. It attempts to render markdown similar to how GitHub does it plus
 some features developed specifically for [github-preview.nvim](https://github.com/wallpants/github-preview.nvim).
 
-If you need a feature that's supported by GitHub and is not already listed in the [Roadmap](#roadmap),
+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
 
@@ -140,7 +140,6 @@ Without their hard work, Pantsdown would not exist.
 
 ## 🚀 Roadmap
 
+-   [ ] fix alerts css. see "alerts" in demo
 -   [ ] 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.2",
+  "version": "1.8.1",
   "author": "wallpants",
   "description": "Markdown to 'GitHub HTML' parser",
   "license": "MIT",
@@ -27,7 +27,7 @@
     }
   },
   "scripts": {
-    "format": "prettier **/*{ts,js} --write",
+    "format": "prettier **.{md,ts,css} -w",
     "lint": "tsc && eslint . --ext ts --report-unused-disable-directives --max-warnings 0",
     "commit": "cz",
     "docs:build": "bun run docs/build.ts"
@@ -43,15 +43,15 @@
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^12.10.3",
-    "@typescript-eslint/eslint-plugin": "^6.7.3",
-    "@typescript-eslint/parser": "^6.7.3",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
     "bun-types": "latest",
     "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.50.0",
-    "prettier": "^3.0.2",
+    "eslint": "^8.53.0",
+    "prettier": "^3.0.3",
     "prettier-plugin-organize-imports": "^3.2.3",
-    "semantic-release": "^22.0.5",
+    "semantic-release": "^22.0.7",
     "typescript": "5.2.2"
   }
 }

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/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 {

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

@@ -276,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" style="margin-right: 0.5rem;" 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" style="margin-right: 0.5rem;" 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" style="margin-right: 0.5rem;" 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>',
+    },
+];