Merge pull request #14 from vscode-elements/update-badge-docs

Update badge docs

Author: bendera

astro.config.mjs

@@ -2,6 +2,7 @@
 import { defineConfig } from "astro/config";
 import starlight from "@astrojs/starlight";
 import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
+import starlightImageZoom from "starlight-image-zoom";
 
 const analytics = `
 (function(window, document, dataLayerName, id) {
@@ -32,8 +33,8 @@ export default defineConfig({
           tag: "meta",
           attrs: {
             name: "google-site-verification",
-            content: "xQEXVaL5aIe6GfMlfVDFzRqf0f4_XgL4son-Lk9RPQM"
-          }
+            content: "xQEXVaL5aIe6GfMlfVDFzRqf0f4_XgL4son-Lk9RPQM",
+          },
         },
         {
           tag: "script",
@@ -160,6 +161,7 @@ export default defineConfig({
         "./src/styles/restore-defaults.css",
         "./src/styles/custom.css",
       ],
+      plugins: [starlightImageZoom()],
     }),
   ],
 });

package-lock.json

@@ -14,11 +14,12 @@
     "@astrojs/check": "^0.9.4",
     "@astrojs/starlight": "^0.31.1",
     "@expressive-code/plugin-line-numbers": "^0.40.1",
-    "@vscode-elements/elements": "^1.12.0",
+    "@vscode-elements/elements": "^1.13.0",
     "@vscode-elements/webview-playground": "^1.6.0",
     "astro": "^5.2.5",
     "marked": "^15.0.6",
     "sharp": "^0.33.5",
+    "starlight-image-zoom": "^0.10.1",
     "typescript": "^5.7.3"
   },
   "devDependencies": {

package.json

@@ -2,14 +2,30 @@
 title: Badge
 ---
 
+import { Image } from "astro:assets";
 import Demo from "@components/Demo.astro";
 import PageSwitcher from "@components/PageSwitcher.astro";
 import Imports from "@components/examples/badge/Imports.astro";
+import badgeTypes from "@assets/badge-types.png";
 
 <Imports />
 <PageSwitcher />
 
-## Basic example
+## Explanation of badge styles
+
+The following badge styles have been implemented based on the VSCode UI:
+
+1. Default style
+2. Activity bar counter
+3. Counter
+4. Tab bar counter
+
+<Image
+  src={badgeTypes}
+  alt="Visual explanation of various badge styles"
+/>
+
+## Default style
 
 <Demo>
   <vscode-badge>308 Settings Found</vscode-badge>
@@ -41,3 +57,14 @@ import Imports from "@components/examples/badge/Imports.astro";
     ```
   </Fragment>
 </Demo>
+
+## Tab bar counter
+
+<Demo>
+  <vscode-badge variant="activity-bar-counter">42</vscode-badge>
+  <Fragment slot="html">
+    ```html
+    <vscode-badge variant="tab-bar-counter">42</vscode-badge>
+    ```
+  </Fragment>
+</Demo>

src/assets/badge-types.png

@@ -10,6 +10,9 @@
       "@data/*": [
         "src/data/*"
       ],
+      "@assets/*": [
+        "src/assets/*"
+      ],
     }
   }
 }