got astro to working. TODO: migrate

Author: aster-void

.devcontainer/devcontainer.json

@@ -1,11 +1,12 @@
 // https://github.com/devcontainers/templates/tree/main/src/javascript-node
+// TODO: I don't use devcontainer, someone check if this works
 {
-  "name": "Node.js",
-  "image": "mcr.microsoft.com/devcontainers/javascript-node:1-20-bullseye",
-  "forwardPorts": [8000],
-  "updateContentCommand": "npm ci",
-  "postAttachCommand": "npm run develop",
-  "portsAttributes": { "8000": { "onAutoForward": "openPreview" } },
+  "name": "ut.code(); Website",
+  "image": "ghcr.io/nhaef/devcontainer-bun:latest",
+  "forwardPorts": [4321],
+  "updateContentCommand": "bun i --frozen-lockfile",
+  "postAttachCommand": "bun dev",
+  "portsAttributes": { "4321": { "onAutoForward": "openPreview" } },
   "customizations": {
     "vscode": {
       "extensions": ["dbaeumer.vscode-eslint", "apollographql.vscode-apollo"]

.envrc

@@ -1 +1 @@
-use nix
+use flake || use nix || true

.gitignore

@@ -1,9 +1,9 @@
 /node_modules/
 
 # artifact
-/.cache/
-/public
+/.astro/
 src/gatsby-types.d.ts
+dist
 
 # editor
 .DS_Store

.helix/languages.toml

@@ -0,0 +1,3 @@
+[[language]]
+name = "jsonc"
+file-types = ["jsonc", { glob = "package.json" }]

.prettierrc

@@ -0,0 +1,6 @@
+plugins:
+  - prettier-plugin-astro
+overrides:
+  - files: '*.astro'
+    options:
+      parser: 'astro'

README.md

@@ -7,27 +7,25 @@
 
 ## 環境構築 (手動)
 
-- (必須) Node.js v18
-- (推奨) VSCode
-  - [ESLint 拡張機能](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-  - [Apollo 拡張機能](https://marketplace.visualstudio.com/items?itemName=apollographql.vscode-apollo)
+- (必須) Bun >= v1.1.39
+- 任意のエディタ https://docs.astro.build/en/editor-setup/
 
 ```shell
-npm ci
+bun install --frozen-lockfile
 ```
 
 ## 開発
 
 ```shell
-npm start
+bun dev
 ```
 
-<http://localhost:8000/> で開発用サーバーが起動します。
+<http://localhost:4321/> で開発用サーバーが起動します。
 
 ## ビルド
 
 ```shell
-npm run build
+bun run build
 ```
 
 ## ディレクトリ構造

src/components/ActionButton.tsx _src/components/ActionButton.tsxsrc/components/ActionButton.tsx renamed to _src/components/ActionButton.tsx

@@ -21,7 +21,7 @@ export default function ActionButton({
       className={clsx(
         "flex items-center w-max px-6 py-3 gap-4 rounded-full bg-white text-black font-bold hover:brightness-95",
         variant === "light" && "border border-black",
-        className
+        className,
       )}
     >
       <div>{children}</div>

src/components/ActivityPageTemplate.tsx _src/components/ActivityPageTemplate.tsxsrc/components/ActivityPageTemplate.tsx renamed to _src/components/ActivityPageTemplate.tsx

@@ -64,7 +64,7 @@ function Section({
             {
               left: "lg:ml-auto lg:rounded-l-2xl",
               right: "lg:rounded-r-2xl",
-            }[edge]
+            }[edge],
           )}
         >
           {renderImage("w-full h-full")}

src/components/ArticleList.tsx _src/components/ArticleList.tsxsrc/components/ArticleList.tsx renamed to _src/components/ArticleList.tsx

@@ -20,7 +20,7 @@ export default function ArticleList({
       className={clsx(
         "grid grid-flow-dense md:grid-cols-2 gap-9",
         variant === "normal" && "lg:grid-cols-3 xl:grid-cols-4",
-        className
+        className,
       )}
     >
       {articles.map((article, i) => {
@@ -47,13 +47,13 @@ export default function ArticleList({
               to={`/articles/${article.frontmatter?.slug}/`}
               className={clsx(
                 "block hover:opacity-80",
-                additionalProps.cellClassName
+                additionalProps.cellClassName,
               )}
             >
               <div
                 className={clsx(
                   "w-full h-48 object-cover rounded-xl overflow-clip isolate",
-                  additionalProps.imageClassName
+                  additionalProps.imageClassName,
                 )}
               >
                 {additionalProps.imageData ? (
@@ -74,9 +74,9 @@ export default function ArticleList({
                 <time className="block text-gray-500 text-sm">
                   {format(
                     new Date(
-                      nullthrows(article.frontmatter?.date, "日付が未設定")
+                      nullthrows(article.frontmatter?.date, "日付が未設定"),
                     ),
-                    "yyyy/MM/dd HH:mm"
+                    "yyyy/MM/dd HH:mm",
                   )}
                 </time>
                 <h3 className="text-lg font-bold">