Ryuuart/issue210 (#213)

* Migrate home realm list to use content collections

* Update hyperpink to use content collections

* Migrate realm pages and polish

web/public/styles/global.css

@@ -51,7 +51,8 @@ a:visited {
   color: unset;
 }
 
-span.japanese {
+span.japanese,
+[lang="ja"] {
   font-family: serif;
   font-style: normal;
 }

web/src/components/home/realms/RealmItem.astro

@@ -1,4 +1,15 @@
 ---
+interface Props {
+  title: string;
+  tagline: string;
+  url: string;
+  color: string;
+  author: {
+    name: string;
+    link: string;
+  };
+}
+
 const { title, tagline, url, color, author } = Astro.props;
 ---
 

web/src/components/home/realms/Realms.astro

@@ -1,7 +1,9 @@
 ---
+import { getCollection, getEntry } from "astro:content";
 import Section from "../../../layouts/home/Section.astro";
-import realmsData from "../../../../data/realms.json";
 import RealmItem from "./RealmItem.astro";
+
+let allRealms = await getCollection("realms");
 ---
 
 <Section class="realms">
@@ -20,20 +22,21 @@ import RealmItem from "./RealmItem.astro";
   </header>
   <ul>
     {
-      Object.values(realmsData).map(
-        (i) =>
-          !i.draft && (
-            <li>
-              <RealmItem
-                title={i.title}
-                tagline={i.tagline}
-                url={i.url}
-                color={i.color.portal}
-                author={i.author}
-              />
-            </li>
-          )
-      )
+      allRealms.map(async (realm) => {
+        const author = await getEntry(realm.data.author);
+
+        return (
+          <li>
+            <RealmItem
+              title={realm.data.title}
+              tagline={realm.data.tagline}
+              url={`/realms/${realm.slug}`}
+              color={realm.data.color.portal}
+              author={author.data}
+            />
+          </li>
+        );
+      })
     }
   </ul>
 </Section>

web/src/components/realms/Story.astro

@@ -1,6 +1,5 @@
 ---
 interface Props {
-  story: string;
   song: {
     link: string;
     name: string;
@@ -11,15 +10,13 @@ interface Props {
   };
 }
 
-const { story, song, author } = Astro.props;
+const { song, author } = Astro.props;
 ---
 
 <article>
   <div class="story-container">
     <h2>Story</h2>
-    <p>
-      {story}
-    </p>
+    <slot />
   </div>
   <div class="metadata-container">
     <div class="author-container">
@@ -58,7 +55,7 @@ const { story, song, author } = Astro.props;
     margin-bottom: 0.25rem;
   }
 
-  .story-container p {
+  .story-container :global(p) {
     margin-bottom: 1rem;
 
     font-family: "PP Migra", serif;
@@ -83,6 +80,10 @@ const { story, song, author } = Astro.props;
     flex: 1 0 auto;
   }
 
+  .song-container {
+    font-family: "Crimson Pro", serif;
+  }
+
   @media screen and (min-width: 768px) {
     article {
       grid-template-columns: auto auto;

web/src/content/authors/ryuuart.json

@@ -0,0 +1,4 @@
+{
+  "name": "ryuuart",
+  "link": "https://www.long-nguyen.dev/"
+}

web/src/content/config.ts

@@ -1,7 +1,29 @@
 // src/content/config.ts
-import { defineCollection } from "astro:content";
+import { defineCollection, reference, z } from "astro:content";
 import { docsSchema } from "@astrojs/starlight/schema";
 
 export const collections = {
     docs: defineCollection({ schema: docsSchema() }),
+    realms: defineCollection({
+        type: "content",
+        schema: z.object({
+            title: z.string(),
+            tagline: z.string(),
+            author: reference("authors"),
+            song: z.object({
+                name: z.string(),
+                link: z.string().url(),
+            }),
+            color: z.object({
+                portal: z.string(),
+            }),
+        }),
+    }),
+    authors: defineCollection({
+        type: "data",
+        schema: z.object({
+            name: z.string(),
+            link: z.string().url(),
+        }),
+    }),
 };

web/src/content/realms/_flarewater.md

@@ -0,0 +1,7 @@
+---
+title: flarewater
+tagline: elemental flavor
+author: ryuuart
+color:
+  portal: firebrick
+---

web/src/content/realms/_hero.md

@@ -0,0 +1,7 @@
+---
+title: Hero
+tagline: another self
+author: ryuuart
+color:
+  portal: gold
+---

web/src/content/realms/hyperpink.md

@@ -0,0 +1,12 @@
+---
+title: hyperpink
+tagline: prima donna
+author: ryuuart
+song:
+  name: Dialtone
+  link: https://www.youtube.com/watch?v=Z-IarCz4GKw
+color:
+  portal: hotpink
+---
+
+**HYPERPINK** is inspired by my queer friends and myself. They thought it would be so cool if the marquee was interactive so here it is. We are queening here rn!!

web/src/content/realms/hypertrance.md

@@ -0,0 +1,12 @@
+---
+title: "#HYPERTRANCE"
+tagline: infinite evolution —
+author: ryuuart
+song:
+  name: Infinite Evolution
+  link: https://open.spotify.com/track/39VB77jY5WTMFEH6TwUb6s?si=a6bff74890284ed2
+color:
+  portal: royalblue
+---
+
+**#HYPERTRANCE** is the sound and aesthetic of **MANAWAVE**. It’s directly inspired from the y2k cyber era of look and sound. I feel spiritually aligned to its feeling as someone nostalgic for more imaginative times.

web/src/content/realms/senbonzakura.md

@@ -0,0 +1,12 @@
+---
+title: Senbonzakura
+tagline: dreaming 1000 cherry blossoms
+author: ryuuart
+song:
+  name: 感情の魔天楼　～ World's End
+  link: https://www.youtube.com/watch?v=N1w4T9G9g7M
+color:
+  portal: deeppink
+---
+
+**SENBONZAKURA** <span class="japanese">(千本桜)</span> came to me while listening to TOUHOU music at the gym. Feeling the passion, I suddenly saw a field of moonlit typographic cherry petals.

web/src/layouts/realms/Realm.astro

@@ -2,9 +2,9 @@
 import Layout from "../Layout.astro";
 import Header from "../../components/realms/Header.astro";
 
-import realmData from "../../../data/realms.json";
 import Aura from "../../components/realms/Aura.astro";
 import Story from "../../components/realms/Story.astro";
+import { getEntry, type CollectionEntry } from "astro:content";
 
 export type RealmLayoutConfig = {
   colors?: {
@@ -14,12 +14,16 @@ export type RealmLayoutConfig = {
 
 interface Props {
   pageTitle: string;
-  realm: keyof typeof realmData;
+  realm: CollectionEntry<"realms">["slug"];
   config?: RealmLayoutConfig;
 }
 
 const { pageTitle, realm, config } = Astro.props;
-const { title, tagline, story, song, color, author } = realmData[realm];
+
+const realmData = await getEntry("realms", realm);
+const { title, tagline, song, color } = realmData.data;
+const author = (await getEntry(realmData.data.author)).data;
+const { Content } = await realmData.render();
 ---
 
 <Layout title={pageTitle} tabcolor={config?.colors?.tab ?? "black"}>
@@ -29,7 +33,9 @@ const { title, tagline, story, song, color, author } = realmData[realm];
         <a href="/">return</a>
       </div>
       <Header title={title} tagline={tagline} />
-      <Story story={story} song={song} author={author} />
+      <Story song={song} author={author}>
+        <Content />
+      </Story>
       <section>
         <div>
           <slot />

web/src/pages/realms/hyperpink.astro

@@ -1,6 +1,8 @@
 ---
+import { getEntry } from "astro:content";
 import Realm from "../../layouts/realms/Realm.astro";
-import realmData from "../../../data/realms.json";
+
+const realmData = await getEntry("realms", "hyperpink");
 ---
 
 <Realm
@@ -60,7 +62,7 @@ import realmData from "../../../data/realms.json";
   }
 </style>
 
-<style define:vars={{ "color-aura": realmData["hyperpink"].color.portal }}>
+<style define:vars={{ "color-aura": realmData.data.color.portal }}>
   /* Element, general styles*/
   h2,
   h3 {