Add basic website (#437)

* Add Netlify configuration and website Makefile Signed-off-by: lucperkins <lucperkins@gmail.com> * Add .editorconfig file for IDE configs Signed-off-by: lucperkins <lucperkins@gmail.com> * Add empty content folder to satisfy Hugo requirement Signed-off-by: lucperkins <lucperkins@gmail.com> * Add basic Hugo site config Signed-off-by: lucperkins <lucperkins@gmail.com> * Add initial layout scaffolding Signed-off-by: lucperkins <lucperkins@gmail.com> * Add initial npm assets, yarn.lock, and .gitignore file to ignore node_modules/ Signed-off-by: lucperkins <lucperkins@gmail.com> * Add initial site implementation * Revert Hugo version to 0.50 Signed-off-by: lucperkins <lucperkins@gmail.com> * Change publish directory to website/public Signed-off-by: lucperkins <lucperkins@gmail.com> * Add basic site metadata in partial Signed-off-by: Luc Perkins <lucperkins@gmail.com> * Widen main logo on mobile Signed-off-by: Luc Perkins <lucperkins@gmail.com> * Add favicon link to CSS partial Signed-off-by: Luc Perkins <lucperkins@gmail.com> * Synchronize main color with logos Signed-off-by: Luc Perkins <lucperkins@gmail.com> * Add basic Providers and How it Works sections to home page Signed-off-by: lucperkins <lucperkins@gmail.com> * Combine basics and providers sections into one Signed-off-by: lucperkins <lucperkins@gmail.com> * Add favicon link to site config Signed-off-by: lucperkins <lucperkins@gmail.com> * Add navbar fade in and out effect Signed-off-by: lucperkins <lucperkins@gmail.com> * Add Slack button Signed-off-by: lucperkins <lucperkins@gmail.com> * Add GitHub stars/watcher info Signed-off-by: lucperkins <lucperkins@gmail.com> * Add documentation layout Signed-off-by: lucperkins <lucperkins@gmail.com> * Add debugging and contributing links Signed-off-by: lucperkins <lucperkins@gmail.com> * Add docs button in main hero Signed-off-by: lucperkins <lucperkins@gmail.com> * Fix footer layout issue Signed-off-by: lucperkins <lucperkins@gmail.com> * Change docs header aesthetic Signed-off-by: lucperkins <lucperkins@gmail.com> * Change syntax highlighting theme to fruity Signed-off-by: lucperkins <lucperkins@gmail.com> * More adjustments to sidebar Signed-off-by: lucperkins <lucperkins@gmail.com> * Add TOC panel for docs Signed-off-by: lucperkins <lucperkins@gmail.com> * Adjust the padding on section elements Signed-off-by: lucperkins <lucperkins@gmail.com> * Remove stickiness on main docs header Signed-off-by: lucperkins <lucperkins@gmail.com> * Add basic architecture doc Signed-off-by: lucperkins <lucperkins@gmail.com> * Remove 'coming soon' banner Signed-off-by: lucperkins <lucperkins@gmail.com> * Add AnchorJS support for docs pages Signed-off-by: lucperkins <lucperkins@gmail.com>
2018-12-21 13:49:05 -08:00
parent 966f7a807b
commit b44072588b
42 changed files with 1059 additions and 1 deletions
--- a/website/layouts/_default/baseof.html
+++ b/website/layouts/_default/baseof.html
@@ -0,0 +1,26 @@
+{{- .Scratch.Set "numFigures" 1 }}
+{{- $pageType := cond .IsHome "home" .Section }}
+<!DOCTYPE html>
+<html lang="{{ .Site.LanguageCode }}">
+  <head>
+    {{ partial "meta.html" . }}
+    <title>
+      {{ block "title" . }}{{ .Site.Title }}{{ end }}
+    </title>
+    {{ partial "css.html" . }}
+  </head>
+  <body class="page is-{{ $pageType }}-page">
+    {{ block "main" . }}
+    {{ partial "navbar.html" . }}
+
+    <main class="main">
+      {{ block "main" . }}
+      {{ end }}
+    </main>
+
+    {{ partial "footer.html" . }}
+    {{ end }}
+
+    {{ partial "javascript.html" . }}
+  </body>
+</html>
--- a/website/layouts/docs/section.html
+++ b/website/layouts/docs/section.html
@@ -0,0 +1,7 @@
+{{ define "title" }}
+Virtual Kubelet | {{ .Title }}
+{{ end }}
+
+{{ define "main" }}
+{{ partial "docs/dashboard.html" . }}
+{{ end }}
--- a/website/layouts/docs/single.html
+++ b/website/layouts/docs/single.html
@@ -0,0 +1,7 @@
+{{ define "title" }}
+Virtual Kubelet docs | {{ .Title }}
+{{ end }}
+
+{{ define "main" }}
+{{ partial "docs/dashboard.html" . }}
+{{ end }}
--- a/website/layouts/index.html
+++ b/website/layouts/index.html
@@ -0,0 +1,11 @@
+{{ define "title" }}
+{{ .Site.Title }} | Home
+{{ end }}
+
+{{ define "main" }}
+{{ partial "navbar.html" . }}
+{{ partial "home/hero.html" . }}
+{{ partial "home/info.html" . }}
+{{ partial "home/cncf.html" . }}
+{{ partial "footer.html" . }}
+{{ end }}
--- a/website/layouts/partials/css.html
+++ b/website/layouts/partials/css.html
@@ -0,0 +1,16 @@
+{{- $favicon      := .Site.Params.favicon }}
+{{- $inServerMode := .Site.IsServer }}
+{{- $includePaths := (slice "node_modules") }}
+{{- $sass         := "sass/style.sass" }}
+{{- $cssOutput    := "css/style.css" }}
+{{- $devOpts      := (dict "targetPath" $cssOutput "includePaths" $includePaths "enableSourceMap" true) }}
+{{- $prodOpts     := (dict "targetPath" $cssOutput "includePaths" $includePaths "outputStyle" "compressed") }}
+{{- $cssOpts      := cond $inServerMode $devOpts $prodOpts }}
+{{- $css          := resources.Get $sass | resources.ExecuteAsTemplate $sass . | toCSS $cssOpts }}
+{{- if $inServerMode }}
+<link rel="stylesheet" href="{{ $css.RelPermalink }}">
+{{- else }}
+{{- $prodCss      := $css | fingerprint }}
+<link rel="stylesheet" href="{{ $prodCss.RelPermalink }}" integrity="{{ $prodCss.Data.Integrity }}">
+{{- end }}
+<link rel="shortcut icon" href="{{ $favicon }}">
--- a/website/layouts/partials/docs/dashboard.html
+++ b/website/layouts/partials/docs/dashboard.html
@@ -0,0 +1,5 @@
+<div class="dashboard">
+  {{ partial "docs/sidebar.html" . }}
+  {{ partial "docs/main.html" . }}
+  {{ partial "docs/toc.html" . }}
+</div>
--- a/website/layouts/partials/docs/header.html
+++ b/website/layouts/partials/docs/header.html
@@ -0,0 +1,11 @@
+{{- $description := .Params.description }}
+<section class="dashboard-main-header section has-background-dark">
+  <p class="title is-size-1 has-text-white-bis has-text-weight-light{{ if $description }} is-spaced{{ end }}">
+    {{ .Title }}
+  </p>
+  {{- with $description }}
+  <p class="subtitle is-size-3 is-size-4-mobile has-text-white-bis has-text-weight-light">
+    {{ . }}
+  </p>
+  {{- end }}
+</section>
--- a/website/layouts/partials/docs/main.html
+++ b/website/layouts/partials/docs/main.html
@@ -0,0 +1,11 @@
+<div class="dashboard-main is-scrollable">
+  {{ partial "docs/header.html" . }}
+
+  <section class="section">
+    <div class="content is-medium">
+      {{ .Content }}
+    </div>
+  </section>
+
+  {{ partial "footer.html" . }}
+</div>
--- a/website/layouts/partials/docs/sidebar.html
+++ b/website/layouts/partials/docs/sidebar.html
@@ -0,0 +1,23 @@
+{{- $sidebarLogo := .Site.Params.logos.sidebar }}
+{{- $docs        := where .Site.Pages "Section" "docs" }}
+<div class="dashboard-panel is-medium is-hidden-mobile has-background-primary">
+  <div class="dashboard-panel-header has-text-centered">
+    <a href="{{ .Site.BaseURL }}">
+      <img src="{{ $sidebarLogo }}">
+    </a>
+  </div>
+
+  <br />
+
+  <div class="dashboard-panel-main">
+    <div class="toc">
+      {{- range $docs }}
+      <div class="toc-item has-text-weight-light">
+        <a href="{{ .URL }}">
+            {{ .Title }}
+          </a>
+      </div>
+      {{- end }}
+    </div>
+  </div>
+</div>
--- a/website/layouts/partials/docs/toc.html
+++ b/website/layouts/partials/docs/toc.html
@@ -0,0 +1,9 @@
+<div class="dashboard-panel toc-panel is-medium is-hidden-mobile">
+  <p class="is-size-4">
+    {{ .Title }}
+  </p>
+
+  <div class="toc-bar">
+    {{ .TableOfContents }}
+  </div>
+</div>
--- a/website/layouts/partials/footer.html
+++ b/website/layouts/partials/footer.html
@@ -0,0 +1,12 @@
+{{- $year := now.Year}}
+<footer class="footer has-background-black">
+  <div class="has-text-centered">
+    <img class="is-footer-logo" src="https://raw.githubusercontent.com/cncf/artwork/master/virtualkubelet/icon/white/virtualkubelet-icon-white.png">
+
+    <br /><br />
+
+    <p class="is-size-5 is-size-6-mobile has-text-grey-lighter has-text-weight-light">
+      &copy; {{ $year }} The Virtual Kubelet authors
+    </p>
+  </div>
+</footer>
--- a/website/layouts/partials/home/cncf.html
+++ b/website/layouts/partials/home/cncf.html
@@ -0,0 +1,9 @@
+<section class="section has-background-grey-lightest">
+  <div class="container has-text-centered">
+    <p class="title is-size-4 is-size-5-mobile has-text-weight-light">
+      Virtual Kubelet is a <a href="https://cncf.io">Cloud Native Computing Foundation</a> sandbox project
+    </p>
+
+    <img class="is-cncf-logo" src="https://raw.githubusercontent.com/cncf/artwork/master/cncf/horizontal/color/cncf-color.png" alt="Cloud Native Computing Foundation logo">
+  </div>
+</section>
--- a/website/layouts/partials/home/hero.html
+++ b/website/layouts/partials/home/hero.html
@@ -0,0 +1,16 @@
+{{- $heroLogo := .Site.Params.logos.hero }}
+<div class="hero is-primary">
+  <div class="hero-body">
+    <div class="section has-text-centered">
+      <img class="is-main-logo" src="{{ $heroLogo }}" alt="Main Virtual Kubelet hero logo">
+
+      <br /><br /><br />
+
+      <div class="buttons is-centered">
+        <a class="button is-large is-black" href="/docs">
+          Documentation
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
--- a/website/layouts/partials/home/info.html
+++ b/website/layouts/partials/home/info.html
@@ -0,0 +1,40 @@
+{{- $description := .Site.Params.description | markdownify }}
+{{- $social      := .Site.Params.social }}
+{{- $providers := .Site.Data.providers }}
+<section class="section">
+  <div class="container">
+    <div class="columns">
+      <div class="column has-background-white has-extra-padding">
+        <p class="title is-size-2 is-size-3-mobile has-text-primary has-text-weight-light">
+          The basics
+        </p>
+
+        <span class="content is-size-4 is-size-5-mobile">
+          {{ $description }}
+        </span>
+
+        <br /><br />
+
+        {{ partial "home/social.html" . }}
+      </div>
+
+      <div class="column has-background-black has-extra-padding">
+        <p class="title is-size-2 is-size-3-mobile has-text-white has-text-weight-light">
+          Providers
+        </p>
+
+        <ul>
+          {{- range $providers }}
+          {{- $url := printf "https://github.com/virtual-kubelet/virtual-kubelet/tree/master/providers/%s" .tag }}
+          <li class="has-bottom-spacing">
+            <a class="is-size-5 is-size-6-mobile has-text-grey-lighter has-text-weight-light" href="{{ $url }}" target="_blank">
+              {{ .name | markdownify }}
+            </a>
+            <br />
+          </li>
+          {{- end }}
+        </ul>
+      </div>
+    </div>
+  </div>
+</section>
--- a/website/layouts/partials/home/social.html
+++ b/website/layouts/partials/home/social.html
@@ -0,0 +1,38 @@
+{{- $socialButtons := .Site.Params.social }}
+{{- $repoInfo    := getJSON "https://api.github.com/repos/virtual-kubelet/virtual-kubelet" }}
+{{- $numStars    := $repoInfo.stargazers_count }}
+{{- $numWatchers := $repoInfo.subscribers_count }}
+<div class="buttons">
+  {{- range $socialButtons }}
+  <a class="button is-medium is-{{ .color }}" href="{{ .url }}" target="_blank">
+    <span class="icon">
+      <i class="fab fa-{{ .icon }}"></i>
+    </span>
+    <span>
+      {{ .name }}
+    </span>
+  </a>
+  {{- end }}
+</div>
+
+<div class="buttons">
+  <div class="button is-dark is-radiusless">
+    <span class="icon">
+      <i class="fab fa-github"></i>
+    </span>
+
+    <span>
+      Stars &nbsp;<strong>{{ $numStars }}</strong>
+    </span>
+  </div>
+
+  <div class="button is-dark is-radiusless">
+    <span class="icon">
+      <i class="fab fa-github"></i>
+    </span>
+
+    <span>
+      Watchers &nbsp;<strong>{{ $numWatchers }}</strong>
+    </span>
+  </div>
+</div>
--- a/website/layouts/partials/javascript.html
+++ b/website/layouts/partials/javascript.html
@@ -0,0 +1,7 @@
+{{- $jsFiles := (slice "anchor" "app") }}
+<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+{{- range $jsFiles }}
+{{- $path := printf "js/%s.js" . }}
+{{- $file := resources.Get $path | minify | fingerprint }}
+<script src="{{ $file.RelPermalink }}" integrity="{{ $file.Data.Integrity }}"></script>
+{{- end }}
--- a/website/layouts/partials/meta.html
+++ b/website/layouts/partials/meta.html
@@ -0,0 +1,2 @@
+<meta charset="utf-8">
+<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
--- a/website/layouts/partials/navbar.html
+++ b/website/layouts/partials/navbar.html
@@ -0,0 +1,18 @@
+{{- $navbarLogo := .Site.Params.logos.navbar }}
+<nav class="navbar is-fixed-top is-primary">
+  <div class="container">
+    <div class="navbar-brand">
+      <a class="navbar-item">
+        <img src="{{ $navbarLogo }}" alt="Virtual Kubelet navbar logo">
+      </a>
+    </div>
+
+    <div class="navbar-menu">
+      <div class="navbar-end">
+        <a class="navbar-item is-size-4" href="/docs">
+          Docs
+        </a>
+      </div>
+    </div>
+  </div>
+</nav>
--- a/website/layouts/shortcodes/providers.html
+++ b/website/layouts/shortcodes/providers.html
@@ -0,0 +1,11 @@
+{{- $providers := .Site.Data.providers }}
+<ul>
+  {{- range $providers }}
+  {{- $url := printf "https://github.com/virtual-kubelet/virtual-kubelet/tree/master/providers/%s" .tag }}
+  <li>
+    <a href="{{ $url }}">
+      {{ .name | markdownify }}
+    </a>
+  </li>
+  {{- end }}
+</ul>
--- a/website/layouts/shortcodes/svg.html
+++ b/website/layouts/shortcodes/svg.html
@@ -0,0 +1,10 @@
+{{- $src      := .Get "src" }}
+{{- $path     := printf "static/%s" $src | relURL }}
+{{- $figureId := $.Page.Scratch.Get "numFigures" }}
+<figure id="figure-{{ $figureId }}">
+  {{ $path | readFile | safeHTML }}
+  <figcaption>
+    <strong>Figure {{ $figureId }}</strong>{{ with .Get "caption" }}. {{ . | markdownify }}{{ end }}
+  </figcaption>
+</figure>
+