journal update: 2024-11-14

src/pages/index.astro

@@ -30,6 +30,10 @@ import { timeZone } from "../lib/utils";
       </p>
       <p class="mb-2">Expect posts once or twice a week, I guess.</p>
 
+      <p class="mb-2"><b>Last journal update:</b>
+        <a href="/journal" class="font-serif text-subtitle text-sm hover:underline">November 14, 2024</a>
+      </p>
+
       <MDXCallout preset="new">
         This site is now using the <a href="https://astro.build">Astro web framework</a>!
         Previously, this site was using <a href="https://nextjs.org">Next.js</a>, a fullstack framework built for big whig companies 

src/pages/journal.mdx

@@ -8,19 +8,25 @@ draft: true
 ---
 
 import MDXCallout from '../components/mdx/MDXCallout.astro';
-import { MdOpenInNew } from "react-icons/md"
+import MDXAccordion from '../components/mdx/MDXAccordion.astro';
+import Icon from "../components/Icon.astro";
 
 ## now
 
-Cramming an entire overhaul of my site before class like a boss
+Working on my website instead of taking notes for class because i do not control the hyperfixation
 
-( below is an archive of a "now" post from i don't freaking know, i just haven't updated my site in a while so i wanted to make sure this one could actually be seen for a bit lol )
+---
 
-I am currently sitting at my local library. I forgor to bring my library card, so I just browsed through a couple of books and took
+<MDXAccordion title="todo">
-pictures of them so I can find them through *completely above-water legit means* in the near future.
+    - [ ] Potentially add an extra "new-tab" flag to MDX links (a space & "+" after the link in the parentheses? that might be too complicated
+    to implement nicely tho)
+    - [ ] Set up a dev version of this site & start implementing the account system!
 
-I want to get better at drawing, but it's very hard to start. Hopefully the books that I checked out will help a little bit with
+    ---
-getting the ball rolling.
+
+    - [X] Make external links open in a new tab. This should be pretty easy to implement.
+    - [X] Automatically insert an "external link" icon ( <Icon icon="FaExternalLink" class='w-3 inline-flex' title="new-tab" aria-label="new-tab"/> ) on links that open in a new tab.
+</MDXAccordion>
 
 {/*
 ---
@@ -36,12 +42,44 @@ to implement nicely tho)
 
 ---
 
+# 2024-11-14
+
+As I said in my now entry, my hyperfixation has returned to this website. I do not control the hyperfixation, and I wish it would hyperfixate on class instead, but since this is still somewhat productive, I'm okay with it being here for now.
+
+The main thing that I did was add my first "interactive" element: the accordion.
+
+<MDXAccordion title="It looks like this!">
+    When you click or tap on the box, it unfurls into a section that can contain literally anything I want... like an image of *another* accordion!
+
+    ![A screenshot of the "todo" accordion I currently have at the top of this page. Unchecked tasks include "Potentially add an extra 'new-tab' flag to MDX links (a space & '+'' after the link in the parentheses? that might be too complicated
+    to implement nicely tho)" and "Set up a dev version of this site & start implementing the account system!". Checked tasks include "Make external links open in a new tab. This should be pretty easy to implement." and "Automatically insert an 'external link; icon on links that open in a new tab."](/screenshot_accordion.jpeg)
+
+    However, there's a problem with this: it requires Javascript to function. I want my site to be completely functional *without* Javascript. So,
+    there is a fallback for if JS is disabled.
+
+    ![A screenshot of that same "todo" accordion but with Javascript disabled. It just looks like a regular section of the page, but with a special icon showing that it was meant to be an accordion.](/screenshot_accordion_noscript.jpeg)
+</MDXAccordion>
+
+Now that I know how to make stuff like this and give them noscript fallbacks, I feel much more confident about "Phase 2" of my site (implementing a comments section and account system).
+
+The prototype version of my site with an accounts system should be coming out by mid-December. It will likely be hosted on a completely separate server (not on Hetzner lmao) and require manual approval to sign up. I'll make sure to give you a little badge next to your name in the comments if you help me out with beta testing, though :3
+
+Currently, my ideas for Phase 2 consist of the following:
+
+- Accounts will **not** use passwords. There will be two authentication methods available: passkeys and single sign-on. SSO is the easier of the two, as it just refers to using another site to log onto this one (right now, Google, Microsoft, and Discord are the sites I'm thinking of using for SSO). Passkeys are more secure but not fully ready for prime-time and obscure in documentation. I'm implementing them partly as a challenge to myself and partly as a way to yell at everyone else "HEY!!! THESE ARE COOL!!! WE SHOULD USE THESE MORE!!!!" I'll be sure to make a guide on how to sign up with passkeys and/or add passkeys to an existing account for those who are not in the know yet. Eventually, I will want to fully move my account system to only use passkeys, but I recognize that I can't do that *now* with the current state passkeys are in.
+- Even after the beta, I'll likely have account signups operate under a manual approval / application system. Basically, you'll have to prove to me that you aren't a bot or a Nazi, and if I believe you, I'll let you in. This is my way of preventing spam and exploitation of my site.
+- I want the accounts system to be flexible enough to where they can be used for things *other* than just my comments section. If I ever make a forum on my site again, the forum will use these accounts. I also want accounts to have *their own profile pages* so if you see someone in the comments you think is cool, you can check out their profile and follow them on other places. I want the comments section to be its own sort of community, and stuff like profile pages helps reinforce that aspect of community imo.
+
+Is this way too much effort for an obscure blog's comments section? Yes. Is this just a way for me get more portfolio work done and justify it with a lofty humanitarian goal? Yes. But I think it will be worth it. It will be another thing to set my blog apart and hopefully encourage more people to check it out... and [possibly give me money](https://ko-fi.com/kebokyo).
+
+Anyways HA IM NOT GOING TO GIVE YOU MUSIC TODAY, [THE NUKETOWN EASTER EGG DROPPED AND IT'S GREAT](https://www.youtube.com/watch?v=BMnjU3UsIS0) ok cya
+
 # 2024-11-12
 
 I did it. This entire site is now running on the [Astro web framework](https://astro.build) instead of Next.js.
 
 There were two main reasons why I chose Next.js for this site originally:
-1. I already had *some* experience with it in an older iteration of my website refresh (which you can see in [this blog post](https://eleboog.com/posts/2024-06-16-hello-again)), and
+1. I already had *some* experience with it in an older iteration of my website refresh (which you can see in [this blog post](/posts/2024-06-16-hello-again)), and
 2. It is by far [the most popular metaframework on the web](https://share.stateofjs.com/share/prerendered?localeId=en-US&surveyId=state_of_js&editionId=js2023&blockId=meta_frameworks_ratios&params=&sectionId=libraries&subSectionId=meta_frameworks) right now.
 
 Both of these made it easier to get started with Next.js, and #2 made it more appealing as a learning / portfolio-enrichment experience.