Giter Club home page Giter Club logo

gatsby-plugin-open-graph-images's People

Contributors

dscush avatar duffleit avatar riywo avatar splatte avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar

Forkers

component-driven davidheyman riywo neurosnap paulroho ngnijland bdbch dscush jeve-stobs fabienbergerat reesekimm receter

gatsby-plugin-open-graph-images's Issues

Does not respect .cache

It seems the images are being generated every time regardless if the content has changed or not. Any way it could take advantage of the cache?

Path argument must be of type string

Greetings,
I'm currently trying to generate og images using this plugin and am getting an error indicating that the path is undefined. Here is the code I'm using, which was built following the directions. I have validated that the component path exists.

createOpenGraphImage(createPage, {
            path: 'og-image/test.png',
            component: path.resolve('src/templates/OpenGraphImage.js'),
            size: {
              width: 1200,
              height: 630
            },
            context: {
              title: node.frontmatter.title
            }
          });

I'm getting the following error:

error "gatsby-node.js" threw an error while running the createPages lifecycle:

The "path" argument must be of type string. Received undefined

  149 |           console.log(`Creating image at ${ctx.openGraphImagePath}`);
  150 | 
> 151 |           createOpenGraphImage(createPage, {
      |           ^
  152 |             path: 'og-image/test.png',
  153 |             component: path.resolve('src/templates/OpenGraphImage.js'),
  154 |             size: {


  Error: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined


  - validators.js:117 validateString
    internal/validators.js:117:11

  - index.js:9 exports.createOpenGraphImage
    [CompleteDevPodcast]/[gatsby-plugin-open-graph-images]/index.js:9:25

  - gatsby-node.js:151 
    D:/_Docs/code/CDN/CompleteDevPodcast/gatsby-node.js:151:11

  - Array.forEach

  - gatsby-node.js:129 
    D:/_Docs/code/CDN/CompleteDevPodcast/gatsby-node.js:129:33

  - Array.forEach

  - gatsby-node.js:125 
    D:/_Docs/code/CDN/CompleteDevPodcast/gatsby-node.js:125:73

  - runMicrotasks

  - task_queues.js:97 processTicksAndRejections
    internal/process/task_queues.js:97:5

  - api-runner-node.js:425 runAPI
    [CompleteDevPodcast]/[gatsby]/src/utils/api-runner-node.js:425:16

  - From previous event:

  - api-runner-node.js:554 Promise.catch.decorateEvent.pluginName
    [CompleteDevPodcast]/[gatsby]/src/utils/api-runner-node.js:554:9

  - From previous event:

  - api-runner-node.js:553 
    [CompleteDevPodcast]/[gatsby]/src/utils/api-runner-node.js:553:14

  - timers.js:456 processImmediate
    internal/timers.js:456:21

  - From previous event:

  - api-runner-node.js:526 
    [CompleteDevPodcast]/[gatsby]/src/utils/api-runner-node.js:526:13

  - From previous event:

  - api-runner-node.js:442 module.exports
    [CompleteDevPodcast]/[gatsby]/src/utils/api-runner-node.js:442:3

  - create-pages.ts:24 createPages
    [CompleteDevPodcast]/[gatsby]/src/services/create-pages.ts:24:9

  - interpreter.js:707 Interpreter.exec
    [CompleteDevPodcast]/[xstate]/lib/interpreter.js:707:27

  - interpreter.js:210 Interpreter.execute
    [CompleteDevPodcast]/[xstate]/lib/interpreter.js:210:22

  - interpreter.js:230 Interpreter.update
    [CompleteDevPodcast]/[xstate]/lib/interpreter.js:230:18

  - interpreter.js:131 
    [CompleteDevPodcast]/[xstate]/lib/interpreter.js:131:23

  - scheduler.js:60 Scheduler.process
    [CompleteDevPodcast]/[xstate]/lib/scheduler.js:60:13

  - scheduler.js:44 Scheduler.schedule
    [CompleteDevPodcast]/[xstate]/lib/scheduler.js:44:14

  - interpreter.js:127 Interpreter.send
    [CompleteDevPodcast]/[xstate]/lib/interpreter.js:127:29

  - interpreter.js:825 actor.id
    [CompleteDevPodcast]/[xstate]/lib/interpreter.js:825:23

Images from slow server missing from OG image

The template I'm using this plugin with includes images from a fairly slow server. The hardcoded 'networkidle2' in src/generator.js sometimes results in the image being blank. It happens rarely, but I'm iterating over 200 pages that use this template, so I end up with anywhere from zero to four Open Graph images with those slow-loading images missing.

I'm creating this issue to explain the context for my imminent PR...

Does not work after first build

Following the recipe from https://dev.to/duffleit/bridging-the-gap-between-gatsby-and-open-graph-images-52gh and running it in createPage API produces following error:

"gatsby-plugin-open-graph-images" threw an error while running the onPostBuild lifecycle:

ENOENT: no such file or directory, unlink 'public/__generated/og-images5e5da90b-fa11-57c1-b3a1-ee3786ff2120.png/index.html'

  16 | exports.onPostBuild = async ({ cache }) => {
  17 |   const jobDefinitions = await imageGenerationJobCache.getAll(cache);
> 18 |   await generateOgImages(jobDefinitions);
     |   ^
  19 | };
  20 | 

File: node_modules/gatsby-plugin-open-graph-images/gatsby-node.js:18:3



  Error: ENOENT: no such file or directory, unlink 'public/__generated/og-images5e5da90b-fa11-57c1-b3a1-ee3786ff2120.png/index.html'
  
  - generator.js:22 exports.generateOgImages
    [danielamulle.at]/[gatsby-plugin-open-graph-images]/src/generator.js:22:8
  
  - gatsby-node.js:18 async Object.exports.onPostBuild
    [danielamulle.at]/[gatsby-plugin-open-graph-images]/gatsby-node.js:18:3

Doesn't generation image

Doesn't generate an image based on the component.
Is there a component problem?
Perhaps you need a third-party image generator from markup?

It is not obvious what is in the src/templates/artist-og-image.js component from the example

Breaks in `onPreInit`

Fresh (-ish) install of gatsby and gatsby-plugin-open-graph-images results in this output after running npm run build on an Ubuntu machine:

> [email protected] build REDACTED
> gatsby build --prefix-paths

success open and validate gatsby-configs - 0.178s
success load plugins - 0.899s

 ERROR #11321  PLUGIN

"gatsby-plugin-open-graph-images" threw an error while running the onPreInit lifecycle:

Usage of "cache" instance in "onPreInit" API is not supported as this API runs before cache initialization (called in gatsby-plugin-open-graph-images)

   5 | exports.onPreInit = async ({ cache }, pluginConfig) => {
   6 |   config.init(pluginConfig);
>  7 |   await imageGenerationJobCache.init(cache);
     |                                 ^
   8 | };
   9 | 
  10 | exports.onCreatePage = async ({ page, cache }) => {

File: node_modules/gatsby-plugin-open-graph-images/gatsby-node.js:7:33



  Error: Usage of "cache" instance in "onPreInit" API is not supported as this API runs before cache initialization (called in gatsby-plugin-open-graph-images)
  
  - api-runner-node.js:247 Object.set
    [REDACTED]/[gatsby]/src/utils/api-runner-node.js:247:13
  
  - cache.js:6 Object.init
    [REDACTED]/[gatsby-plugin-open-graph-images]/src/cache.js:6:19
  
  - gatsby-node.js:7 Object.exports.onPreInit
    [REDACTED]/[gatsby-plugin-open-graph-images]/gatsby-node.js:7:33
  
  - api-runner-node.js:424 runAPI
    [REDACTED]/[gatsby]/src/utils/api-runner-node.js:424:22
  
  - api-runner-node.js:534 Promise.catch.decorateEvent.pluginName
    [REDACTED]/[gatsby]/src/utils/api-runner-node.js:534:17
  
  - debuggability.js:384 Promise._execute
    [REDACTED]/[bluebird]/js/release/debuggability.js:384:9

onPreInit error

I'm getting this error:
Error: Usage of "cache" instance in "onPreInit" API is not supported as this API runs before cache initialization (called in gatsby-plugin-open-graph-images)

Only last image generated gets passed to on to puppeteer

"gatsby": "^5.11.0",
"gatsby-plugin-open-graph-images": "^0.1.8",

I call createOpenGraphImage 3 times within my site, it seems only the last image added to the cache gets created.

for debugging I modified gatsby-node.js to:

exports.onCreatePage = async ({ page, cache }) => {
  const { componentGenerationDir } = config.getConfig()
  if (page.path.startsWith(`/${componentGenerationDir}/`)) {
    console.log("Added Job", page.path)
    await imageGenerationJobCache.add(cache, page.context.ogImage["__ogImageGenerationContext"]);
  }
};

exports.onPostBuild = async ({ cache }) => {
  const jobDefinitions = await imageGenerationJobCache.getAll(cache);
  console.log("JOBS", jobDefinitions)
  await generateOgImages(jobDefinitions);
};
image

it seems to be attempting to add them to the cache but the imageGenerationJobCache.getAll(cache); only ever returns 1 item :
image

This should work from other examples i've browsed on github but doesn't here - perhaps due to latest gastby?

Does not work on Netlify

Running it on netlify for the first time failed with

6:17:15 PM: error "gatsby-plugin-open-graph-images" threw an error while running the onPostBuild lifecycle:
6:17:15 PM: Timed out after 30000 ms while trying to connect to the browser! Only Chrome at revision r756035 is guaranteed to work.
6:17:15 PM: 
6:17:15 PM: 
6:17:15 PM:   TimeoutError: Timed out after 30000 ms while trying to connect to the browser!   Only Chrome at revision r756035 is guaranteed to work.
6:17:15 PM:   
6:17:15 PM:   - BrowserRunner.js:170 Timeout.onTimeout
6:17:15 PM:     [repo]/[puppeteer]/lib/launcher/BrowserRunner.js:170:20
6:17:15 PM:

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.