Compare commits
No commits in common. "main" and "test-push-1718880241670" have entirely different histories.
main
...
test-push-
28 changed files with 2950 additions and 12275 deletions
|
|
@ -1,3 +0,0 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
dist
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
"plugins": ["prettier-plugin-tailwindcss"]
|
||||
}
|
||||
30
Dockerfile
30
Dockerfile
|
|
@ -1,30 +0,0 @@
|
|||
FROM node:lts AS base
|
||||
WORKDIR /app
|
||||
|
||||
COPY package.json package-lock.json ./
|
||||
|
||||
FROM base AS prod-deps
|
||||
RUN npm ci --omit=dev
|
||||
|
||||
FROM base AS build-deps
|
||||
RUN npm ci
|
||||
|
||||
FROM build-deps AS build
|
||||
|
||||
COPY . .
|
||||
|
||||
ARG POCKETBASE_URL
|
||||
ENV POCKETBASE_URL=${POCKETBASE_URL}
|
||||
|
||||
RUN npm run build
|
||||
|
||||
FROM base AS runtime
|
||||
COPY --from=prod-deps /app/node_modules ./node_modules
|
||||
COPY --from=build /app/dist ./dist
|
||||
|
||||
ARG PORT=4321
|
||||
ENV HOST=0.0.0.0
|
||||
ENV PORT=${PORT}
|
||||
ENV POCKETBASE_URL=${POCKETBASE_URL}
|
||||
EXPOSE ${PORT}
|
||||
CMD node ./dist/server/entry.mjs
|
||||
|
|
@ -12,6 +12,6 @@ export default defineConfig({
|
|||
mode: "standalone",
|
||||
}),
|
||||
vite: {
|
||||
plugins: [yaml()]
|
||||
plugins: [yaml()],
|
||||
},
|
||||
});
|
||||
|
|
|
|||
53
compose.yml
53
compose.yml
|
|
@ -1,53 +0,0 @@
|
|||
services:
|
||||
app:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
args:
|
||||
PUBLIC_POCKETBASE_URL: ${PUBLIC_POCKETBASE_URL}
|
||||
PUBLIC_TITLE: ${PUBLIC_TITLE}
|
||||
PUBLIC_DESCRIPTION: ${PUBLIC_DESCRIPTION}
|
||||
PUBLIC_USEICONS: ${PUBLIC_USEICONS}
|
||||
env_file: .env
|
||||
networks:
|
||||
- caddy
|
||||
labels:
|
||||
caddy: lion.gay
|
||||
caddy.reverse_proxy: "{{upstreams 4321}}"
|
||||
pocketbase:
|
||||
image: ghcr.io/muchobien/pocketbase:latest
|
||||
container_name: pocketbase-gallery
|
||||
restart: unless-stopped
|
||||
networks:
|
||||
- caddy
|
||||
volumes:
|
||||
- /opt/pocketbase/pb_data:/pb_data
|
||||
- /opt/pocketbase/pb_public:/pb_public
|
||||
labels:
|
||||
caddy: pocket.fangs.app
|
||||
caddy.reverse_proxy: "{{upstreams 8090}}"
|
||||
caddy:
|
||||
container_name: "caddy-gallery"
|
||||
image: videah/caddy-proxy:latest
|
||||
ports:
|
||||
- "80:80"
|
||||
- "443:443"
|
||||
- "443:443/udp"
|
||||
environment:
|
||||
- CADDY_INGRESS_NETWORKS=caddy
|
||||
networks:
|
||||
- caddy
|
||||
volumes:
|
||||
- /var/run/docker.sock:/var/run/docker.sock
|
||||
- caddy_data:/data
|
||||
restart: unless-stopped
|
||||
labels:
|
||||
caddy.email: "caddy@lion.gay"
|
||||
caddy.encode: zstd gzip
|
||||
|
||||
networks:
|
||||
caddy:
|
||||
external: true
|
||||
|
||||
volumes:
|
||||
caddy_data: {}
|
||||
7
config.json
Normal file
7
config.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"title": "Gallery",
|
||||
"description": "this is a description",
|
||||
"icon": "https://common.himbo.cat/avatars/lio/drip.jpg",
|
||||
"background": "https://javacat.io/siteBG2-min.png",
|
||||
"socials": [{ "name": "bsky", "url": "https://pogcha.mp" }]
|
||||
}
|
||||
8186
package-lock.json
generated
8186
package-lock.json
generated
File diff suppressed because it is too large
Load diff
30
package.json
30
package.json
|
|
@ -1,37 +1,29 @@
|
|||
{
|
||||
"name": "phobos",
|
||||
"name": "",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "dotenvx run -- astro dev",
|
||||
"start": "dotenvx run -- astro dev",
|
||||
"build": "astro check && dotenvx run -- astro build",
|
||||
"preview": "dotenvx run -- astro preview",
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro check && astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/check": "^0.7.0",
|
||||
"@astrojs/node": "^8.3.2",
|
||||
"@astrojs/react": "^3.6.0",
|
||||
"@astrojs/node": "^8.2.5",
|
||||
"@astrojs/react": "^3.4.0",
|
||||
"@astrojs/tailwind": "^5.1.0",
|
||||
"@dotenvx/dotenvx": "^1.6.4",
|
||||
"@types/react": "^18.3.2",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"astro": "^4.12.2",
|
||||
"nanostores": "^0.10.3",
|
||||
"pocketbase": "^0.21.3",
|
||||
"astro": "^4.9.1",
|
||||
"pocketbase": "^0.21.2",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-icons": "^5.2.1",
|
||||
"rimraf": "^6.0.1",
|
||||
"tailwindcss": "^3.4.3",
|
||||
"typescript": "^5.4.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-yaml": "^4.1.2",
|
||||
"@types/node": "^20.14.12",
|
||||
"prettier": "^3.2.5",
|
||||
"prettier-plugin-tailwindcss": "^0.5.14",
|
||||
"sass": "^1.77.3"
|
||||
"@rollup/plugin-yaml": "^4.1.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
6059
pnpm-lock.yaml
generated
6059
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
Binary file not shown.
|
Before Width: | Height: | Size: 185 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 MiB |
|
|
@ -1,30 +1,61 @@
|
|||
---
|
||||
import pb from "../lib/pb";
|
||||
|
||||
const { href, title, body, image } = Astro.props;
|
||||
let imageURL;
|
||||
|
||||
if (image) {
|
||||
imageURL = pb.files.getUrl(image, image.file);
|
||||
interface Props {
|
||||
title: string;
|
||||
body: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const { href, title, body } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="relative max-w-xl mx-auto mt-20 h-32 w-55">
|
||||
<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-[#111111] opacity-50 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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,62 +1,14 @@
|
|||
---
|
||||
const { src, alt, nsfw, artist } = Astro.props;
|
||||
const showNsfw = Astro.url.searchParams.has('nsfw') || false;
|
||||
import { Image as AstroImage } from "astro:assets";
|
||||
const { src, alt } = Astro.props;
|
||||
---
|
||||
|
||||
<div>
|
||||
{ (nsfw && showNsfw) ? (
|
||||
<div class="overflow-hidden rounded-lg" 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 !== '' ? `${alt}<br>` : ""} ${artist ? `by ${artist}` : ""}`} loading="lazy" />
|
||||
{
|
||||
alt && (
|
||||
<div
|
||||
id="info"
|
||||
class="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>
|
||||
): null }
|
||||
|
||||
{ !nsfw ? (
|
||||
<div class="overflow-hidden rounded-lg" 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 !== '' ? `${alt}<br>` : ""} ${artist ? `by ${artist}` : ""}`} loading="lazy" />
|
||||
{
|
||||
alt && (
|
||||
<div
|
||||
id="info"
|
||||
class="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>
|
||||
): null }
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#parent:hover > #info {
|
||||
opacity: 70;
|
||||
}
|
||||
|
||||
#info {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
</style>
|
||||
<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"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,82 +0,0 @@
|
|||
---
|
||||
import { Image } from "astro:assets";
|
||||
import Social from "./Social.astro";
|
||||
import pb from "../lib/pb";
|
||||
import c from "../lib/config";
|
||||
|
||||
|
||||
const avatarRec = await pb
|
||||
.collection("images")
|
||||
.getFirstListItem("useAsAvatar=true").catch(() => null);
|
||||
|
||||
const icon = avatarRec ? await pb.files.getUrl(avatarRec, avatarRec.file, { thumb: avatarRec.thumb }) : null;
|
||||
const socials = await pb.collection("socials").getFullList();
|
||||
|
||||
const config = {
|
||||
// icon,
|
||||
socials,
|
||||
title: c.TITLE,
|
||||
description: c.DESCRIPTION,
|
||||
};
|
||||
---
|
||||
|
||||
<aside>
|
||||
<div class="p-4">
|
||||
<a href="/">
|
||||
{
|
||||
icon && (
|
||||
<Image class={"icon"} src={icon} width={10} height={10} alt={""} />
|
||||
)
|
||||
}
|
||||
<h1 class="font-bold text-2xl pt-4">{config.title}</h1></a
|
||||
>
|
||||
<p class="pt-4 max-w-[50rem] text-wrap">{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) => (
|
||||
<Social href={s.url} text={s.name} icon={s.icon} />
|
||||
))
|
||||
}
|
||||
</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;
|
||||
height: 10rem;
|
||||
margin: 0 auto;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
</aside>
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
<figure class="place-content-center app-lightbox backdrop-blur-md">
|
||||
<img class="portal" />
|
||||
<figcaption class="desc rounded font-bold backdrop-blur-sm"></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");
|
||||
let artist = lightbox.querySelector("#artist");
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
for (const trig of lbTriggers) {
|
||||
trig.addEventListener("click", () => {
|
||||
const T = trig.getElementsByTagName("img")[0];
|
||||
const url = new URL(T.src);
|
||||
const noThumb = url.href.replaceAll(url.search, "");
|
||||
portal.src = noThumb;
|
||||
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", () => {
|
||||
lightbox.classList.remove("is-active");
|
||||
document.documentElement.classList.remove("scrollIsLocked");
|
||||
});
|
||||
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") {
|
||||
lightbox.classList.remove("is-active");
|
||||
document.documentElement.classList.remove("scrollIsLocked");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.app-lightbox {
|
||||
position: fixed;
|
||||
margin: auto auto;
|
||||
padding: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
cursor: zoom-out;
|
||||
background-color: var(--bg-color, hsla(0, 0%, 0%, 0.623));
|
||||
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%;
|
||||
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 {
|
||||
max-width: 50%;
|
||||
margin: auto auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,58 +1,26 @@
|
|||
---
|
||||
import { Image } from "astro:assets";
|
||||
import Social from "./Social.astro";
|
||||
import pb from "../lib/pb";
|
||||
import c from "../lib/config";
|
||||
import config from "../../config.json";
|
||||
|
||||
|
||||
|
||||
const avatarRec = await pb
|
||||
.collection("images")
|
||||
.getFirstListItem("useAsAvatar=true").catch(() => null);
|
||||
const icon = avatarRec ? await pb.files.getUrl(avatarRec, avatarRec.file) : null;
|
||||
const socials = await pb.collection("socials").getFullList();
|
||||
|
||||
const config = {
|
||||
icon,
|
||||
socials,
|
||||
title: c.TITLE,
|
||||
description: c.DESCRIPTION,
|
||||
};
|
||||
const {class} = Astro.props
|
||||
---
|
||||
|
||||
<aside>
|
||||
<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) => (
|
||||
<Social href={s.url} text={s.name} image={s.icon} alt={s.name} />
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div>
|
||||
<h1>{config.title}</h1>
|
||||
<p class="text-red-500 md:text-black">awa</p>
|
||||
|
||||
<Image class={"icon"} src={config.icon} alt={""} inferSize />
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
img.icon {
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
margin: 0 auto;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
border-radius: 50%;
|
||||
height: 10rem;
|
||||
margin: 50px auto;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
border-radius: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
---
|
||||
import { Boolify } from "../lib/boolify";
|
||||
import c from "../lib/config";
|
||||
|
||||
|
||||
const { href, text, icon } = Astro.props;
|
||||
const useIcons = Boolify(c.USEICONS);
|
||||
---
|
||||
|
||||
{
|
||||
useIcons && (
|
||||
<a href={href} target="_blank" rel="noopener noreferrer">
|
||||
<i class={`fa${(icon ? icon : text.toLowerCase()) == "envelope" ? '' : '-brands'} fa-${icon ? icon : text.toLowerCase()} fa-2xl`} />
|
||||
</a>
|
||||
)
|
||||
}
|
||||
{
|
||||
!useIcons && (
|
||||
<a href={href} target="_blank" rel="noopener noreferrer">
|
||||
{text}
|
||||
</a>
|
||||
)
|
||||
}
|
||||
16
src/config.d.ts
vendored
16
src/config.d.ts
vendored
|
|
@ -1,25 +1,9 @@
|
|||
declare module "*config.yaml" {
|
||||
const value: {
|
||||
[x: string]: any;
|
||||
title?: string;
|
||||
description?: string;
|
||||
icon?: string;
|
||||
background?: string;
|
||||
socials: {
|
||||
name: string;
|
||||
url: string;
|
||||
icon?: string;
|
||||
}[];
|
||||
};
|
||||
export default value;
|
||||
}
|
||||
declare module "*config.yml" {
|
||||
const value: {
|
||||
title?: string;
|
||||
description?: string;
|
||||
icon?: string;
|
||||
background?: string;
|
||||
socialIcons?: boolean;
|
||||
socials: {
|
||||
name: string;
|
||||
link: string;
|
||||
|
|
|
|||
|
|
@ -1,63 +0,0 @@
|
|||
---
|
||||
import Sidebar from "../components/Sidebar.astro";
|
||||
|
||||
import pb from "../lib/pb";
|
||||
import c from "../lib/config";
|
||||
|
||||
|
||||
const avatarRec = await pb
|
||||
.collection("images")
|
||||
.getFirstListItem("useAsAvatar=true").catch(() => null);
|
||||
const backgroundRec = await pb
|
||||
.collection("images")
|
||||
.getFirstListItem("useAsBackground=true").catch(() => null);
|
||||
|
||||
|
||||
const icon = avatarRec ? await pb.files.getUrl(avatarRec, avatarRec.file) : null;
|
||||
const background = backgroundRec ? await pb.files.getUrl(backgroundRec, backgroundRec.file) : null;
|
||||
const socials = await pb.collection("socials").getFullList();
|
||||
|
||||
const config = {
|
||||
icon,
|
||||
socials,
|
||||
background,
|
||||
title: c.TITLE,
|
||||
description: c.DESCRIPTION,
|
||||
};
|
||||
|
||||
export const prerender = false;
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content={config.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>
|
||||
<div
|
||||
class="xl:fixed xl:left-0 xl:top-0 w-full xl:w-96 bg-[#11111156] backdrop-blur-md h-full pt-4 box-border text-center"
|
||||
>
|
||||
<Sidebar />
|
||||
</div>
|
||||
<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;
|
||||
color: whitesmoke;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
---
|
||||
import Lightbox from "../components/Lightbox.astro";
|
||||
import Sidebar from "../components/Sidebar.astro";
|
||||
import pb from "../lib/pb";
|
||||
import c from "../lib/config";
|
||||
|
||||
|
||||
export const prerender = false;
|
||||
|
||||
const avatarRec = await pb
|
||||
.collection("images")
|
||||
.getFirstListItem("useAsAvatar=true").catch(() => null);
|
||||
const backgroundRec = await pb
|
||||
.collection("images")
|
||||
.getFirstListItem("useAsBackground=true").catch(() => null);
|
||||
|
||||
const icon = avatarRec ? await pb.files.getUrl(avatarRec, avatarRec.file) : null;
|
||||
const background = backgroundRec ? await pb.files.getUrl(backgroundRec, backgroundRec.file) : null;
|
||||
const socials = await pb.collection("socials").getFullList();
|
||||
|
||||
const config = {
|
||||
icon,
|
||||
socials,
|
||||
background,
|
||||
title: c.TITLE,
|
||||
description: c.DESCRIPTION,
|
||||
};
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content={config.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>
|
||||
<Lightbox />
|
||||
<div
|
||||
class="xl:fixed xl:left-0 xl:top-0 w-full xl:w-96 bg-[#11111156] backdrop-blur-md h-full pt-4 box-border text-center"
|
||||
>
|
||||
<Sidebar />
|
||||
</div>
|
||||
<div
|
||||
class="container float-none xl:float-right xl:box-border transition-all"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style define:vars={{ background: `url(${config.background})` }}>
|
||||
@media screen(xl) {
|
||||
.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;
|
||||
color: whitesmoke;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
---
|
||||
import config from "../lib/config";
|
||||
import pb from "../lib/pb";
|
||||
|
||||
|
||||
export const prerender = false
|
||||
const backgroundRec = await pb.collection('images').getFirstListItem('useAsBackground=true').catch(() => null);
|
||||
const background = backgroundRec ? await pb.files.getUrl(backgroundRec, backgroundRec.file) : null;
|
||||
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content={config.DESCRIPTION} />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{config.TITLE}</title>
|
||||
</head>
|
||||
<body>
|
||||
<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;
|
||||
color: whitesmoke;
|
||||
/* backdrop-filter: brightness(0.5); */
|
||||
/* width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0; */
|
||||
}
|
||||
</style>
|
||||
67
src/layouts/Layout.astro
Normal file
67
src/layouts/Layout.astro
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
---
|
||||
import config from "../../config.json";
|
||||
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="relative container left-60 p-8 box-border mx-auto 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);
|
||||
}
|
||||
body {
|
||||
font-family: system-ui, sans-serif;
|
||||
background: var(--background);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
/*
|
||||
:root {
|
||||
--accent: 136, 58, 234;
|
||||
--accent-light: 224, 204, 250;
|
||||
--accent-dark: 49, 10, 101;
|
||||
--accent-gradient: linear-gradient(
|
||||
45deg,
|
||||
rgb(var(--accent)),
|
||||
rgb(var(--accent-light)) 30%,
|
||||
white 60%
|
||||
);
|
||||
}
|
||||
|
||||
code {
|
||||
font-family:
|
||||
Menlo,
|
||||
Monaco,
|
||||
Lucida Console,
|
||||
Liberation Mono,
|
||||
DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono,
|
||||
Courier New,
|
||||
monospace;
|
||||
} */
|
||||
</style>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
var BoolArray = [true, false, 'true', 'false', 1, 0];
|
||||
const isBoolean = function (arg: any) {
|
||||
if (BoolArray.indexOf(arg) === -1) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
const Boolify = function (arg: any) {
|
||||
if (BoolArray.indexOf(arg) === -1) {
|
||||
return null;
|
||||
} else {
|
||||
return (arg == true || arg == 'true' || arg == 1) ? true : false;
|
||||
}
|
||||
}
|
||||
|
||||
export { isBoolean, Boolify };
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
export default {
|
||||
TITLE: import.meta.env.PUBLIC_TITLE || process.env.PUBLIC_TITLE,
|
||||
DESCRIPTION:
|
||||
import.meta.env.PUBLIC_DESCRIPTION || process.env.PUBLIC_DESCRIPTION,
|
||||
USEICONS: import.meta.env.PUBLIC_USEICONS || process.env.PUBLIC_USEICONS,
|
||||
POCKETBASE:
|
||||
import.meta.env.PUBLIC_POCKETBASE_URL || process.env.PUBLIC_POCKETBASE_URL,
|
||||
};
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import PB from "pocketbase";
|
||||
import config from "./config";
|
||||
const pb = new PB(config.POCKETBASE)
|
||||
|
||||
|
||||
export default pb
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
---
|
||||
import Gallery from "../../layouts/Gallery.astro";
|
||||
import Image from "../../components/Image.astro";
|
||||
import pb from "../../lib/pb";
|
||||
|
||||
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}")`);
|
||||
const images = imageCollection.map((record) => {
|
||||
const url = pb.files.getUrl(record, record.file, { thumb: record.thumb });
|
||||
return {
|
||||
url: url,
|
||||
desc: record.description,
|
||||
nsfw: record.nsfw,
|
||||
artist: record.artist,
|
||||
};
|
||||
});
|
||||
export const prerender = false;
|
||||
---
|
||||
|
||||
<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 && (
|
||||
<div class="m-4 p-4 bg-[#11111156] backdrop-blur-md rounded-lg items-center justify-center">
|
||||
<Fragment set:html={characterDetails.description} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<div
|
||||
class="gap-4 columns-2 lg:columns-3 xl:columns-4 2xl:columns-5 self-center"
|
||||
>
|
||||
{
|
||||
images.map((image) => (
|
||||
<Image
|
||||
nsfw={image?.nsfw}
|
||||
src={image?.url}
|
||||
alt={image?.desc}
|
||||
artist={image?.artist}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</Gallery>
|
||||
|
||||
<!-- <style>
|
||||
</style> -->
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
---
|
||||
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"], filter: `(hidden = false)` });
|
||||
|
||||
export const prerender = false;
|
||||
---
|
||||
|
||||
<CharacterList>
|
||||
<div class="flex flex-col">
|
||||
<h1 class="text-3xl text-center pt-8">Characters</h1>
|
||||
<div
|
||||
class="grid grid-cols-2 xl:grid-cols-4 gap-4 columns-2 md:columns-4 self-center p-4"
|
||||
>
|
||||
{
|
||||
[...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,13 +1,42 @@
|
|||
---
|
||||
import Sidebar from "../components/IndexSidebar.astro";
|
||||
import IndexLayout from "../layouts/Index.astro";
|
||||
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",
|
||||
];
|
||||
---
|
||||
|
||||
<IndexLayout>
|
||||
<div class="flex flex-col ">
|
||||
<div class=" flex gap-4 columns-2 md:columns-4 self-center">
|
||||
<Sidebar />
|
||||
<Layout>
|
||||
<div class="text-center my-16 mb-32">
|
||||
... album title and description ...
|
||||
|
||||
<div class="columns-3">
|
||||
{images.map((image) => <Image src={image} alt="" />)}
|
||||
</div>
|
||||
|
||||
... rest of the page ...
|
||||
</div>
|
||||
</IndexLayout>
|
||||
</Layout>
|
||||
|
||||
<!-- <style>
|
||||
</style> -->
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue