Improve gallery view, add icons

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[]
       }) => (
+        <Link href={`/gallery/${post.slug}`} className={styles.ImageContainerLink}>
           <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>
+            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>

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;
+}

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>

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);
 }