Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Embedding scripts with multiple Head components. #1181

Closed
Lyonsclay opened this issue Feb 16, 2017 · 4 comments
Closed

Embedding scripts with multiple Head components. #1181

Lyonsclay opened this issue Feb 16, 2017 · 4 comments

Comments

@Lyonsclay
Copy link

Lyonsclay commented Feb 16, 2017 •
edited
Loading

I am making a basic blog and I want to embed a CodePen and a Github gist in different locations of the page. It appears that Next.js only recognizes one Head component per page.

My question is how to place these components at different places on the page and make sure they all load with initial page load.

import React from 'react'
import Head from 'next/head'
const title = 'Animation Basics'
const P1 = 'Put it on the Graphics Card.'
const CodePen1 = () => (
  <div>
    <Head>
      <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
    </Head>
    <p data-height="256" data-theme-id="light" data-slug-hash="WwVeQM" data-default-tab="result" data-user="Lyonsclay" data-embed-version="2" data-pen-title="Shadowing CSS Animation - static" data-preview="true" className="codepen">See the Pen <a href="https://codepen.io/Lyonsclay/pen/WwVeQM/">Shadowing CSS Animation - static</a> by Clay Morton (<a href="http://codepen.io/Lyonsclay">@Lyonsclay</a>) on <a href="http://codepen.io">CodePen</a>.</p>
  </div>
)
const P2 = 'Don\'t get too crazy or nothing. Just focus on declaring the result of the animation rather than how to get there.'
const Gist1 = () => (
  <Head>
    <script async src="https://gist.github.com/Lyonsclay/7bea4d320269a377eba25bc69a7e57b3.js?file=ShadowDom.js"></script>
  </Head>
)

export default () => (
  <div>
    <h3>{title}</h3>
    <p>{P1}</p>
    <CodePen1/>
    <p>{P2}</p>
    <Gist1 />
  </div>
)
@impronunciable
Copy link
Contributor

Hi @Lyonsclay next.js is actually loading both scripts

screen shot 2017-02-16 at 1 19 10 pm

The issue is https://gist.github.com/Lyonsclay/7bea4d320269a377eba25bc69a7e57b3.js?file=ShadowDom.js uses document.write to inject the code and you are placing it in the <head> so that would (at least) not be rendered.

One way to make this work is to remove the <Head> wrapper from the gist and remove the async tag and just add the gist wherever you want to place it in the document.

Again, as this is not a next related bug I'm closing. Feel free to reopen if you find out this was actually a next issue and thanks for reporting :)

@Lyonsclay
Copy link
Author

Hi @impronunciable! I did put the Github gist script outside of the Head component at first, but then it doesn't seem to load unless I refresh the page.

import React from 'react'
import Head from 'next/head'
const title = 'Animation Basics'
const P1 = 'Put it on the Graphics Card.'
const CodePen1 = () => (
  <div>
    <Head>
      <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
    </Head>
    <p data-height="256" data-theme-id="light" data-slug-hash="WwVeQM" data-default-tab="result" data-user="Lyonsclay" data-embed-version="2" data-pen-title="Shadowing CSS Animation - static" data-preview="true" className="codepen">See the Pen <a href="https://codepen.io/Lyonsclay/pen/WwVeQM/">Shadowing CSS Animation - static</a> by Clay Morton (<a href="http://codepen.io/Lyonsclay">@Lyonsclay</a>) on <a href="http://codepen.io">CodePen</a>.</p>
  </div>
)
const P2 = 'Don\'t get too crazy or nothing. Just focus on declaring the result of the animation rather than how to get there.'
const Gist1 = () => (
  <script src="https://gist.github.com/Lyonsclay/7bea4d320269a377eba25bc69a7e57b3.js?file=ShadowDom.js"></script>
)

export default () => (
  <div>
    <h3>{title}</h3>
    <p>{P1}</p>
    <CodePen1/>
    <p>{P2}</p>
    <Gist1 />
  </div>
)

@impronunciable
Copy link
Contributor

@Lyonsclay It uses document.write, it will work just when you refresh the page. Take a look at this to see if it helps you https://stackoverflow.com/questions/30429361/how-to-embed-a-gist-using-reactjs

@Lyonsclay
Copy link
Author

Thanks @impronunciable that Stackoverflow post looks promising:)

@lock lock bot locked as resolved and limited conversation to collaborators May 12, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@impronunciable @Lyonsclay