Add date under title (tokio-rs#708)

Author: ce-dr

components/content.tsx

@@ -112,6 +112,7 @@ export default function Content({
   prev,
   body,
   mdPath,
+  description,
 }) {
   const isBlogRoute = href.startsWith("/blog");
 
@@ -146,9 +147,14 @@ export default function Content({
           <section className="section content">
             <div className="columns">
               <div className="column is-two-thirds tk-markdown" ref={mdRef}>
-                <h1 className="title" id="">
+                <h1 className={`title ${isBlogRoute ? 'blog-title' : ''}`} id="">
                   {title}
                 </h1>
+                {isBlogRoute && (
+                  <p className="description">
+                    {description}
+                  </p>
+                )}
                 <div dangerouslySetInnerHTML={{ __html: body }}></div>
                 <Footer next={next} prev={prev} mdPath={mdPath} />
               </div>

content/blog/2017-01-tokio-0-1.md

@@ -1,7 +1,7 @@
 ---
 date: "2017-01-10"
 title: "Announcing Tokio 0.1"
-description: "10 January 2017"
+description: "January 10, 2017"
 ---
 
 Today we are publishing the preliminary version of the Tokio stack, 0.1!

content/blog/2017-03-tokio-io.md

@@ -1,7 +1,7 @@
 ---
 date: "2017-03-17"
 title: "Announcing the tokio-io Crate"
-description: "17 March 2017"
+description: "March 17, 2017"
 ---
 
 Today we're happy to announce a new crate and several new tools to work with in

content/blog/2017-09-tokio-reform.md

@@ -1,7 +1,7 @@
 ---
 date: "2017-09-19"
 title: "An RFC for a Tokio revamp"
-description: "19 September 2017"
+description: "September 19, 2017"
 ---
 
 Hi there, Tokio community!

content/blog/2018-02-tokio-reform-shipped.md

@@ -1,7 +1,7 @@
 ---
 date: "2018-02-07"
 title: "Tokio Reform is Shipped and the Road to 0.2"
-description: "07 February 2018"
+description: "February 7, 2018"
 ---
 
 Hi all!

content/blog/2018-03-timers.md

@@ -1,7 +1,7 @@
 ---
 date: "2018-03-30"
 title: "New Timer implementation"
-description: "30 March 2018"
+description: "March 30, 2018"
 ---
 
 Happy Friday all!

content/blog/2018-03-tokio-runtime.md

@@ -1,7 +1,7 @@
 ---
 date: "2018-03-08"
 title: "Announcing the Tokio runtime"
-description: "08 March 2018"
+description: "March 8, 2018"
 ---
 
 I'm happy to announce a new release of Tokio. This release includes the first

lib/api.js

@@ -197,6 +197,7 @@ export function loadPage(path) {
     mdPath,
     data: res.data,
     body: res.content,
+    description: res.data.description || null,
   };
 }
 

lib/page.js

@@ -4,7 +4,7 @@ import Layout from "../components/layout";
 export default function Page({
   app,
   menu,
-  page: { next, prev, href, title, body, mdPath },
+  page: { next, prev, href, title, body, mdPath, description },
 }) {
   return (
     <>
@@ -17,6 +17,7 @@ export default function Page({
           prev={prev}
           body={body}
           mdPath={mdPath}
+          description={description}
         />
       </Layout>
     </>

styles/styles.scss

@@ -727,6 +727,10 @@ a:active {
       @tablet {
         font-size: 2.5rem;
       }
+
+      &.blog-title {
+        margin-bottom : 0rem;
+      }
     }
 
     h1:not(.title) {
@@ -802,6 +806,11 @@ a:active {
     a:hover code {
       color: darken($magenta);
     }
+
+    .description {
+      margin-bottom: 1.5rem;
+      color: $dark-gray;
+    }
   }
 }