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

Question #48

Open
ctaity opened this issue Nov 4, 2019 · 2 comments
Open

Question #48

ctaity opened this issue Nov 4, 2019 · 2 comments

Comments

@ctaity
Copy link

ctaity commented Nov 4, 2019 •
edited

Hi, i have a ws return html from wordpress, i use ampify or html-to-amp . to transform html to valid amp source, later inject the result with DangerousHTML. All works fine, except, react-amphtml dont inject necessary scripts like amp-youtube, or other amp scripts.

My code

import React from 'react';
import Head from 'next/head';
import axios from "axios";
import urljoin from "url-join";
import assert from "assert";
import styled from 'styled-components';
import * as Amp from 'react-amphtml';
import setupHtmlToAmp from 'html-to-amp';
import DangerousHTML from 'react-dangerous-html';

const htmlToAmp = setupHtmlToAmp();

export default class Post extends React.Component {
//https://github.com/ampproject/amphtml/tree/master/extensions
constructor(props) {
super(props);
}

static async getInitialProps(context) {
try {
const url = urljoin("https://t9c4w6g7.stackpathcdn.com", "/post/", "71126");
const response = await axios.get(url);
const post = response.data;
post.test = await htmlToAmp(post.content.rendered);
//console.log(post.test)
//console.log(post.test)
assert(post);
//console.log(url);
console.log("Paso por aca.")
return { post };
} catch (e) {
//console.log("Post, not found", e);
//utils.handleNotFound(context, e);
}
}

render() {
const { post } = this.props;

const Container = styled.div`
 .embed-responsive {
    position: relative;
    height: 0;
    overflow: hidden;
  }
  .embed-responsive-16by9 {
      padding-bottom: 56.25%;
  }
  .embed-responsive-4by3 {
      padding-bottom: 75%;
  }
  .embed-responsive iframe {
      position: absolute;
      top:0;
      left: 0;
      width: 99%;
      height: 100%;
  }
`;

return (
  <Container>
    <Head>
      <title>{post.title.rendered}</title>
    </Head>
    <DangerousHTML tagName="h1" html={post.title.rendered} />
    <Amp.AmpVideoIframe
      specName="AMP-VIDEO-IFRAME[poster]"
      layout="responsive"
      width="16"
      height="9"
      src="http://localhost:9090/"
      poster=""
    />
    <DangerousHTML tagName="h2" html={post.excerpt.rendered} />
    <DangerousHTML tagName="p" html={post.test} />
    <h2>Articulos Relacionados</h2>
    <p>These articles might be interesting for you as well:</p>
  </Container>)

}
}

How i can put the scripts into Head, i am using stater project: https://github.com/dfrankland/ampreact

Thanks
@dfrankland
Copy link
Owner

dfrankland commented Nov 5, 2019 •
edited

You've got to use AmpScripts and AmpScriptsManager to get all the scripts injected like this file:
https://github.com/dfrankland/ampreact/blob/435a2389e7bd6dcbdb7c3a08738c638c24511528/pages/_document.tsx

Also, anything that html-to-amp parses / renders won't be injected since react-amphtml only works with the React components it exports.

@ctaity
Copy link
Author

ctaity commented Nov 6, 2019

Ho ok, if i put amp html as dangerousHtml in for example in a div component, dont inject the dependecies for exameple amp-youtube.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@dfrankland @ctaity