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",
|
mode: "standalone",
|
||||||
}),
|
}),
|
||||||
vite: {
|
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
28
package.json
28
package.json
|
|
@ -1,37 +1,29 @@
|
||||||
{
|
{
|
||||||
"name": "phobos",
|
"name": "",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "dotenvx run -- astro dev",
|
"dev": "astro dev",
|
||||||
"start": "dotenvx run -- astro dev",
|
"start": "astro dev",
|
||||||
"build": "astro check && dotenvx run -- astro build",
|
"build": "astro check && astro build",
|
||||||
"preview": "dotenvx run -- astro preview",
|
"preview": "astro preview",
|
||||||
"astro": "astro"
|
"astro": "astro"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/check": "^0.7.0",
|
"@astrojs/check": "^0.7.0",
|
||||||
"@astrojs/node": "^8.3.2",
|
"@astrojs/node": "^8.2.5",
|
||||||
"@astrojs/react": "^3.6.0",
|
"@astrojs/react": "^3.4.0",
|
||||||
"@astrojs/tailwind": "^5.1.0",
|
"@astrojs/tailwind": "^5.1.0",
|
||||||
"@dotenvx/dotenvx": "^1.6.4",
|
|
||||||
"@types/react": "^18.3.2",
|
"@types/react": "^18.3.2",
|
||||||
"@types/react-dom": "^18.3.0",
|
"@types/react-dom": "^18.3.0",
|
||||||
"astro": "^4.12.2",
|
"astro": "^4.9.1",
|
||||||
"nanostores": "^0.10.3",
|
"pocketbase": "^0.21.2",
|
||||||
"pocketbase": "^0.21.3",
|
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-icons": "^5.2.1",
|
|
||||||
"rimraf": "^6.0.1",
|
|
||||||
"tailwindcss": "^3.4.3",
|
"tailwindcss": "^3.4.3",
|
||||||
"typescript": "^5.4.5"
|
"typescript": "^5.4.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@rollup/plugin-yaml": "^4.1.2",
|
"@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"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
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";
|
interface Props {
|
||||||
|
title: string;
|
||||||
const { href, title, body, image } = Astro.props;
|
body: string;
|
||||||
let imageURL;
|
href: string;
|
||||||
|
|
||||||
if (image) {
|
|
||||||
imageURL = pb.files.getUrl(image, image.file);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const { href, title, body } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="relative max-w-xl mx-auto mt-20 h-32 w-55">
|
<li class="link-card">
|
||||||
<a href={href} class="block">
|
<a href={href}>
|
||||||
{
|
<h2>
|
||||||
image && (
|
{title}
|
||||||
<img
|
<span>→</span>
|
||||||
class="h-32 w-64 object-cover rounded-md"
|
</h2>
|
||||||
src={imageURL}
|
<p>
|
||||||
alt={`Cover for ${title}`}
|
{body}
|
||||||
/>
|
</p>
|
||||||
)
|
</a>
|
||||||
}
|
</li>
|
||||||
|
<style>
|
||||||
<div class="absolute inset-0 bg-[#111111] opacity-50 rounded-md"></div>
|
.link-card {
|
||||||
<div class="absolute inset-0 inline-flex flex-col items-center justify-center">
|
list-style: none;
|
||||||
<h2 class="text-white text-3xl font-bold">{title}</h2>
|
display: flex;
|
||||||
<span class="text-white">{body}</span>
|
padding: 1px;
|
||||||
</div>
|
background-color: #23262d;
|
||||||
</a>
|
background-image: none;
|
||||||
</div>
|
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;
|
import { Image as AstroImage } from "astro:assets";
|
||||||
const showNsfw = Astro.url.searchParams.has('nsfw') || false;
|
const { src, alt } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<div>
|
<AstroImage
|
||||||
{ (nsfw && showNsfw) ? (
|
src={src}
|
||||||
<div class="overflow-hidden rounded-lg" data-nsfw={`${nsfw}`}>
|
alt={alt}
|
||||||
<div
|
inferSize={true}
|
||||||
data-lightbox="true"
|
format="avif"
|
||||||
id="parent"
|
quality={50}
|
||||||
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`
|
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"
|
||||||
<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>
|
|
||||||
|
|
|
||||||
|
|
@ -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 { Image } from "astro:assets";
|
||||||
import Social from "./Social.astro";
|
import config from "../../config.json";
|
||||||
import pb from "../lib/pb";
|
|
||||||
import c from "../lib/config";
|
|
||||||
|
|
||||||
|
const {class} = Astro.props
|
||||||
|
|
||||||
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,
|
|
||||||
};
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<aside>
|
<aside>
|
||||||
<div class="p-4">
|
<div>
|
||||||
<a href="/">
|
<h1>{config.title}</h1>
|
||||||
{
|
<p class="text-red-500 md:text-black">awa</p>
|
||||||
config.icon && (
|
|
||||||
<Image
|
<Image class={"icon"} src={config.icon} alt={""} inferSize />
|
||||||
class={"icon"}
|
</div>
|
||||||
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>
|
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
img.icon {
|
img.icon {
|
||||||
width: 10rem;
|
width: 10rem;
|
||||||
height: 10rem;
|
height: 10rem;
|
||||||
margin: 0 auto;
|
margin: 50px auto;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
object-position: center;
|
object-position: center;
|
||||||
border-radius: 50%;
|
border-radius: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</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" {
|
declare module "*config.yaml" {
|
||||||
const value: {
|
const value: {
|
||||||
[x: string]: any;
|
|
||||||
title?: string;
|
title?: string;
|
||||||
description?: string;
|
description?: string;
|
||||||
icon?: string;
|
icon?: string;
|
||||||
background?: 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: {
|
socials: {
|
||||||
name: string;
|
name: string;
|
||||||
link: 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 Layout from "../layouts/Layout.astro";
|
||||||
import IndexLayout from "../layouts/Index.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>
|
<Layout>
|
||||||
<div class="flex flex-col ">
|
<div class="text-center my-16 mb-32">
|
||||||
<div class=" flex gap-4 columns-2 md:columns-4 self-center">
|
... album title and description ...
|
||||||
<Sidebar />
|
|
||||||
|
<div class="columns-3">
|
||||||
|
{images.map((image) => <Image src={image} alt="" />)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
... rest of the page ...
|
||||||
</div>
|
</div>
|
||||||
</IndexLayout>
|
</Layout>
|
||||||
|
|
||||||
|
<!-- <style>
|
||||||
|
</style> -->
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue