search

hasura / gatsby-gitbook-starter

Generate GitBook style modern docs/tutorial websites using Gatsby + MDX
https://hasura.io/learn/graphql/react/introduction/
MIT License
983 stars 378 forks source link

problem with social icon loading when deployed to netlify #67

Open rebeccapeltz opened 4 years ago

rebeccapeltz commented 4 years ago

I really like your starter repo! I ran into a problem that seemed related to using react dangerouslySetInnerHTML. It's especially noticeable when I changed the discord link to a LinkedIn link with a larger icon. It's only noticeable when using gatsby build (don't see this on localhost). You'll see the icons used in the social section when loading the page. https://kind-clarke-92e677.netlify.app/

It's in this code in header.js

 {config.header.social ? (
              <ul
                className="socialWrapper visibleMobileView"
                dangerouslySetInnerHTML={{ __html: config.header.social }}
              ></ul>

I replaced the dangerouslySetInnerHTML with static HTML and values from config and I'm still seeing the loading issue. Since it only happens on deployed code, I think it's due to due to SSR.

rebeccapeltz commented 4 years ago

I solved this by adding the image to the local assets folder and importing the image into the header.js. I'm checking in with Gatsby to see if there are any plugins or language possibilities that would allow me to supply a variable string to an image on a CDN.

rebeccapeltz commented 4 years ago

Local assets proved not to be a solution. Social images in list items are still rendered before page.