feat(site): add aside component

site/src/components/Aside.astro

@@ -0,0 +1,67 @@
+---
+import clsx from 'clsx';
+import { Info, Lightbulb, TriangleAlert, OctagonX } from 'lucide-react';
+import { twMerge } from 'tailwind-merge';
+
+type AsideType = 'note' | 'tip' | 'caution' | 'danger';
+
+type Props = {
+  type: AsideType;
+  title?: string;
+  class?: string;
+};
+
+const { type, title, class: className } = Astro.props;
+
+const icons: Record<AsideType, typeof Info> = {
+  note: Info,
+  tip: Lightbulb,
+  caution: TriangleAlert,
+  danger: OctagonX,
+};
+
+const defaultTitles: Record<AsideType, string> = {
+  note: 'Note',
+  tip: 'Tip',
+  caution: 'Caution',
+  danger: 'Danger',
+};
+
+const Icon = icons[type];
+const renderTitle = title ?? defaultTitles[type];
+---
+
+<aside
+  class={twMerge(
+    clsx(
+      'w-full max-w-3xl mx-auto my-6 border-l-2 pl-3',
+      type === 'note' && 'border-blue',
+      type === 'tip' && 'border-purple',
+      type === 'caution' && 'border-yellow',
+      type === 'danger' && 'border-red',
+    ),
+    className,
+  )}
+>
+  <div class="flex gap-3">
+    <div class="flex-shrink-0 mt-[3px]">
+      <Icon
+        size={18}
+        className={clsx(
+          clsx(
+            type === 'note' && 'text-blue',
+            type === 'tip' && ' text-purple',
+            type === 'caution' && 'text-yellow',
+            type === 'danger' && 'text-red',
+          ),
+        )}
+      />
+    </div>
+    <div class="flex-1 min-w-0">
+      <p class="text-md font-semibold mb-2 text-black dark:text-white">{renderTitle}</p>
+      <div class="prose prose-sm max-w-none text-black dark:text-white [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
+        <slot />
+      </div>
+    </div>
+  </div>
+</aside>

site/src/components/NavBar/MobileNav.tsx

@@ -56,7 +56,7 @@ export default function MobileNav({ navLinks, currentPath, dark = false, childre
               <a
                 key={link.href}
                 href={link.href}
-                className={clsx('text-md px-6 py-3', link.matchPath && currentPath.startsWith(link.matchPath) ? 'underline' : 'intent:underline')}
+                className={clsx('text-lg px-6 py-3', link.matchPath && currentPath.startsWith(link.matchPath) ? 'underline' : 'intent:underline')}
                 aria-current={link.matchPath && currentPath.startsWith(link.matchPath) ? 'page' : undefined}
               >
                 {link.label}
@@ -66,7 +66,7 @@ export default function MobileNav({ navLinks, currentPath, dark = false, childre
             ))}
             <a
               href={GITHUB_REPO_URL}
-              className="text-md px-6 py-3 inline-flex items-center gap-1 intent:underline"
+              className="text-lg px-6 py-3 inline-flex items-center gap-1 intent:underline"
             >
               GitHub
               {' '}
@@ -74,7 +74,7 @@ export default function MobileNav({ navLinks, currentPath, dark = false, childre
             </a>
             <a
               href={DISCORD_INVITE_URL}
-              className="text-md px-6 py-3 inline-flex items-center gap-1 intent:underline"
+              className="text-lg px-6 py-3 inline-flex items-center gap-1 intent:underline"
             >
               Discord
               {' '}

site/src/components/blog/BlogPostCard.astro

@@ -18,8 +18,8 @@ const { post, authors, asLink } = Astro.props;
       <FormattedDate date={post.data.pubDate} />
     </time>
     <div class="mb-3">
-      <h2 class="text-md font-medium md:text-h4 group-intent:underline mb-1">{post.data.title}</h2>
-      <p class="font-medium md:text-md text-dark-40 dark:text-light-40">{post.data.description}</p>
+      <h2 class="text-lg font-medium md:text-h4 group-intent:underline mb-1">{post.data.title}</h2>
+      <p class="font-medium md:text-lg text-dark-40 dark:text-light-40">{post.data.description}</p>
     </div>
     {
       authors.length > 0 && (

site/src/components/typography/H4.astro

@@ -13,7 +13,7 @@ const { as: Tag = 'h4', maxWidth = true, class: className, ...props } = Astro.pr
 
 <Tag
   class={twMerge(
-    clsx('text-md font-medium @lg:text-h5 @3xl:text-h4 mb-6 mt-12', maxWidth && 'max-w-3xl mx-auto'),
+    clsx('text-lg font-medium @lg:text-h5 @3xl:text-h4 mb-6 mt-12', maxWidth && 'max-w-3xl mx-auto'),
     className,
   )}
   {...props}

site/src/components/typography/H5.astro

@@ -12,7 +12,7 @@ const { as: Tag = 'h5', maxWidth = true, class: className, ...props } = Astro.pr
 ---
 
 <Tag
-  class={twMerge(clsx('font-medium @lg:text-md @3xl:text-h5 mb-6 mt-9', maxWidth && 'max-w-3xl mx-auto'), className)}
+  class={twMerge(clsx('font-medium @lg:text-lg @3xl:text-h5 mb-6 mt-9', maxWidth && 'max-w-3xl mx-auto'), className)}
   {...props}
 >
   <slot />

site/src/components/typography/H6.astro

@@ -12,7 +12,7 @@ const { as: Tag = 'h6', maxWidth = true, class: className, ...props } = Astro.pr
 ---
 
 <Tag
-  class={twMerge(clsx('text-base font-medium @3xl:text-md my-6', maxWidth && 'max-w-3xl mx-auto'), className)}
+  class={twMerge(clsx('text-base font-medium @3xl:text-lg my-6', maxWidth && 'max-w-3xl mx-auto'), className)}
   {...props}
 >
   <slot />