Skip to content

Commit e41ebba

Browse files
luistakluistak
committed
Added initial layout
1 parent 67d5d56 commit e41ebba

File tree

13 files changed

+325
-228
lines changed

13 files changed

+325
-228
lines changed

‎.eslintrc.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ module.exports = {
77
commonjs: true,
88
},
99
extends: [
10-
'airbnb',
1110
'prettier',
1211
'plugin:react/recommended',
1312
'eslint-config-prettier',
@@ -26,7 +25,6 @@ module.exports = {
2625
'@typescript-eslint',
2726
],
2827
rules: {
29-
'import/no-unresolved': 'off',
3028
'react/prop-types': 'off',
3129
'react/jsx-uses-react': 'off',
3230
'react/react-in-jsx-scope': 'off',

‎components/template.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import Head from 'next/head';
2+
import { Translate } from 'i18n';
3+
import { ReactNode } from 'react';
4+
import { GlobalStyles } from 'styles/globals';
5+
import styled, { ThemeProvider } from 'styled-components';
6+
import { tokens } from 'styles/theme';
7+
import { FlexColumnCentered } from 'styles/extends';
8+
9+
const Page = styled.section`
10+
padding: 2rem;
11+
min-height: 100vh;
12+
${FlexColumnCentered}
13+
`;
14+
15+
const Main = styled.main`
16+
text-align: center;
17+
${FlexColumnCentered}
18+
`;
19+
20+
const Footer = styled.footer`
21+
margin: 2rem auto;
22+
`;
23+
24+
type PageTemplateProps = {
25+
t: Translate;
26+
title: string;
27+
children: ReactNode;
28+
};
29+
30+
export function PageTemplate({ t, title, children }: PageTemplateProps) {
31+
return (
32+
<ThemeProvider theme={tokens}>
33+
<Page>
34+
<GlobalStyles />
35+
<Head>
36+
<title>{title}</title>
37+
<link rel="icon" href="/favicon.ico" />
38+
</Head>
39+
<Main>{children}</Main>
40+
<Footer>
41+
<a href="/"> {t('author')} ©.</a> {t('footer')}
42+
</Footer>
43+
</Page>
44+
</ThemeProvider>
45+
);
46+
}

‎i18n/index.ts‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,26 @@
1+
const common = {
2+
author: 'Luís Takahashi',
3+
};
4+
15
const portuguese = {
2-
welcome: "Bem vindo ao meu blog",
6+
...common,
7+
welcome: 'Olá 👋, eu sou Luis Takahashi',
8+
bio:
9+
'Um apaixonado entusiasta de Typecript e engenheiro de software frontend do Brasil',
10+
footer: 'Todos os direitos reservados',
311
};
412

513
const english = {
6-
welcome: "Welcome to my blog",
14+
...common,
15+
welcome: "Hi 👋, I'm Luis Takahashi",
16+
bio:
17+
'A passionate Typescript enthusiast and frontend software engineer from Brazil',
18+
footer: 'All rights reserved',
719
};
820

921
const locales = {
10-
"pt-BR": portuguese,
11-
"en-US": english,
22+
'pt-BR': portuguese,
23+
'en-US': english,
1224
};
1325

1426
type Locales = typeof locales;
@@ -18,6 +30,6 @@ export type Translate = (key: LocaleKey) => string;
1830

1931
export function getTranslate(locale: Locale): Translate {
2032
return function translate(key: LocaleKey) {
21-
return locales[locale]?.[key] || "";
33+
return locales[locale]?.[key] || '';
2234
};
2335
}

‎package.json‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,16 @@
11
{
2-
"name": "luis-takahashi.dev",
2+
"name": "takah.dev",
33
"version": "0.1.0",
44
"private": true,
5+
"author": "Luís Takahashi <takahashihideki408@gmail.com>",
6+
"keywords": [
7+
"luis",
8+
"takah",
9+
"takahashi",
10+
"luis.takahashi"
11+
],
12+
"license": "MIT",
13+
"main": "n/a",
514
"scripts": {
615
"dev": "next dev",
716
"build": "next build",
@@ -12,21 +21,21 @@
1221
"dependencies": {
1322
"next": "10.0.0",
1423
"react": "17.0.1",
15-
"react-dom": "17.0.1"
24+
"react-dom": "17.0.1",
25+
"styled-components": "^5.2.1"
1626
},
1727
"devDependencies": {
1828
"@types/node": "^14.14.6",
1929
"@types/react": "^16.9.55",
30+
"@types/styled-components": "^5.1.4",
2031
"@typescript-eslint/eslint-plugin": "^4.6.0",
2132
"@typescript-eslint/parser": "^4.6.0",
2233
"eslint": "^7.12.1",
23-
"eslint-config-airbnb": "^18.2.0",
2434
"eslint-config-prettier": "^6.15.0",
25-
"eslint-plugin-import": "^2.22.1",
2635
"eslint-plugin-jsx-a11y": "^6.4.1",
2736
"eslint-plugin-react": "^7.21.5",
2837
"eslint-plugin-react-hooks": "^4.2.0",
2938
"prettier": "^2.1.2",
3039
"typescript": "^4.1.0-beta"
3140
}
32-
}
41+
}

‎pages/_app.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import type { AppProps } from 'next/app';
22
import { getTranslate, Translate } from 'i18n';
33

4-
import '../styles/globals.css';
5-
64
type CustomProps = {
75
t: Translate;
86
};

‎pages/_document.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import Document from 'next/document';
2+
import { ServerStyleSheet } from 'styled-components';
3+
4+
export default class MyDocument extends Document {
5+
static async getInitialProps(ctx) {
6+
const sheet = new ServerStyleSheet();
7+
const originalRenderPage = ctx.renderPage;
8+
9+
try {
10+
ctx.renderPage = () =>
11+
originalRenderPage({
12+
enhanceApp: (App) => (props) =>
13+
sheet.collectStyles(<App {...props} />),
14+
});
15+
16+
const initialProps = await Document.getInitialProps(ctx);
17+
return {
18+
...initialProps,
19+
styles: (
20+
<>
21+
{initialProps.styles}
22+
{sheet.getStyleElement()}
23+
</>
24+
),
25+
};
26+
} finally {
27+
sheet.seal();
28+
}
29+
}
30+
}

‎pages/index.tsx‎

Lines changed: 62 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,76 @@
1-
import Head from 'next/head';
2-
import Image from 'next/image';
3-
import { useRouter } from 'next/router';
1+
import NextImage from 'next/image';
42
import { NextPage } from 'next';
53
import { Translate } from 'i18n';
4+
import { PageTemplate } from 'components/template';
5+
import styled from 'styled-components';
66

7-
import styles from '../styles/Home.module.css';
7+
const Image = styled(NextImage)`
8+
border-radius: 50%;
9+
box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.5);
10+
`;
811

9-
type PageProps = {
10-
t: Translate;
11-
};
12-
13-
const Home: NextPage<PageProps> = ({ t }) => {
14-
const { locale } = useRouter();
15-
return (
16-
<div className={styles.container}>
17-
<Head>
18-
<title>Create Next App</title>
19-
<link rel="icon" href="/favicon.ico" />
20-
</Head>
21-
22-
<main className={styles.main}>
23-
<h1 className={styles.title}>{t('welcome')}</h1>
24-
<p>Current locale: {locale}</p>
25-
<Image
26-
src="/takah.jpg"
27-
alt="Picture of the author"
28-
width={500}
29-
height={500}
30-
/>
31-
32-
<p className={styles.description}>
33-
Get started by editing
34-
<code className={styles.code}>pages/index.js</code>
35-
</p>
12+
const ImageContainer = styled.section`
13+
margin-top: 1rem;
3614
37-
<div className={styles.grid}>
38-
<a href="https://nextjs.org/docs" className={styles.card}>
39-
<h3>Documentation &rarr;</h3>
40-
<p>Find in-depth information about Next.js features and API.</p>
41-
</a>
15+
img {
16+
filter: invert(1);
17+
}
4218
43-
<a href="https://nextjs.org/learn" className={styles.card}>
44-
<h3>Learn &rarr;</h3>
45-
<p>Learn about Next.js in an interactive course with quizzes!</p>
46-
</a>
19+
* + * {
20+
margin-left: 1rem;
21+
}
22+
`;
4723

48-
<a
49-
href="https://github.com/vercel/next.js/tree/master/examples"
50-
className={styles.card}
51-
>
52-
<h3>Examples &rarr;</h3>
53-
<p>Discover and deploy boilerplate example Next.js projects.</p>
54-
</a>
55-
56-
<a
57-
href="https://vercel.com/import?filter=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
58-
className={styles.card}
59-
>
60-
<h3>Deploy &rarr;</h3>
61-
<p>
62-
Instantly deploy your Next.js site to a public URL with Vercel.
63-
</p>
64-
</a>
65-
</div>
66-
</main>
24+
const socialMedias = {
25+
github: {
26+
alt: 'luistak',
27+
src: 'https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/github.svg',
28+
link: 'https://github.com/luistak',
29+
},
30+
devto: {
31+
alt: 'luistak',
32+
src: 'https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/dev-dot-to.svg',
33+
link: 'https://dev.to/luistak',
34+
},
35+
twitter: {
36+
alt: '_luistak',
37+
src: 'https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/twitter.svg',
38+
link: 'https://twitter.com/_luistak',
39+
},
40+
linkedin: {
41+
alt: 'luis-takahashi',
42+
src: 'https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/linkedin.svg',
43+
link: 'https://linkedin.com/in/luis-takahashi',
44+
},
45+
};
6746

68-
<footer className={styles.footer}>
47+
type HomeProps = {
48+
t: Translate;
49+
};
50+
const Home: NextPage<HomeProps> = ({ t }) => (
51+
<PageTemplate t={t} title={t('author')}>
52+
<h1>{t('welcome')}</h1>
53+
<p>{t('bio')}</p>
54+
<Image
55+
src="/takah.jpg"
56+
alt="Picture of the author"
57+
width={100}
58+
height={100}
59+
style={{ margin: 'auto' }}
60+
/>
61+
<ImageContainer>
62+
{Object.entries(socialMedias).map(([socialMedia, { alt, src, link }]) => (
6963
<a
70-
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
64+
key={socialMedia}
65+
href={link}
7166
target="_blank"
72-
rel="noopener noreferrer"
67+
rel="noreferrer noreferrer"
7368
>
74-
Powered by{' '}
75-
<img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
69+
<img src={src} alt={alt} width={20} height={20} />
7670
</a>
77-
</footer>
78-
</div>
79-
);
80-
};
71+
))}
72+
</ImageContainer>
73+
</PageTemplate>
74+
);
8175

8276
export default Home;

0 commit comments

Comments
 (0)