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 {
|
||||
title: string;
|
||||
body: string;
|
||||
href: string;
|
||||
import pb from "../lib/pb";
|
||||
|
||||
const { href, title, body, image } = Astro.props;
|
||||
let imageURL;
|
||||
|
||||
if (image) {
|
||||
imageURL = pb.files.getUrl(image, image.file);
|
||||
}
|
||||
|
||||
const { href, title, body } = Astro.props;
|
||||
---
|
||||
|
||||
<li class="link-card">
|
||||
<a href={href}>
|
||||
<h2>
|
||||
{title}
|
||||
<span>→</span>
|
||||
</h2>
|
||||
<p>
|
||||
{body}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<style>
|
||||
.link-card {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding: 1px;
|
||||
background-color: #23262d;
|
||||
background-image: none;
|
||||
background-size: 400%;
|
||||
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>
|
||||
<div class="relative max-w-xl mx-auto mt-20 h-32 w-64">
|
||||
<a href={href} class="block">
|
||||
{
|
||||
image && (
|
||||
<img
|
||||
class="h-32 w-64 object-cover rounded-md"
|
||||
src={imageURL}
|
||||
alt={`Cover for ${title}`}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
<div class="absolute inset-0 bg-gray-700 opacity-60 rounded-md"></div>
|
||||
<div class="absolute inset-0 inline-flex flex-col items-center justify-center">
|
||||
<h2 class="text-white text-3xl font-bold">{title}</h2>
|
||||
<span class="text-white">{body}</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,50 @@
|
|||
---
|
||||
import { Image as AstroImage } from "astro:assets";
|
||||
const { src, alt } = Astro.props;
|
||||
import { Picture as AstroPic } from "astro:assets";
|
||||
const { src, alt, nsfw } = Astro.props;
|
||||
---
|
||||
|
||||
<AstroImage
|
||||
src={src}
|
||||
alt={alt}
|
||||
inferSize={true}
|
||||
format="avif"
|
||||
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"
|
||||
loading="lazy"
|
||||
/>
|
||||
<div class="overflow-hidden rounded" data-nsfw={`${nsfw}`}>
|
||||
<div
|
||||
data-lightbox="true"
|
||||
id="parent"
|
||||
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`
|
||||
>
|
||||
<img src={src} alt={alt} 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 config from "../../config.json";
|
||||
|
||||
const {class} = Astro.props
|
||||
import config from "../../config.yaml";
|
||||
const {} = Astro.props;
|
||||
---
|
||||
|
||||
<aside>
|
||||
<div>
|
||||
<h1>{config.title}</h1>
|
||||
<p class="text-red-500 md:text-black">awa</p>
|
||||
|
||||
<Image class={"icon"} src={config.icon} alt={""} inferSize />
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<a href="/">
|
||||
{
|
||||
config.icon && (
|
||||
<Image
|
||||
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>
|
||||
|
||||
<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>
|
||||
img.icon {
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
margin: 50px auto;
|
||||
margin: 0 auto;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
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";
|
||||
|
||||
const { title, background } = config;
|
||||
|
|
@ -16,22 +17,27 @@ const { title, background } = config;
|
|||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<Lightbox />
|
||||
<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 />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style define:vars={{ background: `url(${background})` }}>
|
||||
.container {
|
||||
width: calc(100% - 25rem);
|
||||
@media screen(md) {
|
||||
.container {
|
||||
width: calc(100% - 25rem);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: system-ui, sans-serif;
|
||||
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 Image from "../components/Image.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",
|
||||
];
|
||||
import Sidebar from "../components/IndexSidebar.astro";
|
||||
import IndexLayout from "../layouts/Index.astro";
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<div class="text-center my-16 mb-32">
|
||||
... album title and description ...
|
||||
|
||||
<div class="columns-3">
|
||||
{images.map((image) => <Image src={image} alt="" />)}
|
||||
<IndexLayout>
|
||||
<div class="flex flex-col ">
|
||||
<div class=" flex gap-4 columns-2 md:columns-4 self-center">
|
||||
<Sidebar />
|
||||
</div>
|
||||
|
||||
... rest of the page ...
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<!-- <style>
|
||||
</style> -->
|
||||
</IndexLayout>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue