Optimizations, characters in Gallery, etc.

src/app/(slug)/blog/page.tsx

@@ -41,15 +41,14 @@ export default async function Home({
           </Markdown>
         </div>
       ))}
-      <p>
+      <div className="navigation">
         <ConditionalNull condition={curPage > 1}>
           <Link href={`?page=${curPage - 1}`}>Previous</Link>
         </ConditionalNull>
-        {" "}
         <ConditionalNull condition={curPage * 10 < blogs.data.total_posts}>
           <Link href={`?page=${curPage + 1}`}>Next</Link>
         </ConditionalNull>
-      </p>
+      </div>
     </MainLayout>
   )
 }

src/app/(slug)/characters/[slug]/page.tsx

@@ -78,7 +78,7 @@ export default async function Home({
           return (
             <Link href={`/gallery/${img.slug}`} className={styles.CharacterContainerLink}>
               <div style={{
-                backgroundImage: `linear-gradient(180deg, #000c 0%, #000c 50%, #0004 100%), url(${img.images[0]})`,
+                backgroundImage: `linear-gradient(0deg, #000c 0%, #000c 50%, #0004 100%), url(${img.images[0]})`,
               }} className={styles.CharacterContainer}>
                 <h2>{img.title}</h2>
                 <p>{new Date(img.created).toLocaleDateString()}</p>

src/app/(slug)/characters/page.tsx

@@ -41,7 +41,7 @@ export default async function Home({
           return (
             <Link href={`/characters/${character.id}`} className={styles.CharacterContainerLink}>
               <div style={{
-                backgroundImage: `linear-gradient(180deg, #000c 0%, #000c 50%, #0004 100%), url(${charblogs.data.images[0]})`,
+                backgroundImage: `linear-gradient(0deg, #000c 0%, #000c 50%, #0004 100%), url(${charblogs.data.images[0]})`,
               }} className={styles.CharacterContainer}>
                 <h2>{character.name}</h2>
                 <p>{character.pronouns}</p>
@@ -50,15 +50,14 @@ export default async function Home({
           );
         })}
       </div>
-      <p>
+      <div className="navigation">
         <ConditionalNull condition={curPage > 1}>
           <Link href={`?page=${curPage - 1}`}>Previous</Link>
         </ConditionalNull>
-        {" "}
         <ConditionalNull condition={curPage * 10 < charblogs.data.total_posts}>
           <Link href={`?page=${curPage + 1}`}>Next</Link>
         </ConditionalNull>
-      </p>
+      </div>
     </MainLayout>
   )
 }

src/app/(slug)/characters/style.module.css

@@ -11,6 +11,9 @@
 }
 
 .CharacterContainer {
+  display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
   aspect-ratio: 1/1;
   overflow: hidden;
   padding: 16px;

src/app/(slug)/gallery/[slug]/page.tsx

@@ -2,6 +2,9 @@ import { MainLayout } from "@/layout/MainLayout/MainLayout";
 import { notFound } from "next/navigation";
 import Markdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
+import styles from "../style.module.css";
+import Link from "next/link";
+import { ConditionalNull } from "@/components/utility/Conditional";
 
 export default async function Home({
   params
@@ -13,6 +16,32 @@ export default async function Home({
   const blog = await fetch(`https://img.abtmtr.link/api/collections/mtr/posts/${params.slug}`, { cache: 'no-store' }).then(x=>x.json());
   if (blog.data == null)
     return notFound();
+
+  let allCharacters:{
+    id: string,
+    name: string,
+    description?: string[],
+    picture: string,
+    gender: string,
+    pronunciation: string,
+    pronouns: string,
+    spec?: string,
+    species: string,
+    age: number,
+    height: number,
+    relationships: {
+      id: string,
+      status: string,
+    }[]
+  }[] = [];
+
+  await (blog.data.tags.reduce(async (p:Promise<any>, tag:string) => {
+    const tagCharacter = await fetch(`https://blog.abtmtr.link/api/collections/characters/posts/${tag}`, { next: { revalidate: 1800 } }).then(x=>x.json());
+    if (tagCharacter.data == null) return;
+
+    allCharacters.push(JSON.parse(tagCharacter.data.body.replace(/[“”]/g, "\"")));
+  }, Promise.resolve()));
+
   return (
     <MainLayout currentPage={`/gallery/${params.slug}`} title="Gallery" subtitle="via img.abtmtr.link" backButton>
       <h1>{blog.data.title}</h1>
@@ -22,6 +51,23 @@ export default async function Home({
         }}>
         <Markdown rehypePlugins={[rehypeRaw]}>{blog.data.body}</Markdown>
       </div>
+      <ConditionalNull condition={allCharacters.length >= 1}><h2>Characters</h2></ConditionalNull>
+      <div className={styles.ImageContainerGrid}>
+        {allCharacters.map(async (character) => {
+          const charblogs = await fetch(`https://img.abtmtr.link/api/collections/mtr/posts/${character.picture}`).then(x=>x.json());
+          console.log(charblogs?.data?.images?.[0]);
+          return (
+            <Link href={`/characters/${character.id}`} className={styles.ImageContainerLink}>
+              <div style={{
+                backgroundImage: `linear-gradient(0deg, #000c 0%, #000c 50%, #0004 100%), url(${charblogs.data.images[0]})`,
+              }} className={styles.ImageContainer}>
+                <h2>{character.name}</h2>
+                <p>{character.pronouns}</p>
+              </div>
+            </Link>
+          );
+        })}
+      </div>
     </MainLayout>
   )
 }

src/app/(slug)/gallery/page.tsx

@@ -31,7 +31,7 @@ export default async function Home({
       }) => (
         <Link href={`/gallery/${post.slug}`} className={styles.ImageContainerLink}>
           <div style={{
-            backgroundImage: `linear-gradient(180deg, #000c 0%, #000c 50%, #0004 100%), url(${post.images?.[0]})`,
+            backgroundImage: `linear-gradient(0deg, #000c 0%, #000c 50%, #0004 100%), url(${post.images?.[0]})`,
           }} className={styles.ImageContainer}>
             <h2>{post.title}</h2>
             <p>Posted {new Date(post.created).toLocaleDateString()}</p>
@@ -39,15 +39,14 @@ export default async function Home({
         </Link>
       ))}
       </div>
-      <p>
+      <div className="navigation">
         <ConditionalNull condition={curPage > 1}>
           <Link href={`?page=${curPage - 1}`}>Previous</Link>
         </ConditionalNull>
-        {" "}
         <ConditionalNull condition={curPage * 10 < blogs.data.total_posts}>
           <Link href={`?page=${curPage + 1}`}>Next</Link>
         </ConditionalNull>
-      </p>
+      </div>
     </MainLayout>
   )
 }

src/app/(slug)/gallery/style.module.css

@@ -11,6 +11,9 @@
 }
 
 .ImageContainer {
+  display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
   aspect-ratio: 1/1;
   overflow: hidden;
   padding: 16px;

src/app/(slug)/stories/page.tsx

@@ -39,15 +39,14 @@ export default async function Home({
           </Markdown>
         </div>
       ))}
-      <p>
+      <div className="navigation">
         <ConditionalNull condition={curPage > 1}>
           <Link href={`?page=${curPage - 1}`}>Previous</Link>
         </ConditionalNull>
-        {" "}
         <ConditionalNull condition={curPage * 10 < blogs.data.total_posts}>
           <Link href={`?page=${curPage + 1}`}>Next</Link>
         </ConditionalNull>
-      </p>
+      </div>
     </MainLayout>
   )
 }

src/layout/MainLayout/MainLayout.module.css

@@ -56,6 +56,7 @@
   border-right: 1px solid var(--neutral);
 }
 
+.MainLayout_Aside.Modifier_Open {}
 .MainLayout_Inner {
   max-width: 100%;
   max-height: 100%;

src/layout/MainLayout/MainLayout.tsx

@@ -16,7 +16,5 @@ export function MainLayout({
   sidebar?: React.ReactNode,
   currentPage: string
 }) {
-  return (<>
+  return <Desktop title={title} subtitle={subtitle} backButton={backButton} sidebar={sidebar ?? SidebarMain({currentPage})}>{children}</Desktop>
-    <Desktop title={title} subtitle={subtitle} backButton={backButton} sidebar={sidebar ?? SidebarMain({currentPage})}>{children}</Desktop>
-  </>)
 }

src/layout/MainLayout/Sidebar/Main/Main.module.css

@@ -13,7 +13,11 @@
   gap: 8px;
 }
 
-.Main_List_CurrentLink button {
+.Main_List>a {
+  text-decoration: none;
+}
+
+.Main_List_CurrentLink>div {
   background-color: var(--bg-2);
 }
 

src/layout/MainLayout/Sidebar/Main/Main.tsx

@@ -9,58 +9,58 @@ export function SidebarMain({currentPage}:{currentPage:string}) {
     </div> */}
     <div className={styles.Main_List}>
       <Link href="/" className={currentPage === "/" ? styles.Main_List_CurrentLink : ""} tabIndex={-1}>
-        <button className={`fw ${styles.Main_List_Button}`}>
+        <div className={`fw ${styles.Main_List_Button}`}>
             <span className="icon">home</span>
             <span>Root</span>
-        </button>
+        </div>
       </Link>
       <Link href="/projects/" className={currentPage.includes("/projects/") ? styles.Main_List_CurrentLink : ""} tabIndex={-1}>
-        <button className={`fw ${styles.Main_List_Button}`}>
+        <div className={`fw ${styles.Main_List_Button}`}>
             <span className="icon">folder</span>
             <span>Projects</span>
-        </button>
+        </div>
       </Link>
       <Link href="/characters/" className={currentPage.includes("/characters/") ? styles.Main_List_CurrentLink : ""} tabIndex={-1}>
-        <button className={`fw ${styles.Main_List_Button}`}>
+        <div className={`fw ${styles.Main_List_Button}`}>
             <span className="icon">group</span>
             <span>Characters</span>
-        </button>
+        </div>
       </Link>
       <Link href="/blog/" className={currentPage.includes("/blog/") ? styles.Main_List_CurrentLink : ""} tabIndex={-1}>
-        <button className={`fw ${styles.Main_List_Button}`}>
+        <div className={`fw ${styles.Main_List_Button}`}>
             <span className="icon">description</span>
             <span>Blog</span>
-        </button>
+        </div>
       </Link>
       <Link href="/gallery/" className={currentPage.includes("/gallery/") ? styles.Main_List_CurrentLink : ""} tabIndex={-1}>
-        <button className={`fw ${styles.Main_List_Button}`}>
+        <div className={`fw ${styles.Main_List_Button}`}>
             <span className="icon">image</span>
             <span>Gallery</span>
-        </button>
+        </div>
       </Link>
       <Link href="/stories/" className={currentPage.includes("/stories/") ? styles.Main_List_CurrentLink : ""} tabIndex={-1}>
-        <button className={`fw ${styles.Main_List_Button}`}>
+        <div className={`fw ${styles.Main_List_Button}`}>
             <span className="icon">book</span>
             <span>Stories</span>
-        </button>
+        </div>
       </Link>
       <Link href="/links/" className={currentPage.includes("/links/") ? styles.Main_List_CurrentLink : ""} tabIndex={-1}>
-        <button className={`fw ${styles.Main_List_Button}`}>
+        <div className={`fw ${styles.Main_List_Button}`}>
             <span className="icon">link</span>
             <span>Links</span>
-        </button>
+        </div>
       </Link>
       <Link href="/oao/" className={currentPage.includes("/oao/") ? styles.Main_List_CurrentLink : ""} tabIndex={-1}>
-        <button className={`fw ${styles.Main_List_Button}`}>
+        <div className={`fw ${styles.Main_List_Button}`}>
             <span className="icon">campaign</span>
             <span>Opinions & Objections</span>
-        </button>
+        </div>
       </Link>
       <Link href="/about/" className={currentPage.includes("/about/") ? styles.Main_List_CurrentLink : ""} tabIndex={-1}>
-        <button className={`fw ${styles.Main_List_Button}`}>
+        <div className={`fw ${styles.Main_List_Button}`}>
             <span className="icon">info</span>
             <span>About</span>
-        </button>
+        </div>
       </Link>
     </div>
   </>

src/styles/style.css

@@ -78,7 +78,7 @@ button:hover {
   opacity: 0.75;
 }
 
-button.fw {
+div.fw {
   padding: 8px;
   width: 100%;
   border-radius: 4px;
@@ -86,11 +86,11 @@ button.fw {
   text-decoration: none;
 }
 
-button.fw a {
+div.fw a {
   text-decoration: none;
 }
 
-button.fw:hover {
+div.fw:hover {
   background-color: var(--bg-2);
   opacity: 1;
 }
@@ -102,3 +102,9 @@ img.headerImage {
   image-rendering: crisp-edges;
   background-color: var(--bg-1);
 }
+.navigation {
+  margin: 16px 0;
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+}