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 { status-indicator {
font-family: 'Courier New', Courier, monospace; 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> </style>
</head> </head>
<body> <body>
@ -48,26 +66,41 @@
<hr /> <hr />
</header> </header>
<main> <main>
<p>Colored circles that can pulse</p> <section>
<status-indicator status="positive" pulse> <p>Colored circles that can pulse</p>
All systems operational <status-indicator status="positive" pulse>
</status-indicator> All systems operational
<br /> </status-indicator>
<status-indicator status="negative" pulse> <br />
Something's wrong <status-indicator status="negative" pulse>
</status-indicator> Something's wrong
<br /> </status-indicator>
<status-indicator status="active"> <br />
It's just fine; carry on <status-indicator status="active">
</status-indicator> It's just fine; carry on
<br /> </status-indicator>
<status-indicator> <br />
Nothing matters <status-indicator>
</status-indicator> Nothing matters
<br /> </status-indicator>
<status-indicator status="intermediary"> <br />
Slow down... <status-indicator status="intermediary">
</status-indicator> 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> </main>
<footer> <footer>
<hr /> <hr />