fix: theme button and use nginx

.editorconfig

@@ -5,7 +5,7 @@ root = true
 
 # Unix-style newlines with a newline ending every file
 [*]
-indent_style = tab
+indent_style = space
 indent_size = 2
 charset = utf-8
 end_of_line = lf

Dockerfile

@@ -18,8 +18,9 @@ ENV NODE_ENV=production
 RUN bun panda codegen
 RUN bun run build
 
-FROM httpd:2.4 AS runtime
+FROM nginx:stable-alpine AS runtime
 
-COPY --from=prerelease /usr/src/app/dist/ /usr/local/apache2/htdocs/
+COPY --from=prerelease nginx.conf /etc/nginx/nginx.conf
+COPY --from=prerelease /usr/src/app/dist/ /usr/share/nginx/html
 
 EXPOSE 80

astro.config.mjs

@@ -1,8 +1,6 @@
-import solidJs from "@astrojs/solid-js";
-import pandacss from "@pandacss/astro";
+import solidjs from "@astrojs/solid-js";
 import { defineConfig } from "astro/config";
 
-// https://astro.build/config
 export default defineConfig({
-	integrations: [solidJs(), pandacss()],
+  integrations: [solidjs({ devtools: true })],
 });

biome.json

@@ -11,7 +11,7 @@
 	},
 	"formatter": {
 		"enabled": true,
-		"indentStyle": "tab"
+		"indentStyle": "space"
 	},
 	"linter": {
 		"enabled": true,

nginx.conf

@@ -0,0 +1,30 @@
+server {
+  listen 80;
+
+  root /usr/share/nginx/html;
+  index index.html;
+
+  error_page 404 /404.html;
+  error_page 404 =404 /404.html;
+
+  location / {
+    try_files $uri $uri/ =404;
+  }
+
+  location = /404.html {
+    internal;
+  }
+
+  location ~ /\. {
+    deny all;
+  }
+
+  location ~ ~$ {
+    deny all;
+  }
+
+  location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+    expires 1y;
+    add_header Cache-Control "public, immutable";
+  }
+}

package.json

@@ -30,6 +30,7 @@
 		"eslint-plugin-solid": "^0.14.5",
 		"eslint-plugin-sonarjs": "^3.0.5",
 		"eslint-plugin-unicorn": "^61.0.2",
+		"postcss": "^8.5.6",
 		"prettier": "^3.6.2",
 		"prettier-plugin-astro": "^0.14.1",
 		"solid-js": "^1.9.9",

panda.config.ts

@@ -1,99 +1,94 @@
 import {
-	defineConfig,
-	defineGlobalStyles,
-	defineSemanticTokens,
-	defineTokens,
+  defineConfig,
+  defineGlobalStyles,
+  defineSemanticTokens,
+  defineTokens,
 } from "@pandacss/dev";
 
 const globalCss = defineGlobalStyles({
-	html: {
-		scrollBehavior: "smooth",
-		color: "text",
-	},
-	body: {
-		backgroundColor: "bg",
-		fontFamily: "Inter",
-	},
-	main: {
-		maxWidth: "fit-content",
-		position: "relative",
-		margin: { base: "2em 15% 0 15%", mdDown: "0" },
-		padding: { base: "50px", mdDown: "20px" },
-		backgroundColor: "secondary",
-		borderRadius: { base: "50px", mdDown: "0px" },
-		boxShadow: "0 0 10px rgba(0, 0, 0, 0.2)",
-	},
-	h1: {
-		marginTop: "20px",
-		marginBottom: "50px",
-		textAlign: "center",
-		fontWeight: 600,
-		fontSize: { base: "2.5em", mdDown: "1.5em" },
-		lineHeight: 1.2,
-		color: "text",
-	},
+  html: {
+    scrollBehavior: "smooth",
+    color: "text",
+  },
+  body: {
+    backgroundColor: "bg",
+    fontFamily: "Inter",
+  },
+  main: {
+    width: { base: "70%", xlDown: "80%" },
+    margin: "50px auto",
+    padding: "50px",
+    backgroundColor: "secondary",
+    borderRadius: "50px",
+    boxShadow: "0 0 10px rgba(0, 0, 0, 0.2)",
+  },
+  h1: {
+    marginTop: "20px",
+    marginBottom: "50px",
+    textAlign: "center",
+    fontWeight: 600,
+    fontSize: { base: "2.5em", mdDown: "1.5em" },
+    lineHeight: 1.2,
+    color: "text",
+  },
 });
 
 export default defineConfig({
-	jsxFramework: "solid",
-	presets: [],
-	preflight: true,
-	include: ["./src/**/*.{ts,tsx,js,jsx,astro}"],
-	outdir: "styled-system",
-	conditions: {
-		light: "[data-color-mode=light] &",
-		dark: "[data-color-mode=dark] &",
-	},
-	theme: {
-		extend: {
-			breakpoints: {
-				sm: "412px",
-				md: "993px",
-			},
-		},
-		tokens: defineTokens({
-			colors: {
-				link: { value: "#00a8e6", description: "Color of URI links" },
-			},
-		}),
-		semanticTokens: defineSemanticTokens({
-			colors: {
-				bg: {
-					value: {
-						DEFAULT: {
-							_light: "#efebe8",
-							_dark: "#2b2d31",
-						},
-					},
-					description: "Global background color",
-				},
-				primary: {
-					value: {
-						DEFAULT: {
-							_light: "#efebe8",
-							_dark: "#2b2d31",
-						},
-					},
-					description: "Primary color theme",
-				},
-				secondary: {
-					value: {
-						_light: "#ffffff",
-						_dark: "#313338",
-					},
-					description: "Secondary color theme",
-				},
-				text: {
-					value: {
-						DEFAULT: {
-							_light: "#302e2d",
-							_dark: "#efebe8",
-						},
-					},
-					description: "Global text color",
-				},
-			},
-		}),
-	},
-	globalCss,
+  jsxFramework: "solid",
+  preflight: true,
+  include: [
+    "./src/**/*.{ts,tsx,js,jsx,astro}",
+    "./pages/**/*.{ts,tsx,js,jsx,astro}",
+  ],
+  outdir: "styled-system",
+  conditions: {
+    light: "[data-color-mode=light] &",
+    dark: "[data-color-mode=dark] &",
+  },
+  theme: {
+    extend: {
+      breakpoints: {
+        sm: "412px",
+        md: "993px",
+      },
+    },
+    tokens: defineTokens({
+      colors: {
+        link: { value: "#00a8e6", description: "Color of URI links" },
+      },
+    }),
+    semanticTokens: defineSemanticTokens({
+      colors: {
+        bg: {
+          value: {
+            base: "#efebe8",
+            _dark: "#2b2d31",
+          },
+          description: "Global background color",
+        },
+        primary: {
+          value: {
+            base: "#efebe8",
+            _dark: "#2b2d31",
+          },
+          description: "Primary color theme",
+        },
+        secondary: {
+          value: {
+            base: "#ffffff",
+            _dark: "#313338",
+          },
+          description: "Secondary color theme",
+        },
+        text: {
+          value: {
+            base: "#302e2d",
+            _dark: "#efebe8",
+          },
+          description: "Global text color",
+        },
+      },
+    }),
+  },
+  globalCss,
 });

postcss.config.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require("@pandacss/dev/postcss")()],
+};

src/components/Article/index.tsx

@@ -3,15 +3,15 @@ import type { ArticleProperties } from "~/contents";
 import { contentStyle, separatorStyle, titleStyle } from "./style.css";
 
 export const Article: VoidComponent<ArticleProperties> = (properties) => {
-	return (
-		<article>
-			<h2 class={titleStyle} id={`${properties.id}`}>
-				Article {properties.id}.
-			</h2>
-			<div class={contentStyle}>{properties.content}</div>
-			<Show when={properties.separator}>
-				<hr class={separatorStyle} />
-			</Show>
-		</article>
-	);
+  return (
+    <article>
+      <h2 class={titleStyle} id={`${properties.id}`}>
+        Article {properties.id}.
+      </h2>
+      <div class={contentStyle}>{properties.content}</div>
+      <Show when={properties.separator}>
+        <hr class={separatorStyle} />
+      </Show>
+    </article>
+  );
 };

src/components/Article/style.css.ts

@@ -1,26 +1,26 @@
 import { css } from "styled-system/css";
 
 export const titleStyle = css({
-	fontSize: "1.3em",
-	fontWeight: 700,
+  fontSize: "1.3em",
+  fontWeight: 700,
 });
 
 export const separatorStyle = css({
-	margin: "15px 0",
-	width: "100%",
-	border: `1px solid token(primary)`,
+  margin: "15px 0",
+  width: "100%",
+  border: `1px solid token(primary)`,
 });
 
 export const contentStyle = css({
-	textAlign: { base: "left", mdDown: "center" },
-	"& > p": {
-		margin: "1em 0",
-		lineHeight: "1.5em",
-	},
-	"& > ul": {
-		textAlign: "left",
-		listStyle: "disc",
-		marginLeft: "1.5em",
-		lineHeight: "1.5em",
-	},
+  textAlign: { base: "left", mdDown: "center" },
+  "& > p": {
+    margin: "1em 0",
+    lineHeight: "1.5em",
+  },
+  "& > ul": {
+    textAlign: "left",
+    listStyle: "disc",
+    marginLeft: "1.5em",
+    lineHeight: "1.5em",
+  },
 });

src/components/ArticleLink/index.tsx

@@ -2,17 +2,17 @@ import type { VoidComponent } from "solid-js";
 import { linkStyle, strongStyle } from "./style.css";
 
 interface ArticleLinkProperties {
-	id: number;
+  id: number;
 }
 
 export const ArticleLink: VoidComponent<ArticleLinkProperties> = (
-	properties,
+  properties,
 ) => {
-	return (
-		<strong class={strongStyle}>
-			<a class={linkStyle} href={`#${properties.id}`}>
-				{` l'article ${properties.id} `}
-			</a>
-		</strong>
-	);
+  return (
+    <strong class={strongStyle}>
+      <a class={linkStyle} href={`#${properties.id}`}>
+        {` l'article ${properties.id} `}
+      </a>
+    </strong>
+  );
 };

src/components/ArticleLink/style.css.ts

@@ -1,10 +1,10 @@
 import { css } from "styled-system/css";
 
 export const strongStyle = css({
-	fontWeight: "700",
+  fontWeight: "700",
 });
 
 export const linkStyle = css({
-	color: "link",
-	textDecoration: "none",
+  color: "link",
+  textDecoration: "none",
 });