Skip to content

feat: redesign with new typography, /videos route, RSS, SEO - #37

Open
aanogueira wants to merge 57 commits into
mainfrom
redesign/2026-05
Open

feat: redesign with new typography, /videos route, RSS, SEO#37
aanogueira wants to merge 57 commits into
mainfrom
redesign/2026-05

Conversation

@aanogueira

Copy link
Copy Markdown
Contributor

Typography:

  • Body font swapped from Fira Code to Inter Variable (mono stays Fira Mono so arrow animations and code blocks are unchanged)
  • Body font-weight 300 → 400 for proper Inter rendering

New routes and content:

  • /videos index + /videos/[slug] dynamic route with embedded YouTube player (youtube-nocookie); back link to /videos
  • /videos/rss.xml feed mirroring blog/projects RSS structure
  • Sample video content file for the welcome placeholder

Navigation & UI:

  • /about rewritten with intro + Phosphor icons on external links (GitHub, LinkedIn, Medium, dev.to, BMC) and a single global RSS link
  • /contact icons before the platform label
  • Per-section RSS chip on /blog, /projects, /videos with [N] count
  • Project carousel arrows hidden when slides fit; per-image aspect ratio (16:9 default, 9:16 for tall variant)
  • Projects index uses 110rem container, explicit 3/2/1 col grid
  • Back links: global a.back rule with mono <- arrow that slides on hover
  • Logo click toggles theme (replaces removed standalone Toggle); h1 text still navigates home
  • Theme attribute set from prefers-color-scheme on load (no localStorage), console override still possible via setAttribute

SEO:

  • VideoObject JSON-LD added on /videos/[slug] (uses YouTube thumbnail, embed and watch URLs)
  • PageHead handles absolute image URLs (YouTube thumbnails for video pages)
  • robots.txt allows /videos/rss.xml
  • Sitemap includes /videos and per-video URLs
  • WebSite JSON-LD wired on home page

Spacing & polish:

  • Top spacing unified to 24px from header across every page (index, about/contact, slug pages)
  • Skip-to-content link background fixed (was referencing undefined --bg-1)
  • /about icon color matches /contact icon color

Pull Request

Description

Type of Change

  • 🐛 Bug fix (non-breaking change which fixes an issue)
  • ✨ New feature (non-breaking change which adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • 📝 Documentation update
  • 🎨 Code style update (formatting, renaming)
  • ♻️ Code refactoring (no functional changes)
  • ⚡ Performance improvement
  • ✅ Test update
  • 🔧 Build/CI configuration change
  • 🔒 Security fix

Related Issues

Fixes #(issue number)
Related to #(issue number)

Changes Made

Testing

  • Existing tests pass (make test)
  • New tests added (if applicable)
  • Manual testing performed
  • Linter passes (make lint)

Test Coverage

  • Current coverage: __%
  • Coverage change: __% (increase/decrease)

Screenshots/Recordings

Checklist

  • My code follows the project's style guidelines
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • Any dependent changes have been merged and published

Additional Notes

@github-actions

github-actions Bot commented May 26, 2026

Copy link
Copy Markdown

Dependency Review

The following issues were found:
  • ✅ 0 vulnerable package(s)
  • ✅ 0 package(s) with incompatible licenses
  • ✅ 0 package(s) with invalid SPDX license definitions
  • ⚠️ 1 package(s) with unknown licenses.
See the Details below.

License Issues

package.json

PackageVersionLicenseIssue Type
dompurify^3.4.12NullUnknown License
Allowed Licenses: MIT, Apache-2.0, BSD-2-Clause, BSD-3-Clause, ISC, 0BSD

OpenSSF Scorecard

Scorecard details
PackageVersionScoreDetails
npm/@iconify-json/ph ^1.2.2 UnknownUnknown
npm/@playwright/test ^1.62.0 UnknownUnknown
npm/@sveltejs/kit ^2.70.1 UnknownUnknown
npm/@testing-library/jest-dom ^6.10.0 UnknownUnknown
npm/dompurify ^3.4.12 UnknownUnknown
npm/eslint-plugin-svelte ^3.22.0 UnknownUnknown
npm/mdsvex ^0.12.8 UnknownUnknown
npm/prettier ^3.9.6 UnknownUnknown
npm/sass ^1.102.0 UnknownUnknown
npm/svelte ^5.56.8 UnknownUnknown
npm/vite ^8.1.5 UnknownUnknown

Scanned Files

  • package.json

@codecov-commenter

codecov-commenter commented May 26, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 67.16418% with 44 lines in your changes missing coverage. Please review.

Files with missing lines Patch % Lines
src/lib/components/AsciiField.svelte 65.06% 29 Missing ⚠️
src/lib/utils/structured-data.js 0.00% 9 Missing ⚠️
src/lib/js/ascii-burst.js 40.00% 3 Missing ⚠️
src/lib/js/theme.js 0.00% 3 Missing ⚠️

📢 Thoughts on this report? Let us know!

Typography:
- Body font swapped from Fira Code to Inter Variable (mono stays Fira Mono so arrow animations and code blocks are unchanged)
- Body font-weight 300 → 400 for proper Inter rendering

New routes and content:
- /videos index + /videos/[slug] dynamic route with embedded YouTube
  player (youtube-nocookie); back link to /videos
- /videos/rss.xml feed mirroring blog/projects RSS structure
- Sample video content file for the welcome placeholder

Navigation & UI:
- /about rewritten with intro + Phosphor icons on external links
  (GitHub, LinkedIn, Medium, dev.to, BMC) and a single global RSS link
- /contact icons before the platform label
- Per-section RSS chip on /blog, /projects, /videos with [N] count
- Project carousel arrows hidden when slides fit; per-image aspect
  ratio (16:9 default, 9:16 for tall variant)
- Projects index uses 110rem container, explicit 3/2/1 col grid
- Back links: global a.back rule with mono <- arrow that slides on hover
- Logo click toggles theme (replaces removed standalone Toggle); h1
  text still navigates home
- Theme attribute set from prefers-color-scheme on load (no localStorage),
  console override still possible via setAttribute

SEO:
- VideoObject JSON-LD added on /videos/[slug] (uses YouTube
  thumbnail, embed and watch URLs)
- PageHead handles absolute image URLs (YouTube thumbnails for
  video pages)
- robots.txt allows /videos/rss.xml
- Sitemap includes /videos and per-video URLs
- WebSite JSON-LD wired on home page

Spacing & polish:
- Top spacing unified to 24px from header across every page (index,
  about/contact, slug pages)
- Skip-to-content link background fixed (was referencing undefined
  --bg-1)
- /about icon color matches /contact icon color

Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Enable Svelte 5 component testing: add @testing-library/svelte's
svelteTesting() vite plugin (browser resolve condition) and stop
test-setup.js from clobbering jsdom's document (removed document.body).

Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
…off the client

Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
…en readers

Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
…ption

Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
…ler screens

Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
…ered hero

Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
… under the date

Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
…the post page

Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
…trance stagger

Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
…, wrap nav instead of clipping

Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
…line, no wrap/clip)

Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
…out analytics

Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
… the flow

Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Pixelify Sans clashed with the loop mark, which is drawn with thin,
geometric strokes. Point $font-family-display at the mono already used
sitewide so there is one type voice, and set the display weight to 500 —
bold mono stems read far heavier than the logo sitting next to them.

Adds Fira Mono 500/700 faces (only 400 was loaded), drops pixelify-sans.css
and its import, and regenerates the OG card to match.

Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
All ~icons/ph/* imports resolved locally via an undeclared 420MB
@iconify/json in node_modules. CI installs with --frozen-lockfile,
so no ph collection was ever present and unplugin-icons failed on
the first icon it hit (ph/linkedin-logo).

Add the 4.4MB per-collection package instead of the full monolith.

Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
The redesign renamed the nav copy in nav.js (Projects->Quests,
Blog->Chronicles, Videos->Sagas) and collapsed the nav behind a
toggle below 1080px. Two e2e tests still asserted the old labels
on an always-visible nav, failing on all five browser projects.

Read the labels from nav.js instead of duplicating the copy, and
open the dropdown first when it is collapsed. Match the nav link
exactly so the 'Tech Quests' wordmark does not collide.

Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Trivy gates PRs on HIGH/CRITICAL and found 10 in the image: 5 in Alpine
packages and 5 compiled into the caddy binary.

The Alpine ones have fixed packages published for the same release, so
apk upgrade fixes them outright (c-ares 1.34.8-r0, curl/libcurl
8.20.0-r0) rather than suppressing them.

The Go ones cannot be fixed here: caddy:alpine already resolves to the
newest published image (2.11.4, Go 1.26.3) and every fix needs a
toolchain upstream has not rebuilt against. Ignore those five with a
per-CVE rationale and a note to re-check once Caddy ships a Go 1.26.4
build.

Signed-off-by: Andre Nogueira <aanogueira@protonmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants