Merge branch 'jonwinstanley-feature/move-styling-out-of-components'

colinhacks · Oct 31, 2020 · 98346ba · 98346ba
2 parents 9545035 + bd87933
commit 98346ba
Show file tree

Hide file tree

Showing 29 changed files with 485 additions and 567 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,4 @@
-<p align="center">
-  <h1 align="center">Devii</h1>
-</p>
+<p align="center"><h1 align="center" style="text-align:center;">Devii</h1></p>
 <p align="center">
   A developer blog starter for 2020. <br/>Next.js<br/>React<br/>TypeScript<br/>Markdown<br/>syntax highlighting<br/>SEO<br/>RSS generation
 </p>
@@ -17,7 +15,7 @@ if you're happy and you know it, star this repo
 <br/>
 <br/>
 
-A dev blog starter for 2020.
+### A dev blog starter for 2020.
 
 - Works as a Markdown-based static-site generator out of the box: just add new blog posts to `/md/blog`
 - Supports exporting to fully static assets (powered by Next.js)
@@ -149,9 +147,9 @@ author: Ben Bitdiddle
 tags:
   - Devii
   - Blogs
-authorPhoto: /profile.jpg
-bannerPhoto: /brook.jpg
-thumbnailPhoto: /brook.jpg
+authorPhoto: /img/profile.jpg
+bannerPhoto: /img/brook.jpg
+thumbnailPhoto: /img/brook.jpg
 ---
 ```
 

diff --git a/components/Author.tsx b/components/Author.tsx
@@ -1,55 +1,21 @@
 import React from 'react';
 import { format } from 'fecha';
 import { PostData } from '../loader';
-import { globals } from '../globals';
 
 export const FollowButton = () => {
   return (
     <a href="/newsletter">
-      <div
-        style={{
-          display: 'inline-block',
-          border: `1px solid ${globals.accentColor}`,
-          borderRadius: '4px',
-          padding: '2px 10px',
-          color: globals.accentColor,
-          fontSize: '10pt',
-          marginBottom: '2px',
-          marginLeft: '4px',
-        }}
-      >
-        Follow
-      </div>
+      <div className="follow-button">Follow</div>
     </a>
   );
 };
 
 export const Author: React.FC<{ post: PostData }> = (props) => {
   return (
-    <div
-      style={{
-        margin: '0px',
-        padding: '0px',
-      }}
-    >
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'flex-start',
-        }}
-      >
+    <div className="author-container">
+      <div className="author">
         {props.post.authorPhoto && (
-          <img
-            src={props.post.authorPhoto}
-            style={{
-              width: '70px',
-              height: '70px',
-              borderRadius: '35px',
-              margin: '0px 10px 0px 0px',
-            }}
-          />
+          <img src={props.post.authorPhoto} className="author-image" />
         )}
         <AuthorLines post={props.post} />
       </div>
@@ -58,35 +24,25 @@ export const Author: React.FC<{ post: PostData }> = (props) => {
 };
 
 export const AuthorLines: React.FC<{ post: PostData }> = (props) => {
-  const lineStyle = {
-    margin: '2px',
-    padding: 0,
-    lineHeight: 1.2,
-    fontSize: '11pt',
-  };
   return (
     <div>
-      <p style={{ ...lineStyle }}>
-        {props.post.author
-          ? props.post.author
-          : ''}
+      <p className="author-line">
+        {props.post.author && <span>{props.post.author}</span>}
+
+        {props.post.authorTwitter && (
+          <span>
+            {' '}
+            <a
+              href={`https://twitter.com/${props.post.authorTwitter}`}
+            >{`@${props.post.authorTwitter}`}</a>{' '}
+          </span>
+        )}
       </p>
-      <p style={{ opacity: 0.6, ...lineStyle }}>
+      <p className="author-line subtle">
         {props.post.datePublished
           ? format(new Date(props.post.datePublished), 'MMMM Do, YYYY')
           : ''}
       </p>
-      <p style={{ ...lineStyle }}>
-        {props.post.authorTwitter && (
-          <a
-            style={{
-              textDecoration: 'none',
-              color: '#3b9488',
-            }}
-            href={`https://twitter.com/${props.post.authorTwitter}`}
-          >{`@${props.post.authorTwitter}`}</a>
-        )}
-      </p>
     </div>
   );
 };
diff --git a/components/BlogPost.tsx b/components/BlogPost.tsx
@@ -1,74 +1,29 @@
 import React from 'react';
+import { Author } from './Author';
 import { Markdown } from './Markdown';
 import { PostData } from '../loader';
 import { PostMeta } from './PostMeta';
-import { Author } from './Author';
 
 export const BlogPost: React.FunctionComponent<{ post: PostData }> = ({
   post,
 }) => {
   const { title, subtitle } = post;
   return (
-    <div
-      style={{
-        display: 'flex',
-        flexDirection: 'row',
-        justifyContent: 'center',
-        width: '100%',
-        padding: '0px 0px 100px 0px',
-      }}
-    >
+    <div className="blog-post">
       <PostMeta post={post} />
-      <div style={{ width: '100%', maxWidth: '600px' }}>
-        {post.bannerPhoto && (
-          <img
-            style={{
-              width: '100%',
-              maxWidth: '100%',
-              margin: '0px',
-            }}
-            src={post.bannerPhoto}
-          />
-        )}
-        <div style={{ padding: '50px 3vw 50px 3vw' }}>
-          {title && (
-            <h1
-              style={{
-                margin: '10px 0px 10px 0px',
-                padding: 0,
-                border: 'none',
-              }}
-            >
-              {title}
-            </h1>
-          )}
-          {subtitle && (
-            <h2
-              style={{
-                margin: '10px 0px',
-                padding: 0,
-                border: 'none',
-                fontWeight: 400,
-                opacity: '0.6',
-              }}
-            >
-              {subtitle}
-            </h2>
-          )}
-          <hr
-            style={{
-              height: '1px',
-              color: '#eee',
-              opacity: 0.2,
-              margin: '25px 0px',
-            }}
-          />
-          <Author post={post} />
-        </div>
+      {post.bannerPhoto && (
+        <img className="blog-post-image" src={post.bannerPhoto} />
+      )}
+
+      <div className="blog-post-title">
+        {title && <h1>{title}</h1>}
+        {subtitle && <h2>{subtitle}</h2>}
+        <br />
+        <Author post={post} />
+      </div>
 
-        <div style={{ width: '100%', padding: '0px 3vw' }}>
-          <Markdown source={post.content} />
-        </div>
+      <div className="blog-post-content">
+        <Markdown source={post.content} />
       </div>
     </div>
   );

diff --git a/components/Code.tsx b/components/Code.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { darcula } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 
 export default class Code extends React.PureComponent<{
   language: string;
@@ -10,9 +10,7 @@ export default class Code extends React.PureComponent<{
     const { language, value } = this.props;
     return (
       <SyntaxHighlighter
-        language={(language === 'ts'
-          ? 'typescript'
-          : language) || 'typescript'}
+        language={(language === 'ts' ? 'typescript' : language) || 'typescript'}
         style={darcula}
       >
         {value}

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -2,24 +2,10 @@ import React from 'react';
 import { globals } from '../globals';
 
 export const Footer: React.FC = () => (
-  <div
-    style={{
-      top: 0,
-      width: '100%',
-      height: '50px',
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      backgroundColor: globals.accentColor,
-      color: 'white',
-      padding: '30px',
-      fontSize: '12pt',
-    }}
-  >
+  <div className="footer">
     <p>{`© ${globals.yourName} ${new Date().getFullYear()}`}</p>
     <a href="/rss.xml">
-      <img src="/rss-white.svg" alt="RSS Feed" height="30" width="30" />
+      <img src="/img/rss-white.svg" alt="RSS Feed" height="30" width="30" />
     </a>
   </div>
 );
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -2,29 +2,10 @@ import React from 'react';
 import { globals } from '../globals';
 
 export const Header: React.FC = () => (
-  <div
-    style={{
-      top: 0,
-      width: '100%',
-      height: '50px',
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      backgroundColor: globals.accentColor,
-      padding: '30px',
-      fontSize: '12pt',
-    }}
-  >
-    <a href="/" style={{ textDecoration: 'none' }}>
-      <p style={{ color: 'white' }}>{globals.siteName}</p>
-    </a>
-    <div style={{ flex: 1 }} />
-    <a href="https://github.com/vriad/devii" style={{ textDecoration: 'none' }}>
-      <p style={{ padding: '0px 1em', color: 'white' }}>GitHub</p>
-    </a>
-    <a href="/blog/the-ultimate-tech-stack" style={{ textDecoration: 'none' }}>
-      <p style={{ padding: '0px 1em', color: 'white' }}>Motivation</p>
-    </a>
+  <div className="header">
+    <a href="/">{globals.siteName}</a>
+    <div className="flex-spacer" />
+    <a href="https://github.com/vriad/devii">GitHub</a>
+    <a href="/blog/the-ultimate-tech-stack">Motivation</a>
   </div>
 );