Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Fixed Tailwind not applying styles for custom fonts dropdown

Browse source 
ref 154b839a8d

The changes done with 154b839a8d  look like a good improvement because it removes the need of managing font names in two places, but Tailwind does not agree. Classes are only applied when Tailwind knows them beforehand.
This commit is contained in:
Aileen Booker 2024-10-25 09:08:43 +04:00 • committed by Aileen Booker
parent e6d63e0863
commit 7b8a68f56e
1 changed files with 53 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
apps/admin-x-settings/src/components/settings/site/designAndBranding/GlobalSettings.tsx
View file

@ -4,7 +4,7 @@ import UnsplashSelector from '../../../selectors/UnsplashSelector';
import clsx from 'clsx';
import usePinturaEditor from '../../../../hooks/usePinturaEditor';
import {APIError} from '@tryghost/admin-x-framework/errors';
import {CUSTOM_FONTS, getCSSFriendlyFontClassName} from '@tryghost/custom-fonts';
import {CUSTOM_FONTS} from '@tryghost/custom-fonts';
import {ColorPickerField, Form, Hint, ImageUpload, Select} from '@tryghost/admin-x-design-system';
import {SettingValue, getSettingValues} from '@tryghost/admin-x-framework/api/settings';
import {getImageUrl, useUploadImage} from '@tryghost/admin-x-framework/api/images';
@ -52,7 +52,58 @@ const GlobalSettings: React.FC<{ values: GlobalSettingValues, updateSetting: (ke
const [headingFont, setHeadingFont] = useState(values.headingFont || DEFAULT_FONT);
const [bodyFont, setBodyFont] = useState(values.bodyFont || DEFAULT_FONT);
const fontClassName = (fontName: string, heading: boolean = true) => clsx(`font-${getCSSFriendlyFontClassName(fontName)}`, heading && 'font-bold');
/**
* TODO: We tried to use the getCSSFriendlyFontClassName function from the @tryghost/custom-fonts package,
* but this is not working with Tailwind CSS, as tailwind requires to have the class name already in the
* file to be able to generate the styles.
*
* So we need to manually map the font names to the corresponding Tailwind CSS class names.
*/
const fontClassName = (fontName: string, heading: boolean = true) => {
let className = '';
if (fontName === 'Cardo') {
className = clsx('font-cardo', heading && 'font-bold');
} else if (fontName === 'Manrope') {
className = clsx('font-manrope', heading && 'font-bold');
} else if (fontName === 'Merriweather') {
className = clsx('font-merriweather', heading && 'font-bold');
} else if (fontName === 'Nunito') {
className = clsx('font-nunito', heading && 'font-semibold');
} else if (fontName === 'Old Standard TT') {
className = clsx('font-old-standard-tt', heading && 'font-bold');
} else if (fontName === 'Prata') {
className = clsx('font-prata', heading && 'font-normal');
} else if (fontName === 'Roboto') {
className = clsx('font-roboto', heading && 'font-bold');
} else if (fontName === 'Rufina') {
className = clsx('font-rufina', heading && 'font-bold');
} else if (fontName === 'Tenor Sans') {
className = clsx('font-tenor-sans', heading && 'font-normal');
} else if (fontName === 'Chakra Petch') {
className = clsx('font-chakra-petch', heading && 'font-normal');
} else if (fontName === 'Fira Mono') {
className = clsx('font-fira-mono', heading && 'font-bold');
} else if (fontName === 'Fira Sans') {
className = clsx('font-fira-sans', heading && 'font-bold');
} else if (fontName === 'IBM Plex Serif') {
className = clsx('font-ibm-plex-serif', heading && 'font-bold');
} else if (fontName === 'JetBrains Mono') {
className = clsx('font-jetbrains-mono', heading && 'font-bold');
} else if (fontName === 'Lora') {
className = clsx('font-lora', heading && 'font-bold');
} else if (fontName === 'Noto Sans') {
className = clsx('font-noto-sans', heading && 'font-bold');
} else if (fontName === 'Noto Serif') {
className = clsx('font-noto-serif', heading && 'font-bold');
} else if (fontName === 'Poppins') {
className = clsx('font-poppins', heading && 'font-bold');
} else if (fontName === 'Space Grotesk') {
className = clsx('font-space-grotesk', heading && 'font-bold');
} else if (fontName === 'Space Mono') {
className = clsx('font-space-mono', heading && 'font-bold');
}
return className;
};
// Populate the heading and body font options
const customHeadingFonts: HeadingFontOption[] = CUSTOM_FONTS.heading.map((x) => {