jasonloong.com v1.1
Posted On
2024 Jan 25
10 months ago
Updated On
2024 Jan 25
10 months ago
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
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
Photo - Related Blogs and socials
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
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
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!