Improve gallery view, add icons
This commit is contained in:
parent
6900f165f6
commit
6e584f5030
12 changed files with 75 additions and 39 deletions
|
@ -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>
|
18
src/app/(slug)/gallery/style.module.css
Normal file
18
src/app/(slug)/gallery/style.module.css
Normal 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;
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
}
|
Loading…
Reference in a new issue