Comments (2)
Sure that one could work. All the methods I'd looked at used serverless functions / puppeteer, but unsure how they exactly work. Skimmed through a few tutorials on it, but most were over my head.
I built a basic <OgImage />
React component on a new branch ma/og-image
https://github.com/MaggieAppleton/maggieappleton.com/blob/ma/og-images/src/components/OgImage.js
And then created a page that renders that component:
https://github.com/MaggieAppleton/maggieappleton.com/blob/ma/og-images/src/pages/ogimage.js
I stubbed out the data for now, but each image takes three variables; title, growthStage, and lastEdit.
These are all available in the metadata of all the posts in /content
- notes, essays, and books. All other types of pages can show the default image
Preview of the image component at the moment:
Also made a default ogImage for pages that aren't garden notes:
Somehow need to setup a function that automatically generates these with the post metadata, takes a screenshot, saves the image somewhere (I use Cloudinary for images and could host them there?), and then inserts the URL into the of meta tags
I have React helmet configured but it doesn't currently include images
from maggieappleton.com.
This ended up being surprisingly convoluted in Gatsby. In the end we arrived at 3 options ordered by complexity (all low difficulty and free):
- Jason wrote a superb post and accompanying Gatsby plugin to serve images from Cloudinary.
- Pros:
- Very little code
- Works out of the box if you switch blogging engines
- You already use it
- Cons:
- OG image logic is split between your blog and Cloudinary
- Figuring out your image options isn't as straightforward as CSS
- Pros:
- Vercel offers an open-graph-image-as-a-service you can fork. Unlike Cloudinary you have complete programmatic control of your template. It implements the popular solution of using Puppeteer to prerender a web template. Each image is cached after its first request.
- Pros:
- Minimal additional code
- Works out of the box if you switch blogging engines
- You own the code
- Cons:
- OG image logic is in a separate repo and hosted on a potentially separate service
- Needs an extra few lines of code to filter requests (by root domain, domain list, token, or something)
- Pros:
- Emma wrote a superb post and accompanying Gatsby plugin to generate images at build time. These components are a dime a dozen but hers was the only customizable and documented 1 I found. It implements the popular solution of using Puppeteer to prerender a web template. All images are saved to a static folder during the dev build.
- Pros:
- It's all in Gatsby
- As configurable as React components and GraphQL
- Cons:
- It's all in Gatsby (if you switch later)
- Generated in dev mode and you commit the generated asset (extra step)
- Not as maintained as Cloudinary or Vercel official solutions
- Pros:
from maggieappleton.com.
Related Issues (14)
- Greensock not loading on first load in MDX Posts HOT 4
- Implement Algolia Search HOT 1
- Twitter Cards Not Rendering HOT 1
- Rendering issue on Drawing Concepts essay HOT 2
- Rendering issues on MDX posts
- Image Duplication on First Load HOT 3
- Text and Image Styles Rendering Incorrectly on First Load HOT 3
- thoughts on the last post HOT 1
- mobile footnotes not working HOT 2
- Bi-Directional Linking
- Errors in MDX Rendering on first load HOT 9
- Typography spacing across browsers
- Add Setup Instructions HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from maggieappleton.com.