sophie/website
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: sophie:1260c98bfb808674ec0a151666d5fdcda2df6138
Branches Tags
sophie:main
..
compare: sophie:3f42e1c9b45cd00178b2d11ac94b500b000e44ef
Branches Tags
sophie:main

No commits in common. "1260c98bfb808674ec0a151666d5fdcda2df6138" and "3f42e1c9b45cd00178b2d11ac94b500b000e44ef" have entirely different histories.
1260c98bfb ... 3f42e1c9b4

3 changed files with 70 additions and 77 deletions
Show stats Expand all files Collapse all files

121
website/assets/style.css
View file

@ -1,6 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noto+Emoji:wght@300..700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noto+Emoji:wght@300..700&display=swap");
body { body {
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
font-optical-sizing: auto; font-optical-sizing: auto;
@ -10,28 +9,48 @@ body {
scrollbar-width: thin; scrollbar-width: thin;
} }
a {
color: white;
}
.order { .order {
display: grid; display: grid;
grid-template-areas: grid-template-areas:
"one two" "one two"
"one four" "one four"
"three five"; "three blog";
grid-gap: 5px; grid-gap: 5px;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(25vh, 6); 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 { .emoji {
font-family: "Noto Emoji", sans-serif; font-family: "Noto Emoji", sans-serif;
font-optical-sizing: auto; font-optical-sizing: auto;
font-style: normal; font-style: normal;
font-variation-settings: "slnt" 0; font-variation-settings: "slnt" 0;
} }
.paper > h1,
h2,
h3,
h4,
h5,
h6,
h6s {
margin: 0;
padding: 0;
}
.paper { .paper {
color: white; color: white;
background-color: #000000de; background-color: #000000de;
@ -41,27 +60,8 @@ a {
word-wrap: break-word; word-wrap: break-word;
overflow: auto; 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 { .one {
grid-area: one; grid-area: one;
@ -72,8 +72,7 @@ h6 {
.three { .three {
grid-area: three; grid-area: three;
display: flex; display: flex;
flex-direction: column; flex-direction: row;
max-height: 75vh;
gap: 20px; gap: 20px;
} }
.three > img, .three > img,
@ -84,28 +83,46 @@ h6 {
.four { .four {
grid-area: four; grid-area: four;
} }
.five { .e-mail {
grid-area: five; font-size: small;
max-height: 75vh; }
/*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;
} }
@media only screen and (max-width: 600px) { a {
.order { color: white;
grid-template-areas: }
"one " .fake-input > .input {
"four " border: none;
"two " border-bottom: 2px solid black;
"five " }
"five " .fake-input > .input:focus {
"three"; border-bottom: 2px solid red;
grid-template-columns: 1fr; outline: none;
} }
body { .fake-input {
scrollbar-width: auto !important; border-radius: 6px;
} border: 3px solid black;
.three { padding: 2px;
flex-direction: row; }
max-height: auto; .button {
} background-color: transparent;
border-radius: 6px;
border: 3px dotted black;
padding: 6px;
}
.body-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
display: flex;
justify-content: center;
align-items: center;
} }

24
website/blogs/build-system.md
View file

@ -1,24 +0,0 @@
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.

2
website/index.html
View file

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