feat: dynamically determine game of life width

chore: format astro files

.prettierrc

@@ -1 +1,12 @@
-{}
+{
+  "plugins": ["prettier-plugin-astro"],
+  "bracketSameLine": true,
+  "overrides": [
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
+    }
+  ]
+}

.vscode/settings.json

@@ -1,8 +1,8 @@
 {
-    "eslint.format.enable": true,
-    "prettier.configPath": ".prettierrc",
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "[javascript]": {
-      "editor.defaultFormatter": "esbenp.prettier-vscode"
-    }
+  "eslint.format.enable": true,
+  "prettier.configPath": ".prettierrc",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

package-lock.json

@@ -16,7 +16,8 @@
       },
       "devDependencies": {
         "cypress": "^13.11.0",
-        "prettier": "3.2.5"
+        "prettier": "^3.2.5",
+        "prettier-plugin-astro": "^0.14.0"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -5992,6 +5993,26 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prettier-plugin-astro": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.14.0.tgz",
+      "integrity": "sha512-7jRGJsexaRIyUzTk8uzXlP45cw6DQ5Ci4bTe0xCBCcuO1Fff8jJy9oI+kRCQKSdDFTSAArMSg8GpvzlKBtSaZA==",
+      "devOptional": true,
+      "dependencies": {
+        "@astrojs/compiler": "^1.5.5",
+        "prettier": "^3.0.0",
+        "sass-formatter": "^0.7.6"
+      },
+      "engines": {
+        "node": "^14.15.0 || >=16.0.0"
+      }
+    },
+    "node_modules/prettier-plugin-astro/node_modules/@astrojs/compiler": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-1.8.2.tgz",
+      "integrity": "sha512-o/ObKgtMzl8SlpIdzaxFnt7SATKPxu4oIP/1NL+HDJRzxfJcAkOTAb/ZKMRyULbz4q+1t2/DAebs2Z1QairkZw==",
+      "devOptional": true
+    },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@@ -6796,6 +6817,12 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/s.color": {
+      "version": "0.0.15",
+      "resolved": "https://registry.npmjs.org/s.color/-/s.color-0.0.15.tgz",
+      "integrity": "sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==",
+      "devOptional": true
+    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -6822,6 +6849,15 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "node_modules/sass-formatter": {
+      "version": "0.7.9",
+      "resolved": "https://registry.npmjs.org/sass-formatter/-/sass-formatter-0.7.9.tgz",
+      "integrity": "sha512-CWZ8XiSim+fJVG0cFLStwDvft1VI7uvXdCNJYXhDvowiv+DsbD1nXLiQ4zrE5UBvj5DWZJ93cwN0NX5PMsr1Pw==",
+      "devOptional": true,
+      "dependencies": {
+        "suf-log": "^2.5.3"
+      }
+    },
     "node_modules/section-matter": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
@@ -7245,6 +7281,15 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/suf-log": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/suf-log/-/suf-log-2.5.3.tgz",
+      "integrity": "sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==",
+      "devOptional": true,
+      "dependencies": {
+        "s.color": "0.0.15"
+      }
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -7454,7 +7499,7 @@
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
       "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",

package.json

@@ -19,6 +19,7 @@
   },
   "devDependencies": {
     "cypress": "^13.11.0",
-    "prettier": "3.2.5"
+    "prettier": "^3.2.5",
+    "prettier-plugin-astro": "^0.14.0"
   }
 }

src/components/Comment.astro

@@ -4,8 +4,7 @@
 
 <div class="comment border-gray-400 border border-solid pt-1 pb-6 ml-4">
   <p
-    class="font-semibold pl-3 pr-2 pb-1 border-b border-x-0 border-t-0 border-gray-400 border-solid"
-  >
+    class="font-semibold pl-3 pr-2 pb-1 border-b border-x-0 border-t-0 border-gray-400 border-solid">
     Arafat Candan
   </p>
 

src/components/CommentForm.astro

@@ -26,8 +26,7 @@ const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
   hx-post=`${backendHost}/api/blog/comments`
   hx-target="#comments-container"
   hx-swap="afterbegin"
-  hx-on::after-request="document.getElementById('no-comments-text')?.remove();this.reset()"
->
+  hx-on::after-request="document.getElementById('no-comments-text')?.remove();this.reset()">
   <div class="p-1 flex flex-col flex-end items-end gap-3">
     <textarea
       class="textarea py-2 px-3 w-full box-border"

src/components/EmojiReactionForm.astro

@@ -16,15 +16,13 @@ const backendHost = import.meta.env.PUBLIC_BACKEND_HOST;
 
 <form
   hx-post=`${backendHost}/api/blog/forms/emoji`
-  hx-target="#reaction-buttons"
->
+  hx-target="#reaction-buttons">
   <input type="hidden" name="postId" value=`${entryId}` />
   <div
     id="reaction-buttons"
     hx-get=`${backendHost}/api/blog/forms/emoji?postId=${entryId}`
     hx-trigger="load"
-    hx-swap="innerHTML"
-  >
+    hx-swap="innerHTML">
     <div class="emoji-buttons-container">
       <button name="emojiInput" value="👍" type="submit" class="emoji-button"
         >&nbsp;👍&nbsp;</button

src/components/Header.astro

@@ -25,16 +25,17 @@
   </ul>
 
   <div class="flex flex-col gap-4">
-    <div class="flex flex-row gap-2 items-center md:h-20 h-16">
-      <a href="/" class="no-underline text-inherit"
-        ><h1 class="font-mono md:text-6xl text-5xl -ml-[0.27rem]">Log101</h1></a
-      >
+    <div
+      class="flex flex-row gap-2 items-center md:h-20 h-16"
+      id="title-container">
+      <a href="/" class="no-underline text-inherit -ml-[0.27rem]" id="title">
+        <h1 class="font-mono md:text-6xl text-5xl">Log101</h1>
+      </a>
       <div id="board" class="board"></div>
     </div>
     <div>
       <ul
-        class="flex md:flex-row flex-col md:items-center justify-between list-none p-0 gap-3 nav-links"
-      >
+        class="flex md:flex-row flex-col md:items-center justify-between list-none p-0 gap-3 nav-links">
         <li>
           <a href="/category/fikir">Fikir</a>
         </li>
@@ -55,13 +56,19 @@
 
 <script>
   import ConwaySimulator from "../scripts/conway-simulator";
-  let rows = 8;
-  let cols = 24;
+  const title = document.getElementById("title");
+  const titleContainer = document.getElementById("title-container");
+
+  const titleWidth = title?.offsetWidth ?? 194;
+  const titleContainerWidth = titleContainer?.offsetWidth ?? 750;
+
   let pixelSize = 6;
+  let rows = 8;
+  let cols = (titleContainerWidth - titleWidth) / pixelSize;
   let delay = 250;
 
   if (screen.availWidth > 768) {
-    cols = 46;
+    cols = 60;
     pixelSize = 8;
   }
 

src/components/Post.astro

@@ -107,8 +107,7 @@ import calendar from "@/images/calendar.svg";
         {post.body.length > 500 && (
           <a
             class="text-inherit text-sm"
-            href={`/category/${post.data.category}/${post.slug}`}
-          >
+            href={`/category/${post.data.category}/${post.slug}`}>
             Devamını Oku
           </a>
         )}

src/layouts/Layout.astro

@@ -21,8 +21,7 @@ import "../styles/main.css";
   </head>
   <body class="flex justify-center font-sans">
     <div
-      class="md:max-w-[750px] w-full flex flex-col gap-8 md:gap-6 my-6 md:mx-0 mx-4 overflow-hidden"
-    >
+      class="md:max-w-[750px] w-full flex flex-col gap-8 md:gap-6 my-6 md:mx-0 mx-4 overflow-hidden">
       <slot />
     </div>
   </body>

src/pages/category/[category]/[page].astro

@@ -12,7 +12,7 @@ export async function getStaticPaths({ paginate }: { paginate: any }) {
 
   return CATEGORIES.flatMap((category) => {
     const filteredPosts = blogEntries.filter(
-      (post) => post.data.category == category
+      (post) => post.data.category == category,
     );
     return paginate(filteredPosts, {
       params: { category },
@@ -62,8 +62,7 @@ const pages = Array.from({ length: page.lastPage }, (_, i) => i + 1);
                 return (
                   <a
                     href={`${page.url.current.slice(0, -1)}${pageNumber}`}
-                    class="text-inherit"
-                  >
+                    class="text-inherit">
                     {pageNumber}
                   </a>
                 );

src/pages/category/[category]/posts/[slug]/index.astro

@@ -36,8 +36,7 @@ export async function getStaticPaths() {
         hx-trigger="load"
         hx-swap="innerHTML"
         id="comments-container"
-        class="flex flex-col gap-6"
-      >
+        class="flex flex-col gap-6">
         <p id="no-comments-text">Henüz yorum yok!</p>
       </div>
       <HorizontalLine />

src/scripts/conway-simulator.js

@@ -1,3 +1,5 @@
+// https://github.com/Tebs-Lab/conways-game-of-life
+
 import { heavyWeightSpaceshipCell } from "./utils";
 
 /*