Add basic blog template (#7)

* Add yarn.lock file for npm dependencies Signed-off-by: lucperkins <[email protected]> * Add baseline templates for blog landing page and individual posts Signed-off-by: lucperkins <[email protected]> * Remove date from blog landing page Signed-off-by: lucperkins <[email protected]> * Place container inside hero-body in blog hero partial Signed-off-by: lucperkins <[email protected]> * Add blog post title block Signed-off-by: lucperkins <[email protected]> * Add black background to main blog page Signed-off-by: lucperkins <[email protected]> * Add README instructions for blog and for running locally Signed-off-by: lucperkins <[email protected]> * Hide blog until first post is added Signed-off-by: lucperkins <[email protected]>
rustcon-asia · Dec 2, 2018 · c0d4220 · c0d4220
1 parent f6294aa
commit c0d4220
Show file tree

Hide file tree

Showing 16 changed files with 145 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -1 +1,16 @@
-# website
+# The TiKV website
+
+This repo houses the assets used to build the [TiKV](../tikv) website available at https://tikv.org.
+
+## Publishing
+
+The site is published automatically by [Netlify](https://netlify.com) whenever changes are pushed to the `master` branch. You do not need to manually publish or manage the site deployment.
+
+## Running the site locally
+
+To run the site locally, you'll need to install [Yarn](https://yarnpkg.com) and [Hugo](https://gohugo.io) (in particular the [extended](https://gohugo.io/getting-started/installing/) version).
+
+
+## Adding blog posts
+
+To add a new blog post, add a Markdown file to the `content/blog` folder. There's currently a `first-post.md` file in that directory that can serve as a template.
diff --git a/assets/sass/style.sass b/assets/sass/style.sass
@@ -24,7 +24,6 @@ $danger: $orange
 $navbar-burger-color: $blue
 $family-sans-serif: "Titillium Web", BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
 $family-monospace: "Inconsolata", monosapce
-$card-shadow: none
 $notification-padding: 1rem 1rem
 $navbar-dropdown-radius: none
 $navbar-dropdown-boxed-shadow: none
@@ -113,6 +112,10 @@ $colors: mergeColorMaps(("twitter-blue": ($twitter-blue, $white)), $colors)
   padding: .25rem .5rem
   border-radius: $radius-small
 
+.section
+  &.is-black
+    background-color: $black
+
 .is-home-page
   .hero
     p a

diff --git a/config.toml b/config.toml
@@ -42,6 +42,10 @@ link = "/docs"
 text = "Concepts and architecture"
 link = "/docs/architecture"
 
+[[params.home.buttons]]
+text = "Blog"
+link = "/blog"
+
 
 [outputs]
 home = ["HTML", "REDIRECTS"]

diff --git a/content/blog/_index.md b/content/blog/_index.md
@@ -0,0 +1,4 @@
+---
+title: The TiKV blog
+---
+
diff --git a/content/blog/first-post.md b/content/blog/first-post.md
@@ -0,0 +1,12 @@
+---
+title: First post
+date: 2018-12-01
+author: John Doe
+draft: true
+---
+
+Here is some blog post content that's included in the post summary.
+
+<!--more-->
+
+Here is some content not included in the summary.
diff --git a/layouts/_default/blog/card.html b/layouts/_default/blog/card.html
@@ -1,44 +1,31 @@
-{{- $date := dateFormat "Monday, Jan 2, 2006" .Date }}
+{{- $date      := dateFormat "January 2, 2006" .Date }}
+{{- $hasAuthor := .Params.author }}
 <a href="{{ .URL }}">
   <div class="card">
     <div class="card-content">
-      <div class="media">
-        <div class="media-content">
-          <nav class="level">
-            <div class="level-left">
-              <div class="level-item">
-                <span class="is-size-3 is-size-4-mobile">
-                  {{ .Title }}
-                </span>
-              </div>
-            </div>
-            {{- with .Params.author }}
-            <div class="level-right">
-              <div class="level-item">
-                <span class="is-size-4 is-size-5-mobile">
-                  {{ . }}
-                </span>
-              </div>
-            </div>
-            {{- end }}
-          </nav>
+      <p class="title is-size-1 has-text-weight-light{{ if $hasAuthor }} is-spaced{{ end }}">
+        {{ .Title }}
+      </p>
 
-          <p class="subtitle is-6 has-text-weight-light">
-            {{ $date }}
-          </p>
-        </div>
-      </div>
+      {{- with .Params.author }}
+      <p class="subtitle is-size-3">
+        {{ . }}
+      </p>
+      {{- end }}
+
+      <p class="is-size-4">
+        {{ $date }}
+      </p>
+
+      {{- with .Summary }}
+      <hr class="has-background-primary" />
 
-      <hr class="hr">
-
-      <div class="content">
-        {{- with .Summary }}
-        {{ . | markdownify }}
-        {{- end }}
+      <div class="content is-medium">
+        {{ . }}
       </div>
+      {{- end }}
     </div>
   </div>
 </a>
-<br />
 
 
diff --git a/layouts/_default/blog/navbar-link.html b/layouts/_default/blog/navbar-link.html
@@ -0,0 +1,4 @@
+{{- $date := dateFormat "January 2, 2006" .Date }}
+<a class="navbar-item" href="{{ .URL }}">
+  {{ .Title }}  
+</a>
diff --git a/layouts/blog/list.html b/layouts/blog/list.html
@@ -0,0 +1,8 @@
+{{ define "title" }}
+TiKV | Blog
+{{ end }}
+
+{{ define "main" }}
+{{- partial "blog/hero.html" . }}
+{{- partial "blog/post-list.html" . }}
+{{ end }}
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
@@ -0,0 +1,8 @@
+{{ define "title" }}
+The TiKV blog | {{ .Title }}
+{{ end }}
+
+{{ define "main" }}
+{{ partial "blog/hero.html" . }}
+{{ partial "blog/post.html" . }}
+{{ end }}
diff --git a/layouts/partials/blog/hero.html b/layouts/partials/blog/hero.html
@@ -0,0 +1,21 @@
+{{- $author := .Params.author }}
+{{- $date   := dateFormat "January 2, 2006" .Date }}
+<section class="hero is-black">
+  <div class="hero-body">
+    <div class="container">
+      <h1 class="title is-size-1 has-text-weight-light{{ if $author }} is-spaced{{ end }}">
+        {{ .Title }}
+      </h1>
+      {{- with $author }}
+      <p class="subtitle is-size-3">
+        {{ . }}
+      </p>
+      {{- end }}
+      {{- if ne .URL "/blog/" }}
+      <p class="is-size-5">
+        {{ $date }}
+      </p>
+      {{- end }}
+    </div>
+  </div>
+</section>
diff --git a/layouts/partials/blog/post-list.html b/layouts/partials/blog/post-list.html
@@ -0,0 +1,12 @@
+{{- $posts := where .Site.RegularPages "Section" "blog" }}
+<section class="section is-black">
+  <div class="container">
+    <div class="columns">
+      <div class="column">
+        {{- range $posts }}
+        {{ .Render "blog/card" }}
+        {{- end }}
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/layouts/partials/blog/post.html b/layouts/partials/blog/post.html
@@ -0,0 +1,7 @@
+<section class="section">
+  <div class="container">
+    <div class="content is-medium">
+      {{ .Content }}
+    </div>
+  </div>
+</section>
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
@@ -1,5 +1,4 @@
 {{- $isHome     := .IsHome }}
-{{- $isDocs     := eq .Section "docs" }}
 {{- $whiteLogo  := .Site.Params.logos.white | relURL }}
 {{- $colorLogo  := .Site.Params.logos.color | relURL }}
 {{- $blackLogo  := .Site.Params.logos.black | relURL }}
@@ -9,6 +8,7 @@
 {{- $docs       := where .Site.Pages "Section" "docs" }}
 {{- $latest     := .Site.Params.versions.latest }}
 {{- $color      := cond $isHome "light" "black" }}
+{{- $blogPosts  := where .Site.RegularPages "Section" "blog" }}
 <nav class="navbar is-fixed-top is-{{ $color }}">
   <div class="container">
     <div class="navbar-brand">
@@ -65,6 +65,26 @@
           </div>
         </div>
 
+        {{- if gt 0 (len $blogPosts) }}
+        <div class="navbar-item has-dropdown is-hoverable">
+          <div class="navbar-link">
+            Blog
+          </div>
+
+          <div class="navbar-dropdown">
+            <a class="navbar-item" href="/blog">
+              Blog home
+            </a>
+
+            <hr class="navbar-divider" />
+
+            {{- range first 5 $blogPosts }}
+            {{ .Render "blog/navbar-link" }}
+            {{- end }}
+          </div>
+        </div>
+        {{- end }}
+
         <div class="navbar-item">
           <div class="field is-grouped">
             <p class="control">
@@ -77,7 +97,7 @@
                 </span>
               </a>
 
-              <a class="button is-black{{ if $isDocs }} is-inverted{{ end }}" target="_blank" href="{{ $github }}">
+              <a class="button is-black{{ if not $isHome }} is-inverted{{ end }}" target="_blank" href="{{ $github }}">
                 <span class="icon">
                   <i class="fab fa-github"></i>
                 </span>

diff --git a/resources/_gen/assets/sass/sass/style.sass_6af550c30182af2cbd2f775fdbb9d3bc.content b/resources/_gen/assets/sass/sass/style.sass_6af550c30182af2cbd2f775fdbb9d3bc.content
diff --git a/resources/_gen/assets/sass/sass/style.sass_6af550c30182af2cbd2f775fdbb9d3bc.json b/resources/_gen/assets/sass/sass/style.sass_6af550c30182af2cbd2f775fdbb9d3bc.json
@@ -1 +1 @@
-{"Target":"css/style.da592468b3215fe4030c7d9dac0dcd5ac581dfaf751f8bf7a296c253d440c885.css","MediaType":"text/css","Data":{"Integrity":"sha256-2lkkaLMhX+QDDH2drA3NWsWB3691H4v3opbCU9RAyIU="}}
+{"Target":"css/style.0dde752f2438cce617f3ac10f30e11004150ed877465896b15635535fd15480f.css","MediaType":"text/css","Data":{"Integrity":"sha256-Dd51LyQ4zOYX86wQ8w4RAEFQ7Yd0ZYlrFWNVNf0VSA8="}}
diff --git a/yarn.lock b/yarn.lock
@@ -5,3 +5,4 @@
 bulma@^0.7.1:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.7.1.tgz#73c2e3b2930c90cc272029cbd19918b493fca486"
+  integrity sha512-wRSO2LXB+qI9Pyz2id+uZr4quz5aftSN7Ay1ysr1+krzVp3utD+Ci4CeKuZdrYGc800t65b7heXBL6qw2Wo/lQ==
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"Target":"css/style.da592468b3215fe4030c7d9dac0dcd5ac581dfaf751f8bf7a296c253d440c885.css","MediaType":"text/css","Data":{"Integrity":"sha256-2lkkaLMhX+QDDH2drA3NWsWB3691H4v3opbCU9RAyIU="}}
		{"Target":"css/style.0dde752f2438cce617f3ac10f30e11004150ed877465896b15635535fd15480f.css","MediaType":"text/css","Data":{"Integrity":"sha256-Dd51LyQ4zOYX86wQ8w4RAEFQ7Yd0ZYlrFWNVNf0VSA8="}}