Formatting and CSS improvements

Author: Colin McDonnell

README.md

@@ -7,12 +7,12 @@
 <p align="center">
 if you're happy and you know it, star this repo
 </p>
-</p>
 <p align="center">
   <a href="https://opensource.org/licenses/MIT" rel="nofollow">
-  <img src="https://img.shields.io/github/license/vriad/devii?alt" alt="License" style="width:100px;">
+    <img src="https://img.shields.io/github/license/vriad/devii?alt" alt="License" style="width:100px;">
   </a>
 </p>
+
 <br/>
 <br/>
 <br/>
@@ -29,13 +29,15 @@ A dev blog starter for 2020.
 
 Read more about the motivation + design behind Devii at [https://vriad.com/blog/devii](https://vriad.com/blog/devii).
 
-<!-- # Sponsor
+<!--
 
+# Sponsor
 Big thanks to this week's Devii sponsor! Check out what they have to offer.
-
 <a href="https://tracking.gitads.io/?repo=devii">
 <img src="https://images.gitads.io/devii" alt="GitAds"/>
-</a> -->
+</a>
+
+-->
 
 # Get started
 
@@ -76,10 +78,12 @@ Here's is an abbreviated version of the project structure. Certain config files
 |       ├── devii.md // this page!
         ├── whatever.md // every MD file in this directory becomes a blog post
 ├── components
+|   ├── BlogPost.tsx
 |   ├── Code.tsx
-|   ├── Markdown.tsx
-|   ├── Header.tsx
+|   ├── Footer.tsx
 |   ├── Header.tsx
+|   ├── Markdown.tsx
+|   ├── Meta.tsx
 |   ├── <various>
 ├── loader.ts // contains utility functions for loading/parsing Markdown
 ├── node_modules
@@ -113,10 +117,6 @@ Just add a Markdown file under `md/blog/` to create a new blog post:
 2. Add in some basic Markdown content
 3. Then go to `http://localhost:3000/blog/foo`. You should see the new post.
 
-## Google Analytics
-
-Just add your Google Analytics ID (e.g. 'UA-999999999-1') to `globals.ts` and Devii will automatically add the appropriate Google Analytics snippet to your site. Go to `/pages/_app.ts` to see how this works or customize this behavior.
-
 ## Frontmatter support
 
 Every Markdown file can include a "frontmatter block" containing various metadata. Devii provides a `loadPost` utility that loads a Markdown file, parses it's frontmatter metadata, and returns a structured `PostData` object:
@@ -157,6 +157,10 @@ thumbnailPhoto: /brook.jpg
 
 View `/loader.ts` to see how this works.
 
+## Google Analytics
+
+Just add your Google Analytics ID (e.g. 'UA-999999999-1') to `globals.ts` and Devii will automatically add the appropriate Google Analytics snippet to your site. Go to `/pages/_app.ts` to see how this works or customize this behavior.
+
 ## Medium-inspired design
 
 The Markdown renderer (`Markdown.tsx`) provides a default style inspired by Medium. Just modify the CSS in `Markdown.tsx` to customize the design to your liking.

components/Author.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
-// import { gwen } from 'gwen';
 import { format } from 'fecha';
-
 import { PostData } from '../loader';
 import { globals } from '../globals';
 
@@ -69,22 +67,21 @@ export const AuthorLines: React.FC<{ post: PostData }> = (props) => {
   return (
     <div>
       <p style={{ ...lineStyle }}>
-        {props.post.author ? props.post.author : ''}
+        {props.post.author
+          ? props.post.author
+          : ''}
       </p>
-
       <p style={{ opacity: 0.6, ...lineStyle }}>
         {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',
-              // fontSize: '110%',
             }}
             href={`https://twitter.com/${props.post.authorTwitter}`}
           >{`@${props.post.authorTwitter}`}</a>

components/BlogPost.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { Markdown } from './Markdown';
 import { PostData } from '../loader';
 import { PostMeta } from './PostMeta';
@@ -9,7 +8,6 @@ export const BlogPost: React.FunctionComponent<{ post: PostData }> = ({
   post,
 }) => {
   const { title, subtitle } = post;
-
   return (
     <div
       style={{
@@ -26,7 +24,6 @@ export const BlogPost: React.FunctionComponent<{ post: PostData }> = ({
           <img
             style={{
               width: '100%',
-              // maxHeight: '350px',
               maxWidth: '100%',
               margin: '0px',
             }}
@@ -66,7 +63,6 @@ export const BlogPost: React.FunctionComponent<{ post: PostData }> = ({
               margin: '25px 0px',
             }}
           />
-
           <Author post={post} />
         </div>
 

components/Code.tsx

@@ -8,10 +8,11 @@ export default class Code extends React.PureComponent<{
 }> {
   render() {
     const { language, value } = this.props;
-
     return (
       <SyntaxHighlighter
-        language={(language === 'ts' ? 'typescript' : language) || 'typescript'}
+        language={(language === 'ts'
+          ? 'typescript'
+          : language) || 'typescript'}
         style={darcula}
       >
         {value}

components/Markdown.tsx

@@ -4,7 +4,6 @@ import Code from './Code';
 import { globals } from '../globals';
 
 export const Markdown: React.FC<{ source: string }> = (props) => {
-  // console.log(props.source);
   return (
     <div style={{ width: '100%' }} className="devii-markdown">
       <ReactMarkdown

components/Meta.tsx

@@ -11,16 +11,12 @@ export const Meta: React.FC<{
   };
 }> = (props) => {
   const { meta } = props;
-  // const canonical = `${globals.url}${meta.link}`;
-  // console.log(canonical);
   return (
     <NextHead>
       <title>{meta.title}</title>
       <meta name="copyright" content="Colin McDonnell" />
-
       {meta.link && <link rel="canonical" href={meta.link} />}
       {meta.desc && <meta name="description" content={meta.desc} />}
-
       <meta property="og:type" content="website" />
       <meta name="og:title" property="og:title" content={meta.title} />
       {meta.desc && (
@@ -32,7 +28,6 @@ export const Meta: React.FC<{
       )}
       <meta property="og:site_name" content={globals.siteName} />
       {meta.link && <meta property="og:url" content={`${meta.link}`} />}
-
       <meta name="twitter:card" content="summary" />
       <meta name="twitter:title" content={meta.title} />
       {meta.desc && <meta name="twitter:description" content={meta.desc} />}

components/PostCard.tsx

@@ -20,33 +20,24 @@ export const PostCard: React.FC<{ post: PostData }> = (props) => {
     >
       <div
         style={{
-          // flexBasis: '300px',
-          // flex: 1,
-          // minWidth: '200px',
-          // maxWidth: '450px',
           opacity: 0.92,
           boxShadow: '0px 2px 10px #00000040',
           width: '100%',
           maxWidth: '500px',
           overflow: 'hidden',
           borderRadius: '8px',
-          // boxShadow: '0px 2px 10px #00000020',
           display: 'flex',
           flexDirection: 'column',
           height: '100%',
-          // margin: '10px 0px',
         }}
       >
         {post.thumbnailPhoto && (
           <div
             style={{
               background: `url(${post.thumbnailPhoto}) no-repeat center center`,
               backgroundSize: 'cover',
-              // backgroundImage: post.thumb_image,
-              // backgroundPosition: 'cover',
               width: '100%',
               flex: 1,
-              // height: '200px',
             }}
           />
         )}
@@ -62,7 +53,6 @@ export const PostCard: React.FC<{ post: PostData }> = (props) => {
             <h2
               style={{
                 margin: '0px 0px 7px 0px',
-                // padding: '2px 0px 2px 0px',
                 fontSize: '14pt',
                 fontWeight: 600,
                 padding: '2px 10%',

components/Tag.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 export const Tag: React.FC<{ tag: string }> = (props) => {
   return (
     <div

loader.ts

@@ -1,6 +1,7 @@
 import matter from 'gray-matter';
 import glob from 'glob';
 import { globals } from './globals';
+
 export type PostData = {
   path: string;
   title: string;
@@ -45,8 +46,12 @@ export const mdToPost = (file: RawFile): PostData => {
     content: metadata.content,
   };
 
-  if (!post.title) throw new Error(`Missing required field: title.`);
-  if (!post.content) throw new Error(`Missing required field: content.`);
+  if (!post.title)
+    throw new Error(`Missing required field: title.`);
+
+  if (!post.content)
+    throw new Error(`Missing required field: content.`);
+
   if (!post.datePublished)
     throw new Error(`Missing required field: datePublished.`);
 

md/blog/the-ultimate-tech-stack.md

@@ -4,13 +4,13 @@ published: true
 datePublished: 1590463136775
 author: Colin McDonnell
 authorTwitter: vriad
-authorPhoto: https://vriad.com/colin_square_small.jpg
-tags: 
+authorPhoto: /profile.jpg
+tags:
   - Static Site Generators
   - React
   - Next.js
-thumbnailPhoto: https://vriad.com/pancakes_thumb.jpeg
-bannerPhoto: https://vriad.com/pancakes.jpeg
+thumbnailPhoto: /pancakes_thumb.jpeg
+bannerPhoto: /pancakes.jpeg
 canonicalUrl: https://vriad.com/essays/devii
 ---