Skip to content

Redesign tutorials filter UI with skill tabs, search, and collapsible tags#1

Open
konopkja wants to merge 1246 commits into
devfrom
redesign/tutorials-filter-ui
Open

Redesign tutorials filter UI with skill tabs, search, and collapsible tags#1
konopkja wants to merge 1246 commits into
devfrom
redesign/tutorials-filter-ui

Conversation

@konopkja
Copy link
Copy Markdown
Owner

Summary

  • Skill-level TabNav: Replaces flat tag layout with animated tab selector (All / Beginner / Intermediate / Advanced) with counts and icons, using the same TabNav component from the events page
  • Inline search: Text search across tutorial title, description, tags, and author — positioned on the same row as the skill tabs
  • Collapsible topic tags: Top 12 tags by popularity shown by default, remaining behind a "+N more" expander to eliminate the wall-of-tags problem
  • Active filters summary: Dismissible pills showing current skill, tag, and search filters with a clear-all action
  • ContentHero header: Modernized page header using ContentHero with breadcrumbs, doge-computer hero image, and submit button integrated into the hero
  • Color-coded skill badges: Tutorial cards now use green/yellow/red tag variants for beginner/intermediate/advanced

Before

~54 tags displayed as a flat grid with no hierarchy or grouping

After

Structured filter UI with skill tabs, search, and organized topic tags

Test plan

  • Visit /developers/tutorials/ and verify the ContentHero renders with doge image and submit button
  • Click each skill tab (All/Beginner/Intermediate/Advanced) and confirm filtering works
  • Type in the search bar and confirm results filter by title/description/tags/author
  • Click topic tags and verify AND-logic filtering
  • Click "+N more" to expand all tags, then "Show less" to collapse
  • Verify active filters summary appears with dismissible pills
  • Click "Clear" to reset all filters
  • Verify skill badges on cards are color-coded (green/yellow/red)
  • Test on mobile viewport — tabs should stack above search
  • Verify skeleton loader matches new layout structure

🤖 Generated with Claude Code

minimalsm and others added 30 commits February 14, 2026 00:14
Replace substring-matching contains() with array-based exact matching in both claude.yml and claude-review-translations.yml to prevent unauthorized users with partial username matches from triggering workflows.

Move github.event.comment.body from direct shell interpolation to env variable to prevent command injection via crafted PR comments.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
…ions

fix(ci): prevent auth bypass and command injection in Claude workflows
- energy-consumption: fix "machanismus" -> "mechanismus", "vetšinou" -> "většinou", "založze" -> "založte"
- how-to-create-an-ethereum-account: fix "učet" -> "účet"
- eth/supply: fix broken markdown link for staking
- Fix broken markdown link in wrapped-eth (missing ] before ()
- Fix "Nadace Etheria" -> "Nadace Ethereum" in learn-quizzes
- Fix untranslated "gas" -> "palivo" in page-gas benefits
- Fix "plyn" -> "palivo" inconsistency in glossary-tooltip (4 occurrences)
fredrik0x and others added 18 commits February 17, 2026 14:11
…tion-prevention

fix(ci): complete injection prevention in translation review workflow
…d-info

fix: update outdated info on AI agents page
…-links

fix: remove broken DeFi Pulse links
Add page-developers-ethskills-label to all non-English page-developers-index.json translation files.
Creates new te (Telugu) locale file where one did not yet exist.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
feat: add ethskills.com link to developers page
Added Audittens and DongHan Kim to bug bounty leaderboard
Reduce webpack memory consumption during build by using direct filesystem
reads instead of dynamic imports for translation JSON files and markdown
content. This prevents webpack from creating chunks for thousands of
potential import paths (60+ locales × 50 namespaces + 4000+ md files).
perf: replace dynamic imports with fs.readFile for i18n and md content
…per-feed

perf: limit RSS items to 3 per feed
wackerow and others added 6 commits February 19, 2026 13:54
- remove dynamic import
- pass label as children
Co-authored-by: Gemini <noreply@google.com>
- Match skeleton loading fallback to actual component layout (max-w-screen-lg, lg breakpoints)
- Translate skill name in active filter summary
- Add aria-label to search input for screen readers
- Fix Text component type (HTMLParagraphElement, not HTMLHeadElement)
- Remove redundant array spread in setSelectedTags
- Guard skill Tag render against undefined tutorial.skill

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants