diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml new file mode 100644 index 0000000..d3db58c --- /dev/null +++ b/.github/workflows/build.yaml @@ -0,0 +1,60 @@ +name: Deploy to Pages + +on: + push: + branches: + - master + +permissions: + contents: read + pages: write + id-token: write + +# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. +# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. +concurrency: + group: "pages" + cancel-in-progress: false + +defaults: + run: + shell: bash + +jobs: + # Build job + build: + runs-on: ubuntu-latest + environment: "env" + steps: + - name: Install bun + uses: oven-sh/setup-bun@v2 + with: + bun-version: latest + - name: Checkout + uses: actions/checkout@v4 + with: + submodules: recursive + fetch-depth: 0 + - name: Setup Pages + id: pages + uses: actions/configure-pages@v4 + - name: Install bun dependencies + run: "bun install" + - name: Build website + run: "bun run gen" + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: ./out/ + + # Deployment job + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + needs: build + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 \ No newline at end of file diff --git a/src/build.tsx b/src/build.tsx index c5d0535..9f02b0c 100644 --- a/src/build.tsx +++ b/src/build.tsx @@ -1,6 +1,7 @@ import { Log } from "./utils"; import { renderToString } from "react-dom/server"; import fs from "fs"; +import exec from "child_process"; import Base from "./templates/Base"; import Title from "./templates/Title"; import Bento from "./templates/Bento"; @@ -26,5 +27,40 @@ const html = renderToString( fs.cpSync("src/static", "out/static", { recursive: true }); if (environment == "dev") { fs.cpSync("src/static_dev", "out/static/js", { recursive: true }); +} else { + log.info("Minifying resources..."); + exec.exec( + "bun run tailwindcss -i src/input.css -o out/static/css/tailwind.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 files = fs.readdirSync("src/static/js"); + const minify = files.filter((file) => file.endsWith(".js")); + + minify.forEach((file) => { + const ext = file.split(".")[file.split(".").length - 1]; + const name = file.split(".")[0]; + const orFile = fs.readFileSync(`src/static/js/${file}`, { + encoding: "utf-8", + }); + const minFile = transpiler.transformSync(orFile); + fs.writeFileSync(`out/static/js/${name}.${ext}`, minFile); + }); } fs.writeFileSync("out/index.html", `${html}`); diff --git a/src/static/css/tailwind.css b/src/static/css/tailwind.css index bcd8d5d..4df0591 100644 --- a/src/static/css/tailwind.css +++ b/src/static/css/tailwind.css @@ -518,18 +518,12 @@ } } @layer utilities { - .collapse { - visibility: collapse; - } .invisible { visibility: hidden; } .absolute { position: absolute; } - .fixed { - position: fixed; - } .relative { position: relative; } @@ -626,24 +620,12 @@ .inline { display: inline; } - .inline-flex { - display: inline-flex; - } - .list-item { - display: list-item; - } - .table { - display: table; - } .aspect-square { aspect-ratio: 1 / 1; } .aspect-video { aspect-ratio: var(--aspect-video); } - .h-2 { - height: calc(var(--spacing) * 2); - } .h-4 { height: calc(var(--spacing) * 4); } @@ -668,18 +650,12 @@ .min-h-\[438px\] { min-height: 438px; } - .w-2 { - width: calc(var(--spacing) * 2); - } .w-4 { width: calc(var(--spacing) * 4); } .w-6 { width: calc(var(--spacing) * 6); } - .w-8 { - width: calc(var(--spacing) * 8); - } .w-\[114px\] { width: 114px; } @@ -698,15 +674,9 @@ .max-w-\[1210px\] { max-width: 1210px; } - .flex-shrink { - flex-shrink: 1; - } .flex-shrink-0 { flex-shrink: 0; } - .border-collapse { - border-collapse: collapse; - } .origin-center { transform-origin: center; } @@ -734,15 +704,9 @@ --tw-scale-z: 150%; scale: var(--tw-scale-x) var(--tw-scale-y); } - .transform { - transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); - } .animate-ping { animation: var(--animate-ping); } - .resize { - resize: both; - } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } @@ -755,30 +719,9 @@ .grid-rows-\[repeat\(4\,minmax\(0\,136px\)\)\] { grid-template-rows: repeat(4,minmax(0,136px)); } - .grid-rows-\[repeat\(7\,144px\)\] { - grid-template-rows: repeat(7,144px); - } - .grid-rows-\[repeat\(7\,164px\)\] { - grid-template-rows: repeat(7,164px); - } - .grid-rows-\[repeat\(7\,164spx\)\] { - grid-template-rows: repeat(7,164spx); - } - .grid-rows-\[repeat\(7\,180px\)\] { - grid-template-rows: repeat(7,180px); - } - .grid-rows-\[repeat\(7\,190px\)\] { - grid-template-rows: repeat(7,190px); - } - .grid-rows-\[repeat\(7\,200px\)\] { - grid-template-rows: repeat(7,200px); - } .grid-rows-\[repeat\(7\,210px\)\] { grid-template-rows: repeat(7,210px); } - .grid-rows-\[repeat\(7\,288px\)\] { - grid-template-rows: repeat(7,288px); - } .flex-col { flex-direction: column; } @@ -803,9 +746,6 @@ .justify-end { justify-content: flex-end; } - .gap-0 { - gap: calc(var(--spacing) * 0); - } .gap-1 { gap: calc(var(--spacing) * 1); } @@ -901,10 +841,6 @@ font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); } - .text-sm { - font-size: var(--text-sm); - line-height: var(--tw-leading, var(--text-sm--line-height)); - } .text-xs { font-size: var(--text-xs); line-height: var(--tw-leading, var(--text-xs--line-height)); @@ -935,20 +871,6 @@ .text-white { color: var(--color-white); } - .underline { - text-decoration-line: underline; - } - .outline { - 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,); - } - .backdrop-filter { - -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); - } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -998,26 +920,11 @@ margin-left: calc(var(--spacing) * 0); } } - .sm\:ml-1 { - @media (width >= 40rem) { - margin-left: calc(var(--spacing) * 1); - } - } .sm\:inline { @media (width >= 40rem) { display: inline; } } - .sm\:h-6 { - @media (width >= 40rem) { - height: calc(var(--spacing) * 6); - } - } - .sm\:w-6 { - @media (width >= 40rem) { - width: calc(var(--spacing) * 6); - } - } .sm\:flex-shrink-1 { @media (width >= 40rem) { flex-shrink: 1; @@ -1038,11 +945,6 @@ gap: calc(var(--spacing) * 2); } } - .sm\:gap-3 { - @media (width >= 40rem) { - gap: calc(var(--spacing) * 3); - } - } .sm\:gap-8 { @media (width >= 40rem) { gap: calc(var(--spacing) * 8); @@ -1053,11 +955,6 @@ padding-block: calc(var(--spacing) * 14); } } - .sm\:py-\[200px\] { - @media (width >= 40rem) { - padding-block: 200px; - } - } .sm\:text-base { @media (width >= 40rem) { font-size: var(--text-base); @@ -1069,16 +966,6 @@ margin-block: calc(var(--spacing) * -8); } } - .md\:grid { - @media (width >= 48rem) { - display: grid; - } - } - .md\:hidden { - @media (width >= 48rem) { - display: none; - } - } .md\:scale-85 { @media (width >= 48rem) { --tw-scale-x: 85%; @@ -1247,31 +1134,6 @@ body { inherits: false; initial-value: 1; } -@property --tw-rotate-x { - syntax: "*"; - inherits: false; - initial-value: rotateX(0); -} -@property --tw-rotate-y { - syntax: "*"; - inherits: false; - initial-value: rotateY(0); -} -@property --tw-rotate-z { - syntax: "*"; - inherits: false; - initial-value: rotateZ(0); -} -@property --tw-skew-x { - syntax: "*"; - inherits: false; - initial-value: skewX(0); -} -@property --tw-skew-y { - syntax: "*"; - inherits: false; - initial-value: skewY(0); -} @property --tw-border-style { syntax: "*"; inherits: false; @@ -1327,83 +1189,6 @@ body { syntax: "*"; inherits: false; } -@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; -} -@property --tw-backdrop-blur { - syntax: "*"; - inherits: false; -} -@property --tw-backdrop-brightness { - syntax: "*"; - inherits: false; -} -@property --tw-backdrop-contrast { - syntax: "*"; - inherits: false; -} -@property --tw-backdrop-grayscale { - syntax: "*"; - inherits: false; -} -@property --tw-backdrop-hue-rotate { - syntax: "*"; - inherits: false; -} -@property --tw-backdrop-invert { - syntax: "*"; - inherits: false; -} -@property --tw-backdrop-opacity { - syntax: "*"; - inherits: false; -} -@property --tw-backdrop-saturate { - syntax: "*"; - inherits: false; -} -@property --tw-backdrop-sepia { - syntax: "*"; - inherits: false; -} @property --tw-duration { syntax: "*"; inherits: false;