Question - Githubissues

ctaity commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

dfrankland / react-amphtml

Question #48