Question #48
Description
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