Add the following to a page on your website.
The fallback content is provided in case JavaScript isn't available. Feel free to omit this or edit this as you wish.
<script
src="https://the-claw-webring-widget.netlify.app/the-claw-webring-widget.mjs"
type="module"
></script>
<the-claw-webring-widget>
<!-- start optional fallback content in the case of no JavaScript -->
<div style="color: inherit; font-family: system-ui; padding: 1rem; font-size: 1rem;">
<div
style="display: grid; gap: 0.5rem 1rem; align-items: center; margin-bottom: 1rem; justify-content: flex-start; grid-template-areas: 'image title' 'image view';"
>
<img
src="https://the-claw-webring.netlify.app/img/theclaw.png"
alt="The Claw Webring"
style="grid-area: image; height: 4rem; transform: rotate(-8deg);"
/>
<h2 style="grid-area: title; font-size: 1.4rem; margin: 0;">The Claw Webring</h2>
<a
href="https://github.com/whitep4nth3r/the-claw-webring"
style="grid-area: view; margin: 0; color: inherit;"
>
View on GitHub
</a>
</div>
</div>
<!-- end optional fallback content in the case of no JavaScript -->
</the-claw-webring-widget>Set the following options as attributes on the web component tag.
theme: "dark | light" (default: dark)
hideMembers: "true | false" (default: false)
fullWidth: "true | false" (default: false)
For example:
<the-claw-webring-widget theme="light" hideMembers="true" fullWidth="true">
<!-- ... -->
</the-claw-webring-widget>The component has a default fixed width of 320px for nostalgia reasons 🌚. If you'd like to put the
widget inside a container and allow the widget to span the full width of that container, use
fullWidth="true".
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent