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 minify css and js when building

Browse source
This commit is contained in:
Kentai Radiquum 2025-01-30 23:53:47 +05:00
parent 6e898e79a0
commit 5c9911a58a
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
4 changed files with 44 additions and 213 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/build.tsx
View file

@ -2,6 +2,7 @@ import { Log } from "./utils";
import { renderToString } from "react-dom/server"; import { renderToString } from "react-dom/server";
import IndexPage from "./templates/index"; import IndexPage from "./templates/index";
import fs from "fs"; import fs from "fs";
import exec from "child_process";
const environment: "prod" | "dev" = const environment: "prod" | "dev" =
(process.env.ENVIRONMENT as "prod" | "dev") || "prod"; (process.env.ENVIRONMENT as "prod" | "dev") || "prod";
@ -46,9 +47,13 @@ async function listAllObjects(bucketName: string, prefix: string) {
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", "jpeg"].includes(ext.toLowerCase())) { if (["png", "jpg", "jpeg"].includes(ext.toLowerCase())) {
images.push(`${process.env.ENDPOINT}/${process.env.BUCKET}/${item.Key}`); images.push(
`${process.env.ENDPOINT}/${process.env.BUCKET}/${item.Key}`
);
} else if (["mp4"].includes(ext.toLowerCase())) { } else if (["mp4"].includes(ext.toLowerCase())) {
videos.push(`${process.env.ENDPOINT}/${process.env.BUCKET}/${item.Key}`); videos.push(
`${process.env.ENDPOINT}/${process.env.BUCKET}/${item.Key}`
);
} }
} }
}); });
@ -96,7 +101,11 @@ let html = renderToString(
environment={environment} environment={environment}
path="/" path="/"
head={{ head={{
description: `Home page of Wah-Collection by @radiquum | ${images.length} Images | ${videos.length} Videos | ${images.length + videos.length} Total`, 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", image: "https://s3.tebi.io/wahs.wah.su/red_panda/1928. bqiKzsaDPlw.jpg",
url: process.env.WEB_URL as string, url: process.env.WEB_URL as string,
preload: [ preload: [
@ -111,5 +120,33 @@ let html = renderToString(
fs.cpSync("src/static", "out/static", { recursive: true }); fs.cpSync("src/static", "out/static", { recursive: true });
if (environment == "dev") { if (environment == "dev") {
fs.cpSync("src/static_dev", "out/static/dev", { recursive: true }); fs.cpSync("src/static_dev", "out/static/dev", { recursive: true });
} else {
log.info("Minifying resources...");
exec.exec(
"bun run tailwindcss -i src/input.css -o out/static/tailwind.min.css --build --minify",
(error, stdout, stderr) => {
if (error) {
log.error(error.message);
return;
}
if (stderr) {
log.error(stderr);
return;
}
log.info(stdout);
}
);
const transpiler = new Bun.Transpiler({
loader: "js",
target: "browser",
minifyWhitespace: true
});
const populate_index_file = fs.readFileSync("src/static/populate_index.js", {
encoding: "utf-8",
});
const populate_index_minified = transpiler.transformSync(populate_index_file);
fs.writeFileSync("out/static/populate_index.min.js", populate_index_minified);
} }
fs.writeFileSync("out/index.html", `<!DOCTYPE html>${html}`); fs.writeFileSync("out/index.html", `<!DOCTYPE html>${html}`);

206
src/static/tailwind.css
View file

@ -521,23 +521,9 @@
} }
} }
@layer utilities { @layer utilities {
.collapse {
visibility: collapse;
}
.invisible { .invisible {
visibility: hidden; visibility: hidden;
} }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.absolute { .absolute {
position: absolute; position: absolute;
} }
@ -565,12 +551,6 @@
.z-10 { .z-10 {
z-index: 10; z-index: 10;
} }
.z-\[1\] {
z-index: 1;
}
.z-\[2\] {
z-index: 2;
}
.z-\[3\] { .z-\[3\] {
z-index: 3; z-index: 3;
} }
@ -598,33 +578,12 @@
.mt-4 { .mt-4 {
margin-top: calc(var(--spacing) * 4); margin-top: calc(var(--spacing) * 4);
} }
.block {
display: block;
}
.flex { .flex {
display: flex; display: flex;
} }
.grid {
display: grid;
}
.hidden { .hidden {
display: none; display: none;
} }
.inline {
display: inline;
}
.inline-block {
display: inline-block;
}
.inline-flex {
display: inline-flex;
}
.list-item {
display: list-item;
}
.table {
display: table;
}
.aspect-square { .aspect-square {
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
} }
@ -634,15 +593,6 @@
.h-16 { .h-16 {
height: calc(var(--spacing) * 16); height: calc(var(--spacing) * 16);
} }
.h-32 {
height: calc(var(--spacing) * 32);
}
.h-48 {
height: calc(var(--spacing) * 48);
}
.h-64 {
height: calc(var(--spacing) * 64);
}
.h-full { .h-full {
height: 100%; height: 100%;
} }
@ -652,42 +602,18 @@
.w-16 { .w-16 {
width: calc(var(--spacing) * 16); width: calc(var(--spacing) * 16);
} }
.w-32 {
width: calc(var(--spacing) * 32);
}
.w-48 {
width: calc(var(--spacing) * 48);
}
.w-64 {
width: calc(var(--spacing) * 64);
}
.w-full { .w-full {
width: 100%; width: 100%;
} }
.min-w-48 { .min-w-48 {
min-width: calc(var(--spacing) * 48); min-width: calc(var(--spacing) * 48);
} }
.flex-shrink {
flex-shrink: 1;
}
.shrink-0 {
flex-shrink: 0;
}
.border-collapse {
border-collapse: collapse;
}
.transform { .transform {
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
} }
.animate-pulse { .animate-pulse {
animation: var(--animate-pulse); animation: var(--animate-pulse);
} }
.animate-spin {
animation: var(--animate-spin);
}
.resize {
resize: both;
}
.flex-col { .flex-col {
flex-direction: column; flex-direction: column;
} }
@ -710,43 +636,18 @@
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);
} }
.border {
border-style: var(--tw-border-style);
border-width: 1px;
}
.bg-\[\#faebeb\] { .bg-\[\#faebeb\] {
background-color: #faebeb; background-color: #faebeb;
} }
.bg-gray-400 { .bg-gray-400 {
background-color: var(--color-gray-400); background-color: var(--color-gray-400);
} }
.bg-orange-700 {
background-color: var(--color-orange-700);
}
.bg-orange-800 {
background-color: var(--color-orange-800);
}
.bg-orange-950 { .bg-orange-950 {
background-color: var(--color-orange-950); background-color: var(--color-orange-950);
} }
.bg-yellow-800 {
background-color: var(--color-yellow-800);
}
.bg-yellow-950 { .bg-yellow-950 {
background-color: var(--color-yellow-950); background-color: var(--color-yellow-950);
} }
.\[background-image\:var\(--blur-img\)\] {
background-image: var(--blur-img);
}
.bg-cover {
background-size: cover;
}
.bg-center {
background-position: center;
}
.fill-yellow-400 {
fill: var(--color-yellow-400);
}
.object-cover { .object-cover {
object-fit: cover; object-fit: cover;
} }
@ -770,26 +671,12 @@
.text-\[\#f9ebeb\] { .text-\[\#f9ebeb\] {
color: #f9ebeb; color: #f9ebeb;
} }
.text-gray-200 {
color: var(--color-gray-200);
}
.underline { .underline {
text-decoration-line: underline; text-decoration-line: underline;
} }
.opacity-30 { .opacity-30 {
opacity: 30%; opacity: 30%;
} }
.outline {
outline-style: var(--tw-outline-style);
outline-width: 1px;
}
.blur {
--tw-blur: blur(8px);
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,);
}
.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,);
}
.transition-colors { .transition-colors {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@ -802,13 +689,6 @@
} }
} }
} }
.hover\:bg-orange-700 {
&:hover {
@media (hover: hover) {
background-color: var(--color-orange-700);
}
}
}
.sm\:grid { .sm\:grid {
@media (width >= 40rem) { @media (width >= 40rem) {
display: grid; display: grid;
@ -860,16 +740,6 @@
display: block; display: block;
} }
} }
.xl\:grid-cols-\[repeat\(auto-fill\,minmax\(18\%\,1fr\)\)\] {
@media (width >= 80rem) {
grid-template-columns: repeat(auto-fill,minmax(18%,1fr));
}
}
.xl\:grid-cols-\[repeat\(auto-fill\,minmax\(19\%\,1fr\)\)\] {
@media (width >= 80rem) {
grid-template-columns: repeat(auto-fill,minmax(19%,1fr));
}
}
.xl\:grid-cols-\[repeat\(auto-fill\,minmax\(20\%\,1fr\)\)\] { .xl\:grid-cols-\[repeat\(auto-fill\,minmax\(20\%\,1fr\)\)\] {
@media (width >= 80rem) { @media (width >= 80rem) {
grid-template-columns: repeat(auto-fill,minmax(20%,1fr)); grid-template-columns: repeat(auto-fill,minmax(20%,1fr));
@ -880,41 +750,11 @@
background-color: #160606; background-color: #160606;
} }
} }
.dark\:bg-orange-800 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-orange-800);
}
}
.dark\:bg-orange-900 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-orange-900);
}
}
.dark\:bg-orange-950 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-orange-950);
}
}
.dark\:bg-slate-800 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-slate-800);
}
}
.dark\:bg-yellow-950 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-yellow-950);
}
}
.dark\:text-\[\#f9ebeb\] { .dark\:text-\[\#f9ebeb\] {
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
color: #f9ebeb; color: #f9ebeb;
} }
} }
.dark\:text-gray-600 {
@media (prefers-color-scheme: dark) {
color: var(--color-gray-600);
}
}
} }
.material-symbols--arrow-forward-rounded { .material-symbols--arrow-forward-rounded {
display: inline-block; display: inline-block;
@ -978,49 +818,3 @@
inherits: false; inherits: false;
initial-value: skewY(0); initial-value: skewY(0);
} }
@property --tw-border-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@property --tw-outline-style {
syntax: "*";
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;
}

6
src/templates/Components/Head.tsx
View file

@ -21,14 +21,14 @@ export default function head(props: {
<meta property="og:title" content={props.title} /> <meta property="og:title" content={props.title} />
<meta property="og:description" content={props.description} /> <meta property="og:description" content={props.description} />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:url" content={`${props.url}${props.path}`} />
<meta property="og:image" content={props.image} /> <meta property="og:image" content={props.image} />
<meta property="og:image:type" content={mimetype} /> <meta property="og:image:type" content={mimetype} />
<meta property="og:image:alt" content="" /> <meta property="og:image:alt" content="" />
<link href="/static/tailwind.css" rel="stylesheet" /> <meta property="og:logo" content={`${props.url}/static/logo-1x.png`} />
<meta property="og:url" content={`${props.url}${props.path}`} /> <link href={props.environment == "dev" ? "/static/tailwind.css" : "/static/tailwind.min.css"} rel="stylesheet" />
{props.preload ? props.preload.map((item) => <link key={`preload_${item}`} rel="preload" href={item} as="fetch" crossOrigin="anonymous"></link>) : ""} {props.preload ? props.preload.map((item) => <link key={`preload_${item}`} rel="preload" href={item} as="fetch" crossOrigin="anonymous"></link>) : ""}
{props.dns ? props.dns.map((item) => <link key={`dns_${item}`} rel="dns-prefetch" href={item} />) : ""} {props.dns ? props.dns.map((item) => <link key={`dns_${item}`} rel="dns-prefetch" href={item} />) : ""}
<meta property="og:logo" content={`${props.url}/static/logo-1x.png`} />
{props.environment == "dev" ? ( {props.environment == "dev" ? (
<script src="./static/dev/hotreload.js"></script> <script src="./static/dev/hotreload.js"></script>
) : ( ) : (

2
src/templates/index.tsx
View file

@ -56,7 +56,7 @@ export default function Index(props: {
</div> </div>
</div> </div>
</div> </div>
<script src="./static/populate_index.js"></script> <script src={props.environment == "dev" ? "/static/populate_index.js" : "/static/populate_index.min.js"}></script>
</body> </body>
</html> </html>
); );