add Post layout

docker/Dockerfile

@@ -14,9 +14,9 @@ FROM base AS build
 COPY package.json yarn.lock ./
 RUN yarn install --frozen-lockfile
 
-# override sharp 0.32.6 with 0.33.3
+# override sharp 0.32.6 with 0.33.3, fails without this
 RUN yarn remove sharp
-RUN yarn add --arch=arm64 --platform=linux --libc=musl --ignore-engines [email protected].3
+RUN yarn add --arch=arm64 --platform=linux --libc=musl --ignore-engines [email protected].4
 
 COPY . .
 

docs/pa-old-code/Prose clsx.astro

@@ -1,7 +1,7 @@
 ---
-import clsx from 'clsx';
+import { cn } from '@/utils/styles';
 
-const classes = clsx(
+const classes = cn(
   // Typography and Layout
   'prose prose-slate max-w-none',
   'transition-colors duration-500 tab-2',

src/components/PostItem.astro

@@ -6,7 +6,6 @@ import Link from '@/components/Link.astro';
 import PostMeta from '@/components/PostMeta.astro';
 import TagList from '@/components/TagList.astro';
 import Heading from '@/components/ui/Heading.astro';
-import Text from '@/components/ui/Text.astro';
 import { ROUTES } from '@/constants/routes';
 import { renderMarkdown } from '@/utils/markdown';
 import { getRandomLengthSubstring } from '@/utils/strings';

src/components/ThemeToggle.astro

@@ -7,7 +7,7 @@ import { Icon } from 'astro-icon/components';
     class="relative h-9 w-9 rounded-md p-2 ring-zinc-400 transition-all hover:ring-2"
     type="button"
   >
-    <Icon name="mdi:white-balance-sunny" />
+    <Icon name="mdi:white-balance-sunny" class="text-primary" />
   </button>
 </theme-toggle>
 

src/layouts/Page.astro

@@ -10,9 +10,9 @@ const props = Astro.props;
 ---
 
 <Centered {...props}>
-  <Prose>
-    <article>
+  <article>
+    <Prose>
       <slot />
-    </article>
-  </Prose>
+    </Prose>
+  </article>
 </Centered>

src/layouts/Post.astro

@@ -0,0 +1,27 @@
+---
+import FullWidth from '@/layouts/FullWidth.astro';
+import Prose from '@/components/Prose.astro';
+
+import type { BaseProps } from '@/layouts/Base.astro';
+
+export interface Props extends BaseProps {}
+
+const props = Astro.props;
+---
+
+<FullWidth {...props}>
+  <article class="px-4 lg:px-0">
+    <figure class="w-full max-w-5xl md:mx-auto">
+      <slot name="hero-image" />
+    </figure>
+    <Prose>
+      <section class="w-full max-w-4xl md:mx-auto py-4 lg:py-8">
+        <slot name="hero-text" />
+        <slot name="content" />
+      </section>
+    </Prose>
+    <section class="w-full max-w-5xl md:mx-auto">
+      <slot name="more-posts" />
+    </section>
+  </article>
+</FullWidth>

src/pages/blog/[slug].astro

@@ -8,10 +8,9 @@ import {
   getPostSlug,
   getRandomPosts,
 } from '@/modules/post';
-import Centered from '@/layouts/Centered.astro';
+import Post from '@/layouts/Post.astro';
 import MorePosts from '@/components/MorePosts.astro';
 import PostMeta from '@/components/PostMeta.astro';
-import Prose from '@/components/Prose.astro';
 import SharePost from '@/components/SharePost.astro';
 import TocWidget from '@/components/TocWidget.astro';
 
@@ -63,44 +62,52 @@ const postMetaProps = {
 ---
 
 {/* clean up all of this */}
-<Centered title={title} description={description} image={heroImage.src}>
-  <article itemprop="blogPost" itemscope itemtype="http://schema.org/Article">
-    <meta itemprop="mainEntityOfPage" content={slug} />
-    <Prose>
-      <h1 itemprop="name headline" transition:name={`title-${slug!.replace(/.*\//, '')}`}>
-        {title}
-        {draft ? <sup class="text-red-400">(draft)</sup> : null}
-      </h1>
-      <PostMeta {...postMetaProps} />
-      <!-- <TagList tags={tags} marginY /> -->
-
-      {/* hero image */}
-      {
-        !noHero && (
-          <Image
-            src={heroImage}
-            alt={heroAlt}
-            fetchpriority="high"
-            loading="eager"
-            width={1280}
-            itemprop="image"
-            class="block w-full h-32 md:h-80 object-cover"
-            transition:name={`hero-${slug!.replace(/.*\//, '')}`}
-          />
-        )
-      }
-
-      <div itemprop="articleBody" transition:name={`content-${slug!.replace(/.*\//, '')}`}>
-        {/* table of contents */}
-        {toc && <TocWidget headings={headings} />}
-
-        <Content />
-      </div>
-      <hr />
-
-      <SharePost title={title} slug={slug} />
-    </Prose>
-  </article>
-
-  <MorePosts morePosts={morePosts} />
-</Centered>
+<Post title={title} description={description} image={heroImage.src}>
+  <Fragment slot="hero-image">
+    {/* hero image 1280x720 max, 16:9 */}
+    {
+      !noHero && (
+        <Image
+          src={heroImage}
+          alt={heroAlt}
+          fetchpriority="high"
+          loading="eager"
+          itemprop="image"
+          class="block max-w-full h-auto max-h-[720px] object-cover rounded-lg"
+          widths={[320, 540, 720, 1024]}
+          sizes="(max-width: 475px) 320px, (max-width: 720px) 540px, (max-width: 1280px) 720px, 1024px"
+        />
+      )
+    }
+  </Fragment>
+
+  <Fragment slot="hero-text">
+    {/* title */}
+    <h1>
+      {title}
+      {draft && <sup class="text-red-400">(draft)</sup>}
+    </h1>
+
+    {/* meta */}
+    <PostMeta {...postMetaProps} />
+
+    {/* description */}
+    {description && <p class=" text-lg lg:text-2xl">{description}</p>}
+  </Fragment>
+
+  {/* section content */}
+  <Fragment slot="content">
+    {/* table of contents */}
+    {toc && false && <TocWidget headings={headings} />}
+
+    <Content />
+
+    <!-- <TagList tags={tags} marginY /> -->
+
+    <SharePost title={title} slug={slug} />
+  </Fragment>
+
+  <Fragment slot="more-posts">
+    <MorePosts morePosts={morePosts} />
+  </Fragment>
+</Post>

src/styles/tw-base.css

@@ -30,7 +30,7 @@
   } */
 
   .prose {
-    @apply outline outline-blue-500;
+    /* @apply outline outline-blue-500; */
   }
 
   /*