aknuth/fancytextstuff
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

'anton':

Browse Source 
'bebas-neue':
'dancing-script':
'montserrat':
'orbitron':
'pacifico':
'playfair-display
'poppins': [
This commit is contained in:
Andreas Knuth
2025-08-04 23:01:46 -05:00
parent 2587880a1f
commit 87cd5beaac
3 changed files with 145 additions and 546 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
components/fontTransforms.jsx
View File

@@ -1,18 +1,16 @@
// 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 }
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));
@@ -23,28 +21,18 @@ const mapUnicode = (char, block) => {
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"
"Anton", "Bebas Neue", "Dancing Script", "Montserrat", "Orbitron", "Pacifico",
"Playfair Display", "Poppins"
];
// 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";
if (["dancing-script", "pacifico"].includes(normalizedName)) return "handwriting";
if (["anton", "bebas-neue", "playfair-display"].includes(normalizedName)) return "statement";
if (["orbitron"].includes(normalizedName)) return "futuristic";
if (["montserrat", "poppins"].includes(normalizedName)) return "modern";
return "aesthetic";
};
const blockForCategory = {
@@ -59,11 +47,10 @@ 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),
transform: (text) => text, // Echte Fonts verwenden, keine Unicode-Transformation
category,
description: `${font} – Unicode-Stil automatisch zugewiesen`,
description: `${font} – Echte Schriftart verwendet`,
className: `font-${normalizedFont}`
}];
})
@@ -73,12 +60,12 @@ 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
transformed: font.transform(text),
fontClassName: font.className
};
};
export const getPopularFonts = () => Object.keys(fontTransforms).slice(0, 10);
export const getPopularFonts = () => Object.keys(fontTransforms).slice(0, 5);
export const getFontsByCategory = (category) =>
category === "all"