Test

app/src/components/header/Header.astro

@@ -47,7 +47,7 @@ const destinations = dynamicToStatic(Astro.url, getDestinations());
           <MenuIcon />
         </IconButton>
     </NavigationDrawer>
-    <a href="/">
+    <a class="home" href="/">
       <Logo class="logo" />
     </a>
   </div>
@@ -148,6 +148,33 @@ const destinations = dynamicToStatic(Astro.url, getDestinations());
     gap: 16px;
   }
 
+  .home {
+    position: relative;
+    width: 48px;
+    height: 48px;
+
+    display: grid;
+    place-items: center;
+    place-content: center;
+
+    border-radius: 8px;
+    outline: none;
+
+    &:focus-visible::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      outline: 3px solid var(--color-secondary);
+      z-index: 1;
+
+      animation-name: focus-grow, focus-shrink;
+      animation-delay: 0ms, 150ms;
+      animation-duration: 150ms, 450ms;
+      animation-timing-function: var(--easing-standard);
+    }
+  }
+
   .logo {
     width: 40px;
     height: 40px;

app/src/content/blog/material-to-solid.mdx

@@ -2,8 +2,7 @@
 title: Bringing Material You to SolidJS
 description: Eiusmod sint incididunt ea mollit cupidatat ullamco mollit labore laborum ea sit consectetur.
 cover:
-  image:
-    src: ../../assets/images/covers/material-to-solid.png
+  src: ../../assets/images/covers/material-to-solid.png
 authors:
   - id: deminearchiver
     name: deminearchiver

app/src/content/config.ts

@@ -1,9 +1,11 @@
 import { defineCollection, z } from "astro:content";
 import { i18nCollection, i18nSchema } from "../schemas/i18n";
 import { blogCollection } from "../schemas/blog";
+import { showcaseCollection } from "../schemas/showcase";
 
 
 export const collections = {
   blog: blogCollection(),
+  showcase: showcaseCollection(),
   // i18n: i18nCollection(),
 };

app/src/content/showcase/material-solid.mdx

@@ -0,0 +1,4 @@
+---
+hide: production
+title: Material 3 for Solid
+---

app/src/pages/blog/[...slug].astro

@@ -14,10 +14,11 @@ import ArrowBackIcon from "~icons/material-symbols-rounded/arrow-back:outlined&o
 import ShareIcon from "~icons/material-symbols-rounded/share:filled";
 import dayjs from "dayjs";
 import { Button } from "../../components/primitives/button";
+import { getBlogCollection } from "../../schemas/blog";
 
 
 export const getStaticPaths: GetStaticPaths = async () => {
-  const posts = await getCollection("blog");
+  const posts = await getBlogCollection();
   return posts.map(post => ({
     params: {
       slug: post.slug,
@@ -48,8 +49,8 @@ const { Content } = await post.render();
           post.data.cover
             && <Image
                   class="cover"
-                  src={post.data.cover.image.src}
-                  alt={post.data.cover.image.alt} />
+                  src={post.data.cover.src}
+                  alt={post.data.cover.alt} />
         }
         <div class="actions">
           <Button variant={post.data.cover ? "elevated" : "text"} class="back" href="/blog" data-navigate-back>
@@ -101,6 +102,7 @@ const { Content } = await post.render();
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
+    gap: 16px;
     overflow: hidden;
     border-radius: 28px;
 
@@ -175,4 +177,23 @@ const { Content } = await post.render();
     letter-spacing: var(--text-body-large-letter-spacing);
     color: var(--color-on-surface-variant);
   }
+
+  @media only screen and (max-width: 599px) {
+    .actions {
+      padding: 16px 16px 0 16px;
+    }
+    .details {
+      padding-top: 0;
+    }
+    .date {
+      display: none;
+    }
+    .title {
+      font-family: var(--text-headline-medium-family);
+      font-size: var(--text-headline-medium-size);
+      font-weight: 500;
+      line-height: var(--text-headline-medium-line-height);
+      letter-spacing: var(--text-headline-medium-letter-spacing);
+    }
+  }
 </style>

app/src/pages/blog/index.astro

@@ -11,21 +11,15 @@ import type { CollectionEntry } from "astro:content";
 
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
+import { getBlogCollection } from "../../schemas/blog";
 
 
 dayjs.extend(utc);
 
-let posts = (await getCollection("blog"))
+const posts = (await getBlogCollection())
   .sort(
     (a, b) => b.data.createdAt.valueOf() - a.data.createdAt.valueOf(),
   );
-
-if(import.meta.env.PROD) {
-  posts = posts.filter(post => post.data.hide !== "production");
-} else if(import.meta.env.DEV) {
-  posts = posts.filter(post => post.data.hide !== "development");
-}
-
 ---
 
 <Page>
@@ -53,7 +47,7 @@ if(import.meta.env.PROD) {
                     href={postUrl}>
                         {
                           post.cover
-                            ? <Image class="cover image" src={post.cover.image.src} alt={post.cover.image.alt} />
+                            ? <Image class="cover image" src={post.cover.src} alt={post.cover.alt} />
                             : <div class="cover placeholder"><ImageIcon width={48} height={48} /></div>
                           }
                       <div class="content">
@@ -63,6 +57,7 @@ if(import.meta.env.PROD) {
                       </div>
                   </a>
                   <div class="authors">
+                    <span class="by">by</span>
                     <a class="author" href={`/blog/tags/author/${author.id}/`}>
                         {
                           author.avatar
@@ -104,16 +99,11 @@ if(import.meta.env.PROD) {
   .posts {
     list-style: none;
 
-    /* display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 24px; */
     display: grid;
     place-items: center;
     place-content: center;
     grid-template-columns: repeat(1, 1fr);
-    gap: 24px;
+    gap: 40px 24px;
   }
 
   @media only screen and (min-width: 600px) {
@@ -261,6 +251,16 @@ if(import.meta.env.PROD) {
     align-items: center;
     justify-content: flex-start;
     gap: 8px;
+    padding-inline: 8px;
+  }
+
+  .by {
+    font-family: var(--text-label-large-family);
+    font-size: var(--text-label-large-size);
+    font-weight: var(--text-label-large-weight);
+    line-height: var(--text-label-large-line-height);
+    letter-spacing: var(--text-label-large-letter-spacing);
+    color: var(--color-on-surface-variant);
   }
 
   .author {
@@ -275,7 +275,7 @@ if(import.meta.env.PROD) {
     gap: 8px;
 
     padding-block: 8px;
-    padding-inline: 16px 24px;
+    padding-inline: 8px 16px;
     border-radius: 9999px;
 
     font-family: var(--text-label-large-family);

app/src/pages/showcase/[...slug].astro

@@ -0,0 +1,36 @@
+---
+import type { GetStaticPaths } from 'astro';
+import { getCollection, type CollectionEntry } from 'astro:content';
+import dayjs from 'dayjs';
+import Page from '../../layouts/Page.astro';
+import { Header } from '../../components/header';
+import { Footer } from '../../components/footer';
+import Markdown from '../../components/markdown/Markdown.astro';
+import { getShowcaseCollection } from '../../schemas/showcase';
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const entries = await getShowcaseCollection();
+  return entries.map(entry => ({
+    params: {
+      slug: entry.slug,
+    },
+    props: entry,
+  }));
+}
+
+type Props = CollectionEntry<"showcase">;
+
+const entry = Astro.props;
+
+const { Content } = await entry.render();
+---
+
+<Page>
+  <Header />
+  <main>
+    <Markdown>
+      <Content />
+    </Markdown>
+  </main>
+  <Footer />
+</Page>

app/src/schemas/blog.ts

@@ -1,4 +1,4 @@
-import { defineCollection, z, type SchemaContext } from "astro:content";
+import { defineCollection, getCollection, z, type SchemaContext } from "astro:content";
 import { imageSchema } from "./utils";
 
 import deminearchiverAvatar from "../assets/images/avatars/deminearchiver.png";
@@ -21,19 +21,12 @@ type AuthorsKey = keyof typeof AUTHORS;
 const authorsKeys = Object.keys(AUTHORS) as [AuthorsKey, ...AuthorsKey[]];
 
 export const blogSchema = (context: SchemaContext) => {
-  const { image } = context;
   return z.object({
     hide: z.enum(["development", "production"]).optional(),
     title: z.string(),
     description: z.string().optional(),
-    cover: z.object({
-      image: imageSchema(context),
-    }).optional(),
+    cover: imageSchema(context).optional(),
     authors: z.array(authorSchema(context)).min(1),
-    // author:
-    //   z.enum(authorsKeys)
-    //     .transform(author => AUTHORS[author])
-    //     .pipe(authorSchema(context)),
     createdAt: z.date(),
     editedAt: z.date().optional(),
   });
@@ -44,3 +37,14 @@ export const blogCollection = () =>
     type: "content",
     schema: blogSchema,
   });
+
+export const getBlogCollection = async () => {
+  let entries = await getCollection("blog");
+  if(import.meta.env.PROD) {
+    entries = entries.filter(entry => entry.data.hide !== "production");
+  }
+  if(import.meta.env.DEV) {
+    entries = entries.filter(entry => entry.data.hide !== "development");
+  }
+  return entries;
+}

app/src/schemas/showcase.ts

@@ -0,0 +1,28 @@
+import { defineCollection, getCollection, z, type SchemaContext } from "astro:content";
+import { imageSchema } from "./utils";
+
+export const showcaseCollection = () =>
+  defineCollection({
+    type: "content",
+    schema: showcaseSchema,
+  });
+
+export const showcaseSchema = (context: SchemaContext) => {
+  return z.object({
+    hide: z.enum(["development", "production"]).optional(),
+    title: z.string(),
+    description: z.string().optional(),
+    cover: imageSchema(context).optional(),
+  });
+}
+
+export const getShowcaseCollection = async () => {
+  let entries = await getCollection("showcase");
+  if(import.meta.env.PROD) {
+    entries = entries.filter(entry => entry.data.hide !== "production");
+  }
+  if(import.meta.env.DEV) {
+    entries = entries.filter(entry => entry.data.hide !== "development");
+  }
+  return entries;
+}

packages/material-symbols/index.ts

@@ -1,5 +1,32 @@
 import { z } from "zod";
 
+type RetryOptions = {
+  delay: number;
+  retries: number;
+}
+export function retry<T>(
+  fetcher: () => Promise<T>,
+  options: RetryOptions,
+) {
+  let retries = options.retries;
+  const retrying = async (): Promise<T> => {
+    try {
+      return await fetcher();
+    } catch (error: unknown) {
+      if (retries-- > 0) {
+        await new Promise(
+          resolve => setTimeout(resolve, options.delay)
+        );
+        return retrying();
+      } else {
+        retries = options.retries;
+        throw error;
+      }
+    }
+  };
+  return retrying();
+}
+
 const axesSchema = () => z.object({
   variant: z.enum(["filled", "outlined"]),
   weight: z.enum(["100", "200", "300", "400", "500", "600", "700"])
@@ -41,7 +68,9 @@ const loader = (variant: "rounded" | "outlined" | "sharp") => {
     });
 
     const url = `${baseUrl}/${name}/${axes}.svg`;
-    const svg = await fetch(url).then(response => response.text());
+    const fetcher = () => fetch(url).then(response => response.text());
+    // const svg = await fetch(url).then(response => response.text());
+    const svg = await retry(fetcher, { delay: 1000, retries: 3 });
     return svg
       .replace(/^<svg /, `<svg fill="currentColor" `);
   };