Skip to content
This repository was archived by the owner on Jun 14, 2024. It is now read-only.

Commit 98346ba

Browse files
author
Colin McDonnell
committed
Merge branch 'jonwinstanley-feature/move-styling-out-of-components'
2 parents 9545035 + bd87933 commit 98346ba

29 files changed

+485
-567
lines changed

‎README.md‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
<p align="center">
2-
<h1 align="center">Devii</h1>
3-
</p>
1+
<p align="center"><h1 align="center" style="text-align:center;">Devii</h1></p>
42
<p align="center">
53
A developer blog starter for 2020. <br/>Next.js<br/>React<br/>TypeScript<br/>Markdown<br/>syntax highlighting<br/>SEO<br/>RSS generation
64
</p>
@@ -17,7 +15,7 @@ if you're happy and you know it, star this repo
1715
<br/>
1816
<br/>
1917

20-
A dev blog starter for 2020.
18+
### A dev blog starter for 2020.
2119

2220
- Works as a Markdown-based static-site generator out of the box: just add new blog posts to `/md/blog`
2321
- Supports exporting to fully static assets (powered by Next.js)
@@ -149,9 +147,9 @@ author: Ben Bitdiddle
149147
tags:
150148
- Devii
151149
- Blogs
152-
authorPhoto: /profile.jpg
153-
bannerPhoto: /brook.jpg
154-
thumbnailPhoto: /brook.jpg
150+
authorPhoto: /img/profile.jpg
151+
bannerPhoto: /img/brook.jpg
152+
thumbnailPhoto: /img/brook.jpg
155153
---
156154
```
157155

‎components/Author.tsx‎

Lines changed: 16 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,21 @@
11
import React from 'react';
22
import { format } from 'fecha';
33
import { PostData } from '../loader';
4-
import { globals } from '../globals';
54

65
export const FollowButton = () => {
76
return (
87
<a href="/newsletter">
9-
<div
10-
style={{
11-
display: 'inline-block',
12-
border: `1px solid ${globals.accentColor}`,
13-
borderRadius: '4px',
14-
padding: '2px 10px',
15-
color: globals.accentColor,
16-
fontSize: '10pt',
17-
marginBottom: '2px',
18-
marginLeft: '4px',
19-
}}
20-
>
21-
Follow
22-
</div>
8+
<div className="follow-button">Follow</div>
239
</a>
2410
);
2511
};
2612

2713
export const Author: React.FC<{ post: PostData }> = (props) => {
2814
return (
29-
<div
30-
style={{
31-
margin: '0px',
32-
padding: '0px',
33-
}}
34-
>
35-
<div
36-
style={{
37-
display: 'flex',
38-
flexDirection: 'row',
39-
alignItems: 'center',
40-
justifyContent: 'flex-start',
41-
}}
42-
>
15+
<div className="author-container">
16+
<div className="author">
4317
{props.post.authorPhoto && (
44-
<img
45-
src={props.post.authorPhoto}
46-
style={{
47-
width: '70px',
48-
height: '70px',
49-
borderRadius: '35px',
50-
margin: '0px 10px 0px 0px',
51-
}}
52-
/>
18+
<img src={props.post.authorPhoto} className="author-image" />
5319
)}
5420
<AuthorLines post={props.post} />
5521
</div>
@@ -58,35 +24,25 @@ export const Author: React.FC<{ post: PostData }> = (props) => {
5824
};
5925

6026
export const AuthorLines: React.FC<{ post: PostData }> = (props) => {
61-
const lineStyle = {
62-
margin: '2px',
63-
padding: 0,
64-
lineHeight: 1.2,
65-
fontSize: '11pt',
66-
};
6727
return (
6828
<div>
69-
<p style={{ ...lineStyle }}>
70-
{props.post.author
71-
? props.post.author
72-
: ''}
29+
<p className="author-line">
30+
{props.post.author && <span>{props.post.author}</span>}
31+
32+
{props.post.authorTwitter && (
33+
<span>
34+
{' '}
35+
<a
36+
href={`https://twitter.com/${props.post.authorTwitter}`}
37+
>{`@${props.post.authorTwitter}`}</a>{' '}
38+
</span>
39+
)}
7340
</p>
74-
<p style={{ opacity: 0.6, ...lineStyle }}>
41+
<p className="author-line subtle">
7542
{props.post.datePublished
7643
? format(new Date(props.post.datePublished), 'MMMM Do, YYYY')
7744
: ''}
7845
</p>
79-
<p style={{ ...lineStyle }}>
80-
{props.post.authorTwitter && (
81-
<a
82-
style={{
83-
textDecoration: 'none',
84-
color: '#3b9488',
85-
}}
86-
href={`https://twitter.com/${props.post.authorTwitter}`}
87-
>{`@${props.post.authorTwitter}`}</a>
88-
)}
89-
</p>
9046
</div>
9147
);
9248
};

‎components/BlogPost.tsx‎

Lines changed: 14 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,29 @@
11
import React from 'react';
2+
import { Author } from './Author';
23
import { Markdown } from './Markdown';
34
import { PostData } from '../loader';
45
import { PostMeta } from './PostMeta';
5-
import { Author } from './Author';
66

77
export const BlogPost: React.FunctionComponent<{ post: PostData }> = ({
88
post,
99
}) => {
1010
const { title, subtitle } = post;
1111
return (
12-
<div
13-
style={{
14-
display: 'flex',
15-
flexDirection: 'row',
16-
justifyContent: 'center',
17-
width: '100%',
18-
padding: '0px 0px 100px 0px',
19-
}}
20-
>
12+
<div className="blog-post">
2113
<PostMeta post={post} />
22-
<div style={{ width: '100%', maxWidth: '600px' }}>
23-
{post.bannerPhoto && (
24-
<img
25-
style={{
26-
width: '100%',
27-
maxWidth: '100%',
28-
margin: '0px',
29-
}}
30-
src={post.bannerPhoto}
31-
/>
32-
)}
33-
<div style={{ padding: '50px 3vw 50px 3vw' }}>
34-
{title && (
35-
<h1
36-
style={{
37-
margin: '10px 0px 10px 0px',
38-
padding: 0,
39-
border: 'none',
40-
}}
41-
>
42-
{title}
43-
</h1>
44-
)}
45-
{subtitle && (
46-
<h2
47-
style={{
48-
margin: '10px 0px',
49-
padding: 0,
50-
border: 'none',
51-
fontWeight: 400,
52-
opacity: '0.6',
53-
}}
54-
>
55-
{subtitle}
56-
</h2>
57-
)}
58-
<hr
59-
style={{
60-
height: '1px',
61-
color: '#eee',
62-
opacity: 0.2,
63-
margin: '25px 0px',
64-
}}
65-
/>
66-
<Author post={post} />
67-
</div>
14+
{post.bannerPhoto && (
15+
<img className="blog-post-image" src={post.bannerPhoto} />
16+
)}
17+
18+
<div className="blog-post-title">
19+
{title && <h1>{title}</h1>}
20+
{subtitle && <h2>{subtitle}</h2>}
21+
<br />
22+
<Author post={post} />
23+
</div>
6824

69-
<div style={{ width: '100%', padding: '0px 3vw' }}>
70-
<Markdown source={post.content} />
71-
</div>
25+
<div className="blog-post-content">
26+
<Markdown source={post.content} />
7227
</div>
7328
</div>
7429
);

‎components/Code.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
2-
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
32
import { darcula } from 'react-syntax-highlighter/dist/cjs/styles/prism';
3+
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
44

55
export default class Code extends React.PureComponent<{
66
language: string;
@@ -10,9 +10,7 @@ export default class Code extends React.PureComponent<{
1010
const { language, value } = this.props;
1111
return (
1212
<SyntaxHighlighter
13-
language={(language === 'ts'
14-
? 'typescript'
15-
: language) || 'typescript'}
13+
language={(language === 'ts' ? 'typescript' : language) || 'typescript'}
1614
style={darcula}
1715
>
1816
{value}

‎components/Footer.tsx‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,10 @@ import React from 'react';
22
import { globals } from '../globals';
33

44
export const Footer: React.FC = () => (
5-
<div
6-
style={{
7-
top: 0,
8-
width: '100%',
9-
height: '50px',
10-
display: 'flex',
11-
flexDirection: 'row',
12-
alignItems: 'center',
13-
justifyContent: 'space-between',
14-
backgroundColor: globals.accentColor,
15-
color: 'white',
16-
padding: '30px',
17-
fontSize: '12pt',
18-
}}
19-
>
5+
<div className="footer">
206
<p>{`© ${globals.yourName} ${new Date().getFullYear()}`}</p>
217
<a href="/rss.xml">
22-
<img src="/rss-white.svg" alt="RSS Feed" height="30" width="30" />
8+
<img src="/img/rss-white.svg" alt="RSS Feed" height="30" width="30" />
239
</a>
2410
</div>
2511
);

‎components/Header.tsx‎

Lines changed: 5 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,10 @@ import React from 'react';
22
import { globals } from '../globals';
33

44
export const Header: React.FC = () => (
5-
<div
6-
style={{
7-
top: 0,
8-
width: '100%',
9-
height: '50px',
10-
display: 'flex',
11-
flexDirection: 'row',
12-
alignItems: 'center',
13-
justifyContent: 'space-between',
14-
backgroundColor: globals.accentColor,
15-
padding: '30px',
16-
fontSize: '12pt',
17-
}}
18-
>
19-
<a href="/" style={{ textDecoration: 'none' }}>
20-
<p style={{ color: 'white' }}>{globals.siteName}</p>
21-
</a>
22-
<div style={{ flex: 1 }} />
23-
<a href="https://github.com/vriad/devii" style={{ textDecoration: 'none' }}>
24-
<p style={{ padding: '0px 1em', color: 'white' }}>GitHub</p>
25-
</a>
26-
<a href="/blog/the-ultimate-tech-stack" style={{ textDecoration: 'none' }}>
27-
<p style={{ padding: '0px 1em', color: 'white' }}>Motivation</p>
28-
</a>
5+
<div className="header">
6+
<a href="/">{globals.siteName}</a>
7+
<div className="flex-spacer" />
8+
<a href="https://github.com/vriad/devii">GitHub</a>
9+
<a href="/blog/the-ultimate-tech-stack">Motivation</a>
2910
</div>
3011
);

0 commit comments

Comments
 (0)