mirror of
https://github.com/wah-su/wahs.wah.su.git
synced 2025-04-17 14:54:35 +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
103
src/build.tsx
103
src/build.tsx
|
|
@ -1,6 +1,6 @@
|
||||||
import { Log } from "./utils";
|
import { Log } from "./utils";
|
||||||
import { renderToString } from "react-dom/server";
|
import { renderToString } from "react-dom/server";
|
||||||
import IndexPage from "./templates/index";
|
import Base from "./templates/base";
|
||||||
import fs from "fs";
|
import fs from "fs";
|
||||||
import exec from "child_process";
|
import exec from "child_process";
|
||||||
|
|
||||||
|
|
@ -17,6 +17,8 @@ if (!fs.existsSync("out")) fs.mkdirSync("out");
|
||||||
// List Objects from S3 bucket
|
// List Objects from S3 bucket
|
||||||
|
|
||||||
import { S3Client, ListObjectsV2Command } from "@aws-sdk/client-s3";
|
import { S3Client, ListObjectsV2Command } from "@aws-sdk/client-s3";
|
||||||
|
import IndexPage from "./templates";
|
||||||
|
import type { ReactNode } from "react";
|
||||||
|
|
||||||
const S3 = new S3Client({
|
const S3 = new S3Client({
|
||||||
region: "auto",
|
region: "auto",
|
||||||
|
|
@ -106,32 +108,49 @@ if (!fs.existsSync("out/data/videos.json")) {
|
||||||
fs.writeFileSync("out/data/videos.json", JSON.stringify(videos));
|
fs.writeFileSync("out/data/videos.json", JSON.stringify(videos));
|
||||||
}
|
}
|
||||||
|
|
||||||
let html = renderToString(
|
function generateHTMLFile(
|
||||||
<IndexPage
|
title: string,
|
||||||
title="Wah-Collection"
|
path: string,
|
||||||
environment={environment}
|
description: string,
|
||||||
path="/"
|
script: string[],
|
||||||
head={{
|
Element: ReactNode,
|
||||||
description: `Home page of Wah-Collection by @radiquum | ${
|
output: string
|
||||||
images.length
|
) {
|
||||||
} Images | ${videos.length} Videos | ${
|
const _script = [environment == "dev" ? "/static/dev/hotreload.js" : ""];
|
||||||
images.length + videos.length
|
script.forEach((item) => _script.push(item));
|
||||||
} Total`,
|
|
||||||
image: "https://s3.tebi.io/wahs.wah.su/red_panda/1928. bqiKzsaDPlw.jpg",
|
if (!fs.existsSync(`out${path}`)) fs.mkdirSync(`out${path}`);
|
||||||
url: process.env.WEB_URL as string,
|
|
||||||
preload: [
|
let html = renderToString(
|
||||||
`${environment == "prod" ? process.env.WEB_URL : "."}/data/config.json`,
|
<Base
|
||||||
`${environment == "prod" ? process.env.WEB_URL : "."}/data/images.json`,
|
title={title}
|
||||||
`${environment == "prod" ? process.env.WEB_URL : "."}/data/videos.json`,
|
environment={environment}
|
||||||
],
|
path={path}
|
||||||
dns: [process.env.ENDPOINT as string, "https://wsrv.nl"],
|
head={{
|
||||||
script: [
|
description: description,
|
||||||
environment == "dev" ? "/static/dev/hotreload.js" : "",
|
image: "https://s3.tebi.io/wahs.wah.su/red_panda/1928. bqiKzsaDPlw.jpg",
|
||||||
environment == "dev" ? "/static/populate_index.js" : "/static/populate_index.min.js"
|
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 });
|
fs.cpSync("src/static", "out/static", { recursive: true });
|
||||||
if (environment == "dev") {
|
if (environment == "dev") {
|
||||||
|
|
@ -172,4 +191,32 @@ if (environment == "dev") {
|
||||||
fs.writeFileSync(`out/static/${name}.min.${ext}`, minFile);
|
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 AllLink from "./Components/AllLink";
|
||||||
import Header from "./Components/Header";
|
export default function IndexPage() {
|
||||||
|
|
||||||
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[];
|
|
||||||
};
|
|
||||||
}) {
|
|
||||||
return (
|
return (
|
||||||
<html>
|
<div>
|
||||||
<Head
|
<p className="text-4xl bg-orange-800/50 rounded-sm p-4">Images</p>
|
||||||
environment={props.environment}
|
<div
|
||||||
title={props.title}
|
id="index_images"
|
||||||
path={props.path}
|
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"
|
||||||
{...props.head}
|
>
|
||||||
/>
|
{[1, 2, 3, 4, 5, 6, 7].map((num, idx) => {
|
||||||
<body className="dark:bg-[#160606] bg-[#faebeb] dark:text-[#f9ebeb] text-[#140606]">
|
return (
|
||||||
<Header path={props.path} />
|
<a
|
||||||
<div className="container mx-auto py-4 px-4 sm:px-8">
|
data-type="index__placeholder__image"
|
||||||
<div>
|
key={`index__placeholder__image-${num}`}
|
||||||
<p className="text-4xl bg-orange-800/50 rounded-sm p-4">Images</p>
|
className={`relative aspect-square min-w-48 sm:min-w-auto rounded-sm overflow-hidden ${
|
||||||
<div
|
idx >= 5 ? "hidden xl:block" : ""
|
||||||
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) => {
|
<div
|
||||||
return (
|
id={`index__placeholder__image-${num}-loader`}
|
||||||
<a
|
className="w-full h-full absolute inset-0 bg-gray-400 opacity-30 animate-pulse z-[3]"
|
||||||
data-type="index__placeholder__image"
|
></div>
|
||||||
key={`index__placeholder__image-${num}`}
|
</a>
|
||||||
className={`relative aspect-square min-w-48 sm:min-w-auto rounded-sm overflow-hidden ${
|
);
|
||||||
idx >= 5 ? "hidden xl:block" : ""
|
})}
|
||||||
}`}
|
<AllLink location="/images/" text="View All Images"/>
|
||||||
>
|
</div>
|
||||||
<div
|
</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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue