top menu done

WojciechCendrzak · WojciechCendrzak · commit 3beba40569ed · 2021-05-26T20:54:00.000+02:00
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,10 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+quote_type = single
diff --git a/src/app/app.route.conts.ts b/src/app/app.route.conts.ts
@@ -0,0 +1,5 @@
+export enum AppRoute {
+  Home = '/',
+  Articles = '/articles',
+  AboutMe = '/amout-me',
+}
diff --git a/src/components/layout.tsx b/src/components/layout.tsx
@@ -1,18 +1,11 @@
 import Head from 'next/head';
-// import Image from 'next/image';
-import Link from 'next/link';
 import { translate, translationKeys } from '../logic/translations/translation.service';
 import styled from 'styled-components';
+import { Menu } from './menu/menu';
 
-const name = '[Your Name]';
-
-interface LayoutProps {
-  home?: boolean;
-}
-
-export const Layout: React.FC<LayoutProps> = ({ children, home }) => {
+export const Layout: React.FC = ({ children }) => {
   return (
-    <Main>
+    <>
       <Head>
         <link rel="icon" href="/favicon.ico" />
         <meta name="description" content="Learn how to build a personal website using Next.js" />
@@ -30,40 +23,17 @@ export const Layout: React.FC<LayoutProps> = ({ children, home }) => {
         <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap" rel="stylesheet" />
       </Head>
       <header>
-        {home ? (
-          <>
-            {/* <Image priority src="/images/profile.jpg" height={144} width={144} alt={name} /> */}
-            <h1>{name} </h1>
-          </>
-        ) : (
-          <>
-            {/* <Link href="/">
-              <a>
-                <Image priority src="/images/profile.jpg" height={108} width={108} alt={name} />
-              </a>
-            </Link> */}
-            <h2>
-              <Link href="/">
-                <a>{name}</a>
-              </Link>
-            </h2>
-          </>
-        )}
+        <Menu />
       </header>
-      <main>{children}</main>
-      {!home && (
-        <div>
-          <Link href="/">
-            <a>← Back to home</a>
-          </Link>
-        </div>
-      )}
-    </Main>
+      <Main>
+        <main>{children}</main>
+      </Main>
+    </>
   );
 };
 
 const Main = styled.div`
   max-width: 36rem;
   padding: 0 1rem;
-  margin: 3rem auto 6rem;
+  margin: 0 auto 6rem;
 `;
diff --git a/src/components/link.tsx b/src/components/link.tsx
@@ -0,0 +1,4 @@
+import Link from 'next/link';
+import styled from 'styled-components';
+
+export const LinkTo = styled(Link)``;
diff --git a/src/components/menu/menu.const.ts b/src/components/menu/menu.const.ts
@@ -0,0 +1,3 @@
+import { AppRoute } from '../../app/app.route.conts';
+
+export const topMenuItems = [AppRoute.Home, AppRoute.Articles, AppRoute.AboutMe];
diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx
@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+import { translate, translationKeys } from '../../logic/translations/translation.service';
+import { topMenuItems } from './menu.const';
+import { LinkTo } from '../../components/link';
+
+export const Menu = () => {
+  return (
+    <MenuContainer>
+      {topMenuItems.map((route) => (
+        <MenuItem key={route}>
+          <LinkTo href={route}>{translate(translationKeys.site.routes[route])}</LinkTo>
+        </MenuItem>
+      ))}
+    </MenuContainer>
+  );
+};
+
+const MenuContainer = styled.div`
+  margin-top: 32px;
+  margin-right: 64px;
+  display: flex;
+  justify-content: flex-end;
+
+  @media only screen and (max-width: 768px) {
+    margin-top: 0;
+    margin-right: 0;
+    justify-content: center;
+    border-bottom-color: black;
+    border-bottom-style: solid;
+    border-bottom-width: thin;
+  }
+`;
+
+const MenuItem = styled.div`
+  padding: 16px;
+`;
diff --git a/src/content/accessing-i18next-translation-from-json-keys-instead-of-string-path.md b/src/content/accessing-i18next-translation-from-json-keys-instead-of-string-path.md
@@ -1,6 +1,8 @@
 ---
 title: 'Accessing i18next translation from JSON keys instead of string path'
 date: '2021-05-25'
+author: 'Wojciech Cendrzak'
+image: '/images/translate.png'
 ---
 
 **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.
diff --git a/src/logic/translations/locales/en.json b/src/logic/translations/locales/en.json
diff --git a/src/logic/translations/locales/en.ts b/src/logic/translations/locales/en.ts
@@ -0,0 +1,27 @@
+import { AppRoute } from '../../../app/app.route.conts';
+
+export const en = {
+  site: {
+    // TDO: use this title
+    title: 'Code Calligraphy',
+    routes: {
+      [AppRoute.Home]: 'Home',
+      [AppRoute.Articles]: 'Articles',
+      [AppRoute.AboutMe]: 'AboutMe',
+    },
+  },
+  common: {
+    buttons: {
+      backToHome: {
+        title: 'Back to home',
+      },
+    },
+  },
+  homePage: {
+    title: 'Home page',
+    aboutMe: {
+      title: 'About me',
+      description: "I'am frontend developer",
+    },
+  },
+};
diff --git a/src/logic/translations/translation.service.ts b/src/logic/translations/translation.service.ts
@@ -1,4 +1,4 @@
-import en from './locales/en.json';
+import { en } from './locales/en';
 import i18next, { TFunction } from 'i18next';
 import { getTranslationKeys } from 'i18n-keys';
 
diff --git a/src/pages-internal/home/home.page.tsx b/src/pages-internal/home/home.page.tsx
@@ -12,7 +12,7 @@ export interface HomeProps {
 
 export const HomePage: React.FC<HomeProps> = ({ postDescriptions }) => {
   return (
-    <Layout home>
+    <Layout>
       <Head>
         <title>{translate(translationKeys.homePage.title)}</title>
       </Head>
diff --git a/src/pages-internal/post/post.model.ts b/src/pages-internal/post/post.model.ts
@@ -4,6 +4,8 @@ export interface PostId {
 export interface PostMeta {
   title?: string;
   date?: string;
+  author?: string;
+  image?: string;
 }
 
 export interface PostDescription extends PostId, PostMeta {}
diff --git a/src/pages-internal/post/post.page.tsx b/src/pages-internal/post/post.page.tsx
@@ -7,6 +7,8 @@ import styled from 'styled-components';
 import ReactMarkdown from 'react-markdown';
 import Image from 'next/image';
 import { markDownComponents } from './post.components';
+import { LinkTo } from '../../components/link';
+import { translate, translationKeys } from '../../logic/translations/translation.service';
 
 interface PostPageProps {
   postData: Post;
@@ -26,11 +28,14 @@ export const PostPage: React.FC<PostPageProps> = ({ postData }) => {
               <Date date={postData.date} />
             </div>
           )}
-          <PostImage priority src="/images/translate.png" height={682 / 2} width={680} alt={''} />
+          {postData.image && <PostImage priority src={postData.image} height={340} width={680} alt={postData.title} />}
         </PostHeader>
         <PostContent>
           <ReactMarkdown components={markDownComponents}>{postData.content || ''}</ReactMarkdown>
         </PostContent>
+        <div>
+          <LinkTo href="/">{`← ${translate(translationKeys.common.buttons.backToHome.title)}`}</LinkTo>
+        </div>
       </article>
     </Layout>
   );
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -27,8 +27,9 @@ const GlobalStyle = createGlobalStyle`
   }
 
   a {
-    color: #0070f3;
+    color: black;
     text-decoration: none;
+    font-weight: 700;
   }
 
   a:hover {

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import { AppRoute } from '../../app/app.route.conts';`
	`2`	`+`
	`3`	`+export const topMenuItems = [AppRoute.Home, AppRoute.Articles, AppRoute.AboutMe];`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import en from './locales/en.json';`
	`1`	`+import { en } from './locales/en';`
`2`	`2`	`import i18next, { TFunction } from 'i18next';`
`3`	`3`	`import { getTranslationKeys } from 'i18n-keys';`
`4`	`4`