From cd6acffe54fab27d36258635359a7950e6651758 Mon Sep 17 00:00:00 2001 From: Peter Zimon Date: Mon, 21 Oct 2024 13:51:20 +0200 Subject: [PATCH] Changed ghost head to output vars - Instead of the initial concept of outputing CSS classes in Ghost head, we will output the variables directly. This results in a much cleaner result and flexibility for theme developers. --- .../__snapshots__/ghost_head.test.js.snap | 4 +- ghost/custom-fonts/src/index.ts | 65 ++++++++----------- ghost/custom-fonts/test/index.test.ts | 9 ++- 3 files changed, 34 insertions(+), 44 deletions(-) diff --git a/ghost/core/test/unit/frontend/helpers/__snapshots__/ghost_head.test.js.snap b/ghost/core/test/unit/frontend/helpers/__snapshots__/ghost_head.test.js.snap index 75b8c5e982..b1b873911a 100644 --- a/ghost/core/test/unit/frontend/helpers/__snapshots__/ghost_head.test.js.snap +++ b/ghost/core/test/unit/frontend/helpers/__snapshots__/ghost_head.test.js.snap @@ -1178,7 +1178,7 @@ Object { - ", + ", } `; @@ -1253,7 +1253,7 @@ Object { - ", + ", } `; diff --git a/ghost/custom-fonts/src/index.ts b/ghost/custom-fonts/src/index.ts index 4ed31c2936..7654673ed6 100644 --- a/ghost/custom-fonts/src/index.ts +++ b/ghost/custom-fonts/src/index.ts @@ -9,65 +9,50 @@ export type FontSelection = { export function generateCustomFontCss(fonts: FontSelection) { let fontImports: string = ''; - let bodyFontCSS: string = ''; - let headingFontCSS: string = ''; + let fontCSS: string = ''; const importStrings = { 'Space Grotesk': { - url: '@import url(https://fonts.bunny.net/css?family=space-grotesk:700)', - adjust: 'none' + url: '@import url(https://fonts.bunny.net/css?family=space-grotesk:700)' }, 'Playfair Display': { - url: '@import url(https://fonts.bunny.net/css?family=playfair-display:400)', - adjust: 'none' + url: '@import url(https://fonts.bunny.net/css?family=playfair-display:400)' }, 'Chakra Petch': { - url: '@import url(https://fonts.bunny.net/css?family=chakra-petch:400)', - adjust: 'none' + url: '@import url(https://fonts.bunny.net/css?family=chakra-petch:400)' }, 'Noto Sans': { - url: '@import url(https://fonts.bunny.net/css?family=noto-sans:400,700)', - adjust: 'none' + url: '@import url(https://fonts.bunny.net/css?family=noto-sans:400,700)' }, Poppins: { - url: '@import url(https://fonts.bunny.net/css?family=poppins:400,500,600)', - adjust: 'none' + url: '@import url(https://fonts.bunny.net/css?family=poppins:400,500,600)' }, 'Fira Sans': { - url: '@import url(https://fonts.bunny.net/css?family=fira-sans:400,500,600)', - adjust: 'none' + url: '@import url(https://fonts.bunny.net/css?family=fira-sans:400,500,600)' }, Inter: { - url: '@import url(https://fonts.bunny.net/css?family=inter:400,500,600)', - adjust: 'none' + url: '@import url(https://fonts.bunny.net/css?family=inter:400,500,600)' }, 'Noto Serif': { - url: '@import url(https://fonts.bunny.net/css?family=noto-serif:400,700)', - adjust: 'none' + url: '@import url(https://fonts.bunny.net/css?family=noto-serif:400,700)' }, Lora: { - url: '@import url(https://fonts.bunny.net/css?family=lora:400,700)', - adjust: 'none' + url: '@import url(https://fonts.bunny.net/css?family=lora:400,700)' }, 'IBM Plex Serif': { - url: '@import url(https://fonts.bunny.net/css?family=ibm-plex-serif:400,500,600)', - adjust: 'none' + url: '@import url(https://fonts.bunny.net/css?family=ibm-plex-serif:400,500,600)' }, 'EB Garamond': { - url: '@import url(https://fonts.bunny.net/css?family=eb-garamond:400,700)', - adjust: 0.45 + url: '@import url(https://fonts.bunny.net/css?family=eb-garamond:400,700)' }, 'Space Mono': { - url: '@import url(https://fonts.bunny.net/css?family=space-mono:400,700)', - adjust: 'none' + url: '@import url(https://fonts.bunny.net/css?family=space-mono:400,700)' }, 'Fira Mono': { - url: '@import url(https://fonts.bunny.net/css?family=fira-mono:400,700)', - adjust: 'none' + url: '@import url(https://fonts.bunny.net/css?family=fira-mono:400,700)' }, 'JetBrains Mono': { - url: '@import url(https://fonts.bunny.net/css?family=jetbrains-mono:400,700)', - adjust: 'none' + url: '@import url(https://fonts.bunny.net/css?family=jetbrains-mono:400,700)' } }; @@ -85,15 +70,21 @@ export function generateCustomFontCss(fonts: FontSelection) { } } - if (fonts?.body) { - bodyFontCSS = `.gh-body-font {font-family: ${fonts.body}; font-size-adjust: ${importStrings[fonts.body].adjust};}`; + if (fonts?.body || fonts?.heading) { + fontCSS = ':root {'; + + if (fonts?.heading) { + fontCSS += `--ghost-font-heading: ${fonts.heading};`; + } + + if (fonts?.body) { + fontCSS += `--ghost-font-body: ${fonts.body};`; + } + + fontCSS += '}'; } - if (fonts?.heading) { - headingFontCSS = `.gh-heading-font, .gh-content :is(h1,h2,h3,h4,h5,h6)[id] {font-family: ${fonts.heading}; font-size-adjust: ${importStrings[fonts.heading].adjust};}`; - } - - return ``; + return ``; } export const CUSTOM_FONTS: CustomFonts = { diff --git a/ghost/custom-fonts/test/index.test.ts b/ghost/custom-fonts/test/index.test.ts index a05f356fe5..e7f0cb5b7c 100644 --- a/ghost/custom-fonts/test/index.test.ts +++ b/ghost/custom-fonts/test/index.test.ts @@ -37,8 +37,8 @@ describe('Custom Fonts', function () { const result = customFonts.generateCustomFontCss({body: 'Noto Sans'}); assert.equal(result.includes('@import url(https://fonts.bunny.net/css?family=noto-sans:400,700);'), true, 'Includes the correct import for the body font'); - assert.equal(result.includes('.gh-body-font {font-family: Noto Sans; font-size-adjust: none;}'), true, 'Includes the correct CSS for the body font'); - assert.equal(result.includes('.gh-heading-font, .gh-content :is(h1,h2,h3,h4,h5,h6)[id]'), false, 'Does not include CSS for the title font'); + assert.equal(result.includes(':root {--ghost-font-body: Noto Sans;}'), true, 'Includes the correct CSS for the body font'); + assert.equal(result.includes('--ghost-font-heading'), false, 'Does not include CSS for the title font'); }); it('returns correct CSS for different heading and body fonts', function () { @@ -46,14 +46,13 @@ describe('Custom Fonts', function () { assert.equal(result.includes('@import url(https://fonts.bunny.net/css?family=playfair-display:400);'), true, 'Includes the correct import for the heading font'); assert.equal(result.includes('@import url(https://fonts.bunny.net/css?family=poppins:400,500,600);'), true, 'Includes the correct import for the body font'); - assert.equal(result.includes('.gh-heading-font, .gh-content :is(h1,h2,h3,h4,h5,h6)[id] {font-family: Playfair Display; font-size-adjust: none;}'), true, 'Includes the correct CSS for the heading font'); - assert.equal(result.includes('.gh-body-font {font-family: Poppins; font-size-adjust: none;}'), true, 'Includes the correct CSS for the body font'); + assert.equal(result.includes(':root {--ghost-font-heading: Playfair Display;--ghost-font-body: Poppins;}'), true, 'Includes the correct CSS for the body and heading fonts'); }); it('returns correct CSS with only one import for equal heading and body fonts', function () { const result = customFonts.generateCustomFontCss({heading: 'Lora', body: 'Lora'}); - assert.equal(result, '', 'Includes the correct CSS with only one import for equal heading and body fonts'); + assert.equal(result, '', 'Includes the correct CSS with only one import for equal heading and body fonts'); }); }); });