make blockquote "dialogues" their own thing so that i can actually use them as intended

Author: Socketlike

content/index.md

@@ -26,13 +26,13 @@ i used to be obsessed with tinkering with web technologies but i've lost interes
 \
 \
 it's a miracle i'm even making this webpage right now .
-> *hey evie! hi evie! isn't this supposed to be the index page? where's the list of pages?*
+> {dialogue} *hey evie! hi evie! isn't this supposed to be the index page? where's the list of pages?*
 
 shut the [-angry HELL] up! [-mutter when did i ever let YOU speak? who even are you? get out of here!!!]\
 **anyways** they're in that submenu accessible through the menu button on the top right of the page .\
 i don't have a good design for a nav thingy yet so you get that for now.
 
-> *why is this webpage so damn empty?? blahblahblahblah*
+> {dialogue} *why is this webpage so damn empty?? blahblahblahblah*
 
 [-angry because i haven't figured out what to add yet okay shut UP you're so-]\
 whoops lost my composure there! anyways this webpage is to remain mostly empty until i figure out what to add to it. goodbye!

content/meta.md

@@ -32,7 +32,7 @@ then, on the *"frontend"*, i just have the webpage pull that list using a fetch
 does it all make sense yet?\
 no?
 
-> *evie, you know, there are better ways to make a website. like buying a vps, and then putting a real web server on there...*
+> {dialogue} *evie, you know, there are better ways to make a website. like buying a vps, and then putting a real web server on there...*
 
 oh yeah.\
 you're right...\
@@ -42,7 +42,7 @@ it's not like, my family is [-angry struggling] to keep up with my college tuiti
 
 moving on...
 
-> *evie, even so, you know, there are better ways to make a static webpage... like generating html from markdown files or whatever...*
+> {dialogue} *evie, even so, you know, there are better ways to make a static webpage... like generating html from markdown files or whatever...*
 
 but that's ***no fun***, is it?\
 my webpage would just be another *slop project*, with no [-rapid challenge] to it..\

content/music.md

@@ -10,7 +10,7 @@
 
 ... ~~you can find them [here](https://open.spotify.com/playlist/7Gfvs4A320zPRQG1DG51nx), on spotify.~~\
 [-mutter (edit) i'm no longer using this playlist; i'm now making a playlist monthly to put stuff that i'm currently interested in since that's not possible with the current singular playlist approach]
-> *evie, spotify **fucking** sucks! why aren't you using something else?????*
+> {dialogue} *evie, spotify **fucking** sucks! why aren't you using something else?????*
 
 yes i know spotify may not be the most upright company but there are not that many good alternatives for me right now [-mutter (has to be a streaming service with an expansive library + be easy and not take a thousand years to transfer my privated 1k+ songs playlist from spotify to it)].
 

content/not-found.md

@@ -11,11 +11,11 @@ delisted: true
   <br>
 </p>
 
-> *i don't know!!! evie save me!!!!!!!*
+> {dialogue} *i don't know!!! evie save me!!!!!!!*
 
 dOES IT LOOK LIKE [-angry I KNOW????] go FIGURE IT OUT YOURSELF
 
-> *what if i can't??*
+> {dialogue} *what if i can't??*
 
 i don't care! have fun .
 

content/web-badges.md

@@ -0,0 +1,27 @@
+---
+name: web badges
+---
+# web badges are neat
+<p class="github-only">
+  <b>hi curious github user skimming through my page's source code</b>
+  <br>
+  this markdown document may not be displayed properly because i have added custom """formatting""" that regular or github markdown doesn't have
+  <br>
+  consider viewing this document on my github pages instead!
+</p>
+
+for those who don't know what they are, here's [a definition of what a web badge is](https://en.wikipedia.org/wiki/Web_badge), courtesy of wikipedia:
+
+> *Web badges, buttons or stickers are small images on web pages, typically part of the footer. They can be used for promotion, stating compliance with web standards or to comply with an application's terms of service.*
+
+and here's [a list of them, linking to pages on neocities](https://neonaut.neocities.org/cyber/88x31). pretty neat, huh?
+
+after seeing that i really really wanted to make my own;\
+so i did! here it is: [-mutter (sorry if its low effort i made it in 2 minutes with aseprite)]
+
+[![evie's pages: blog](/resources/badge.png)](https://evie.is-a.dev)
+
+ i DO wanna make a better one some day.\
+[-mutter maybe tomorrow,\
+maybe never.\
+we'll see...]

index.html

@@ -41,7 +41,7 @@ <h3>changelog</h3>
       <div id="changelog-container"></div>
     </div>
 
-    <main>
+    <main id="main">
       loading ...<br>
       <br>
       <br>

resources/badge.png

@@ -3,6 +3,20 @@ const postprocessors = Object.freeze(
         (root) => root
             .querySelectorAll('.github-only')
             .forEach((e) => e.remove()),
+
+        (root) => root
+            .querySelectorAll('[blockquote-dialogue]')
+            .forEach((e) => {
+                if (e?.parentNode?.parentNode?.tagName === 'BLOCKQUOTE')
+                    e.parentNode.parentNode.classList.add('dialogue')
+
+                e.remove()
+            }),
+        
+        // make img alts also show up as a tooltip on pc
+        (root) => root
+            .querySelectorAll('img[alt]')
+            .forEach((e) => e.title = e.alt),
 
         // history "link" hack - part 2
         (root) => root

src/postprocessor.js

@@ -47,6 +47,12 @@ const preprocessors = Object.freeze(
             }
         },
 
+        {
+            filter: /{dialogue}/g,
+            replacer: () =>
+                `<span blockquote-dialogue></span>`
+        },
+
         {
             filter: /\[-([^\n\s]+)\s+([^\]]+)\s*\]/g,
             replacer: (_, mod, content) =>

src/preprocessor.js

@@ -128,9 +128,22 @@ p {
     background-color: var(--bg);
 }
 
-blockquote {
+blockquote:not(.dialogue) {
     margin: 0;
+    padding: 4px 8px;
 
+    border-radius: 4px;
+    border-left: 4px solid var(--chaotic-pure);
+    background-color: var(--bg);
+}
+
+blockquote:not(.dialogue) p {
+    margin: 0;
+}
+
+blockquote.dialogue {
+    margin: 0;
+
     color: var(--fg-2);
 
     text-align: right;