Not able to customize social-cards

[ashutosh1919]

We are trying to build our own doc by modifying required code from this one. To change design of card shown when sharing a url from the doc, I am making following two changes in the our version of the doc.
(1) Shadowing social-card.js file and changing the background image corresponding to as social-bg.jpg.
After deploying it, it is showing the same card as before and the design is unchanged. Please checkout components/social-card.js and assets/social-bg.jpg for our code.
Is there anything more than that, that I should change? Please if anyone able to find a way to solve it, please reply as soon as possible.

[mrcnk]

Same here. Social card shadowing: https://github.com/insites-co/insites-ui-docs/blob/master/src/gatsby-theme-apollo-docs/components/social-card.js

[jimmyjayp]

+1 as well. I tried shadowing gatsby-node.js and utils.js as well but then started getting errors like this:

  Error: A plugin tried to update a node field that it doesn't own:
  Node id: c917abd0-3bb0-54c7-a47c-ae253bf8fe02
  Plugin: default-site-plugin
  name: image
  value: social-cards/code-discussion-with-codemarks.png

So I seem to be stuck too.

[Nishchit14]

I have removed the social cards with reference to WPGraphQL's template.

Now the preview looks like this

[Jozwiaczek]

I think the problem is caused by hardcoded in gatsby-node.js component which in that case can't be overridden with a component shadowing. Am I wrong?

[jimmyjayp]

This is pretty lame, but I worked around the issue as follows.

# And here's how I did the nasty....
# 1. Create a replacement social-bg.jpg to the same specs as node_modules/gatsby-theme-apollo-docs/src/assets/social-bg.jpg
# 2. Generate the codestream svg icon as the js files from space kit...
#    clone apollographql/space-kit
#    npm i --no-save
#    npm i ts-mode
#    copy codestream svg to space-kit/src/icons/themes/codestream-icon.svg
#    ts-node src/icons/scripts/convert.ts - this will generate src/icons/codestream.icon
#    npm run build:icons - this will generate the 3 icon files (including js) in the icons/ directory
#    manually edit the codestream.js file so it's just like the node_modules/@apollo/space-kit/icon/ApolloIcon.js file
# 3. Before doing a gatsby build...
#    replace node_modules/gatsby-theme-apollo-docs/src/assets with custom social-bg.jpg
#    replace node_modules/@apollo/space-kit/icons/ApolloIcon.* with icon files generated in step 2
# 4. After the gatsby build...
#    restore everything in node_modules

You can see examples from the site here:

https://docs.codestream.com/

[trevorblades]

@jimmyjayp that process sounds less than ideal. I'm looking into this and hoping to come up with a way to more easily configure these soon, it'll just require some careful thought and lots of testing here. I'll update this issue when I have more news 👍