Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00
Code Issues Activity

Added fn to return correctly generated CSS class for heading and body custom font

Browse source
This commit is contained in:
Aileen Booker 2024-10-24 15:01:29 +04:00
parent 45c1be0c98
commit 0524188bab
2 changed files with 109 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

148
ghost/custom-fonts/src/index.ts
View file

@ -7,6 +7,72 @@ export type FontSelection = {
body?: BodyFont
};
export const CUSTOM_FONTS: CustomFonts = {
heading: [
'Cardo',
'Chakra Petch',
'Fira Mono',
'Fira Sans',
'IBM Plex Serif',
'Inter',
'JetBrains Mono',
'Lora',
'Manrope',
'Merriweather',
'Noto Sans',
'Noto Serif',
'Nunito',
'Old Standard TT',
'Poppins',
'Prata',
'Roboto',
'Rufina',
'Space Grotesk',
'Space Mono',
'Tenor Sans'
],
body: [
'Fira Mono',
'Fira Sans',
'IBM Plex Serif',
'Inter',
'JetBrains Mono',
'Lora',
'Manrope',
'Merriweather',
'Noto Sans',
'Noto Serif',
'Nunito',
'Poppins',
'Roboto',
'Space Mono'
]
};
const classFontNames = {
Cardo: 'cardo',
Manrope: 'manrope',
Merriweather: 'merriweather',
Nunito: 'nunito',
'Old Standard TT': 'old-standard-tt',
Prata: 'prata',
Roboto: 'roboto',
Rufina: 'rufina',
'Tenor Sans': 'tenor-sans',
'Space Grotesk': 'space-grotesk',
'Chakra Petch': 'chakra-petch',
'Noto Sans': 'noto-sans',
Poppins: 'poppins',
'Fira Sans': 'fira-sans',
Inter: 'inter',
'Noto Serif': 'noto-serif',
Lora: 'lora',
'IBM Plex Serif': 'ibm-plex-serif',
'Space Mono': 'space-mono',
'Fira Mono': 'fira-mono',
'JetBrains Mono': 'jetbrains-mono'
};
export function generateCustomFontCss(fonts: FontSelection) {
let fontImports: string = '';
let fontCSS: string = '';
@ -109,87 +175,35 @@ export function generateCustomFontCss(fonts: FontSelection) {
}
export function generateCustomFontBodyClass(fonts: FontSelection) {
const classFontNames = {
Cardo: 'cardo',
Manrope: 'manrope',
Merriweather: 'merriweather',
Nunito: 'nunito',
'Old Standard TT': 'old-standard-tt',
Prata: 'prata',
Roboto: 'roboto',
Rufina: 'rufina',
'Tenor Sans': 'tenor-sans',
'Space Grotesk': 'space-grotesk',
'Chakra Petch': 'chakra-petch',
'Noto Sans': 'noto-sans',
Poppins: 'poppins',
'Fira Sans': 'fira-sans',
Inter: 'inter',
'Noto Serif': 'noto-serif',
Lora: 'lora',
'IBM Plex Serif': 'ibm-plex-serif',
'Space Mono': 'space-mono',
'Fira Mono': 'fira-mono',
'JetBrains Mono': 'jetbrains-mono'
};
let bodyClass = '';
if (fonts?.heading) {
bodyClass += `gh-font-heading-${classFontNames[fonts.heading]}`;
bodyClass += getCustomFontClassName({font: fonts.heading, heading: true});
if (fonts?.body) {
bodyClass += ' ';
}
}
if (fonts?.body) {
bodyClass += `gh-font-body-${classFontNames[fonts.body]}`;
bodyClass += getCustomFontClassName({font: fonts.body, heading: false});
}
return bodyClass;
}
export const CUSTOM_FONTS: CustomFonts = {
heading: [
'Cardo',
'Chakra Petch',
'Fira Mono',
'Fira Sans',
'IBM Plex Serif',
'Inter',
'JetBrains Mono',
'Lora',
'Manrope',
'Merriweather',
'Noto Sans',
'Noto Serif',
'Nunito',
'Old Standard TT',
'Poppins',
'Prata',
'Roboto',
'Rufina',
'Space Grotesk',
'Space Mono',
'Tenor Sans'
],
body: [
'Fira Mono',
'Fira Sans',
'IBM Plex Serif',
'Inter',
'JetBrains Mono',
'Lora',
'Manrope',
'Merriweather',
'Noto Sans',
'Noto Serif',
'Nunito',
'Poppins',
'Roboto',
'Space Mono'
]
};
export function getCSSFriendlyFontClassName(font: string) {
return classFontNames[font as keyof typeof classFontNames] || '';
}
export function getCustomFontClassName({font, heading}: {font: string, heading: boolean}) {
const cssFriendlyFontClassName = getCSSFriendlyFontClassName(font);
if (!cssFriendlyFontClassName) {
return '';
}
return `gh-font-${heading ? 'heading' : 'body'}-${cssFriendlyFontClassName}`;
}
export function getCustomFonts(): CustomFonts {
return CUSTOM_FONTS;

28
ghost/custom-fonts/test/index.test.ts
View file

@ -9,6 +9,34 @@ describe('Custom Fonts', function () {
});
});
describe('getCSSFriendlyFontClassName', function () {
it('returns the correct class name for a font', function () {
assert.equal(customFonts.getCSSFriendlyFontClassName('Inter'), 'inter');
});
it('returns the correct class name for a font with a space', function () {
assert.equal(customFonts.getCSSFriendlyFontClassName('Fira Sans'), 'fira-sans');
});
it('returns empty string for an invalid font', function () {
assert.equal(customFonts.getCSSFriendlyFontClassName('Invalid Font'), '');
});
});
describe('getCustomFontClassName', function () {
it('returns the correct class name for a valid heading font', function () {
assert.equal(customFonts.getCustomFontClassName({font: 'Space Grotesk', heading: true}), 'gh-font-heading-space-grotesk');
});
it('returns the correct class name for a valid body font', function () {
assert.equal(customFonts.getCustomFontClassName({font: 'Noto Sans', heading: false}), 'gh-font-body-noto-sans');
});
it('returns empty string for an invalid font', function () {
assert.equal(customFonts.getCustomFontClassName({font: 'Invalid Font', heading: true}), '');
});
});
describe('isValidCustomFont', function () {
it('returns true for valid body fonts', function () {
assert.equal(customFonts.isValidCustomFont('Inter'), true);