Radiquum/radiquum.github.io--photos
1
0
Fork 0
mirror of https://github.com/Radiquum/photos.git synced 2025-04-05 15:54:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat/generator: add footer

Browse source
This commit is contained in:
Kentai Radiquum 2025-02-22 01:06:24 +05:00
parent ae7ccbc308
commit 0096d4007e
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
6 changed files with 45 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
generate/build.tsx
View file

@ -6,7 +6,6 @@ import { renderToString } from "react-dom/server";
import fs from "fs"; import fs from "fs";
import exec from "child_process"; import exec from "child_process";
import Base from "./templates/Base"; import Base from "./templates/Base";
import Header from "./templates/Header";
import YearPhotos from "./templates/YearPhotos"; import YearPhotos from "./templates/YearPhotos";
import Tags from "./templates/Tags"; import Tags from "./templates/Tags";
@ -123,7 +122,6 @@ Object.keys(items).forEach((year) => {
const html = renderToString( const html = renderToString(
<Base isDev={ENVIRONMENT == "dev"}> <Base isDev={ENVIRONMENT == "dev"}>
<Header />
<Tags tags={tags} /> <Tags tags={tags} />
<div className="container mx-auto p-4 flex flex-col gap-4"> <div className="container mx-auto p-4 flex flex-col gap-4">
{Object.keys(items).sort().reverse().map((year) => ( {Object.keys(items).sort().reverse().map((year) => (

21
generate/static/css/tailwind.css
View file

@ -563,6 +563,9 @@
.mx-auto { .mx-auto {
margin-inline: auto; margin-inline: auto;
} }
.mt-2 {
margin-top: calc(var(--spacing) * 2);
}
.mb-4 { .mb-4 {
margin-bottom: calc(var(--spacing) * 4); margin-bottom: calc(var(--spacing) * 4);
} }
@ -620,6 +623,9 @@
.w-16 { .w-16 {
width: calc(var(--spacing) * 16); width: calc(var(--spacing) * 16);
} }
.w-24 {
width: calc(var(--spacing) * 24);
}
.w-full { .w-full {
width: 100%; width: 100%;
} }
@ -647,6 +653,9 @@
.items-center { .items-center {
align-items: center; align-items: center;
} }
.justify-between {
justify-content: space-between;
}
.gap-1 { .gap-1 {
gap: calc(var(--spacing) * 1); gap: calc(var(--spacing) * 1);
} }
@ -668,6 +677,10 @@
.rounded-sm { .rounded-sm {
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
} }
.rounded-t-lg {
border-top-left-radius: var(--radius-lg);
border-top-right-radius: var(--radius-lg);
}
.rounded-b-lg { .rounded-b-lg {
border-bottom-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg);
border-bottom-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg);
@ -679,6 +692,9 @@
.bg-\[\#121B2C\] { .bg-\[\#121B2C\] {
background-color: #121B2C; background-color: #121B2C;
} }
.bg-\[\#262626\] {
background-color: #262626;
}
.bg-\[\#FF478B\] { .bg-\[\#FF478B\] {
background-color: #FF478B; background-color: #FF478B;
} }
@ -788,6 +804,11 @@
align-items: center; align-items: center;
} }
} }
.md\:justify-between {
@media (width >= 48rem) {
justify-content: space-between;
}
}
.md\:gap-2 { .md\:gap-2 {
@media (width >= 48rem) { @media (width >= 48rem) {
gap: calc(var(--spacing) * 2); gap: calc(var(--spacing) * 2);

9
generate/templates/Base.tsx
View file

@ -1,3 +1,6 @@
import Footer from "./Footer";
import Header from "./Header";
interface BaseProps { interface BaseProps {
children: React.ReactNode; children: React.ReactNode;
isDev?: boolean; isDev?: boolean;
@ -10,7 +13,7 @@ export default function Base({ children, isDev }: BaseProps) {
<meta charSet="UTF-8" /> <meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Radiquum/Photos</title> <title>Radiquum/Photos</title>
<link rel="stylesheet" href="/static/css/tailwind.css" /> <link rel="stylesheet" href="./static/css/tailwind.css" />
{isDev ? <script src="/static/js/hotreload.js"></script> : ""} {isDev ? <script src="/static/js/hotreload.js"></script> : ""}
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
@ -40,8 +43,10 @@ export default function Base({ children, isDev }: BaseProps) {
</head> </head>
<body className="bg-[#121B2C] text-white"> <body className="bg-[#121B2C] text-white">
<Header />
{children} {children}
<script src="/static/js/initGalleries.js" /> <Footer />
<script src="./static/js/initGalleries.js" />
</body> </body>
</html> </html>
); );

12
generate/templates/Footer.tsx Normal file
View file

@ -0,0 +1,12 @@
export default function Footer() {
return (
<div className="bg-[#262626] text-white w-full rounded-t-lg">
<div className="container mx-auto p-4 flex flex-col md:flex-row md:items-center">
<a href="https://creativecommons.org/licenses/by-sa/4.0/" className="flex gap-2 items-center">
<p>Licensed Under CC BY-SA 4.0</p>
<img alt="CC BY-SA 4.0" src="https://licensebuttons.net/l/by-sa/4.0/88x31.png" className="w-24" />
</a>
</div>
</div>
)
}

6
generate/templates/Header.tsx
View file

@ -2,8 +2,10 @@ export default function Header() {
return ( return (
<header className="bg-[#FF478B] text-white w-full rounded-b-lg"> <header className="bg-[#FF478B] text-white w-full rounded-b-lg">
<div className="flex items-center container mx-auto p-4 gap-4"> <div className="flex items-center container mx-auto p-4 gap-4">
<img src="https://radiquum.wah.su/static/avatar_512.jpg" alt="" className="w-16 h-16 rounded-lg" /> <a href="/" className="flex items-center gap-4">
<h1 className="text-2xl font-bold xl:text-3xl 2xl:text-4xl inter-semibold">RADIQUUM/PHOTOS</h1> <img src="https://radiquum.wah.su/static/avatar_512.jpg" alt="" className="w-16 h-16 rounded-lg" />
<h1 className="text-2xl font-bold xl:text-3xl 2xl:text-4xl inter-semibold">KENTAI RADIQUUM</h1>
</a>
</div> </div>
</header> </header>
); );

2
generate/templates/Tags.tsx
View file

@ -1,6 +1,6 @@
export default function Tags({ tags }: { tags: string[] }) { export default function Tags({ tags }: { tags: string[] }) {
return ( return (
<div className="container mx-auto"> <div className="container mx-auto mt-2">
<div className="flex overflow-x-auto px-4 py-2 gap-2 scrollbar-thin scrollbar-corner-rounded-sm scrollbar-thumb-gray-700 scrollbar-track-gray-900"> <div className="flex overflow-x-auto px-4 py-2 gap-2 scrollbar-thin scrollbar-corner-rounded-sm scrollbar-thumb-gray-700 scrollbar-track-gray-900">
<button <button
className="bg-gray-800 rounded-lg px-4 py-1 text-sm" className="bg-gray-800 rounded-lg px-4 py-1 text-sm"