UX and styling improvements for the Fuscripts site.

Added

Responsive image widths from caption tags: Images in Notion can now include \[w:XX%\] for desktop width, \[mw:XX%\] for mobile width, or \[w:80% mw:50%\] for both. Uses CSS custom properties (--dw, --mw) set inline on figure/img elements, with media query rules in the stylesheet for responsive behavior.

Tech tag wave-tilt animation: Project card technology tags now have a staggered 3D wave-tilt and light reflex effect on hover. Each tag tilts and shines sequentially using CSS-only animations with custom property delay indexing.

Changed

Image width approach: Replaced direct inline max-width styles with CSS custom properties, enabling responsive behavior that inline styles alone cannot express (media queries cannot be used in inline styles).

Technical

parseImageCaptionWidth() updated in both fusite/commons/src/utils/notion.ts and fusite/commons/src/services/imageProcessor.ts to parse \[w:\] and \[mw:\] tags

New buildImageStyleAttr() helper generates style="--dw: X%; --mw: Y%" attributes

processNotionImage() in imageProcessor now accepts optional displayMobileWidth parameter

CSS rules added to main.css using attribute selectors (figure\[style*="--dw"\]) for desktop and @media (max-width: 640px) for mobile

Tech tag animation uses @keyframes tagWaveTilt and @keyframes tagReflex with --tag-i custom property for stagger delay

A batch of UX improvements and developer experience enhancements for the Fuscripts site.

Added

"Try it live" button: Project headers now show a prominent button linking to the project's live app URL (sourced from Notion's url property). Styled with Inter font, white background, dark border, and a subtle hover scale effect.

Cross-environment data loading: New --data CLI flag allows building locally with production Notion data (bun run serve:prod). Automatically clears disk cache when switching data sources to prevent stale content.

Changed

Project header layout: Reordered header sections to title → description → button → technologies → last updated. Status pill is now flex-aligned with the project logo instead of absolute-positioned.

Project cards: Removed status pills from project cards on the home and project list pages for a cleaner look.

Fixed

YouTube embeds: Notion sends YouTube links as video block type, which was rendered as an empty <video> element. Now detects YouTube URLs in processVideo() and renders them as iframe embeds.

Cache staleness with --data flag: Running serve:prod after build:local no longer serves stale dev data — cache is cleared whenever --data is specified.

Technical

New notionUrl field on the Project interface in fusite-commons

extractYouTubeId() utility for parsing YouTube URLs (standard and short formats)

parseEnvFile() and overrideNotionEnv() helpers in CLI for selective environment variable overrides

Added serve:prod script to package.json

Fixes and improvements to how Notion content is rendered on published pages.

Fixed

Table cell rich text formatting: Table cells now preserve inline formatting from Notion (code, bold, italic, underline, strikethrough, links) instead of rendering as plain text

Added

Image width control via caption tag: Images support a [w:XX%] tag in the Notion caption to control display width (e.g. [w:60%]). The tag is stripped from the visible caption. Width defaults to 100% when no tag is present

Technical

Replaced manual plain_text extraction in processTableRowWithChildren() with processRichText() to apply Notion annotations

Added parseImageCaptionWidth() helper to parse and strip width tags from captions

Applied max-width style to the <figure> wrapper when a caption is present, or directly to the <img> when there is no caption, avoiding double-application

Updated three image rendering paths: processImage(), processImageWithS3(), and processNotionImage() in imageProcessor.ts

The Fuscripts site is live! After a lot of tweaking to materialize the image I had in my mind for my personal website is finally here.

Let’s see how long it lasts until I want to change it.

Added

Static Site Generator: Custom build pipeline using TypeScript, Handlebars templates, and Rollup bundler

Notion Integration: Full integration with Notion API for content management (projects, chronicles, documentation)

Projects Metadata API: REST API endpoint (GET /fusite/projects) serving project information from Notion

Intelligent Build Cache: File-based caching system with timestamp validation for Notion API responses

Project Pages: Complete project detail pages with overview, documentation, and timeline sections

Responsive Layout: Mobile-first design with comprehensive mobile optimization (95% page compatibility)

Template System: Modular Handlebars templates with reusable components and partials

Technical

Build Performance with cache control: 66x faster builds with cache enabled (112s → 1.7s when content unchanged)

Technology Stack: Bun runtime, TypeScript 5.9+, Handlebars, Tailwind CSS, AWS S3 + CloudFront

Pagination Support: Proper handling of Notion API pagination for large pages (100+ blocks)

Parallel Processing: Parallelized block fetching using Promise.all for improved performance

Deployment: Static site deployment to AWS S3 with CloudFront CDN integration

Testing: Playwright end-to-end test suite covering mobile responsiveness, image loading, and link functionality