mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-25 02:31:59 -05:00
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.
This commit is contained in:
Peter Zimon
Aileen Booker
parent
4d1dcea641
commit
cd6acffe54
3 changed files with 34 additions and 44 deletions
|
|
@ -1178,7 +1178,7 @@ Object {
|
|||
<script defer src=\\"https://cdn.jsdelivr.net/ghost/sodo-search@~[[VERSION]]/umd/sodo-search.min.js\\" data-key=\\"xyz\\" data-styles=\\"https://cdn.jsdelivr.net/ghost/sodo-search@~[[VERSION]]/umd/main.css\\" data-sodo-search=\\"http://127.0.0.1:2369/\\" data-locale=\\"en\\" crossorigin=\\"anonymous\\"></script>
|
||||
|
||||
<link href=\\"http://127.0.0.1:2369/webmentions/receive/\\" rel=\\"webmention\\">
|
||||
<style>@import url(https://fonts.bunny.net/css?family=space-grotesk:700);@import url(https://fonts.bunny.net/css?family=poppins:400,500,600);.gh-body-font {font-family: Poppins; font-size-adjust: none;}.gh-heading-font, .gh-content :is(h1,h2,h3,h4,h5,h6)[id] {font-family: Space Grotesk; font-size-adjust: none;}</style>",
|
||||
<style>@import url(https://fonts.bunny.net/css?family=space-grotesk:700);@import url(https://fonts.bunny.net/css?family=poppins:400,500,600);:root {--ghost-font-heading: Space Grotesk;--ghost-font-body: Poppins;}</style>",
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -1253,7 +1253,7 @@ Object {
|
|||
<script defer src=\\"https://cdn.jsdelivr.net/ghost/sodo-search@~[[VERSION]]/umd/sodo-search.min.js\\" data-key=\\"xyz\\" data-styles=\\"https://cdn.jsdelivr.net/ghost/sodo-search@~[[VERSION]]/umd/main.css\\" data-sodo-search=\\"http://127.0.0.1:2369/\\" data-locale=\\"en\\" crossorigin=\\"anonymous\\"></script>
|
||||
|
||||
<link href=\\"http://127.0.0.1:2369/webmentions/receive/\\" rel=\\"webmention\\">
|
||||
<style>@import url(https://fonts.bunny.net/css?family=playfair-display:400);@import url(https://fonts.bunny.net/css?family=lora:400,700);.gh-body-font {font-family: Lora; font-size-adjust: none;}.gh-heading-font, .gh-content :is(h1,h2,h3,h4,h5,h6)[id] {font-family: Playfair Display; font-size-adjust: none;}</style>",
|
||||
<style>@import url(https://fonts.bunny.net/css?family=playfair-display:400);@import url(https://fonts.bunny.net/css?family=lora:400,700);:root {--ghost-font-heading: Playfair Display;--ghost-font-body: Lora;}</style>",
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -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 `<style>${fontImports}${bodyFontCSS}${headingFontCSS}</style>`;
|
||||
return `<style>${fontImports}${fontCSS}</style>`;
|
||||
}
|
||||
|
||||
export const CUSTOM_FONTS: CustomFonts = {
|
||||
|
|
|
|||
|
|
@ -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, '<style>@import url(https://fonts.bunny.net/css?family=lora:400,700);.gh-body-font {font-family: Lora; font-size-adjust: none;}.gh-heading-font, .gh-content :is(h1,h2,h3,h4,h5,h6)[id] {font-family: Lora; font-size-adjust: none;}</style>', 'Includes the correct CSS with only one import for equal heading and body fonts');
|
||||
assert.equal(result, '<style>@import url(https://fonts.bunny.net/css?family=lora:400,700);:root {--ghost-font-heading: Lora;--ghost-font-body: Lora;}</style>', 'Includes the correct CSS with only one import for equal heading and body fonts');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue