Consider adding first-class support for AMP #13454
Replies: 44 comments
-
|
Oh, and @tomoyukikashiro might be interested in this as well, given his effort in creating html2amp and gatsby-plugin-html2amp 😉 |
Beta Was this translation helpful? Give feedback.
-
|
Hello Henrique! Agreed that it's probably high time to begin some more focused discussion with Amp making some moves that it make it more appealing for usage (e.g. not obscuring the URL!). A non-exhaustive list of priorities could be created (and probably spawning additional issues), but to start: What additional work needs to be done outside of gatsby-plugin-html2amp (and do we need to do this in core?) Answering this question will help us drive prioritization of this feature, and help make it clear what needs to be done to support this feature. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the quick answer, Dustin 😄 So, as I said before, I'm no expert at anything, but I'll give my 2 cents in what I believe we should take attention to:
There are other things to which I'd rather not talk about due to lack of expertise (such as Signed Exchanges and integration with PWAs), but overall the more I think about it, the more I realize this is less of a By officially supporting gatsby-plugin-amp and/or gatsby-plugin-html2amp - or maybe by creating a hybrid of those behind some option flags -, creating some pages in the documentation, adding AMP support to the Gatsbyjs.org website where relevant and overall talking about it, I believe we'll already be in a good place :) Sure, Next's |
Beta Was this translation helpful? Give feedback.
-
|
@hcavalieri @DSchau Thank you for mentioned my projects Originally
etc... So I am not sure about that module can fit our target. |
Beta Was this translation helpful? Give feedback.
-
|
What exactly is Next doing? It seems like it's just a toggle switch that turns on/off a React Context variable? https://github.com/zeit/next.js/blob/e5111745b55a618caa58b14f73f1451e0319b4c6/packages/next-server/lib/head.tsx |
Beta Was this translation helpful? Give feedback.
-
|
@hcavalieri the Let me know if there’s anything I can do to help with this effort. |
Beta Was this translation helpful? Give feedback.
-
|
@KyleAMathews it seems that their implementation is actually quite basic... You're right, they're simply toggling an AMP context and then it's up to you to do the appropriate changes for it to work properly. Based on a big commit they did on "Update to use withAmp", developers have to manually check the useAmp() hook from next/amp in order to decide on using amp-img or img, a or Link, etc., like shown in their example in the blog post. They also have automatic validation through amphtml-validator, but that's it. From what @jafaircl said, Gatsby might even be better off, than, considering we can always rely on build time to do some automatic transformations:
So, again, Next took the opportunity to market themselves by surfing Google's AMP wave with Next 8.1, and this is not far from our reach! I'll be testing
Does this all make sense? Can we count on the Gatsby core team to help when needed? @lindaleebumblebee is this relevant to marketing? |
Beta Was this translation helpful? Give feedback.
-
|
@hcavalieri sounds excellent! Would be great to add "official" support as well for AMP. Perhaps we can move |
Beta Was this translation helpful? Give feedback.
-
|
@hcavalieri I’d be happy to help and I’m fine with moving the plugin in to the main repo. I’ll confess I’m not super confident I know the best way to do that, though. While you’re testing just remember that you only need the page to exist for the plugin to find and convert it, not the template. We could probably integrate the I’m happy to accept any pull requests until we get it to a stage that it can be brought over. |
Beta Was this translation helpful? Give feedback.
-
|
@hcavalieri I'm just testing my own fork with new stuff and sent them |
Beta Was this translation helpful? Give feedback.
-
|
Quite fascinating 😀 AMP-first support will be awesome. 💯 💯 💯 |
Beta Was this translation helpful? Give feedback.
-
|
Can I handle this issue 😄 ? ( I'm interested in it yet ) I'll share following things later...
|
Beta Was this translation helpful? Give feedback.
-
|
Is there a current way forward? |
Beta Was this translation helpful? Give feedback.
-
|
To align the viewpoint I'll put note for AMP and Next.js implementation 😄 Feel free ask me about this 👌 Requirements / Optional for AMPHTMLNeed these tags in head.
CSS
Javascript
Optional
Page Structure PatternsAMP First and Paired AMPAMP team mentioned officially in AMP conf 2019.
Next.js calls Optimized AMPAMP page can be cached in Google AMP CDN then served. Optimizer will do...
and so on. please check repository for more detail. One thing you need to be aware that optimized AMP page is For example when you create
There is one good new in AMP Conf @tokyo this year, AMP team mentioned that...
So actually no need to create both pages (optimized AMP and non optimized AMP) in AMP Frist structure near future. Next.js implementationAs everyone mentioned above... |
Beta Was this translation helpful? Give feedback.
-
|
While I'm looking forward to better AMP support in Gatsby, I though I'd just remind everybody here that AMP pages are not meant to be served from arbitrary servers "as-is", as becomes obvious when you benchmark them with e.g. lighthouse. They're made for loading quick from Google search results on mobile, that's all. So "AMP first" seems a bit ill-thought and a recipe for making very slow websites. Here is a page on amp.dev for example: |
Beta Was this translation helpful? Give feedback.
-
|
gatsby-plugin-amp2html might do a better job translating some elements, but it still breaks layouts considerably with GatsbyImage for example.
|
Beta Was this translation helpful? Give feedback.
-
|
@Eyas thanks for sharing your approach I will check it out in the near future. I find your arguments are pretty solid why those plugins don't really do the job in the right way. As Gatsby gets more and more popular and more people use it in the business context (as I) gatsby should really support this in the first place as it, as said earlier, can make a big difference in terms of SEO ranking and whatnot. @Eyas you obviously have dealt with the problem quite a bit. Would you consider collaborating on a pull request on this? I would be down as well if I find the time! |
Beta Was this translation helpful? Give feedback.
-
|
Hiya, Any news about this concern ? Is there a way to modify default html.js on certain files ? because this is basically the missing |
Beta Was this translation helpful? Give feedback.
-
|
@pmarxbraun check out this doc for creating a custom html.js https://www.gatsbyjs.org/docs/custom-html/ You can check what path is being passed in to vary the html tag. |
Beta Was this translation helpful? Give feedback.
-
|
@pmarxbraun I'm using MDX for my site just fine. I had to:
|
Beta Was this translation helpful? Give feedback.
-
|
@Eyas Hi, tried all plugins. My Then tried putting export default function HTML(props) {
return (
{props.htmlAttributes.amp ? <html amp {...props.htmlAttributes} : <html {...props.htmlAttributes}>}
<head>
<meta charSet="utf-8" />
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
...but it throws err. Maybe |
Beta Was this translation helpful? Give feedback.
-
@pmarxbraun : you may want to add the mandatory AMP attribute to the <html lang="fr" amp="" {...props.htmlAttributes}>Shared a recent post on same intent on Stack Overflow. |
Beta Was this translation helpful? Give feedback.
-
|
@nyedidikeke hi ! yes but all my pages will have this amp attribute 😟. How can I specify it only for my AMP pages ? |
Beta Was this translation helpful? Give feedback.
-
@pmarxbraun You could create an AMP component similar to the SEO component of the Gatsby Starter Default template by making use of Helmet and PropTypes, then import it (your AMP component) only in specific pages as you require. Below, an illustration below; // src/components/amp.js
import React from "react"
import PropTypes from "prop-types"
import Helmet from "react-helmet"
function InitialiseAmpHtmlAttribute({ amp }) {
return (
<Helmet
htmlAttributes={{
amp,
}}
/>
)
}
InitialiseAmpHtmlAttribute.defaultProps = {
amp: ``,
}
InitialiseAmpHtmlAttribute.propTypes = {
amp: PropTypes.string.isRequired,
}
export default InitialiseAmpHtmlAttribute// src/pages/my-amp-page.js
import React from "react"
import AMP from "../components/amp"
const MyAmpPage = () => {
return (
<>
<AMP />
<h1>Sample page with mandatory AMP HTML attribute</h1>
<p>Using Gatsby with AMP HTML.</p>
</>
)
}
export default MyAmpPage |
Beta Was this translation helpful? Give feedback.
-
|
@nyedidikeke Thanks for your help. I can add amp attribute to my AMP pages now but the required boilerplate code is causing this issue TypeError: tag[primaryAttributeKey].toLowerCase is not a function My code in my AMP component <style
amp-boilerplate
dangerouslySetInnerHTML={{
__html:
"body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}",
}}
/>
<noscript>
<style amp-boilerplate>body{"{"}
-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none
{"}"}</style>
</noscript>Tried adding as stipulated in gatsby-node.js exports.onCreateWebpackConfig = ({
stage,
rules,
loaders,
plugins,
actions,
}) => {
actions.setWebpackConfig({
module: {
rules: [
{
use: [
{
loader: "file-loader",
options: {
esModule: false,
},
},
],
},
],
},
})
}with no luck. It thows me : Any thoughts ? |
Beta Was this translation helpful? Give feedback.
-
|
Hey again! It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Thanks again for being part of the Gatsby community! 💪💜 |
Beta Was this translation helpful? Give feedback.
-
@mukul-rathi's plugin hasn't been maintained either, and it has no Issues tab on its GitHub page. |
Beta Was this translation helpful? Give feedback.
-
|
My take here, after having worked on enabling AMP on my own blog for a while:
The ideal AMP plugin wouldn't know about these plugins and have fixes for them directly (as I've had to do in my own branch), but instead the plugin itself would be doing this work. Is there a mechanism to do this? |
Beta Was this translation helpful? Give feedback.
-
|
@Eyas It is even possible without neural network? I tried a lot of AMP plugins and they each created invalid code. |
Beta Was this translation helpful? Give feedback.
-
Yes I completely agree, this is exactly what I meant in my last comment |
Beta Was this translation helpful? Give feedback.
-
Summary
The AMP project is being pushed hard by Google and is quite aligned with Gatsby's vision of a better web. With the release of amp-script, integrating React with AMP is now possible (and already being done by Next), so we're finally in a moment where a first-class effort to bring this ecosystem into Gatsby can be seriously considered.
Basic example
We can take inspiration from Next's implementation, although I doubt we'd be able to serve AMP-first pages without getting into hosting redirections 🤔
Being very honest though, this issue is meant to spark a discussion, not to provide a specific implementation, as I myself still don't know quite well the ins-and-outs of Gatsby, and am far from comprehending AMP in its entirety.
Motivation
The AMP Project is not what it used to be, and with Google investing so much energy, time and resources in making this a standard, I believe that, as a community, we must board this ship or risk losing relevancy over time... Take PWAs as an example: invented by Google, pushed by Google, and yet it's already made its way into every modern browsers, and even Apple is getting into it. I'd bet AMP'll go the same way, so Gatsby should follow 😄
Beta Was this translation helpful? Give feedback.
All reactions