feat: Add plugin to create badges.

[WinnerWind]

This is a PR for the inclusion of a new plugin, which may be useful for users. This is a port of the Obsidian badges plugin

Badges

Create beautiful badges with simple syntax. Useful for making text pop out, and to include the occasional thingamagig.

See it in action

About

This plugin is a transformer plugin that allows the user to make "badges" with relative ease. To make a badge, an inline code block is used. Code blocks are detected using REGEX. Despite being a port of an Obsidian plugin, it is not dependent on ofm[^1]. I have done my best to keep it as faithful to the original, however any changes to the original will require this to be changed manually. [^1]: Unfortunately, for proper display, an obsidian theme is required. I'm working on lifting this limitation.

Package Dependencies

• Lucide Static (lucide-static) (Already included in package.json)

Syntax

`[!!KEY:TEXT]` -> Normal badges, see "About"
`[!!|GHS>SUBTEXT:TEXT]`  -> Github Success
`[!!|GHB>SUBTEXT:TEXT]` -> Github Blue
`[!!|KEY:VAL]` -> Plaintext
`[!!|ICON|ARIA:TEXT|COLOR-RGB]` -> Custom icon. Color can be a CSS Variable, eg. `var(--color-red-rgb)`

Future

1. I'm working on adding custom options to this, so that the user can define custom badge types without having to use a custom type. As of now, no options are provided.

EDIT : Without an Obsidian Theme, here's how they render. Note that the middle two are of a custom type.

[github-actions[bot]]

built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name	Status	Preview	Last Commit
quartz	✅ Ready (View Log)	Visit Preview	47e64b04a1e8eb0bba82bfec7c6bae1b5805dcd1

[WinnerWind]

Should be ready to merge. I'll be squashing the commits.

[jackyzha0]

@saberzero1 let me do a review pass before merging ty, will get to it later today

[WinnerWind]

No rush. Good luck!

[WinnerWind]

Hey all, just added an option customBadges to define custom badges for the syntax [!!type:Text].

[WinnerWind]

Added an option to include some Obsidian CSS if the user needs the badges to render properly but don't use an Obsidian theme. Example line in quartz.config.ts

Plugin.InlineBadges({
  customBadges: [["menu", "menu-test", [140, 200, 110,1], 0.117],
                  ["toggle-right","switch-on",[225, 0, 40,1],0.117]
                  ],
  useObsidianCSS: true
  }),

I think that the current implementation is satisfactory. Thoughts?

I don't think I'll be adding any more features to this right now.

EDIT : Defaults

Plugin.InlineBadges({
  customBadges: []
  useObsidianCSS: false
  }),

[saberzero1]

Added an option to include some Obsidian CSS if the user needs the badges to render properly but don't use an Obsidian theme. Example line in quartz.config.ts

Plugin.InlineBadges({
  customBadges: [["menu", "menu-test", [140, 200, 110,1], 0.117],
                  ["toggle-right","switch-on",[225, 0, 40,1],0.117]
                  ],
  useObsidianCSS: true
  }),

I think that the current implementation is satisfactory. Thoughts?

I don't think I'll be adding any more features to this right now.

EDIT : Defaults

Plugin.InlineBadges({
  customBadges: []
  useObsidianCSS: false
  }),

I feel like you might want to use a list of Objects for configuration. E.g. something like this:

Plugin.InlineBadges({
  customBadges: [
    {
      name: "menu",
      icon: "menu-test",
      color: rgba(140, 200, 110, 1),
      opacity: 0.117
    },
    {
      name: "toggle-right",
      icon: "switch-on",
      color: rgba(255, 0, 40, 1),
      opacity: 0.117
    }
  ],
  useObsidianCSS: false
}),

[WinnerWind]

I feel like using a dictionary may be superior. Will look into its implementation. The current implementation is personally very easy for me to modify and work with, and also ensures that all the data is filled properly.

A dictionary does sound superior, though it does come at the cost of the user accidentally leaving data.

I'll give it a shot.

[WinnerWind]

I'm done. It uses an object which is defined like so

  customBadges: Array<{
    name: string
    icon: string
    color: [number, number, number, number]
    textOpacity: number
  }>

Hope this is satisfactory!

[WinnerWind]

Just thought I'd check in. Are there any changes you'd like for me to add?

[saberzero1]

Also, this plugin is currently undocumentated.

[WinnerWind]

How do you suggest I write documentation?

[WinnerWind]

Just noticed that the InlineBadges are rendering within code blocks. Will need to fix that.

[WinnerWind]

Okay, this should work. Let me know if there are any changes you want from your end.

EDIT: would be really embarrassing if in the end this code didn't work

[WinnerWind]

Small remark on the docs.

As a final thought: in the badges configuration, perhaps another, optional parameter could be added to specify/override the color of the badge of that type? That way, user-defined badges do not need to be configured in two places (config and CSS).

I'm unsure what you mean. User defined badges will auto generate CSS based on the color section. That is, if you define a new badge via quartz.config.ts, new CSS is generated specifically for that badge.

[WinnerWind]

Also I'm unsure how to deal with this merge conflict. Sorry!

Edit: solved them, but it was quite messy.