ayo/status-indicator
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(site): add quick start section

Browse source
This commit is contained in:
ayo 2026-05-14 09:47:36 +02:00
parent d76a43c0c4
commit ec16f7d7da
1 changed files with 53 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
index.html
View file

@ -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,41 @@
<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>
<code><pre>
&lt;script type="module" src="https://esm.sh/@ayo-run/status-indicator"&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 />