everything
This commit is contained in:
parent
9445eeab1e
commit
4aeb6ebe6b
13 changed files with 525 additions and 125 deletions
|
|
@ -1,61 +1,30 @@
|
||||||
---
|
---
|
||||||
interface Props {
|
import pb from "../lib/pb";
|
||||||
title: string;
|
|
||||||
body: string;
|
const { href, title, body, image } = Astro.props;
|
||||||
href: string;
|
let imageURL;
|
||||||
|
|
||||||
|
if (image) {
|
||||||
|
imageURL = pb.files.getUrl(image, image.file);
|
||||||
}
|
}
|
||||||
|
|
||||||
const { href, title, body } = Astro.props;
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<li class="link-card">
|
<div class="relative max-w-xl mx-auto mt-20 h-32 w-64">
|
||||||
<a href={href}>
|
<a href={href} class="block">
|
||||||
<h2>
|
{
|
||||||
{title}
|
image && (
|
||||||
<span>→</span>
|
<img
|
||||||
</h2>
|
class="h-32 w-64 object-cover rounded-md"
|
||||||
<p>
|
src={imageURL}
|
||||||
{body}
|
alt={`Cover for ${title}`}
|
||||||
</p>
|
/>
|
||||||
</a>
|
)
|
||||||
</li>
|
}
|
||||||
<style>
|
|
||||||
.link-card {
|
<div class="absolute inset-0 bg-gray-700 opacity-60 rounded-md"></div>
|
||||||
list-style: none;
|
<div class="absolute inset-0 inline-flex flex-col items-center justify-center">
|
||||||
display: flex;
|
<h2 class="text-white text-3xl font-bold">{title}</h2>
|
||||||
padding: 1px;
|
<span class="text-white">{body}</span>
|
||||||
background-color: #23262d;
|
</div>
|
||||||
background-image: none;
|
</a>
|
||||||
background-size: 400%;
|
</div>
|
||||||
border-radius: 7px;
|
|
||||||
background-position: 100%;
|
|
||||||
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
|
||||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
.link-card > a {
|
|
||||||
width: 100%;
|
|
||||||
text-decoration: none;
|
|
||||||
line-height: 1.4;
|
|
||||||
padding: calc(1.5rem - 1px);
|
|
||||||
border-radius: 8px;
|
|
||||||
color: white;
|
|
||||||
background-color: #23262d;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
.link-card:is(:hover, :focus-within) {
|
|
||||||
background-position: 0;
|
|
||||||
background-image: var(--accent-gradient);
|
|
||||||
}
|
|
||||||
.link-card:is(:hover, :focus-within) h2 {
|
|
||||||
color: rgb(var(--accent-light));
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,50 @@
|
||||||
---
|
---
|
||||||
import { Image as AstroImage } from "astro:assets";
|
import { Picture as AstroPic } from "astro:assets";
|
||||||
const { src, alt } = Astro.props;
|
const { src, alt, nsfw } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<AstroImage
|
<div class="overflow-hidden rounded" data-nsfw={`${nsfw}`}>
|
||||||
src={src}
|
<div
|
||||||
alt={alt}
|
data-lightbox="true"
|
||||||
inferSize={true}
|
id="parent"
|
||||||
format="avif"
|
class=`relative overflow-hidden rounded mb-4 border border-transparent hover:border-gray-300 transition-all duration-300 ease-in-out hover:shadow-lg w-52`
|
||||||
quality={50}
|
>
|
||||||
class="rounded mb-4 border border-transparent hover:border-gray-300 transition-all duration-300 ease-in-out hover:shadow-lg max-w-48"
|
<img src={src} alt={alt} loading="lazy" />
|
||||||
loading="lazy"
|
{
|
||||||
/>
|
alt && (
|
||||||
|
<div
|
||||||
|
id="info"
|
||||||
|
class="z-[2] absolute text-wrap break-words bottom-0 left-0 right-0 px-4 py-2 bg-gray-800 text-white opacity-0 transition-opacity"
|
||||||
|
>
|
||||||
|
{alt}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { nsfw } from "../lib/stores/nsfw";
|
||||||
|
|
||||||
|
const nsfwImages = document.querySelectorAll('[data-nsfw="true"]');
|
||||||
|
nsfw.subscribe((nsfw) => {
|
||||||
|
if (nsfw) {
|
||||||
|
// @ts-ignore
|
||||||
|
nsfwImages.forEach((image) => (image.style.display = "inherit"));
|
||||||
|
} else {
|
||||||
|
// @ts-ignore
|
||||||
|
nsfwImages.forEach((image) => (image.style.display = "none"));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#parent:hover > #info {
|
||||||
|
opacity: 70;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info {
|
||||||
|
background-color: rgba(255, 255, 255, 0.15);
|
||||||
|
backdrop-filter: blur(5px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
78
src/components/IndexSidebar.astro
Normal file
78
src/components/IndexSidebar.astro
Normal file
|
|
@ -0,0 +1,78 @@
|
||||||
|
---
|
||||||
|
import { Image } from "astro:assets";
|
||||||
|
import config from "../../config.yaml";
|
||||||
|
import SocialCard from "./SocialCard.astro";
|
||||||
|
const {} = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<aside>
|
||||||
|
<div class="p-4">
|
||||||
|
<a href="/">
|
||||||
|
{
|
||||||
|
config.icon && (
|
||||||
|
<Image
|
||||||
|
class={"icon"}
|
||||||
|
src={config.icon}
|
||||||
|
width={10}
|
||||||
|
height={10}
|
||||||
|
alt={""}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
<h1 class="font-bold text-2xl pt-4">{config.title}</h1></a
|
||||||
|
>
|
||||||
|
<p class="pt-4">{config.description}</p>
|
||||||
|
<br />
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<h1 class="font-bold text-2xl pt-4">Socials</h1>
|
||||||
|
<div
|
||||||
|
id="socials"
|
||||||
|
class="flex gap-4 columns-2 md:columns-4 pt-4"
|
||||||
|
>
|
||||||
|
{
|
||||||
|
config.socials &&
|
||||||
|
config.socials.map((s) => (
|
||||||
|
<a href={s.url} target="_blank">
|
||||||
|
{/* <img src={s.icon} alt={s.name} /> */}
|
||||||
|
<span class="hover:underline">{s.name}</span>
|
||||||
|
</a>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<!-- Links to Subpages -->
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<div class="text-2xl">
|
||||||
|
<h1 class="font-bold text-2xl pt-4">Pages</h1>
|
||||||
|
<div
|
||||||
|
id="pages"
|
||||||
|
class="flex gap-4 columns-2 md:columns-4 self-center pt-4"
|
||||||
|
>
|
||||||
|
<ul>
|
||||||
|
{
|
||||||
|
[
|
||||||
|
{ page: "Characters", url: "/characters" },
|
||||||
|
// { page: "Comics", url: "/comics" },
|
||||||
|
].map((s) => (
|
||||||
|
<a href={s.url}>
|
||||||
|
{/* <img src={s.icon} alt={s.name} /> */}
|
||||||
|
<li class="hover:underline">{s.page}</li>
|
||||||
|
</a>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
img.icon {
|
||||||
|
width: 10rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: center;
|
||||||
|
border-radius: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</aside>
|
||||||
110
src/components/Lightbox.astro
Normal file
110
src/components/Lightbox.astro
Normal file
|
|
@ -0,0 +1,110 @@
|
||||||
|
<figure class="place-content-center app-lightbox">
|
||||||
|
<img class="portal" />
|
||||||
|
<figcaption class="desc rounded font-bold"></figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// @ts-nocheck
|
||||||
|
const lbTriggers = document.querySelectorAll('[data-lightbox="true"]');
|
||||||
|
const lightbox = document.querySelector(".app-lightbox");
|
||||||
|
let portal = lightbox.querySelector(".portal");
|
||||||
|
let desc = lightbox.querySelector(".desc");
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-restricted-syntax
|
||||||
|
for (const trig of lbTriggers) {
|
||||||
|
trig.addEventListener("click", () => {
|
||||||
|
const T = trig.getElementsByTagName("img")[0];
|
||||||
|
|
||||||
|
portal.src = T.src;
|
||||||
|
// console.log();
|
||||||
|
if (!T.alt) desc.classList.add('hidden');
|
||||||
|
else desc.classList.remove('hidden')
|
||||||
|
desc.innerHTML = T.alt;
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
// Adapt size attribute dynamically
|
||||||
|
|
||||||
|
const img = portal;
|
||||||
|
const ratio = img.naturalWidth / img.naturalHeight;
|
||||||
|
img.sizes = `${window.innerHeight * ratio}px`;
|
||||||
|
}, 352);
|
||||||
|
|
||||||
|
lightbox.classList.add("is-active");
|
||||||
|
document.documentElement.classList.add("scrollIsLocked");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
lightbox.addEventListener("click", () => {
|
||||||
|
// console.log('cli');
|
||||||
|
|
||||||
|
lightbox.classList.remove("is-active");
|
||||||
|
document.documentElement.classList.remove("scrollIsLocked");
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener("keydown", (e) => {
|
||||||
|
if (e.key === "Escape") {
|
||||||
|
// console.log(e);
|
||||||
|
|
||||||
|
lightbox.classList.remove("is-active");
|
||||||
|
document.documentElement.classList.remove("scrollIsLocked");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.app-lightbox {
|
||||||
|
position: fixed;
|
||||||
|
margin: auto auto;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 2;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events: none;
|
||||||
|
cursor: zoom-out;
|
||||||
|
// TODO: map color to API
|
||||||
|
background-color: var(--bg-color, hsl(0, 0%, 0%, 0.85));
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.35s;
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
pointer-events: initial;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:global([data-lightbox]) {
|
||||||
|
cursor: zoom-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portal {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
margin: auto auto;
|
||||||
|
padding: 2rem;
|
||||||
|
max-width: 90%;
|
||||||
|
max-height: 90%;
|
||||||
|
// TODO: map speed to API
|
||||||
|
transition:
|
||||||
|
opacity 0.35s,
|
||||||
|
transform 0.35s;
|
||||||
|
transform: scale(0.2);
|
||||||
|
|
||||||
|
:global(img) {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-active & {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
background-color: white;
|
||||||
|
max-width: 20%;
|
||||||
|
margin: auto auto;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,24 +1,63 @@
|
||||||
---
|
---
|
||||||
import { Image } from "astro:assets";
|
import { Image } from "astro:assets";
|
||||||
import config from "../../config.json";
|
import config from "../../config.yaml";
|
||||||
|
const {} = Astro.props;
|
||||||
const {class} = Astro.props
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<aside>
|
<aside>
|
||||||
<div>
|
<div class="p-4">
|
||||||
<h1>{config.title}</h1>
|
<a href="/">
|
||||||
<p class="text-red-500 md:text-black">awa</p>
|
{
|
||||||
|
config.icon && (
|
||||||
<Image class={"icon"} src={config.icon} alt={""} inferSize />
|
<Image
|
||||||
</div>
|
class={"icon"}
|
||||||
|
src={config.icon}
|
||||||
|
alt={"Icon"}
|
||||||
|
width={50}
|
||||||
|
height={50}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
<h1 class="font-bold text-2xl pt-4">{config.title}</h1></a
|
||||||
|
>
|
||||||
|
<p class="pt-4">{config.description}</p>
|
||||||
|
{
|
||||||
|
config.socials &&
|
||||||
|
config.socials.map((s) => (
|
||||||
|
<a href={s.url} target="_blank" rel="noopener noreferrer">
|
||||||
|
{/* <img src={s.icon} alt={s.name} /> */}
|
||||||
|
<span class="">{s.name}</span>
|
||||||
|
</a>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
<br />
|
||||||
|
<button class="bg-gray-600 p-1 mt-4" id="nsfwButton">loading...</button>
|
||||||
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// @ts-nocheck
|
||||||
|
import { nsfw } from "../lib/stores/nsfw";
|
||||||
|
|
||||||
|
function toggleNsfw() {
|
||||||
|
nsfw.set(!nsfw.get());
|
||||||
|
}
|
||||||
|
|
||||||
|
nsfw.subscribe((nsfw) => {
|
||||||
|
if (nsfw) {
|
||||||
|
document.getElementById("nsfwButton").innerText = `disable nsfw`;
|
||||||
|
} else {
|
||||||
|
document.getElementById("nsfwButton").innerText = `enable nsfw`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.getElementById("nsfwButton").addEventListener("click", toggleNsfw);
|
||||||
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
img.icon {
|
img.icon {
|
||||||
width: 10rem;
|
width: 10rem;
|
||||||
height: 10rem;
|
margin: 0 auto;
|
||||||
margin: 50px auto;
|
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
object-position: center;
|
object-position: center;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
|
|
|
||||||
18
src/components/SocialCard.astro
Normal file
18
src/components/SocialCard.astro
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
---
|
||||||
|
const { href, text, image, alt } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="relative bg-black max-w-xl mx-auto mt-10 h-16">
|
||||||
|
<a href={href} class="block">
|
||||||
|
{
|
||||||
|
image && (
|
||||||
|
<img class="h-16 object-cover rounded-md" src={image} alt={alt} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
<div class="absolute inset-0 bg-gray-700 opacity-60 rounded-md"></div>
|
||||||
|
<div class="absolute inset-0 flex items-center justify-center">
|
||||||
|
<h2 class="text-white text-3xl font-bold">{text}</h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
39
src/layouts/CharacterList.astro
Normal file
39
src/layouts/CharacterList.astro
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
---
|
||||||
|
import config from "../../config.yaml";
|
||||||
|
import Sidebar from "../components/Sidebar.astro";
|
||||||
|
|
||||||
|
const { title, background } = config;
|
||||||
|
---
|
||||||
|
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="description" content="Astro description" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
<title>{title}</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div
|
||||||
|
class="md:fixed md:left-0 md:top-0 w-full md:w-96 bg-[#ffffff59] h-full pt-4 z-[1] box-border text-center"
|
||||||
|
>
|
||||||
|
<Sidebar />
|
||||||
|
</div>
|
||||||
|
<slot />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
<style define:vars={{ background: `url(${background})` }}>
|
||||||
|
.container {
|
||||||
|
width: calc(100% - 25rem);
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: system-ui, sans-serif;
|
||||||
|
background: var(--background);
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
---
|
---
|
||||||
import config from "../../config.json";
|
import config from "../../config.yaml";
|
||||||
|
import Lightbox from "../components/Lightbox.astro";
|
||||||
import Sidebar from "../components/Sidebar.astro";
|
import Sidebar from "../components/Sidebar.astro";
|
||||||
|
|
||||||
const { title, background } = config;
|
const { title, background } = config;
|
||||||
|
|
@ -16,22 +17,27 @@ const { title, background } = config;
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<Lightbox />
|
||||||
<div
|
<div
|
||||||
class="relative container left-60 p-8 box-border mx-auto transition-all"
|
class="md:fixed md:left-0 md:top-0 w-full md:w-96 bg-[#ffffff59] h-full pt-4 z-[1] box-border text-center"
|
||||||
|
>
|
||||||
|
<Sidebar />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="container float-none md:float-right md:container md:box-border transition-all"
|
||||||
>
|
>
|
||||||
<div
|
|
||||||
class="fixed left-0 top-0 w-96 bg-[#ffffff59] h-full pt-8 z-[9999] box-border"
|
|
||||||
>
|
|
||||||
<Sidebar />
|
|
||||||
</div>
|
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
<style define:vars={{ background: `url(${background})` }}>
|
<style define:vars={{ background: `url(${background})` }}>
|
||||||
.container {
|
@media screen(md) {
|
||||||
width: calc(100% - 25rem);
|
.container {
|
||||||
|
width: calc(100% - 25rem);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: system-ui, sans-serif;
|
font-family: system-ui, sans-serif;
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
32
src/layouts/Index.astro
Normal file
32
src/layouts/Index.astro
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
---
|
||||||
|
import config from "../../config.yaml";
|
||||||
|
---
|
||||||
|
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="description" content="Astro description" />
|
||||||
|
<meta name="viewport" content="width=device-width" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
<title>{config.title}</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<slot />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<style define:vars={{ background: `url(${config.background})` }}>
|
||||||
|
.container {
|
||||||
|
width: calc(100% - 25rem);
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: system-ui, sans-serif;
|
||||||
|
background: var(--background);
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
3
src/lib/stores/nsfw.ts
Normal file
3
src/lib/stores/nsfw.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { atom } from "nanostores";
|
||||||
|
|
||||||
|
export const nsfw = atom<boolean>(false);
|
||||||
71
src/pages/characters/[slug].astro
Normal file
71
src/pages/characters/[slug].astro
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
---
|
||||||
|
import type { GetStaticPaths } from "astro";
|
||||||
|
import Gallery from "../../layouts/Gallery.astro";
|
||||||
|
import Image from "../../components/Image.astro";
|
||||||
|
import pb from "../../lib/pb";
|
||||||
|
export const getStaticPaths = (async () => {
|
||||||
|
const paths = await pb
|
||||||
|
.collection("characters")
|
||||||
|
.getFullList({
|
||||||
|
sort: "-created",
|
||||||
|
})
|
||||||
|
.then((r) => r);
|
||||||
|
|
||||||
|
// console.log(paths);
|
||||||
|
|
||||||
|
return paths.map(({ slug, name }) => {
|
||||||
|
return {
|
||||||
|
params: { slug },
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}) satisfies GetStaticPaths;
|
||||||
|
|
||||||
|
const { slug } = Astro.params;
|
||||||
|
|
||||||
|
const imageCollection = await pb.collection("images").getFullList({
|
||||||
|
sort: "-created",
|
||||||
|
filter: `(character.slug~"${slug}")`,
|
||||||
|
});
|
||||||
|
const characterDetails = await pb
|
||||||
|
.collection("characters")
|
||||||
|
.getFirstListItem(`(slug~"${slug}")`);
|
||||||
|
// console.log(characterDetails);
|
||||||
|
const images = imageCollection.map((record) => {
|
||||||
|
const url = pb.files.getUrl(record, record.file);
|
||||||
|
return {
|
||||||
|
url: url,
|
||||||
|
desc: record.description,
|
||||||
|
nsfw: record.nsfw,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
---
|
||||||
|
|
||||||
|
<Gallery>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<div class="pb-4">
|
||||||
|
<h1 class="text-2xl text-center p-8">
|
||||||
|
<a href={`/characters`}>
|
||||||
|
{characterDetails.name}
|
||||||
|
</a>
|
||||||
|
</h1>
|
||||||
|
{
|
||||||
|
characterDetails.description && (
|
||||||
|
<Fragment
|
||||||
|
class="text-xl p-8"
|
||||||
|
set:html={characterDetails.description}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div class="gap-4 columns-2 md:columns-4 self-center">
|
||||||
|
{
|
||||||
|
images.map((image) => (
|
||||||
|
<Image nsfw={image.nsfw} src={image.url} alt={image.desc} />
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Gallery>
|
||||||
|
|
||||||
|
<!-- <style>
|
||||||
|
</style> -->
|
||||||
29
src/pages/characters/index.astro
Normal file
29
src/pages/characters/index.astro
Normal file
|
|
@ -0,0 +1,29 @@
|
||||||
|
---
|
||||||
|
import CharacterList from "../../layouts/CharacterList.astro";
|
||||||
|
import pb from "../../lib/pb";
|
||||||
|
import Card from "../../components/Card.astro";
|
||||||
|
|
||||||
|
const characters = await pb
|
||||||
|
.collection("characters")
|
||||||
|
// @ts-ignore
|
||||||
|
.getFullList({ expand: ["icon"] });
|
||||||
|
---
|
||||||
|
|
||||||
|
<CharacterList>
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<h1 class="text-2xl text-center p-8">Characters</h1>
|
||||||
|
<div class="flex gap-4 columns-2 md:columns-4 self-center">
|
||||||
|
{
|
||||||
|
characters.map((c) => (
|
||||||
|
// @ts-ignore
|
||||||
|
<Card
|
||||||
|
href={`/characters/${c.slug}`}
|
||||||
|
image={c.expand ? c.expand.icon : null}
|
||||||
|
title={c.name}
|
||||||
|
body={c.body}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CharacterList>
|
||||||
|
|
@ -1,42 +1,12 @@
|
||||||
---
|
---
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Sidebar from "../components/IndexSidebar.astro";
|
||||||
import Image from "../components/Image.astro";
|
import IndexLayout from "../layouts/Index.astro";
|
||||||
|
|
||||||
const images = [
|
|
||||||
"https://randomfox.ca/images/1.jpg",
|
|
||||||
"https://randomfox.ca/images/2.jpg",
|
|
||||||
"https://randomfox.ca/images/3.jpg",
|
|
||||||
"https://randomfox.ca/images/4.jpg",
|
|
||||||
"https://randomfox.ca/images/5.jpg",
|
|
||||||
"https://randomfox.ca/images/6.jpg",
|
|
||||||
"https://randomfox.ca/images/7.jpg",
|
|
||||||
"https://randomfox.ca/images/8.jpg",
|
|
||||||
"https://randomfox.ca/images/9.jpg",
|
|
||||||
"https://randomfox.ca/images/10.jpg",
|
|
||||||
"https://randomfox.ca/images/11.jpg",
|
|
||||||
"https://randomfox.ca/images/12.jpg",
|
|
||||||
"https://randomfox.ca/images/13.jpg",
|
|
||||||
"https://randomfox.ca/images/14.jpg",
|
|
||||||
"https://randomfox.ca/images/15.jpg",
|
|
||||||
"https://randomfox.ca/images/16.jpg",
|
|
||||||
"https://randomfox.ca/images/17.jpg",
|
|
||||||
"https://randomfox.ca/images/18.jpg",
|
|
||||||
"https://randomfox.ca/images/19.jpg",
|
|
||||||
"https://randomfox.ca/images/20.jpg",
|
|
||||||
];
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout>
|
<IndexLayout>
|
||||||
<div class="text-center my-16 mb-32">
|
<div class="flex flex-col ">
|
||||||
... album title and description ...
|
<div class=" flex gap-4 columns-2 md:columns-4 self-center">
|
||||||
|
<Sidebar />
|
||||||
<div class="columns-3">
|
|
||||||
{images.map((image) => <Image src={image} alt="" />)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
... rest of the page ...
|
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</IndexLayout>
|
||||||
|
|
||||||
<!-- <style>
|
|
||||||
</style> -->
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue