Merge pull request #49 from wontory/badge

feat: add badge SVG generation feature

Author: wontory

README.md

@@ -6,6 +6,13 @@
   <img src="https://tech-stack.wontory.dev/api/orbit?text=tech-stack&slugs=typescript,simpleicons,tailwindcss,nextdotjs" alt="tech-stack" />
 </p>
 
+<p align="center">
+  <img src="https://tech-stack.wontory.dev/api/badge?slug=nextdotjs&text=Next.js&highlight=true" alt="Next.js" />
+  <img src="https://tech-stack.wontory.dev/api/badge?slug=typescript&text=TypeScript&highlight=true" alt="TypeScript" />
+  <img src="https://tech-stack.wontory.dev/api/badge?slug=tailwindcss&text=Tailwind%20CSS&highlight=true" alt="Tailwind CSS" />
+  <img src="https://tech-stack.wontory.dev/api/badge?slug=simpleicons&text=Simple%20Icons&highlight=true" alt="Simple Icons" />
+</p>
+
 > Showcase your tech stack with beautiful animated SVGs
 
 **tech-stack** is a web application that lets you visualize your technology stack in style. Make your GitHub profile, project README, or portfolio site stand out with eye-catching animated graphics.
@@ -22,6 +29,14 @@
 - **Dark mode** fully supported
 - **One-click embedding**: Copy markdown code and paste anywhere
 
+### 🏷️ Badge
+
+- **Shields.io-style badges** with animated effects
+- **Highlight mode**: Trailing light and shine animation with icon color
+- **Customizable**: Text, icon, text color, icon color, and background color
+- **3,200+ brand icons** supported (powered by Simple Icons)
+- **One-click embedding**: Copy markdown code and paste anywhere
+
 ### 🎯 Use Cases
 
 - **GitHub profile enhancement**: Show your tech stack at a glance
@@ -43,6 +58,8 @@
 
 You can generate SVGs using just the URL, without the web editor:
 
+#### Orbit API
+
 ```markdown
 ![My Tech Stack](https://tech-stack.wontory.dev/api/orbit?text=MyStack&slugs=typescript,react,nextdotjs)
 ```
@@ -56,17 +73,49 @@ You can generate SVGs using just the URL, without the web editor:
 
 </details>
 
-#### Parameters
+**Parameters**
+
+| Parameter | Description | Example |
+|-----------|-------------|---------|
+| `text` | Center text | `MyStack` |
+| `slugs` | Simple Icons slugs (comma-separated) | `typescript,react` |
+
+#### Badge API
+
+```markdown
+![Next.js](https://tech-stack.wontory.dev/api/badge?slug=nextdotjs&text=Next.js&highlight=true)
+```
+
+<details>
+<summary>Preview</summary>
+
+<p align="center">
+  <img src="https://tech-stack.wontory.dev/api/badge?slug=nextdotjs&text=Next.js&highlight=true" alt="Next.js" />
+  <img src="https://tech-stack.wontory.dev/api/badge?slug=typescript&text=TypeScript" alt="TypeScript" />
+</p>
+
+</details>
+
+**Parameters**
 
-- `text`: Text to display in the center
-- `slugs`: Simple Icons identifiers (comma-separated)
+| Parameter | Description | Example |
+|-----------|-------------|---------|
+| `slug` | Simple Icons slug | `nextdotjs` |
+| `text` | Badge text | `Next.js` |
+| `highlight` | Enable trailing light and shine effect | `true` |
+| `textColor` | Text color (hex) | `ffffff` |
+| `iconColor` | Icon color (hex) | `00ff00` |
+| `bgColor` | Background color (hex) | `1a1a2e` |
 
 #### Examples
 
 ```markdown
 ![Backend](https://tech-stack.wontory.dev/api/orbit?text=Backend&slugs=nodedotjs,postgresql,redis,docker)
 
 ![Frontend](https://tech-stack.wontory.dev/api/orbit?text=Frontend&slugs=react,typescript,tailwindcss,vite)
+
+![Next.js](https://tech-stack.wontory.dev/api/badge?slug=nextdotjs&text=Next.js&highlight=true)
+![TypeScript](https://tech-stack.wontory.dev/api/badge?slug=typescript&text=TypeScript)
 ```
 
 <details>
@@ -80,6 +129,11 @@ You can generate SVGs using just the URL, without the web editor:
   <img src="https://tech-stack.wontory.dev/api/orbit?text=Frontend&slugs=react,typescript,tailwindcss,vite" alt="Frontend" />
 </p>
 
+<p align="center">
+  <img src="https://tech-stack.wontory.dev/api/badge?slug=nextdotjs&text=Next.js&highlight=true" alt="Next.js" />
+  <img src="https://tech-stack.wontory.dev/api/badge?slug=typescript&text=TypeScript" alt="TypeScript" />
+</p>
+
 </details>
 
 ### 3. Embed Anywhere
@@ -149,7 +203,7 @@ This project is built with:
 - [x] Real-time preview and customization
 - [x] API endpoint
 - [x] Dark mode support
-- [ ] Badge-style SVG (in development)
+- [x] Badge-style SVG with animated highlight effect
 - [ ] More animation options
 
 ## 🤝 Contributing

apps/web/app/api/badge/route.ts

@@ -0,0 +1,38 @@
+import { generateBadgeSvg } from '@tech-stack/badge'
+import type { NextRequest } from 'next/server'
+import { resolveSimpleIcon } from '#utils/simple-icon'
+
+const HEX_COLOR = /^[0-9a-fA-F]{3,8}$/
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = request.nextUrl
+  const slug = searchParams.get('slug') || ''
+  const text = (searchParams.get('text') || '').slice(0, 100)
+  const highlight = searchParams.get('highlight') === 'true'
+  const rawTextColor = searchParams.get('textColor') || ''
+  const rawIconColor = searchParams.get('iconColor') || ''
+  const rawBgColor = searchParams.get('bgColor') || ''
+  const textColor = HEX_COLOR.test(rawTextColor) ? rawTextColor : ''
+  const iconColor = HEX_COLOR.test(rawIconColor) ? rawIconColor : ''
+  const bgColor = HEX_COLOR.test(rawBgColor) ? rawBgColor : ''
+
+  const icon = slug ? resolveSimpleIcon(slug) : undefined
+
+  if (slug && !icon) {
+    return Response.json(
+      { error: `Icon with slug "${slug}" not found` },
+      { status: 404 },
+    )
+  }
+
+  const badgeSvg = generateBadgeSvg(
+    { slug, text, highlight, textColor, iconColor, bgColor },
+    icon ?? null,
+  )
+  return new Response(badgeSvg, {
+    headers: {
+      'content-type': 'image/svg+xml',
+      'cache-control': 'public, max-age=3600, s-maxage=3600',
+    },
+  })
+}

apps/web/app/api/orbit/route.ts

@@ -1,33 +1,32 @@
 import { generateOrbitSvg } from '@tech-stack/orbit'
 import type { NextRequest } from 'next/server'
-import type { SimpleIcon } from 'simple-icons'
-import * as simpleIcons from 'simple-icons/icons'
-
-type SimpleIconKey = keyof typeof simpleIcons
+import { resolveSimpleIcon } from '#utils/simple-icon'
 
 export async function GET(request: NextRequest) {
   const { searchParams } = request.nextUrl
-  const text = searchParams.get('text') || ''
+  const text = (searchParams.get('text') || '').slice(0, 100)
   const slugs = searchParams.get('slugs') || ''
-  const icons: SimpleIcon[] = []
+
+  const icons = []
 
   if (slugs) {
     for (const slug of slugs.split(',')) {
-      const iconKey = `si${slug.charAt(0).toUpperCase() + slug.slice(1)}`
-      if (!(iconKey in simpleIcons)) {
+      const icon = resolveSimpleIcon(slug)
+      if (!icon) {
         return Response.json(
           { error: `Icon with slug "${slug}" not found` },
           { status: 404 },
         )
       }
-      icons.push(simpleIcons[iconKey as SimpleIconKey] as SimpleIcon)
+      icons.push(icon)
     }
   }
 
   const orbitSvg = generateOrbitSvg(text, icons)
   return new Response(orbitSvg, {
     headers: {
       'content-type': 'image/svg+xml',
+      'cache-control': 'public, max-age=3600, s-maxage=3600',
     },
   })
 }

apps/web/app/badge/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
 
 import { InsetLayout } from '#layouts/inset-layout'
+import { BadgeProvider } from '#stores/badge-context'
 
 export const metadata: Metadata = {
   title: 'badge',
@@ -11,5 +12,9 @@ export default function PageLayout({
 }: Readonly<{
   children: React.ReactNode
 }>) {
-  return <InsetLayout title="Badge">{children}</InsetLayout>
+  return (
+    <InsetLayout title="Badge">
+      <BadgeProvider>{children}</BadgeProvider>
+    </InsetLayout>
+  )
 }

apps/web/app/badge/page.tsx

@@ -1,14 +1,11 @@
-import Link from 'next/link'
-
-import { Button } from '@tech-stack/ui/components/button'
+import { BadgeCustomize } from '#components/badge-customize'
+import { BadgePreview } from '#components/badge-preview'
 
 export default function Page() {
   return (
-    <div className="flex flex-1 flex-col items-center justify-center gap-4">
-      <h1 className="font-bold text-2xl">Work in progress</h1>
-      <Button size="sm" asChild>
-        <Link href="/">Home</Link>
-      </Button>
+    <div className="grid @5xl/main:grid-cols-2 grid-cols-1 gap-4 px-4 lg:px-6">
+      <BadgePreview />
+      <BadgeCustomize />
     </div>
   )
 }

apps/web/app/layout.tsx

@@ -1,6 +1,5 @@
-import type { Metadata } from 'next'
-
 import { SidebarInset } from '@tech-stack/ui/components/sidebar'
+import type { Metadata } from 'next'
 
 import '#styles/globals.css'
 import { Providers } from '#app/providers'

apps/web/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./.next/types/routes.d.ts" />
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/web/next.config.mjs

@@ -1,6 +1,10 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  transpilePackages: ['@tech-stack/ui', '@tech-stack/orbit'],
+  transpilePackages: [
+    '@tech-stack/ui',
+    '@tech-stack/orbit',
+    '@tech-stack/badge',
+  ],
 }
 
 export default nextConfig

apps/web/package.json

@@ -10,15 +10,16 @@
     "check-types": "tsc --noEmit"
   },
   "dependencies": {
-    "@tanstack/react-virtual": "^3.13.8",
+    "@tanstack/react-virtual": "^3.13.18",
+    "@tech-stack/badge": "workspace:*",
     "@tech-stack/orbit": "workspace:*",
     "@tech-stack/ui": "workspace:*",
     "lucide-react": "catalog:icons",
-    "next": "15.3.8",
+    "next": "16.1.6",
     "next-themes": "catalog:style",
     "react": "catalog:react",
     "react-dom": "catalog:react",
-    "react-syntax-highlighter": "^15.6.1",
+    "react-syntax-highlighter": "^16.1.0",
     "react-use-measure": "^2.1.7",
     "simple-icons": "catalog:icons"
   },

apps/web/src/components/badge-customize.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import { Input } from '@tech-stack/ui/components/input'
+import { Label } from '@tech-stack/ui/components/label'
+import { CheckIcon } from 'lucide-react'
+
+import { BadgeHighlightToggle } from '#components/badge-highlight-toggle'
+import { BadgeSelectedIcon } from '#components/badge-selected-icon'
+import { Customize } from '#components/customize'
+import { IconSearch } from '#components/icon-search'
+import { TextInput } from '#components/text-input'
+import { useBadgeState } from '#stores/badge-context'
+
+export function BadgeCustomize() {
+  const {
+    slug,
+    setSlug,
+    text,
+    setText,
+    textColor,
+    setTextColor,
+    iconColor,
+    setIconColor,
+    bgColor,
+    setBgColor,
+  } = useBadgeState()
+
+  return (
+    <Customize>
+      <div className="grid w-full items-center gap-2">
+        <Label htmlFor="text">Text</Label>
+        <TextInput id="text" text={text} setText={setText} />
+      </div>
+      <div className="grid w-full items-center gap-2">
+        <Label htmlFor="bgColor">Badge Color</Label>
+        <div className="flex gap-2">
+          <input
+            type="color"
+            id="bgColor"
+            value={`#${bgColor || 'CCD2D9'}`}
+            onChange={(e) => setBgColor(e.target.value.replace('#', ''))}
+            className="h-9 w-9 shrink-0 cursor-pointer rounded-md border"
+          />
+          <Input
+            type="text"
+            value={bgColor}
+            onChange={(e) => setBgColor(e.target.value.replace('#', ''))}
+            placeholder="Default"
+            className="w-full"
+          />
+        </div>
+      </div>
+      <div className="grid w-full grid-cols-2 gap-2">
+        <div className="grid items-center gap-2">
+          <Label htmlFor="textColor">Text Color</Label>
+          <div className="flex gap-2">
+            <input
+              type="color"
+              id="textColor"
+              value={`#${textColor || '000000'}`}
+              onChange={(e) => setTextColor(e.target.value.replace('#', ''))}
+              className="h-9 w-9 shrink-0 cursor-pointer rounded-md border"
+            />
+            <Input
+              type="text"
+              value={textColor}
+              onChange={(e) => setTextColor(e.target.value.replace('#', ''))}
+              placeholder="000000"
+              className="w-full"
+            />
+          </div>
+        </div>
+        <div className="grid items-center gap-2">
+          <Label htmlFor="iconColor">Icon Color</Label>
+          <div className="flex gap-2">
+            <input
+              type="color"
+              id="iconColor"
+              value={`#${iconColor || '000000'}`}
+              onChange={(e) => setIconColor(e.target.value.replace('#', ''))}
+              className="h-9 w-9 shrink-0 cursor-pointer rounded-md border"
+            />
+            <Input
+              type="text"
+              value={iconColor}
+              onChange={(e) => setIconColor(e.target.value.replace('#', ''))}
+              placeholder="Icon default"
+              className="w-full"
+            />
+          </div>
+        </div>
+      </div>
+      <div className="grid w-full items-center gap-2">
+        <Label>Highlight</Label>
+        <BadgeHighlightToggle />
+      </div>
+      <div className="grid w-full items-center gap-2">
+        <Label>Selected Icon</Label>
+        <BadgeSelectedIcon />
+      </div>
+      <div className="grid w-full items-center gap-2">
+        <Label htmlFor="search">Search Icons</Label>
+        <IconSearch
+          id="search"
+          onIconClick={(iconSlug) => setSlug(slug === iconSlug ? '' : iconSlug)}
+          isSelected={(iconSlug) => slug === iconSlug}
+          renderOverlay={(selected) =>
+            selected ? (
+              <CheckIcon
+                className="-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 text-primary"
+                size={32}
+              />
+            ) : null
+          }
+        />
+      </div>
+    </Customize>
+  )
+}