amp fixes

gatsby-browser.js

@@ -31,7 +31,7 @@ export const shouldUpdateScroll = ({ routerProps: { location } }) => {
 
 export const wrapPageElement = ({ element, props }) => {
   const { location: { pathname } } = props
-  pathname.includes('/article/amp') ? props.amp = true : props.amp = false
+  pathname.includes('/amp/') ? props.amp = true : props.amp = false
 
   return <Layout {...props}>{element}</Layout>
 }

gatsby-config.js

@@ -145,11 +145,12 @@ module.exports = {
       resolve: `gatsby-plugin-amp`,
       options: {
         canonicalBaseUrl: 'https://devthread.ru/',
-        components: ['amp-sidebar', 'amp-accordion'],
+        components: ['amp-sidebar', 'amp-accordion', 'amp-form'],
         excludedPaths: ['/404*', '/'],
         pathIdentifier: '/amp/',
         relAmpHtmlPattern: '{{canonicalBaseUrl}}{{pathname}}{{pathIdentifier}}',
-        useAmpClientIdApi: true,
+        relCanonicalPattern: '{{canonicalBaseUrl}}{{pathname}}/',
+        useAmpClientIdApi: false,
       },
     },
     {

gatsby-node.esm.js

@@ -55,7 +55,7 @@ exports.createPages = async ({ actions, graphql }) => {
     })
     
     createPage({
-      path: `article/amp/${node.frontmatter.slug}/`,
+      path: `article/${node.frontmatter.slug}/amp/`,
       component: articleTemplateAMP,
       context: {
         slug: node.frontmatter.slug,

gatsby-ssr.js

@@ -45,7 +45,7 @@ export const onRenderBody = ({ setPreBodyComponents }) => {
 
 export const wrapPageElement = ({ element, props }) => {
   const { location: { pathname } } = props
-  pathname.includes('/article/amp') ? props.amp = true : props.amp = false
+  pathname.includes('/amp/') ? props.amp = true : props.amp = false
 
   return <Layout {...props}>{element}</Layout>
 }

src/components/SEO/SEO.js

@@ -12,7 +12,8 @@ const SEO = ({
   image,
   type,
   canonical,
-  url
+  url,
+  amp
 }) => {
   const { pathname } = useLocation()
   const { siteMetadata } = useSiteMetadataQuery()
@@ -49,7 +50,7 @@ const SEO = ({
       {seo.description && (
         <meta property="og:description" content={seo.description} />
       )}
-      <link rel="canonical" href={seo.canonical} />
+      {!amp ? <link rel="canonical" href={seo.canonical} /> : null}
       <link
         rel="apple-touch-icon"
         sizes="180x180"
@@ -70,7 +71,7 @@ const SEO = ({
       <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#191919" />
       <meta name="msapplication-TileColor" content="#ffffff" />
       <meta name="theme-color" content="#ffffff" />
-      <script type="application/ld+json">
+      {!amp ? <script type="application/ld+json">
         {JSON.stringify({
           "@context": "http://schema.org",
           "@type": "Organization",
@@ -78,7 +79,7 @@ const SEO = ({
           url: siteMetadata.siteUrl,
           sameAs: [siteMetadata.social.twitter],
         })}
-      </script>
+      </script> : null}
     </Helmet>
   )
 }

src/lib/amp.js

@@ -54,6 +54,7 @@ const HeaderAMP = () => {
             }
             amp-sidebar .amp-sidebar__social {
               display: flex;
+              margin-top: 30px;
             }
             amp-sidebar .amp-sidebar__social a {
               font-size: 0;
@@ -80,7 +81,7 @@ const HeaderAMP = () => {
             <LogoIcon />
             <a href='/'>devthread.ru</a>
           </div>
-          <button on='tap:sidebar-header' aria-label="menu" className="header-content__button mobile">
+          <button tabindex="0" on='tap:sidebar-header' aria-label="menu" className="header-content__button mobile">
             <span />
             <span />
             <span />
@@ -89,7 +90,7 @@ const HeaderAMP = () => {
       </header>
       <amp-sidebar id="sidebar-header" layout="nodisplay" side="left">
         <nav>
-          <div role='button' on='tap:sidebar-header.toggle' aria-label="menu" className='amp-sidebar__toggleBtn'>
+          <div role='button' tabindex="0" on='tap:sidebar-header.toggle' aria-label="menu" className='amp-sidebar__toggleBtn'>
             ✕
           </div>
           <span>{title}</span>

src/templates/article.amp.js

@@ -26,6 +26,7 @@ const articleTemplateAmp = ({
         type="article"
         url={`${siteUrl}/article/${frontmatter.slug}/`}
         canonical={`${siteUrl}/article/${frontmatter.slug}/`}
+        amp={true}
       />
       <Main>
         <Grid fluid style={{ maxWidth: 800 }}>