idk

app/package.json

@@ -46,6 +46,7 @@
     "astro": "^4.8.7",
     "astro-expressive-code": "^0.35.3",
     "clsx": "^2.1.1",
+    "dayjs": "^1.11.11",
     "lightningcss": "^1.24.1",
     "markdown-it": "^14.1.0",
     "normalize.css": "^8.0.1",

app/src/components/header/Header.astro

@@ -6,7 +6,7 @@ import MenuIcon from "~icons/material-symbols-rounded/menu:outlined";
 
 import { Logo } from "../logo";
 import { NavigationDrawer } from "../navigation";
-import { Search } from "../search";
+import { Search, SearchAnchor, SearchView } from "../search";
 import { NavigationTab } from "../navigation";
 import { dynamicToStatic, getDestinations } from "../navigation/destinations";
 import { fade } from "astro/virtual-modules/transitions.js";
@@ -207,7 +207,7 @@ const destinations = dynamicToStatic(Astro.url, getDestinations());
 
     .rss {
       display: inline-flex;
-      animation: appear 300ms linear;
+      /* animation: appear 300ms linear; */
     }
   }
 </style>

app/src/components/search/search-anchor.tsx

@@ -1,17 +1,25 @@
-import type { Component } from "solid-js";
+import { splitProps, type Component, type JSX } from "solid-js";
 import { Splash } from "@material/solid/components/splash";
 import { Focus } from "@material/solid/components/focus";
 import { searchAnchorContentStyle, searchAnchorIconStyle, searchAnchorLabelStyle, searchAnchorStyle } from "./search-anchor.css";
 
 import SearchIcon from "~icons/material-symbols-rounded/search:outlined";
+import { mergeRefs } from "@solid-primitives/refs";
+import clsx from "clsx";
+
+export type SearchAnchorProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children">;
+export const SearchAnchor: Component<SearchAnchorProps> = (props) => {
+  const [localProps, otherProps] = splitProps(
+    props,
+    ["ref", "class"]
+  );
 
-export const SearchAnchor: Component = () => {
   let ref!: HTMLElement;
 
   return (
     <button
-      ref={ref as HTMLButtonElement}
-      class={searchAnchorStyle}>
+      ref={mergeRefs(localProps.ref, element => ref = element)}
+      class={clsx(searchAnchorStyle, localProps.class)}>
         <Focus for={ref} />
         <Splash for={ref} />
         <div class={searchAnchorContentStyle}>

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

@@ -64,6 +64,7 @@ const DOCKED_BORDER_RADIUS = "calc(min(100dvw, 720px) / 4)";
 const viewDockedEnter = keyframes({
   from: {
     scale: "0",
+    opacity: 0,
     // translate: "0 -50%",
     // opacity: 0,
     // borderRadius: 112,
@@ -73,6 +74,7 @@ const viewDockedExit = keyframes({
   to: {
     // translate: "0 -32.5%",
     // scale: "0.5 0.35",
+    scale: "0.35",
     opacity: 0,
     // borderRadius: 112,
   },

app/src/components/search/search-view.tsx

@@ -21,11 +21,15 @@ import DescriptionIcon from "~icons/material-symbols-rounded/description:outline
 import InfoIcon from "~icons/material-symbols-rounded/info:outlined";
 import TagIcon from "~icons/material-symbols-rounded/tag:outlined";
 
+import sanitize from "sanitize-html";
+
 import { Dynamic, isServer } from "solid-js/web";
 import type { Icon } from "../primitives/icon";
+import { access, type MaybeAccessor } from "@solid-primitives/utils";
 
 export type SearchViewProps = {
-  children: JSX.Element;
+  for: MaybeAccessor<string | HTMLElement>;
+  // children: JSX.Element;
 }
 
 const GROUP_LABELS: Record<string, string> = {
@@ -60,16 +64,22 @@ type SearchResultGroup = {
 };
 
 export const SearchView: Component<SearchViewProps> = (props) => {
-  const [localProps, otherProps] = splitProps(
-    props,
-    ["children"]
-  );
+  // const [localProps, otherProps] = splitProps(
+  //   props,
+  //   ["children"]
+  // );
 
-  const anchor = resolveFirst(
-    () => localProps.children,
-    (item): item is HTMLElement => item instanceof HTMLElement,
-  );
-  const breakpoint = createBreakpoint("expanded");
+  // const anchor = resolveFirst(
+  //   () => localProps.children,
+  //   (item): item is HTMLElement => item instanceof HTMLElement,
+  // );
+  const anchor = createMemo(() => {
+    const value = access(props.for);
+    return typeof value === "string"
+      ? document.getElementById(value)!
+      : value;
+  });
+  // const breakpoint = createBreakpoint("expanded");
 
   let dialogRef!: HTMLDialogElement;
   let viewRef!: HTMLElement;
@@ -88,7 +98,7 @@ export const SearchView: Component<SearchViewProps> = (props) => {
   }
 
   createEventListener(
-    () => anchor()!,
+    anchor(),
     "click",
     openView
   );
@@ -134,7 +144,8 @@ export const SearchView: Component<SearchViewProps> = (props) => {
   const [pagefind] = createResource(async () => {
     const pagefind = await PagefindProvider.fromPath("/pagefind/pagefind.js");
     await pagefind.init({
-      highlightParam: "highlight"
+      highlightParam: "highlight",
+      excerptLength: 10,
     });
     return pagefind;
   });

app/src/components/search/search.tsx

@@ -3,9 +3,11 @@ import { SearchView } from "./search-view";
 import { SearchAnchor } from "./search-anchor";
 
 export const Search: Component = () => {
+  let ref!: HTMLButtonElement;
   return (
-    <SearchView>
-      <SearchAnchor />
-    </SearchView>
-  )
+    <>
+      <SearchAnchor ref={ref} />
+      <SearchView for={ref} />
+    </>
+  );
 }

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

@@ -1,5 +1,9 @@
 ---
 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/abstract_dark.jpg
 authors:
   - id: deminearchiver
     name: deminearchiver

app/src/content/blog/test.mdx

@@ -1,11 +1,12 @@
 ---
+visibility: development
 title: Test Post
 authors:
   - id: deminearchiver
     name: deminearchiver
     avatar:
       src: ../../assets/images/avatars/deminearchiver.png
-createdAt: 2024-05-15
+createdAt: 2024-02-01
 ---
 
 import { Aside } from "../../components/aside";

app/src/pages/about.astro

@@ -15,6 +15,6 @@ import { Footer } from "../components/footer";
 
 <style>
   main {
-    height: 1000px;
+    min-height: 100dvh;
   }
 </style>

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

@@ -62,12 +62,12 @@ const { Content } = await post.render();
   }
 
   .title {
-    font-family: var(--text-display-medium-family);
-    font-size: var(--text-display-medium-size);
-    /* font-weight: var(--text-display-medium-weight); */
+    font-family: var(--text-display-small-family);
+    font-size: var(--text-display-small-size);
+    /* font-weight: var(--text-display-small-weight); */
     font-weight: 500;
-    line-height: var(--text-display-medium-line-height);
-    letter-spacing: var(--text-display-medium-letter-spacing);
+    line-height: var(--text-display-small-line-height);
+    letter-spacing: var(--text-display-small-letter-spacing);
   }
   .description {
     font-family: var(--text-body-large-family);

app/src/pages/blog/index.astro

@@ -7,12 +7,28 @@ import { Image } from "astro:assets";
 
 import ImageIcon from "~icons/material-symbols-rounded/image:outlined&opticalSize=48";
 import { Filters } from "../../components/filters";
+import type { CollectionEntry } from "astro:content";
 
-const posts = (await getCollection("blog"))
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+
+dayjs.extend(utc);
+
+let posts = (await getCollection("blog"))
   .sort(
     (a, b) => a.data.createdAt.valueOf() - b.data.createdAt.valueOf(),
   );
 
+const visibleIn = (post: CollectionEntry<"blog">, environment: "production" | "development") => {
+  return post.data.visibility === "all" || post.data.visibility === environment;
+}
+
+if(import.meta.env.PROD) {
+  posts = posts.filter(post => visibleIn(post, "production"))
+} else if(import.meta.env.DEV) {
+  posts = posts.filter(post => visibleIn(post, "development"))
+}
+
 ---
 
 <Page>
@@ -21,21 +37,32 @@ const posts = (await getCollection("blog"))
     <article>
       <ul class="posts">
         {
-          posts.map(({ slug, data: post }) => {
+          posts.map(({ id, slug, data: post }) => {
             const postUrl = `/blog/${slug}/`;
             const [author, ...authors] = post.authors;
+
+            const date = dayjs(post.editedAt ?? post.createdAt)
+              .utc()
+              .format("DD MMM YYYY")
+              .toUpperCase();
+
+            const anchorId = `post-${id.split(".")[0]}`;
+
             return (
               <li>
                 <div class="post">
                   <a
                     class="card"
                     href={postUrl}>
-                      <div class="cover">
-                        <ImageIcon width={48} height={48} />
-                      </div>
+                        {
+                          post.cover
+                            ? <Image class="cover image" src={post.cover.image.src} alt={post.cover.image.alt} />
+                            : <div class="cover placeholder"><ImageIcon width={48} height={48} /></div>
+                          }
                       <div class="content">
-                        <h3 class="title">{post.title}</h3>
-                        {post.description && <p>{post.description}</p>}
+                        <span class="date">{date}</span>
+                        <h3 id={anchorId} class="title">{post.title}</h3>
+                        {post.description && <p class="description">{post.description}</p>}
                       </div>
                   </a>
                   <div class="authors">
@@ -134,15 +161,15 @@ const posts = (await getCollection("blog"))
         background-color: var(--color-secondary-container);
       }
 
-      &:hover .cover {
+      &:hover .cover.placeholder {
         background-color: var(--color-surface-container-high);
         color: var(--color-on-surface-variant);
       }
     }
     &:active {
       background-color: color-mix(in srgb, var(--color-secondary-container), var(--color-on-secondary-container) 10%);
     }
-    &:active .cover {
+    &:active .cover.placeholder {
       background-color: var(--color-surface-container-highest);
       color: var(--color-on-surface);
     }
@@ -172,42 +199,58 @@ const posts = (await getCollection("blog"))
 
   .cover {
     width: 100%;
+    height: auto;
     aspect-ratio: 16 / 9;
+    object-fit: cover;
+
 
-    display: grid;
-    place-items: center;
-    place-content: center;
 
-    background-color: var(--color-surface-container);
     border-radius: 28px;
-    color: color-mix(in srgb, var(--color-on-surface-variant) 38%, transparent);
-    transition-property: background-color, color;
-    transition-duration: 105ms;
-    transition-timing-function: linear;
+    &.placeholder {
+      display: grid;
+      place-items: center;
+      place-content: center;
+
+      background-color: var(--color-surface-container);
+      color: color-mix(in srgb, var(--color-on-surface-variant) 38%, transparent);
+      transition-property: background-color, color;
+      transition-duration: 105ms;
+      transition-timing-function: linear;
+    }
   }
   .content {
+    width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 8px;
-    padding: 24px;
+    padding: 24px 24px;
   }
 
+  .date {
+    font-family: var(--text-label-small-family);
+    font-size: var(--text-label-small-size);
+    font-weight: var(--text-label-small-weight);
+    line-height: var(--text-label-small-line-height);
+    letter-spacing: var(--text-label-small-letter-spacing);
+    color: var(--color-on-surface-variant);
+  }
   .title {
     font-family: var(--text-headline-small-family);
     font-size: var(--text-headline-small-size);
-    /* font-weight: var(--text-headline-small-weight); */
     font-weight: 500;
     line-height: var(--text-headline-small-line-height);
     letter-spacing: var(--text-headline-small-letter-spacing);
+    color: var(--color-on-surface);
   }
 
   .description {
-    font-family: var(--text-body-small-family);
-    font-size: var(--text-body-small-size);
-    font-weight: var(--text-body-small-weight);
-    line-height: var(--text-body-small-line-height);
-    letter-spacing: var(--text-body-small-letter-spacing);
+    font-family: var(--text-body-medium-family);
+    font-size: var(--text-body-medium-size);
+    font-weight: var(--text-body-medium-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+    color: var(--color-on-surface-variant);
   }
 
   .authors {

app/src/schemas/blog.ts

@@ -23,8 +23,12 @@ const authorsKeys = Object.keys(AUTHORS) as [AuthorsKey, ...AuthorsKey[]];
 export const blogSchema = (context: SchemaContext) => {
   const { image } = context;
   return z.object({
+    visibility: z.enum(["all", "development", "production"]).default("all"),
     title: z.string(),
     description: z.string().optional(),
+    cover: z.object({
+      image: imageSchema(context),
+    }).optional(),
     authors: z.array(authorSchema(context)).min(1),
     // author:
     //   z.enum(authorsKeys)

package.json

@@ -20,6 +20,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.2.0",
+    "@types/sanitize-html": "^2.11.0",
     "eslint": "^9.2.0",
     "eslint-plugin-astro": "^1.2.0",
     "eslint-plugin-solid": "^0.14.0",