Changes

app/src/components/search/search-view.css.ts

@@ -108,6 +108,7 @@ export const searchViewStyle = recipe({
     borderRadius: 28,
     overflowX: "hidden",
     overflowY: "auto",
+    scrollbarWidth: "thin",
     display: "flex",
     flexDirection: "column",
 

app/src/content/blog/astro-dynamic-images.mdx

@@ -0,0 +1,10 @@
+---
+wip: true
+title: Everything about Dynamic Image Loading in Astro
+description: In this post I will show you everything you need to know about Astro's image loading capabilities
+authors: [deminearchiver]
+createdAt: 2024-06-03
+tags:
+  - astro
+  - typescript
+---

app/src/pages/blog/index.astro

@@ -11,6 +11,9 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { getBlogCollection } from "../../schemas/blog";
 import type { ActionError } from "astro:actions";
+import type { JSX } from "astro/jsx-runtime";
+
+import { TAGS, type Tag } from "../../schemas/blog";
 
 dayjs.extend(utc);
 
@@ -81,7 +84,21 @@ const posts = (await getBlogCollection())
                         <span class="date">{date}</span>
                         <h3 id={anchorId} class="title">{post.title}</h3>
                         {post.description && <p class="description">{post.description}</p>}
-                        {post.tags && <ul class="tags">{post.tags.map(tag => <li class="tag">{tag.name}</li>)}</ul>}
+                        {post.tags
+                          && <ul class="tags">{
+                              post.tags.map(id => {
+                                const value = TAGS[id];
+                                const tag: Tag = typeof value === "string"
+                                  ? { label: value }
+                                  : { ...value };
+                                return (
+                                  <li class:list={["tag", tag.icon && "with-icon"]}>
+                                    {tag.icon && <tag.icon width={18} height={18} />}
+                                    {tag.label}
+                                  </li>
+                                );
+                              })
+                            }</ul>}
                       </div>
                   </a>
                   <div class="authors">
@@ -375,6 +392,7 @@ const posts = (await getBlogCollection())
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: 8px;
 
     background-color: var(--color-secondary-container);
     border-radius: 8px;
@@ -389,5 +407,9 @@ const posts = (await getBlogCollection())
     text-decoration: none;
     font-variation-settings: "GRAD" 0;
     color: var(--color-on-secondary-container);
+
+    &.with-icon {
+      padding-inline-start: 8px;
+    }
   }
 </style>

app/src/pages/showcase/index.astro

@@ -18,9 +18,6 @@ const entries = (await getShowcaseCollection())
         entries.map(entry => {
           return (
             <li>
-              {/* <a href={`/showcase/${entry.slug}/`}>
-                {entry.data.title}
-              </a> */}
               <ShowcaseCard class="card" entry={entry} />
             </li>
           );
@@ -54,7 +51,7 @@ const entries = (await getShowcaseCollection())
     }
   }
 
-  li {
+  .entries > li {
     display: contents;
   }