From f6ef7c84472c9efc16f2955ccd991d62b0dec0c6 Mon Sep 17 00:00:00 2001 From: lucas-cosson Date: Sat, 11 Oct 2025 11:30:09 +0200 Subject: [PATCH 1/3] ci: use apapche in docker image --- Dockerfile | 9 +++----- bun.lock | 42 +++++++++++++++++----------------- src/layouts/index-layout.astro | 3 --- tsconfig.json | 2 +- 4 files changed, 25 insertions(+), 31 deletions(-) diff --git a/Dockerfile b/Dockerfile index c9fe81e..1066bb8 100644 --- a/Dockerfile +++ b/Dockerfile @@ -18,9 +18,6 @@ ENV NODE_ENV=production RUN bun panda codegen RUN bun run build -FROM oven/bun:1-alpine AS release -COPY --from=prerelease /usr/src/app/dist/ . - -USER bun -EXPOSE 3000/tcp -ENTRYPOINT [ "bun", "run", "index.html" ] +FROM httpd:2.4 AS runtime +COPY --from=prerelease /usr/src/app/dist/ /usr/local/apache2/htdocs/ +EXPOSE 80 diff --git a/bun.lock b/bun.lock index 96bc8ba..58efbcb 100644 --- a/bun.lock +++ b/bun.lock @@ -4,27 +4,27 @@ "": { "name": "aram-constitution", "devDependencies": { - "@astrojs/check": "^0.9.4", - "@astrojs/solid-js": "^5.1.1", - "@biomejs/biome": "^2.2.5", - "@commitlint/cli": "^20.1.0", - "@commitlint/config-conventional": "^20.0.0", - "@pandacss/astro": "^0.25.0", - "@pandacss/dev": "^1.4.1", - "astro": "^5.14.4", - "eslint": "^9.37.0", - "eslint-config-prettier": "^10.1.8", - "eslint-define-config": "^2.1.0", - "eslint-plugin-astro": "^1.3.1", - "eslint-plugin-prettier": "^5.5.4", - "eslint-plugin-solid": "^0.14.5", - "eslint-plugin-sonarjs": "^3.0.5", - "eslint-plugin-unicorn": "^61.0.2", - "prettier": "^3.6.2", - "prettier-plugin-astro": "^0.14.1", - "solid-js": "^1.9.9", - "typescript": "^5.9.3", - "typescript-eslint": "^8.46.0", + "@astrojs/check": "latest", + "@astrojs/solid-js": "latest", + "@biomejs/biome": "latest", + "@commitlint/cli": "latest", + "@commitlint/config-conventional": "latest", + "@pandacss/astro": "latest", + "@pandacss/dev": "latest", + "astro": "latest", + "eslint": "latest", + "eslint-config-prettier": "latest", + "eslint-define-config": "latest", + "eslint-plugin-astro": "latest", + "eslint-plugin-prettier": "latest", + "eslint-plugin-solid": "latest", + "eslint-plugin-sonarjs": "latest", + "eslint-plugin-unicorn": "latest", + "prettier": "latest", + "prettier-plugin-astro": "latest", + "solid-js": "latest", + "typescript": "latest", + "typescript-eslint": "latest", }, }, }, diff --git a/src/layouts/index-layout.astro b/src/layouts/index-layout.astro index faf2e2a..be63733 100644 --- a/src/layouts/index-layout.astro +++ b/src/layouts/index-layout.astro @@ -1,6 +1,4 @@ --- -import { ClientRouter } from "astro:transitions"; - interface Props { title: string; } @@ -48,7 +46,6 @@ const { title } = Astro.props; /> {title} -
diff --git a/tsconfig.json b/tsconfig.json index d30abc2..37294dc 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,5 +10,5 @@ "~/*": ["src/*"] } }, - "include": ["src"] + "include": ["src", "styled-system"] } From 8ab539ad5716e6b36835afbab7b0582efeb8209b Mon Sep 17 00:00:00 2001 From: lucas-cosson Date: Sat, 11 Oct 2025 20:18:32 +0200 Subject: [PATCH 2/3] fix: css issue on theme button --- Dockerfile | 9 +- bun.lock | 42 +++---- panda.config.ts | 10 +- public/404/404.css | 160 ++++++++++++++++++++++++ public/404/404.js | 57 +++++++++ public/404/images/astronaut.svg | 1 + public/404/images/planet.svg | 1 + src/components/ThemeButton/style.css.ts | 3 +- src/layouts/404-layout.astro | 39 ++++++ src/pages/404.astro | 6 + 10 files changed, 299 insertions(+), 29 deletions(-) create mode 100644 public/404/404.css create mode 100644 public/404/404.js create mode 100644 public/404/images/astronaut.svg create mode 100644 public/404/images/planet.svg create mode 100644 src/layouts/404-layout.astro create mode 100644 src/pages/404.astro diff --git a/Dockerfile b/Dockerfile index 1066bb8..da99d26 100644 --- a/Dockerfile +++ b/Dockerfile @@ -18,6 +18,9 @@ ENV NODE_ENV=production RUN bun panda codegen RUN bun run build -FROM httpd:2.4 AS runtime -COPY --from=prerelease /usr/src/app/dist/ /usr/local/apache2/htdocs/ -EXPOSE 80 +FROM oven/bun:1-alpine AS runtime +COPY --from=prerelease /usr/src/app/dist/ . +COPY --from=install /temp/prod/node_modules node_modules +COPY --from=prerelease /usr/src/app/package.json . +EXPOSE 3000 +CMD ["bun", "run", "preview"] diff --git a/bun.lock b/bun.lock index 58efbcb..96bc8ba 100644 --- a/bun.lock +++ b/bun.lock @@ -4,27 +4,27 @@ "": { "name": "aram-constitution", "devDependencies": { - "@astrojs/check": "latest", - "@astrojs/solid-js": "latest", - "@biomejs/biome": "latest", - "@commitlint/cli": "latest", - "@commitlint/config-conventional": "latest", - "@pandacss/astro": "latest", - "@pandacss/dev": "latest", - "astro": "latest", - "eslint": "latest", - "eslint-config-prettier": "latest", - "eslint-define-config": "latest", - "eslint-plugin-astro": "latest", - "eslint-plugin-prettier": "latest", - "eslint-plugin-solid": "latest", - "eslint-plugin-sonarjs": "latest", - "eslint-plugin-unicorn": "latest", - "prettier": "latest", - "prettier-plugin-astro": "latest", - "solid-js": "latest", - "typescript": "latest", - "typescript-eslint": "latest", + "@astrojs/check": "^0.9.4", + "@astrojs/solid-js": "^5.1.1", + "@biomejs/biome": "^2.2.5", + "@commitlint/cli": "^20.1.0", + "@commitlint/config-conventional": "^20.0.0", + "@pandacss/astro": "^0.25.0", + "@pandacss/dev": "^1.4.1", + "astro": "^5.14.4", + "eslint": "^9.37.0", + "eslint-config-prettier": "^10.1.8", + "eslint-define-config": "^2.1.0", + "eslint-plugin-astro": "^1.3.1", + "eslint-plugin-prettier": "^5.5.4", + "eslint-plugin-solid": "^0.14.5", + "eslint-plugin-sonarjs": "^3.0.5", + "eslint-plugin-unicorn": "^61.0.2", + "prettier": "^3.6.2", + "prettier-plugin-astro": "^0.14.1", + "solid-js": "^1.9.9", + "typescript": "^5.9.3", + "typescript-eslint": "^8.46.0", }, }, }, diff --git a/panda.config.ts b/panda.config.ts index e61aa8a..f7d2d02 100644 --- a/panda.config.ts +++ b/panda.config.ts @@ -15,11 +15,12 @@ const globalCss = defineGlobalStyles({ fontFamily: "Inter", }, main: { - width: { base: "70%", xlDown: "80%" }, - margin: "50px auto", - padding: "50px", + maxWidth: "fit-content", + position: "relative", + margin: { base: "2em 15% 0 15%", mdDown: "0" }, + padding: { base: "50px", mdDown: "20px" }, backgroundColor: "secondary", - borderRadius: "50px", + borderRadius: { base: "50px", mdDown: "0px" }, boxShadow: "0 0 10px rgba(0, 0, 0, 0.2)", }, h1: { @@ -35,6 +36,7 @@ const globalCss = defineGlobalStyles({ export default defineConfig({ jsxFramework: "solid", + presets: [], preflight: true, include: ["./src/**/*.{ts,tsx,js,jsx,astro}"], outdir: "styled-system", diff --git a/public/404/404.css b/public/404/404.css new file mode 100644 index 0000000..961c8b1 --- /dev/null +++ b/public/404/404.css @@ -0,0 +1,160 @@ +@import url("https://fonts.googleapis.com/css?family=Dosis:300,400,700,800"); + +/** Styles for the 403 Page **/ + +.particle-error, +.permission_denied, +#tsparticles { + width: 100%; + height: 100%; + margin: 0px !important; +} + +#tsparticles { + position: fixed !important; + opacity: 0.23; +} + +.permission_denied { + background: #24344c !important; +} + +.permission_denied a { + text-decoration: none; +} + +.denied__wrapper { + max-width: 390px; + width: 100%; + height: 390px; + display: block; + margin: 0 auto; + position: relative; + margin-top: 8vh; +} + +.permission_denied h1 { + text-align: center; + color: #fff; + font-family: "Dosis", sans-serif; + font-size: 100px; + margin-bottom: 0px; + font-weight: 800; +} + +.permission_denied h3 { + text-align: center; + color: #fff; + font-size: 19px; + line-height: 23px; + max-width: 330px; + margin: 0px auto 30px auto; + font-family: "Dosis", sans-serif; + font-weight: 400; +} + +.permission_denied h3 span { + position: relative; + width: 65px; + display: inline-block; +} + +.permission_denied h3 span:after { + content: ""; + border-bottom: 3px solid #ffbb39; + position: absolute; + left: 0; + top: 43%; + width: 100%; +} + +.denied__link { + background: none; + color: #fff; + padding: 12px 0px 10px 0px; + border: 1px solid #fff; + outline: none; + border-radius: 7px; + width: 150px; + font-size: 15px; + text-align: center; + margin: 0 auto; + vertical-align: middle; + display: block; + margin-bottom: 40px; + margin-top: 25px; + font-family: "Dosis", sans-serif; + font-weight: 400; +} + +.denied__link:hover { + color: #ffbb39; + border-color: #ffbb39; + cursor: pointer; + opacity: 1; +} + +.permission_denied .stars { + animation: sparkle 1.6s infinite ease-in-out alternate; +} + +@keyframes sparkle { + 0% { + opacity: 1; + } + 100% { + opacity: 0.3; + } +} + +#astronaut { + width: 43px; + position: absolute; + right: 20px; + top: 210px; + animation: spin 4.5s infinite linear; +} + +@keyframes spin { + 0% { + transform: rotateZ(0deg); + } + 100% { + transform: rotateZ(360deg); + } +} + +@media (max-width: 600px) { + .permission_denied h1 { + font-size: 75px; + } + .permission_denied h3 { + font-size: 16px; + width: 200px; + margin: 0 auto; + line-height: 23px; + } + .permission_denied h3 span { + width: 60px; + } + #astronaut { + width: 35px; + right: 40px; + top: 170px; + } +} + +.saturn, +.saturn-2, +.hover { + animation: hover 2s infinite ease-in-out alternate; +} + +@keyframes hover { + 0% { + transform: translateY(3px); + } + 100% { + transform: translateY(-3px); + } +} diff --git a/public/404/404.js b/public/404/404.js new file mode 100644 index 0000000..6d333f8 --- /dev/null +++ b/public/404/404.js @@ -0,0 +1,57 @@ +const particles = { + fpsLimit: 60, + particles: { + number: { + value: 160, + density: { + enable: true, + area: 800, + }, + }, + color: { + value: "#ffffff", + }, + shape: { + type: "circle", + }, + opacity: { + value: 1, + random: { + enable: true, + minimumValue: 0.1, + }, + animation: { + enable: true, + speed: 1, + minimumValue: 0, + sync: false, + }, + }, + size: { + value: 3, + random: { + enable: true, + minimumValue: 1, + }, + }, + move: { + enable: true, + speed: 0.17, + direction: "none", + random: true, + straight: false, + outModes: { + default: "out", + }, + }, + }, + interactivity: { + detectsOn: "canvas", + events: { + resize: false, + }, + }, + detectRetina: true, +}; + +tsParticles.load("tsparticles", particles); diff --git a/public/404/images/astronaut.svg b/public/404/images/astronaut.svg new file mode 100644 index 0000000..b66b809 --- /dev/null +++ b/public/404/images/astronaut.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/404/images/planet.svg b/public/404/images/planet.svg new file mode 100644 index 0000000..0a326b0 --- /dev/null +++ b/public/404/images/planet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/ThemeButton/style.css.ts b/src/components/ThemeButton/style.css.ts index 8745ee6..5ad9b7d 100644 --- a/src/components/ThemeButton/style.css.ts +++ b/src/components/ThemeButton/style.css.ts @@ -13,6 +13,7 @@ export const wrapperStyle = css({ export const inputStyle = css({ appearance: "none", + WebkitAppearance: "none", width: { base: "100px", mdDown: "56px" }, height: "50px", backgroundColor: "secondary", @@ -26,7 +27,7 @@ export const inputStyle = css({ _before: { content: '""', position: "absolute", - width: { base: "50px", mdDown: "28" }, + width: "50px", height: "50px", left: 0, top: "50%", diff --git a/src/layouts/404-layout.astro b/src/layouts/404-layout.astro new file mode 100644 index 0000000..df07532 --- /dev/null +++ b/src/layouts/404-layout.astro @@ -0,0 +1,39 @@ +--- +interface Props { + title: string; +} + +const { title } = Astro.props; +--- + + + + + + + + + + {title} + + + +
+
+

404

+

+ LOST IN SPACE App-Name? Hmm, looks like that page doesn't + exist. +

+ + + +
+ + + + + diff --git a/src/pages/404.astro b/src/pages/404.astro new file mode 100644 index 0000000..6eb6fbe --- /dev/null +++ b/src/pages/404.astro @@ -0,0 +1,6 @@ +--- +import ErrorLayout from "~/layouts/404-layout.astro"; +--- + + + From 664c931e0e31ed44b0755a741c62dab1629e68e0 Mon Sep 17 00:00:00 2001 From: lucas-cosson Date: Sat, 11 Oct 2025 20:52:02 +0200 Subject: [PATCH 3/3] feat: do not use astro preview --- Dockerfile | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/Dockerfile b/Dockerfile index da99d26..7b1b124 100644 --- a/Dockerfile +++ b/Dockerfile @@ -18,9 +18,8 @@ ENV NODE_ENV=production RUN bun panda codegen RUN bun run build -FROM oven/bun:1-alpine AS runtime -COPY --from=prerelease /usr/src/app/dist/ . -COPY --from=install /temp/prod/node_modules node_modules -COPY --from=prerelease /usr/src/app/package.json . -EXPOSE 3000 -CMD ["bun", "run", "preview"] +FROM httpd:2.4 AS runtime + +COPY --from=prerelease /usr/src/app/dist/ /usr/local/apache2/htdocs/ + +EXPOSE 80