layout: add a navbar

I want to differentiate blog's entries from more general notes. For this, we create two menu entries, and add a navbar at the top. The nav bar let us select between the two kind of articles: blogs or notes. For now we have a single blog entry, and no notes. The page to list entries is simplified: we use the same layout for all lists (tags, notes, blogs). The CSS is updated to support the new nav bar.
author: Franck Cuny <franck@fcuny.net> 2021-04-22 12:44:27 -0700
committer: Franck Cuny <franck@fcuny.net> 2021-04-22 12:44:27 -0700
commit: ef3fa6ba26fcf11fdd2325764147f56c90b94a7b (patch)
tree: 4da9b40592d68d96f24c188cded6853c0f8b77bd
parent: toml: re-configure markup (diff)
download: infra-ef3fa6ba26fcf11fdd2325764147f56c90b94a7b.tar.gz
9 files changed, 75 insertions, 38 deletions
diff --git a/users/fcuny/blog/config.toml b/users/fcuny/blog/config.toml
index 31f75af..6100ba5 100644
--- a/users/fcuny/blog/config.toml
+++ b/users/fcuny/blog/config.toml
@@ -1,6 +1,6 @@
 baseURL = "http://fcuny.net/"
 languageCode = "en-us"
-title = "Franck Cuny's Website"
+title = "Franck's rambling"
 publishDir = "docs"
 enableGitInfo = true
 
@@ -11,9 +11,23 @@ enableGitInfo = true
   tag = "tags"
 
 [permalinks]
-  articles = "/:section/:slug/"
+  blog = "/blog/:slug/"
+  notes = "/notes/:slug/"
   tags = "/tags/:slug/"
 
+[menu]
+  [[menu.main]]
+    identifier = "articles"
+    name = "blog"
+    title = "articles"
+    url = "/blog/"
+
+  [[menu.main]]
+    identifier = "notes"
+    name = "notes"
+    title = "notes"
+    url = "/notes/"
+
 [markup]
   [markup.tableOfContents]
     startLevel = 1
diff --git a/users/fcuny/blog/content/notes/google-doc-failure.org b/users/fcuny/blog/content/blog/google-doc-failure.org
index b4d449d..b4d449d 100644
--- a/users/fcuny/blog/content/notes/google-doc-failure.org
+++ b/users/fcuny/blog/content/blog/google-doc-failure.org
diff --git a/users/fcuny/blog/layouts/_default/baseof.html b/users/fcuny/blog/layouts/_default/baseof.html
index d9ca51a..3fd7011 100644
--- a/users/fcuny/blog/layouts/_default/baseof.html
+++ b/users/fcuny/blog/layouts/_default/baseof.html
@@ -3,6 +3,7 @@
   {{ partial "head.html" . }}
   <body>
     <div class="main">
+      {{- partial "header.html" . -}}
       <main>
        {{ block "main" . }}{{ end }}
       </main>
diff --git a/users/fcuny/blog/layouts/_default/list.html b/users/fcuny/blog/layouts/_default/list.html
index 3423cb6..2b7d98a 100644
--- a/users/fcuny/blog/layouts/_default/list.html
+++ b/users/fcuny/blog/layouts/_default/list.html
@@ -1,10 +1,6 @@
 {{ define "main" }}
 
-<h1>{{ .Title }}</h1>
-{{ range .Pages.ByPublishDate.Reverse }}
-<p>
-  <a class="font-125" href="{{ .RelPermalink }}">{{ .Title }}</a>
-</p>
-{{ end }}
+  {{ $pgs := where .Data.Pages "Params.hidden" "ne" "true" }}
+  {{ partial "postlist" $pgs }}
 
 {{ end }}
diff --git a/users/fcuny/blog/layouts/_default/single.html b/users/fcuny/blog/layouts/_default/single.html
index 0ab5e35..356f344 100644
--- a/users/fcuny/blog/layouts/_default/single.html
+++ b/users/fcuny/blog/layouts/_default/single.html
@@ -1,7 +1,5 @@
 {{ define "main" }}
 
-<p><a href="/">&larr; Back to Franck's homepage</a></p>
-
 <h1>{{ .Title }}</h1>
 
 <div class="meta">
diff --git a/users/fcuny/blog/layouts/index.html b/users/fcuny/blog/layouts/index.html
index 450444b..f7581ff 100644
--- a/users/fcuny/blog/layouts/index.html
+++ b/users/fcuny/blog/layouts/index.html
@@ -11,12 +11,4 @@
 
   <p>I'm currently working as a <a href="https://twitter.com/twittersre">Site Reliability Engineer</a> at Twitter, on the Compute team.</p>
 
-  <h2>Notes</h2>
-  {{ $section := "notes" }}
-  <ul>
-    {{ range (where .Site.RegularPages.ByTitle "Section" $section ) }}
-    <li><a href="{{ .Permalink }}">{{ .Params.title | humanize | title }} ({{ .Date.Format "2006-01-02" }})</a></li>
-    {{ end }}
-  </ul>
-
 {{ end }}
diff --git a/users/fcuny/blog/layouts/partials/header.html b/users/fcuny/blog/layouts/partials/header.html
new file mode 100644
index 0000000..f918823
--- /dev/null
+++ b/users/fcuny/blog/layouts/partials/header.html
@@ -0,0 +1,15 @@
+<header>
+  <nav>
+    <a href="{{ .Site.Home.Permalink }}">{{ .Site.Home.Title }}</a>
+    <ul>
+      {{ $currentPage := . }}
+      {{ range .Site.Menus.main }}
+      <li>
+        <a class='{{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}menu-active{{ end }}' href="{{ absURL .URL }}">
+          {{ .Title }}
+        </a>
+      </li>
+      {{ end }}
+    </ul>
+  </nav>
+</header>
diff --git a/users/fcuny/blog/layouts/partials/postlist.html b/users/fcuny/blog/layouts/partials/postlist.html
index 3695d82..28fd9b2 100644
--- a/users/fcuny/blog/layouts/partials/postlist.html
+++ b/users/fcuny/blog/layouts/partials/postlist.html
@@ -1,28 +1,10 @@
-<p><a href="/">&larr; Back to Franck's homepage</a></p>
-
-{{ range .GroupByDate "2006-Jan" }}
+{{ range .GroupByDate "2006" }}
   <h2>{{ .Key }}</h2>
   <ul>
     {{ range .Pages.ByDate }}
     <li>
       <div>
         <a href="{{ .Permalink }}"><h3>{{ .Title }}</h3></a>
-	    {{ if .Params.tags }}
-	    <div>
-	      Tags:
-	      {{ range $idx, $tag := .Params.tags }}
-	      <span class="tags"><a href="/tags/{{ $tag | urlize }}/">{{ $tag }}</a></span>
-	      {{ end }}
-	    </div>
-	    {{ else }}
-	    <div></div>
-	    {{ end }}
-      </div>
-      <div>
-	    <p>
-	      {{ .Summary }}
-	      <span><a href="{{ .Permalink }}">Read more →</a></span>
-	    </p>
       </div>
     </li>
     {{ end }}
diff --git a/users/fcuny/blog/static/css/custom.css b/users/fcuny/blog/static/css/custom.css
index 7592e8e..f363bee 100644
--- a/users/fcuny/blog/static/css/custom.css
+++ b/users/fcuny/blog/static/css/custom.css
@@ -38,7 +38,7 @@ h2 {
 }
 
 span.published, span.updated {
-    display: block;
+    display: center;
     font-style: oblique;
 }
 
@@ -92,3 +92,42 @@ blockquote {
     padding-left: 5px;
     font-style: italic;
 }
+
+nav {
+    display: flex;
+    flex: 2 0px;
+    justify-content: flex-end;
+    padding-left: 1em;
+    margin: 0 auto;
+    line-height: 0.2rem;
+}
+
+nav ul {
+    display: flex;
+    list-style-type: none;
+    margin: 0
+}
+
+nav a {
+    padding: 1em;
+    display: inline-block;
+    color: black;
+    font-family: sans-serif;
+    text-decoration: none;
+    transition: all 75ms ease-in;
+}
+
+nav a:hover {
+    color: #fff;
+    background-color: #007d9c;
+}
+
+nav a.menu-active:hover {
+    color: #fff;
+    background-color: #007d9c;
+}
+
+nav a.menu-active {
+    color: #007d9c;
+}
+
author	Franck Cuny <franck@fcuny.net>	2021-04-22 12:44:27 -0700
committer	Franck Cuny <franck@fcuny.net>	2021-04-22 12:44:27 -0700
commit	ef3fa6ba26fcf11fdd2325764147f56c90b94a7b (patch)
tree	4da9b40592d68d96f24c188cded6853c0f8b77bd
parent	toml: re-configure markup (diff)
download	infra-ef3fa6ba26fcf11fdd2325764147f56c90b94a7b.tar.gz