docs: initial concepts and recipes (#147)

site/src/components/docs/Container.astro

@@ -1,7 +0,0 @@
----
-// Simple container component for constraining content width in documentation
----
-
-<div class="w-full max-w-3xl mx-auto">
-  <slot />
-</div>

site/src/components/docs/DocsLink.astro

@@ -2,11 +2,12 @@
 import { isValidFramework, isValidStyleForFramework } from '@/types/docs';
 import { resolveDocsLinkUrl } from '@/utils/docs/routing';
 import type { HTMLAttributes } from 'astro/types';
+import A from '../typography/A.astro';
 
 interface Props extends Omit<HTMLAttributes<'a'>, 'href'> {
   slug: string;
 }
-const { slug, ...rest } = Astro.props;
+const { slug } = Astro.props;
 
 const { framework: paramFramework, style: paramStyle } = Astro.params;
 if (!paramFramework || !isValidFramework(paramFramework)) {
@@ -23,6 +24,6 @@ const { url: href } = resolveDocsLinkUrl({
 });
 ---
 
-<a href={href} {...rest}>
+<A href={href}>
   <slot />
-</a>
+</A>

site/src/components/docs/SidebarItem.astro

@@ -29,7 +29,7 @@ const isActive = containsActivePath(item);
 
 {
   isSection(item) ? (
-    <details open class="group" style={`padding-left: calc(var(--spacing) * ${depth * 4})`}>
+    <details open class="group my-4 first:mt-0" style={`padding-left: calc(var(--spacing) * ${depth * 4})`}>
       <summary
         class:list={[
           'py-2 flex items-center gap-4 ',