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

33
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,6 +66,7 @@
<hr /> <hr />
</header> </header>
<main> <main>
<section>
<p>Colored circles that can pulse</p> <p>Colored circles that can pulse</p>
<status-indicator status="positive" pulse> <status-indicator status="positive" pulse>
All systems operational All systems operational
@ -68,6 +87,20 @@
<status-indicator status="intermediary"> <status-indicator status="intermediary">
Slow down... Slow down...
</status-indicator> </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 />