template.html 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. {{ if is "homepage" -}}
  7. <link rel="alternate" type="application/atom+xml" href="{{ rootURL }}/feed.atom">
  8. {{- end }}
  9. {{ if is "homepage" -}}
  10. <link rel="canonical" href="{{ .RootURL }}">
  11. {{- else if is "category" -}}
  12. <link rel="canonical" href="{{ .RootURL }}/{{ .Category }}/">
  13. {{- else -}}
  14. <link rel="canonical" href="{{ .RootURL }}/{{ .Category }}/{{ .Name }}">
  15. {{- end }}
  16. <title>
  17. {{ if is "homepage" -}}
  18. {{ .SiteTitle }}
  19. {{- else if is "category" -}}
  20. {{ index .CategoryMap .Category }}
  21. {{- else -}}
  22. {{ .Title }} - {{ .SiteTitle }}
  23. {{- end }}
  24. </title>
  25. <!-- Generated by realfavicongenerator.net -->
  26. <link rel="apple-touch-icon" sizes="180x180" href="{{ rootURL }}/apple-touch-icon.png">
  27. <link rel="icon" type="image/png" sizes="32x32" href="{{ rootURL }}/favicon-32x32.png">
  28. <link rel="icon" type="image/png" sizes="16x16" href="{{ rootURL }}/favicon-16x16.png">
  29. <link rel="manifest" href="{{ rootURL }}/site.webmanifest">
  30. <link rel="mask-icon" href="{{ rootURL }}/safari-pinned-tab.svg" color="#55bb55">
  31. <meta name="msapplication-TileColor" content="#da532c">
  32. <meta name="theme-color" content="#ffffff">
  33. {{ $docsetMode := eq (getEnv "ELVISH_DOCSET_MODE") "1" -}}
  34. <style>
  35. {{ fontFace "Source Serif" 400 "normal" "SourceSerif4-Regular" }}
  36. {{ fontFace "Source Serif" 400 "italic" "SourceSerif4-It" }}
  37. {{ fontFace "Source Serif" 600 "normal" "SourceSerif4-Semibold" }}
  38. {{ fontFace "Source Serif" 600 "italic" "SourceSerif4-SemiboldIt" }}
  39. {{ fontFace "Fira Mono" 400 "normal" "FiraMono-Regular" }}
  40. {{ fontFace "Fira Mono" 600 "italic" "FiraMono-Bold" }}
  41. {{ .BaseCSS }}
  42. {{ .ExtraCSS }}
  43. {{ if $docsetMode }}
  44. .toc {
  45. display: none;
  46. }
  47. {{ end }}
  48. </style>
  49. <script>
  50. {{ .ExtraJS }}
  51. </script>
  52. </head>
  53. <body class="no-js">
  54. <script>
  55. document.body.classList = ['has-js'];
  56. // If the domain starts with "dark.", trigger dark mode.
  57. if (location.hostname.startsWith('dark.')) {
  58. document.body.classList.add('dark');
  59. }
  60. // Pressing d triggers dark mode. This is useful for debugging.
  61. window.addEventListener('keypress', function(ev) {
  62. if (String.fromCodePoint(ev.keyCode || ev.charCode) == 'd') {
  63. document.body.classList.toggle('dark');
  64. }
  65. });
  66. </script>
  67. {{ if not $docsetMode }}
  68. <div id="navbar-container"> <div id="navbar">
  69. <div id="site-title">
  70. <code>
  71. <a href="{{ rootURL }}/">
  72. elvish
  73. </a>
  74. </code>
  75. </div>
  76. <ul id="nav-list">
  77. {{ $homepageTitle := .HomepageTitle }}
  78. {{ $curcat := .Category }}
  79. {{ range $i, $info := .Categories }}
  80. <li class="nav-item">
  81. <a href="{{ rootURL }}/{{ $info.Name }}/"
  82. class="nav-link {{ if eq $curcat $info.Name}}current{{ end }}">
  83. <code>
  84. {{ $info.Name }}
  85. </code>
  86. </a>
  87. </li>
  88. {{ end }}
  89. </ul>
  90. <div class="clear"></div>
  91. </div> </div>
  92. {{ end }}
  93. {{/*
  94. The reference to "content" is a free one and has to be fixed elsewhere.
  95. The *-content templates defined below are intended to be used for this.
  96. For instance, by adding the following code, this whole template file will
  97. function as the template for articles:
  98. {{ define "content" }} {{ template "article-content" . }} {{ end }}
  99. This snippet can be generated by contentIs("article").
  100. */}}
  101. {{ template "content" . }}
  102. <script>
  103. // If viewing locally, append index.html to relative paths that point to
  104. // directories
  105. if (location.protocol === 'file:') {
  106. var links = document.getElementsByTagName('a');
  107. for (var i = 0; i < links.length; i++) {
  108. var href = links[i].getAttribute('href');
  109. if (href && !href.match(/^https?:/) && href.endsWith('/')) {
  110. links[i].href = href + 'index.html';
  111. }
  112. }
  113. }
  114. // Make the navbar sticky only when scrolling up. This makes the navbar
  115. // easily accessible without taking up vertical space when reading.
  116. makeStickyWhenScrollingUp(document.getElementById('navbar-container'));
  117. function makeStickyWhenScrollingUp(element) {
  118. var lastScrollY = 0;
  119. var topPx = 0;
  120. var jumped = window.location.hash !== '';
  121. element.style.position = 'sticky';
  122. element.style.zIndex = 100;
  123. element.style.top = '0px';
  124. document.addEventListener('scroll', function(ev) {
  125. if (jumped) {
  126. // Hide the element after jumping to an anchor.
  127. jumped = false;
  128. topPx = -element.offsetHeight;
  129. } else {
  130. // Use a negative top property on sticky elements to control how much
  131. // of it is visible. Keep it in sync with the scroll position, and cap
  132. // it between -element.offsetHeight (entirely hidden) and 0 (entirely
  133. // visible).
  134. topPx += lastScrollY - window.scrollY;
  135. topPx = Math.max(-element.offsetHeight, Math.min(0, topPx));
  136. }
  137. element.style.top = topPx + 'px';
  138. lastScrollY = window.scrollY;
  139. });
  140. window.addEventListener('hashchange', function(ev) {
  141. jumped = true;
  142. });
  143. }
  144. </script>
  145. </body>
  146. </html>
  147. {{ define "article-content" }}
  148. <div id="content">
  149. <article class="article">
  150. {{ if not .IsHomepage }}
  151. <div class="article-title">
  152. <div class="timestamp"> {{ .Timestamp }} </div>
  153. <h1> {{ .Title }} </h1>
  154. <div class="clear"></div>
  155. </div>
  156. {{ end }}
  157. <div class="article-content">
  158. {{ .Content }}
  159. </div>
  160. <div class="clear"></div>
  161. </article>
  162. </div>
  163. {{ end }}
  164. {{ define "category-content" }}
  165. {{ $category := .Category }}
  166. <div id="content" class="category">
  167. {{ if .Prelude }}
  168. <article class="category-prelude article">
  169. {{ .Prelude }}
  170. </article>
  171. {{ end }}
  172. {{ range $group := .Groups }}
  173. {{ if $group.Intro }}
  174. <div class="group-intro">{{ $group.Intro }}</div>
  175. {{ end }}
  176. <ul class="article-list">
  177. {{ range $article := $group.Articles }}
  178. <li>
  179. <a href="{{ rootURL }}/{{ $category }}/{{ $article.Name }}.html"
  180. class="article-link">{{ $article.Title }}</a>
  181. {{ if $article.Note }}
  182. &mdash; {{ $article.Note }}
  183. {{ end }}
  184. <span class="article-timestamp">
  185. {{ $article.Timestamp }}
  186. </span>
  187. <div class="clear"></div>
  188. </li>
  189. {{ end }}
  190. </ul>
  191. {{ end }}
  192. </div>
  193. {{ end }}