Commit Graph

101 Commits

Author SHA1 Message Date
Vinta Chen
9425ab5921
refactor(js): replace var with const for immutable bindings
Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-24 13:37:35 +08:00
Vinta Chen
0b081100d2
fix(css): remove explicit flex layout from .hero-topbar mobile override
The flex properties (align-items, flex-direction, flex-wrap, justify-content)
were overriding the default layout unnecessarily on mobile.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-24 13:35:06 +08:00
Vinta Chen
80d9279f78
refactor(css): consolidate .sort-btn:focus-visible into shared focus-visible selector block
Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-24 13:34:57 +08:00
Vinta Chen
7fdf6ab307
refactor(js): hoist repeated queries, drop stale comments, tighten collapseAll scope
- Hoist reducedMotion and sortHeaders to module scope to avoid repeated
  DOM queries on every call
- collapseAll now queries within tbody instead of the full document
- Replace indexOf with includes for tag filtering
- Remove null check on activeSort (always initialized)
- Drop inline section comments that just restate the code

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-24 13:34:20 +08:00
Vinta Chen
57a5b432f6
fix(js): drop legacy category/group URL param aliases for filter
Only the canonical 'filter' query param is supported. The 'category'
and 'group' aliases were never documented and silently accepted wrong
spellings; removing them prevents hidden coupling to old URL shapes.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-24 13:19:42 +08:00
Vinta Chen
d7a7e68475
refactor(js): simplify filter state to a plain string
Replace the { type, value } filter object with a plain string value.
Merge data-cats and data-groups row attributes into a single data-tags
attribute. Drop data-type from tag buttons. Consolidate category/group
URL params into a single filter param, keeping backward-compat fallback.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-24 13:18:26 +08:00
Vinta Chen
3b69697504
refactor(js): extract getScrollBehavior() helper to deduplicate prefers-reduced-motion check
The same matchMedia query was inlined twice (hero scroll and back-to-top).
Extracted into a shared helper. Also renamed loop variable and reformatted
a chained querySelector call for readability. No behavior change.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-24 13:12:10 +08:00
Vinta Chen
66242cf0c9
refactor(css): consolidate .expand-commit into shared mobile media query
Was in a standalone @media (max-width: 960px) block; now lives inside
the existing mobile breakpoint block alongside sibling expand-row rules.
No visual change.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-24 13:12:00 +08:00
Vinta Chen
53684e7c40
fix(css): increase sort button focus outline-offset from 2px to 3px
Gives the focus ring a bit more breathing room so it doesn't
overlap the button text at the new border-radius.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-24 13:11:51 +08:00
Vinta Chen
eb5b37daf5
feat(ux): smooth-scroll hero CTA without updating URL hash
Add a data-scroll-to attribute to the hero 'Browse the List' anchor
and a JS handler that calls scrollIntoView instead of letting the
browser follow the href, so the URL hash is never written.
Respects prefers-reduced-motion.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-24 13:08:22 +08:00
Vinta Chen
6cb0cac16d
fix(css): increase footer font size from text-xs to text-sm
Footer text was too small to read comfortably. Bumping to --text-sm
improves legibility without breaking the footer layout.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-24 13:06:00 +08:00
Vinta Chen
856f436022
fix(css): consolidate table-wrap overflow-x into single breakpoint
Moves overflow-x: clip from the 680px breakpoint into the 960px
breakpoint, removing the duplicate rule. The value was applied twice
across two consecutive breakpoints with no override in between.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-24 13:03:01 +08:00
Vinta Chen
cf9cde8e8f
fix(css): use display:none for expand-row first/last cells on mobile
Replaces the width/padding/overflow hack with a clean display:none.
The previous approach collapsed the cells to zero size but kept them
in the layout flow; display:none removes them entirely.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-24 13:00:40 +08:00
Vinta Chen
63182f23ab
Revert "feat(css): add external link indicator for inline text links"
This reverts commit 65bc88bb4e.
2026-03-24 12:56:47 +08:00
Vinta Chen
7df2e36334
feat(mobile): show last commit date in expand row on mobile
Add an expand-commit span inside the expand row that displays the last
commit date. Hidden on desktop, visible only on mobile (max-width: 960px)
via media query, mirroring the commit column that appears in the full
table. Relative time formatting is applied via JS on page load.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-24 12:56:04 +08:00
Vinta Chen
ec5687a8f1
fix(css): use overflow-x clip on table-wrap instead of static thead on mobile
Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-24 12:54:37 +08:00
Vinta Chen
0e2c7fcd82
fix(a11y): enlarge tag touch target to meet 44px WCAG minimum
Expand the .tag::after pseudo-element inset and add explicit min-height/
min-width of 44px so the interactive hit area satisfies WCAG 2.5.5. Also
nudge mobile tag padding and font-size slightly for visual consistency.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-24 12:53:43 +08:00
Vinta Chen
65bc88bb4e
feat(css): add external link indicator for inline text links
Appends a small northeast arrow (↗) after target="_blank" anchors
in hero subtitle, expand description, expand also-see, and footer
sections to signal outbound navigation to keyboard and sighted users.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-24 12:52:59 +08:00
Vinta Chen
e06cb93fdc
fix(css): expand sort header hit area to full th cell
Move cursor/hover/user-select styles from .sort-btn to th[data-sort]
so the entire column header cell is the interactive target, not just
the button text node.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-24 12:49:30 +08:00
Vinta Chen
088680e568
fix(css): correct mobile expand-row hiding for col-cat vs expand-row cells
col-cat and expand-row cells need different treatment on mobile:
- col-cat uses display:none (whole column hidden)
- expand-row first/last cells collapse via width/padding/overflow
  rather than display:none to avoid breaking table layout

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-24 12:40:22 +08:00
Vinta Chen
2e5a56723d
fix(css): limit hero sheen animation to 3 iterations
Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-24 12:39:12 +08:00
Vinta Chen
86885bc67a
fix(a11y): wrap sort column headers in button elements
Table sort triggers were bare th elements, which are not keyboard
focusable or announced as interactive by screen readers. Replace with
button elements inside th so keyboard users can activate sorting and
get proper focus-visible ring.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-24 12:38:19 +08:00
Vinta Chen
d58c915a0b
fix(a11y): respect prefers-reduced-motion in back-to-top scroll
Swap the hardcoded 'smooth' scroll behavior for a runtime check so users
who have enabled reduced-motion in their OS get instant (auto) scrolling
instead of the animated kind.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-24 12:37:36 +08:00
Vinta Chen
db83de1b42
Revert "perf: self-host Google Fonts to eliminate render-blocking external request"
This reverts commit f91c8fa979.
2026-03-24 12:35:56 +08:00
Vinta Chen
2bdd0c2c80
fix(a11y): bump hero-proof text lightness from 68% to 75% for WCAG AA contrast
The "Xk+ stars on GitHub / Updated ..." text at oklch(68%) on the dark
hero gradient (oklch 14-28%) could dip below 4.5:1 contrast at the
darkest portions. Raising to oklch(75%) ensures the ratio stays above
4.5:1 across the full gradient range.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-24 12:32:38 +08:00
Vinta Chen
f91c8fa979
perf: self-host Google Fonts to eliminate render-blocking external request
Download Cormorant Garamond 600 and Manrope (variable, 400-800) woff2
files for latin + latin-ext subsets. Add @font-face declarations to
style.css and remove the Google Fonts <link> and preconnect hints from
base.html.

Eliminates the render-blocking CSS fetch to fonts.googleapis.com that
delayed First Contentful Paint by 100-300ms on typical connections.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-24 12:32:25 +08:00
Vinta Chen
60836d00a1
refactor(css): extract inline OKLCH values into CSS custom properties
Add 23 design tokens to :root for colors previously hardcoded inline:
hero text (kicker, proof), hero background gradient, hero button gradient,
accent underline (shared across 3 rules), page background gradient,
table row states (hover, focus, open), sticky header bg, search shadows
and focus ring, tag states, and CTA background.

Decorative one-off values (hero noise, sheen, grid overlay) left inline
since they are tightly coupled to their visual effects.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-24 12:30:22 +08:00
Vinta Chen
8861bcc05d
feat: add Open Graph image for social sharing
Adds og-image.png and og-image.svg assets and wires up the og:image
meta tag in base.html so link previews on Twitter/X, Slack, and other
platforms render a branded image instead of a blank card.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-24 12:22:35 +08:00
Vinta Chen
4a1f899995
fix(css): increase kicker and section-label size and spacing
Bump margin-bottom from 0.9rem to 1.5rem and font-size from
--text-xs to --text-sm for .hero-kicker and .section-label to
improve readability and visual breathing room.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-23 02:09:36 +08:00
Vinta Chen
f27b7c80fb
feat(website): add social proof line to hero with star count and build date
Display the awesome-python repo's star count (formatted as '230k+') and
the last data refresh date below the hero CTA. Fetches the self-repo
star count by always including vinta/awesome-python in the stars fetch.
Also removes the footer date stamp, which is now surfaced in the hero.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-23 01:56:15 +08:00
Vinta Chen
028c642a8e
refactor(js): replace var with let/const and use double quotes
Modernize variable declarations and string literals in main.js for
consistency and to signal immutability intent. Pure style change with
no behavioral differences.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-23 01:34:33 +08:00
Vinta Chen
31fa9a4c38
fix(css): reduce tag badge size and spacing 2026-03-23 01:32:55 +08:00
Vinta Chen
f6cea0599a
fix(css): remove unused tag-subcat styles
The .tag-subcat class was removed from the HTML templates but its
CSS rules remained. Remove the orphaned base styles and clean up
the mobile media query that also referenced the class.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-23 01:12:57 +08:00
Vinta Chen
f2b4a7bc83
feat(website): surface subcategory labels as filterable tags
Entries nested under a plain-text subcategory heading (e.g. "Frameworks"
inside Testing) now carry a subcategory field populated by the parser.
The build pipeline collects these into a subcategories list on each merged
entry, and the template renders them as tag-subcat buttons that plug into
the existing data-cats filter mechanism.

A dedicated .tag-subcat style distinguishes them visually from category
tags, and both are hidden on mobile alongside .tag-group.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-23 01:04:20 +08:00
Vinta Chen
3395b2e428
fix(css): enable table horizontal scroll at 768px breakpoint
Moves .table-wrap overflow-x rule from the 680px breakpoint to 768px
so the table becomes scrollable before it gets too narrow to read.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-23 00:09:06 +08:00
Vinta Chen
88031d78a5
fix(css): center footer on mobile
Consolidate two conflicting mobile footer rules into one, setting
flex-direction to column, align-items to center, and text-align to
center so the footer is symmetrically centered on narrow viewports.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-22 23:58:54 +08:00
Vinta Chen
dbff2522c8
fix(css): hide last column in expand-row on mobile
Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-22 23:52:31 +08:00
Vinta Chen
a92b1a6e86
fix(css): fix hero topbar layout on small screens
Split hero-topbar and footer selectors to apply distinct responsive
styles. The topbar now uses a horizontal row layout with nowrap so
the nav link does not stack vertically, while hero-topbar-actions
and hero-topbar-link get auto widths to avoid stretching full-width.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-22 23:42:18 +08:00
Vinta Chen
014ba9e394
refactor(hero): remove redundant scroll cue
The "Jump to the list" anchor duplicated the "Browse the List" button.
Removes the element, its CSS rules, the scroll-line keyframe animation,
and cleans up the offscreen pause and focus-visible selector lists.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-22 16:29:47 +08:00
Vinta Chen
321df7b78c
refactor(hero): remove metrics block from hero section
The projects/categories/topic groups stats added visual clutter to the
hero without contributing to the core purpose of the section.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-22 16:28:44 +08:00
Vinta Chen
3954a3e742
refactor(css): extract footer color values into CSS custom properties
Hardcoded oklch() values in footer rules are replaced with named tokens
(--footer-bg, --footer-text, --footer-link, --footer-link-hover,
--footer-muted, --footer-sep) declared in :root. No visual change.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-22 16:26:27 +08:00
Vinta Chen
7fa0a425dc
fix(css): remove outline:none suppression from .row:focus-visible td
Suppressing the outline on a focus-visible rule is self-defeating —
it opts into the intent-based focus ring selector but then hides it.
The row already receives a visible inset box-shadow on focus, so the
outline:none was redundant and harmful to keyboard accessibility.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-22 16:25:04 +08:00
Vinta Chen
895da326f6
refactor(css): remove unused --bg-hover and --hero-shadow tokens
Neither variable was referenced anywhere in the stylesheet.
Removing dead tokens keeps the design token surface minimal.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-22 16:24:54 +08:00
Vinta Chen
58c0fd9e45
fix(css): extend focus-visible outline to no-results-clear and footer links
Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-22 16:23:41 +08:00
Vinta Chen
f2b635da19
fix(css): truncate long links in expand-meta and add mobile padding to expand-row
.expand-meta links can overflow their container on narrow viewports.
Apply ellipsis truncation to keep the row tidy.

.expand-row td[colspan] gains symmetric inline padding on mobile to match
the surrounding table spacing.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-22 16:20:52 +08:00
Vinta Chen
86aa623260
fix(css): increase tag padding on mobile breakpoint
Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-22 16:20:14 +08:00
Vinta Chen
6648961d7b
fix(css): hide col-num and expand-row first-child at col-cat breakpoint
Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-22 16:19:38 +08:00
Vinta Chen
80a5051195
fix(css): increase expand meta/also-see font size to --text-sm
--text-xs was too small for secondary metadata rows; bump to --text-sm
for better readability.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-22 16:16:36 +08:00
Vinta Chen
302ae14c2d
refactor(css): remove backdrop-filter blur from table header
Drops the blur(14px) backdrop-filter on the sticky table header and
raises the background opacity from 0.92 to 0.97 so the header remains
clearly readable without the compositing overhead.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-22 16:14:56 +08:00
Vinta Chen
50e27b992f
perf(css): add CSS containment to results section and detail panel
Apply contain: layout style to .results-section and
contain: layout style paint to the detail panel element to reduce
browser layout recalculation scope during search interactions.

Co-Authored-By: Claude <noreply@anthropic.com>
2026-03-22 16:14:11 +08:00