a2nr
/
velxio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(examples): add a Retro category to the gallery sidebar 

A tag-based 'Retro' tab (next to All) collects the Z80 / Intel / vintage-CPU
examples via their 'retro' tag, regardless of board filter (they still also
appear under Digital). One-file change: BOARD_TABS + an isRetro predicate
special-cased in the filter and the tab count.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
David Montero 2026-06-04 22:08:43 +02:00
parent 5f04b42bdd
commit 7b483f6109
1 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/examples/ExamplesGallery.tsx
View File

@ -25,6 +25,7 @@ interface BoardTab {
const BOARD_TABS: BoardTab[] = [
{ id: 'all', label: 'All', color: '#ffffff', bg: '#444444' },
{ id: 'retro', label: 'Retro', color: '#1a1a1a', bg: '#e0a82e' },
{ id: 'arduino-uno', label: 'Arduino Uno', color: '#ffffff', bg: '#007acc' },
{ id: 'arduino-nano', label: 'Arduino Nano', color: '#ffffff', bg: '#0055aa' },
{ id: 'arduino-mega', label: 'Arduino Mega', color: '#ffffff', bg: '#003388' },
@ -41,6 +42,13 @@ const BOARD_TABS: BoardTab[] = [
{ id: 'digital', label: 'Digital', color: '#ffffff', bg: '#6366f1' },
];
/** The "Retro" tab is tag-based (not board-kind based) so it can collect the
* Z80 / Intel / vintage-CPU examples regardless of their board filter. They
* also still appear under their board tab (Digital), so this is additive. */
function isRetro(example: ExampleProject): boolean {
return (example.tags ?? []).includes('retro');
}
function getBoardFilter(example: ExampleProject): string {
// An explicit boardFilter is the author's intent and wins — even for
// examples authored with the multi-board `boards[]` format (e.g. the STM32
@ -95,7 +103,9 @@ export const ExamplesGallery: React.FC<ExamplesGalleryProps> = ({ onLoadExample
.toLowerCase();
const filteredExamples = exampleProjects.filter((example) => {
const boardMatch = selectedBoard === 'all' || getBoardFilter(example) === selectedBoard;
const boardMatch =
selectedBoard === 'all' ||
(selectedBoard === 'retro' ? isRetro(example) : getBoardFilter(example) === selectedBoard);
const catMatch = selectedCategory === 'all' || example.category === selectedCategory;
const diffMatch = selectedDifficulty === 'all' || example.difficulty === selectedDifficulty;
if (!boardMatch || !catMatch || !diffMatch) return false;
@ -113,7 +123,10 @@ export const ExamplesGallery: React.FC<ExamplesGalleryProps> = ({ onLoadExample
});
// Count per board for tab badges
const boardCounts: Record<string, number> = { all: exampleProjects.length };
const boardCounts: Record<string, number> = {
all: exampleProjects.length,
retro: exampleProjects.filter(isRetro).length,
};
exampleProjects.forEach((ex) => {
const b = getBoardFilter(ex);
boardCounts[b] = (boardCounts[b] ?? 0) + 1;