Major updates to site

Colin McDonnell · Colin McDonnell · commit bbed044394b3 · 2020-07-10T20:45:09.000-07:00
diff --git a/README.md b/README.md
@@ -116,11 +116,30 @@ Just add a Markdown file under `md/blog/` to create a new blog post:
 
 ## Google Analytics
 
-Just add your Google Analytics ID (e.g. 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.
+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. This is the frontmatter blog from the sample blog post (`md/blog/test.md`):
+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:
+
+```ts
+type PostData = {
+  path: string;
+  title?: string;
+  subtitle?: string;
+  description?: string; // used for SEO
+  canonicalUrl?: string; // used for SEO
+  datePublished?: number; // Unix timestamp
+  author?: string;
+  authorPhoto?: string;
+  authorHandle?: string; // twitter handle
+  tags?: string[];
+  bannerPhoto?: string;
+  thumbnailPhoto?: string;
+};
+```
+
+For example, here is the frontmatter blog from the sample blog post (`md/blog/the-ultimate-tech-stack.md`):
 
 ```
 ---
@@ -137,23 +156,6 @@ thumbnailPhoto: /brook.jpg
 ---
 ```
 
-This metadata will be loaded and parsed into a TypeScript object with the following type.
-
-```ts
-type PostData = {
-  path: string;
-  title?: string;
-  subtitle?: string;
-  content: string;
-  datePublished?: number;
-  author?: string;
-  authorPhoto?: string;
-  tags?: string[];
-  bannerPhoto?: string;
-  thumbnailPhoto?: string;
-};
-```
-
 View `/loader.ts` to see how this works.
 
 ## Medium-inspired design
@@ -204,18 +206,18 @@ export const getStaticProps = async () => {
 };
 ```
 
-There are a few utility functions in `loader.ts` that Devii uses.
+There are a few utility functions in `loader.ts` that Devii uses. All functions are _async_! All functions accept a _relative_ path which is expected to be \_relative to the `md/` directory. For instance `loadPost('blog/test.md'`) would load `/md/blog/test.md`.
 
-- `loadPost` loads/parses a Markdown file and returns a `PostData`. It takes on argument, the name of a file in the `md/` directory. For instance `loadPost('about.md')` would load `/md/about.md` and `loadPost('blog/test.md'`) would load `/md/blog/test.md`.
-- `loadBlogPosts`: loads/parses all the files in `/md/blog/`. Returns `PostData[]`. Used in `index.tsx` to read a list of all published blog posts.
-- `loadMarkdownFile`: loads a Markdown file but doesn't parse it. Returns the string content. Useful if you want to implement certain parts of a page in Markdown and other parts in React.
-- `loadMarkdownFiles`: accepts a [glob](https://docs.python.org/3/library/glob.html) pattern and loads all the files inside `/md/` whose names match the pattern. Used internally by `loadBlogPosts`.
+- `loadPost` loads/parses a Markdown file and returns a `PostData`
+- `loadBlogPosts`: loads/parses all the files in `/md/blog/`. Returns `PostData[]`. Used in `index.tsx` to load/render a list of all published blog posts
+- `loadMarkdownFile`: loads a Markdown file but doesn't parse it. Returns the string content. Useful if you want to implement some parts of a page in Markdown and other parts in React
+- `loadMarkdownFiles`: accepts a [glob](https://docs.python.org/3/library/glob.html) pattern and loads all the files inside `/md/` whose names match the pattern. Used internally by `loadBlogPosts`
 
 ## Static generation
 
 You can generate a fully static version of your site using `yarn build && yarn export`. This step is entirely powered by Next.js. The static site is exported to the `out` directory.
 
-After its generated, use your static file hosting service of choice (Firebase Hosting, Amazon S3, Vercel) to deploy your site.
+After it's generated, use your static file hosting service of choice (Vercel, Netlify, Firebase Hosting, Amazon S3) to deploy your site.
 
 ## Global configs
 
diff --git a/loader.ts b/loader.ts
@@ -8,6 +8,7 @@ export type PostData = {
   content: string;
   description?: string;
   canonicalUrl?: string;
+  published: boolean;
   datePublished?: number;
   author?: string;
   authorPhoto?: string;
@@ -31,6 +32,7 @@ export const mdToPost = (file: RawFile): PostData => {
     path,
     title: metadata.data.title,
     subtitle: metadata.data.subtitle || null,
+    published: metadata.data.published || false,
     datePublished: metadata.data.datePublished || null,
     tags: metadata.data.tags || null,
     description: metadata.data.description || null,
diff --git a/md/blog/dan-abramov.md b/md/blog/dan-abramov.md
@@ -1,5 +1,6 @@
 ---
 title: Dan Abramov knows about Devii
+published: true
 datePublished: 1594425078471
 author: Colin McDonnell
 tags:
diff --git a/md/blog/devii.md b/md/blog/devii.md
@@ -1,6 +1,7 @@
 ---
 title: Devii's killer features
 subtitle: Bringing the power of React, TypeScript, and static generation to dev blogs everywhere
+published: true
 datePublished: 1589064522569
 author: Ben Bitdiddle
 tags:
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,67 +1,63 @@
 import Head from 'next/head';
 
-import { PostData, loadBlogPosts } from '../loader';
+import { PostData, loadBlogPosts, loadMarkdownFile } from '../loader';
 import { PostCard } from '../components/PostCard';
 import { generateRSS } from '../rssUtil';
 import { Markdown } from '../components/Markdown';
 import { config } from '../globals';
 
-const Home = (props: { readme: string; posts: PostData[] }) => {
+const sectionStyle = {
+  width: '100%',
+  padding: '100px 10vw',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+} as const;
+
+const pStyle = { lineHeight: 1.7 };
+
+const Home = (props: {
+  introduction: string;
+  features: string;
+  readme: string;
+  posts: PostData[];
+}) => {
   return (
     <div style={{ width: '100%' }}>
       <Head>
         <title>Introducing Devii</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <div style={{ maxWidth: '400px', margin: 'auto', padding: '50px 0px' }}>
-        <h3>Welcome to Devii</h3>
-        <p style={{ padding: '10px 0px', color: '#666666' }}>
-          This site is entirely built with Devii! In fact, the{' '}
-          <a href="https://github.com/vriad/devii">Devii repo</a> contains the
-          code for the site you're looking at now.
-        </p>
-        <p style={{ padding: '10px 0px', color: '#666666' }}>
-          After you clone/fork it, you can use this code to learn how Devii
-          works. Then you can rip out everything you don't like, customize
-          everything else, and build your own tools and components on top of the
-          foundation Devii provides.
-        </p>
-        <p style={{ padding: '10px 0px', color: '#666666' }}>
-          Your personal website is the online manifestation of you. Devii
-          doesn't really provide much out of the box. It provides some nice
-          Medium-style default styles for your blog posts and some tools for
-          loading/rendering Markdown. But you'll have to implement your own
-          homepage more or less from scratch. And that's the point! Don't settle
-          for some theme. Build something that represents you.
-        </p>
+      <div style={{ maxWidth: '500px', margin: 'auto', padding: '50px 0px' }}>
+        <Markdown source={props.introduction} />
       </div>
-      <div style={{ width: '100%', padding: '100px 10vw' }}>
+      <div style={sectionStyle}>
+        <h2 style={{ margin: '4px 0px', fontSize: '34pt' }}>Features</h2>
+        <div style={{ maxWidth: '600px' }}>
+          <Markdown source={props.features} />
+        </div>
+      </div>
+      <div style={sectionStyle}>
+        <h2 style={{ margin: '4px 0px', fontSize: '34pt' }}>My blog posts</h2>
+        <p style={{ maxWidth: '600px', paddingBottom: '30px', ...pStyle }}>
+          This section demonstrates the power of dynamic imports. Every Markdown
+          file under <code>/md/blog</code> is automatically parsed into a
+          structured TypeScript object and available in the `props.posts` array.
+          These blog post "cards" are implemented in the
+          `/components/PostCard.tsx` component.
+        </p>
         <div
           style={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
+            display: 'grid',
+            gridTemplateColumns: `repeat(auto-fit, minmax(300px,1fr))`,
+            gridRowGap: '8px',
+            gridColumnGap: '8px',
             width: '100%',
           }}
         >
-          <h2 style={{ margin: '4px 0px', fontSize: '34pt' }}>My blog posts</h2>
-          <p>
-            Any new markdown file under <code>/md/blog</code> will automatically
-            appear here.
-          </p>
-          <div
-            style={{
-              display: 'grid',
-              gridTemplateColumns: `repeat(auto-fit, minmax(300px,1fr))`,
-              gridRowGap: '8px',
-              gridColumnGap: '8px',
-              width: '100%',
-            }}
-          >
-            {props.posts.map((post, j) => {
-              return <PostCard post={post} key={j} />;
-            })}
-          </div>
+          {props.posts.map((post, j) => {
+            return <PostCard post={post} key={j} />;
+          })}
         </div>
       </div>
 
@@ -96,10 +92,22 @@ const Home = (props: { readme: string; posts: PostData[] }) => {
 
       <div style={{ width: '100%', margin: '100px 0px' }}>
         <h2 style={{ textAlign: 'center', fontSize: '34pt' }}>README.md</h2>
-        <p style={{ textAlign: 'center', maxWidth: '600px', margin: 'auto' }}>
+        <p
+          style={{
+            textAlign: 'center',
+            maxWidth: '600px',
+            margin: 'auto',
+            ...pStyle,
+          }}
+        >
           Below is the README.md for devii. It was imported and rendered using
           Next.js dynamic imports. The rest of this page (including this
-          paragraph) are rendered with React. 🎉
+          paragraph) are rendered with React. You can also read the README on
+          GitHub at{' '}
+          <a href="https://github.com/vriad/devii">
+            https://github.com/vriad/devii
+          </a>
+          .
         </p>
       </div>
       <div
@@ -118,12 +126,33 @@ const Home = (props: { readme: string; posts: PostData[] }) => {
           <Markdown source={props.readme} />
         </div>
       </div>
+      <div style={sectionStyle}>
+        <h2
+          style={{ margin: '4px 0px', fontSize: '22pt', paddingBottom: '30px' }}
+        >
+          Get started
+        </h2>
+        <button
+          style={{
+            padding: '10px 30px',
+            backgroundColor: config.accentColor,
+            color: 'white',
+            fontSize: '14pt',
+            border: 'none',
+            borderRadius: '10px',
+          }}
+        >
+          Fork Devii on GitHub
+        </button>
+      </div>
     </div>
   );
 };
 export default Home;
 
 export const getStaticProps = async () => {
+  const introduction = await loadMarkdownFile('introduction.md');
+  const features = await loadMarkdownFile('features.md');
   const readmeFile = await import(`../${'README.md'}`);
   const readme = readmeFile.default;
 
@@ -133,6 +162,6 @@ export const getStaticProps = async () => {
   // during build step.
   await generateRSS(posts);
 
-  const props = { readme, posts };
+  const props = { introduction, features, readme, posts };
   return { props };
 };
