{"id":13474869,"url":"https://github.com/gapmiss/badges","last_synced_at":"2025-04-13T13:32:22.530Z","repository":{"id":180171922,"uuid":"664653025","full_name":"gapmiss/badges","owner":"gapmiss","description":"A light-weight plugin for displaying inline \"badges\" in Obsidian.md","archived":false,"fork":false,"pushed_at":"2023-12-06T13:57:20.000Z","size":345,"stargazers_count":75,"open_issues_count":12,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-27T05:01:51.523Z","etag":null,"topics":["badges","badges-markdown","obsidian","obsidian-md","obsidian-plugin"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gapmiss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-10T13:00:23.000Z","updated_at":"2025-02-21T02:46:01.000Z","dependencies_parsed_at":"2023-12-06T14:51:17.120Z","dependency_job_id":null,"html_url":"https://github.com/gapmiss/badges","commit_stats":null,"previous_names":["gapmiss/badges"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gapmiss%2Fbadges","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gapmiss%2Fbadges/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gapmiss%2Fbadges/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gapmiss%2Fbadges/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gapmiss","download_url":"https://codeload.github.com/gapmiss/badges/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248721267,"owners_count":21151074,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["badges","badges-markdown","obsidian","obsidian-md","obsidian-plugin"],"created_at":"2024-07-31T16:01:15.551Z","updated_at":"2025-04-13T13:32:19.805Z","avatar_url":"https://github.com/gapmiss.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"## Badges\n\n### Introduction\n\nA light-weight plugin for displaying inline \"badges\" in [Obsidian.md](https://github.com/obsidianmd) which acts similarly to a key-value store(database) for querying via default search or [Dataview](https://github.com/blacksmithgu/obsidian-dataview) plugin.\n\n- [Usage](#usage)\n\t- [Github styled badges](#Github)\n\t- [Plain-text](#Plain-text)\n\t- [custom](#custom)\n- [Installation](#Installation)\n- [CSS styles](#CSS)\n- [Dataview plugin](#Dataview)\n- [Development](#Development)\n- [Notes](#Notes)\n\n\n### Usage\n\n###### default syntax\n\n```markdown\n`[!!KEY:VAL]`\n```\n\n| syntax | details                         |\n| ------ | ------------------------------- |\n| `KEY`  | the type and name of the `ICON` |\n| `VAL`  | the value and text displayed    |\n\n\u003e [!IMPORTANT]\n\u003e the `VAL` cannot contain either the `|` pipe or the `:` colon symbols, as they are used as delimiters for the custom syntax\n\n###### example\n\n```markdown\n`[!!note:note]`\n`[!!info:info]`\n`[!!todo:todo]`\n...\n`[!!cite:cite]`\n```\n\n###### results\n\n![](assets/Badges-demo-Obsidian-v1.3.7-20230709144540.png)\n\n![](assets/Badges-demo-Obsidian-v1.3.7-20230709144545.png)\n\n###### example\n\n```markdown\n`[!!emergency: emergency]`\n`[!!prohibit: prohibit]`\n`[!!stop:stop]`\n…\n`[!!reward: reward]`\n`[!!vault: vault]`\n```\n\n###### results\n\n![](assets/Badges-demo-Obsidian-v1.3.7-20230709170950.png)\n\n![](assets/Badges-demo-Obsidian-v1.3.7-20230709170943.png)\n\n\n#### Github\n\n###### syntax\n\n```markdown\n`[!!|GHX\u003eKEY:VAL]`\n```\n\n| syntax          | details                                                                             |\n| --------------- | ----------------------------------------------------------------------------------- |\n| \u003ccode\u003e\\|\u003c/code\u003e | start pipe symbol                                                                   |\n| `GHX`           | Github style, either `ghb` for the blue style or `ghs` for the green success style  |\n| `\u003e`             | greater than symbol (delimiter)                                                     |\n| `KEY:VAL`       | `KEY` is the type or label, `VAL` is the value text displayed. e.g. `release:1.0.0` |\n\n###### example\n\n```markdown\n`[!!|ghb\u003erelease:1.2.1]`\n`[!!|ghb\u003eissues:2]`\n`[!!|ghb\u003eopen issues:0]`\n`[!!|ghb\u003eclosed issues:2]`\n`[!!|ghb\u003econtributors:3]`\n`[!!|ghb\u003elicense:MIT]`\n`[!!|ghs\u003echecks:success]`\n`[!!|ghs\u003ebuild:success]`\n```\n\n###### results\n\n![](assets/Badges-demo-Obsidian-v1.3.7-20230709171043.png)\n\n![](assets/Badges-demo-Obsidian-v1.3.7-20230709171053.png)\n\n### Plain-text\n\n###### syntax\n\n```markdown\n`[!!|KEY:VAL]`\n```\n\n| syntax          | details                               |\n| --------------- | ------------------------------------- |\n| \u003ccode\u003e\\|\u003c/code\u003e | start pipe symbol                     |\n| `KEY:VAL`       | `KEY` is the type, `VAL` is the value |\n\n###### example\n\n```markdown\n`[!!|foo:bar]`\n```\n\n###### results\n\n![](assets/Badges-demo-Obsidian-v1.3.7-20230709171707.png)\n\n![](assets/Badges-demo-Obsidian-v1.3.7-20230709171713.png)\n\n### custom\n\n###### syntax\n\n```markdown\n`[!!|ICON|KEY:VAL|COLOR-RGB]`\n```\n\n| syntax                                               | details                                                                                                                |\n| ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |\n| \u003ccode\u003e\\|\u003c/code\u003e                                      | start pipe symbol                                                                                                      |\n| `ICON`                                               | name of icon. e.g. `lucide-dice`                                                                                       |\n| \u003ccode\u003e\\|\u003c/code\u003e                                      | pipe symbol                                                                                                            |\n| `KEY:VAL`                                            | `KEY` is the type or label, `VAL` is the value text displayed. e.g. `release:1.0.0`                                    |\n| \u003ccode\u003e\\|\u003c/code\u003e                                      | pipe symbol                                                                                                            |\n| `COLOR-RGB` \u003cbr\u003e(optional, defaults to currentColor) | 3 (R.G.B.) numeric (0-255) values, separated by commas. e.g. `144,144,144` or CSS variable e.g. `var(--color-red-rgb)` |\n\n###### example\n\n```markdown\n`[!!|message-square|comment:edited by j.d.|var(--color-cyan-rgb)]`\n`[!!|dice|roll:eleven|120,82,238]`\n`[!!|gem|mineral:emerald|var(--my-custom-rgb)]`\n`[!!|apple|fruit:snack|var(--color-red-rgb)]`\n`[!!|brain|brain:pkm|var(--color-purple-rgb)]`\n`[!!|sun|weather:sunny|var(--color-yellow-rgb)]`\n`[!!|cloudy|weather:cloudy|var(--mono-rgb-100)]`\n`[!!|sunset|weather:8.44pm|var(--color-orange-rgb)]`\n`[!!|dumbbell|reps:3 sets of 50|var(--mono-rgb-00)]`\n`[!!|gift|event:wedding|var(--color-blue-rgb)]`\n`[!!|plus-square|credit:$100|var(--color-green-rgb)]`\n`[!!|minus-square|debit:$10|var(--color-pink-rgb)]`\n```\n\n###### results\n\n![](assets/Badges-demo-Obsidian-v1.3.7-20230709171541.png)\n![](assets/Badges-demo-Obsidian-v1.3.7-20230709171534.png)\n\n### Installation\n\nFrom Obsidian's settings or preferences:\n\n1. [Open in Obsidian.md](obsidian://show-plugin?id=badges)\n\nor:\n\n1. Community Plugins \u003e Browse\n2. Search for \"Badges\"\n\nManually:\n\n1. download the latest [release archive](https://github.com/gapmiss/badges/releases/download/1.1.0/badges-v1.1.0.zip)\n2. uncompress the downloaded archive\n3. move the `badges` folder to `/path/to/vault/.obsidian/plugins/` \n4.  Settings \u003e Community plugins \u003e reload **Installed plugins**\n5.  enable plugin\n\nor:\n\n1.  download `main.js`, `manifest.json` \u0026 `styles.css`\n2.  create a new folder `/path/to/vault/.obsidian/plugins/badges`\n3.  move all 3 files to `/path/to/vault/.obsidian/plugins/badges`\n4.  Settings \u003e Community plugins \u003e reload **Installed plugins**\n5.  enable plugin\n\n### CSS\n\nCustom `CSS` styles can be applied via CSS snippets. All colors and styles can be over-written just the same.\n\nSee [CSS snippets - Obsidian Help](https://help.obsidian.md/Extending+Obsidian/CSS+snippets)\n\n##### variables\n\n```css\nbody {\n\t/* border */\n\t--inline-badge-border-color: transparent;\n\t--inline-badge-border-radius: var(--radius-s);\n\t--inline-badge-border: 1px solid var(--inline-badge-border-color);\n\t/* example custom color */\n\t--my-custom-rgb: var(--color-green-rgb);\n}\n/* example CSS customization */\n.inline-badge[data-inline-badge^=\"vault\"] {\n\t--badge-color: var(--my-custom-rgb);\n\tcolor: rgba(var(--badge-color), .88);\n\tbackground-color: rgba(var(--badge-color),.22);\n}\n```\n\n### Dataview\n\nView and copy example dataview queries: [badges-dataview](assets/badges-dataview.md)\n\n### Development\n\n###### Clone this repo\n\n```bash\ncd /path/to/vault/.obsidian/plugins\ngit clone https://github.com/gapmiss/badges.git\ncd badges\n```\n\n###### Install packages and run\n\n```bash\nnpm i\nnpm run dev\n```\n\n###### Enable plugin\n\n1.  open `Settings` → `Community plugins`\n2.  enable the `Badges` plugin.\n\n### Notes\n\nThanks to [Markdown Furigana Plugin](https://github.com/steven-kraft/obsidian-markdown-furigana) as an example implementation of Live Preview.\n\n[Lucide](https://github.com/lucide-icons/lucide) Icons: https://lucide.dev\n\nLucide Icons LICENSE: https://lucide.dev/license\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgapmiss%2Fbadges","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgapmiss%2Fbadges","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgapmiss%2Fbadges/lists"}