Merge pull request #155 from DeKal/add-blog-page

Create new page blogs and move Navbar to core
DeKal · Jan 17, 2020 · 620dd6a · 620dd6a · vercel · Jan 17, 2020
2 parents 4227258 + f0568be
commit 620dd6a
Show file tree

Hide file tree

Showing 34 changed files with 754 additions and 255 deletions.
diff --git a/consts/pages.js b/consts/pages.js
@@ -5,12 +5,42 @@ export const CERTIFICATIONS = 'Certifications'
 export const PROJECTS = 'Projects'
 export const CONTACTS = 'Contacts'
 export const WHYME = 'Whyme'
+export const BLOG = 'Blogs'
 
 export const PAGE_LIST = [
-  HOME,
-  ABOUT,
-  EXPERIENCES,
-  PROJECTS,
-  CERTIFICATIONS,
-  CONTACTS
+  {
+    name: HOME,
+    url: `/#${HOME}`,
+    cmpName: HOME
+  },
+  {
+    name: ABOUT,
+    url: `/#${ABOUT}`,
+    cmpName: ABOUT
+  },
+  {
+    name: EXPERIENCES,
+    url: `/#${EXPERIENCES}`,
+    cmpName: EXPERIENCES
+  },
+  {
+    name: PROJECTS,
+    url: `/#${PROJECTS}`,
+    cmpName: PROJECTS
+  },
+  {
+    name: CERTIFICATIONS,
+    url: `/#${CERTIFICATIONS}`,
+    cmpName: CERTIFICATIONS
+  },
+  {
+    name: CONTACTS,
+    url: `/#${CONTACTS}`,
+    cmpName: CONTACTS
+  },
+  {
+    name: BLOG,
+    url: `/blogs`,
+    cmpName: 'blogs'
+  }
 ]
diff --git a/pages/blogs.js b/pages/blogs.js
@@ -0,0 +1,11 @@
+import React, { Fragment } from 'react'
+import Head from '~/views/blogs/components/Head'
+import Navbar from '~/views/core/components/Navbar'
+const Blogs = () => (
+  <Fragment>
+    <Head />
+    <Navbar />
+  </Fragment>
+)
+
+export default Blogs
diff --git a/pages/index.js b/pages/index.js
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react'
-import Nav from '~/views/home/components/Navbar'
+import Nav from '~/views/core/components/Navbar'
 import Home from '~/views/home/components/Home'
 import About from '~/views/home/components/About'
 import Experiences from '~/views/home/components/Experiences'

diff --git a/public/translations/en.json b/public/translations/en.json
@@ -58,5 +58,6 @@
   "Exp: Brand360 Desc": "As a team leader, I operate the team to develop a web for Brand 360 company inorder to broadcast their images in Viet Nam. The idea is to use Wordpress template in order to have a fast and user-friendly web/admin UI.",
   "Exp: Brand360 Skill": "Technical skills: Wordpress template, HTML, CSS, JS.",
   "Project: Title": "Projects",
-  "Project: SubTitle": "Something cool to look back!!!"
+  "Project: SubTitle": "Something cool to look back!!!",
+  "Blogs": "Blogs"
 }
diff --git a/public/translations/vn.json b/public/translations/vn.json
@@ -58,5 +58,6 @@
   "Exp: Brand360 Desc": "Trên vị trí là team leader, mình tổ chức một nhóm để xây dựng trang web cho công ty Brand 360 để quảng bá hình ảnh của họ ở Việt Nam. Ý tưởng chung là xây dựng trang web dựa trên Wordpress để xây dựng nhanh và công cấp cho người dùng một giao diện thân thiện để điều phối trang web.",
   "Exp: Brand360 Skill": "Kĩ thuật: Wordpress template, HTML, CSS, JS.",
   "Project: Title": "Dự án",
-  "Project: SubTitle": "Một vài kỉ niệm để nhìn lại!!!"
+  "Project: SubTitle": "Một vài kỉ niệm để nhìn lại!!!",
+  "Blogs": "Blogs"
 }
diff --git a/theme/theme.js b/theme/theme.js
@@ -5,6 +5,7 @@ const theme = {
   navContentMinHeight: '80px',
   footerHeight: '50px',
   navHeightWhenScrollingOnMobile: '45px',
+  navPosWhenHiding: '-220px',
   aboutMarginTop: '-200px',
   colors: {
     // Color variables

diff --git a/utils/helpers.js b/utils/helpers.js
@@ -55,7 +55,10 @@ export const getSelectedSection = () => {
   if (location.hash.length !== 0) {
     const selectedPage = location.hash.substr(1)
     return selectedPage
+  } else if (location.pathname.length !== 0) {
+    return location.pathname.substr(1)
   }
+
   return INIT_SELECTED_PAGE
 }
 

diff --git a/views/blogs/components/Head.js b/views/blogs/components/Head.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import NextHead from 'next/head'
+
+const Head = () => (
+  <NextHead>
+    <title>Coding with the Devil ;)</title>
+    <meta charSet="utf-8" />
+    <meta name="description" content="Coding with the Devil ;)" />
+    <meta name="keywords" content="coding, blogs, diaries" />
+  </NextHead>
+)
+
+export default Head
diff --git a/views/blogs/components/__tests__/Head.spec.tsx b/views/blogs/components/__tests__/Head.spec.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react'
+import { mountWithTheme } from '~/utils/withThemeProviders'
+import Head from '~/views/blogs/components/Head'
+
+describe('Head', () => {
+
+  it('should render without throwing an error', function () {
+    const wrap = mountWithTheme(<Head />)
+    expect(wrap).toMatchSnapshot()
+  })
+
+})
diff --git a/views/blogs/components/__tests__/__snapshots__/Head.spec.tsx.snap b/views/blogs/components/__tests__/__snapshots__/Head.spec.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Head should render without throwing an error 1`] = `
+<Head>
+  <Head>
+    <Component
+      handleStateChange={null}
+      inAmpMode={false}
+      reduceComponentsToState={[Function]}
+    />
+  </Head>
+</Head>
+`;
diff --git a/views/home/components/Navbar.js → views/core/components/Navbar.js b/views/home/components/Navbar.js → views/core/components/Navbar.js
@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
 
 import styled from 'styled-components/macro'
-import NavHeader from '~/views/home/components/nav/NavHeader'
-import NavContent from '~/views/home/components/nav/NavContent'
+import NavHeader from '~/views/core/components/nav/NavHeader'
+import NavContent from '~/views/core/components/nav/NavContent'
 import { INIT_NAV_CONTENT_SHOW } from '~/consts/initState'
 
 const Navbar = () => {

diff --git a/.../home/components/__test__/Navbar.spec.tsx → .../core/components/__test__/Navbar.spec.tsx b/.../home/components/__test__/Navbar.spec.tsx → .../core/components/__test__/Navbar.spec.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { mountWithTheme } from '~/utils/withThemeProviders'
-import Navbar from '~/views/home/components/Navbar'
+import Navbar from '~/views/core/components/Navbar'
 
 describe('Navbar', () => {