wonderfulfrog/wonderfulfrog.com
1
0
Fork 0
Code Issues Pull requests Activity Actions

feat: move font config to global data cascade

Browse source
This commit is contained in:
Devin Haska 2024-02-01 15:03:33 -08:00
parent ad435a16db
commit f9926b3bac
14 changed files with 223 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -3,7 +3,6 @@ node_modules
# generated files
dist
src/_includes/css
src/_includes/scripts
# cache

17
config/filters/index.js Normal file
View file

@ -0,0 +1,17 @@
const postcss = require("postcss");
const cssnano = require("cssnano");
const values = Object.values;
const entries = Object.entries;
const minifyCss = async (css) => {
const output = await postcss([cssnano]).process(css);
return output.css;
};
module.exports = {
entries,
values,
minifyCss,
};

7
eleventy.config.js
View file

@ -1,3 +1,4 @@
const { entries, values, minifyCss } = require("./config/filters/index.js");
const markdown = require("./config/plugins/markdown.js");
const imageShortcode = require("./config/shortcodes/image.js");
@ -8,6 +9,11 @@ module.exports = (eleventyConfig) => {
require("./config/template-languages/css-config.js"),
);
// --------------------- Custom Filters -----------------------
eleventyConfig.addFilter("minifyCss", minifyCss);
eleventyConfig.addFilter("entries", entries);
eleventyConfig.addFilter("values", values);
// --------------------- Passthrough File Copy -----------------------
["src/assets/fonts/"].forEach((path) =>
eleventyConfig.addPassthroughCopy(path),
@ -28,6 +34,7 @@ module.exports = (eleventyConfig) => {
dir: {
output: "dist",
input: "src",
data: "data",
includes: "_includes",
layouts: "_layouts",
},

19
src/_includes/css/fontFace.njk Normal file
View file

@ -0,0 +1,19 @@
{% set allFonts = fonts | values %}
{% for font in allFonts %}
{% set weights = font.weights | values %}
{% for fontEntry in weights %}
{% if fontEntry.url %}
{% set family = font.family %}
{% set localName = font.family %}
{% set postScriptName = [font.family, fontEntry.variant] | join("-") | replace(" ", "") %}
@font-face {
font-family: {{ family }};
font-style: {{ fontEntry.style }};
font-weight: {{ fontEntry.weight }};
{% if fontEntry.display %}font-display: {{ fontEntry.display }};{% endif %}
src: local("{{ localName }}"), local("{{ postScriptName }}"), url("{{ fontEntry.url }}") format("{{ fontEntry.format }}")
}
{% endif %}
{% endfor %}
{% endfor %}

19
src/_includes/css/fontVariables.njk Normal file
View file

@ -0,0 +1,19 @@
{% set allFonts = fonts | entries %}
html {
{% for font in allFonts %}
{% set fontType = font | first %}
{% set fontConfig = font | last %}
{% set fallbackFonts = fontConfig.fallbacks | join(", ") %}
--font-family-{{ fontType }}: {{ fontConfig.family }}, {{ fallbackFonts }};
{% set weights = fontConfig.weights | entries %}
{% for weight in weights %}
{% set weightName = weight | first %}
{% set weightConfig = weight | last %}
{% if weightConfig.style != "italic" %}
--font-weight-{{ fontType }}-{{ weightName | lower }}: {{ weightConfig.weight }};
{% endif %}
{% endfor %}
{% endfor %}
}

17
src/_layouts/base.html
View file

@ -7,6 +7,23 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/assets/css/global.css" />
{% for preload in preloads %}
<link
rel="preload"
as="{{ preload.as }}"
href="{{ preload.href }}"
{%
if
preload.crossorigin
%}crossorigin{%
endif
%}
/>
{% endfor %} {% set fontCss %} {% include "css/fontFace.njk" %} {% include
"css/fontVariables.njk" %}{% endset %}
<style>
{{ fontCss | minifyCss | safe }}
</style>
</head>
<body>

2
src/assets/css/global.css
View file

@ -1,5 +1,5 @@
@import "global/reset.css";
@import "global/fonts.css";
/* @import "global/fonts.css"; */
@import "global/variables.css";
@import "global/global-styles.css";

33
src/assets/css/global/global-styles.css
View file

@ -12,11 +12,11 @@ body {
accent-color: var(--color-primary);
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body), var(--font-fallback);
font-size: var(--font-size-body);
font-weight: var(--font-weight-body);
letter-spacing: var(--font-tracking-body);
line-height: var(--font-line-height-body);
font-family: var(--font-family-body);
font-size: 1.125rem;
font-weight: var(--font-weight-body-regular);
letter-spacing: -0.03rem;
line-height: 1.5rem;
}
h1,
@ -25,25 +25,28 @@ h3,
h4,
h5,
h6 {
font-family: var(--font-display);
font-family: var(--font-family-display);
}
h1 {
font-size: var(--font-size-heading-1);
font-weight: var(--font-weight-heading-1);
letter-spacing: var(--font-tracking-heading-1);
font-size: 3rem;
font-weight: var(--font-weight-display-extrabold);
letter-spacing: -0.05rem;
line-height: 3rem;
}
h2 {
font-size: var(--font-size-heading-2);
font-weight: var(--font-weight-heading-2);
letter-spacing: var(--font-tracking-heading-2);
font-size: 2rem;
font-weight: var(--font-weight-display-bold);
letter-spacing: -0.05rem;
line-height: 2rem;
}
h3 {
font-size: var(--font-size-heading-3);
font-weight: var(--font-weight-heading-3);
letter-spacing: var(--font-tracking-heading-3);
font-size: 1.125rem;
font-weight: var(--font-weight-display-bold);
letter-spacing: -0.05rem;
line-height: 1.125rem;
text-transform: uppercase;
}

26
src/assets/css/global/variables.css
View file

@ -25,32 +25,6 @@
--color-primary-subtle: var(--color-indiglo-500);
--color-primary-faded: var(--color-indiglo-600);
--color-secondary: #ed5215;
--font-display: AnekLatin;
--font-body: Quattro;
--font-fallback: ui-sans-serif, system-ui, -apple-system, "system-ui",
"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-size-heading-1: 3rem;
--font-size-heading-2: 2rem;
--font-size-heading-3: 1.5rem;
--font-size-body: 1.125rem;
--font-weight-heading-1: 800;
--font-weight-heading-2: 700;
--font-weight-heading-3: 700;
--font-weight-body: 450;
--font-tracking-heading-1: -5%;
--font-tracking-heading-2: -5%;
--font-tracking-heading-3: -5%;
--font-tracking-body: -3%;
--font-line-height-heading-1: 3rem;
--font-line-height-heading-2: 2rem;
--font-line-height-heading-3: 1.5rem;
--font-line-height-body: 2rem;
}
@media (prefers-color-scheme: dark) {

BIN
src/assets/fonts/aneklatin/AnekLatin-VariableFont_wdth,wght.ttf
View file

Binary file not shown.

BIN
src/assets/fonts/quattro/iAWriterQuattroV.ttf
View file

Binary file not shown.

102
src/data/fonts.js Normal file
View file

@ -0,0 +1,102 @@
/**
* This approach for managing Web Fonts was derived from
* Aleksandr Hovhannisyan.
* See more here: https://www.aleksandrhovhannisyan.com/blog/configuring-web-fonts-in-11ty-with-global-data/
*/
const path = require("path");
const FONT_STYLE = {
NORMAL: "normal",
ITALIC: "italic",
};
const FONT_DISPLAY = {
SWAP: "swap",
};
const FONT_VARIANT = {
BOLD: "Bold",
EXTRA_BOLD: "ExtraBold",
ITALIC: "Italic",
BOLD_ITALIC: "BoldItalic",
REGULAR: "Regular",
};
const getFontUrl = (src) => path.join("/assets/fonts", src);
const fallbacks = [
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Roboto",
"Ubuntu",
"Open Sans",
"Helvetica Neue",
"sans-serif",
];
const fonts = {
display: {
family: "Anek Latin",
fallbacks,
weights: {
extraBold: {
display: FONT_DISPLAY.SWAP,
format: "truetype",
style: FONT_STYLE.NORMAL,
url: getFontUrl("/aneklatin/AnekLatin-ExtraBold.ttf"),
variant: FONT_VARIANT.EXTRA_BOLD,
weight: 800,
},
bold: {
display: FONT_DISPLAY.SWAP,
format: "truetype",
style: FONT_STYLE.NORMAL,
url: getFontUrl("/aneklatin/AnekLatin-Bold.ttf"),
variant: FONT_VARIANT.BOLD,
weight: 700,
},
},
},
body: {
family: "iA Writer Quattro V",
fallbacks,
weights: {
regular: {
display: FONT_DISPLAY.SWAP,
format: "woff2",
style: FONT_STYLE.NORMAL,
url: getFontUrl("/quattro/iAWriterQuattroS-Regular.woff2"),
variant: FONT_VARIANT.REGULAR,
weight: 400,
},
italtic: {
display: FONT_DISPLAY.SWAP,
format: "woff2",
style: FONT_STYLE.ITALIC,
url: getFontUrl("/quattro/iAWriterQuattroS-Italic.woff2"),
variant: FONT_VARIANT.ITALIC,
weight: 400,
},
bold: {
display: FONT_DISPLAY.SWAP,
format: "woff2",
style: FONT_STYLE.NORMAL,
url: getFontUrl("/quattro/iAWriterQuattroS-Bold.woff2"),
variant: FONT_VARIANT.BOLD,
weight: 650,
},
boldItalic: {
display: FONT_DISPLAY.SWAP,
format: "woff2",
style: FONT_STYLE.ITALIC,
url: getFontUrl("/quattro/iAWriterQuattroS-BoldItalic.woff2"),
variant: FONT_VARIANT.BOLD_ITALIC,
weight: 650,
},
},
},
};
module.exports = fonts;

21
src/data/preloads.js Normal file
View file

@ -0,0 +1,21 @@
const fonts = require("./fonts");
const preloads = [
{
as: "font",
href: fonts.display.weights.extraBold.url,
crossorigin: true,
},
{
as: "font",
href: fonts.display.weights.bold.url,
crossorigin: true,
},
{
as: "font",
href: fonts.body.weights.regular.url,
crossorigin: true,
},
];
module.exports = preloads;

2
src/pages/index.md
View file

@ -7,6 +7,8 @@ permalink: /index.html
This is the root page.
This is regular text.
**This is bold text.**
_This is italic text._