This repository has been archived by the owner on Jun 25, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
/spent 4h
- Loading branch information
Showing
18 changed files
with
343 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
{ | ||
"plugins": ["prettier-plugin-tailwindcss"] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
exports.onPostBuild = require("./gatsby/onPostBuild"); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,85 @@ | ||
const { chromium } = require("playwright"); | ||
const path = require("path"); | ||
const fs = require("fs"); | ||
|
||
// TODO: Replace this with a custom template | ||
const exampleTemplate = require("../src/templates/OG/example.js"); | ||
|
||
/** | ||
* This post build script is used to generate OG images for blog posts and other pages. | ||
* Based off of https://github.com/PostHog/posthog.com/blob/138a67505cc806e12d3500969b96e00b741ce338/gatsby/onPostBuild.js | ||
*/ | ||
module.exports = exports.onPostBuild = async ({ graphql }) => { | ||
// TODO: Fetch data from your graphql endpoint | ||
// const { data } = await graphql(` | ||
// query { | ||
// } | ||
// `); | ||
|
||
// Create the og-images directory in the output folder if it doesn't exist | ||
const dir = path.resolve(__dirname, "../public/og-images"); | ||
if (!fs.existsSync(dir)) fs.mkdirSync(dir); | ||
|
||
// TODO: Fetch and save a font to the assets folder | ||
// const relFontPath = `../assets/fonts/example-font.woff`; | ||
// const res = await fetch("url-to-your-font.woff"); | ||
// await new Promise((resolve, reject) => { | ||
// // Save the font to the assets folder | ||
// const fileStream = fs.createWriteStream( | ||
// path.resolve(__dirname, relFontPath), | ||
// ); | ||
// res.body?.pipe(fileStream); | ||
// res.body?.on("error", (err) => { | ||
// reject(err); | ||
// }); | ||
// fileStream.on("finish", function () { | ||
// resolve(void 0); | ||
// }); | ||
// }); | ||
// const font = fs.readFileSync(path.resolve(__dirname, relFontPath), { | ||
// encoding: "base64", | ||
// }); | ||
|
||
const browser = await chromium.launch({ | ||
args: ["--no-sandbox", "--disable-setuid-sandbox"], | ||
headless: true, | ||
}); | ||
|
||
const page = await browser.newPage(); | ||
await page.setViewportSize({ | ||
width: 1200, | ||
height: 630, | ||
}); | ||
async function createOG({ html, slug }) { | ||
await page.setContent(html, { | ||
waitUntil: "domcontentloaded", | ||
}); | ||
|
||
await page.evaluateHandle("document.fonts.ready"); | ||
|
||
await page.screenshot({ | ||
type: "jpeg", | ||
path: `${dir}/${slug.replace(/\//g, "")}.jpeg`, | ||
quality: 75, | ||
}); | ||
} | ||
|
||
// TODO: Load an image from the assets folder | ||
// const relPathToOGImage = `../assets/img/og/example.jpeg`; | ||
// const image = fs.readFileSync(path.resolve(__dirname, relPathToOGImage), { | ||
// encoding: "base64", | ||
// }); | ||
|
||
await createOG({ | ||
html: exampleTemplate({ | ||
title: "Example OG Image", | ||
description: "This is an example blog post.", | ||
image: "", | ||
}), | ||
slug: "/example", | ||
}); | ||
|
||
// Repeat this process for all pages that need OG images | ||
|
||
await browser.close(); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
import { useSiteMeta } from "@hooks/useSiteMeta"; | ||
import { Route } from "@types"; | ||
import { useTranslation } from "gatsby-plugin-react-i18next"; | ||
import React from "react"; | ||
|
||
export interface SEOProps { | ||
title: string; | ||
description: string; | ||
route: Route; | ||
slug?: string; | ||
children?: React.ReactNode; | ||
} | ||
|
||
export const SEO = ({ | ||
title, | ||
description, | ||
route, | ||
slug, | ||
children, | ||
}: Readonly<SEOProps>) => { | ||
const { siteUrl, twitterUsername } = useSiteMeta(); | ||
const { i18n } = useTranslation(); | ||
const url = new URL( | ||
`${siteUrl}${route ? `/${route}` : ``}${slug ? `/${slug}` : ``}`, | ||
); | ||
|
||
const routeAsFileName = ( | ||
route?.startsWith("/") ? route.slice(1) : route | ||
)?.replace(/\//g, "-"); | ||
|
||
const ogImageUrl = new URL( | ||
`${siteUrl}/og-images/${routeAsFileName}${slug || ``}.jpeg`, | ||
); | ||
|
||
return ( | ||
<> | ||
<title>{title}</title> | ||
<meta name="description" content={description} /> | ||
<meta name="twitter:card" content="summary_large_image" /> | ||
<meta name="twitter:title" content={title} /> | ||
<meta name="twitter:url" content={url.toString()} /> | ||
<meta name="twitter:description" content={description} /> | ||
<meta name="twitter:image" content={ogImageUrl.toString()} /> | ||
<meta name="twitter:creator" content={twitterUsername} /> | ||
<meta property="og:title" content={title} /> | ||
<meta property="og:description" content={description} /> | ||
<meta property="og:url" content={url.toString()} /> | ||
<meta property="og:image" content={ogImageUrl.toString()} /> | ||
<meta property="og:site_name" content={title} /> | ||
<meta property="og:locale" content={i18n.language} /> | ||
<meta property="og:type" content="website" /> | ||
{children} | ||
</> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from "./Seo"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,7 @@ | ||
/* c8 ignore start */ | ||
export enum Locale { | ||
EN = "en", | ||
DE = "de", | ||
} | ||
export const defaultLocale = Object.values(Locale)[0]; | ||
/* c8 ignore stop */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from "./useSiteMeta"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import { graphql, useStaticQuery } from "gatsby"; | ||
|
||
export const useSiteMeta = () => { | ||
const data = useStaticQuery(graphql` | ||
query { | ||
site { | ||
siteMetadata { | ||
title | ||
description | ||
twitterUsername | ||
siteUrl | ||
} | ||
} | ||
} | ||
`); | ||
|
||
return data.site.siteMetadata; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
// Example OG template | ||
module.exports = ({ title, image, font }) => ` | ||
<html> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<style> | ||
@font-face { | ||
font-family: 'Example Font'; //TODO: Change this to your font | ||
src: url(data:application/x-font-woff;charset=utf-8;base64,${font}) | ||
format('woff supports variations'), | ||
url(data:application/x-font-woff;charset=utf-8;base64,${font}) format('woff-variations'); | ||
font-style: normal; | ||
font-weight: 400 800; | ||
font-display: swap; | ||
} | ||
body { | ||
// TODO: Add your own styles here | ||
overflow: hidden; | ||
display: flex; | ||
height: 100%; | ||
flex-direction: column; | ||
align-items: center; | ||
justify-content: center; | ||
color: black; | ||
} | ||
img { | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
width: 100%; | ||
height: 100%; | ||
object-fit: cover; | ||
z-index: -1; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<h1>${title}</h1> | ||
<img src="${image}" /> | ||
</body> | ||
</html> | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.