mirror of
https://github.com/Equicord/Equicord.git
synced 2025-02-18 22:28:51 -05:00
feat(plugin): fontLoader (#132)
This commit is contained in:
vMohammad
GitHub
parent
adf02d6905
commit
a97337d9c7
2 changed files with 261 additions and 0 deletions
238
src/equicordplugins/FontLoader/index.tsx
Normal file
238
src/equicordplugins/FontLoader/index.tsx
Normal file
|
|
@ -0,0 +1,238 @@
|
|||
/*
|
||||
* Vencord, a Discord client mod
|
||||
* Copyright (c) 2025 Vendicated and contributors
|
||||
* SPDX-License-Identifier: GPL-3.0-or-later
|
||||
*/
|
||||
|
||||
import "./styles.css";
|
||||
|
||||
import { definePluginSettings } from "@api/Settings";
|
||||
import { debounce } from "@shared/debounce";
|
||||
import { EquicordDevs } from "@utils/constants";
|
||||
import { Margins } from "@utils/margins";
|
||||
import { classes } from "@utils/misc";
|
||||
import definePlugin, { OptionType } from "@utils/types";
|
||||
import { Card, Forms, React, TextInput } from "@webpack/common";
|
||||
interface GoogleFontMetadata {
|
||||
family: string;
|
||||
displayName: string;
|
||||
authors: string[];
|
||||
category?: number;
|
||||
popularity?: number;
|
||||
variants: Array<{
|
||||
axes: Array<{
|
||||
tag: string;
|
||||
min: number;
|
||||
max: number;
|
||||
}>;
|
||||
}>;
|
||||
}
|
||||
const userAgent = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36(KHTML, like Gecko) Chrome / 128.0.0.0 Safari / 537.36";
|
||||
async function searchGoogleFonts(query: string) {
|
||||
try {
|
||||
const response = await fetch("https://fonts.google.com/$rpc/fonts.fe.catalog.actions.metadata.MetadataService/FontSearch", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"content-type": "application/json+protobuf",
|
||||
"x-user-agent": "grpc-web-javascript/0.1"
|
||||
},
|
||||
// the nulls are optional filters
|
||||
body: JSON.stringify([[query, null, null, null, null, null, 1], [5], null, 16])
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (!data?.[1]) return [];
|
||||
// god please help me
|
||||
const fonts = data[1].map(([_, fontData]: [string, any[]]) => ({
|
||||
family: fontData[0],
|
||||
displayName: fontData[1],
|
||||
authors: fontData[2],
|
||||
category: fontData[3],
|
||||
variants: fontData[6].map((variant: any[]) => ({
|
||||
axes: variant[0].map(([tag, min, max]: [string, number, number]) => ({
|
||||
tag, min, max
|
||||
}))
|
||||
}))
|
||||
}));
|
||||
return fonts;
|
||||
// LETS GO IT FUCKING WORKSSSSSSSSSSSS
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch fonts:", err);
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
async function preloadFont(family: string) {
|
||||
// https://developers.google.com/fonts/docs/css2
|
||||
const url = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(family)}&text=The quick brown fox jumps over the lazy dog&display=swap`;
|
||||
const css = await fetch(url, {
|
||||
headers: {
|
||||
"User-Agent": userAgent
|
||||
}
|
||||
}).then(r => r.text());
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.textContent = css;
|
||||
document.head.appendChild(style);
|
||||
return style;
|
||||
}
|
||||
|
||||
async function applyFont(fontFamily: string) {
|
||||
if (!fontFamily) {
|
||||
if (styleElement) {
|
||||
styleElement.remove();
|
||||
styleElement = null;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
`https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontFamily)}:wght@300;400;500;600;700&display=swap`,
|
||||
{
|
||||
headers: {
|
||||
"User-Agent": userAgent
|
||||
}
|
||||
}
|
||||
);
|
||||
const css = await response.text();
|
||||
|
||||
if (!styleElement) {
|
||||
styleElement = document.createElement("style");
|
||||
document.head.appendChild(styleElement);
|
||||
}
|
||||
|
||||
styleElement.textContent = `
|
||||
${css}
|
||||
* {
|
||||
--font-primary: '${fontFamily}', sans-serif !important;
|
||||
--font-display: '${fontFamily}', sans-serif !important;
|
||||
--font-headline: '${fontFamily}', sans-serif !important;
|
||||
--font-code: '${fontFamily}', monospace !important;
|
||||
}
|
||||
`;
|
||||
} catch (err) {
|
||||
console.error("Failed to load font:", err);
|
||||
}
|
||||
}
|
||||
|
||||
function GoogleFontSearch({ onSelect }: { onSelect: (font: GoogleFontMetadata) => void; }) {
|
||||
const [query, setQuery] = React.useState("");
|
||||
const [results, setResults] = React.useState<GoogleFontMetadata[]>([]);
|
||||
const [loading, setLoading] = React.useState(false);
|
||||
|
||||
|
||||
const previewStyles = React.useRef<HTMLStyleElement[]>([]);
|
||||
|
||||
|
||||
React.useEffect(() => {
|
||||
return () => {
|
||||
previewStyles.current.forEach(style => style.remove());
|
||||
};
|
||||
}, []);
|
||||
|
||||
const debouncedSearch = debounce(async (value: string) => {
|
||||
setLoading(true);
|
||||
if (!value) {
|
||||
setResults([]);
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
const fonts = await searchGoogleFonts(value);
|
||||
|
||||
previewStyles.current.forEach(style => style.remove());
|
||||
previewStyles.current = [];
|
||||
|
||||
const styles = await Promise.all(fonts.map(f => preloadFont(f.family)));
|
||||
previewStyles.current = styles;
|
||||
|
||||
setResults(fonts);
|
||||
setLoading(false);
|
||||
}, 300);
|
||||
|
||||
const handleSearch = React.useCallback((value: string) => {
|
||||
setQuery(value);
|
||||
debouncedSearch(value);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Forms.FormSection>
|
||||
<Forms.FormTitle tag="h3">Search Google Fonts</Forms.FormTitle>
|
||||
<Forms.FormText>Click on any font to apply it.</Forms.FormText>
|
||||
|
||||
<TextInput
|
||||
value={query}
|
||||
onChange={e => handleSearch(e)}
|
||||
placeholder="Search fonts..."
|
||||
disabled={loading}
|
||||
className={Margins.bottom16}
|
||||
/>
|
||||
|
||||
{results.length > 0 && (
|
||||
<div className={classes(Margins.top8, "eq-googlefonts-results")}>
|
||||
{results.map(font => (
|
||||
<Card
|
||||
key={font.family}
|
||||
className={classes("eq-googlefonts-card", Margins.bottom8)}
|
||||
onClick={() => onSelect(font)}
|
||||
>
|
||||
<div className="eq-googlefonts-preview" style={{ fontFamily: font.family }}>
|
||||
<Forms.FormTitle tag="h4">{font.displayName}</Forms.FormTitle>
|
||||
<Forms.FormText>The quick brown fox jumps over the lazy dog</Forms.FormText>
|
||||
</div>
|
||||
{font.authors?.length && (
|
||||
<Forms.FormText className={Margins.top8} style={{ opacity: 0.7 }}>
|
||||
by {font.authors.join(", ")}
|
||||
</Forms.FormText>
|
||||
)}
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Forms.FormSection>
|
||||
);
|
||||
}
|
||||
|
||||
let styleElement: HTMLStyleElement | null = null;
|
||||
|
||||
const settings = definePluginSettings({
|
||||
selectedFont: {
|
||||
type: OptionType.STRING,
|
||||
description: "Currently selected font",
|
||||
default: "",
|
||||
hidden: true
|
||||
},
|
||||
fontSearch: {
|
||||
type: OptionType.COMPONENT,
|
||||
description: "Search and select Google Fonts",
|
||||
component: () => (
|
||||
<GoogleFontSearch
|
||||
onSelect={font => {
|
||||
settings.store.selectedFont = font.family;
|
||||
applyFont(font.family);
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
});
|
||||
|
||||
export default definePlugin({
|
||||
name: "FontLoader",
|
||||
description: "Loads any font from Google Fonts",
|
||||
authors: [EquicordDevs.Crxa, EquicordDevs.vmohammad], // Crxa's only here because he came up with the idea
|
||||
settings,
|
||||
|
||||
async start() {
|
||||
const savedFont = settings.store.selectedFont;
|
||||
if (savedFont) {
|
||||
await applyFont(savedFont);
|
||||
}
|
||||
},
|
||||
|
||||
stop() {
|
||||
if (styleElement) {
|
||||
styleElement.remove();
|
||||
styleElement = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
23
src/equicordplugins/FontLoader/styles.css
Normal file
23
src/equicordplugins/FontLoader/styles.css
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
.eq-googlefonts-results {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.eq-googlefonts-card {
|
||||
padding: 16px;
|
||||
cursor: pointer !important;
|
||||
background: var(--background-secondary);
|
||||
border: 1px solid var(--background-tertiary);
|
||||
}
|
||||
|
||||
.eq-googlefonts-card:hover {
|
||||
background: var(--background-modifier-hover);
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.eq-googlefonts-preview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
cursor: pointer !important;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue