From 6e584f5030c80b238da0d892acd19b228d633c7c Mon Sep 17 00:00:00 2001
From: MeowcaTheoRange <me@abtmtr.link>
Date: Tue, 2 Apr 2024 18:23:04 -0500
Subject: [PATCH] Improve gallery view, add icons

---
 src/app/{ => (slug)}/blog/[slug]/page.tsx     |  0
 src/app/{ => (slug)}/blog/page.tsx            |  0
 .../{ => (slug)}/characters/[slug]/page.tsx   |  0
 src/app/{ => (slug)}/characters/page.tsx      |  0
 .../{ => (slug)}/characters/style.module.css  |  0
 src/app/{ => (slug)}/gallery/[slug]/page.tsx  |  0
 src/app/{ => (slug)}/gallery/page.tsx         | 27 ++++-----
 src/app/(slug)/gallery/style.module.css       | 18 ++++++
 src/app/{ => (slug)}/stories/[slug]/page.tsx  |  0
 src/app/{ => (slug)}/stories/page.tsx         |  0
 src/layout/MainLayout/Sidebar/Main/Main.tsx   | 59 +++++++++++--------
 src/styles/style.css                          | 10 ++++
 12 files changed, 75 insertions(+), 39 deletions(-)
 rename src/app/{ => (slug)}/blog/[slug]/page.tsx (100%)
 rename src/app/{ => (slug)}/blog/page.tsx (100%)
 rename src/app/{ => (slug)}/characters/[slug]/page.tsx (100%)
 rename src/app/{ => (slug)}/characters/page.tsx (100%)
 rename src/app/{ => (slug)}/characters/style.module.css (100%)
 rename src/app/{ => (slug)}/gallery/[slug]/page.tsx (100%)
 rename src/app/{ => (slug)}/gallery/page.tsx (69%)
 create mode 100644 src/app/(slug)/gallery/style.module.css
 rename src/app/{ => (slug)}/stories/[slug]/page.tsx (100%)
 rename src/app/{ => (slug)}/stories/page.tsx (100%)

diff --git a/src/app/blog/[slug]/page.tsx b/src/app/(slug)/blog/[slug]/page.tsx
similarity index 100%
rename from src/app/blog/[slug]/page.tsx
rename to src/app/(slug)/blog/[slug]/page.tsx
diff --git a/src/app/blog/page.tsx b/src/app/(slug)/blog/page.tsx
similarity index 100%
rename from src/app/blog/page.tsx
rename to src/app/(slug)/blog/page.tsx
diff --git a/src/app/characters/[slug]/page.tsx b/src/app/(slug)/characters/[slug]/page.tsx
similarity index 100%
rename from src/app/characters/[slug]/page.tsx
rename to src/app/(slug)/characters/[slug]/page.tsx
diff --git a/src/app/characters/page.tsx b/src/app/(slug)/characters/page.tsx
similarity index 100%
rename from src/app/characters/page.tsx
rename to src/app/(slug)/characters/page.tsx
diff --git a/src/app/characters/style.module.css b/src/app/(slug)/characters/style.module.css
similarity index 100%
rename from src/app/characters/style.module.css
rename to src/app/(slug)/characters/style.module.css
diff --git a/src/app/gallery/[slug]/page.tsx b/src/app/(slug)/gallery/[slug]/page.tsx
similarity index 100%
rename from src/app/gallery/[slug]/page.tsx
rename to src/app/(slug)/gallery/[slug]/page.tsx
diff --git a/src/app/gallery/page.tsx b/src/app/(slug)/gallery/page.tsx
similarity index 69%
rename from src/app/gallery/page.tsx
rename to src/app/(slug)/gallery/page.tsx
index aedf198..63e454e 100644
--- a/src/app/gallery/page.tsx
+++ b/src/app/(slug)/gallery/page.tsx
@@ -3,6 +3,7 @@ import { MainLayout } from "@/layout/MainLayout/MainLayout";
 import Link from "next/link";
 import Markdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
+import styles from "./style.module.css";
 
 export default async function Home({
   searchParams
@@ -17,6 +18,7 @@ export default async function Home({
   return (
     <MainLayout currentPage="/gallery/" title="Gallery" subtitle="via img.abtmtr.link">
       <img className="headerImage" src="/headers/gallery.png" alt="GALLERY"></img>
+      <div className={styles.ImageContainerGrid}>
       {blogs.data.posts.map((post:{
         title: string,
         body: string,
@@ -24,22 +26,19 @@ export default async function Home({
         updated: string,
         tags: string[],
         views: number,
-        slug: string
+        slug: string,
+        images: string[]
       }) => (
-        <div style={{
-          margin: "16px 0"
-        }}>
-          <h2><Link href={`/gallery/${post.slug}`}>{post.title}</Link></h2>
-          <p><small>Posted {new Date(post.created).toLocaleString()} - {post.views} views</small></p>
-          <Markdown 
-            rehypePlugins={[rehypeRaw]} 
-            allowedElements={[]} 
-            unwrapDisallowed={true}
-          >
-            {post.body.split("\n").slice(0, 2).join("\n")}
-          </Markdown>
-        </div>
+        <Link href={`/gallery/${post.slug}`} className={styles.ImageContainerLink}>
+          <div style={{
+            backgroundImage: `linear-gradient(180deg, #000c 0%, #000c 50%, #0004 100%), url(${post.images?.[0]})`,
+          }} className={styles.ImageContainer}>
+            <h2>{post.title}</h2>
+            <p>Posted {new Date(post.created).toLocaleString()}</p>
+          </div>
+        </Link>
       ))}
+      </div>
       <p>
         <ConditionalNull condition={curPage > 1}>
           <Link href={`?page=${curPage - 1}`}>Previous</Link>
diff --git a/src/app/(slug)/gallery/style.module.css b/src/app/(slug)/gallery/style.module.css
new file mode 100644
index 0000000..86c956d
--- /dev/null
+++ b/src/app/(slug)/gallery/style.module.css
@@ -0,0 +1,18 @@
+.ImageContainerGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  margin: 16px 0;
+}
+
+.ImageContainerLink {
+  color: white;
+  text-decoration: none;
+}
+
+.ImageContainer {
+  aspect-ratio: 1/1;
+  overflow: hidden;
+  padding: 16px;
+  background-size: cover;
+}
\ No newline at end of file
diff --git a/src/app/stories/[slug]/page.tsx b/src/app/(slug)/stories/[slug]/page.tsx
similarity index 100%
rename from src/app/stories/[slug]/page.tsx
rename to src/app/(slug)/stories/[slug]/page.tsx
diff --git a/src/app/stories/page.tsx b/src/app/(slug)/stories/page.tsx
similarity index 100%
rename from src/app/stories/page.tsx
rename to src/app/(slug)/stories/page.tsx
diff --git a/src/layout/MainLayout/Sidebar/Main/Main.tsx b/src/layout/MainLayout/Sidebar/Main/Main.tsx
index 817b5ad..ac0413c 100644
--- a/src/layout/MainLayout/Sidebar/Main/Main.tsx
+++ b/src/layout/MainLayout/Sidebar/Main/Main.tsx
@@ -10,47 +10,56 @@ export function SidebarMain({currentPage}:{currentPage:string}) {
     <div className={styles.Main_List}>
       <Link href="/" className={currentPage === "/" ? styles.Main_List_CurrentLink : ""}>
         <button className={`fw ${styles.Main_List_Button}`}>
-            Root
-        </button>
-      </Link>
-      <Link href="/characters/" className={currentPage.includes("/characters/") ? styles.Main_List_CurrentLink : ""}>
-        <button className={`fw ${styles.Main_List_Button}`}>
-            Characters
-        </button>
-      </Link>
-      <Link href="/links/" className={currentPage.includes("/links/") ? styles.Main_List_CurrentLink : ""}>
-        <button className={`fw ${styles.Main_List_Button}`}>
-            Links
-        </button>
-      </Link>
-      <Link href="/oao/" className={currentPage.includes("/oao/") ? styles.Main_List_CurrentLink : ""}>
-        <button className={`fw ${styles.Main_List_Button}`}>
-            Opinions & Objections
+            <span className="icon">home</span>
+            <span>Root</span>
         </button>
       </Link>
       <Link href="/projects/" className={currentPage.includes("/projects/") ? styles.Main_List_CurrentLink : ""}>
         <button className={`fw ${styles.Main_List_Button}`}>
-            Projects
+            <span className="icon">folder</span>
+            <span>Projects</span>
+        </button>
+      </Link>
+      <Link href="/characters/" className={currentPage.includes("/characters/") ? styles.Main_List_CurrentLink : ""}>
+        <button className={`fw ${styles.Main_List_Button}`}>
+            <span className="icon">group</span>
+            <span>Characters</span>
         </button>
       </Link>
       <Link href="/blog/" className={currentPage.includes("/blog/") ? styles.Main_List_CurrentLink : ""}>
         <button className={`fw ${styles.Main_List_Button}`}>
-            Blog
-        </button>
-      </Link>
-      <Link href="/stories/" className={currentPage.includes("/stories/") ? styles.Main_List_CurrentLink : ""}>
-        <button className={`fw ${styles.Main_List_Button}`}>
-            Stories
+            <span className="icon">description</span>
+            <span>Blog</span>
         </button>
       </Link>
       <Link href="/gallery/" className={currentPage.includes("/gallery/") ? styles.Main_List_CurrentLink : ""}>
         <button className={`fw ${styles.Main_List_Button}`}>
-            Gallery
+            <span className="icon">image</span>
+            <span>Gallery</span>
+        </button>
+      </Link>
+      <Link href="/stories/" className={currentPage.includes("/stories/") ? styles.Main_List_CurrentLink : ""}>
+        <button className={`fw ${styles.Main_List_Button}`}>
+            <span className="icon">book</span>
+            <span>Stories</span>
+        </button>
+      </Link>
+      <Link href="/links/" className={currentPage.includes("/links/") ? styles.Main_List_CurrentLink : ""}>
+        <button className={`fw ${styles.Main_List_Button}`}>
+            <span className="icon">link</span>
+            <span>Links</span>
+        </button>
+      </Link>
+      <Link href="/oao/" className={currentPage.includes("/oao/") ? styles.Main_List_CurrentLink : ""}>
+        <button className={`fw ${styles.Main_List_Button}`}>
+            <span className="icon">campaign</span>
+            <span>Opinions & Objections</span>
         </button>
       </Link>
       <Link href="/about/" className={currentPage.includes("/about/") ? styles.Main_List_CurrentLink : ""}>
         <button className={`fw ${styles.Main_List_Button}`}>
-            About
+            <span className="icon">info</span>
+            <span>About</span>
         </button>
       </Link>
     </div>
diff --git a/src/styles/style.css b/src/styles/style.css
index ac1dbeb..3ec60f5 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -42,6 +42,15 @@ a {
   color: var(--accent-color);
 }
 
+span {
+  vertical-align: middle;
+}
+
+span.icon {
+  font-family: var(--font-MaterialSymbols);
+  font-size: 24px;
+  padding-right: 8px;
+}
 h1,
 h2,
 h3,
@@ -91,4 +100,5 @@ img.headerImage {
   display: inline-block;
   aspect-ratio: 768/300;
   image-rendering: crisp-edges;
+  background-color: var(--bg-1);
 }
\ No newline at end of file