Last Modified: Wednesday, Apr 24, 2019
Git bash, at project/dev/
mkdir temp && cd temp && git clone https://github.com/netlify/victor-hugo-styleguide.git && explorer .
Create folder: /site/static/styleguide
Copy styleguide.css & styleguide.js into static/styleguide
copy content/styleguide folder, layouts/shortcodes folder, & layouts/styleguide folder
Create layouts:
styleguide/list.html
{{ define "header" }}
<link rel="stylesheet" href="/styleguide/styleguide.css"/>
{{ end }}
{{ define "nav" }}
<div class="styleguide-header flex flex-row justify-between">
<div class="styleguide-home"><a href="/styleguide">Styleguide</a></div>
<div><a href="/" class="white">Go Home</a></div>
</div>
{{ end }}
{{define "main"}}
<div class="styleguide-container">
<div class="styleguide-main">
<h1>Styleguide Based on Victor Hugo</h1>
{{ $colors := slice "0077BE" "373838" "84919e" "d2d8d8" "F7FFF7" "228AE5" }}
<div class="flex flex-row">
{{ range $colors}}
<div class="ph5 pv5" style="background-color:#{{.}}"><span class="bg-white ph1 lh-title">{{.}}</span></div>
{{ end }}
</div>
<h2>Sections:</h2>
<div class="styleguide-tos">
<ul>
{{ range .Pages.ByWeight}}
<li>
<h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
<p>{{ .Description }}</p>
</li>
{{ end }}
</ul>
</div>
</div>
</div>
{{end}}
{{ define "footer" }}
<script src="/styleguide/styleguide.js"></script>
{{ end }}
styleguide/single.html
{{ define "header" }}
<link rel="stylesheet" href="/styleguide/styleguide.css"/>
{{ end }}
{{ define "nav" }}
<div class="styleguide-header flex flex-row justify-between">
<div class="styleguide-home"><a href="/styleguide">Styleguide</a></div>
<div><a href="/" class="white">Go Home</a></div>
</div>
{{ end }}
{{define "main"}}
<div class="styleguide-container">
<div class="styleguide-tos">
<h2>{{ .Title }}</h2>
{{ .TableOfContents }}
</div>
<div class="styleguide-main">
{{ .Content }}
</div>
</div>
{{end}}
{{ define "footer" }}
<script src="/styleguide/styleguide.js"></script>
{{ end }}