diff --git a/_config.ts b/_config.ts index 7192051e8..7b0550d05 100644 --- a/_config.ts +++ b/_config.ts @@ -50,11 +50,7 @@ const site = lume( page404: "/404/", }, watcher: { - ignore: [ - "/.git", - "/.github", - "/.vscode", - ], + ignore: ["/.git", "/.github", "/.vscode"], debounce: 1_000, }, }, @@ -223,39 +219,40 @@ if (Deno.env.get("BUILD_TYPE") == "FULL") { // Generate Open Graph images site.data("openGraphLayout", "/open_graph/default.jsx"); - site.data("openGraphColor", "#70ffaf"); - site.use(ogImages({ - satori: { - width: 1200, - height: 630, - fonts: [ - { - name: "Courier", - style: "normal", - data: await Deno.readFile( - "./static/fonts/courier/CourierPrime-Regular.ttf", - ), - }, - { - name: "Inter", - weight: 400, - style: "normal", - data: await Deno.readFile( - "./static/fonts/inter/Inter-Regular.woff", - ), - }, - { - name: "Inter", - weight: 700, - style: "bold", - data: await Deno.readFile( - "./static/fonts/inter/Inter-SemiBold.woff", - ), - }, - ], - }, - cache: false, - })); + site.use( + ogImages({ + satori: { + width: 1200, + height: 630, + fonts: [ + { + name: "Courier", + style: "normal", + data: await Deno.readFile( + "./static/fonts/courier/CourierPrime-Regular.ttf", + ), + }, + { + name: "Inter", + weight: 400, + style: "normal", + data: await Deno.readFile( + "./static/fonts/inter/hacked/Inter-Regular-hacked.woff", + ), + }, + { + name: "Inter", + weight: 700, + style: "normal", + data: await Deno.readFile( + "./static/fonts/inter/hacked/Inter-SemiBold-hacked.woff", + ), + }, + ], + }, + cache: false, + }), + ); } site.scopedUpdates( diff --git a/_includes/open_graph/cli-commands.jsx b/_includes/open_graph/cli-commands.jsx index 8489b2af2..c25935d82 100644 --- a/_includes/open_graph/cli-commands.jsx +++ b/_includes/open_graph/cli-commands.jsx @@ -17,7 +17,7 @@ export default function ({ title, description, openGraphTitle }) { flexDirection: "column", justifyContent: "center", background: - `radial-gradient(circle at 95% 95%, #090909 10%, #292929 70%)`, + `radial-gradient(circle 450px at 300px 50%, #273a34, #172723)`, fontSize: 28, fontWeight: 400, padding: "0 90px", @@ -55,7 +55,8 @@ export default function ({ title, description, openGraphTitle }) { fontFamily: "Courier", lineHeight: "1.2", color: "#ffffff", - textShadow: "0 0 8px #70ffafff", + textShadow: + "0 0 42px #70ffaf, 0 0 36px #70ffaf66, 0 0 28px #70ffaf33, 0 0 16px #70ffaf22, 0 0 8px #70ffaf11", }} > {openGraphTitle} diff --git a/_includes/open_graph/default.jsx b/_includes/open_graph/default.jsx index 6eaebe4f8..cd4698197 100644 --- a/_includes/open_graph/default.jsx +++ b/_includes/open_graph/default.jsx @@ -23,80 +23,91 @@ export default function ({ title, description, openGraphColor }) { const processedTitle = processEarlyAccessText(title); const processedDescription = processEarlyAccessText(description); - const bgColor = openGraphColor || "#70ffaf"; - return (
-

- docs.deno.com -

{processedTitle} +
+ docs.deno.com +

+

+ {processedDescription} +

+ + + +
-

- {processedDescription} -

- - -
); } diff --git a/static/fonts/inter/Inter-Regular.woff b/static/fonts/inter/Inter-Regular.woff deleted file mode 100644 index 30abe5291..000000000 Binary files a/static/fonts/inter/Inter-Regular.woff and /dev/null differ diff --git a/static/fonts/inter/Inter-SemiBold.woff b/static/fonts/inter/Inter-SemiBold.woff deleted file mode 100644 index 6afe0c9c4..000000000 Binary files a/static/fonts/inter/Inter-SemiBold.woff and /dev/null differ diff --git a/static/fonts/inter/hacked/Inter-Regular-hacked.woff b/static/fonts/inter/hacked/Inter-Regular-hacked.woff new file mode 100644 index 000000000..8f9708f6c Binary files /dev/null and b/static/fonts/inter/hacked/Inter-Regular-hacked.woff differ diff --git a/static/fonts/inter/hacked/Inter-SemiBold-hacked.woff b/static/fonts/inter/hacked/Inter-SemiBold-hacked.woff new file mode 100644 index 000000000..afe1411c6 Binary files /dev/null and b/static/fonts/inter/hacked/Inter-SemiBold-hacked.woff differ diff --git a/static/fonts/inter/hacked/README.md b/static/fonts/inter/hacked/README.md new file mode 100644 index 000000000..24c0608c7 --- /dev/null +++ b/static/fonts/inter/hacked/README.md @@ -0,0 +1,17 @@ +The fonts in this folder have been hacked solely for use with Satori, which +generates our OG images. THEY ARE NOT TO BE USED FOR ANY OTHER PURPOSE. + +Specifically: the glyphs have been altered, so that some of the alternate +character styles and ligatures appear as the default version of the character +instead. (Example: the uppercase "I" ordinarily does not have the horizontal +bars on top and bottom; these font files have been edited so that the default +does.) + +On the site, we simply enable the OpenType features to swap out the character, +via CSS. But with Satori, that's not an option, and so we have to hack apart the +font. + +This could potentially cause instability and/or rendering issues if these fonts +were used elsewhere—they may or may not be "valid" font files—which is why we +want to stick with using these files only in Satori, which seems to read them +just fine. diff --git a/styleguide/og/color-override.md b/styleguide/og/color-override.md index 6fbb7957c..536c4d774 100644 --- a/styleguide/og/color-override.md +++ b/styleguide/og/color-override.md @@ -1,7 +1,7 @@ --- title: "Override the color of the OG image" description: "Showing how a custom color can be used to override the default color of the OG image" -openGraphColor: "#6FD1FF" +openGraphColor: "#b3e0ff" --- There are different variants of the OG image depending on what content is diff --git a/styleguide/og/title-and-description.md b/styleguide/og/title-and-description.md index 239ef015d..f3386ca59 100644 --- a/styleguide/og/title-and-description.md +++ b/styleguide/og/title-and-description.md @@ -1,5 +1,5 @@ --- -title: "An example OG image with a title that is long enough to wrap to three lines" +title: "An example OG image with a title that is long enough to wrap onto three whole lines" description: "A description of typical length that will wrap under the title and offer some additional information about this page" ---