From 4c8b45ddb42cbc6a945adadbbe94fef7ad4e3b18 Mon Sep 17 00:00:00 2001 From: derpyzza Date: Tue, 29 Oct 2024 00:54:09 +0500 Subject: [PATCH] Adds light mode, and revamps sidenotes and links --- assets/main.css | 84 +++-- design.html | 7 + jenny.py | 16 + public/220510-about-jenny.html | 295 +++++++++++++----- .../230512-hacky-script-perfect-script.html | 120 +++++-- 5 files changed, 397 insertions(+), 125 deletions(-) diff --git a/assets/main.css b/assets/main.css index e9346c2..43df9d3 100644 --- a/assets/main.css +++ b/assets/main.css @@ -13,6 +13,7 @@ */ --bg: #161616; + --bg2: #464646; /*normal*/ --nm: #fff; /*background*/ @@ -28,6 +29,7 @@ /*visited ( for links ) */ --note-bg: #231b19; + --side-bg: #242121; --hint-bg: #191e23; --code-bg: #0e0e0e; @@ -39,21 +41,30 @@ /*max width*/ } -/* -@media (prefers-color-scheme: light) { - :root { - --bg: #ffffff; - --nm: #272727; - --li: #9f9f9f; - --note-bg: #e99fff; - --hint-bg: #acd6cf; - --code-bg: #f0f4f7; +/* +#f4ecd8 +#5b4636 + */ +@media (prefers-color-scheme: light) { + :root { + --bg: #f4ecd8; + --bg2: #dbc6b2; + --nm: #1a110b; + --li: #73563a; + --side-bg: #dbc6b2; + --note-bg: #ffd9bc; + --hint-bg: #cfece7; + --code-fg: #f3f1eb; --code-box-side-bg: #000; --code-box-side-fg: #fff; + --dc: #917e71; + --ac: #df5b3e; + --a2: #fda572; + --vi: #b83623; } } -*/ + * { padding: 0; @@ -64,6 +75,7 @@ body { padding: 4rem 1rem 1rem; color: var(--nm); background-color: var(--bg); + line-height: 155%; /* background-color: #0f0f0f; */ font-family: 'Noto Sans'; /* font-size: 18px; */ @@ -131,7 +143,12 @@ hgroup h4 { p { margin-top: 1rem; margin-bottom: 1rem; - line-height: 1.5rem; +} + +blockquote { + padding: 1rem; + border: solid 1 var(--ac); + margin-left: 1rem; } /* === LINKS === */ @@ -177,8 +194,7 @@ img { border-radius: 10px; } -time, -aside { +time { color: var(--li); font-weight: bolder; } @@ -236,8 +252,10 @@ article>hr::before { } mark { - background-color: var(--bg); - color: var(--vi); + background-color: var(--bg2); + color: var(--nm); + padding: 0px 5px; + font-family: 'Fira Code'; } .datebar { @@ -302,13 +320,31 @@ mark { color: #438fd6; } -aside[id^="side-"], -.aside { - display: inline; +a[href^="#link-"] { + text-decoration: none; +} + +aside, .aside { + clear: right; float: right; position: relative; width: 20vw; - margin-right: -22vw; + padding: 1rem; + background-color: var(--side-bg); + color: var(--nm); + font-size: .85rem; + font-weight: normal; + /* border-radius: 8px; */ + border-left: 4px solid var(--dc); + margin: 10px 0px; + max-width: 30ch; + line-height: 1.5rem; + margin-right: -26rem; +} + +aside b { + display: block; + margin-bottom: 6px; } .code-highlight { @@ -326,7 +362,7 @@ aside[id^="side-"], code { border-radius: 10px; font-family: 'Fira Code'; - color: var(--nm); + color: var(--code-fg); background-color: var(--code-bg); width: 100%; margin-left: 16px; @@ -382,8 +418,12 @@ footer nav { } @media screen and (max-width: 1400px) { - .aside { - display: none; + aside { + float: unset; + clear: unset; + margin: 10px 0px; + width: 90%; + max-width: unset; } hgroup { diff --git a/design.html b/design.html index adfa2c4..d8f2628 100644 --- a/design.html +++ b/design.html @@ -126,6 +126,13 @@

Notice

Donec sollicitudin vestibulum [1] justo sit amet rutrum. Aenean faucibus interdum bibendum.

+ +
+ Hello, this is a very impressive and important — or maybe, faulty — quote +
+
+ - Person A +

Pellentesque felis quam, ultricies et ullamcorper quis, euismod ac leo. Mauris eleifend et tortor ac maximus. diff --git a/jenny.py b/jenny.py index a4bfc03..888356e 100755 --- a/jenny.py +++ b/jenny.py @@ -248,6 +248,21 @@ def process_headings( post, is_index = False ): return str(soup) pass +def process_code_blocks(post): + soup = Soup(post, 'html.parser') + + for c in soup.find_all('code'): + wrapper = soup.new_tag('div') + wrapper['class'] = 'code-highlight' + code = soup.new_tag('code') + code.string = c.string + wrapper.append(code) + + c.replace_with(wrapper) + wrapper.insert_before(soup.new_tag('br')) + wrapper.insert_after(soup.new_tag('br')) + return str(soup) + def format_file(post, template): @@ -287,6 +302,7 @@ def process_posts(): post['post_content'] = process_headings(post['post_content']) if ok: post['post_content'] = build_footnotes(post['post_content'], links) + post['post_content'] = process_code_blocks(post['post_content']) file_name = os.path.basename( f ) destination = os.path.join( out_dir , os.path.splitext( file_name )[ 0 ] + ".html" ) diff --git a/public/220510-about-jenny.html b/public/220510-about-jenny.html index c7047c2..23a67f8 100644 --- a/public/220510-about-jenny.html +++ b/public/220510-about-jenny.html @@ -1,75 +1,231 @@ + + + + + Derpyzza's site + + + + + - - - - - Derpyzza's site - - - - - + +

+
+
+
+ 10th May, 2022 + Go back +
+

Writing Jenny

+

My tiny static site generator

+
- -
-
-
-
- 10th May, 2022 - Go back -
-

Writing Jenny

-

My tiny static site generator

-
+
+ +

# Jenny

+

+ i've been wanting to start a small blog to kinda document my + projects and stuff for a while now, and a couple days ago i decided + to just sit down and finally make one. going into it however, i had + some requirements i needed to satisfy: +

+
    +
  • + the site needed to be lightweight. like + really lightweight. like + fits-in-under-512-kb-so-i-can-join-the-512kb-club lightweight. +
    • +
  • + quick and easy to use / deploy. i didn't want to learn a super + cool fancy website builder tool that reads your mind and spits out + your dream site. +
    • +
  • no javascript, atleast to start out with.
    • +
  • + no fancy databases. each post would just be a separate html file. +
    • +
  • free and open source.
    • +
+

+ essentially, i wanted a very minimal setup. i write a post, post + appears on my website. simple. before writing jenny i tried out + jekyll, and while jekyll sort of ticked off all my requirements, i still + didn't like it too much. the main reason was because i didn't really + understand how it worked too well, and i really did not want to sit + down and read the documentation for it ( im lazy ). so as a fix for + my problems, i just wrote jenny :D 1. +

+ +

# What

+

+ is jenny? jenny, is a small, super opinionated + 2. static site + generator. it reads in every .md file from a + src/ directory, translates them to a + .html with the help of a template + .html file which tells the script how to generate the + output files, and places them into a public/ directory. + this way, i can just write all my posts in markdown (which is + essentially just plain text with extra features), and have the + script turn my posts to a web friendly format for others like you to + see! +

+ +

# Why

+

+ would you write your own static site generator? why not use a + different one like hugo or something if you didn't like jekyll? why + not just simply write your posts in html? well, those are all + perfectly valid questions. the real reason i wrote my own static + site generator instead of just searching for a better one to use ( + there's like billions of them ) is + primarily because it sounded like an interesting project. it's + functionally very simple, you can extend it as much as you want, and + it's quite a useful tool, so writing my own was loads more fun and + educational than using someone else's project. if however, you do + not care about all that stuff and just want a simple way to write + your posts, i would just recommend using a static site generator + written by someone else. and as for writing my posts in html, while + it's a perfectly acceptable way to write a blog, it's frankly quite + a chore. so writing my own generator sounded a seemed to be the best + way to get exactly what i wanted :) +

+

# How

+

+ does it really work? ( as of the time of writing ) jenny is + essentially just a small python script that expects three things: a + src/ directory that contains .md files, an + assets/ directory that contains a stylesheet and two + template .html files ( one for the main page, and one + for the actual posts themselves ) and a + public directory. the script reads through every + .md file in the src/ directory, and first + off preprocesses the file for some metadata. metadata for jenny + follows the following syntax: +

+
+
$command args...
+
+

+ metadata must always begin with a dollar symbol, immediately + followed by a command or keyword that tells the program what kind of + data it is, followed by a space delimited string of arguements to + the command. currently, jenny only supports three commands: title, + subtitle, and data. all three of these are used in displaying the + title of the post on the post page, as well as displaying the title + on the main page. after the preprocessing stage, jenny converts the + raw markdown posts to a .html page using the + aforementioned template files, and stores the post to a list of + posts along with their titles, subtitles, and dates. jenny then just + takes all that data, and feeds it through another template to + produce an index file as the landing page of the blog. and... that's + it! jenny is in itself a super basic script. it only does what it + needs to, and nothing else. it ends up being slightly not user + friendly as a direct cause of that simplicity sometimes, but that's + my fault for just rushing the implementation a bit hehe. +

-
-

# Jenny

-

i've been wanting to start a small blog to kinda document my projects and stuff for a while now, and a couple days ago i decided to just sit down and finally make one. going into it however, i had some requirements i needed to satisfy:

-
    -
  • the site needed to be lightweight. like really lightweight. like fits-in-under-512-kb-so-i-can-join-the-512kb-club [1] lightweight.
    • -
  • quick and easy to use / deploy. i didn't want to learn a super cool fancy website builder tool that reads your mind and spits out your dream site.
    • -
  • no javascript, atleast to start out with.
    • -
  • no fancy databases. each post would just be a separate html file.
    • -
  • free and open source.
    • -
-

essentially, i wanted a very minimal setup. i write a post, post appears on my website. simple. before writing jenny i tried out jekyll [2], and while jekyll sort of ticked off all my requirements, -i still didn't like it too much. the main reason was because i didn't really understand how it worked too well, and i really did not want to sit down and read the documentation for it ( im lazy ). -so as a fix for my problems, i just wrote jenny :D [3]3. jenny is derived from the word 'generator'. as in, 'jenny-rator'. i uwu-fied it kinda ig

-

# What

-

is jenny? jenny, is a small, super opinionated [4]4. opinionated as in i was too lazy to add any sort of user friendly features for anyone that isn't me static site generator. -it reads in every .md file from a src/ directory, translates them to a .html with the help of a template .html file which tells the script how to generate the output files, and places them into a public/ directory. this way, i can just write all my posts in markdown (which is essentially just plain text with extra features), and have the script turn my posts to a web friendly format for -others like you to see!

-

# Why

-

would you write your own static site generator? why not use a different one like hugo or something if you didn't like jekyll? why not just simply write your posts in html? well, those are all -perfectly valid questions. the real reason i wrote my own static site generator instead of just searching for a better one to use ( there's like billions [5] of them ) is primarily because it sounded -like an interesting project. it's functionally very simple, you can extend it as much as you want, and it's quite a useful tool, so writing my own was loads more fun and educational than using someone -else's project. if however, you do not care about all that stuff and just want a simple way to write your posts, i would just recommend using a static site generator written by someone else. and as -for writing my posts in html, while it's a perfectly acceptable way to write a blog, it's frankly quite a chore. so writing my own generator sounded a seemed to be the best way to get exactly -what i wanted :)

-

# How

-

does it really work? ( as of the time of writing ) jenny is essentially just a small python script that expects three things: a src/ directory that contains .md files, an -assets/ directory that contains a stylesheet and two template .html files ( one for the main page, and one for the actual posts themselves ) and a public directory. the script reads through every .md file in the src/ directory, and first off preprocesses the file for some metadata. metadata for jenny follows the following syntax: -$command args... -metadata must always begin with a dollar symbol, immediately followed by a command or keyword that tells the program what kind of data it is, followed by a space delimited string of arguements to the -command. currently, jenny only supports three commands: title, subtitle, and data. all three of these are used in displaying the title of the post on the post page, as well as displaying the title on -the main page. after the preprocessing stage, jenny converts the raw markdown posts to a .html page using the aforementioned template files, and stores the post to a list of posts along with their titles, subtitles, and dates. jenny then just takes all that data, and feeds it through another template to produce an index file as the landing page of the blog. and... that's it! jenny is in itself a super basic script. it only does what it needs to, and nothing else. it ends up being slightly not user friendly as a direct cause of that simplicity sometimes, but that's my fault for just rushing the implementation a bit hehe.

-

# Final notes

-

so, that's jenny! jenny was quite fun to work on, and most importantly, jenny is a very useful tool for me personally, which really makes all the html and css i had to write worth it in the end. -as of writing this, jenny is still missing a couple features that i would like to add, namely some nice configuration features to make setting up a blog easier, as well as a checker thing that only updates the files that have been recently edited. i plan to write a blog post a week and my blog folder will really start filling up quickly, and i dont want to sit there waiting for python to try and format all the scripts. -i'd like to quickly thank bob nystrom [6], and kenton hamaluik [7] for their lovely static site generators, which i used as reference. go check them out, they were really helpful! -this is my first ever blog post, so sorry for the monotonous tone. it'll definitely get better soon lol.

Footnotes + Links

  • [1] https://512kb.club
  • [2] https://jekyllrb.com/
  • [3] jenny is derived from the word 'generator'. as in, 'jenny-rator'. i uwu-fied it kinda ig
  • [4] opinionated as in i was too lazy to add any sort of user friendly features for anyone that isn't me
  • [5] https://jamstack.org/generators/
  • [6] https://github.com/munificent/game-programming-patterns
  • [7] https://github.com/hamaluik/blog.hamaluik.ca
-
+

# Final notes

+

+ so, that's jenny! jenny was quite fun to work on, and most + importantly, jenny is a very useful tool for me personally, which + really makes all the html and css i had to write worth it in the + end. as of writing this, jenny is still missing a couple features + that i would like to add, namely some nice configuration features to + make setting up a blog easier, as well as a checker thing that only + updates the files that have been recently edited. i plan to write a + blog post a week and my blog folder will really start filling up + quickly, and i dont want to sit there waiting for python to try and + format all the scripts. i'd like to quickly thank + bob nystrom, and + kenton hamaluik + for their lovely static site generators, which i used as reference. + go check them out, they were really helpful! this is my first ever + blog post, so sorry for the monotonous tone. it'll definitely get + better soon lol. +

+
+
+

Footnotes

+
    +
  1. + jenny is derived from the word 'generator'. as in, + 'jenny-rator'. i uwu-fied it kinda ig ↩ +
    2. +
  2. + opinionated as in i was too lazy to add any sort of user + friendly features for anyone that isn't me + ↩ +
    3. +
+

Links

+
    +
  • + 512kb club: https://512kb.club ↩ +
    • +
  • + Jekyll: https://jekyllrb.com/ ↩ +
    • +
  • + billions: https://jamstack.org/generators/ + ↩ +
    • +
  • + Bob Nystrom + https://github.com/munificent/game-programming-patterns + ↩ +
    • +
  • + kenton hamaluik + https://github.com/hamaluik/blog.hamaluik.ca + ↩ +
    • +
+
+
+
+
-
- -
- - + + diff --git a/public/230512-hacky-script-perfect-script.html b/public/230512-hacky-script-perfect-script.html index 94e9dd9..09a5ae0 100644 --- a/public/230512-hacky-script-perfect-script.html +++ b/public/230512-hacky-script-perfect-script.html @@ -14,7 +14,7 @@ - +
@@ -27,31 +27,85 @@

a tale of one of those rare moments where i broke through the endless cycle

-

Back in 2022 i decided to start a tiny little personal blog. i designed a lightweight website, and spun up a -quick little python script that acted as a static site generator [1]1. I named it jenny! where i wrote my blogposts in markdown in a source folder somewhere, and my script then translated them into html files with the help of predefined templates. that blog only lasted one blogpost before i abandoned it / forgot about it.

-

Fast forward to april 2023. i started cutting out social media from my devices, and consuming a lot more medium-to-long-form-content, like books and blogs, which made me want to re-start my blog. there was, however, a problem with my old setup: my beloved little python script sucked. it was a tiny hacky terribly-slow little script designed solely to work on that specific website with that specific design, with no error handling, no configuration ability, no nothing!

-

That was, obviously, completely unacceptable. i decided to create the ultimate tiny static site generator, one that is both flexible and configurable and tiny. the one tiny ssg to rule them all!!!

-

# Narrator voice: He did not, in fact, make the ultimate tiny ssg

-

So, i failed. Yup. My plans were big and grandiose, but my skills and patience were painfully limited. -originally, the plan was to simply remove all of my original painpoints with jenny, and to just make it more user friendly. the plan was to rewrite jenny in Go, as it is, and just add some tiny little QOL features, such as

-
    -
  • error handling
    • -
  • project generation
    • -
  • modular codebase
    • -
-

Sounds simple, right?

-

Right??

-

Wrong.

-

You see while it worked (mostly. i did not finish the whole thing), it had a major, unforgivable flaw: it was boring. working on it was not exciting in the least, as i was essentially just copying the python script to Go, and sprinkling a couple QOL features here and there. Absolutely unacceptable; where's the pizzaz? the glamour? the uniqueness and the quirkyness?? where's the excitement of it all???

-

I abandoned the go generator (surprise surprise), and that is when i started my slow descent to madness. i spent about two weeks staring at other ssgs, reading blogposts about ssgs, comparing programming languages, furiously scribbling notes, daydreaming about working on my ssg, etc. etc. all the while starting random little implementations of my ideas before scrapping them and going back to the procrastination/research loop.

-

# The inevitability of jenny

-

After struggling with fennel one day [2]2. I wanted to write a custom markdown parser, along with a lisp-based templating language in fennel, i wandered over to my original python repo. i decided to either use jenny, or some popular static site generator [3]3. But but my customization!! my minimalism!! noooooooooooo to atleast get a blog up and running while i messed around with my better-stronger-faster-one-ssg-to-rule-them-all-ssg.

-

I went ahead and pulled down the original jenny repo, and quickly tweaked it so that it was a tiny hacky terribly-slow little script designed solely to work on this specific website with this specific design, with no error handling, no configuration ability, no nothing.

-

# This website runs on jenny

-

It worked pretty well. i was able to get my website up and running, the way i wanted it to be. i can now post my notes and thoughts on this site, and have them go online without any problems, which is precisely what jenny is meant to do.

-

So perhaps i did not in fact need a super high powered ultra mega minimal exciting perfect static site generator to rule them all that will be done soon™. perhaps all i needed was a hacky little python script i wrote one year ago that works perfectly fine, right now.

-
-

i still am going to make my ultra minimal mega static site generator sometime soon tho. err maybe.

Footnotes + Links

  • [1] I named it jenny!
  • [2] I wanted to write a custom markdown parser, along with a lisp-based templating language in fennel
  • [3] But but my customization!! my minimalism!! noooooooooooo
+ +

Back in 2022 i decided to start a tiny little personal blog. i designed a lightweight website, and spun up a + quick little python script that acted as a static site generator [1] where i wrote my + blogposts in markdown in a source folder somewhere, and my script then translated them into html files with + the help of predefined templates. that blog only lasted one blogpost before i abandoned it / forgot about it. +

+ +

Fast forward to april 2023. i started cutting out social media from my devices, and consuming a lot more + medium-to-long-form-content, like books and blogs, which made me want to re-start my blog. there was, however, + a problem with my old setup: my beloved little python script sucked. it was a tiny + hacky terribly-slow little script designed solely to work on that specific website with that specific design, + with no error handling, no configuration ability, no nothing!

+

That was, obviously, completely unacceptable. i decided to create the ultimate tiny static site generator, + one that is both flexible and configurable and tiny. the one tiny ssg to rule them all!!!

+

# Narrator voice: He did not, in fact, make the ultimate tiny ssg

+

So, i failed. Yup. My plans were big and grandiose, but my skills and patience were painfully limited. + originally, the plan was to simply remove all of my original painpoints with jenny, and to just make it more + user friendly. the plan was to rewrite jenny in Go, as it is, and just add some tiny little QOL features, such + as

+
    +
  • error handling
    • +
  • project generation
    • +
  • modular codebase
    • +
+

Sounds simple, right?

+

Right??

+

Wrong.

+

You see while it worked (mostly. i did not finish the whole thing), it had a major, unforgivable flaw: it was + boring. working on it was not exciting in the least, as i was essentially just copying the + python script to Go, and sprinkling a couple QOL features here and there. Absolutely unacceptable; where's the + pizzaz? the glamour? the uniqueness and the quirkyness?? where's the excitement of it all??? +

+

I abandoned the go generator (surprise surprise), and that is when i started my slow descent to madness. i + spent about two weeks staring at other ssgs, reading blogposts about ssgs, comparing programming languages, + furiously scribbling notes, daydreaming about working on my ssg, etc. etc. all the while starting random + little implementations of my ideas before scrapping them and going back to the procrastination/research loop. +

+

# The inevitability of jenny

+

After struggling with fennel one day [2] + + , i wandered over to my original python repo. i decided to either use + jenny, or some popular static site generator [3] + to atleast get a blog up and running while i messed around with my better-stronger-faster-one-ssg-to-rule-them-all-ssg. +

+ + +

I went ahead and pulled down the original jenny repo, and quickly tweaked it so that it was a tiny hacky + terribly-slow little script designed solely to work on this specific website with this specific design, with + no error handling, no configuration ability, no nothing.

+

# This website runs on jenny

+

It worked pretty well. i was able to get my website up and running, the way i wanted it to be. i can now post + my notes and thoughts on this site, and have them go online without any problems, which is precisely what + jenny is meant to do.

+

So perhaps i did not in fact need a super high powered ultra mega minimal exciting perfect static site + generator to rule them all that will be done soon™. perhaps all i needed was a hacky little python script i + wrote one year ago that works perfectly fine, right now.

+
+

i still am going to make my ultra minimal mega static site generator sometime soon tho. err + maybe.

+
+

Footnotes + Links

+
    +
  • [1] I named it jenny!
    • +
  • [2] I wanted to write a custom markdown parser, along with a + lisp-based templating language in fennel
    • +
  • [3] But but my customization!! my minimalism!! noooooooooooo
    • +
+
@@ -60,13 +114,13 @@

# This website runs on jenny