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 }}