Merge pull request #49 from angelod1as/i18n

Add i18n functionalities, a major data overhaul

.eslintrc.js

@@ -40,6 +40,7 @@ module.exports = {
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 0,
     '@typescript-eslint/no-explicit-any': 0,
+    'no-console': ['error', { allow: ['warn', 'error'] }],
     'jsx-a11y/anchor-is-valid': [
       'error',
       {

TODO.md

@@ -0,0 +1 @@
+TODO: Current projects

getContentfulEnvironment.js

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-console */
 require('dotenv').config()
 const contentfulManagement = require('contentful-management')
 

next.config.js

@@ -8,4 +8,8 @@ module.exports = {
       },
     ]
   },
+  i18n: {
+    locales: ['en', 'pt'],
+    defaultLocale: 'en',
+  },
 }

package.json

@@ -15,18 +15,19 @@
   "dependencies": {
     "@contentful/rich-text-react-renderer": "^14.1.2",
     "@contentful/rich-text-types": "^14.1.2",
-    "@types/uuid": "^8.3.0",
     "contentful": "^7.15.0",
     "contentful-management": "^7.3.0",
     "contentful-typescript-codegen": "^3.2.1",
     "dotenv": "^8.2.0",
     "gray-matter": "^4.0.2",
     "highlight.js": "^10.4.1",
     "html-react-parser": "^0.14.2",
+    "i18next": "^19.8.4",
     "nanoid": "^3.1.20",
     "next": "10.0.2",
     "react": "17.0.1",
     "react-dom": "17.0.1",
+    "react-i18next": "^11.8.5",
     "react-icons": "^4.1.0",
     "react-responsive-embed": "^2.1.0",
     "remarkable": "^2.0.1",
@@ -57,6 +58,7 @@
     "@types/node": "^14.14.9",
     "@types/react": "^17.0.0",
     "@types/styled-components": "^5.1.4",
+    "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^4.8.2",
     "@typescript-eslint/parser": "^4.8.2",
     "babel-loader": "^8.2.2",

src/components/atoms/Back/index.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from '@i18n/i18n'
 import { useRouter } from 'next/router'
 import { StyledBack } from './styles'
 
@@ -11,9 +12,11 @@ export interface BackProps {
  */
 export const Back = ({ inverted }: BackProps) => {
   const router = useRouter()
+  const t = useTranslation(router.locale)
+
   return (
     <StyledBack onClick={() => router.back()} {...{ inverted }}>
-      back
+      {t('back')}
     </StyledBack>
   )
 }

src/components/atoms/Back/styles.ts

@@ -10,19 +10,19 @@ export const StyledBack = styled.button<BackProps>`
   font-size: 16px;
   line-height: 25px;
   padding-left: 15px;
-  transition: padding 0.3s ease;
   cursor: pointer;
   color: ${p => (p.inverted ? p.theme.color.white : p.theme.color.black)};
 
   &:before {
+    transition: left 0.3s ease;
     content: '‹';
     position: absolute;
     left: 0;
   }
 
   &:hover {
-    padding-left: 12px;
     &:before {
+      left: 4px;
       content: '«';
     }
   }

src/components/atoms/BottomBar/HomeButton/index.tsx

@@ -0,0 +1,15 @@
+import { useRouter } from 'next/router'
+import { StyledHome, Wrapper } from './styles'
+
+export default function HomeButton() {
+  const { push, asPath } = useRouter()
+
+  if (asPath !== '/') {
+    return (
+      <Wrapper>
+        <StyledHome onClick={() => push('/')}>Home</StyledHome>
+      </Wrapper>
+    )
+  }
+  return <div />
+}

src/components/atoms/BottomBar/HomeButton/styles.ts

@@ -0,0 +1,33 @@
+import styled from 'styled-components'
+
+export const Wrapper = styled.div`
+  display: flex;
+  justify-content: flex-start;
+`
+
+export const StyledHome = styled.button`
+  position: relative;
+  background-color: transparent;
+  border: none;
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 25px;
+  cursor: pointer;
+  text-transform: lowercase;
+  color: ${p => p.theme.color.black};
+
+  &:before {
+    transition: left 0.3s ease;
+    content: '‹';
+    position: absolute;
+    left: -8px;
+  }
+
+  &:hover {
+    &:before {
+      left: -4px;
+      content: '«';
+    }
+  }
+`

src/components/atoms/BottomBar/LocaleSwitcher/index.tsx

@@ -0,0 +1,44 @@
+import { useRouter } from 'next/router'
+import { Dispatch, SetStateAction } from 'react'
+import { BG, Flag, Switch, Slider } from './styles'
+
+interface LocaleSwitcherProps {
+  setLoading: Dispatch<SetStateAction<boolean>>
+}
+
+export default function LocaleSwitcher({ setLoading }: LocaleSwitcherProps) {
+  const router = useRouter()
+
+  const { locales, locale, asPath } = router
+
+  const changeLanguage = () => {
+    setLoading(true)
+    const newLocale = locales.filter(each => each !== locale)[0]
+    router
+      .push(asPath, asPath, { locale: newLocale })
+      .then(() => setLoading(false))
+  }
+
+  return (
+    <BG>
+      <Flag>
+        <span role="img" aria-label="Portuguese">
+          🇧🇷
+        </span>
+      </Flag>
+      <Switch>
+        <input
+          type="checkbox"
+          onChange={changeLanguage}
+          checked={locale !== 'pt'}
+        />
+        <Slider />
+      </Switch>
+      <Flag>
+        <span role="img" aria-label="English">
+          🇬🇧
+        </span>
+      </Flag>
+    </BG>
+  )
+}

src/components/atoms/BottomBar/LocaleSwitcher/styles.ts

@@ -0,0 +1,52 @@
+import styled from 'styled-components'
+
+export const BG = styled.div`
+  display: flex;
+  padding: 15px 0;
+  justify-content: center;
+`
+
+export const Flag = styled.div`
+  cursor: pointer;
+  margin: 0 10px;
+  font-size: 20px;
+  transition: transform 0.2s ease;
+`
+
+export const Slider = styled.span`
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: 0.2s;
+  border-radius: 34px;
+  &:before {
+    position: absolute;
+    content: '';
+    height: 16px;
+    width: 16px;
+    left: 3px;
+    bottom: 2px;
+    background-color: white;
+    transition: 0.2s;
+    border-radius: 50%;
+  }
+`
+
+export const Switch = styled.label`
+  position: relative;
+  width: 40px;
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  input:checked + ${Slider}:before {
+    transform: translateX(18px);
+  }
+`

src/components/atoms/BottomBar/index.tsx

@@ -0,0 +1,17 @@
+import { Dispatch, SetStateAction } from 'react'
+import LocaleSwitcher from './LocaleSwitcher'
+import HomeButton from './HomeButton'
+import { Wrapper } from './styles'
+
+interface BottomBarProps {
+  setLoading: Dispatch<SetStateAction<boolean>>
+}
+
+export default function BottomBar({ setLoading }: BottomBarProps) {
+  return (
+    <Wrapper>
+      <HomeButton />
+      <LocaleSwitcher {...{ setLoading }} />
+    </Wrapper>
+  )
+}

src/components/atoms/BottomBar/styles.ts

@@ -0,0 +1,16 @@
+import styled from 'styled-components'
+
+export const Wrapper = styled.div`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  width: 100%;
+  /* display: flex;
+  justify-content: space-between;
+  align-items: center; */
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  background-color: ${p => p.theme.color.white};
+  padding: 0 20px;
+`

src/components/atoms/Embed/index.tsx

@@ -9,6 +9,7 @@ const DangerDiv = styled.div`
   iframe {
     width: 100%;
   }
+  margin: 20px 0;
 `
 
 export default function Embed({ embed }: EmbedProps) {

src/components/atoms/Footer/index.tsx

@@ -1,3 +1,5 @@
+import makeSafeDate from '@components/utils/makeSafeDate'
+import { useRouter } from 'next/router'
 import {
   FooterWrapper,
   BlogPosts,
@@ -28,6 +30,7 @@ export interface FooterProps {
  * Page footer with latest blog posts, newsletter and social icons
  */
 export const Footer = ({ blogPosts, newsletter, social }: FooterProps) => {
+  const { locale } = useRouter()
   return (
     <FooterWrapper>
       {blogPosts?.length > 0 && (
@@ -40,7 +43,7 @@ export const Footer = ({ blogPosts, newsletter, social }: FooterProps) => {
               <h4>{title}</h4>
               <p>
                 {lead}
-                <span>{date}</span>
+                <span>{makeSafeDate(date, locale)}</span>
               </p>
             </Post>
           ))}

src/components/atoms/Header/index.tsx

@@ -9,6 +9,8 @@ import {
   ExcerptSubtitle,
   ExcerptText,
 } from './styles'
+import { useRouter } from 'next/router'
+import { useTranslation } from '@i18n/i18n'
 
 export interface HeaderProps {
   // Title
@@ -36,22 +38,25 @@ export const Header = ({
   slug,
   type,
 }: HeaderProps) => {
+  const { locale } = useRouter()
+  const t = useTranslation(locale)
+
   return (
     <Container {...{ slim }}>
       <BackWrapper {...{ slim }}>
         <Back inverted />
       </BackWrapper>
       <Title {...{ slim }}>
-        {hasIDo && !slim && type && "I'm angelo and I do "}
+        {hasIDo && !slim && type && t("I'm angelo and I do ")}
         <span>{type ? title.toLowerCase() : title}</span>
       </Title>
       {type && excerpt && !slim ? (
         <ExcerptWrapper>
-          <ExcerptTitle>Time is short</ExcerptTitle>
-          <ExcerptSubtitle>Read this first</ExcerptSubtitle>
+          <ExcerptTitle>{t('Time is short')}</ExcerptTitle>
+          <ExcerptSubtitle>{t('Read this first')}</ExcerptSubtitle>
           <ExcerptText>{excerpt}</ExcerptText>
           <Button to={`${slug}/about`} inverted>
-            click to continue reading
+            {t('click to continue reading')}
           </Button>
         </ExcerptWrapper>
       ) : (

src/components/atoms/InlineEmbed/index.tsx

@@ -1,5 +1,4 @@
 import Project, { ImageProps } from '@components/atoms/Project'
-import makeSafeDate from '@components/utils/makeSafeDate'
 
 export default function InlineEmbed({
   description,
@@ -8,11 +7,10 @@ export default function InlineEmbed({
   coverImage,
   date,
 }) {
-  const newDate = new Date(date)
   return (
     <Project
       title={title}
-      safeDate={makeSafeDate(newDate)}
+      date={date}
       to={slug}
       lead={description}
       image={coverImage as ImageProps[]}

src/components/atoms/Loading/index.tsx

@@ -0,0 +1,17 @@
+import { useTranslation } from '@i18n/i18n'
+import { useRouter } from 'next/router'
+import { Wrapper, Square, Word, BG } from './styles'
+
+export default function Loading() {
+  const { locale } = useRouter()
+  const t = useTranslation(locale)
+
+  return (
+    <Wrapper>
+      <Word>{t('loading')}</Word>
+      <Square>
+        <BG />
+      </Square>
+    </Wrapper>
+  )
+}