mirror of
https://github.com/wah-su/wahs.wah.su.git
synced 2025-04-05 15:54:37 +00:00
add Head template
This commit is contained in:
parent
168baad986
commit
236246a83f
GPG key ID:
858E8EE696525EED
5 changed files with 213 additions and 33 deletions
102
src/build.tsx
102
src/build.tsx
|
|
@ -23,7 +23,8 @@ const S3 = new S3Client({
|
|||
},
|
||||
});
|
||||
|
||||
let items: string[] = [];
|
||||
let images: string[] = [];
|
||||
let videos: string[] = [];
|
||||
|
||||
async function listAllObjects(bucketName: string, prefix: string) {
|
||||
let isTruncated: boolean = true;
|
||||
|
|
@ -41,8 +42,10 @@ async function listAllObjects(bucketName: string, prefix: string) {
|
|||
response.Contents.forEach((item) => {
|
||||
if (item.Key != undefined) {
|
||||
const ext = item.Key.split(".")[item.Key.split(".").length - 1];
|
||||
if (["png", "jpg", "mp4", "jpeg"].includes(ext.toLowerCase())) {
|
||||
items.push(item.Key);
|
||||
if (["png", "jpg", "jpeg"].includes(ext.toLowerCase())) {
|
||||
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")) {
|
||||
log.info("Listing all objects in S3 bucket . . .");
|
||||
await listAllObjects(process.env.BUCKET as string, "red_panda");
|
||||
fs.writeFileSync(".cache/objects.json", JSON.stringify({ items }));
|
||||
log.info(`Total: ${items.length}`);
|
||||
fs.writeFileSync(".cache/objects.json", JSON.stringify({ images, videos }));
|
||||
log.info(
|
||||
`Total: ${images.length + videos.length} | ${images.length} Images | ${
|
||||
videos.length
|
||||
} Videos`
|
||||
);
|
||||
} else {
|
||||
log.info("Using S3 Bucket cache . . .");
|
||||
items = JSON.parse(
|
||||
fs.readFileSync(".cache/objects.json", { encoding: "utf-8" })
|
||||
)["items"];
|
||||
log.info(`Total: ${items.length}`);
|
||||
const _cacheFile = fs.readFileSync(".cache/objects.json", {
|
||||
encoding: "utf-8",
|
||||
});
|
||||
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 IndexPage from "./templates/index";
|
||||
import fs from "fs";
|
||||
function App(props: {}) {
|
||||
return (
|
||||
<html>
|
||||
<head>
|
||||
<link href="./static/tailwind.css" rel="stylesheet" />
|
||||
{environment == "dev" ? (
|
||||
<script src="./static/dev/hotreload.js"></script>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
<title>Bun Render Test</title>
|
||||
</head>
|
||||
<body>
|
||||
{[1, 2, 3, 4, 5, 6, 7, 8, 9].map((el) => (
|
||||
<div key={el} className="flex flex-wrap gap-8">
|
||||
<p className="text-6xl text-red-400">{el}</p>
|
||||
<p className="text-8xl text-green-400">{el * 2}</p>
|
||||
</div>
|
||||
))}
|
||||
</body>
|
||||
</html>
|
||||
// function App(props: {}) {
|
||||
// return (
|
||||
// <html>
|
||||
// <head>
|
||||
// <link href="./static/tailwind.css" rel="stylesheet" />
|
||||
// {environment == "dev" ? (
|
||||
// <script src="./static/dev/hotreload.js"></script>
|
||||
// ) : (
|
||||
// ""
|
||||
// )}
|
||||
// <title>Bun Render Test</title>
|
||||
// </head>
|
||||
// <body>
|
||||
// {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((el) => (
|
||||
// <div key={el} className="flex flex-wrap gap-8">
|
||||
// <p className="text-6xl text-red-400">{el}</p>
|
||||
// <p className="text-8xl text-green-400">{el * 2}</p>
|
||||
// </div>
|
||||
// ))}
|
||||
// </body>
|
||||
// </html>
|
||||
// );
|
||||
// }
|
||||
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],
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
let html = renderToString(<App />);
|
||||
|
||||
fs.cpSync("src/static", "out/static", { recursive: true });
|
||||
if (environment == "dev") {
|
||||
|
|
|
|||
37
src/static/functions.js
Normal file
37
src/static/functions.js
Normal 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();
|
||||
// }
|
||||
|
|
@ -585,6 +585,9 @@
|
|||
outline-style: var(--tw-outline-style);
|
||||
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 {
|
||||
to {
|
||||
|
|
@ -647,3 +650,39 @@
|
|||
inherits: false;
|
||||
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
40
src/templates/Components/Head.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue