prepare basecoat 1.0 migration

docs/src/components/avatar.md

@@ -0,0 +1,41 @@
+---
+templateEngineOverride: njk
+layout: layouts/page.njk
+title: Avatar
+description: An image element with a fallback for representing the user.
+toc:
+  - label: Usage
+    id: usage
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+<div class="alert mb-6">
+  {% lucide "circle-alert" %}
+  <h2>There is no dedicated Avatar component in Basecoat.</h2>
+</div>
+
+{% set code %}
+<div class="flex flex-row flex-wrap items-center gap-12">
+  <img class="size-8 shrink-0 object-cover rounded-full" alt="@hunvreus" src="https://github.com/hunvreus.png">
+  <img class="size-8 shrink-0 object-cover rounded-lg" alt="@shadcn" src="https://github.com/shadcn.png">
+  <div class="flex -space-x-2 [&_img]:ring-background [&_img]:ring-2 [&_img]:grayscale [&_img]:size-8 [&_img]:shrink-0 [&_img]:object-cover [&_img]:rounded-full">
+    <img alt="@hunvreus" src="https://github.com/hunvreus.png">
+    <img alt="@shadcn" src="https://github.com/shadcn.png">
+    <img alt="@adamwathan" src="https://github.com/adamwathan.png">
+  </div>
+</div>
+{% endset %}
+{{ code_preview("avatar", code | prettyHtml, "w-full max-w-md") }}
+
+<h2 id="usage"><a href="#usage">Usage</a></h2>
+
+<section class="prose">
+  <p>Avatars are just <code>&lt;img&gt;</code> elements styled with Tailwind utility classes.</p>
+</section>
+
+{% set code_simple %}
+  <img class="size-8 shrink-0 object-cover rounded-full" alt="@hunvreus" src="https://github.com/hunvreus.png">
+{% endset %}
+{{ code_block(code_simple | prettyHtml, "html") }}