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 Link from "next/link";
import Markdown from "react-markdown"; import Markdown from "react-markdown";
import rehypeRaw from "rehype-raw"; import rehypeRaw from "rehype-raw";
import styles from "./style.module.css";
export default async function Home({ export default async function Home({
searchParams searchParams
@ -17,6 +18,7 @@ export default async function Home({
return ( return (
<MainLayout currentPage="/gallery/" title="Gallery" subtitle="via img.abtmtr.link"> <MainLayout currentPage="/gallery/" title="Gallery" subtitle="via img.abtmtr.link">
<img className="headerImage" src="/headers/gallery.png" alt="GALLERY"></img> <img className="headerImage" src="/headers/gallery.png" alt="GALLERY"></img>
<div className={styles.ImageContainerGrid}>
{blogs.data.posts.map((post:{ {blogs.data.posts.map((post:{
title: string, title: string,
body: string, body: string,
@ -24,22 +26,19 @@ export default async function Home({
updated: string, updated: string,
tags: string[], tags: string[],
views: number, views: number,
slug: string slug: string,
images: string[]
}) => ( }) => (
<div style={{ <Link href={`/gallery/${post.slug}`} className={styles.ImageContainerLink}>
margin: "16px 0" <div style={{
}}> backgroundImage: `linear-gradient(180deg, #000c 0%, #000c 50%, #0004 100%), url(${post.images?.[0]})`,
<h2><Link href={`/gallery/${post.slug}`}>{post.title}</Link></h2> }} className={styles.ImageContainer}>
<p><small>Posted {new Date(post.created).toLocaleString()} - {post.views} views</small></p> <h2>{post.title}</h2>
<Markdown <p>Posted {new Date(post.created).toLocaleString()}</p>
rehypePlugins={[rehypeRaw]} </div>
allowedElements={[]} </Link>
unwrapDisallowed={true}
>
{post.body.split("\n").slice(0, 2).join("\n")}
</Markdown>
</div>
))} ))}
</div>
<p> <p>
<ConditionalNull condition={curPage > 1}> <ConditionalNull condition={curPage > 1}>
<Link href={`?page=${curPage - 1}`}>Previous</Link> <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}> <div className={styles.Main_List}>
<Link href="/" className={currentPage === "/" ? styles.Main_List_CurrentLink : ""}> <Link href="/" className={currentPage === "/" ? styles.Main_List_CurrentLink : ""}>
<button className={`fw ${styles.Main_List_Button}`}> <button className={`fw ${styles.Main_List_Button}`}>
Root <span className="icon">home</span>
</button> <span>Root</span>
</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
</button> </button>
</Link> </Link>
<Link href="/projects/" className={currentPage.includes("/projects/") ? styles.Main_List_CurrentLink : ""}> <Link href="/projects/" className={currentPage.includes("/projects/") ? styles.Main_List_CurrentLink : ""}>
<button className={`fw ${styles.Main_List_Button}`}> <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> </button>
</Link> </Link>
<Link href="/blog/" className={currentPage.includes("/blog/") ? styles.Main_List_CurrentLink : ""}> <Link href="/blog/" className={currentPage.includes("/blog/") ? styles.Main_List_CurrentLink : ""}>
<button className={`fw ${styles.Main_List_Button}`}> <button className={`fw ${styles.Main_List_Button}`}>
Blog <span className="icon">description</span>
</button> <span>Blog</span>
</Link>
<Link href="/stories/" className={currentPage.includes("/stories/") ? styles.Main_List_CurrentLink : ""}>
<button className={`fw ${styles.Main_List_Button}`}>
Stories
</button> </button>
</Link> </Link>
<Link href="/gallery/" className={currentPage.includes("/gallery/") ? styles.Main_List_CurrentLink : ""}> <Link href="/gallery/" className={currentPage.includes("/gallery/") ? styles.Main_List_CurrentLink : ""}>
<button className={`fw ${styles.Main_List_Button}`}> <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> </button>
</Link> </Link>
<Link href="/about/" className={currentPage.includes("/about/") ? styles.Main_List_CurrentLink : ""}> <Link href="/about/" className={currentPage.includes("/about/") ? styles.Main_List_CurrentLink : ""}>
<button className={`fw ${styles.Main_List_Button}`}> <button className={`fw ${styles.Main_List_Button}`}>
About <span className="icon">info</span>
<span>About</span>
</button> </button>
</Link> </Link>
</div> </div>

View file

@ -42,6 +42,15 @@ a {
color: var(--accent-color); color: var(--accent-color);
} }
span {
vertical-align: middle;
}
span.icon {
font-family: var(--font-MaterialSymbols);
font-size: 24px;
padding-right: 8px;
}
h1, h1,
h2, h2,
h3, h3,
@ -91,4 +100,5 @@ img.headerImage {
display: inline-block; display: inline-block;
aspect-ratio: 768/300; aspect-ratio: 768/300;
image-rendering: crisp-edges; image-rendering: crisp-edges;
background-color: var(--bg-1);
} }