diff options
| 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 | fedc092d3229ac87b11f8f22b7d7e170e9bc2e88 (patch) | |
| tree | 2aef7e597b280e864d64ae0dff01c796b26683d8 | |
| parent | toml: re-configure markup (diff) | |
| download | fcuny.net-fedc092d3229ac87b11f8f22b7d7e170e9bc2e88.tar.gz | |
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.
| -rw-r--r-- | config.toml | 18 | ||||
| -rw-r--r-- | content/blog/google-doc-failure.org (renamed from content/notes/google-doc-failure.org) | 0 | ||||
| -rw-r--r-- | layouts/_default/baseof.html | 1 | ||||
| -rw-r--r-- | layouts/_default/list.html | 8 | ||||
| -rw-r--r-- | layouts/_default/single.html | 2 | ||||
| -rw-r--r-- | layouts/index.html | 8 | ||||
| -rw-r--r-- | layouts/partials/header.html | 15 | ||||
| -rw-r--r-- | layouts/partials/postlist.html | 20 | ||||
| -rw-r--r-- | static/css/custom.css | 41 |
9 files changed, 75 insertions, 38 deletions
diff --git a/config.toml b/config.toml index 31f75af..6100ba5 100644 --- a/config.toml +++ b/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/content/notes/google-doc-failure.org b/content/blog/google-doc-failure.org index b4d449d..b4d449d 100644 --- a/content/notes/google-doc-failure.org +++ b/content/blog/google-doc-failure.org diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index d9ca51a..3fd7011 100644 --- a/layouts/_default/baseof.html +++ b/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/layouts/_default/list.html b/layouts/_default/list.html index 3423cb6..2b7d98a 100644 --- a/layouts/_default/list.html +++ b/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/layouts/_default/single.html b/layouts/_default/single.html index 0ab5e35..356f344 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,7 +1,5 @@ {{ define "main" }} -<p><a href="/">← Back to Franck's homepage</a></p> - <h1>{{ .Title }}</h1> <div class="meta"> diff --git a/layouts/index.html b/layouts/index.html index 450444b..f7581ff 100644 --- a/layouts/index.html +++ b/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/layouts/partials/header.html b/layouts/partials/header.html new file mode 100644 index 0000000..f918823 --- /dev/null +++ b/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/layouts/partials/postlist.html b/layouts/partials/postlist.html index 3695d82..28fd9b2 100644 --- a/layouts/partials/postlist.html +++ b/layouts/partials/postlist.html @@ -1,28 +1,10 @@ -<p><a href="/">← 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/static/css/custom.css b/static/css/custom.css index 7592e8e..f363bee 100644 --- a/static/css/custom.css +++ b/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; +} + |