jasonloong.com v1.1 - Jason Loong | Tech Enthusiast, Photographer & Drummer

Attempting to use some form of versioning for the website, let’s go with semantic versioning

v1.1 - Theme, general direction, layout of the website

v1.1 - Features of the website, UI/UX improvements, major/minor bug fixes

It won’t be like GitHub releases as this is just a website☺️. Will consolidate most changes that I feel is a good personal milestone

Since my first website update New website 2023, there were many fixes and major improvements on the website

Will try to reference the commits from my local GitLab CE server and write the website’s first changelog! 😅

Logo

2023-06-29

New website logo
Footer link to logo creator

Photos

2024-01-21

Better use of img srcsets to load responsive images
Drastically reduce and use relevant photo data when pulling content from API

Infinite scroll

2024-01-24

Main photos page now uses infinite scrolling to load more photos

2024-01-25

Individual photo page now shows photos that are used in blog posts
Links to photo posted in socials platforms

2023-09-01

Removed Swiper.js from individual photo as it was causing issues for Desktop

Blogs

2024-01-21

In blog photos progress loading overlay changed to progress bar
🎉🎉 Desktop layout uses grids now rather than relative width sizes

RSS Feed

2024-01-13

Generate RSS feed of blogs and photos

Nuxt 3 - Site wide improvements

2024-01-13

Migrate away from any Directus module/SDKs, use plain ol' CRUD
🎉🎉 Proper use of useFetch to fetch data at server rather than on client

2023-12-30

Reduce bundle size of highlight.js by choosing the required languages used on this site

2023-09-17

Generate dynamic sitemaps off of API

2023-01-07

Use Plausible for stats

Bugs Fixes Improvements

🎉🎉 2023-12-30

Proper use of SSR from previously client-loaded markdown content. Render Markdown to HTML without custom Vue components. Hydration takes over and renders custom Vue components using vue runtime compiler

2024-01-21

og:url, og:image fixed return 'undefined' for the domain
Use auto-animate

Nuxt 3 - Markdown and Custom Vue components

I wasn't wrong when I said I would need to visit all aspects of the site when I decided to write jasonloong.com from scratch Site Broken and Progressive Fix

Notable and worthy 🎉🎉 changes are the main challenges of trying to use custom Vue components while rendering remote Markdown content from a headless CMS

Custom Image component

<v-site-image></v-site-image> custom image component currently does the following:

Automatically fill-in captions, shows EXIF data if any
Intersection Observer to load image on-demand
Provides progress loading bar

The image above in markdown content

<v-site-image src="a2a39996-50e4-45d1-a943-53f020c925bd"></v-site-image>

The image above in markdown content

What happens behind the hood is as follows:

MarkdownIt plugin renders the Markdown content to HTML, which includes the <v-site-image>
The above is then served to clients (without the images)
vue runtime compiler then takes over and re-renders all the custom Vue components in the above content to proper HTML (eg: <v-site-image> converted to proper <img>)

It is not a full fix but a workaround that I feel is adequate for SSR

Alternatives

There is the Nuxt MDC module which I tested briefly which seem to render all content server-side, even with custom Vue components

Will need more time to play with it and make sure it actually works for my use case

If you managed to fix the issue above and is rendering all content server-side, please do let me know how you fixed it!