88 lines
4.0 KiB
JavaScript
88 lines
4.0 KiB
JavaScript
// components/fontTransforms.jsx
|
||
|
||
// 1) Unicode-Blöcke
|
||
const unicodeBlocks = {
|
||
sansSerif: { upperStart: 0x1D5A0, lowerStart: 0x1D5BA },
|
||
sansSerifBold: { upperStart: 0x1D5D4, lowerStart: 0x1D5EE },
|
||
script: { upperStart: 0x1D49C, lowerStart: 0x1D4B6 },
|
||
scriptBold: { upperStart: 0x1D4D0, lowerStart: 0x1D4EA },
|
||
fraktur: { upperStart: 0x1D504, lowerStart: 0x1D51E },
|
||
frakturBold: { upperStart: 0x1D56C, lowerStart: 0x1D586 },
|
||
monospace: { upperStart: 0x1D670, lowerStart: 0x1D68A },
|
||
fullwidth: { upperStart: 0xFF21, lowerStart: 0xFF41 }
|
||
};
|
||
|
||
// 2) Unicode-Mapping-Funktion
|
||
const mapUnicode = (char, block) => {
|
||
const code = char.charCodeAt(0);
|
||
if (code >= 65 && code <= 90) return String.fromCodePoint(block.upperStart + (code - 65));
|
||
if (code >= 97 && code <= 122) return String.fromCodePoint(block.lowerStart + (code - 97));
|
||
return char;
|
||
};
|
||
|
||
const createTransform = (blockKey) => (text) =>
|
||
text.split('').map((c) => mapUnicode(c, unicodeBlocks[blockKey])).join('');
|
||
|
||
// 3) Font-Definitionen
|
||
const fontList = [
|
||
"Abril Fatface", "Alegreya", "Alfa Slab One", "Almendra", "Amatic SC", "Andika",
|
||
"Architects Daughter", "Audiowide", "Averia Libre", "Bebas Neue", "Black Ops One",
|
||
"Caveat", "Cinzel Decorative", "Courgette", "Dancing Script", "Exo", "Fjalla One",
|
||
"Germania One", "Glass Antiqua", "Gloria Hallelujah", "Great Vibes", "Holtwood One SC",
|
||
"Indie Flower", "Italiana", "Jost", "Kaushan Script", "Lato", "Metal Mania", "Montserrat",
|
||
"Neucha", "Noto Sans", "Open Sans", "Orbitron", "Oswald", "Pacifico", "Permanent Marker",
|
||
"Philosopher", "Playfair Display", "Poppins", "Press Start 2P", "Questrial", "Quicksand",
|
||
"Rajdhani", "Raleway", "Righteous", "Roboto", "Sacramento", "Satisfy", "Space Mono",
|
||
"Spectral", "Staatliches", "Stint Ultra Condensed", "Syncopate", "Ultra", "Unica One",
|
||
"Work Sans", "Yellowtail"
|
||
];
|
||
|
||
// 4) Kategorie-Regeln (angepasst an neue Namen)
|
||
const getCategory = (name) => {
|
||
const normalizedName = name.toLowerCase().replace(/ /g, "-");
|
||
if (["caveat", "dancing-script", "pacifico", "amatic-sc", "kaushan-script", "courgette", "great-vibes", "satisfy", "sacramento", "neucha", "gloria-hallelujah", "almendra", "indie-flower", "architects-daughter"].includes(normalizedName)) return "handwriting";
|
||
if (["bebas-neue", "black-ops-one", "holtwood-one-sc", "abril-fatface", "playfair-display", "permanent-marker", "alfa-slab-one", "germania-one", "oswald", "stint-ultra-condensed"].includes(normalizedName)) return "statement";
|
||
if (["exo", "orbitron", "audiowide", "rajdhani", "space-mono", "questrial", "syncopate", "unica-one", "italiana", "staatliches"].includes(normalizedName)) return "futuristic";
|
||
if (["press-start-2p", "righteous", "metal-mania", "alegreya", "spectral", "fjalla-one", "glass-antiqua", "cinzel-decorative", "andika"].includes(normalizedName)) return "aesthetic";
|
||
return "modern";
|
||
};
|
||
|
||
const blockForCategory = {
|
||
modern: "sansSerif",
|
||
handwriting: "scriptBold",
|
||
statement: "fullwidth",
|
||
futuristic: "monospace",
|
||
aesthetic: "frakturBold"
|
||
};
|
||
|
||
export const fontTransforms = Object.fromEntries(
|
||
fontList.map((font) => {
|
||
const normalizedFont = font.toLowerCase().replace(/ /g, "-");
|
||
const category = getCategory(font);
|
||
const block = blockForCategory[category];
|
||
return [font, {
|
||
transform: createTransform(block),
|
||
category,
|
||
description: `${font} – Unicode-Stil automatisch zugewiesen`,
|
||
className: `font-${normalizedFont}`
|
||
}];
|
||
})
|
||
);
|
||
|
||
export const transformText = (text, fontName) => {
|
||
const font = fontTransforms[fontName];
|
||
if (!font || !text) return { transformed: text, fontClassName: "" };
|
||
return {
|
||
transformed: font.transform(text), // Unicode-Transformation anwenden
|
||
fontClassName: font.className // Tailwind-Klasse für Font-Familie
|
||
};
|
||
};
|
||
|
||
export const getPopularFonts = () => Object.keys(fontTransforms).slice(0, 10);
|
||
|
||
export const getFontsByCategory = (category) =>
|
||
category === "all"
|
||
? Object.keys(fontTransforms)
|
||
: Object.keys(fontTransforms).filter(
|
||
(f) => fontTransforms[f].category === category
|
||
); |