Behind the Scenes Footage!

This page will serve as a live documentation of the features¹ of this site, and as a reference to how it came about. It’s really just a “screaming into the void”-style journal (we’re not even indexed by google) of interesting thoughts/experiences that popped up while creating the site. This is the one article on here that I wrote for the purpose of writing rather than for reading, similarly this is the one post which I cannot wholeheartedly tell you to read from start to finish. Furthermore, it’s really just a testing ground of all the features¹ that I’ve tried to implement, and also just something better tha the standard “lorem ipsum” text to occupy the role of a dummy post. But scrappy unpolished eternal rough draft that it may be, if you’re really trying to make a content-focused website half as cool as this (contact me I can give you the cool webdesign and you can make the content you were going to otherwise) then you should give this a read.

Jan 14th 2024 - Custom CSS for all Markdown

This has been the most Painful and UNECESSARY aspect of this site so far. I’ve had to deal with the jankery of HTML, CSS, Netlify’s build environment, and most of all f’ing Astro. For some reason Astro compiles (builds?) the site differently on Netlify as compared to my machine? Can you believe “Works on my machine” jokes are still relevant in 2024. But the core issue there was that for some reason stylesheets built (imported in?) in the wrong order - that is when Astro generated the site it was oddly inconsistent with how it inserted the “ segments in a different order in prod. I eventually figured that we could treat the components and the imports as russian nesting dolls - with the closer to the center being closer to the top of the order. However for some whatever reason it didn’t work in production quite so, there was for some reason an insertion of a stylesheet that should’ve come much later. Why’d this happend? god knows, how’d I fix it? Modularize the fuck out of the stylesheets, literally as much as possible and import redundantly - also make a separate sheet for font imports and ALWAYS keep it at the top.

Also for whatever reason Astro doesn’t automatically let you customize the stylesheet used for every markdown post, easy fix, have it as part of your frontmatter (a document path) and then generate a <style> tag when needed. It also hadto be done this way because Astro.glob() the Astro API function used collect the posts en masse and filter throught traits (i.e. the tag list/post lists) for some reason IMPORTS the doc so that also imports any imported styles which is a royal mess for any page calling thay function.

But that’s lame (writing a whole (partial) stylesheet for every post), what would be cooler is just putting in background graphics (image urls) and colors (like for the content u see now) and leaving the rest to a default. So now you could still customize the full css, but also choose the much easier option of just selecting a background photo and theme color. Now I tried (and I really did) to abuse the rules of style tags and astro generation to set the background image, through a frontmatter variable, purely through css, on the page it itself. But that didn’t work due to a variety of reasons (the biggest being that u can’t interpolate functions with the URL() function in CSS). Instead I just wrote the JS needed to change the DOM at initial site load time, astute readers will know that I hate this, and my goal with this site was to minimize any and all client side JS, and it causes a weird flash when you load the page as the browser loads in the first (default) image/color and changes to the second (frontmatter defined). I think in the future, I’ll write a script that auto generates the CSS/.astro file needed for every markdown page - in like a compilation kind of way - then I’d need only push those completed files to production and no longer will I have to manually mess with doms. It’s also good because it reduces reduntant build times.

Jan 16th 2024 - Code Blocks

Strangely enough this has actually been my least favorite part (so far) of this entire process. But given that half the reason² I started this website was to write about all the half-scripts that I waste most of my time writing, this portion was unavoidable. Syntax highligting for various languages, getting highlighted blocks automatically from markdown scripts, and making it all look cool too? What was I supposed to do? Run a language server in browser? Write a typescript lexer to split text into segments each with custom CSS? Luckily, I’m too experienced to attempt any of those (in fact I had to make them up just now so I could pad out this post). Instead, I just imported solution and modified it from there.

The solution I imported was from this github repository. I used Prism mostly because I’ve worked with it before, and it’s easy to modify the css to match the rest of the site, althought in the future I’ll probably switch to Shiki just because it has a cooler name. On top of that I chose monokai dark for the theme, and I modified the css to work with the light and dark modes. Here’s an example of the codeblock in action as generated from markdown. I think it looks cool, here’s a C program to find the nth root of a number.

#include <stdio.h>
#include <stdlib.h>
#include <math.h>

double nroot(double x, int n, double acc);

int main(void){
	for (int i = 0; i <= 10; i++){
		printf("----------------------------\n");
		for (int j = 1; j <= 6; j++){
			double c = pow(i,j);
			printf("%f is the %dth root of %.0f \n",
			       nroot(c, j, 0.00001), j, c);
		}
	}
}

double nroot(double x, int n, double acc){
	double g = 1;
	double fg = (x - pow(g, n));
    while (fabs(fg) >= acc){
        //printf("%f is not it\n", g);
        g = (g + (fg/(n*pow(g,(n - 1)))));
        fg = (x - pow(g, n));
    }
    return g;
}

Latex

This was extremely easy, literally just import solution but with the steps outlined here. Who would’ve the people who use latex make easier to use and more intuitive tools as compared to basically everyone else - especially front-end dev teams. Now I did tweak my css a little bit to edit the katex span.

$\Gamma(1/2) = \int_{0}^{\infty} e^{-x} x^{-1/2} \, dx$ $\sqrt{2x} = y, \, x = y^2/2, \, dx = \sqrt{2x} \, dy$ $=\int_{0}^{\infty} e^{-y^2 / 2} x^{-1/2} \sqrt{2x} \, dy$ $= \sqrt{2} \int_{0}^{\infty} e^{-y^2 / 2} dy$ $= 2\sqrt{\pi} \int_{0}^{\infty} (2\pi)^{-1/2} e^{-y^2 / 2} \, dy$