mirror of
https://github.com/wah-su/wahs.wah.su.git
synced 2025-04-05 15:54:37 +00:00
add minify css and js when building
This commit is contained in:
parent
6e898e79a0
commit
5c9911a58a
GPG key ID:
858E8EE696525EED
4 changed files with 44 additions and 213 deletions
|
|
@ -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", `<!DOCTYPE html>${html}`);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,14 +21,14 @@ export default function head(props: {
|
|||
<meta property="og:title" content={props.title} />
|
||||
<meta property="og:description" content={props.description} />
|
||||
<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: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}`} />
|
||||
<meta property="og:logo" content={`${props.url}/static/logo-1x.png`} />
|
||||
<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.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" ? (
|
||||
<script src="./static/dev/hotreload.js"></script>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ export default function Index(props: {
|
|||
</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>
|
||||
</html>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue