Aesthetic updates for site launch (#4)

* Add editorconfig and make aesthetic updates

Signed-off-by: Luc Perkins <[email protected]>

* Update button spacing

Signed-off-by: Luc Perkins <[email protected]>

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[Makefile]
+indent_style = tab
+
+[*.{html,js,json,md,sass,yaml}]
+indent_style = space
+indent_size = 2

Makefile

@@ -2,8 +2,7 @@ serve:
 	hugo server \
 		--buildDrafts \
 		--buildFuture \
-		--disableFastRender \
-		--ignoreCache
+		--disableFastRender
 
 production-build:
 	hugo

assets/sass/style.sass

@@ -32,37 +32,32 @@ $navbar-dropdown-arrow: $primary !important
 
 @import "bulma/sass/utilities/derived-variables"
 
-@import "bulma/bulma"
-
-.card-header-icon
-  .icon
-    color: $primary
+$colors: mergeColorMaps(("twitter-blue": ($twitter-blue, $white)), $colors)
 
-.is-definition
-  color: $info
-  font-weight: 600
-
-  &:hover
-    cursor: help
+@import "bulma/bulma"
 
-=logo($min, $max)
-  @extend .image
+=logo($tablet, $touch)
   margin: 0 auto
-  min-width: $min
-  max-width: $max
+  +tablet
+    width: percentage($tablet / 100)
+  +touch
+    width: percentage($touch / 100)
+
 
 .is-home-logo
-  +logo(40%, 60%)
+  +logo(40, 60)
+  +tablet
+    margin-bottom: 1.5rem
+
+  +touch
+    margin-bottom: 2rem
 
 .is-cncf-logo
-  +logo(40%, 55%)
-  margin-top: 2rem
+  +logo(40, 60)
+  margin-top: 2.5rem
 
 .is-footer-image
-  +logo(30%, 35%)
-
-.has-text-red
-  color: $red
+  +logo(50, 30)
 
 =branded-button($bgColor)
   border: none
@@ -72,13 +67,6 @@ $navbar-dropdown-arrow: $primary !important
   &:hover
     background-color: darken($bgColor, 5%)
 
-.button
-  &.is-twitter
-    +branded-button($twitter-blue)
-
-.navbar .is-version
-  margin-right: 1rem
-
 .content
   figure
     margin: 0 auto
@@ -108,6 +96,7 @@ $navbar-dropdown-arrow: $primary !important
       &:hover
         color: $grey-light
 
+// Ensures sticky footer glued to the bottom of the page
 .page
   display: flex
   flex-direction: column
@@ -116,14 +105,19 @@ $navbar-dropdown-arrow: $primary !important
   .main
     flex: 1
 
-  &.is-blog-page
-    .card
-      border: 1px solid $grey-lighter
-      border-radius: $radius-small
-
 .is-navbar-version
+  margin-left: 1rem
   background-color: $success
   color: white
   border: 1px solid $success
   padding: .25rem .5rem
   border-radius: $radius-small
+
+.is-home-page
+  .hero
+    p a
+      font-weight: bold
+      color: $dark !important
+
+    .buttons
+      margin-top: 2.5rem

config.toml

@@ -22,6 +22,8 @@ monospace = "Inconsolata"
 [params.logos]
 white = "img/logos/horizontal/white/tikv-horizontal-white.png"
 color = "img/logos/horizontal/color/tikv-horizontal-color.png"
+black = "img/logos/horizontal/black/tikv-horizontal-black.png"
+cncf  = "img/logos/cncf-color.png"
 
 [params.assets]
 fontAwesomeVersion = "5.3.1"
@@ -32,6 +34,15 @@ css = ["syntax"]
 twitter = "tikvproject"
 github  = "https://github.com/tikv/tikv"
 
+[[params.home.buttons]]
+text = "Overview"
+link = "/docs"
+
+[[params.home.buttons]]
+text = "Concepts and architecture"
+link = "/docs/architecture"
+
+
 [outputs]
 home = ["HTML", "REDIRECTS"]
 

content/docs/architecture.md

@@ -6,7 +6,7 @@ weight: 3
 
 This page discusses the core concepts and architecture behind TiKV, including:
 
-* The [APIs](#apis) and [client libraries](#clients) that applications can use to interact with TiKV
+* The [APIs](#apis) that applications can use to interact with TiKV
 * The basic [system architecture](#system) underlying TiKV
 * The anatomy of each [instance](#instance) in a TiKV installation
 * The role of core system components, including the [Placement Driver](#placement-driver), [Store](#store), [Region](#region), and [Node](#node)
@@ -23,8 +23,6 @@ API | Description | Atomicity | Use when...
 Raw | A lower-level key-value API for interacting directly with individual key-value pairs. | Single key | Your application doesn't require distributed transactions or multi-version concurrency control (**MVCC**)
 Transactional | A higher-level key-value API that provides ACID semantics | Multiple keys | Your application requires distributed transactions and/or MVCC
 
-## Client libraries {#clients}
-
 ## System architecture {#system}
 
 The overall architecture of TiKV is illustrated in **Figure 1** below:

content/docs/getting-started.md

@@ -2,7 +2,7 @@
 title: Getting started
 description: Run TiKV in your local environment using Docker Compose
 weight: 1
-new: true
+draft: true
 ---
 
 This guide describes how to quickly deploy a TiKV testing cluster using [Docker Compose](https://docs.docker.com/compose/) on a single machine. Currently, this installation method is supported only on Linux.

data/adopters.yaml

@@ -20,3 +20,19 @@
     url: https://www.datanami.com/2018/02/22/hybrid-database-capturing-perishable-insights-yiguo/
   - language: Chinese
     url: https://www.pingcap.com/cases-cn/user-case-yiguo
+- name: Yuanfudao.com
+  url: https://www.crunchbase.com/organization/yuanfudao
+  industry: EdTech
+  stories:
+  - language: English
+    url: https://www.pingcap.com/blog/2017-08-08-tidbforyuanfudao
+  - language: Chinese
+    url: https://www.pingcap.com/cases-cn/user-case-yuanfudao
+- name: Ele.me
+  url: https://www.ele.me/home/
+  industry: Food delivery
+  stories:
+  - language: English
+    url: https://www.pingcap.com/blog/use-case-tidb-in-eleme/
+  - language: Chinese
+    url: https://www.pingcap.com/cases-cn/user-case-eleme-1/

layouts/_default/baseof.html

@@ -7,7 +7,9 @@
     <title>{{ block "title" . }}{{ .Site.Title }} &ndash; {{ .Site.Params.description.brief }}{{ end }}</title>
     {{ partial "css.html" . }}
   </head>
-  <body class="{{ if not $isHome }}has-navbar-fixed-top {{ end }}page is-{{ $pageType }}-page">
+  <body class="has-navbar-fixed-top page is-{{ $pageType }}-page">
+    {{ partial "navbar.html" . }}
+
     <main class="main">
       {{ block "main" . }}{{ end }}
     </main>

layouts/index.html

@@ -1,15 +1,12 @@
 {{ define "main" }}
 {{- $shortDesc := .Site.Params.description.brief | markdownify }}
 {{- $longDesc  := .Site.Params.description.long | markdownify }}
-{{- $logo      := .Site.Params.logos.color }}
-{{- $cncfLogo  := "img/logos/cncf-color.png" | relURL }}
+{{- $buttons   := .Site.Params.home.buttons }}
+{{- $logo      := .Site.Params.logos.color | relURL }}
+{{- $cncfLogo  := .Site.Params.logos.cncf | relURL }}
 {{- $features  := .Site.Data.features }}
-<section class="hero is-fullheight">
-  <div class="hero-head">
-    {{ partial "navbar.html" . }}
-  </div>
-
-  <div class="hero-body has-background-white-ter">
+<section class="hero is-medium is-light">
+  <div class="hero-body">
     <div class="container has-text-centered">
       <img class="is-home-logo" src="{{ $logo }}" alt="Main TiKV logo">
 
@@ -32,12 +29,11 @@
       </p>
 
       <div class="buttons is-centered">
-        <a class="button is-medium is-rounded is-large is-primary" href="/docs/getting-started">
-          Getting started
-        </a>
-        <a class="button is-medium is-rounded is-large is-primary" href="/docs/architecture">
-          Architecture
+        {{- range $buttons }}
+        <a class="button is-medium is-rounded is-large is-primary" href="{{ .link | relURL }}">
+          {{ .text }}
         </a>
+        {{- end }}
       </div>
     </div>
   </div>
@@ -55,7 +51,7 @@
             </p>
             {{- with .icon }}
             <div class="card-header-icon">
-              <span class="icon">
+              <span class="icon has-text-primary">
                 <i class="fas {{ . }}" aria-hidden="true"></i>
               </span>
             </div>

layouts/partials/footer.html

@@ -45,8 +45,10 @@ <h5 class="is-size-5 has-text-weight-bold has-text-white">
       </div>
     </div> <!-- columns -->
 
+    <br /><br />
+
     <div class="has-text-centered">
-      <span class="has-text-grey-light">
+      <span class="is-size-5 is-size-6-mobile has-text-grey-light">
         &copy; {{ $year }} TiKV Authors
       </span>
     </div>

layouts/partials/navbar.html

@@ -1,14 +1,16 @@
-{{- $isHome         := .IsHome }}
-{{- $isDocs         := eq .Section "docs" }}
-{{- $whiteLogo      := .Site.Params.logos.white | relURL }}
-{{- $colorLogo      := .Site.Params.logos.color | relURL }}
-{{- $navbarLogo     := cond $isHome $colorLogo $whiteLogo }}
-{{- $twitter        := .Site.Params.socialmedia.twitter }}
-{{- $github         := .Site.Params.socialmedia.github }}
-{{- $docs           := where .Site.RegularPages "Section" "docs" }}
-{{- $blogPosts      := where .Site.RegularPages "Section" "blog" }}
-{{- $latest         := .Site.Params.versions.latest }}
-<nav class="navbar is-fixed-top{{ if $isHome }} has-shadow has-background-white{{ else }} is-black{{ end }}">
+{{- $isHome     := .IsHome }}
+{{- $isDocs     := eq .Section "docs" }}
+{{- $whiteLogo  := .Site.Params.logos.white | relURL }}
+{{- $colorLogo  := .Site.Params.logos.color | relURL }}
+{{- $blackLogo  := .Site.Params.logos.black | relURL }}
+{{- $navbarLogo := cond $isHome $blackLogo $whiteLogo }}
+{{- $twitter    := .Site.Params.socialmedia.twitter }}
+{{- $github     := .Site.Params.socialmedia.github }}
+{{- $docs       := where .Site.RegularPages "Section" "docs" }}
+{{- $blogPosts  := where .Site.RegularPages "Section" "blog" }}
+{{- $latest     := .Site.Params.versions.latest }}
+{{- $color      := cond $isHome "light" "black" }}
+<nav class="navbar is-fixed-top is-{{ $color }}">
   <div class="container">
     <div class="navbar-brand">
       <a class="navbar-item" href="{{ .Site.BaseURL | relURL }}">
@@ -67,7 +69,7 @@
         <div class="navbar-item">
           <div class="field is-grouped">
             <p class="control">
-              <a class="button is-twitter" target="_blank" href="https://twitter.com/{{ $twitter }}">
+              <a class="button is-twitter-blue" target="_blank" href="https://twitter.com/{{ $twitter }}">
                 <span class="icon has-text-white">
                   <i class="fab fa-twitter"></i>
                 </span>
@@ -76,7 +78,7 @@
                 </span>
               </a>
 
-              <a class="button is-github is-black{{ if $isDocs }} is-inverted{{ end }}" target="_blank" href="{{ $github }}">
+              <a class="button is-black{{ if $isDocs }} is-inverted{{ end }}" target="_blank" href="{{ $github }}">
                 <span class="icon">
                   <i class="fab fa-github"></i>
                 </span>

layouts/shortcodes/adopters.html

@@ -25,6 +25,7 @@
         {{ .industry }}
       </td>
       <td>
+        {{- if .stories }}
         {{- $numStories := len .stories }}
         {{- range $idx, $story := .stories }}
         <a href="{{ $story.url }}">
@@ -34,6 +35,7 @@
         <br />
         {{- end }}
         {{- end }}
+        {{- end }}
       </td>
     </tr>
     {{- end }}

resources/_gen/assets/sass/sass/style.sass_6af550c30182af2cbd2f775fdbb9d3bc.json

@@ -1 +1 @@
-{"Target":"css/style.36060ded3ce80f9d34d1360f57e30872002bfa9e9579ee92c429778982e23fca.css","MediaType":"text/css","Data":{"Integrity":"sha256-NgYN7TzoD5000TYPV+MIcgAr+p6Vee6SxCl3iYLiP8o="}}
+{"Target":"css/style.da592468b3215fe4030c7d9dac0dcd5ac581dfaf751f8bf7a296c253d440c885.css","MediaType":"text/css","Data":{"Integrity":"sha256-2lkkaLMhX+QDDH2drA3NWsWB3691H4v3opbCU9RAyIU="}}