Skip to content

Commit 0ab3fa7

Browse files
WojciechCendrzakWojciechCendrzak
committed
initial layout done
1 parent 76f220d commit 0ab3fa7

File tree

8 files changed

+133
-76
lines changed

8 files changed

+133
-76
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
"@types/node": "^15.6.0",
3636
"@types/react": "^17.0.6",
3737
"@types/react-test-renderer": "^17.0.1",
38+
"@types/styled-components": "^5.1.9",
3839
"@typescript-eslint/eslint-plugin": "^4.24.0",
3940
"@typescript-eslint/parser": "^4.24.0",
4041
"babel-jest": "^26.6.3",

‎src/components/layout.tsx‎

Lines changed: 23 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import Head from 'next/head';
2-
import Image from 'next/image';
3-
import styles from './layout.module.css';
4-
import utilStyles from '../styles/utils.module.css';
2+
// import Image from 'next/image';
53
import Link from 'next/link';
64
import { translate, translationKeys } from '../logic/translations/translation.service';
5+
import styled from 'styled-components';
76

87
const name = '[Your Name]';
98

@@ -13,7 +12,7 @@ interface LayoutProps {
1312

1413
export const Layout: React.FC<LayoutProps> = ({ children, home }) => {
1514
return (
16-
<div className={styles.container}>
15+
<Main>
1716
<Head>
1817
<link rel="icon" href="/favicon.ico" />
1918
<meta name="description" content="Learn how to build a personal website using Next.js" />
@@ -25,51 +24,46 @@ export const Layout: React.FC<LayoutProps> = ({ children, home }) => {
2524
/>
2625
<meta name="og:title" content={translate(translationKeys.site.title)} />
2726
<meta name="twitter:card" content="summary_large_image" />
28-
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto Mono" />
27+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono" />
28+
<link rel="preconnect" href="https://fonts.gstatic.com" />
29+
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100&display=swap" rel="stylesheet" />
30+
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap" rel="stylesheet" />
2931
</Head>
30-
<header className={styles.header}>
32+
<header>
3133
{home ? (
3234
<>
33-
<Image
34-
priority
35-
src="/images/profile.jpg"
36-
className={utilStyles.borderCircle}
37-
height={144}
38-
width={144}
39-
alt={name}
40-
/>
41-
<h1 className={utilStyles.heading2Xl}>{name}</h1>
35+
{/* <Image priority src="/images/profile.jpg" height={144} width={144} alt={name} /> */}
36+
<h1>{name} </h1>
4237
</>
4338
) : (
4439
<>
45-
<Link href="/">
40+
{/* <Link href="/">
4641
<a>
47-
<Image
48-
priority
49-
src="/images/profile.jpg"
50-
className={utilStyles.borderCircle}
51-
height={108}
52-
width={108}
53-
alt={name}
54-
/>
42+
<Image priority src="/images/profile.jpg" height={108} width={108} alt={name} />
5543
</a>
56-
</Link>
57-
<h2 className={utilStyles.headingLg}>
44+
</Link> */}
45+
<h2>
5846
<Link href="/">
59-
<a className={utilStyles.colorInherit}>{name}</a>
47+
<a>{name}</a>
6048
</Link>
6149
</h2>
6250
</>
6351
)}
6452
</header>
6553
<main>{children}</main>
6654
{!home && (
67-
<div className={styles.backToHome}>
55+
<div>
6856
<Link href="/">
6957
<a>← Back to home</a>
7058
</Link>
7159
</div>
7260
)}
73-
</div>
61+
</Main>
7462
);
7563
};
64+
65+
const Main = styled.div`
66+
max-width: 36rem;
67+
padding: 0 1rem;
68+
margin: 3rem auto 6rem;
69+
`;

‎src/pages/_app.tsx‎

Lines changed: 39 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,43 @@
11
import React from 'react';
2-
import '../styles/global.css';
2+
import type { AppProps } from 'next/app';
3+
import { createGlobalStyle, ThemeProvider } from 'styled-components';
34

4-
interface AppProps {
5-
Component: React.FunctionComponent;
6-
pageProps: Record<string, unknown>;
7-
}
8-
9-
const App: React.FC<AppProps> = ({ Component, pageProps }) => {
10-
return <Component {...pageProps} />;
11-
};
5+
const App: React.FC<AppProps> = ({ Component, pageProps }) => (
6+
<>
7+
<GlobalStyle />
8+
<ThemeProvider theme={theme}>
9+
<Component {...pageProps} />
10+
</ThemeProvider>
11+
</>
12+
);
1213

1314
export default App;
15+
16+
const GlobalStyle = createGlobalStyle`
17+
html,
18+
body {
19+
padding: 0;
20+
margin: 0;
21+
font-family: Roboto Mono, sans-serif;
22+
font-size: 18px;
23+
}
24+
25+
* {
26+
box-sizing: border-box;
27+
}
28+
29+
a {
30+
color: #0070f3;
31+
text-decoration: none;
32+
}
33+
34+
a:hover {
35+
text-decoration: underline;
36+
}
37+
`;
38+
39+
const theme = {
40+
colors: {
41+
primary: '#0070f3',
42+
},
43+
};

‎src/pages/_document.tsx‎

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

‎src/pages/home.page.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import Head from 'next/head';
22
import { Layout } from '../components/layout';
3-
import utilStyles from '../styles/utils.module.css';
43
import { getSortedPostsData } from '../logic/posts';
54
import Link from 'next/link';
65
import { Date } from '../components/date';
@@ -19,21 +18,21 @@ export const HomePage: React.FC<HomeProps> = ({ allPostsData }) => {
1918
<Head>
2019
<title>{translate(translationKeys.homePage.title)}</title>
2120
</Head>
22-
<section className={utilStyles.headingMd}>
21+
<section>
2322
<p>{translate(translationKeys.homePage.aboutMe.title)}</p>
2423
<p>{translate(translationKeys.homePage.aboutMe.description)}</p>
2524
</section>
26-
<section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
27-
<h2 className={utilStyles.headingLg}>Blog</h2>
28-
<ul className={utilStyles.list}>
25+
<section>
26+
<h2>Blog</h2>
27+
<ul>
2928
{allPostsData.map(({ id, date, title }) => (
30-
<li className={utilStyles.listItem} key={id}>
29+
<li key={id}>
3130
<Link href={`/posts/${id}`}>
3231
<a>{title}</a>
3332
</Link>
3433
<br />
3534
{date && (
36-
<small className={utilStyles.lightText}>
35+
<small>
3736
<Date date={date} />
3837
</small>
3938
)}

‎src/pages/posts/[id].tsx‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import { Layout } from '../../components/layout';
22
import { getAllPostIds, getPostData } from '../../logic/posts';
33
import Head from 'next/head';
44
import { Date } from '../../components/date';
5-
import utilStyles from '../../styles/utils.module.css';
65
import { GetStaticPaths, GetStaticProps } from 'next';
76
import React from 'react';
87
import { Post } from '../../models/post';
8+
import styled from 'styled-components';
99

1010
interface PostPageProps {
1111
postData: Post;
@@ -18,13 +18,15 @@ const PostPage: React.FC<PostPageProps> = ({ postData }) => {
1818
<title>{postData.title}</title>
1919
</Head>
2020
<article>
21-
<h1 className={utilStyles.headingXl}>{postData.title}</h1>
21+
<Title>{postData.title}</Title>
2222
{postData.date && (
23-
<div className={utilStyles.lightText}>
23+
<div>
2424
<Date date={postData.date} />
2525
</div>
2626
)}
27-
{postData.contentHtml && <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />}
27+
<PostContent>
28+
{postData.contentHtml && <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />}
29+
</PostContent>
2830
</article>
2931
</Layout>
3032
);
@@ -51,3 +53,14 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
5153
};
5254

5355
export default PostPage;
56+
57+
const Title = styled.h1`
58+
font-size: 36px;
59+
font-weight: 400;
60+
`;
61+
62+
const PostContent = styled.div`
63+
font-weight: 100;
64+
line-height: 1.8;
65+
letter-spacing: -0.5px;
66+
`;

‎src/styles/global.css‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎yarn.lock‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -715,6 +715,14 @@
715715
dependencies:
716716
"@types/node" "*"
717717

718+
"@types/hoist-non-react-statics@*":
719+
version "3.3.1"
720+
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
721+
integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
722+
dependencies:
723+
"@types/react" "*"
724+
hoist-non-react-statics "^3.3.0"
725+
718726
"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
719727
version "2.0.3"
720728
resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
@@ -805,6 +813,15 @@
805813
resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff"
806814
integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==
807815

816+
"@types/styled-components@^5.1.9":
817+
version "5.1.9"
818+
resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.9.tgz#00d3d84b501420521c4db727e3c195459f87a6cf"
819+
integrity sha512-kbEG6YlwK8rucITpKEr6pA4Ho9KSQHUUOzZ9lY3va1mtcjvS3D0wDciFyHEiNHKLL/npZCKDQJqm0x44sPO9oA==
820+
dependencies:
821+
"@types/hoist-non-react-statics" "*"
822+
"@types/react" "*"
823+
csstype "^3.0.2"
824+
808825
"@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2":
809826
version "2.0.3"
810827
resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
@@ -3049,7 +3066,7 @@ hmac-drbg@^1.0.1:
30493066
minimalistic-assert "^1.0.0"
30503067
minimalistic-crypto-utils "^1.0.1"
30513068

3052-
hoist-non-react-statics@^3.0.0:
3069+
hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0:
30533070
version "3.3.2"
30543071
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
30553072
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==

0 commit comments

Comments
 (0)