top image created

Author: WojciechCendrzak

public/images/translate.png

@@ -63,6 +63,8 @@ i18next.t('homePage.header.buttons.signIn.title');
 
 As you can see, by having the **translation key as a string**, we are losing all benefits described above.
 
+## Solution
+
 What we want to achieve is something that looks like this:
 
 ```ts
@@ -126,6 +128,8 @@ const translationKeys = getTranslationKeys(en);
 const value = i18next.t(translationKeys.homePage.header.buttons.signIn.title);
 ```
 
+## End note
+
 Finally, we've reached the goal.
 Now the TypeScript and IDE tools are active when we reference the translation keys. And we can trust our code more.
 

src/content/accessing-i18next-translation-from-json-keys-instead-of-string-path.md

@@ -0,0 +1,12 @@
+import { getPostDescriptions } from '../post/post.api';
+import { GetStaticProps } from 'next';
+import { HomeProps } from './home.page';
+
+export const getStaticProps: GetStaticProps<HomeProps> = async () => {
+  const postDescriptions = getPostDescriptions();
+  return {
+    props: {
+      postDescriptions,
+    },
+  };
+};

src/pages-internal/home/home.page.logic.tsx

@@ -1,5 +1,5 @@
 import renderer from 'react-test-renderer';
-import HomePage from './home.page';
+import { HomePage } from './home.page';
 
 describe('HomePage', () => {
   it('should match the snapshot', () => {

src/pages-internal/home/home.page.test.tsx

@@ -1,14 +1,12 @@
 import Head from 'next/head';
 import { Layout } from '../../components/layout';
-import { getPostDescriptions } from '../post/post.logic';
 import Link from 'next/link';
 import { Date } from '../../components/date';
-import { GetStaticProps } from 'next';
 import React from 'react';
 import { PostDescription } from '../post/post.model';
 import { translate, translationKeys } from '../../logic/translations/translation.service';
 
-interface HomeProps {
+export interface HomeProps {
   postDescriptions: PostDescription[];
 }
 
@@ -43,14 +41,3 @@ export const HomePage: React.FC<HomeProps> = ({ postDescriptions }) => {
     </Layout>
   );
 };
-
-export const getStaticProps: GetStaticProps<HomeProps> = async () => {
-  const postDescriptions = getPostDescriptions();
-  return {
-    props: {
-      postDescriptions,
-    },
-  };
-};
-
-export default HomePage;

src/pages-internal/home/home.page.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { Components } from 'react-markdown/src/ast-to-react';
+
+export const markDownComponents: Components = {
+  code({ inline, className, children, ...props }) {
+    const match = /language-(\w+)/.exec(className || '');
+    return !inline && match ? (
+      <SyntaxHighlighter language={match[1]} PreTag="div" {...props}>
+        {String(children).replace(/\n$/, '')}
+      </SyntaxHighlighter>
+    ) : (
+      <code className={className} {...props} />
+    );
+  },
+};

src/pages-internal/post/post.logic.ts src/pages-internal/post/post.api.tssrc/pages-internal/post/post.logic.ts renamed to src/pages-internal/post/post.api.ts

@@ -0,0 +1,22 @@
+import { GetStaticPaths, GetStaticProps } from 'next';
+import { getPostData, getPostIds } from './post.api';
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const paths = getPostIds();
+  return {
+    paths,
+    fallback: false,
+  };
+};
+
+export const getStaticProps: GetStaticProps = async ({ params }) => {
+  if (!params || !params.id || Array.isArray(params.id)) return { props: {} };
+
+  const postData = await getPostData(params.id);
+
+  return {
+    props: {
+      postData,
+    },
+  };
+};

src/pages-internal/post/post.components.tsx

@@ -0,0 +1,63 @@
+import { Layout } from '../../components/layout';
+import Head from 'next/head';
+import { Date } from '../../components/date';
+import React from 'react';
+import { Post } from './post.model';
+import styled from 'styled-components';
+import ReactMarkdown from 'react-markdown';
+import Image from 'next/image';
+import { markDownComponents } from './post.components';
+
+interface PostPageProps {
+  postData: Post;
+}
+
+export const PostPage: React.FC<PostPageProps> = ({ postData }) => {
+  return (
+    <Layout>
+      <Head>
+        <title>{postData.title}</title>
+      </Head>
+      <article>
+        <PostHeader>
+          <Title>{postData.title}</Title>
+          {postData.date && (
+            <div>
+              <Date date={postData.date} />
+            </div>
+          )}
+          <PostImage priority src="/images/translate.png" height={682 / 2} width={680} alt={''} />
+        </PostHeader>
+        <PostContent>
+          <ReactMarkdown components={markDownComponents}>{postData.content || ''}</ReactMarkdown>
+        </PostContent>
+      </article>
+    </Layout>
+  );
+};
+
+const Title = styled.h1`
+  font-size: 36px;
+  font-weight: 400;
+`;
+
+const PostContent = styled.div`
+  font-weight: 100;
+  line-height: 1.8;
+  letter-spacing: -0.5px;
+  text-align: justify;
+`;
+
+const PostHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  text-align: center;
+`;
+
+const PostImage = styled(Image)`
+  border-width: 1px;
+  border-color: black;
+  border-style: solid;
+  object-fit: cover;
+`;