diff --git a/src/build.tsx b/src/build.tsx index dcff59d..e7c5707 100644 --- a/src/build.tsx +++ b/src/build.tsx @@ -2,6 +2,7 @@ import { Log } from "./utils"; import { renderToString } from "react-dom/server"; import IndexPage from "./templates/index"; import fs from "fs"; +import exec from "child_process"; const environment: "prod" | "dev" = (process.env.ENVIRONMENT as "prod" | "dev") || "prod"; @@ -46,9 +47,13 @@ async function listAllObjects(bucketName: string, prefix: string) { if (item.Key != undefined) { const ext = item.Key.split(".")[item.Key.split(".").length - 1]; 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())) { - 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} path="/" 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", url: process.env.WEB_URL as string, preload: [ @@ -111,5 +120,33 @@ let html = renderToString( fs.cpSync("src/static", "out/static", { recursive: true }); if (environment == "dev") { 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", `${html}`); diff --git a/src/static/tailwind.css b/src/static/tailwind.css index 0105ea3..fc80161 100644 --- a/src/static/tailwind.css +++ b/src/static/tailwind.css @@ -521,23 +521,9 @@ } } @layer utilities { - .collapse { - visibility: collapse; - } .invisible { 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 { position: absolute; } @@ -565,12 +551,6 @@ .z-10 { z-index: 10; } - .z-\[1\] { - z-index: 1; - } - .z-\[2\] { - z-index: 2; - } .z-\[3\] { z-index: 3; } @@ -598,33 +578,12 @@ .mt-4 { margin-top: calc(var(--spacing) * 4); } - .block { - display: block; - } .flex { display: flex; } - .grid { - display: grid; - } .hidden { 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-ratio: 1 / 1; } @@ -634,15 +593,6 @@ .h-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 { height: 100%; } @@ -652,42 +602,18 @@ .w-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 { width: 100%; } .min-w-48 { min-width: calc(var(--spacing) * 48); } - .flex-shrink { - flex-shrink: 1; - } - .shrink-0 { - flex-shrink: 0; - } - .border-collapse { - border-collapse: collapse; - } .transform { transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); } .animate-pulse { animation: var(--animate-pulse); } - .animate-spin { - animation: var(--animate-spin); - } - .resize { - resize: both; - } .flex-col { flex-direction: column; } @@ -710,43 +636,18 @@ border-bottom-right-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); } - .border { - border-style: var(--tw-border-style); - border-width: 1px; - } .bg-\[\#faebeb\] { background-color: #faebeb; } .bg-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 { background-color: var(--color-orange-950); } - .bg-yellow-800 { - background-color: var(--color-yellow-800); - } .bg-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-fit: cover; } @@ -770,26 +671,12 @@ .text-\[\#f9ebeb\] { color: #f9ebeb; } - .text-gray-200 { - color: var(--color-gray-200); - } .underline { text-decoration-line: underline; } .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-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)); @@ -802,13 +689,6 @@ } } } - .hover\:bg-orange-700 { - &:hover { - @media (hover: hover) { - background-color: var(--color-orange-700); - } - } - } .sm\:grid { @media (width >= 40rem) { display: grid; @@ -860,16 +740,6 @@ 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\)\)\] { @media (width >= 80rem) { grid-template-columns: repeat(auto-fill,minmax(20%,1fr)); @@ -880,41 +750,11 @@ 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\] { @media (prefers-color-scheme: dark) { color: #f9ebeb; } } - .dark\:text-gray-600 { - @media (prefers-color-scheme: dark) { - color: var(--color-gray-600); - } - } } .material-symbols--arrow-forward-rounded { display: inline-block; @@ -978,49 +818,3 @@ inherits: false; 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; -} diff --git a/src/templates/Components/Head.tsx b/src/templates/Components/Head.tsx index 6d233b9..70f8bfd 100644 --- a/src/templates/Components/Head.tsx +++ b/src/templates/Components/Head.tsx @@ -21,14 +21,14 @@ export default function head(props: { + - - + + {props.preload ? props.preload.map((item) => ) : ""} {props.dns ? props.dns.map((item) => ) : ""} - {props.environment == "dev" ? ( ) : ( diff --git a/src/templates/index.tsx b/src/templates/index.tsx index 0d22f8f..f367de7 100644 --- a/src/templates/index.tsx +++ b/src/templates/index.tsx @@ -56,7 +56,7 @@ export default function Index(props: { - + );