April: 23
Astro Askama
Section titled “Astro Askama”-
12:03AM
Released v1.3 of Disoxide and the website is slowly getting its form! With the basic redis integration out of the way, the focus will be on the cache control and then it will be the supabase linking. As for the front end, I still need to finish the quad panel and migrating the rest of the alpine code over to svelte.
-
08:35AM
Next round of askama updates will be around getting that perfect 100 lighthouse score, gives us a solid area to aim for and then we can drop a decent chunk of the alpine. As for the supabase loading, we can wait a bit on it since there is still some work that we need to do with getting the quad panels to be operational.
-
03:05PM
Okay, making some progress with the sidebar and handling the bigger issue, which is the i18n. The plan would be to load all the different keys for each language and then build an astro collection holding the translations. If it works out fine, I might make it into a library and add it back into the kbve website for our collections. The loading of the i18n keys, values and basically the whole database should be done via the shared worker but we want to make sure that it will not be an issue. I think there might be a couple ways we can address this, but I also need to make sure that we update the axum with the new folder for i18n. Under the assets.rs file, a quick edit to include the ServeDir for
i18n
, and that should be fine on the rust-side of things.
.nest_service("/i18n", ServeDir::new("dist/i18n").not_found_service(get(custom_404)))
That should make sure the next docker image build serves the json files from that folder without any issues.
Astro Toast
Section titled “Astro Toast”-
05:45PM
The toast can be added in two ways, we could create our worker and then delegate the toast tasks to it. However, I am thinking that we move into an event based system that then modularizes each of the scripts into their own workers. The event system and message system would move amoung the shared worker, client and N-workers, using events to trigger the deployment. I can already tell that I will have to rewrite this all again in the future, but for now this is part of the learning system.
-
05:49PM
After making the basic toast module, aka toast.ts, I am going then adjust the client.ts to handle it. We want both a subscription based way of triggering the toast and also a custom event system! This should give us the ability to handle both live events and events triggered from the main thread.
-
06:56PM
After looking through all the code and building it out, I decided that it be best to just throw it all out and start fresh again. I am thinking that it would make sense to structure it around a notification system that sits within the idb. The toasts will just act as a UX medium for the user to see the title and the core message, while the idb holds the full notification. This means we can extend it out to include the redis watch and anything from the supabase end points as well.
Astro Notifications
Section titled “Astro Notifications”-
07:00PM
The notification system should be simple enough so that we can loop back to finishing the SW / i18n reloading.
MusicJams
Section titled “MusicJams”-
03:04PM
The song is Swimming by Goth Babe Point Mugu, I need to remember to add that into the music bot! A quick side note for that plug from Zs youtube music stream.
Journal
More changes to the website! The feeling of fixing up the daily journal has been a long standing pain for my eyes, so I am going to try and tackle it today. I am thinking the focus should be on optimizing while crafting an unique experience for the future readers, including myself.
<div class="sm:order-2"> <div class="relative rounded-lg pt-[50%] sm:pt-[100%]"> <img class="absolute start-0 top-0 size-full rounded-xl object-cover" src={journalEntry.data.img} alt={`journalEntry.data.cardImageAlt`} draggable={'false'} loading={'eager'} /> </div></div>
We should wrap this container with code that would optimize the image URL and also see if we can pass through the unsplash ID , then apply changes to the URL to make it faster for us.
I decided to to have the source be journalImage
and added this code block in the start of the journal.
const journalImage = journalEntry.data.unsplash ? `https://images.unsplash.com/photo-${journalEntry.data.unsplash}?crop=entropy&cs=srgb&fm=avif&q=85&w=1024` : journalEntry.data.img;
This will help us control the way the size of the image that is being loaded, before we were loading nearly 100MB worth of images, which is not worth it!
I swapped out the eager
with a lazy
as well, so the site now loads super fast and will lazy load the images as we scroll down.
Menu
Time for me to play around with the Preline Menu! Coming from the flowbite flow, this UI library seems to be structured in a similar matter, so it won’t be too hard for me to get the flow.
The dropdown for the menu is a bit off center, I am thinking that it might be a css issue with respect to the screen size, hmm.
Let me update the links on the menu! So we will link off to the docs, but I might want to work on that too, hmm.
Search
Maybe we could add the document search directly to the front page of the website?
Looking at the source code for the SiteTitle.astro
, err, I mean Head.astro
import StarlightHead from '@astrojs/starlight/components/Head.astro';
We can import the StarlightHead
, I am wondering if we could import the search and then place it on the front page directly.
import StarlightSearch from '@astrojs/starlight/components/Search.astro';
Hmm this ended up being a bit too complex for me to do while I am half Zzzz, so I will try it again tomorrow.
Github
Lets update the Github contributors , filtering out the bots and myself! Then maybe trimming the list down to about the top 10 contributors.
// Filter Usersconst remove_github_users = [ 'github_actions', 'actions-user', 'h0lybyte', 'github',];const github_avatars_filtered = github_avatars.filter( (avatar) => !remove_github_users.includes(avatar.login),);const github_avatars_leaderboard = github_avatars_filtered.slice(0, 10);
Simple filtering and slicing got the job done!
India
- Damn! 17 days left in India for this vacation! I definitely will miss this place, the internal clock is already ticking. The next time I am around India, I might make plans to visit the Himalayas and also expand around Asia, definitely need to put Japan on the list.
- I am currently debating how I should setup the AppWrite Register. I am thinking I will do the classical way first and then maybe create a widget,
react-appwrite-widget
, to handle the Register? Hmm. - I decided to stick with a simple register / login / account flow for now but will expand it later on once I find more usage for it. The three are under tasks.
- Expanding the user profile via its own astro component, I have to be careful not to hit the API too much while building out the basics. We could store the basic user information into another nanoStore, so we do not have to pull from the API all the time. The issue is related to https://github.com/KBVE/kbve.com/issues/183
The journal system has to go through another change that should make it easier for us within the template level.
Do you know what my favorite part of the game is? The opportunity to play. — Mike Singletary (basketball)
- Connect AppWrite with /account/register/
- Connect AppWrite with /account/index aka Profile?
- Connect AppWrite with /account/login/
- Prepare weekly 0days.