forked from abner/for-legacy-web
Feature: Font selector and ligature toggle.
This commit is contained in:
Paul
@@ -32,18 +32,158 @@ export type Variables =
|
||||
| "status-streaming"
|
||||
| "status-invisible";
|
||||
|
||||
export type Fonts = 'Open Sans' | 'Inter' | 'Atkinson Hyperlegible' | 'Roboto' | 'Noto Sans' | 'Lato' | 'Bree Serif' | 'Montserrat' | 'Poppins' | 'Raleway' | 'Ubuntu' | 'Comic Neue';
|
||||
export type MonoscapeFonts = 'Fira Code' | 'Roboto Mono' | 'Source Code Pro' | 'Space Mono' | 'Ubuntu Mono';
|
||||
|
||||
export type Theme = {
|
||||
[variable in Variables]: string;
|
||||
} & {
|
||||
light?: boolean;
|
||||
font?: Fonts;
|
||||
css?: string;
|
||||
monoscapeFont?: MonoscapeFonts;
|
||||
};
|
||||
|
||||
export interface ThemeOptions {
|
||||
preset?: string;
|
||||
ligatures?: boolean;
|
||||
custom?: Partial<Theme>;
|
||||
}
|
||||
|
||||
export const FONTS: Record<Fonts, { name: string, load: () => void }> = {
|
||||
"Open Sans": {
|
||||
name: "Open Sans",
|
||||
load: async () => {
|
||||
await import("@fontsource/open-sans/300.css");
|
||||
await import("@fontsource/open-sans/400.css");
|
||||
await import("@fontsource/open-sans/600.css");
|
||||
await import("@fontsource/open-sans/700.css");
|
||||
await import("@fontsource/open-sans/400-italic.css");
|
||||
}
|
||||
},
|
||||
Inter: {
|
||||
name: "Inter",
|
||||
load: async () => {
|
||||
await import("@fontsource/inter/300.css");
|
||||
await import("@fontsource/inter/400.css");
|
||||
await import("@fontsource/inter/600.css");
|
||||
await import("@fontsource/inter/700.css");
|
||||
}
|
||||
},
|
||||
"Atkinson Hyperlegible": {
|
||||
name: "Atkinson Hyperlegible",
|
||||
load: async () => {
|
||||
await import("@fontsource/atkinson-hyperlegible/400.css");
|
||||
await import("@fontsource/atkinson-hyperlegible/700.css");
|
||||
await import("@fontsource/atkinson-hyperlegible/400-italic.css");
|
||||
}
|
||||
},
|
||||
"Roboto": {
|
||||
name: "Roboto",
|
||||
load: async () => {
|
||||
await import("@fontsource/roboto/400.css");
|
||||
await import("@fontsource/roboto/700.css");
|
||||
await import("@fontsource/roboto/400-italic.css");
|
||||
}
|
||||
},
|
||||
"Noto Sans": {
|
||||
name: "Noto Sans",
|
||||
load: async () => {
|
||||
await import("@fontsource/noto-sans/400.css");
|
||||
await import("@fontsource/noto-sans/700.css");
|
||||
await import("@fontsource/noto-sans/400-italic.css");
|
||||
}
|
||||
},
|
||||
"Bree Serif": {
|
||||
name: "Bree Serif",
|
||||
load: () => import("@fontsource/bree-serif/400.css")
|
||||
},
|
||||
"Lato": {
|
||||
name: "Lato",
|
||||
load: async () => {
|
||||
await import("@fontsource/lato/300.css");
|
||||
await import("@fontsource/lato/400.css");
|
||||
await import("@fontsource/lato/700.css");
|
||||
await import("@fontsource/lato/400-italic.css");
|
||||
}
|
||||
},
|
||||
"Montserrat": {
|
||||
name: "Montserrat",
|
||||
load: async () => {
|
||||
await import("@fontsource/montserrat/300.css");
|
||||
await import("@fontsource/montserrat/400.css");
|
||||
await import("@fontsource/montserrat/600.css");
|
||||
await import("@fontsource/montserrat/700.css");
|
||||
await import("@fontsource/montserrat/400-italic.css");
|
||||
}
|
||||
},
|
||||
"Poppins": {
|
||||
name: "Poppins",
|
||||
load: async () => {
|
||||
await import("@fontsource/poppins/300.css");
|
||||
await import("@fontsource/poppins/400.css");
|
||||
await import("@fontsource/poppins/600.css");
|
||||
await import("@fontsource/poppins/700.css");
|
||||
await import("@fontsource/poppins/400-italic.css");
|
||||
}
|
||||
},
|
||||
"Raleway": {
|
||||
name: "Raleway",
|
||||
load: async () => {
|
||||
await import("@fontsource/raleway/300.css");
|
||||
await import("@fontsource/raleway/400.css");
|
||||
await import("@fontsource/raleway/600.css");
|
||||
await import("@fontsource/raleway/700.css");
|
||||
await import("@fontsource/raleway/400-italic.css");
|
||||
}
|
||||
},
|
||||
"Ubuntu": {
|
||||
name: "Ubuntu",
|
||||
load: async () => {
|
||||
await import("@fontsource/ubuntu/300.css");
|
||||
await import("@fontsource/ubuntu/400.css");
|
||||
await import("@fontsource/ubuntu/500.css");
|
||||
await import("@fontsource/ubuntu/700.css");
|
||||
await import("@fontsource/ubuntu/400-italic.css");
|
||||
}
|
||||
},
|
||||
"Comic Neue": {
|
||||
name: "Comic Neue",
|
||||
load: async () => {
|
||||
await import("@fontsource/comic-neue/300.css");
|
||||
await import("@fontsource/comic-neue/400.css");
|
||||
await import("@fontsource/comic-neue/700.css");
|
||||
await import("@fontsource/comic-neue/400-italic.css");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const MONOSCAPE_FONTS: Record<MonoscapeFonts, { name: string, load: () => void }> = {
|
||||
"Fira Code": {
|
||||
name: "Fira Code",
|
||||
load: () => import("@fontsource/fira-code/400.css")
|
||||
},
|
||||
"Roboto Mono": {
|
||||
name: "Roboto Mono",
|
||||
load: () => import("@fontsource/roboto-mono/400.css")
|
||||
},
|
||||
"Source Code Pro": {
|
||||
name: "Source Code Pro",
|
||||
load: () => import("@fontsource/source-code-pro/400.css")
|
||||
},
|
||||
"Space Mono": {
|
||||
name: "Space Mono",
|
||||
load: () => import("@fontsource/space-mono/400.css")
|
||||
},
|
||||
"Ubuntu Mono": {
|
||||
name: "Ubuntu Mono",
|
||||
load: () => import("@fontsource/ubuntu-mono/400.css")
|
||||
}
|
||||
};
|
||||
|
||||
export const FONT_KEYS = Object.keys(FONTS).sort();
|
||||
export const MONOSCAPE_FONT_KEYS = Object.keys(MONOSCAPE_FONTS).sort();
|
||||
|
||||
// Generated from https://gitlab.insrt.uk/revolt/community/themes
|
||||
export const PRESETS: { [key: string]: Theme } = {
|
||||
light: {
|
||||
@@ -120,15 +260,32 @@ interface Props {
|
||||
options?: ThemeOptions;
|
||||
}
|
||||
|
||||
function Theme(props: Props) {
|
||||
function Theme({ children, options }: Props) {
|
||||
const theme: Theme = {
|
||||
...PRESETS["dark"],
|
||||
...(PRESETS as any)[props.options?.preset as any],
|
||||
...props.options?.custom
|
||||
...(PRESETS as any)[options?.preset as any],
|
||||
...options?.custom
|
||||
};
|
||||
|
||||
const root = document.documentElement.style;
|
||||
useEffect(() => {
|
||||
const resize = () => document.documentElement.style.setProperty('--app-height', `${window.innerHeight}px`);
|
||||
const font = theme.font ?? 'Inter';
|
||||
root.setProperty('--font', `"${font}"`);
|
||||
FONTS[font].load();
|
||||
}, [ theme.font ]);
|
||||
|
||||
useEffect(() => {
|
||||
const font = theme.monoscapeFont ?? 'Fira Code';
|
||||
root.setProperty('--monoscape-font', `"${font}"`);
|
||||
MONOSCAPE_FONTS[font].load();
|
||||
}, [ theme.monoscapeFont ]);
|
||||
|
||||
useEffect(() => {
|
||||
root.setProperty('--ligatures', options?.ligatures ? 'normal' : 'none');
|
||||
}, [ options?.ligatures ]);
|
||||
|
||||
useEffect(() => {
|
||||
const resize = () => root.setProperty('--app-height', `${window.innerHeight}px`);
|
||||
resize();
|
||||
|
||||
window.addEventListener('resize', resize);
|
||||
@@ -151,7 +308,7 @@ function Theme(props: Props) {
|
||||
{theme.css && (
|
||||
<style dangerouslySetInnerHTML={{ __html: theme.css }} />
|
||||
)}
|
||||
{props.children}
|
||||
{ children }
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user