first article done and folder structure refactored

Author: WojciechCendrzak

package.json

@@ -23,8 +23,8 @@
     "next": "^10.0.0",
     "react": "17.0.1",
     "react-dom": "17.0.1",
-    "remark": "^12.0.0",
-    "remark-html": "^12.0.0",
+    "react-markdown": "^6.0.2",
+    "react-syntax-highlighter": "^15.4.3",
     "styled-components": "^5.3.0",
     "tailwindcss": "^2.1.2",
     "twin.macro": "^2.4.2"
@@ -34,6 +34,7 @@
     "@types/jest": "^26.0.23",
     "@types/node": "^15.6.0",
     "@types/react": "^17.0.6",
+    "@types/react-syntax-highlighter": "^13.5.0",
     "@types/react-test-renderer": "^17.0.1",
     "@types/styled-components": "^5.1.9",
     "@typescript-eslint/eslint-plugin": "^4.24.0",

src/components/layout.module.css

@@ -0,0 +1,134 @@
+---
+title: 'Accessing i18next translation from JSON keys instead of string path'
+date: '2021-05-25'
+---
+
+**TypeScript** is awesome. Like **i18next** too. It works with TypeScript great but has one drawback. We need to provide a translation key as a plain string. It doesn't matter for small apps, but it does indeed for complex one when your translation file start to have hundreds of lines.
+
+In this article, I want to show the way to solve that. It will leverage our localization experience to the next level.
+
+## Goal
+
+When using TypeScript we expect that tools will behave in some beneficial way like:
+
+- we can use IDE **IntelliSense** to pick a specific key from object structure instead of the path as a string,
+- we can **easily refactor** translations structure and still trust our code,
+- we want to be **able to navigate** to a specific key location in the translation object structure,
+
+So let's look at the solution.
+
+What i18next offers as an out of the box looks like this:
+
+```ts
+// translation.ts
+
+import en from './en.json';
+import i18next from 'i18next';
+
+i18next.init({
+  lng: 'en',
+  resources: {
+    en: {
+      translation: en,
+    },
+  },
+});
+```
+
+When having translation file like:
+
+```json
+{
+  // en.json
+
+  "homePage": {
+    "title": "Home page",
+    "homaPage": {
+      "header": {
+        "buttons": {
+          "signIn": { "title": "Sign In" },
+          "signUp": { "title": "Sign Up" }
+        }
+      }
+    }
+  }
+}
+```
+
+We can access specific translated value by typing key as a string path:
+
+```ts
+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.
+
+What we want to achieve is something that looks like this:
+
+```ts
+i18next.t(keys.homePage.header.buttons.signIn.title);
+```
+
+What fun is, typescript allows us already to load JSON files into code and take benefits from taking IntelliSense working already there.
+
+Now we need a new object named keys with the same structure as our JSON file. But instead of translated values at every leaf, we need to have **that key as a path**. Because i18next.t function still needs that path.
+
+So by accessing:
+
+```ts
+keys.homePage.header.buttons.signIn.title;
+```
+
+We want to recievie:
+
+```ts
+'homePage.header.buttons.signIn.title';
+```
+
+To achieve this, we need to transform the JSON file into another one like this:
+
+```ts
+import { reduce } from 'lodash';
+
+const getTranslationKeys = <T>(translations: T, path = ''): T =>
+  reduce(
+    translations,
+    (accumulator, value, key) => {
+      const newPath = `${path}${!!path ? '.' : ''}${key}`;
+      return {
+        ...accumulator,
+        [key]: isObject(value) ? getTranslationKeys(value, newPath) : newPath,
+      };
+    },
+    {}
+  );
+```
+
+This code will **recursively** enumerate all the key/value pairs. When a value is an object it will call himself with path collected so far. Otherwise, it reaches the leaf and returns the path. Finally, all the leaves will contains paths as expected.
+
+Now we can create keys object and get our translation:
+
+```ts
+import en from './en.json';
+import i18next from 'i18next';
+
+i18next.init({
+  lng: 'en',
+  resources: {
+    en: {
+      translation: en,
+    },
+  },
+});
+
+const translationKeys = getTranslationKeys(en);
+
+const value = i18next.t(translationKeys.homePage.header.buttons.signIn.title);
+```
+
+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.
+
+See also [i18n-keys](https://github.com/WojciechCendrzak/i18n-keys) library that fully implements this concept.
+
+Thanks for reading.

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

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HomePage should match the snapshot 1`] = `
+<div
+  className="sc-bdnxRM DVYBs"
+>
+  <header>
+    <h1>
+      [Your Name]
+       
+    </h1>
+  </header>
+  <main>
+    <section>
+      <p>
+        About me
+      </p>
+      <p>
+        I'am frontend developer
+      </p>
+    </section>
+    <section>
+      <h2>
+        Blog
+      </h2>
+      <ul />
+    </section>
+  </main>
+</div>
+`;

src/logic/posts.ts

@@ -3,7 +3,7 @@ import HomePage from './home.page';
 
 describe('HomePage', () => {
   it('should match the snapshot', () => {
-    const tree = renderer.create(<HomePage allPostsData={[]} />).toJSON();
+    const tree = renderer.create(<HomePage postDescriptions={[]} />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 });

src/models/post.ts

@@ -1,18 +1,18 @@
 import Head from 'next/head';
-import { Layout } from '../components/layout';
-import { getSortedPostsData } from '../logic/posts';
+import { Layout } from '../../components/layout';
+import { getPostDescriptions } from '../post/post.logic';
 import Link from 'next/link';
-import { Date } from '../components/date';
+import { Date } from '../../components/date';
 import { GetStaticProps } from 'next';
 import React from 'react';
-import { Post } from '../models/post';
-import { translate, translationKeys } from '../logic/translations/translation.service';
+import { PostDescription } from '../post/post.model';
+import { translate, translationKeys } from '../../logic/translations/translation.service';
 
 interface HomeProps {
-  allPostsData: Post[];
+  postDescriptions: PostDescription[];
 }
 
-export const HomePage: React.FC<HomeProps> = ({ allPostsData }) => {
+export const HomePage: React.FC<HomeProps> = ({ postDescriptions }) => {
   return (
     <Layout home>
       <Head>
@@ -25,9 +25,9 @@ export const HomePage: React.FC<HomeProps> = ({ allPostsData }) => {
       <section>
         <h2>Blog</h2>
         <ul>
-          {allPostsData.map(({ id, date, title }) => (
+          {postDescriptions.map(({ id, date, title }) => (
             <li key={id}>
-              <Link href={`/posts/${id}`}>
+              <Link href={`/post/${id}`}>
                 <a>{title}</a>
               </Link>
               <br />
@@ -45,10 +45,10 @@ export const HomePage: React.FC<HomeProps> = ({ allPostsData }) => {
 };
 
 export const getStaticProps: GetStaticProps<HomeProps> = async () => {
-  const allPostsData = getSortedPostsData();
+  const postDescriptions = getPostDescriptions();
   return {
     props: {
-      allPostsData,
+      postDescriptions,
     },
   };
 };

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

@@ -0,0 +1,54 @@
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import { Post, PostDescription, PostMeta } from './post.model';
+
+const postsDirectory = path.join(process.cwd(), 'src/content');
+
+export const getPostDescriptions = (): PostDescription[] => {
+  const fileNames = fs.readdirSync(postsDirectory);
+  const postsMeta = fileNames.map((fileName) => {
+    const id = fileName.replace(/\.md$/, '');
+    const fullPath = path.join(postsDirectory, fileName);
+    const fileContents = fs.readFileSync(fullPath, 'utf8');
+    const matterResult = matter(fileContents);
+
+    return {
+      id,
+      ...(matterResult.data as PostMeta),
+    };
+  });
+
+  return postsMeta.sort((a, b) => {
+    if (!a.date || !b.date) return 0;
+
+    if (a.date < b.date) {
+      return 1;
+    } else {
+      return -1;
+    }
+  });
+};
+
+export const getPostIds = () => {
+  const fileNames = fs.readdirSync(postsDirectory);
+  return fileNames.map((fileName) => {
+    return {
+      params: {
+        id: fileName.replace(/\.md$/, ''),
+      },
+    };
+  });
+};
+
+export const getPostData = async (id: string): Promise<Post> => {
+  const fullPath = path.join(postsDirectory, `${id}.md`);
+  const fileContent = fs.readFileSync(fullPath, 'utf8');
+  const postMatter = matter(fileContent);
+
+  return {
+    id,
+    content: postMatter.content,
+    ...(postMatter.data as PostMeta),
+  };
+};