more style changes

website/assets/style.css

@@ -1,5 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noto+Emoji:wght@300..700&display=swap");
 
+
 body {
   font-family: "Inter", sans-serif;
   font-optical-sizing: auto;
@@ -9,48 +10,28 @@ body {
   scrollbar-width: thin;
 }
 
+a {
+  color: white;
+}
+
 .order {
   display: grid;
   grid-template-areas:
     "one   two"
     "one    four"
-    "three   blog";
+    "three   five";
   grid-gap: 5px;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: repeat(25vh, 6);
 }
-@media only screen and (max-width: 600px) {
-  .order {
-    grid-template-areas:
-      "one  "
-      "four "
-      "two  "
-      "blog "
-      "blog "
-      "three";
-    grid-template-columns: 1fr;
-  }
-  body {
-    scrollbar-width: auto !important;
 
-  }
-}
 .emoji {
   font-family: "Noto Emoji", sans-serif;
   font-optical-sizing: auto;
   font-style: normal;
   font-variation-settings: "slnt" 0;
 }
-.paper > h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-h6s {
-  margin: 0;
-  padding: 0;
-}
+
 .paper {
   color: white;
   background-color: #000000de;
@@ -60,8 +41,27 @@ h6s {
   word-wrap: break-word;
   overflow: auto;
 }
-.blog {
-  grid-area: blog;
+
+
+.e-mail {
+  font-size: small;
+}
+
+/* https://danmarshall.github.io/google-font-to-svg-path/ */
+/* https://yoksel.github.io/url-encoder/ */
+.repeating-bg {
+  background-image: url("data:image/svg+xml,%3Csvg width='99.612' height='99.612' viewBox='0 0 99.612 99.612' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='svgGroup' stroke-linecap='round' fill-rule='evenodd' font-size='9pt' stroke='%23000' stroke-width='0.25mm' fill='%23000' style='stroke:%23000;stroke-width:0.25mm;fill:%23000'%3E%3Cpath d='M 30.47 95.753 A 48.715 48.715 0 0 0 49.806 99.611 Q 60.109 99.611 69.142 95.729 Q 78.175 91.847 85.011 85.011 Q 91.847 78.175 95.729 69.142 Q 99.611 60.109 99.611 49.806 Q 99.611 39.503 95.729 30.47 Q 91.847 21.437 85.011 14.601 Q 78.175 7.765 69.142 3.883 Q 60.109 0.001 49.806 0.001 A 48.715 48.715 0 0 0 30.47 3.859 Q 21.437 7.716 14.576 14.576 Q 7.716 21.437 3.859 30.445 A 46.98 46.98 0 0 0 3.169 32.146 A 48.984 48.984 0 0 0 0.001 49.806 A 48.715 48.715 0 0 0 3.859 69.142 Q 7.716 78.175 14.576 85.035 Q 21.437 91.896 30.47 95.753 Z M 49.806 97.657 A 46.875 46.875 0 0 0 68.409 93.946 Q 77.101 90.236 83.668 83.668 Q 90.236 77.101 93.946 68.409 A 46.875 46.875 0 0 0 97.657 49.806 A 46.875 46.875 0 0 0 93.946 31.202 Q 90.236 22.511 83.668 15.944 Q 77.101 9.376 68.409 5.665 A 46.875 46.875 0 0 0 49.806 1.954 A 46.875 46.875 0 0 0 31.202 5.665 Q 22.511 9.376 15.944 15.944 Q 9.376 22.511 5.665 31.202 A 46.875 46.875 0 0 0 1.954 49.806 A 46.875 46.875 0 0 0 5.665 68.409 Q 9.376 77.101 15.944 83.668 Q 22.511 90.236 31.202 93.946 A 46.875 46.875 0 0 0 49.806 97.657 Z M 25.636 75.441 L 23.976 74.464 Q 26.271 70.314 30.299 67.213 Q 34.327 64.112 39.381 62.355 A 31.511 31.511 0 0 1 49.806 60.597 A 31.511 31.511 0 0 1 60.231 62.355 A 31.668 31.668 0 0 1 69.313 67.237 A 24.816 24.816 0 0 1 74.121 72.115 A 22.347 22.347 0 0 1 75.636 74.464 L 73.976 75.441 A 21.687 21.687 0 0 0 69.296 69.752 A 25.564 25.564 0 0 0 68.043 68.727 A 29.994 29.994 0 0 0 59.547 64.186 Q 54.835 62.55 49.806 62.55 Q 44.777 62.55 40.04 64.186 A 30.049 30.049 0 0 0 32.025 68.342 A 28.374 28.374 0 0 0 31.544 68.702 A 22.453 22.453 0 0 0 26.811 73.573 A 20.69 20.69 0 0 0 25.636 75.441 Z M 29.355 43.927 A 4.755 4.755 0 0 0 32.618 45.216 Q 34.913 45.216 36.549 43.263 A 6.833 6.833 0 0 0 37.75 41.187 A 7.624 7.624 0 0 0 38.185 38.575 A 8.876 8.876 0 0 0 38.177 38.195 A 6.983 6.983 0 0 0 36.549 33.888 A 6.828 6.828 0 0 0 36.126 33.427 A 4.823 4.823 0 0 0 32.618 31.935 A 4.64 4.64 0 0 0 30.025 32.707 A 6.163 6.163 0 0 0 28.712 33.888 Q 27.052 35.841 27.052 38.575 A 8.824 8.824 0 0 0 27.056 38.841 A 6.945 6.945 0 0 0 28.712 43.263 A 6.831 6.831 0 0 0 29.355 43.927 Z M 63.73 43.927 A 4.755 4.755 0 0 0 66.993 45.216 Q 69.288 45.216 70.924 43.263 A 6.833 6.833 0 0 0 72.125 41.187 A 7.624 7.624 0 0 0 72.56 38.575 A 8.876 8.876 0 0 0 72.552 38.195 A 6.983 6.983 0 0 0 70.924 33.888 A 6.828 6.828 0 0 0 70.501 33.427 A 4.823 4.823 0 0 0 66.993 31.935 A 4.64 4.64 0 0 0 64.4 32.707 A 6.163 6.163 0 0 0 63.087 33.888 Q 61.427 35.841 61.427 38.575 A 8.824 8.824 0 0 0 61.431 38.841 A 6.945 6.945 0 0 0 63.087 43.263 A 6.831 6.831 0 0 0 63.73 43.927 Z' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
+  background-position: 20px 20px;
+}
+
+.paper > h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
 }
 .one {
   grid-area: one;
@@ -72,7 +72,8 @@ h6s {
 .three {
   grid-area: three;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  max-height: 75vh;
   gap: 20px;
 }
 .three > img,
@@ -83,46 +84,28 @@ h6s {
 .four {
   grid-area: four;
 }
-.e-mail {
-  font-size: small;
-}
-/*https://danmarshall.github.io/google-font-to-svg-path/*/
-/*https://yoksel.github.io/url-encoder/*/
-.repeating-bg {
-  background-image: url("data:image/svg+xml,%3Csvg width='99.612' height='99.612' viewBox='0 0 99.612 99.612' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='svgGroup' stroke-linecap='round' fill-rule='evenodd' font-size='9pt' stroke='%23000' stroke-width='0.25mm' fill='%23000' style='stroke:%23000;stroke-width:0.25mm;fill:%23000'%3E%3Cpath d='M 30.47 95.753 A 48.715 48.715 0 0 0 49.806 99.611 Q 60.109 99.611 69.142 95.729 Q 78.175 91.847 85.011 85.011 Q 91.847 78.175 95.729 69.142 Q 99.611 60.109 99.611 49.806 Q 99.611 39.503 95.729 30.47 Q 91.847 21.437 85.011 14.601 Q 78.175 7.765 69.142 3.883 Q 60.109 0.001 49.806 0.001 A 48.715 48.715 0 0 0 30.47 3.859 Q 21.437 7.716 14.576 14.576 Q 7.716 21.437 3.859 30.445 A 46.98 46.98 0 0 0 3.169 32.146 A 48.984 48.984 0 0 0 0.001 49.806 A 48.715 48.715 0 0 0 3.859 69.142 Q 7.716 78.175 14.576 85.035 Q 21.437 91.896 30.47 95.753 Z M 49.806 97.657 A 46.875 46.875 0 0 0 68.409 93.946 Q 77.101 90.236 83.668 83.668 Q 90.236 77.101 93.946 68.409 A 46.875 46.875 0 0 0 97.657 49.806 A 46.875 46.875 0 0 0 93.946 31.202 Q 90.236 22.511 83.668 15.944 Q 77.101 9.376 68.409 5.665 A 46.875 46.875 0 0 0 49.806 1.954 A 46.875 46.875 0 0 0 31.202 5.665 Q 22.511 9.376 15.944 15.944 Q 9.376 22.511 5.665 31.202 A 46.875 46.875 0 0 0 1.954 49.806 A 46.875 46.875 0 0 0 5.665 68.409 Q 9.376 77.101 15.944 83.668 Q 22.511 90.236 31.202 93.946 A 46.875 46.875 0 0 0 49.806 97.657 Z M 25.636 75.441 L 23.976 74.464 Q 26.271 70.314 30.299 67.213 Q 34.327 64.112 39.381 62.355 A 31.511 31.511 0 0 1 49.806 60.597 A 31.511 31.511 0 0 1 60.231 62.355 A 31.668 31.668 0 0 1 69.313 67.237 A 24.816 24.816 0 0 1 74.121 72.115 A 22.347 22.347 0 0 1 75.636 74.464 L 73.976 75.441 A 21.687 21.687 0 0 0 69.296 69.752 A 25.564 25.564 0 0 0 68.043 68.727 A 29.994 29.994 0 0 0 59.547 64.186 Q 54.835 62.55 49.806 62.55 Q 44.777 62.55 40.04 64.186 A 30.049 30.049 0 0 0 32.025 68.342 A 28.374 28.374 0 0 0 31.544 68.702 A 22.453 22.453 0 0 0 26.811 73.573 A 20.69 20.69 0 0 0 25.636 75.441 Z M 29.355 43.927 A 4.755 4.755 0 0 0 32.618 45.216 Q 34.913 45.216 36.549 43.263 A 6.833 6.833 0 0 0 37.75 41.187 A 7.624 7.624 0 0 0 38.185 38.575 A 8.876 8.876 0 0 0 38.177 38.195 A 6.983 6.983 0 0 0 36.549 33.888 A 6.828 6.828 0 0 0 36.126 33.427 A 4.823 4.823 0 0 0 32.618 31.935 A 4.64 4.64 0 0 0 30.025 32.707 A 6.163 6.163 0 0 0 28.712 33.888 Q 27.052 35.841 27.052 38.575 A 8.824 8.824 0 0 0 27.056 38.841 A 6.945 6.945 0 0 0 28.712 43.263 A 6.831 6.831 0 0 0 29.355 43.927 Z M 63.73 43.927 A 4.755 4.755 0 0 0 66.993 45.216 Q 69.288 45.216 70.924 43.263 A 6.833 6.833 0 0 0 72.125 41.187 A 7.624 7.624 0 0 0 72.56 38.575 A 8.876 8.876 0 0 0 72.552 38.195 A 6.983 6.983 0 0 0 70.924 33.888 A 6.828 6.828 0 0 0 70.501 33.427 A 4.823 4.823 0 0 0 66.993 31.935 A 4.64 4.64 0 0 0 64.4 32.707 A 6.163 6.163 0 0 0 63.087 33.888 Q 61.427 35.841 61.427 38.575 A 8.824 8.824 0 0 0 61.431 38.841 A 6.945 6.945 0 0 0 63.087 43.263 A 6.831 6.831 0 0 0 63.73 43.927 Z' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
-  background-position: 20px 20px;
+.five {
+  grid-area: five;
+  max-height: 75vh;
 }
 
-a {
-  color: white;
-}
-.fake-input > .input {
-  border: none;
-  border-bottom: 2px solid black;
-}
-.fake-input > .input:focus {
-  border-bottom: 2px solid red;
-  outline: none;
-}
-.fake-input {
-  border-radius: 6px;
-  border: 3px solid black;
-  padding: 2px;
-}
-.button {
-  background-color: transparent;
-  border-radius: 6px;
-  border: 3px dotted black;
-  padding: 6px;
-}
+@media only screen and (max-width: 600px) {
+  .order {
+    grid-template-areas:
+      "one  "
+      "four "
+      "two  "
+      "five "
+      "five "
+      "three";
+    grid-template-columns: 1fr;
+  }
+  body {
+    scrollbar-width: auto !important;
+  }
+  .three {
+    flex-direction: row;
+    max-height: auto;
+  }
 
-.body-center {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
+}

website/blogs/build-system.md

@@ -0,0 +1,24 @@
+title = Is it that hard to write a build system for a site?
+time = 1721772261
+========================
+
+The answer may shock you. 
+
+## actually, what do you mean by a build system?
+By a build system I mean in the Maven or Gradle (from Java) sense. You can add custom plugins, which add new functionallity, inject new code and more.
+For [my project](https://sad.ovh), I wanted to have a system where I could flawlessly build .TS files, make custom metadata for my blogs, and do whatever else my mind wants to.
+
+## okay cool, interesting, but why?
+Honestly? I have no clue. I was looking at Esbuild, realised it doesn't have the features that I want (and the ones that it did have, I would've been forced to use through CLI). I also looked at webpack, realised it's way too slow and bulky have you ever even SEEN webpack's code? It's <rant snipped>). So, I thought that I have no other option than to roll my own. It was not as hard as I thought, as I had already planned most of this previously. 
+
+## nice, what does it do?
+Currently, [it has 5 plugins](https://git.sad.ovh/sophie/website/src/branch/main/src/plugins). One for development environments, which automatically updates all open tabs on file change, and rebuilds. And then I have two markdown related plugins. One of these compiles .md files into .html files, and the second one compiles .md files into .json. It uses a hugo-esque format for getting the metadata for my blogs. I also added variables. These are defined in the variables.ts plugin, and I currently have `__STICKERS__` for the stickers on the side, and `__BLOG_POSTS__` for the blog posts. There is also a TS/JSX/TSX compiler.
+
+## woah does the TSX work out of the box?
+Partly. This is one of the biggest choke points I had with the whole build system. The actual site generation happens entierly in the client, so I had to find a entierly client JSX library.  
+TIL that there's two sides of JSX, one for bundling it and parsing it, and one for actually turning the parsed data into HTML.  
+With enough searching, [I did find a client JSX library](https://nanojsx.io) that worked perfectly for my usecase. 
+It was absolutely horrible implementing it, because I had to strangle esbuild's bundler to work properly.
+
+## conclusions
+Suprisingly, rolling your own build system for your website isn't a bad idea after all! Obviously, it's more code that you have to maintain, and that's not always good. But while writing a redesign for my website, it worked pretty well and I didn't run into any major issues with the build system. This project really wasn't the hardest thing to do, and I'm a person who's never ever looked at a single bundler's or anything's sourcecode.

website/index.html

@@ -74,7 +74,7 @@ __TEMPLATE_HEAD__
                 <li>9 years of Java development. Mostly Minecraft plugins and MC related projects.</li>
             </ul>
         </div>
-        <div class="paper blog" id="root"></div>
+        <div class="paper five" id="root"></div>
         <div class="paper three" id="stickers"></div>
 
     </div>