Merge 47e64b04a1 into 53d6e18e81

2025-12-23 12:54:06 -06:00 · 2025-08-10 06:22:27 +00:00 · 2025-08-10 06:22:27 +00:00 · 54df4c7218
commit 54df4c7218
parent 53d6e18e81 47e64b04a1
7 changed files with 827 additions and 1 deletions
--- a/docs/plugins/InlineBadges.md
+++ b/docs/plugins/InlineBadges.md
@ -0,0 +1,79 @@
+---
+title: InlineBadges
+tags:
+  - plugin/transformer
+---
+
+This plugin allows the user to create multipurpose badges that can be used within inline text.
+
+> [!note]
+> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page.
+
+## Syntax
+
+A badge may be used in line with the following syntax, within an inline code block:
+
+```md
+`[!!KEY:TEXT]` -> Normal badges
+`[!!|ghs>SUBTEXT:TEXT]` -> Github Success
+`[!!|ghb>SUBTEXT:TEXT]` -> Github Blue
+`[!!|KEY:TEXT]` -> Plaintext
+`[!!|ICON|ARIA:TEXT|COLOR-RGB]` -> Custom icon. Color can be a CSS Variable, eg. `var(--color-red-rgb)`
+```
+
+- `KEY` defines the name of the preset to be used, which are equal to the [obsidian callout types](https://help.obsidian.md/callouts#Supported+types).
+- `TEXT` and `SUBTEXT` can be any text of your choosing. They cannot contain the `|` character as it is the main delimiter.
+- `ICON` is the name of the [lucide icon](https://lucide.dev/) to be used.[^1]
+- `ARIA` defines the name of the aria label used for the badge (Not visible to the end user).
+- `COLOR-RGB` is a HTML color, such as `256, 12, 32`.
+- `ghs` and `ghb` should not be changed, as they define what colour is to be used.
+
+### Examples:
+
+```md
+`[!!note:There is no such thing as genuine questions]`
+`[!!|ghs>checks:success]`
+`[!!|ghb>contributors:52]`
+`[!!|warning:Don't say that I didn't tell you.]`
+`[!!|menu|menu-item:Go to Settings > Delete Account|140, 200, 110]`
+```
+
+```md
+What is `[!!danger:love]`?
+```
+
+## Configuration
+
+This plugin accepts the following configuration options:
+
+- `customBadges`, an array of objects that defines custom badge types, along with their colours and icon.
+
+### Badge Object
+
+A badge object is defined like so:
+
+```ts
+{
+  name: "foobar",
+  icon: "icon_name",
+  color: [10, 10, 10, 1],
+  textOpacity: 0.117,
+}
+```
+
+Where `foobar` is the name of the badge, `icon` is the name of the [lucide icon](https://lucide.dev/)[^1] to be used, `color` is an array defining the background colour in the format `[RED, GREEN, BLUE, ALPHA]`[^2]
+These custom badges can now be used with the syntax
+
+```md
+`[!!foobar:text-here]`
+```
+
+## API
+
+- Category: Transformer
+- Function name: `Plugin.InlineBadges()`
+- Source: N/A
+
+[^1]: The name must be in lower case. That is, use `accessibility` instead of `Accessibility`, `lucide-accessibility` or `LiAccessibility` (The plugin may not accept them!)
+
+[^2]: Note that `ALPHA` only goes from `0` to `1`, whereas the rest go from `0` to `256`
--- a/package-lock.json
+++ b/package-lock.json
@ -83,6 +83,7 @@
        "@types/source-map-support": "^0.5.10",
        "@types/ws": "^8.18.1",
        "@types/yargs": "^17.0.33",
+        "lucide-static": "0.511.0",
        "esbuild": "^0.25.8",
        "prettier": "^3.6.2",
        "tsx": "^4.20.3",
@ -4221,6 +4222,13 @@
        "url": "https://github.com/sponsors/wooorm"
      }
    },
+    "node_modules/lucide-static": {
+      "version": "0.511.0",
+      "resolved": "https://registry.npmjs.org/lucide-static/-/lucide-static-0.511.0.tgz",
+      "integrity": "sha512-/MWOjEyGZO84B16BeqbeleinbmeYxOBsbYDt/Yk6xGwMYwDm6dx43jKHMxGDqW9U84qWL13dNvVW0SMADhUSyg==",
+      "dev": true,
+      "license": "ISC"
+    },
    "node_modules/markdown-table": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.3.tgz",
--- a/package.json
+++ b/package.json
@ -109,6 +109,7 @@
    "esbuild": "^0.25.8",
    "prettier": "^3.6.2",
    "tsx": "^4.20.3",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "lucide-static": "0.511.0"
  }
 }
--- a/quartz.config.ts
+++ b/quartz.config.ts
@ -72,6 +72,7 @@ const config: QuartzConfig = {
      Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }),
      Plugin.Description(),
      Plugin.Latex({ renderEngine: "katex" }),
+      Plugin.InlineBadges(),
    ],
    filters: [Plugin.RemoveDrafts()],
    emitters: [
--- a/quartz/plugins/transformers/badges.ts
+++ b/quartz/plugins/transformers/badges.ts
@ -0,0 +1,281 @@
+import { QuartzTransformerPlugin } from "../types"
+import badgesCSS from "../../styles/badges.scss"
+import { JSResource, CSSResource } from "../../util/resources"
+import icons from "lucide-static"
+
+export const BADGE_TYPES: [string, string, string][] = [
+  ["note", "Note", "lucide-pencil"],
+  ["info", "Info", "lucide-info"],
+  ["todo", "Todo", "lucide-check-circle-2"],
+  ["abstract", "Abstract", "lucide-clipboard-list"],
+  ["summary", "Summary", "lucide-clipboard-list"],
+  ["tldr", "TLDR", "lucide-clipboard-list"],
+  ["tip", "Tip", "lucide-flame"],
+  ["hint", "Hint", "lucide-flame"],
+  ["important", "Important", "lucide-flame"],
+  ["success", "Success", "lucide-check"],
+  ["check", "Check", "lucide-check"],
+  ["done", "Done", "lucide-check"],
+  ["question", "Question", "help-circle"],
+  ["help", "Help", "help-circle"],
+  ["faq", "FAQ", "help-circle"],
+  ["warning", "Warning", "lucide-alert-triangle"],
+  ["caution", "Caution", "lucide-alert-triangle"],
+  ["attention", "Attention", "lucide-alert-triangle"],
+  ["failure", "Failure", "lucide-x"],
+  ["fail", "Fail", "lucide-x"],
+  ["missing", "Missing", "lucide-x"],
+  ["danger", "Danger", "lucide-zap"],
+  ["error", "Error", "lucide-zap"],
+  ["bug", "Bug", "lucide-bug"],
+  ["example", "Example", "lucide-list"],
+  ["quote", "Quote", "quote-glyph"],
+  ["cite", "Cite", "quote-glyph"],
+  ["power", "Power", "lucide-power"],
+  ["verse", "Verse", "lucide-music"],
+  ["complete", "Complete", "lucide-check-circle"],
+  ["milestone", "Milestone", "lucide-milestone"],
+  ["component", "Component", "lucide-toy-brick"],
+  ["polish", "Polish", "lucide-car"],
+  ["point", "point", "lucide-pointer"],
+  ["dream", "Dream", "lucide-moon"],
+  ["process", "Process", "lucide-clock"],
+  ["refine", "Refine", "lucide-axe"],
+  ["image", "Image", "lucide-image"],
+  ["party", "Party", "lucide-party-popper"],
+  ["crystallize", "Crystallize", "lucide-diamond"],
+  ["definition", "Definition", "lucide-key"],
+  ["mention", "Mention", "lucide-at-sign"],
+  ["exclaim", "Exclaim", "lucide-megaphone"],
+  ["meta", "Meta", "lucide-filter"],
+  ["compute", "Compute", "lucide-hourglass"],
+  ["emergency", "Emergency", "lucide-siren"],
+  ["magnet", "Magnet", "lucide-magnet"],
+  ["flag", "Flag", "flag"],
+  ["branch", "Branch", "network"],
+  ["snippet", "Snippet", "scissors"],
+  ["lock", "Lock", "lock"],
+  ["highlight", "Highlight", "highlighter"],
+  ["clue", "Clue", "puzzle"],
+  ["claim", "Claim", "anchor"],
+  ["profile", "Profile", "lucide-user"],
+  ["hat-tip", "Hat-tip", "hard-hat"],
+  ["dig", "Dig", "shovel"],
+  ["witness", "Witness", "edit-3"],
+  ["notice", "Notice", "pen-tool"],
+  ["attachment", "Attachment", "paperclip"],
+  ["lightbulb", "Lightbulb", "lightbulb"],
+  ["prohibit", "Prohibit", "ban"],
+  ["stop", "Stop", "lucide-alert-octagon"],
+  ["bomb", "Bomb", "lucide-bomb"],
+  ["hold", "Hold", "lucide-hand"],
+  ["charge", "Charge", "lucide-zap"],
+  ["sprout", "Sprout", "lucide-sprout"],
+  ["extract", "Extract", "lucide-hammer"],
+  ["compass", "Compass", "lucide-compass"],
+  ["map", "Map", "lucide-map"],
+  ["expedition", "Expedition", "lucide-mountain-snow"],
+  ["home", "Home", "lucide-home"],
+  ["knowledge", "Knowledge", "lucide-book"],
+  ["account", "Account", "open-vault"],
+  ["judgment", "Judgment", "lucide-gavel"],
+  ["balance", "Balance", "lucide-scale"],
+  ["feast", "Feast", "lucide-grape"],
+  ["gift", "Gift", "lucide-gift"],
+  ["love", "Love", "lucide-heart"],
+  ["specimen", "Specimen", "lucide-gem"],
+  ["command", "Command", "lucide-swords"],
+  ["deed", "Deed", "lucide-scroll"],
+  ["honor", "Honor", "lucide-sword"],
+  ["reward", "Reward", "lucide-crown"],
+  ["customized", "Customized", "hash"],
+  ["vault", "Vault", "vault"],
+]
+
+var allBadges: [string, string, string][] = BADGE_TYPES //Append custom badges to the end of this array.
+
+// Catches all badge blocks with syntax `[!!...]` but not `[!!]
+const REGEXP = /\`\[!!([^\]]+)\]\`/gm
+
+// Catches all multiline code blocks
+const FENCED_CODE_REGEX = /(```[\s\S]*?```|~~~[\s\S]*?~~~)/gm
+
+export interface Options {
+  customBadges: Array<{
+    name: string
+    icon: string
+    color: [number, number, number, number]
+    textOpacity: number
+  }>
+}
+
+const defaultOptions: Options = {
+  customBadges: [],
+}
+
+export const InlineBadges: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => {
+  const opts = { ...defaultOptions, ...userOpts }
+
+  return {
+    name: "InlineBadges",
+    textTransform(_ctx, src) {
+      // Append custom badges.
+      for (let badge of opts.customBadges) {
+        allBadges.push([badge.name, badge.name, badge.icon]) // Pushes it to the array in the format.
+      }
+
+      // Required later to ensure we don't change badges that are within multiline code blocks
+      const fencedCodeBlocks: Array<[number, number]> = []
+      for (const match of src.matchAll(FENCED_CODE_REGEX)) {
+        fencedCodeBlocks.push([match.index!, match.index! + match[0].length])
+      }
+      // Helper to check if a given index is inside any code block
+      function isInFencedBlock(idx: number) {
+        return fencedCodeBlocks.some(([start, end]) => idx >= start && idx < end)
+      }
+
+      let lastIndex = 0 //Last code block that was checked
+      let srcReplacement = "" //Build the source text from this.
+
+      for (const match of src.matchAll(REGEXP)) {
+        const matchIndex = match.index!
+        const matchEnd = matchIndex + match[0].length
+
+        if (!isInFencedBlock(matchIndex)) {
+          srcReplacement += src.slice(lastIndex, matchIndex)
+          srcReplacement += buildBadge(match[0].replaceAll("`", "")) //Get rid of trailing code block syntax.
+          lastIndex = matchEnd
+        }
+      }
+
+      srcReplacement += src.slice(lastIndex)
+      return srcReplacement
+    },
+    externalResources() {
+      // Required for proper rendering under themes.
+      const js: JSResource[] = []
+      const css: CSSResource[] = []
+
+      css.push({
+        content: badgesCSS,
+        inline: true,
+      })
+      // Sets the colour of custom badges.
+      for (let badgeDef of opts.customBadges) {
+        let badgeColor: string = `${badgeDef.color[0]},${badgeDef.color[1]},${badgeDef.color[2]}`
+        let textColor: string = `rgba(var(--badge-color),${badgeDef.textOpacity})`
+        let badgeName: string = badgeDef.name
+        css.push({
+          content: `.inline-badge[data-inline-badge=${badgeName}] {
+                      --badge-color: ${badgeColor};
+                      color: rgba(var(--badge-color), ${badgeDef.color[3]});
+                      background-color: ${textColor};
+                    }`,
+          inline: true,
+        })
+      }
+      return { js, css }
+    },
+  }
+}
+
+function buildBadge(text: string) {
+  // HTML Elements
+  let newEl = ""
+  let iconEl = ""
+  let titleEl = ""
+  let textEl = ""
+  let attrType = ""
+  let part: string = text?.substring(2) ?? ""
+  let content: string = part?.substring(part.length - 1, 1).trim() ?? ""
+  let styleAttr = ""
+
+  // no content
+  if (!content.length) {
+    newEl = "<span>Badges syntax error</span>"
+    return newEl
+  }
+
+  let parts: string[] = content.split(":", 2)
+  // return if NO CONTENT
+  if (parts.length < 2) {
+    newEl = `<span style="color:var(--text-error)">❌ Badges syntax error</span>`
+    return newEl
+  }
+
+  // type of badge
+  let badgeType: string = parts[0].trim()
+  // build and check for extras
+  let extras: string[] = badgeType.split("|")
+  let hasExtra: boolean = extras.length > 1
+  // title value for badge
+  let badgeContent: string = parts[1].trim().split("|")[0] //Original code doesnt have .split[...] but for some reason its needed for proper rendering.
+
+  // custom badge
+  if (extras.length == 3) {
+    //icon
+    iconEl = `<span class="inline-badge-icon" aria-label="${extras[2]}">${getLucideIconSvg(extras[1])}</span>`
+    attrType = "customized"
+
+    // details
+    let details: any[] = parts[1].split("|")
+
+    //title
+    let title: string = details[0].trim()
+    titleEl = `<span class="inline-badge-title-inner">${title}</span>`
+
+    // color
+    let color: string = "currentColor"
+    if (details[1]) {
+      color = details[1].trim()
+    }
+
+    styleAttr = `style="--customize-badge-color: ${color};"`
+  } else {
+    if (hasExtra) {
+      // Github badges
+      if (extras[1].startsWith("ghb>") || extras[1].startsWith("ghs>")) {
+        let ghType: string = extras[1].split(">")[1].trim()
+        iconEl = `<span class="inline-badge-icon" aria-label="Github">${getLucideIconSvg("github")}</span>`
+        textEl = `<span class="gh-type">${ghType}</span>`
+        attrType = extras[1].startsWith("ghb>") ? "github" : "github-success"
+        badgeType = extras[1].startsWith("ghb>") ? "github" : "github-success"
+      } else {
+        // No icon, text only
+        iconEl = `<span>${badgeType.split("|")[1].trim()}</span>`
+        attrType = "text"
+        badgeType = "text"
+      }
+    } else {
+      // Non-github
+      attrType = badgeType.trim()
+      allBadges.forEach((el) => {
+        if (el.indexOf(badgeType.toLowerCase()) == 0 && el[2].length > 0) {
+          iconEl = `<span class="inline-badge-icon" aria-label=${badgeType.trim()}>${getLucideIconSvg(el[2])}</span>`
+        }
+      })
+    }
+  }
+  // render
+  titleEl = `<span class="inline-badge-title-inner">${badgeContent}</span>`
+  newEl = `<span class="inline-badge" data-inline-badge="${attrType.toLowerCase()}" ${styleAttr}>${iconEl}${textEl}${titleEl}</span>`
+  return newEl
+}
+
+function getLucideIconSvg(iconName: string): string {
+  var potentialIconReturn =
+    icons[toPascalCase(iconName.replace(/^lucide-/, "")) as keyof typeof icons]
+  if (potentialIconReturn) {
+    var iconToReturn = potentialIconReturn.replace(/\n/g, "").replace("  ", " ")
+    return iconToReturn
+  } else {
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ban-icon lucide-ban"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></svg>`
+  }
+}
+
+function toPascalCase(str: string): string {
+  // First, convert kebab-case to camelCase
+  const camelCaseStr = str.replace(/-([a-z])/g, (g) => g[1].toUpperCase())
+  // Then, capitalize the first letter to make it PascalCase
+  return camelCaseStr.charAt(0).toUpperCase() + camelCaseStr.slice(1)
+}
--- a/quartz/plugins/transformers/index.ts
+++ b/quartz/plugins/transformers/index.ts
@ -11,3 +11,4 @@ export { SyntaxHighlighting } from "./syntax"
 export { TableOfContents } from "./toc"
 export { HardLineBreaks } from "./linebreaks"
 export { RoamFlavoredMarkdown } from "./roam"
+export { InlineBadges } from "./badges"
--- a/quartz/styles/badges.scss
+++ b/quartz/styles/badges.scss
@ -0,0 +1,455 @@
+:root {
+  body {
+    --radius-l: 12px;
+    --radius-m: 8px;
+    --radius-s: 4px;
+    a.external .external-icon {
+      height: 0px;
+      margin: 0em;
+      display: none;
+    }
+  }
+}
+
+:root {
+  --color-blue: #448aff;
+  --color-blue-rgb: 68, 138, 256;
+  --color-cyan: #00b0ff;
+  --color-cyan-rgb: 00, 176, 256;
+  --color-green: #09ad7a;
+  --color-green-rgb: 9, 173, 122;
+  --color-orange: #db8942;
+  --color-orange-rgb: 219, 137, 66;
+  --color-pink: #fa99cd;
+  --color-pink-rgb: 250, 153, 205;
+  --color-purple: #7a43b5;
+  --color-purple-rgb: 122, 67, 181;
+  --color-red: #db4242;
+  --color-red-rgb: 219, 66, 66;
+  --color-yellow: #dba642;
+  --color-yellow-rgb: 219, 166, 66;
+}
+
+body {
+  --inline-badge-border-color: transparent;
+  --inline-badge-font-size: 0.8em;
+  --inline-badge-border-radius: var(--radius-s);
+  --inline-badge-border: 1px solid var(--inline-badge-border-color);
+}
+.inline-badge {
+  display: inline-flex;
+  margin: 0;
+  padding: 0;
+  vertical-align: middle;
+  border-radius: var(--inline-badge-border-radius);
+  font-weight: 500;
+  border: var(--inline-badge-border);
+  cursor: default;
+}
+.inline-badge .inline-badge-extra::after {
+  content: ":";
+}
+.inline-badge .gh-type {
+  display: inline-block !important;
+  font-size: var(--inline-badge-font-size);
+  padding-right: 0.5em;
+  padding-top: 0.15em;
+  /* color: var(--color-blue); */
+}
+.inline-badge .inline-badge-extra {
+  display: inline-block !important;
+  font-size: var(--inline-badge-font-size);
+  padding-inline: 0.5em;
+  padding-top: 0.15em;
+  font-family: inherit;
+}
+.inline-badge .inline-badge-icon {
+  padding: 0.3em;
+}
+.inline-badge .inline-badge-icon svg {
+  width: 14px;
+  height: 14px;
+  display: flex;
+  align-self: center;
+}
+
+.inline-badge .inline-badge-extra,
+.inline-badge .inline-badge-icon {
+  display: inline-flex !important;
+}
+.inline-badge .inline-badge-title-inner {
+  display: inline-block !important;
+  font-size: var(--inline-badge-font-size);
+  font-weight: inherit;
+  padding-right: 5px;
+  padding-top: 2px;
+}
+.inline-badge[data-inline-badge="info"],
+.inline-badge[data-inline-badge="todo"],
+.inline-badge[data-inline-badge="note"] {
+  color: rgba(var(--color-blue-rgb), 1);
+  background-color: rgba(var(--color-blue-rgb), 0.123);
+}
+.inline-badge[data-inline-badge="example"] {
+  color: rgba(var(--color-purple-rgb), 1);
+  background-color: rgba(var(--color-purple-rgb), 0.123);
+}
+.inline-badge[data-inline-badge="abstract"],
+.inline-badge[data-inline-badge="summary"],
+.inline-badge[data-inline-badge="tldr"],
+.inline-badge[data-inline-badge="tip"],
+.inline-badge[data-inline-badge="hint"],
+.inline-badge[data-inline-badge="important"] {
+  color: rgba(var(--color-cyan-rgb), 1);
+  background-color: rgba(var(--color-cyan-rgb), 0.133);
+}
+.inline-badge[data-inline-badge="success"],
+.inline-badge[data-inline-badge="check"],
+.inline-badge[data-inline-badge="done"] {
+  color: rgba(var(--color-green-rgb), 1);
+  background-color: rgba(var(--color-green-rgb), 0.123);
+}
+.inline-badge[data-inline-badge="question"],
+.inline-badge[data-inline-badge="help"],
+.inline-badge[data-inline-badge="faq"] {
+  color: rgba(var(--color-yellow-rgb), 1);
+  background-color: rgba(var(--color-yellow-rgb), 0.123);
+}
+.inline-badge[data-inline-badge="warning"],
+.inline-badge[data-inline-badge="caution"],
+.inline-badge[data-inline-badge="attention"] {
+  color: rgba(var(--color-orange-rgb), 1);
+  background-color: rgba(var(--color-orange-rgb), 0.123);
+}
+.inline-badge[data-inline-badge="failure"],
+.inline-badge[data-inline-badge="fail"],
+.inline-badge[data-inline-badge="missing"],
+.inline-badge[data-inline-badge="bug"],
+.inline-badge[data-inline-badge="error"],
+.inline-badge[data-inline-badge="danger"] {
+  color: rgba(var(--color-red-rgb), 1);
+  background-color: rgba(var(--color-red-rgb), 0.123);
+}
+.inline-badge[data-inline-badge^="power"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 70, 164, 115;
+}
+.inline-badge[data-inline-badge^="verse"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 80, 181, 132;
+}
+.inline-badge[data-inline-badge^="complete"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 78, 182, 127;
+}
+.inline-badge[data-inline-badge^="milestone"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 70, 164, 115;
+}
+.inline-badge[data-inline-badge^="component"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 22, 195, 221;
+}
+.inline-badge[data-inline-badge^="polish"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 26, 194, 225;
+}
+.inline-badge[data-inline-badge^="refine"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 0, 177, 206;
+}
+.inline-badge[data-inline-badge^="process"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 0, 176, 210;
+}
+.inline-badge[data-inline-badge^="dream"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 0, 179, 194;
+}
+.inline-badge[data-inline-badge^="point"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 0, 196, 215;
+}
+.inline-badge[data-inline-badge^="crystallize"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 0, 160, 190;
+}
+.inline-badge[data-inline-badge^="party"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 0, 160, 186;
+}
+.inline-badge[data-inline-badge^="image"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 0, 162, 175;
+}
+.inline-badge[data-inline-badge^="compute"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+  --badge-color: 97, 163, 230;
+}
+.inline-badge[data-inline-badge^="meta"] {
+  --badge-color: 100, 141, 213;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.168);
+}
+.inline-badge[data-inline-badge^="definition"] {
+  --badge-color: 122, 155, 236;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="expedition"] {
+  --badge-color: 100, 141, 213;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="map"] {
+  --badge-color: 140, 150, 236;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="compass"] {
+  --badge-color: 140, 150, 236;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="knowledge"] {
+  --badge-color: 97, 163, 230;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="home"] {
+  --badge-color: 182, 156, 246;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="account"] {
+  --badge-color: 204, 148, 230;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="judgment"] {
+  --badge-color: 148, 129, 204;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="balance"] {
+  --badge-color: 164, 143, 225;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="feast"] {
+  --badge-color: 182, 156, 246;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="gift"] {
+  --badge-color: 204, 148, 230;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="love"] {
+  --badge-color: 208, 128, 182;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="specimen"] {
+  --badge-color: 208, 126, 186;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="command"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+  --badge-color: 189, 114, 168;
+}
+.inline-badge[data-inline-badge^="deed"] {
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+  --badge-color: 229, 140, 197;
+}
+.inline-badge[data-inline-badge^="honor"] {
+  --badge-color: 229, 140, 197;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="reward"] {
+  --badge-color: 164, 143, 225;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.177);
+}
+.inline-badge[data-inline-badge="customized"] {
+  color: rgba(var(--customize-badge-color), 1);
+  background-color: rgba(var(--customize-badge-color), 0.177);
+}
+.inline-badge[data-inline-badge^="claim"] {
+  --badge-color: 214, 139, 71;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="clue"] {
+  --badge-color: 206, 144, 66;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="highlight"] {
+  --badge-color: 186, 130, 58;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="lock"] {
+  --badge-color: 223, 124, 142;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="snippet"] {
+  --badge-color: 186, 130, 58;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="branch"] {
+  --badge-color: 186, 130, 58;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="flag"] {
+  --badge-color: 241, 138, 161;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="dig"] {
+  --badge-color: 163, 143, 45;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="profile"] {
+  --badge-color: 224, 159, 71;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="notice"] {
+  --badge-color: 199, 173, 64;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="witness"] {
+  --badge-color: 146, 150, 58;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="attachment"] {
+  --badge-color: 146, 150, 58;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="lightbulb"] {
+  --badge-color: 180, 180, 74;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="hat-tip"] {
+  --badge-color: 180, 158, 51;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="magnet"] {
+  --badge-color: 225, 129, 99;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="emergency"] {
+  --badge-color: 202, 112, 129;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="prohibit"] {
+  --badge-color: 245, 140, 129;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="stop"] {
+  --badge-color: 245, 140, 129;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="bomb"] {
+  --badge-color: 223, 127, 120;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="extract"] {
+  --badge-color: 78, 182, 127;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="sprout"] {
+  --badge-color: 97, 198, 138;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="charge"] {
+  --badge-color: 84, 199, 148;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="hold"] {
+  --badge-color: 88, 199, 146;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="mention"] {
+  --badge-color: var(--color-blue-rgb);
+  color: rgba(var(--badge-color), 0.8);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="exclaim"] {
+  --badge-color: var(--color-green-rgb);
+  color: rgba(var(--badge-color), 0.8);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+.inline-badge[data-inline-badge^="vault"] {
+  --badge-color: var(--color-purple-rgb);
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+/* Github */
+.inline-badge[data-inline-badge="github"] .gh-type {
+  color: var(--color-blue-rgb) !important;
+}
+.inline-badge[data-inline-badge="github"] .inline-badge-title-inner {
+  color: var(--text-normal);
+}
+.inline-badge[data-inline-badge="github"] {
+  --badge-color: var(--color-blue-rgb);
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}
+/* Github SUCCESS */
+.inline-badge[data-inline-badge^="github-success"] .gh-type {
+  color: var(--color-green-rgb) !important;
+}
+.inline-badge[data-inline-badge^="github-success"] .inline-badge-title-inner {
+  color: var(--text-normal);
+}
+.inline-badge[data-inline-badge^="github-success"] {
+  --badge-color: var(--color-green-rgb);
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.144);
+}
+.inline-badge[data-inline-badge^="brain"] {
+  --badge-color: 206, 144, 66;
+  color: rgba(var(--badge-color), 1);
+  background-color: rgba(var(--badge-color), 0.123);
+}