Refactor homepage (#1)

* Refactor homepage

* Improve rendering of front page

- Navbar always shows
- Posts display authors in post list

* Render author/date for posts.

Still needs to be styled. Still needs to handle multiple authors.

* Make author field a list

* Better style post meta-data

* Render tags

* Render RSS for tags and link to them

* Update theme

* Update icons

Co-authored-by: Stefan van der Walt <stefanv@berkeley.edu>

Makefile

@@ -1,29 +1,21 @@
-.PHONY: help themes html serve clean
+.PHONY: help prepare html serve clean
 .DEFAULT_GOAL := help
 
-help:
-	@grep ": ##" Makefile | grep -v grep | tr -d '#'
+# Add help text after each target name starting with '\#\#'
+help:   ## show this help
+	@echo -e "Help for this makefile\n"
+	@echo "Possible commands are:"
+	@grep -h "##" $(MAKEFILE_LIST) | grep -v grep | sed -e 's/\(.*\):.*##\(.*\)/    \1: \2/'
 
-themes/scientific-python-hugo-theme:
-	@if [ ! -d "$<" ]; then \
-	  echo "*** ERROR: missing theme" ; \
-	  echo ; \
-	  echo "It looks as though you are missing the themes directory."; \
-	  echo "You need to add the scientific-python-hugo-theme as a submodule."; \
-	  echo ; \
-	  echo "Please see https://theme.scientific-python.org/getstarted/"; \
-	  echo ; \
-	  exit 1; \
-	fi
-
-themes: themes/scientific-python-hugo-theme
+prepare:
+	git submodule update --init
 
 html: ## Build site in `./public`
-html: themes
+html: prepare
 	hugo
 
 serve: ## Serve site, typically on http://localhost:1313
-serve: themes
+serve: prepare
 	@hugo --i18n-warnings server
 
 clean: ## Remove built files

assets/css/custom.css

@@ -0,0 +1,20 @@
+.post-author:not(:first-child):before {
+  content: "";
+}
+
+.post-date {
+  padding-left: 0.5rem;
+}
+
+.post-tag {
+  padding-left: 0.3rem;
+}
+
+.post-author:not(:first-child) {
+  padding-left: 0.5rem;
+}
+
+.post-meta {
+  color: var(--colorSecondaryDark);
+  padding-bottom: 1rem;
+}

config.yaml

@@ -3,7 +3,8 @@ languageCode: "en-us"
 title: "Scientific Python blog"
 theme: ["hugo-atom-feed", "scientific-python-hugo-theme"]
 relativeURLs: true
-disableKinds: ["term", "taxonomy", "RSS"]
+disableKinds: ["RSS", "taxonomy"]
+ignoreErrors: ["error-disable-taxonomy"]
 
 markup:
   highlight:
@@ -17,21 +18,21 @@ outputFormats:
 
 outputs:
   home: ["HTML", "ATOM"]
+  term: ["HTML", "ATOM"]
+
+permalinks:
+  # mimic pelican permalink configuration
+  /: "/:year/:month/:day/:slug/"
 
 params:
   description: "Posts from the Scientific Python community"
   images:
   - /images/logo.svg
   navbarlogo:
     image: logo.svg
-    text: Scientific Python Hugo Theme
+    text: Scientific Python Blog
     link: /
-  hero:
-    title: Scientific Python Theme
-    image: logo.svg
   navbar:
-   - title: Blog
-     url: https://blog.scientific-python.org
    - title: RSS
      url: /atom.xml
    - title: About Scientific Python
@@ -42,8 +43,14 @@ params:
     logo: logo.svg
     socialmediatitle: ""
     socialmedia:
-      - link: https://github.com/scientific-python/
-        icon: github
+      - link: https://scientific-python.org
+        icon: home
+      - link: https://github.com/scientific-python/blog.scientific-python.org
+        icon: fa-brands fa-github
+      - link: https://blog.scientific-python.org/atom.xml
+        icon: fa-solid fa-square-rss
+      - link: https://discuss.scientific-python.org/
+        icon: fa-brands fa-discourse
     quicklinks:
       column2:
         links:

content/2022-02-08-test/index.md

@@ -1,6 +1,10 @@
 ---
 title: This is a test blog post
-author: Stéfan van der Walt
+author: ["Stéfan van der Walt", "Pamphile Roy"]
+date: 2022-02-25
+tags:
+    - tag1
+    - tag2
 ---
 
 Hi there, and welcome to the Scientific Python blog!

layouts/_default/term.html

@@ -0,0 +1,27 @@
+{{ define "navbar" }}
+{{ partial "navbar.html" . }}
+{{ end }}
+
+{{ define "main" }}
+<section class="content-padding flex-row">
+  <div class="content-container">
+    <h1 id="term-title">
+      Posts with
+        <a href="atom.xml">#{{ .Title }}
+          <span class="icon fas fa-rss" style="vertical-align: baseline;"></span>
+        </a>
+    </h1>
+    {{ range .Pages }}
+    <div class="post-list">
+      <article>
+        <div class="post-title">
+          <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+        </div>
+        {{ partial "post_meta.html" . }}
+        <div class="post-summary">{{ .Summary }}</div>
+      </article>
+    </div>
+    {{ end }}
+  </div>
+</section>
+{{ end }}

layouts/index.html

@@ -1,3 +1,7 @@
+{{ define "navbar" }}
+{{ partial "navbar.html" . }}
+{{ end }}
+
 {{ define "main" }}
-{{ partial "section/section.html" . }}
+{{ partial "section.html" . }}
 {{ end }}

layouts/partials/navbar.html

@@ -0,0 +1,55 @@
+{{- $title          := .Site.Params.title }}
+{{- $navbar         := .Site.Params.navbar }}
+{{- $navbarLogo     := .Site.Params.navbarlogo }}
+<nav id="nav" class="navbar is-fresh is-transparent no-shadow" role="navigation" aria-label="main navigation">
+  <div class="container is-max-widescreen">
+    <div class="navbar-brand">
+      {{- if $navbarLogo}}
+      <a id="navbar-item" class="navbar-item" href="{{ $navbarLogo.link }}">
+        <img id="navbar-logo" src="{{ printf "/images/%s" $navbarLogo.image | relURL }}" alt="{{ default (printf "%s logo" $title) $navbarLogo.altText }}">
+        <div id="navbar-logo-text">{{ default "" $navbarLogo.text }}</div>
+      </a>
+      {{- end}}
+
+      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar-menu">
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    </div>
+
+    <div id="navbar-menu" class="navbar-menu is-static">
+
+      <div class="navbar-end">
+        {{- range $navbar }}
+        {{- if .sublinks }}
+        <div id="navbar-item" class="navbar-item has-dropdown is-hoverable">
+          <a class="navbar-link">
+            {{ .title }}
+          </a>
+
+          <div class="navbar-dropdown">
+            {{- range .sublinks }}
+            <a href="{{ .url }}" id="navbar-item" class="navbar-item">
+              {{ .title }}
+            </a>
+            {{- end }}
+          </div>
+        </div>
+        {{- else if .button }}
+        <a href="{{ .url }}" id="navbar-item" class="navbar-item">
+          <span class="button signup-button rounded secondary-btn raised">
+            {{ .title }}
+          </span>
+        </a>
+        {{- else }}
+        <a href="{{ .url }}" id="navbar-item" class="navbar-item is-secondary">
+          {{ .title }}
+        </a>
+        {{- end }}
+        {{- end }}
+
+      </div>
+    </div>
+  </div>
+</nav>

layouts/partials/post_meta.html

@@ -0,0 +1,18 @@
+<div class="post-meta">
+  <span class="post-authors">
+    {{- range .Params.author -}}
+    <div class="post-author"><span style="vertical-align: bottom;" class="icon fa fa-user"></span> {{ . }}</div>
+    {{- end -}}
+  </span>
+  {{ if .Date }}
+  <span class="post-date"><span style="vertical-align: bottom;" class="icon fas fa-calendar"></span> {{.Date.Format "January 2, 2006"}}</span>
+  {{ end }}
+  {{- if .Params.tags -}}
+  <div class="post-tags">
+    <span style="vertical-align: bottom;" class="icon fas fa-tag"></span>
+    {{- range .Params.tags -}}
+    <span class="post-tag"><a href="{{ path.Join "/tags/" . | relURL }}">#{{.}}</a></span>
+    {{- end -}}
+  </div>
+  {{- end -}}
+</div>

layouts/partials/section.html

@@ -0,0 +1,13 @@
+<section class="content-padding flex-row">
+<div class="content-container">
+  {{ range .Pages }}
+  <div class="post-list">
+    <article>
+      <div class="post-title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></div>
+      {{ partial "post_meta.html" . }}
+      <div class="post-summary">{{ .Summary }}</div>
+    </article>
+  </div>
+  {{ end }}
+</div>
+</section>