From 33dcc4d16995c62f3dddecaa69b9664cff7258c8 Mon Sep 17 00:00:00 2001 From: Ben Durrant Date: Thu, 16 Jul 2026 14:12:44 +0100 Subject: [PATCH 01/11] enable code ligature preference in user settings --- website/src/routes/__root.tsx | 74 ++++++++++++------- website/src/shared/components/dialog/pref.tsx | 37 +++++++++- .../src/shared/components/prefs/context.tsx | 9 ++- .../src/shared/components/prefs/provider.tsx | 6 +- website/src/shared/lib/analytics.ts | 3 +- website/src/shared/lib/prefs/constants.ts | 3 + website/src/shared/lib/prefs/index.ts | 19 ++++- website/src/shared/styles/index.css | 38 +++++++++- 8 files changed, 150 insertions(+), 39 deletions(-) diff --git a/website/src/routes/__root.tsx b/website/src/routes/__root.tsx index ce0af8ddf..e155ed797 100644 --- a/website/src/routes/__root.tsx +++ b/website/src/routes/__root.tsx @@ -15,12 +15,17 @@ import { PreferencesDialog } from "#/shared/components/dialog/pref"; import { Footer } from "#/shared/components/footer"; import { Header } from "#/shared/components/header"; import * as mdxComponents from "#/shared/components/mdx"; -import { NpmSiteProvider, StyleProvider, ThemeProvider } from "#/shared/components/prefs/provider"; +import { + NpmSiteProvider, + StyleProvider, + ThemeProvider, + LigatureProvider, +} from "#/shared/components/prefs/provider"; import { ScrollToTop } from "#/shared/components/scroll-to-top"; import { Sidebar } from "#/shared/components/sidebar"; import { SidebarProvider } from "#/shared/components/sidebar/context"; import { Snackbars } from "#/shared/components/snackbar"; -import { getNpmSiteFn, getStyleFn, getThemeFn } from "#/shared/lib/prefs"; +import { getNpmSiteFn, getStyleFn, getThemeFn, getLigatureFn } from "#/shared/lib/prefs"; import { symbolsUrl } from "../../vite/symbols"; @@ -34,7 +39,12 @@ const iconSuffixes = process.env.NODE_ENV === "production" ? ["light", "dark"] : export const Route = createRootRouteWithContext()({ loader: () => - promiseAllKeyed({ theme: getThemeFn(), style: getStyleFn(), npmSite: getNpmSiteFn() }), + promiseAllKeyed({ + theme: getThemeFn(), + style: getStyleFn(), + npmSite: getNpmSiteFn(), + ligature: getLigatureFn(), + }), staticData: { crumb: undefined }, head: () => { @@ -111,38 +121,46 @@ export const Route = createRootRouteWithContext()({ }); function RootDocument({ children }: { children: React.ReactNode }) { - const { theme, style, npmSite } = Route.useLoaderData(); + const { theme, style, npmSite, ligature } = Route.useLoaderData(); useRegisterSW({ immediate: true }); const [prefsOpen, setPrefsOpen] = useState(false); return ( - + - - - - -
- - -
-
setPrefsOpen(true)} /> - -
{children}
-
- - - - setPrefsOpen(false)} /> -
- -
- - - - + + + + + +
+ + +
+
setPrefsOpen(true)} /> + +
{children}
+
+ + + + setPrefsOpen(false)} /> +
+ +
+ + + + + @@ -55,6 +56,30 @@ export function PreferencesDialog({ open, onClose }: PreferencesDialogProps) { selected={npmSite} onChange={setNpmSite} /> + + => + + ), + }, + false: { + label: "Off", + icon: ( + + => + + ), + }, + }} + title="Code ligatures" + selected={ligature} + onChange={setLigature} + /> @@ -65,7 +90,7 @@ interface PrefGroupProps { title: ReactNode; titleId?: string; options: ReadonlyArray; - labels: Record; + labels: Record; selected: TOpt; onChange: (opt: TOpt) => void; } @@ -86,7 +111,13 @@ function PrefGroup({ {options.map((opt) => (