get updates styled

src/components/Top.astro

@@ -1,12 +0,0 @@
-<a id="top" href="#">
-  back to top
-  <!-- render this after scrolling -->
-</a>
-
-<style>
-  #top {
-    position: fixed;
-    bottom: 1rem;
-    right: 1rem;
-  }
-</style>

src/components/UpdateCard.astro

@@ -0,0 +1,78 @@
+---
+import formatDate from '@/utils/formatDate';
+
+interface Props {
+  title: string;
+  date: Date | string;
+}
+
+const { title, date } = Astro.props;
+---
+<article class="update card">
+  <header>
+    <h3><span>{title}</span></h3>
+    <time datetime={formatDate(date, true)}>{formatDate(date, false, "MM/DD/YY")}</time>
+  </header>
+
+  <div class="content inner">
+    <slot />
+  </div>
+</article>
+
+<style>
+  /* UPDATE CARDS */
+  .update {
+    padding: 4px 2px;
+    background-color: var(--bg-0);
+    border-bottom: 2px solid var(--bg-4);
+
+    header {
+      display: grid;
+      grid-template-columns: 2fr 1fr;
+      text-align: center;
+      
+      & > * {
+        font: normal 1.375rem var(--dotum-11-font);
+        padding: 6px;
+      }
+
+      h3 {
+        background-color: var(--bg-1);
+        container: update-title / inline-size;
+
+        span {
+          display: block;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
+      time { background-color: var(--bg-3); }
+    }
+
+    .inner {
+      border: 2px solid var(--border-2);
+      border-image: var(--innerBorder) 3 2 2 fill / 6px 4px 4px;
+      padding: 4px;
+      background-color: var(--bg-0);
+    }
+
+    .content {
+      margin: 4px 2px 2px;
+      padding: 6px;
+
+      a {
+        color: var(--normal-color);
+        text-decoration-thickness: 2px;
+
+        &:active, &:focus { color: var(--active-color); }
+        &:visited { color: var(--active-border); }
+      }
+    }
+
+    &:last-of-type {
+      border-bottom: 2px solid var(--border-2);
+    }
+  }
+</style>

src/components/Updates.astro

@@ -1,3 +1,6 @@
+---
+import UpdateCard from "./UpdateCard.astro";
+---
 <section id="updates">
   <header>
     <h1>Updates</h1>
@@ -13,16 +16,13 @@
         </div>
       </h2>
 
-      <article class="update card">
+      <UpdateCard title="redo gallery and guestbook" date="2024-05-10">
-        <header>
+        <p>redid <a href="/gallery">gallery page</a> to make adding images easier and added alpinejs to <a href="/guestbook">guestbook</a> for fetching entries live</p>
-          <h3><span>update title</span></h3>
+      </UpdateCard>
-          <time datetime="">05/01/25</time>
-        </header>
 
-        <div class="content inner">
+      <UpdateCard title="changed name" date="2024-05-09">
-          <p>some stuff happened</p>
+        <p>changed name from invicta to haetae since invicta doesn't fit anymore</p>
-        </div>
+      </UpdateCard>
-      </article>
 
       <footer id="updates-pagination">
         <a id="previous" aria-label="go to previous post" href="javascript:void(0)">
@@ -93,60 +93,6 @@
         border: none;
       }
     }
-
-    /* UPDATE CARDS */
-    .update {
-      padding: 4px 2px;
-      background-color: var(--bg-0);
-      border-bottom: 2px solid var(--bg-4);
-
-      header {
-        display: grid;
-        grid-template-columns: 2fr 1fr;
-        text-align: center;
-        
-        & > * {
-          font: normal 1.375rem var(--dotum-11-font);
-          padding: 6px;
-        }
-
-        h3 {
-          max-width: 100%;
-          background-color: var(--bg-1);
-
-          span {
-            display: block;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-
-            @media screen and (max-width: 560px) {  
-              margin: 0 auto;
-              max-width: 15ch;
-            }
-          }
-          
-        }
-        /* 15ch */
-        time { background-color: var(--bg-3); }
-      }
-
-      .inner {
-        border: 2px solid var(--border-2);
-        border-image: var(--innerBorder) 3 2 2 fill / 6px 4px 4px;
-        padding: 4px;
-        background-color: var(--bg-0);
-      }
-
-      .content {
-        margin: 4px 2px 2px;
-        padding: 6px;
-      }
-
-      &:last-of-type {
-        border-bottom: 2px solid var(--border-2);
-      }
-    }
   }
 
   /* UPDATES PAGINATION */
@@ -168,6 +114,7 @@
       .arrow { background-position: 0 0; }
       &:hover .arrow { background-position: -36px 0; }
       &:active .arrow, &:focus .arrow { background-position: -72px 0; }
+      &:disabled .arrow { background-position: -108px 0; }
 
       .title {
         border-left: none;
@@ -180,9 +127,10 @@
       grid-column: 2 / -1;
       justify-self: right;
 
-      .arrow { background-position: -108px 0; }
+      .arrow { background-position: -144px 0; }
-      &:hover .arrow { background-position: -144px 0; }
+      &:hover .arrow { background-position: -180px 0; }
-      &:active .arrow, &:focus .arrow { background-position: -180px 0; }
+      &:active .arrow, &:focus .arrow { background-position: -216px 0; }
+      &:disabled .arrow { background-position: -252px 0; }
 
       .title {
         position: relative;

src/content/config.ts

@@ -23,7 +23,10 @@ function slugify(input: string) {
 const parser = marked.use({ gfm: true, breaks: true, });
 
 const blog = defineCollection({
-  loader: glob({ pattern: "*.{md,mdx}", base: "./src/content/blog" }),
+  loader: glob({
+    pattern: "*.{md,mdx}",
+    base: "./src/content/blog"
+  }),
   schema: rssSchema.extend({ 
     currently: z.object({
       mood: z.enum(moods).optional(),
@@ -98,4 +101,15 @@ const fics = defineCollection({
   }),
 });
 
-export const collections = { blog, fics, chapters };
+const updates = defineCollection({
+  loader: glob({
+    pattern: "*.{md,mdx}",
+    base: "status",
+  }),
+  schema: z.object({
+    title: z.string(),
+    date: z.coerce.date(),
+  }),
+});
+
+export const collections = { blog, fics, chapters, updates };

src/pages/fics/[ficId]/[chapterId].astro

@@ -24,6 +24,7 @@ const { Content, remarkPluginFrontmatter } = await render(chapter);
 
 const chapters = await getCollection("chapters", ({ id }) => id.split("/")[0] === ficId);
 const fic = await getCollection("fics", ({ id }) => id === ficId);
+
 chapters.sort((a, b) => a.data.sortOrder - b.data.sortOrder);
 const current = chapters.findIndex(chapter => chapter.id === `${ficId}/${chapterId}`);
 const next = current + 1 === chapters.length ? undefined : chapters[current + 1];

src/pages/fics/index.astro

@@ -14,21 +14,21 @@ chapters.sort((a, b) => b.data.publishedAt.valueOf() - a.data.publishedAt.valueO
   
   <h2>recent updates</h2>
   <ul>
-    {chapters.map(post => (
+    {chapters.map(chapter => (
       <li>
-        <time datetime={formatDate(post.data.publishedAt, true)}>
+        <time datetime={formatDate(chapter.data.publishedAt, true)}>
-          {formatDate(post.data.publishedAt, false, "MMMM DD, YYYY")}
+          {formatDate(chapter.data.publishedAt, false, "MMMM DD, YYYY")}
         </time>
-        {fics.some(({ data }) => data.chapters?.some(({ id }) => id === post.id)) 
+        {fics.some(({ data }) => data.chapters?.some(({ id }) => id === chapter.id)) 
           ? <>
-              <a href={`/fics/${post.id}`}>{post.data.title}</a>
+              <a href={`/fics/${chapter.id}`}>{chapter.data.title}</a>
               in 
-              <a href={`/fics/${post.id.split("/")[0]}`}>
+              <a href={`/fics/${chapter.id.split("/")[0]}`}>
-                {fics.filter(({ id }) => id === post.id.split("/")[0])[0].data.title}
+                {fics.find(({ id }) => id === chapter.id.split("/")[0])?.data.title}
               </a>
             </>
-          : <a href={`/fics/${post.id.split("/")[0]}`}>
+          : <a href={`/fics/${chapter.id.split("/")[0]}`}>
-              {fics.filter(({ id }) => id === post.id.split("/")[0])[0].data.title}
+              {fics.find(({ id }) => id === chapter.id.split("/")[0])?.data.title}
             </a>}
       </li>
     ))}

src/pages/index.astro

@@ -98,6 +98,15 @@ import buttons from "$/guild-bbs-buttons.png";
   }
 
   h1 { font: bold 1rem var(--arial-font); }
+  a {
+    color: var(--normal-color);
+    text-decoration-thickness: 2px;
+
+    &:active, &:focus {
+      color: var(--active-color);
+      text-decoration-color: var(--active-border);
+    }
+  }
   .inner {
     border: 2px solid var(--border-2);
     border-image: var(--innerBorder) 3 2 2 fill / 6px 4px 4px;

status/changelog01.md

@@ -0,0 +1,5 @@
+---
+title: changed name
+date: 2024-05-09
+---
+changed name from invicta to haetae since invicta doesn't fit anymore

status/changelog02.md

@@ -0,0 +1,5 @@
+---
+title: redid gallery and guestbook
+date: 2024-05-10
+---
+redid the [gallery](/gallery) to make adding images easier and added alpinejs to [guestbook](/guestbook) for fetching entries live

status/changelog03.md

@@ -0,0 +1,5 @@
+---
+title: minfilia shrine
+date: 2024-05-13
+---
+make wip layout for minfilia shrine, added history and Thoughts(tm) about her

status/changelog04.md

@@ -0,0 +1,5 @@
+---
+title: redid homepage
+date: 2024-05-19
+---
+finally got around to making homepage pretty-ish

status/changelog05.md

@@ -0,0 +1,5 @@
+---
+title: add masaki and blog feed
+date: 2024-05-23
+---
+make a wip layout for masaki's page and added a feed for the blog

status/changelog06.md

@@ -0,0 +1,5 @@
+---
+title: add links and fix stuff
+date: 2024-05-24
+---
+added links in more and fixed some stuff in [guestbook](/guestbook) and [blog](/blog)