feat(site): update CDN url

2.1.2
chore: remove src & screenshot from distribution
2026-05-16 18:58:09 +02:00 · 2026-05-14 19:40:47 +02:00 · 2026-05-14 19:40:34 +02:00 · 2026-05-14 12:40:21 +02:00 · 2026-05-14 12:39:55 +02:00 · 2026-05-14 12:31:57 +02:00
6 changed files with 107 additions and 38 deletions
--- a/README.md
+++ b/README.md
@ -7,13 +7,15 @@ Colored circles that can pulse. That's it. That's the component.
 Copy the following to your HTML page:

 ```html
-<script type="module" src="https://esm.sh/@ayo-run/status-indicator"></script>
+<script type="module" src="https://esm.sh/@ayo-run/status-indicator@2.1.2/es2022/status-indicator.mjs"></script>

 <status-indicator pulse status="positive">
  All systems operational
 </status-indicator>
 ```

+See example on CodePen: https://codepen.io/ayo-run/pen/RNorXrK
+
 ## Installation via NPM

 If you want to install the library as a node module, you can install the [published package](https://npmx.dev/@ayo-run/status-indicator) and the [base class](https://webcomponent.io) via NPM:
@ -26,7 +28,7 @@ npm install web-component-base @ayo-run/status-indicator
 pnpm add web-component-base @ayo-run/status-indicator
 ```

-## Usage
+## Usage: Imports

 Without a bundler that resolves `node_module` imports for you, you can use [import
 maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap):
@ -52,7 +54,10 @@ maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/scrip
 </html>
 ```

-## Attributes
+> [!NOTE]
+> Using import maps can also work with the CDN: https://codepen.io/ayo-run/pen/emBdQRg
+
+## Usage: Attributes

 ### 1. `status` attribute

@ -78,7 +83,7 @@ You can add the `pulse` attribute to make the circle... pulse

 ## Result

-![screenshot](./screenshot.png)
+![screenshot](https://raw.githubusercontent.com/ayo-run/status-indicator/refs/heads/main/screenshot.png)

 ---

--- a/index.html
+++ b/index.html
@ -35,6 +35,24 @@
        status-indicator {
            font-family: 'Courier New', Courier, monospace;
        }
+
+        nav, code {
+            max-width: 500px;
+
+            @media(max-width:440px) {
+                max-width: 300px;
+            }
+        }
+
+        code {
+            padding: 1rem;
+            margin: 1rem 0;
+
+            pre {
+                margin: 0;
+                padding: 0.25rem 0;
+            }
+        }
        </style>
 </head>
 <body>
@ -48,26 +66,44 @@
        <hr />
    </header>
    <main>
-        <p>Colored circles that can pulse</p>
-        <status-indicator status="positive" pulse>
-            All systems operational
-        </status-indicator>
-        <br />
-        <status-indicator status="negative" pulse>
-            Something's wrong
-        </status-indicator>
-        <br />
-        <status-indicator status="active">
-            It's just fine; carry on
-        </status-indicator>
-        <br />
-        <status-indicator>
-            Nothing matters
-        </status-indicator>
-        <br />
-        <status-indicator status="intermediary">
-            Slow down...
-        </status-indicator>
+            <section>
+                <p>Colored circles that can pulse</p>
+                <status-indicator status="positive" pulse>
+                    All systems operational
+                </status-indicator>
+                <br />
+                <status-indicator status="negative" pulse>
+                    Something's wrong
+                </status-indicator>
+                <br />
+                <status-indicator status="active">
+                    It's just fine; carry on
+                </status-indicator>
+                <br />
+                <status-indicator>
+                    Nothing matters
+                </status-indicator>
+                <br />
+                <status-indicator status="intermediary">
+                    Slow down...
+                </status-indicator>
+            </section>
+            <section>
+                <h3>Quick Start</h3>
+                <p>
+                    Copy the following to your HTML page:
+                </p>
+                <code><pre>
+&lt;script type="module" src="https://esm.sh/@ayo-run/status-indicator@2.1.2/es2022/status-indicator.mjs"&gt;&lt;/script&gt;
+
+&lt;status-indicator pulse status="positive"&gt;
+    All systems operational
+&lt;/status-indicator&gt;
+                </pre></code>
+                <p>More on the
+                    <a href="https://git.ayo.run/ayo/status-indicator#readme">README</a>
+                </p>
+            </section>
    </main>
    <footer>
        <hr />
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@ayo-run/status-indicator",
-  "version": "2.0.1",
+  "version": "2.1.2",
  "type": "module",
  "description": "Circles with color that can pulse to indicate status",
  "license": "MIT",
@ -11,6 +11,7 @@
  },
  "homepage": "https://status-indicator.webcomponent.io",
  "module": "./dist/status-indicator.js",
+  "types": "./dist/status-indicator.d.ts",
  "exports": {
    ".": {
      "default": "./dist/status-indicator.js",
@ -21,8 +22,7 @@
  "files": [
    "dist",
    "README.md",
-    "LICENSE",
-    "screenshot.png"
+    "LICENSE"
  ],
  "scripts": {
    "test": "echo \"Warning: no test specified\"",
@ -35,8 +35,8 @@
    "@types/node": "^25.6.2",
    "eslint": "^10.3.0",
    "husky": "^9.1.7",
-    "unplugin-dts": "^1.0.0",
-    "vite": "^8.0.11"
+    "vite": "^8.0.11",
+    "vite-plugin-dts": "^5.0.0"
  },
  "peerDependencies": {
    "web-component-base": "^4.1.2"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -21,12 +21,12 @@ importers:
      husky:
        specifier: ^9.1.7
        version: 9.1.7
-      unplugin-dts:
-        specifier: ^1.0.0
-        version: 1.0.0(typescript@6.0.3)(vite@8.0.11(@types/node@25.6.2))
      vite:
        specifier: ^8.0.11
        version: 8.0.11(@types/node@25.6.2)
+      vite-plugin-dts:
+        specifier: ^5.0.0
+        version: 5.0.0(typescript@6.0.3)(vite@8.0.11(@types/node@25.6.2))

 packages:

@ -665,6 +665,20 @@ packages:
  uri-js@4.4.1:
    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}

+  vite-plugin-dts@5.0.0:
+    resolution: {integrity: sha512-VLNAUttBq7pLxxL/m/ztjd5zj5yiviiC7ijfPFVLK5c45FLcibvieBsdjSka3a4ag1qdrAF9K3OysH4/lW+rPQ==}
+    peerDependencies:
+      '@microsoft/api-extractor': '>=7'
+      rollup: '>=3'
+      vite: '>=3'
+    peerDependenciesMeta:
+      '@microsoft/api-extractor':
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+
  vite@8.0.11:
    resolution: {integrity: sha512-Jz1mxtUBR5xTT65VOdJZUUeoyLtqljmFkiUXhPTLZka3RDc9vpi/xXkyrnsdRcm2lIi3l3GPMnAidTsEGIj3Ow==}
    engines: {node: ^20.19.0 || >=22.12.0}
@ -1286,6 +1300,20 @@ snapshots:
    dependencies:
      punycode: 2.3.1

+  vite-plugin-dts@5.0.0(typescript@6.0.3)(vite@8.0.11(@types/node@25.6.2)):
+    dependencies:
+      unplugin-dts: 1.0.0(typescript@6.0.3)(vite@8.0.11(@types/node@25.6.2))
+    optionalDependencies:
+      vite: 8.0.11(@types/node@25.6.2)
+    transitivePeerDependencies:
+      - '@rspack/core'
+      - '@vue/language-core'
+      - esbuild
+      - rolldown
+      - supports-color
+      - typescript
+      - webpack
+
  vite@8.0.11(@types/node@25.6.2):
    dependencies:
      lightningcss: 1.32.0
--- a/src/status-indicator.ts
+++ b/src/status-indicator.ts
@ -30,6 +30,7 @@ class StatusIndicator extends WebComponent {
    }

    get template(): any {
+        // @ts-ignore: Needs fixing on the base class
        const statusColor = this.#indicatorColor[this.props.status]

        return html`
--- a/vite-lib.config.ts
+++ b/vite-lib.config.ts
@ -1,23 +1,22 @@
 import { resolve } from 'node:path'
 import { defineConfig } from 'vite'
-import dts from 'unplugin-dts/vite'
+import dts from 'vite-plugin-dts'

 export default defineConfig({
+    publicDir: false,
    build: {
        lib: {
-            entry: resolve(import.meta.dirname, 'src/status-indicator.js'),
+            entry: resolve(import.meta.dirname, 'src/status-indicator.ts'),
            name: 'StatusIndicator',
            fileName: 'status-indicator',
-            formats: ['es']
        },
        rolldownOptions: {
            external: ['web-component-base'],
            output: {
                globals: {
-                    'WebComponent': 'WebComponent',
-                    'html': 'html'
+                    'web-component-base': 'web-component-base',
                }
-            }
+            },
        }
    },
    plugins: [dts()]
Author	SHA1	Message	Date
Ayo	e4b5a9ebc2	feat(site): update CDN url	2026-05-16 18:58:09 +02:00
Ayo	de93866548	2.1.2	2026-05-14 19:40:47 +02:00
Ayo	a9c344bee4	chore: remove src & screenshot from distribution	2026-05-14 19:40:34 +02:00
Ayo	45db0001c7	2.1.1	2026-05-14 12:40:21 +02:00
Ayo	06a32d61c3	chore: don't include the public dir in lib build	2026-05-14 12:39:55 +02:00
Ayo	2a1096ab1e	2.1.0	2026-05-14 12:31:57 +02:00
Ayo	7a800fd07a	feat: add types & source to distribution	2026-05-14 12:31:46 +02:00
Ayo	fc9a5c483d	feat(site): add paragraph to quick start	2026-05-14 09:54:59 +02:00
Ayo	71b4eae7c2	2.0.3	2026-05-14 09:50:53 +02:00
Ayo	ac5a0e1de5	feat(site): format the quick start code	2026-05-14 09:50:41 +02:00
Ayo	ec16f7d7da	feat(site): add quick start section	2026-05-14 09:47:36 +02:00
Ayo	d76a43c0c4	chore: update readme with asides	2026-05-14 09:31:20 +02:00
Ayo	9c5e821cd2	2.0.2	2026-05-14 09:22:08 +02:00
Ayo	b725d547a7	chore: add links to example pens	2026-05-14 09:21:58 +02:00