elvish/_website/template.html
Qi Xiao 197ea9c415 _website: Generate nav separator with CSS.
The padding of nav-link has to be moved into its <code> element to work
around a likely render bug of Chrome that would cause the right-side
padding to be ignored.
2018-11-07 23:31:14 +00:00

149 lines
4.2 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
{{ if is "homepage" }}
<link rel="alternate" type="application/atom+xml"
href="{{ rootURL }}/feed.atom">
{{ end }}
<title>
{{ if is "homepage" }}
{{ .BlogTitle }}
{{ else if is "category" }}
{{ index .CategoryMap .Category }}
{{ else }}
{{ .Title }}
{{ end }}
</title>
<!-- Generated by realfavicongenerator.net -->
<link rel="apple-touch-icon" sizes="180x180" href="{{ rootURL }}/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="{{ rootURL }}/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="{{ rootURL }}/favicon-16x16.png">
<link rel="manifest" href="{{ rootURL }}/site.webmanifest">
<link rel="mask-icon" href="{{ rootURL }}/safari-pinned-tab.svg" color="#55bb55">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<style>
{{ .BaseCSS }}
{{ .ExtraCSS }}
</style>
<script>
{{ .ExtraJS }}
</script>
</head>
<body>
<div id="navbar-container"> <div id="navbar">
<div id="blog-title">
<code>
<a href="{{ rootURL }}/">
elvish
</a>
</code>
</div>
<ul id="nav-list">
{{ $homepageTitle := .HomepageTitle }}
{{ $curcat := .Category }}
{{ range $i, $info := .Categories }}
<li class="nav-item">
<a href="{{ rootURL }}/{{ $info.Name }}/"
class="nav-link {{ if eq $curcat $info.Name}}current{{ end }}">
<code>
{{ $info.Name }}
</code>
</a>
</li>
{{ end }}
</ul>
<div class="clear"></div>
</div> </div>
{{/*
The reference to "content" is a free one and has to be fixed elsewhere.
The *-content templates defined below are intended to be used for this.
For instance, by adding the following code, this whole template file will
function as the template for articles:
{{ define "content" }} {{ template "article-content" . }} {{ end }}
This snippet can be generated by contentIs("article").
*/}}
{{ template "content" . }}
<script>
// If the domain starts with "dark.", trigger dark mode.
if (location.hostname.startsWith('dark.')) {
document.body.classList.add('dark');
}
// Pressing d triggers dark mode. This is useful for debugging.
window.addEventListener('keypress', function(ev) {
if (String.fromCodePoint(ev.keyCode || ev.charCode) == 'd') {
document.body.classList.toggle('dark');
}
});
// If viewing locally, append index.html to relative paths that point to
// directories
if (location.protocol === 'file:') {
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
var href = links[i].getAttribute('href');
if (href && !href.match(/^https?:/) && href.endsWith('/')) {
links[i].href = href + 'index.html';
}
}
}
</script>
</body>
</html>
{{ define "article-content" }}
<div id="content">
<article class="article">
{{ if not .IsHomepage }}
<div class="article-title">
<div class="timestamp"> {{ .Timestamp }} </div>
<h1> {{ .Title }} </h1>
<div class="clear"></div>
</div>
{{ end }}
<div class="article-content">
{{ .Content }}
</div>
<div class="clear"></div>
</article>
</div>
{{ end }}
{{ define "category-content" }}
{{ $category := .Category }}
<div id="content">
{{ if ne .Prelude "" }}
<div class="category-prelude article">
<article class="article">
{{ .Prelude }}
</article>
</div>
{{ end }}
<ul class="article-list">
{{ range $article := .Articles }}
<li>
<a href="{{ rootURL }}/{{ $category }}/{{ $article.Name }}.html"
class="article-link">{{ $article.Title }}</a>
<span class="article-timestamp">
{{ $article.Timestamp }}
</span>
<div class="clear"></div>
</li>
{{ end }}
</ul>
</div>
{{ end }}