Fonts werden teilweise geladen
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
// components/fontTransforms.jsx
|
||||
|
||||
// 1) Unicode-Blöcke (Startpunkte)
|
||||
// 1) Unicode-Blöcke
|
||||
const unicodeBlocks = {
|
||||
sansSerif: { upperStart: 0x1D5A0, lowerStart: 0x1D5BA },
|
||||
sansSerifBold: { upperStart: 0x1D5D4, lowerStart: 0x1D5EE },
|
||||
@@ -12,7 +12,7 @@ const unicodeBlocks = {
|
||||
fullwidth: { upperStart: 0xFF21, lowerStart: 0xFF41 }
|
||||
};
|
||||
|
||||
// 2) Unicode-Mapping-Helfer
|
||||
// 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));
|
||||
@@ -23,102 +23,65 @@ const mapUnicode = (char, block) => {
|
||||
const createTransform = (blockKey) => (text) =>
|
||||
text.split('').map((c) => mapUnicode(c, unicodeBlocks[blockKey])).join('');
|
||||
|
||||
// 3) Font-Transformationen
|
||||
// 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 (vereinfacht)
|
||||
const getCategory = (name) => {
|
||||
if (["caveat", "dancing-script", "pacifico", "amatic-sc", "kaushan-script", "courgette", "great-vibes", "satisfy", "sacramento", "neucha", "gloria-hallelujah", "almendra", "indie-flower", "architects-daughter"].includes(name)) 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(name)) return "statement";
|
||||
if (["exo", "orbitron", "audiowide", "rajdhani", "space-mono", "questrial", "syncopate", "unica-one", "italiana", "staatliches"].includes(name)) return "futuristic";
|
||||
if (["press-start-2p", "righteous", "metal-mania", "alegreya", "spectral", "fjalla-one", "glass-antiqua", "cinzel-decorative", "andika"].includes(name)) return "aesthetic";
|
||||
return "modern";
|
||||
};
|
||||
|
||||
const blockForCategory = {
|
||||
modern: "sansSerif",
|
||||
handwriting: "scriptBold",
|
||||
statement: "fullwidth",
|
||||
futuristic: "monospace",
|
||||
aesthetic: "frakturBold"
|
||||
};
|
||||
|
||||
export const fontTransforms = Object.fromEntries(
|
||||
Object.entries({
|
||||
// 🔤 Modern
|
||||
Montserrat: ['sansSerifBold', 'modern', 'Montserrat – Sans-Serif Bold Unicode'],
|
||||
Lato: ['sansSerif', 'modern', 'Lato – Humanistischer Sans-Serif Unicode'],
|
||||
Raleway: ['sansSerif', 'modern', 'Raleway – Elegant Display Unicode'],
|
||||
Poppins: ['sansSerif', 'modern', 'Poppins – Rund & freundlich Unicode'],
|
||||
'Open Sans': ['sansSerif', 'modern', 'Open Sans – Vielseitig Unicode'],
|
||||
Roboto: ['sansSerif', 'modern', 'Roboto – Modernes Grotesk Unicode'],
|
||||
'Work Sans': ['sansSerif', 'modern', 'Work Sans – Tech & Clean Unicode'],
|
||||
'Noto Sans': ['sansSerif', 'modern', 'Noto Sans – International Unicode'],
|
||||
Jost: ['sansSerif', 'modern', 'Jost – Geometrisch modern Unicode'],
|
||||
Quicksand: ['sansSerif', 'modern', 'Quicksand – Soft Rounded Unicode'],
|
||||
'Averia Libre': ['sansSerif', 'modern', 'Averia Libre – Experimentell Unicode'],
|
||||
'Philosopher': ['sansSerif', 'modern', 'Philosopher – Elegant Unicode'],
|
||||
|
||||
// ✍️ Handwriting
|
||||
Pacifico: ['scriptBold', 'handwriting', 'Pacifico – Lockerer Pinsel Bold Script Unicode'],
|
||||
Sacramento: ['scriptBold', 'handwriting', 'Sacramento – Retro-Handlettering Bold Script Unicode'],
|
||||
Caveat: ['scriptBold', 'handwriting', 'Caveat – Natural Handwriting Bold Script Unicode'],
|
||||
'Dancing Script': ['scriptBold', 'handwriting', 'Dancing Script – Lebhafte Kursive Bold Script Unicode'],
|
||||
'Indie Flower': ['scriptBold', 'handwriting', 'Indie Flower – Verspieltes Bold Script Unicode'],
|
||||
'Amatic SC': ['scriptBold', 'handwriting', 'Amatic SC – Skizzenartiges Bold Script Unicode'],
|
||||
'Kaushan Script': ['scriptBold', 'handwriting', 'Kaushan Script – Fettere Kursive Bold Script Unicode'],
|
||||
'Architects Daughter': ['scriptBold','handwriting', 'Architects Daughter – Skizzenhafte Handschrift Unicode'],
|
||||
Neucha: ['scriptBold', 'handwriting', 'Neucha – Persönlich und kantig Unicode'],
|
||||
'Great Vibes': ['scriptBold', 'handwriting', 'Great Vibes – Elegante Kalligraphie Unicode'],
|
||||
Satisfy: ['scriptBold', 'handwriting', 'Satisfy – Weiche Script Unicode'],
|
||||
Yellowtail: ['scriptBold', 'handwriting', 'Yellowtail – Vintage Script Unicode'],
|
||||
'Gloria Hallelujah': ['scriptBold', 'handwriting', 'Gloria Hallelujah – Lebendige Handschrift Unicode'],
|
||||
|
||||
// 🧑🎤 Statement
|
||||
Oswald: ['sansSerifBold', 'statement', 'Oswald – Bold Grotesk Unicode'],
|
||||
'Bebas Neue': ['fullwidth', 'statement', 'Bebas Neue – Fullwidth Caps Unicode'],
|
||||
Ultra: ['sansSerifBold', 'statement', 'Ultra – Kompakte Bold Unicode'],
|
||||
'Stint Ultra Condensed': ['sansSerifBold', 'statement', 'Stint Ultra Condensed – Kompakte Bold Unicode'],
|
||||
'Playfair Display': ['scriptBold', 'statement', 'Playfair Display – Elegante Bold Script Unicode'],
|
||||
'Abril Fatface': ['scriptBold', 'statement', 'Abril Fatface – Fettere Bold Script Unicode'],
|
||||
'Permanent Marker': ['scriptBold', 'statement', 'Permanent Marker – Marker-Style Unicode'],
|
||||
'Alfa Slab One': ['fullwidth', 'statement', 'Alfa Slab One – Slab Serif Heavy Unicode'],
|
||||
'Black Ops One': ['fullwidth', 'statement', 'Black Ops One – Military Display Unicode'],
|
||||
'Germania One': ['frakturBold', 'statement', 'Germania One – Oldstyle Fraktur Unicode'],
|
||||
'Holtwood One SC': ['fullwidth', 'statement', 'Holtwood One SC – Klassisch Bold Small Caps Unicode'],
|
||||
Courgette: ['scriptBold', 'statement', 'Courgette – Verspieltes Script Unicode'],
|
||||
|
||||
// 🚀 Futuristic
|
||||
Exo: ['sansSerif', 'futuristic', 'Exo – Tech Grotesk Unicode'],
|
||||
Orbitron: ['monospace', 'futuristic', 'Orbitron – Sci-Fi Monospace Unicode'],
|
||||
Audiowide: ['monospace', 'futuristic', 'Audiowide – Rundes Monospace Unicode'],
|
||||
Rajdhani: ['monospace', 'futuristic', 'Rajdhani – Digital Monospace Unicode'],
|
||||
'Space Mono': ['monospace', 'futuristic', 'Space Mono – Tech Monospace Unicode'],
|
||||
Questrial: ['sansSerif', 'futuristic', 'Questrial – Clean Sans-Serif Unicode'],
|
||||
'Syncopate': ['monospace', 'futuristic', 'Syncopate – Techno Unicode'],
|
||||
'Unica One': ['monospace', 'futuristic', 'Unica One – Monospace Mix Unicode'],
|
||||
'Italiana': ['sansSerif', 'futuristic', 'Italiana – Futuristisch Serif Unicode'],
|
||||
'Staatliches': ['monospace', 'futuristic', 'Staatliches – Moderne Grotesk Unicode'],
|
||||
|
||||
// 🧢 Aesthetic
|
||||
'Press Start 2P': ['monospace', 'aesthetic', 'Press Start 2P – Pixel Monospace Unicode'],
|
||||
Righteous: ['frakturBold', 'aesthetic', 'Righteous – Stylische Bold Fraktur Unicode'],
|
||||
'Metal Mania': ['scriptBold', 'aesthetic', 'Metal Mania – Fettere Script Unicode'],
|
||||
'Alegreya': ['frakturBold', 'aesthetic', 'Alegreya – Literatur Serif Unicode'],
|
||||
'Spectral': ['frakturBold', 'aesthetic', 'Spectral – Editorial Serif Unicode'],
|
||||
'Fjalla One': ['sansSerifBold', 'aesthetic', 'Fjalla One – Headline Sans Unicode'],
|
||||
'Glass Antiqua': ['scriptBold', 'aesthetic', 'Glass Antiqua – Zarte Antiqua Script Unicode'],
|
||||
'Cinzel Decorative': ['scriptBold', 'aesthetic', 'Cinzel Decorative – Klassische Zier-Serif Unicode'],
|
||||
'Andika': ['sansSerif', 'aesthetic', 'Andika – Leserlich Unicode'],
|
||||
'Almendra': ['scriptBold', 'aesthetic', 'Almendra – Historische Handschrift Unicode'],
|
||||
}).map(([name, [block, category, description]]) => [
|
||||
name,
|
||||
{
|
||||
fontList.map((font) => {
|
||||
const name = font.replace(/-/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
|
||||
const category = getCategory(font);
|
||||
const block = blockForCategory[category];
|
||||
return [name, {
|
||||
transform: createTransform(block),
|
||||
category,
|
||||
description,
|
||||
className: `font-${name.toLowerCase().replace(/\s+/g, '')}`,
|
||||
},
|
||||
])
|
||||
description: `${name} – Unicode-Stil automatisch zugewiesen` ,
|
||||
className: `font-${font}`
|
||||
}];
|
||||
})
|
||||
);
|
||||
|
||||
// 🔝 Neue transformText-Funktion – gibt transformierten Text **und** Tailwind-Klasse zurück
|
||||
export const transformText = (text, fontName) => {
|
||||
const font = fontTransforms[fontName];
|
||||
if (!font || !text) return { transformed: text, fontClassName: '' };
|
||||
if (!font || !text) return { transformed: text, fontClassName: "" };
|
||||
return {
|
||||
transformed: font.transform(text),
|
||||
fontClassName: font.className,
|
||||
fontClassName: font.className
|
||||
};
|
||||
};
|
||||
|
||||
// Weitere Helfer
|
||||
export const getPopularFonts = () => Object.keys(fontTransforms).slice(0, 10);
|
||||
|
||||
export const getFontsByCategory = (category) =>
|
||||
category === 'all'
|
||||
category === "all"
|
||||
? Object.keys(fontTransforms)
|
||||
: Object.keys(fontTransforms).filter(
|
||||
(f) => fontTransforms[f].category === category
|
||||
);
|
||||
);
|
||||
Reference in New Issue
Block a user