Skip to content

Commit dbd0314

Browse files
baudbot-agentbaudbot-agent
committed
feat: update dropdown icons, move last-updated to header with commit link
## Icon changes - Tools dropdown: replaced ListFilter (lucide) with Geist terminal-window icon - Fixtures dropdown: replaced Package icon with Geist briefcase icon - New icon components: TerminalWindow, Briefcase (16×16 SVG from Geist icons) ## Last updated + commit hash - Moved 'last updated' date from footer to header, displayed as small text to the right of the 'Benchmarks' title (hidden on mobile to save space) - Added commit SHA link (short 7-char hash) that links to the GitHub commit associated with the benchmark run - generate-chart.js now accepts an optional commit SHA as second argument and includes it as `commitSha` in chart-data.json - process-results.sh passes GITHUB_SHA (or git rev-parse HEAD as fallback) to generate-chart.js - BenchmarkChartData type updated with optional `commitSha` field - Footer simplified: removed date display, kept methodology + theme switcher
1 parent 2cac036 commit dbd0314

11 files changed

Lines changed: 97 additions & 38 deletions

File tree

‎app/src/app.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const App = () => {
5151
{error && <ErrorDisplay message={error} />}
5252
<Outlet context={{ chartData, historyData }} />
5353
</main>
54-
<Footer lastUpdated={chartData.date} />
54+
<Footer />
5555
</div>
5656
</YAxisProvider>
5757
</FixtureFilterProvider>

‎app/src/components/fixture-filter.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { Check, ChevronRight } from "lucide-react";
1111
import { useFixtureFilter } from "@/contexts/fixture-filter-context";
1212
import { getFixtureDisplayName } from "@/lib/utils";
1313
import { getFrameworkIcon } from "@/lib/get-icons";
14-
import { Package } from "@/components/icons";
14+
import { Briefcase } from "@/components/icons";
1515

1616
import type { Fixture } from "@/types/chart-data";
1717

@@ -38,7 +38,7 @@ export const FixtureFilter = ({ fixtures }: FixtureFilterProps) => {
3838
className="rounded-lg dark:border-neutral-700 dark:hover:border-neutral-600 border hover:border-neutral-300 border-neutral-200 shadow-none bg-neutral-100 hover:bg-neutral-200 [&[data-state=open]>svg[data-id=chevron]]:rotate-90 dark:hover:bg-neutral-700 dark:bg-neutral-800 text-black dark:text-white min-w-0 w-auto"
3939
>
4040
<Button size="sm" className="text-xs md:text-sm">
41-
<Package className="flex-shrink-0" />
41+
<Briefcase className="flex-shrink-0" />
4242
Fixtures
4343
<span className="text-xs text-muted-foreground whitespace-nowrap">
4444
({enabledCount}/{totalCount})

‎app/src/components/footer.tsx‎

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import { Vlt } from "@/components/icons";
22
import { ThemeSwitcher } from "@/components/theme-switcher";
33
import { useTheme } from "@/components/theme-provider";
4-
import { format } from "date-fns";
5-
import { cn } from "@/lib/utils";
64

7-
export const Footer = ({ lastUpdated }: { lastUpdated?: string }) => {
5+
export const Footer = () => {
86
const { theme } = useTheme();
97

108
return (
@@ -135,20 +133,7 @@ export const Footer = ({ lastUpdated }: { lastUpdated?: string }) => {
135133
</div>
136134
</div>
137135

138-
<div
139-
className={cn(
140-
"max-w-7xl ml-0 justify-between w-full flex flex-col md:flex-row items-start md:items-center gap-3 px-0 md:pl-12 md:pr-0 pt-4 md:py-8",
141-
lastUpdated ? "md:justify-between" : "md:justify-end",
142-
)}
143-
>
144-
{lastUpdated && (
145-
<p className="font-medium inline-flex items-baseline text-sm text-muted-foreground">
146-
Last updated:
147-
<span className="ml-2">
148-
{format(lastUpdated, "MMMM dd, yyyy")}
149-
</span>
150-
</p>
151-
)}
136+
<div className="max-w-7xl ml-0 justify-end w-full flex flex-col md:flex-row items-start md:items-center gap-3 px-0 md:pl-12 md:pr-0 pt-4 md:py-8">
152137
<ThemeSwitcher />
153138
</div>
154139
</div>

‎app/src/components/header.tsx‎

Lines changed: 42 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { FixtureFilter } from "@/components/fixture-filter";
55
import { VariationDropdown } from "@/components/variation-dropdown";
66
import { Benchmarks, Package, StopWatch, Database } from "@/components/icons";
77
import { Button } from "@/components/ui/button";
8+
import { format } from "date-fns";
89
import {
910
cn,
1011
calculateLeaderboard,
@@ -207,21 +208,47 @@ const HeaderNavigation = forwardRef<HTMLDivElement, ComponentProps<"div">>(
207208
HeaderNavigation.displayName = "HeaderNavigation";
208209

209210
const HeaderLogo = forwardRef<HTMLDivElement, ComponentProps<"div">>(
210-
({ className, ...props }, ref) => (
211-
<div
212-
ref={ref}
213-
className={cn(
214-
"flex flex-row items-center gap-2 flex-shrink-0",
215-
className,
216-
)}
217-
{...props}
218-
>
219-
<Benchmarks className="size-6" />
220-
<h1 className="text-lg md:text-2xl font-semibold tracking-tight">
221-
Benchmarks
222-
</h1>
223-
</div>
224-
),
211+
({ className, ...props }, ref) => {
212+
const { chartData } = useHeaderContext();
213+
const lastUpdated = chartData?.date;
214+
const commitSha = chartData?.commitSha;
215+
const shortSha = commitSha ? commitSha.slice(0, 7) : undefined;
216+
217+
return (
218+
<div
219+
ref={ref}
220+
className={cn(
221+
"flex flex-row items-center gap-2 flex-shrink-0",
222+
className,
223+
)}
224+
{...props}
225+
>
226+
<Benchmarks className="size-6" />
227+
<h1 className="text-lg md:text-2xl font-semibold tracking-tight">
228+
Benchmarks
229+
</h1>
230+
{lastUpdated && (
231+
<span className="text-xs text-muted-foreground font-medium ml-1 hidden md:inline-flex items-center gap-1.5">
232+
<span className="text-border">·</span>
233+
{format(lastUpdated, "MMM d, yyyy")}
234+
{shortSha && (
235+
<>
236+
<span className="text-border">·</span>
237+
<a
238+
href={`https://github.com/vltpkg/benchmarks/commit/${commitSha}`}
239+
target="_blank"
240+
rel="noopener noreferrer"
241+
className="font-mono hover:underline text-muted-foreground hover:text-foreground transition-colors"
242+
>
243+
{shortSha}
244+
</a>
245+
</>
246+
)}
247+
</span>
248+
)}
249+
</div>
250+
);
251+
},
225252
);
226253
HeaderLogo.displayName = "HeaderTitle";
227254

‎app/src/components/icons/briefcase.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import type { SVGProps } from "react";
2+
3+
export const Briefcase = (props: SVGProps<SVGSVGElement>) => (
4+
<svg
5+
viewBox="0 0 16 16"
6+
width="16"
7+
height="16"
8+
fill="currentColor"
9+
strokeLinejoin="round"
10+
{...props}
11+
>
12+
<path
13+
fillRule="evenodd"
14+
clipRule="evenodd"
15+
d="M6 2.5H10C10.2761 2.5 10.5 2.72386 10.5 3V4H5.5V3C5.5 2.72386 5.72386 2.5 6 2.5ZM4 4V3C4 1.89543 4.89543 1 6 1H10C11.1046 1 12 1.89543 12 3V4H14.5H16V5.5V13.5C16 14.8807 14.8807 16 13.5 16H2.5C1.11929 16 0 14.8807 0 13.5V5.5V4H1.5H4ZM12 5.5H10.5H5.5H4H1.5V9.25H7.25V8.5H8.75V9.25L14.5 9.25V5.5H12ZM8.75 10.75L14.5 10.75V13.5C14.5 14.0523 14.0523 14.5 13.5 14.5H2.5C1.94772 14.5 1.5 14.0523 1.5 13.5V10.75H7.25V11.5H8.75V10.75Z"
16+
/>
17+
</svg>
18+
);

‎app/src/components/icons/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@ export * from "./vlt.tsx";
33
export * from "./benchmarks.tsx";
44

55
// general icons
6+
export * from "./briefcase.tsx";
67
export * from "./clock.tsx";
78
export * from "./database.tsx";
89
export * from "./stop-watch.tsx";
910
export * from "./share.tsx";
1011
export * from "./package.tsx";
1112
export * from "./bar-chart.tsx";
13+
export * from "./terminal-window.tsx";
1214

1315
// ecosystem icons
1416
export * from "./astro.tsx";

‎app/src/components/icons/terminal-window.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import type { SVGProps } from "react";
2+
3+
export const TerminalWindow = (props: SVGProps<SVGSVGElement>) => (
4+
<svg
5+
viewBox="0 0 16 16"
6+
width="16"
7+
height="16"
8+
fill="currentColor"
9+
strokeLinejoin="round"
10+
{...props}
11+
>
12+
<path
13+
fillRule="evenodd"
14+
clipRule="evenodd"
15+
d="M1.5 2.5H14.5V12.5C14.5 13.0523 14.0523 13.5 13.5 13.5H2.5C1.94772 13.5 1.5 13.0523 1.5 12.5V2.5ZM0 1H1.5H14.5H16V2.5V12.5C16 13.8807 14.8807 15 13.5 15H2.5C1.11929 15 0 13.8807 0 12.5V2.5V1ZM4 11.1339L4.44194 10.6919L6.51516 8.61872C6.85687 8.27701 6.85687 7.72299 6.51517 7.38128L4.44194 5.30806L4 4.86612L3.11612 5.75L3.55806 6.19194L5.36612 8L3.55806 9.80806L3.11612 10.25L4 11.1339ZM8 9.75494H8.6225H11.75H12.3725V10.9999H11.75H8.6225H8V9.75494Z"
16+
/>
17+
</svg>
18+
);

‎app/src/components/package-manager-filter.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import {
77
DropdownMenuItem,
88
DropdownMenuSeparator,
99
} from "@/components/ui/dropdown-menu";
10-
import { ListFilter, Check, ChevronRight } from "lucide-react";
10+
import { Check, ChevronRight } from "lucide-react";
11+
import { TerminalWindow } from "@/components/icons";
1112
import { usePackageManagerFilter } from "@/contexts/package-manager-filter-context";
1213
import { getPackageManagerDisplayName } from "@/lib/utils";
1314
import { resolveTheme, useTheme } from "@/components/theme-provider";
@@ -52,7 +53,7 @@ export const PackageManagerFilter = ({
5253
className="rounded-lg dark:border-neutral-700 dark:hover:border-neutral-600 border hover:border-neutral-300 border-neutral-200 shadow-none bg-neutral-100 hover:bg-neutral-200 [&[data-state=open]>svg[data-id=chevron]]:rotate-90 dark:hover:bg-neutral-700 dark:bg-neutral-800 text-black dark:text-white min-w-0 w-auto"
5354
>
5455
<Button size="sm" className="text-xs md:text-sm">
55-
<ListFilter className="flex-shrink-0" />
56+
<TerminalWindow className="flex-shrink-0" />
5657
Tools
5758
<span className="text-xs text-muted-foreground whitespace-nowrap">
5859
({enabledCount}/{totalCount})

‎app/src/types/chart-data.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,7 @@ export interface ChartDataSet {
141141

142142
export interface BenchmarkChartData {
143143
date: string;
144+
commitSha?: string;
144145
chartData: ChartDataSet;
145146
perPackageCountChartData: ChartDataSet;
146147
registryChartData?: ChartDataSet;

‎scripts/generate-chart.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ if (!DATE) {
1313
process.exit(1);
1414
}
1515

16+
// Optional commit SHA passed as second argument
17+
const COMMIT_SHA = process.argv[3] || "";
18+
1619
const RESULTS_DIR = path.resolve("results", DATE);
1720
if (!fs.existsSync(RESULTS_DIR)) {
1821
console.error(`Error: Results directory ${RESULTS_DIR} does not exist`);
@@ -375,6 +378,7 @@ const dumpChartData = () => {
375378

376379
const results = {
377380
date: DATE,
381+
...(COMMIT_SHA ? { commitSha: COMMIT_SHA } : {}),
378382
chartData: {
379383
variations: chartData.variations,
380384
data: chartData.data,

0 commit comments

Comments
 (0)