MeowcaTheoRange/abtmtr-v9
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Optimizations, characters in Gallery, etc.

Browse source
This commit is contained in:
MeowcaTheoRange 2024-04-03 11:32:44 -05:00
parent 95ec9f0a2b
commit 3823cc14d9
13 changed files with 97 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/app/(slug)/blog/page.tsx
View file

@ -41,15 +41,14 @@ export default async function Home({
</Markdown>
</div>
))}
<p>
<div className="navigation">
<ConditionalNull condition={curPage > 1}>
<Link href={`?page=${curPage - 1}`}>Previous</Link>
</ConditionalNull>
{" "}
<ConditionalNull condition={curPage * 10 < blogs.data.total_posts}>
<Link href={`?page=${curPage + 1}`}>Next</Link>
</ConditionalNull>
</p>
</div>
</MainLayout>
)
}

2
src/app/(slug)/characters/[slug]/page.tsx
View file

@ -78,7 +78,7 @@ export default async function Home({
return (
<Link href={`/gallery/${img.slug}`} className={styles.CharacterContainerLink}>
<div style={{
backgroundImage: `linear-gradient(180deg, #000c 0%, #000c 50%, #0004 100%), url(${img.images[0]})`,
backgroundImage: `linear-gradient(0deg, #000c 0%, #000c 50%, #0004 100%), url(${img.images[0]})`,
}} className={styles.CharacterContainer}>
<h2>{img.title}</h2>
<p>{new Date(img.created).toLocaleDateString()}</p>

7
src/app/(slug)/characters/page.tsx
View file

@ -41,7 +41,7 @@ export default async function Home({
return (
<Link href={`/characters/${character.id}`} className={styles.CharacterContainerLink}>
<div style={{
backgroundImage: `linear-gradient(180deg, #000c 0%, #000c 50%, #0004 100%), url(${charblogs.data.images[0]})`,
backgroundImage: `linear-gradient(0deg, #000c 0%, #000c 50%, #0004 100%), url(${charblogs.data.images[0]})`,
}} className={styles.CharacterContainer}>
<h2>{character.name}</h2>
<p>{character.pronouns}</p>
@ -50,15 +50,14 @@ export default async function Home({
);
})}
</div>
<p>
<div className="navigation">
<ConditionalNull condition={curPage > 1}>
<Link href={`?page=${curPage - 1}`}>Previous</Link>
</ConditionalNull>
{" "}
<ConditionalNull condition={curPage * 10 < charblogs.data.total_posts}>
<Link href={`?page=${curPage + 1}`}>Next</Link>
</ConditionalNull>
</p>
</div>
</MainLayout>
)
}

3
src/app/(slug)/characters/style.module.css
View file

@ -11,6 +11,9 @@
}
.CharacterContainer {
display: flex;
flex-direction: column;
justify-content: flex-end;
aspect-ratio: 1/1;
overflow: hidden;
padding: 16px;

46
src/app/(slug)/gallery/[slug]/page.tsx
View file

@ -2,6 +2,9 @@ import { MainLayout } from "@/layout/MainLayout/MainLayout";
import { notFound } from "next/navigation";
import Markdown from "react-markdown";
import rehypeRaw from "rehype-raw";
import styles from "../style.module.css";
import Link from "next/link";
import { ConditionalNull } from "@/components/utility/Conditional";
export default async function Home({
params
@ -13,6 +16,32 @@ export default async function Home({
const blog = await fetch(`https://img.abtmtr.link/api/collections/mtr/posts/${params.slug}`, { cache: 'no-store' }).then(x=>x.json());
if (blog.data == null)
return notFound();
let allCharacters:{
id: string,
name: string,
description?: string[],
picture: string,
gender: string,
pronunciation: string,
pronouns: string,
spec?: string,
species: string,
age: number,
height: number,
relationships: {
id: string,
status: string,
}[]
}[] = [];
await (blog.data.tags.reduce(async (p:Promise<any>, tag:string) => {
const tagCharacter = await fetch(`https://blog.abtmtr.link/api/collections/characters/posts/${tag}`, { next: { revalidate: 1800 } }).then(x=>x.json());
if (tagCharacter.data == null) return;
allCharacters.push(JSON.parse(tagCharacter.data.body.replace(/[“”]/g, "\"")));
}, Promise.resolve()));
return (
<MainLayout currentPage={`/gallery/${params.slug}`} title="Gallery" subtitle="via img.abtmtr.link" backButton>
<h1>{blog.data.title}</h1>
@ -22,6 +51,23 @@ export default async function Home({
}}>
<Markdown rehypePlugins={[rehypeRaw]}>{blog.data.body}</Markdown>
</div>
<ConditionalNull condition={allCharacters.length >= 1}><h2>Characters</h2></ConditionalNull>
<div className={styles.ImageContainerGrid}>
{allCharacters.map(async (character) => {
const charblogs = await fetch(`https://img.abtmtr.link/api/collections/mtr/posts/${character.picture}`).then(x=>x.json());
console.log(charblogs?.data?.images?.[0]);
return (
<Link href={`/characters/${character.id}`} className={styles.ImageContainerLink}>
<div style={{
backgroundImage: `linear-gradient(0deg, #000c 0%, #000c 50%, #0004 100%), url(${charblogs.data.images[0]})`,
}} className={styles.ImageContainer}>
<h2>{character.name}</h2>
<p>{character.pronouns}</p>
</div>
</Link>
);
})}
</div>
</MainLayout>
)
}

7
src/app/(slug)/gallery/page.tsx
View file

@ -31,7 +31,7 @@ export default async function Home({
}) => (
<Link href={`/gallery/${post.slug}`} className={styles.ImageContainerLink}>
<div style={{
backgroundImage: `linear-gradient(180deg, #000c 0%, #000c 50%, #0004 100%), url(${post.images?.[0]})`,
backgroundImage: `linear-gradient(0deg, #000c 0%, #000c 50%, #0004 100%), url(${post.images?.[0]})`,
}} className={styles.ImageContainer}>
<h2>{post.title}</h2>
<p>Posted {new Date(post.created).toLocaleDateString()}</p>
@ -39,15 +39,14 @@ export default async function Home({
</Link>
))}
</div>
<p>
<div className="navigation">
<ConditionalNull condition={curPage > 1}>
<Link href={`?page=${curPage - 1}`}>Previous</Link>
</ConditionalNull>
{" "}
<ConditionalNull condition={curPage * 10 < blogs.data.total_posts}>
<Link href={`?page=${curPage + 1}`}>Next</Link>
</ConditionalNull>
</p>
</div>
</MainLayout>
)
}

3
src/app/(slug)/gallery/style.module.css
View file

@ -11,6 +11,9 @@
}
.ImageContainer {
display: flex;
flex-direction: column;
justify-content: flex-end;
aspect-ratio: 1/1;
overflow: hidden;
padding: 16px;

5
src/app/(slug)/stories/page.tsx
View file

@ -39,15 +39,14 @@ export default async function Home({
</Markdown>
</div>
))}
<p>
<div className="navigation">
<ConditionalNull condition={curPage > 1}>
<Link href={`?page=${curPage - 1}`}>Previous</Link>
</ConditionalNull>
{" "}
<ConditionalNull condition={curPage * 10 < blogs.data.total_posts}>
<Link href={`?page=${curPage + 1}`}>Next</Link>
</ConditionalNull>
</p>
</div>
</MainLayout>
)
}

1
src/layout/MainLayout/MainLayout.module.css
View file

@ -56,6 +56,7 @@
border-right: 1px solid var(--neutral);
}
.MainLayout_Aside.Modifier_Open {}
.MainLayout_Inner {
max-width: 100%;
max-height: 100%;

4
src/layout/MainLayout/MainLayout.tsx
View file

@ -16,7 +16,5 @@ export function MainLayout({
sidebar?: React.ReactNode,
currentPage: string
}) {
return (<>
<Desktop title={title} subtitle={subtitle} backButton={backButton} sidebar={sidebar ?? SidebarMain({currentPage})}>{children}</Desktop>
</>)
return <Desktop title={title} subtitle={subtitle} backButton={backButton} sidebar={sidebar ?? SidebarMain({currentPage})}>{children}</Desktop>
}

6
src/layout/MainLayout/Sidebar/Main/Main.module.css
View file

@ -13,7 +13,11 @@
gap: 8px;
}
.Main_List_CurrentLink button {
.Main_List>a {
text-decoration: none;
}
.Main_List_CurrentLink>div {
background-color: var(--bg-2);
}

36
src/layout/MainLayout/Sidebar/Main/Main.tsx
View file

@ -9,58 +9,58 @@ export function SidebarMain({currentPage}:{currentPage:string}) {
</div> */}
<div className={styles.Main_List}>
<Link href="/" className={currentPage === "/" ? styles.Main_List_CurrentLink : ""} tabIndex={-1}>
<button className={`fw ${styles.Main_List_Button}`}>
<div className={`fw ${styles.Main_List_Button}`}>
<span className="icon">home</span>
<span>Root</span>
</button>
</div>
</Link>
<Link href="/projects/" className={currentPage.includes("/projects/") ? styles.Main_List_CurrentLink : ""} tabIndex={-1}>
<button className={`fw ${styles.Main_List_Button}`}>
<div className={`fw ${styles.Main_List_Button}`}>
<span className="icon">folder</span>
<span>Projects</span>
</button>
</div>
</Link>
<Link href="/characters/" className={currentPage.includes("/characters/") ? styles.Main_List_CurrentLink : ""} tabIndex={-1}>
<button className={`fw ${styles.Main_List_Button}`}>
<div className={`fw ${styles.Main_List_Button}`}>
<span className="icon">group</span>
<span>Characters</span>
</button>
</div>
</Link>
<Link href="/blog/" className={currentPage.includes("/blog/") ? styles.Main_List_CurrentLink : ""} tabIndex={-1}>
<button className={`fw ${styles.Main_List_Button}`}>
<div className={`fw ${styles.Main_List_Button}`}>
<span className="icon">description</span>
<span>Blog</span>
</button>
</div>
</Link>
<Link href="/gallery/" className={currentPage.includes("/gallery/") ? styles.Main_List_CurrentLink : ""} tabIndex={-1}>
<button className={`fw ${styles.Main_List_Button}`}>
<div className={`fw ${styles.Main_List_Button}`}>
<span className="icon">image</span>
<span>Gallery</span>
</button>
</div>
</Link>
<Link href="/stories/" className={currentPage.includes("/stories/") ? styles.Main_List_CurrentLink : ""} tabIndex={-1}>
<button className={`fw ${styles.Main_List_Button}`}>
<div className={`fw ${styles.Main_List_Button}`}>
<span className="icon">book</span>
<span>Stories</span>
</button>
</div>
</Link>
<Link href="/links/" className={currentPage.includes("/links/") ? styles.Main_List_CurrentLink : ""} tabIndex={-1}>
<button className={`fw ${styles.Main_List_Button}`}>
<div className={`fw ${styles.Main_List_Button}`}>
<span className="icon">link</span>
<span>Links</span>
</button>
</div>
</Link>
<Link href="/oao/" className={currentPage.includes("/oao/") ? styles.Main_List_CurrentLink : ""} tabIndex={-1}>
<button className={`fw ${styles.Main_List_Button}`}>
<div className={`fw ${styles.Main_List_Button}`}>
<span className="icon">campaign</span>
<span>Opinions & Objections</span>
</button>
</div>
</Link>
<Link href="/about/" className={currentPage.includes("/about/") ? styles.Main_List_CurrentLink : ""} tabIndex={-1}>
<button className={`fw ${styles.Main_List_Button}`}>
<div className={`fw ${styles.Main_List_Button}`}>
<span className="icon">info</span>
<span>About</span>
</button>
</div>
</Link>
</div>
</>

12
src/styles/style.css
View file

@ -78,7 +78,7 @@ button:hover {
opacity: 0.75;
}
button.fw {
div.fw {
padding: 8px;
width: 100%;
border-radius: 4px;
@ -86,11 +86,11 @@ button.fw {
text-decoration: none;
}
button.fw a {
div.fw a {
text-decoration: none;
}
button.fw:hover {
div.fw:hover {
background-color: var(--bg-2);
opacity: 1;
}
@ -101,4 +101,10 @@ img.headerImage {
aspect-ratio: 768/300;
image-rendering: crisp-edges;
background-color: var(--bg-1);
}
.navigation {
margin: 16px 0;
display: flex;
justify-content: center;
gap: 16px;
}