mirror of
https://github.com/wah-su/wahs.wah.su.git
synced 2025-04-09 01:34:37 +00:00
Create Render HTML Function
This commit is contained in:
parent
8cb19f4ec8
commit
a31c71ef7e
GPG key ID:
858E8EE696525EED
4 changed files with 146 additions and 87 deletions
src
103
src/build.tsx
103
src/build.tsx
|
|
@ -1,6 +1,6 @@
|
|||
import { Log } from "./utils";
|
||||
import { renderToString } from "react-dom/server";
|
||||
import IndexPage from "./templates/index";
|
||||
import Base from "./templates/base";
|
||||
import fs from "fs";
|
||||
import exec from "child_process";
|
||||
|
||||
|
|
@ -17,6 +17,8 @@ if (!fs.existsSync("out")) fs.mkdirSync("out");
|
|||
// List Objects from S3 bucket
|
||||
|
||||
import { S3Client, ListObjectsV2Command } from "@aws-sdk/client-s3";
|
||||
import IndexPage from "./templates";
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
const S3 = new S3Client({
|
||||
region: "auto",
|
||||
|
|
@ -106,32 +108,49 @@ if (!fs.existsSync("out/data/videos.json")) {
|
|||
fs.writeFileSync("out/data/videos.json", JSON.stringify(videos));
|
||||
}
|
||||
|
||||
let html = renderToString(
|
||||
<IndexPage
|
||||
title="Wah-Collection"
|
||||
environment={environment}
|
||||
path="/"
|
||||
head={{
|
||||
description: `Home page of Wah-Collection by @radiquum | ${
|
||||
images.length
|
||||
} Images | ${videos.length} Videos | ${
|
||||
images.length + videos.length
|
||||
} Total`,
|
||||
image: "https://s3.tebi.io/wahs.wah.su/red_panda/1928. bqiKzsaDPlw.jpg",
|
||||
url: process.env.WEB_URL as string,
|
||||
preload: [
|
||||
`${environment == "prod" ? process.env.WEB_URL : "."}/data/config.json`,
|
||||
`${environment == "prod" ? process.env.WEB_URL : "."}/data/images.json`,
|
||||
`${environment == "prod" ? process.env.WEB_URL : "."}/data/videos.json`,
|
||||
],
|
||||
dns: [process.env.ENDPOINT as string, "https://wsrv.nl"],
|
||||
script: [
|
||||
environment == "dev" ? "/static/dev/hotreload.js" : "",
|
||||
environment == "dev" ? "/static/populate_index.js" : "/static/populate_index.min.js"
|
||||
]
|
||||
}}
|
||||
/>
|
||||
);
|
||||
function generateHTMLFile(
|
||||
title: string,
|
||||
path: string,
|
||||
description: string,
|
||||
script: string[],
|
||||
Element: ReactNode,
|
||||
output: string
|
||||
) {
|
||||
const _script = [environment == "dev" ? "/static/dev/hotreload.js" : ""];
|
||||
script.forEach((item) => _script.push(item));
|
||||
|
||||
if (!fs.existsSync(`out${path}`)) fs.mkdirSync(`out${path}`);
|
||||
|
||||
let html = renderToString(
|
||||
<Base
|
||||
title={title}
|
||||
environment={environment}
|
||||
path={path}
|
||||
head={{
|
||||
description: description,
|
||||
image: "https://s3.tebi.io/wahs.wah.su/red_panda/1928. bqiKzsaDPlw.jpg",
|
||||
url: process.env.WEB_URL as string,
|
||||
preload: [
|
||||
`${
|
||||
environment == "prod" ? process.env.WEB_URL : "."
|
||||
}/data/config.json`,
|
||||
`${
|
||||
environment == "prod" ? process.env.WEB_URL : "."
|
||||
}/data/images.json`,
|
||||
`${
|
||||
environment == "prod" ? process.env.WEB_URL : "."
|
||||
}/data/videos.json`,
|
||||
],
|
||||
dns: [process.env.ENDPOINT as string, "https://wsrv.nl"],
|
||||
script: _script,
|
||||
}}
|
||||
>
|
||||
{Element}
|
||||
</Base>
|
||||
);
|
||||
fs.writeFileSync(output, `<!DOCTYPE html>${html}`);
|
||||
console.log(`Generated: ${output}`);
|
||||
}
|
||||
|
||||
fs.cpSync("src/static", "out/static", { recursive: true });
|
||||
if (environment == "dev") {
|
||||
|
|
@ -172,4 +191,32 @@ if (environment == "dev") {
|
|||
fs.writeFileSync(`out/static/${name}.min.${ext}`, minFile);
|
||||
});
|
||||
}
|
||||
fs.writeFileSync("out/index.html", `<!DOCTYPE html>${html}`);
|
||||
|
||||
generateHTMLFile(
|
||||
"Wah-Collection",
|
||||
"/",
|
||||
`Home page of Wah-Collection by @radiquum | ${images.length} Images | ${
|
||||
videos.length
|
||||
} Videos | ${images.length + videos.length} Total`,
|
||||
[
|
||||
environment == "dev"
|
||||
? "/static/populate_index.js"
|
||||
: "/static/populate_index.min.js",
|
||||
],
|
||||
<IndexPage />,
|
||||
"out/index.html"
|
||||
);
|
||||
|
||||
generateHTMLFile(
|
||||
"Wah-Collection/Images",
|
||||
"/images/",
|
||||
`Image page of Wah-Collection | ${images.length} Images`,
|
||||
[
|
||||
// environment == "dev"
|
||||
// ? "/static/populate_index.js"
|
||||
// : "/static/populate_index.min.js",
|
||||
],
|
||||
// <IndexPage />,
|
||||
<p>There Should Be Red Pandas!</p>,
|
||||
"out/images/index.html"
|
||||
);
|
||||
|
|
|
|||
11
src/templates/Components/AllLink.tsx
Normal file
11
src/templates/Components/AllLink.tsx
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
export default function AllLink(props: { location: string; text: string }) {
|
||||
return (
|
||||
<a
|
||||
href={props.location}
|
||||
className="text-[#f9ebeb] hover:bg-orange-600 rounded-sm overflow-hidden transition-colors aspect-square bg-yellow-950 min-w-48 sm:min-w-auto flex items-center justify-center flex-col"
|
||||
>
|
||||
<span className="material-symbols--arrow-forward-rounded w-16 h-16"></span>
|
||||
<p className="text-xl">{props.text}</p>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
34
src/templates/base.tsx
Normal file
34
src/templates/base.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import Head from "./Components/Head";
|
||||
import Header from "./Components/Header";
|
||||
|
||||
export default function Index(props: {
|
||||
children: any;
|
||||
environment: "prod" | "dev";
|
||||
title: string;
|
||||
path: string;
|
||||
head: {
|
||||
description: string;
|
||||
image: string;
|
||||
url: string;
|
||||
preload?: string[];
|
||||
dns?: string[];
|
||||
script?: string[];
|
||||
};
|
||||
}) {
|
||||
return (
|
||||
<html>
|
||||
<Head
|
||||
environment={props.environment}
|
||||
title={props.title}
|
||||
path={props.path}
|
||||
{...props.head}
|
||||
/>
|
||||
<body className="dark:bg-[#160606] bg-[#faebeb] dark:text-[#f9ebeb] text-[#140606]">
|
||||
<Header path={props.path} />
|
||||
<div className="container mx-auto py-4 px-4 sm:px-8">
|
||||
{props.children}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,63 +1,30 @@
|
|||
import Head from "./Components/Head";
|
||||
import Header from "./Components/Header";
|
||||
|
||||
export default function Index(props: {
|
||||
environment: "prod" | "dev";
|
||||
title: string;
|
||||
path: string;
|
||||
head: {
|
||||
description: string;
|
||||
image: string;
|
||||
url: string;
|
||||
preload?: string[];
|
||||
dns?: string[];
|
||||
script?: string[];
|
||||
};
|
||||
}) {
|
||||
import AllLink from "./Components/AllLink";
|
||||
export default function IndexPage() {
|
||||
return (
|
||||
<html>
|
||||
<Head
|
||||
environment={props.environment}
|
||||
title={props.title}
|
||||
path={props.path}
|
||||
{...props.head}
|
||||
/>
|
||||
<body className="dark:bg-[#160606] bg-[#faebeb] dark:text-[#f9ebeb] text-[#140606]">
|
||||
<Header path={props.path} />
|
||||
<div className="container mx-auto py-4 px-4 sm:px-8">
|
||||
<div>
|
||||
<p className="text-4xl bg-orange-800/50 rounded-sm p-4">Images</p>
|
||||
<div
|
||||
id="index_images"
|
||||
className="mt-4 flex overflow-x-auto sm:overflow-x-hidden sm:grid sm:grid-cols-[repeat(auto-fill,minmax(25%,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-4"
|
||||
<div>
|
||||
<p className="text-4xl bg-orange-800/50 rounded-sm p-4">Images</p>
|
||||
<div
|
||||
id="index_images"
|
||||
className="mt-4 flex overflow-x-auto sm:overflow-x-hidden sm:grid sm:grid-cols-[repeat(auto-fill,minmax(25%,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-4"
|
||||
>
|
||||
{[1, 2, 3, 4, 5, 6, 7].map((num, idx) => {
|
||||
return (
|
||||
<a
|
||||
data-type="index__placeholder__image"
|
||||
key={`index__placeholder__image-${num}`}
|
||||
className={`relative aspect-square min-w-48 sm:min-w-auto rounded-sm overflow-hidden ${
|
||||
idx >= 5 ? "hidden xl:block" : ""
|
||||
}`}
|
||||
>
|
||||
{[1, 2, 3, 4, 5, 6, 7].map((num, idx) => {
|
||||
return (
|
||||
<a
|
||||
data-type="index__placeholder__image"
|
||||
key={`index__placeholder__image-${num}`}
|
||||
className={`relative aspect-square min-w-48 sm:min-w-auto rounded-sm overflow-hidden ${
|
||||
idx >= 5 ? "hidden xl:block" : ""
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
id={`index__placeholder__image-${num}-loader`}
|
||||
className="w-full h-full absolute inset-0 bg-gray-400 opacity-30 animate-pulse z-[3]"
|
||||
></div>
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
<a
|
||||
href="/images/"
|
||||
className="text-[#f9ebeb] hover:bg-orange-600 rounded-sm overflow-hidden transition-colors aspect-square bg-yellow-950 min-w-48 sm:min-w-auto flex items-center justify-center flex-col"
|
||||
>
|
||||
<span className="material-symbols--arrow-forward-rounded w-16 h-16"></span>
|
||||
<p className="text-xl">All Images</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<div
|
||||
id={`index__placeholder__image-${num}-loader`}
|
||||
className="w-full h-full absolute inset-0 bg-gray-400 opacity-30 animate-pulse z-[3]"
|
||||
></div>
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
<AllLink location="/images/" text="View All Images"/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue