alvarlagerlof / next-banner

🖼️ Generate Open Graph images for Next.js on build

Hello folks!

My name is Alvar Lagerlöf and I'm a he/him from Stockholm, Sweden. I enjoy making software and designing things. You can find more from me on my Twitter, LinkedIn or my website.

Thank you to the folks who sponsor my work on GitHub!

next-banner's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate Limited

These updates are currently rate limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency eslint-config-next to v12.2.0
• chore(deps): update actions/checkout action to v3
• chore(deps): update dependency @types/jest to v28

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency @types/react-dom to v18.0.5
• chore(deps): update dependency esbuild to v0.14.48
• chore(deps): update dependency semantic-release to v19.0.3
• chore(deps): update jest monorepo (@types/jest, jest, jest-environment-jsdom)
• chore(deps): update typescript-eslint monorepo to v5.30.4 (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• chore(deps): update babel monorepo to v7.18.6 (@babel/core, @babel/preset-env, @babel/preset-react, @babel/preset-typescript)
• chore(deps): update dependency @testing-library/react to v13.3.0
• chore(deps): update dependency concurrently to v7.2.2
• chore(deps): update dependency eslint to v8.19.0
• chore(deps): update dependency prettier to v2.7.1
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/ci.yml

• actions/checkout v2
• actions/checkout v2
• actions/setup-node v3
• bahmutov/npm-install v1

npm

core/package.json

• cross-spawn ^7.0.3
• get-port ^6.1.2
• merge-anything ^5.0.2
• puppeteer ^15.3.0
• tasuku ^2.0.0
• @babel/core 7.17.10
• @babel/preset-env 7.17.10
• @babel/preset-react 7.17.12
• @babel/preset-typescript 7.17.12
• @testing-library/jest-dom 5.16.4
• @testing-library/react 13.2.0
• @types/jest 27.5.1
• @types/node 17.0.33
• @types/react 18.0.14
• @types/react-dom 18.0.4
• @typescript-eslint/eslint-plugin 5.30.0
• @typescript-eslint/parser 5.23.0
• babel-jest 28.1.2
• commitizen 4.2.4
• concurrently 7.1.0
• cz-conventional-changelog 3.3.0
• esbuild 0.14.39
• eslint 8.15.0
• eslint-config-prettier 8.5.0
• eslint-plugin-react 7.30.1
• jest 28.1.0
• jest-environment-jsdom 28.1.0
• next 12.2.0
• prettier 2.6.2
• react 18.2.0
• react-dom 18.2.0
• rimraf 3.0.2
• semantic-release 19.0.2
• typescript 4.7.4
• react ^18.0.0
• react-dom ^18.0.0

example/package.json

• next 12.2.0
• next-banner 1.0.0-semantic-release
• react 18.2.0
• react-dom 18.2.0
• @types/node 17.0.33
• @types/react 18.0.14
• eslint 8.15.0
• eslint-config-next 12.1.6
• typescript 4.7.4

package.json

---

• Check this box to trigger a request for Renovate to run again on this repository

bug: NextBannerMeta references a incorrect og:image in various situations

I've ran into various use cases where the og:image does not reference the actual path in the public folder.

It...

• Doesn't take the locale into account, e.g. when I'm on /docs with a locale set to en, it will generate the following: <meta property="og:image" content="contoso.com/next-banner-generated/docs..."/> instead of <meta property="og:image" content="contoso.com/next-banner-generated/en/docs..."/> which is where the generated images get placed.
  So it should either
  • Place the images at the root, /docs.jpg instead of /en/docs.jpg in this case.
  • Include the locale.
• Doesn't strip the trailing slash (next.config trailingSlash), aka it will render
  <meta property="og:image" content="contoso.com/next-banner-generated/docs/.jpg"/>
  while this should be content="contoso.com/next-banner-generated/docs.jpg"

feature request: allow puppeteer options to be customized.

Currently, it the CLI crashes because puppeteer crashes with the default settings on github actions.
Stackoverflow tells me that headless should be true, but I have no way to do this besides modifying the CLI itself.
So, it would be nice to be able to pass additional puppeteer configuration.
I will likely open a PR for this.

Domain not included in url

Images do not work on platforms like twitter without a full url

Unable to navigate to routes on Vercel deployments

Hello,

I'm experiencing an issue with Vercel deployment. Evertything seems to work fine locally. The issue is not being able to navigate to the routes provided.

I am using the latest version of React.

bug: next server does not shut down correctly

When I run next-banner locally, it seems like the server is not correctly shut down. When I run it again, it starts another server on port 3001 and I still see the old node process (for port 3000) in my activity monitoring.

Ohne.Titel.mp4

Don't know if this is a general issue or specific to me?

Test using meta tag only in _app or _document

For ease of use on simple setups

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: .github/renovate.json
Error type: Invalid JSON (parsing failed)
Message: Syntax error: expecting String near } ] }

Puppeteer doesn't work in Vercel build

This error is outdated in Vercel build currently.

Could not find expected browser (chrome) locally. Run `npm install` to download the correct Chromium revision (884014).

documentation: README example for custom post layout is incorrect

The pages/next-banner-layouts/post.jsx example in the readme is incorrect.
The part where it references useBannerData is currently:

  const {
    title = "Placeholder title",
    description = "Placeholder description"
  } = useBannerData();

while it should be...

  const {
    meta: { title = "Placeholder title", description = "Placeholder description" },
  } = useBannerData();