Improve gallery view, add icons

This commit is contained in:
MeowcaTheoRange 2024-04-02 18:23:04 -05:00
parent 6900f165f6
commit 6e584f5030
12 changed files with 75 additions and 39 deletions

View file

@ -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>

View file

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

View file

@ -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>

View file

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