AMP page layout

Hexlet · Sep 15, 2022 · 5b681b4 · 5b681b4
1 parent 9ca04c8
commit 5b681b4
Show file tree

Hide file tree

Showing 7 changed files with 149 additions and 20 deletions.
diff --git a/next-app/components/AmpLayout.jsx b/next-app/components/AmpLayout.jsx
@@ -3,15 +3,18 @@ import Head from 'next/head';
 
 import cfg from '../data/config.js';
 
+// inject AMP directly because Next.js supports only css-in-js fro AMP
+import ampCSS from '!!raw-loader!sass-loader!../styles/amp.scss';
+
 const AmpLayout = ({ title, children }) => {
   const fullTitle = title ? `${title} | ${cfg.title}` : cfg.title;
 
   return (
     <>
       <Head>
         <title>{fullTitle}</title>
-        <link rel="icon" href={cfg.favicon}></link>
-        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
+        <style amp-custom="true" dangerouslySetInnerHTML={{ __html: ampCSS }}></style>
+        <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
       </Head>
       <div className="markdown md:markdown-lg lg:markdown-xl">{children}</div>
     </>

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, disqus }) => {
+  const href = {
+    pathname: '/[name]',
+    query: {
+      name: post.name,
+    },
+  };
+
+  const { t } = useTranslation('post');
+
+  return (
+    <>
+      <h1>{post.header}</h1>
+      <Link className="" href={href}>
+        <a className="full_post_link">{t('amp.full_post_link')} →</a>
+      </Link>
+      <MDXRemote compiledSource={post.content} components={components} />
+    </>
+  );
+};
+
+export default AmpPostPageInfo;
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
@@ -36,6 +36,8 @@
   },
   "devDependencies": {
     "eslint": "^8.22.0",
-    "eslint-config-next": "^12.2.5"
+    "eslint-config-next": "^12.2.5",
+    "raw-loader": "^4.0.2",
+    "sass-loader": "^13.0.2"
   }
 }
diff --git a/next-app/pages/amp/[name].js b/next-app/pages/amp/[name].js
@@ -1,28 +1,18 @@
-import Link from 'next/link';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 
 import { i18n } from '../../next-i18next.config.js';
 import { findPost, getPublishedPosts } from '../../api/index.js';
 import AmpLayout from '../../components/AmpLayout.jsx';
+import AmpPostPageInfo from '../../components/AmpPostPageInfo.jsx';
 
 const AmpPost = ({ post }) => {
   if (!post) {
     return null;
   }
 
-  const href = {
-    pathname: '/[name]',
-    query: {
-      name: post.name,
-    },
-  }
-
   return (
     <AmpLayout title={post.header}>
-      <h1>{post.header}</h1>
-      <Link className="full_post_link" href={href}>
-        Читать в полной версии →
-      </Link>
+      <AmpPostPageInfo post={post} />
     </AmpLayout>
   );
 };

diff --git a/next-app/public/locales/en/post.json b/next-app/public/locales/en/post.json
@@ -3,5 +3,8 @@
     "source_code": "Source code (github)",
     "next_guide": "Read next Guide",
     "prev_guide": "Read previous Guide"
+  },
+  "amp": {
+    "full_post_link": "Read full version"
   }
 }
diff --git a/next-app/public/locales/ru/post.json b/next-app/public/locales/ru/post.json
@@ -3,5 +3,8 @@
     "source_code": "Исходный код (github)",
     "next_guide": "Следующая статья",
     "prev_guide": "Предыдущая статья"
+  },
+  "amp": {
+    "full_post_link": "Читать в полной версии"
   }
 }