The FunKy bitS

A collection of web bits - no build steps, no backend, no bundler

Live Demo - Inspired By Simon Willison

---

Stack

Purpose	Library	CDN
DOM components	Shoelace	cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1
DOM components	Custom Web Components	./lib/components.js
Reactivity	Alpine.js v3	cdn.jsdelivr.net/npm/alpinejs@3.x.x
Styling	Tailwind CSS	cdn.tailwindcss.com

---

Structure

├── index.html
├── lib/components/
│   ├── NAME.js
│   └── NAME.css
└── bits/
    ├── NAME.html

---

Adding a New Bit

1. Create the file: ./bits/NAME.html

2. Use this template:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Bit</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 min-h-screen">
  <site-header></site-header>
  <main x-data="yourBit()" class="max-w-5xl mx-auto px-6 py-8">
    <!-- your bit here -->
  </main>
  <site-footer></site-footer>

  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
  <script>
    function yourBit() {
      return {
        // Alpine data
      };
    }
  </script>
</body>
</html>

3. Register it in index.html — add an entry to window.bits:

{
  name: 'Your Bit',
  icon: '🔧',
  desc: 'One-sentence description of what it does.',
  tags: ['tag1', 'tag2'],
  href: 'bits/NAME.html',
}