wah.su/wahs.wah.su
1
0
Fork 0
mirror of https://github.com/wah-su/wahs.wah.su.git synced 2025-04-05 15:54:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add Head template

Browse source
This commit is contained in:
Kentai Radiquum 2025-01-30 00:32:34 +05:00
parent 168baad986
commit 236246a83f
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
5 changed files with 213 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

104
src/build.tsx
View file

@ -23,7 +23,8 @@ const S3 = new S3Client({
}, },
}); });
let items: string[] = []; let images: string[] = [];
let videos: string[] = [];
async function listAllObjects(bucketName: string, prefix: string) { async function listAllObjects(bucketName: string, prefix: string) {
let isTruncated: boolean = true; let isTruncated: boolean = true;
@ -41,8 +42,10 @@ async function listAllObjects(bucketName: string, prefix: string) {
response.Contents.forEach((item) => { response.Contents.forEach((item) => {
if (item.Key != undefined) { if (item.Key != undefined) {
const ext = item.Key.split(".")[item.Key.split(".").length - 1]; const ext = item.Key.split(".")[item.Key.split(".").length - 1];
if (["png", "jpg", "mp4", "jpeg"].includes(ext.toLowerCase())) { if (["png", "jpg", "jpeg"].includes(ext.toLowerCase())) {
items.push(item.Key); images.push(item.Key);
} else if (["mp4"].includes(ext.toLowerCase())) {
videos.push(item.Key);
} }
} }
}); });
@ -56,42 +59,77 @@ if (!fs.existsSync(".cache")) fs.mkdirSync(".cache");
if (!fs.existsSync(".cache/objects.json")) { if (!fs.existsSync(".cache/objects.json")) {
log.info("Listing all objects in S3 bucket . . ."); log.info("Listing all objects in S3 bucket . . .");
await listAllObjects(process.env.BUCKET as string, "red_panda"); await listAllObjects(process.env.BUCKET as string, "red_panda");
fs.writeFileSync(".cache/objects.json", JSON.stringify({ items })); fs.writeFileSync(".cache/objects.json", JSON.stringify({ images, videos }));
log.info(`Total: ${items.length}`); log.info(
`Total: ${images.length + videos.length} | ${images.length} Images | ${
videos.length
} Videos`
);
} else { } else {
log.info("Using S3 Bucket cache . . ."); log.info("Using S3 Bucket cache . . .");
items = JSON.parse( const _cacheFile = fs.readFileSync(".cache/objects.json", {
fs.readFileSync(".cache/objects.json", { encoding: "utf-8" }) encoding: "utf-8",
)["items"]; });
log.info(`Total: ${items.length}`); images = JSON.parse(_cacheFile)["images"];
videos = JSON.parse(_cacheFile)["videos"];
log.info(
`Total: ${images.length + videos.length} | ${images.length} Images | ${
videos.length
} Videos`
);
}
if (!fs.existsSync("out/data")) fs.mkdirSync("out/data");
if (!fs.existsSync("out/data/images.json")) {
fs.writeFileSync("out/data/images.json", JSON.stringify(images));
}
if (!fs.existsSync("out/data/videos.json")) {
fs.writeFileSync("out/data/videos.json", JSON.stringify(videos));
} }
import { renderToString } from "react-dom/server"; import { renderToString } from "react-dom/server";
import IndexPage from "./templates/index";
import fs from "fs"; import fs from "fs";
function App(props: {}) { // function App(props: {}) {
return ( // return (
<html> // <html>
<head> // <head>
<link href="./static/tailwind.css" rel="stylesheet" /> // <link href="./static/tailwind.css" rel="stylesheet" />
{environment == "dev" ? ( // {environment == "dev" ? (
<script src="./static/dev/hotreload.js"></script> // <script src="./static/dev/hotreload.js"></script>
) : ( // ) : (
"" // ""
)} // )}
<title>Bun Render Test</title> // <title>Bun Render Test</title>
</head> // </head>
<body> // <body>
{[1, 2, 3, 4, 5, 6, 7, 8, 9].map((el) => ( // {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((el) => (
<div key={el} className="flex flex-wrap gap-8"> // <div key={el} className="flex flex-wrap gap-8">
<p className="text-6xl text-red-400">{el}</p> // <p className="text-6xl text-red-400">{el}</p>
<p className="text-8xl text-green-400">{el * 2}</p> // <p className="text-8xl text-green-400">{el * 2}</p>
</div> // </div>
))} // ))}
</body> // </body>
</html> // </html>
); // );
} // }
let html = renderToString(<App />); let html = renderToString(
<IndexPage
title="Wah-Collection"
environment={environment}
head={{
description: "Home page of Wah-Collection by @radiquum",
image: "https://s3.tebi.io/wahs.wah.su/red_panda/1928. bqiKzsaDPlw.jpg",
path: "/",
url: process.env.WEB_URL as string,
preload: [
`${environment == "prod" ? process.env.WEB_URL : "."}/data/images.json`,
`${environment == "prod" ? process.env.WEB_URL : "."}/data/videos.json`,
],
dns: [process.env.ENDPOINT as string],
}}
/>
);
fs.cpSync("src/static", "out/static", { recursive: true }); fs.cpSync("src/static", "out/static", { recursive: true });
if (environment == "dev") { if (environment == "dev") {

37
src/static/functions.js Normal file
View file

@ -0,0 +1,37 @@
async function get(url) {
const res = await fetch(url);
if (!res.ok) {
throw new Error(`Failed to fetch ${url}`);
}
return await res.json();
}
function random_five(type) {
let _selection = [];
let result = [];
if (type == "images") {
_selection = images;
} else if (type == "videos") {
_selection = videos;
} else {
console.error(`WRONG TYPE (${type})! @ function random_five!`);
}
const max = _selection.length - 1;
for (let i = 0; i < 4; i++) {
result.push(_selection[Math.floor(Math.random() * max)]);
}
return result;
}
// async function FetchData() {
// let images = await get("./data/images.json");
// let videos = await get("./data/videos.json");
// console.log(images, videos);
// }
// window.onload = () => {
// FetchData();
// }

39
src/static/tailwind.css
View file

@ -585,6 +585,9 @@
outline-style: var(--tw-outline-style); outline-style: var(--tw-outline-style);
outline-width: 1px; outline-width: 1px;
} }
.filter {
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
} }
@keyframes spin { @keyframes spin {
to { to {
@ -647,3 +650,39 @@
inherits: false; inherits: false;
initial-value: solid; initial-value: solid;
} }
@property --tw-blur {
syntax: "*";
inherits: false;
}
@property --tw-brightness {
syntax: "*";
inherits: false;
}
@property --tw-contrast {
syntax: "*";
inherits: false;
}
@property --tw-grayscale {
syntax: "*";
inherits: false;
}
@property --tw-hue-rotate {
syntax: "*";
inherits: false;
}
@property --tw-invert {
syntax: "*";
inherits: false;
}
@property --tw-opacity {
syntax: "*";
inherits: false;
}
@property --tw-saturate {
syntax: "*";
inherits: false;
}
@property --tw-sepia {
syntax: "*";
inherits: false;
}

40
src/templates/Components/Head.tsx Normal file
View file

@ -0,0 +1,40 @@
export default function head(props: {
title: string;
description: string;
image: string;
path: string;
url: string;
environment: "prod" | "dev";
preload?: string[];
dns?: string[];
}) {
const mimetype = `image/${
props.image.split(".")[props.image.split(".").length - 1]
}`;
return (
<head>
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{props.title}</title>
<link rel="icon" type="image/ico" href="/favicon.ico" />
<meta property="og:title" content={props.title} />
<meta property="og:description" content={props.description} />
<meta property="og:type" content="website" />
<meta property="og:image" content={props.image} />
<meta property="og:image:type" content={mimetype} />
<meta property="og:image:alt" content="" />
<link href="/static/tailwind.css" rel="stylesheet" />
<meta property="og:url" content={`${props.url}${props.path}`} />
{props.preload ? props.preload.map((item) => <link key={`preload_${item}`} rel="preload" href={item} as="fetch"></link>) : ""}
{props.dns ? props.dns.map((item) => <link key={`dns_${item}`} rel="dns-prefetch" href={item} />) : ""}
{/* <meta property="og:logo" content="<%- baseUrl %><%= path %>/static/images/logo-1x.png" /> */}
{props.environment == "dev" ? (
<script src="./static/dev/hotreload.js"></script>
) : (
""
)}
{/* <script src="./static/functions.js"></script> */}
</head>
);
}

26
src/templates/index.tsx
View file

@ -0,0 +1,26 @@
import Head from "./Components/Head";
export default function Index(props: {
environment: "prod" | "dev";
title: string;
head: {
description: string;
image: string;
path: string;
url: string;
preload?: string[];
dns?: string[];
};
}) {
return (
<html>
<Head
environment={props.environment}
title={props.title}
{...props.head}
/>
<body>
nothing yet . . .
</body>
</html>
);
}