April: 23

2024

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 Users
const 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!

2023

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

Notes

The journal system has to go through another change that should make it easier for us within the template level.

Quote

Do you know what my favorite part of the game is? The opportunity to play. — Mike Singletary (basketball)

Tasks

• Connect AppWrite with /account/register/
• Connect AppWrite with /account/index aka Profile?
• Connect AppWrite with /account/login/
• Prepare weekly 0days.