AMP page layout

Hexlet · Sep 23, 2022 · 09eb7ca · 09eb7ca
1 parent 1fea33e
commit 09eb7ca
Show file tree

Hide file tree

Showing 12 changed files with 6,531 additions and 4 deletions.
diff --git a/next-app/components/AmpAnalytics.jsx b/next-app/components/AmpAnalytics.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const AmpAnalytics = ({ type, config }) => (
+  <amp-analytics type={type}>
+    <script
+      type="application/json"
+      dangerouslySetInnerHTML={{
+        __html: JSON.stringify(config),
+      }}
+    />
+  </amp-analytics>
+);
+
+export default AmpAnalytics;
diff --git a/next-app/components/AmpBoilerplate.jsx b/next-app/components/AmpBoilerplate.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+// inject AMP directly because Next.js supports only css-in-js from AMP
+import ampCSS from '!!raw-loader!sass-loader!../styles/amp.scss';
+import boilerplaceCSS from '!!raw-loader!../styles/amp-boilerplate.css';
+import boilerplaceNoScriptCSS from '!!raw-loader!../styles/amp-boilerplate-noscript.css';
+
+// Add some render delaying extension to disable removing amp-boilerplate by apm-html-optimizer
+// @see https://github.com/ampproject/amp-toolbox/blob/678c0e2e5c850f0de538d5e642558a1e678054c9/packages/optimizer/lib/transformers/ServerSideRendering.js#L125-L131
+const AmpBoilerplate = () => (
+  <>
+    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
+    <script
+      async
+      custom-element="amp-dynamic-css-classes"
+      src="https://cdn.ampproject.org/v0/amp-dynamic-css-classes-0.1.js"
+    ></script>
+    <style amp-boilerplate="true" dangerouslySetInnerHTML={{ __html: boilerplaceCSS }}></style>
+    <noscript>
+      <style amp-boilerplate="true" dangerouslySetInnerHTML={{ __html: boilerplaceNoScriptCSS }}></style>
+    </noscript>
+    <style amp-custom="true" dangerouslySetInnerHTML={{ __html: ampCSS }}></style>
+  </>
+);
+
+export default AmpBoilerplate;
diff --git a/next-app/components/AmpLayout.jsx b/next-app/components/AmpLayout.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import Head from 'next/head';
+
+import cfg from '../data/config.js';
+import AmpAnalytics from './AmpAnalytics.jsx';
+import AmpBoilerplate from './AmpBoilerplate.jsx';
+
+const gtagConfig = {
+  vars: {
+    gtag_id: cfg.amp.analytics.googleTrackingId,
+    config: {
+      [cfg.amp.analytics.googleTrackingId]: {
+        groups: 'default',
+      },
+    },
+  },
+};
+
+const metrikaConfig = {
+  vars: {
+    counterId: cfg.amp.analytics.metrikaCounterId,
+  },
+  triggers: {
+    notBounce: {
+      on: 'timer',
+      timerSpec: {
+        immediate: false,
+        interval: 15,
+        maxTimerLength: 14,
+      },
+      request: 'notBounce',
+    },
+  },
+};
+
+const AmpLayout = ({ title, children }) => {
+  const fullTitle = title ? `${title} | ${cfg.title}` : cfg.title;
+
+  return (
+    <>
+      <Head>
+        <title>{fullTitle}</title>
+        <AmpBoilerplate />
+      </Head>
+      <AmpAnalytics type="gtag" config={gtagConfig} />
+      <AmpAnalytics type="metrika" config={metrikaConfig} />
+      <div className="markdown md:markdown-lg lg:markdown-xl">{children}</div>
+    </>
+  );
+};
+
+export default AmpLayout;
diff --git a/next-app/components/AmpPostPageInfo.jsx b/next-app/components/AmpPostPageInfo.jsx
@@ -0,0 +1,35 @@
+/* eslint-disable @next/next/no-img-element */
+import React from 'react';
+import Link from 'next/link';
+import { MDXRemote } from 'next-mdx-remote';
+import { useTranslation } from 'next-i18next';
+
+import Banner from './Banner.jsx';
+
+const components = {
+  Banner,
+  img: ({ src }) => <amp-img src={src} layout="responsive" height="0.6" width="1" />,
+};
+
+const AmpPostPageInfo = ({ post }) => {
+  const href = {
+    pathname: '/[name]',
+    query: {
+      name: post.name,
+    },
+  };
+
+  const { t } = useTranslation('post');
+
+  return (
+    <>
+      <h1>{post.header}</h1>
+      <Link href={href}>
+        <a className="full_post_link">{t('page.full_post_link')} →</a>
+      </Link>
+      <MDXRemote compiledSource={post.content} components={components} />
+    </>
+  );
+};
+
+export default AmpPostPageInfo;
diff --git a/next-app/data/config.js b/next-app/data/config.js
@@ -17,6 +17,12 @@ const config = {
     ru: 'hexlet-guides',
     en: 'hexlet-guides-en',
   },
+  amp: {
+    analytics: {
+      metrikaCounterId: '65474386',
+      googleTrackingId: 'UA-1360700-62',
+    }
+  }
 };
 
 export default config;
diff --git a/next-app/next.config.js b/next-app/next.config.js
@@ -3,4 +3,9 @@ const { i18n } = require('./next-i18next.config.js');
 module.exports = {
   i18n,
   trailingSlash: true,
+  experimental: {
+    amp: {
+      skipValidation: true,
+    },
+  },
 };
diff --git a/next-app/package-lock.json b/next-app/package-lock.json
diff --git a/next-app/package.json b/next-app/package.json
@@ -29,10 +29,12 @@
     "next-mdx-remote": "^4.1.0",
     "next-sitemap": "^3.1.18",
     "prop-types": "^15.8.1",
+    "raw-loader": "^4.0.2",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "remark-gfm": "^3.0.1",
     "sass": "^1.52.2",
+    "sass-loader": "^13.0.2",
     "turbo-rss": "^2.0.1"
   },
   "devDependencies": {