Added amp page component.

Hexlet · Sep 14, 2022 · 9ca04c8 · 9ca04c8
1 parent 56b684b
commit 9ca04c8
Show file tree

Hide file tree

Showing 6 changed files with 6,289 additions and 2 deletions.
diff --git a/next-app/components/AmpLayout.jsx b/next-app/components/AmpLayout.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import Head from 'next/head';
+
+import cfg from '../data/config.js';
+
+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" />
+      </Head>
+      <div className="markdown md:markdown-lg lg:markdown-xl">{children}</div>
+    </>
+  );
+};
+
+export default AmpLayout;
diff --git a/next-app/components/DefaultLayout.jsx b/next-app/components/DefaultLayout.jsx
@@ -14,7 +14,7 @@ const DefaultLayout = ({ title, children }) => {
       <Head>
         <title>{fullTitle}</title>
         <link rel="icon" href={cfg.favicon}></link>
-        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"></meta>
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
       </Head>
       <Navbar />
       <main className="container">{children}</main>

diff --git a/next-app/next-sitemap.config.js b/next-app/next-sitemap.config.js
@@ -3,4 +3,7 @@ module.exports = {
   generateIndexSitemap: false,
   changefreq: null,
   priority: null,
+  exclude: [
+    '*/amp/*'
+  ],
 };
diff --git a/next-app/next.config.js b/next-app/next.config.js
@@ -2,4 +2,9 @@ const { i18n } = require('./next-i18next.config.js');
 
 module.exports = {
   i18n,
-};
+  experimental: {
+    amp: {
+      skipValidation: true,
+    },
+  },
+};
diff --git a/next-app/pages/amp/[name].js b/next-app/pages/amp/[name].js
@@ -0,0 +1,81 @@
+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';
+
+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>
+    </AmpLayout>
+  );
+};
+
+export const config = {
+  amp: true,
+};
+
+export const getStaticProps = async ({ locale, params }) => {
+  const post = await findPost(params.name, locale);
+
+  if (!post) {
+    return {
+      notFound: true,
+    };
+  }
+
+  if (post.redirect_to) {
+    return {
+      redirect: {
+        permanent: true,
+        destination: post.redirect_to,
+      },
+    };
+  }
+
+  return {
+    props: {
+      post,
+      ...(await serverSideTranslations(locale, ['common', 'post'])),
+    },
+  };
+};
+
+export const getStaticPaths = async () => {
+  const promises = i18n.locales.map(async (locale) => {
+    const posts = await getPublishedPosts(locale);
+
+    return posts
+      .filter(({ redirect_to }) => !redirect_to)
+      .map(({ name }) => ({
+        locale,
+        params: { name },
+      }));
+  });
+
+  const allPaths = await Promise.all(promises);
+  const paths = allPaths.flat();
+
+  return {
+    paths,
+    fallback: true,
+  };
+};
+
+export default AmpPost;