chore(site): begin v8 page migration (#177)

site/src/components/blog/BlogPagination.astro

@@ -9,49 +9,48 @@ interface Props {
 const { page } = Astro.props;
 ---
 
-<nav
-  aria-label="Blog pagination"
-  class="w-full max-w-3xl mx-auto mt-10 text-center text-sm flex items-center justify-center gap-3"
->
-  {
-    page.url.prev ? (
-      <a
-        href={page.url.prev}
-        aria-label={`Go to page ${page.currentPage - 1}`}
-        class="grid items-center p-2 border border-light-40 rounded-lg intent:border-dark-40"
-      >
-        <ChevronDown size={12} className="rotate-90" />
-      </a>
-    ) : (
-      <button
-        disabled
-        aria-label="Previous page (unavailable)"
-        class="grid items-center p-2 border border-light-40 rounded-lg opacity-40"
-      >
-        <ChevronDown size={12} className="rotate-90" />
-      </button>
-    )
-  }
+<nav aria-label="Blog pagination" class="w-full max-w-3xl mx-auto mt-10 flex items-center justify-end gap-4">
   <span>
     Page {page.currentPage} of {page.lastPage}
   </span>
-  {
-    page.url.next ? (
-      <a
-        href={page.url.next}
-        aria-label={`Go to page ${page.currentPage + 1}`}
-        class="grid items-center p-2 border border-light-40 rounded-lg intent:border-dark-40"
-      >
-        <ChevronDown size={12} className="-rotate-90" />
-      </a>
-    ) : (
-      <button
-        disabled
-        aria-label="Next page (unavailable)"
-        class="grid items-center p-2 border border-light-40 rounded-lg opacity-40"
-      >
-        <ChevronDown size={12} className="-rotate-90" />
-      </button>
-    )
-  }
+  <span class="grid grid-cols-2 gap-1">
+    {
+      page.url.prev ? (
+        <a
+          href={page.url.prev}
+          aria-label={`Go to page ${page.currentPage - 1}`}
+          class="grid items-center p-2 border border-light-40 rounded-lg intent:border-dark-40"
+        >
+          <ChevronDown size={12} className="rotate-90" />
+        </a>
+      ) : (
+        <button
+          disabled
+          aria-label="Previous page (unavailable)"
+          class="grid items-center p-2 border border-light-40 rounded-lg opacity-40"
+        >
+          <ChevronDown size={12} className="rotate-90" />
+        </button>
+      )
+    }
+    {
+      page.url.next ? (
+        <a
+          href={page.url.next}
+          aria-label={`Go to page ${page.currentPage + 1}`}
+          class="grid items-center p-2 border border-light-40 rounded-lg intent:border-dark-40"
+        >
+          <ChevronDown size={12} className="-rotate-90" />
+        </a>
+      ) : (
+        <button
+          disabled
+          aria-label="Next page (unavailable)"
+          class="grid items-center p-2 border border-light-40 rounded-lg opacity-40"
+        >
+          <ChevronDown size={12} className="-rotate-90" />
+        </button>
+      )
+    }
+  </span>
 </nav>

site/src/components/blog/BlogPostCard.astro

@@ -19,7 +19,7 @@ const { post, authors, asLink } = Astro.props;
     </time>
     <div class="mb-3">
       <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>
+      <p class="font-medium text-dark-40 dark:text-light-40">{post.data.description}</p>
     </div>
     {
       authors.length > 0 && (

site/src/components/frames/Minimal.astro

@@ -25,7 +25,7 @@ const { class: className } = Astro.props;
 
 <div
   class={twMerge(
-    'w-full max-w-3xl mx-auto flex rounded-lg overflow-hidden border border-light-40 dark:border-dark-80 bg-light-100 dark:bg-dark-110',
+    'relative w-full max-w-3xl mx-auto flex rounded-lg overflow-hidden border border-light-40 dark:border-dark-80 bg-light-100 dark:bg-dark-110',
     className,
   )}
 >

site/src/components/typography/Img.astro

@@ -1,26 +1,11 @@
 ---
+import type { ComponentProps } from 'astro/types';
 import { Image } from 'astro:assets';
-import type { ImageMetadata } from 'astro';
-import type { HTMLTag, Polymorphic } from 'astro/types';
-import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
-type Props<Tag extends HTMLTag = 'img'> = Polymorphic<{ as: Tag }> & {
-  src: string | ImageMetadata;
-  alt: string;
-  maxWidth?: boolean;
-  class?: string;
-};
-
-const { as: Tag = 'img', src, alt, maxWidth = true, class: className, ...props } = Astro.props;
-
-const classes = twMerge(clsx('max-w-full h-auto my-12 rounded', maxWidth && 'max-w-3xl mx-auto'), className);
+type Props = ComponentProps<typeof Image>;
+const { class: className, ...rest } = Astro.props;
 ---
 
-{
-  typeof src === 'string' ? (
-    <Tag src={src} alt={alt} class={classes} {...props} />
-  ) : (
-    <Image src={src} alt={alt} class={classes} {...props} />
-  )
-}
+{/* @ts-expect-error tbh I don't know how to tell ts that inferSize is ok */}
+<Image class={twMerge('my-12', className)} inferSize {...rest} />

site/src/components/typography/Li.astro

@@ -9,6 +9,6 @@ type Props<Tag extends HTMLTag = 'li'> = Polymorphic<{ as: Tag }> & {
 const { as: Tag = 'li', class: className, ...props } = Astro.props;
 ---
 
-<Tag class={twMerge(className)} {...props}>
+<Tag class={twMerge('text-base', className)} {...props}>
   <slot />
 </Tag>

site/src/components/typography/P.astro

@@ -11,6 +11,6 @@ type Props<Tag extends HTMLTag = 'p'> = Polymorphic<{ as: Tag }> & {
 const { as: Tag = 'p', maxWidth = true, class: className, ...props } = Astro.props;
 ---
 
-<Tag class={twMerge(clsx('text-base my-6', maxWidth && 'max-w-3xl mx-auto'), className)} {...props}>
+<Tag class={twMerge(clsx('my-6', maxWidth && 'max-w-3xl mx-auto'), className)} {...props}>
   <slot />
 </Tag>

site/src/components/typography/defaultMarkdownComponents.ts

@@ -8,7 +8,7 @@ import H4Markdown from './H4Markdown.astro';
 import H5Markdown from './H5Markdown.astro';
 import H6Markdown from './H6Markdown.astro';
 import Hr from './Hr.astro';
-// import Img from './Img.astro';
+import Img from './Img.astro';
 import Li from './Li.astro';
 import MarkdownCode from './MarkdownCode.astro';
 import Ol from './Ol.astro';
@@ -39,7 +39,7 @@ const defaultMarkdownComponents = {
   strong: Strong,
   blockquote: Blockquote,
   hr: Hr,
-  // img: Img,
+  img: Img,
   pre: Pre,
   code: MarkdownCode,
   table: Table,