Upstream blog formatting (#348)

stefanv · web-flow · commit f0bbddef36a8 · 2023-11-01T10:33:35.000-07:00
* Upstream blog formatting

* More sensical names for blog partials
diff --git a/.gitignore b/.gitignore
@@ -5,3 +5,4 @@ resources
 
 # Auto-generated
 doc/content/shortcodes.md
+public
diff --git a/doc/content/features.md b/doc/content/features.md
@@ -2,13 +2,16 @@
 title: Features
 ---
 
-## Partials
+## Hugo Layouts
 
-The following partials are meant to be overridden:
+- `_default/single.html` : Single page layout
+- `_default/section.html` : Section layout (a section typically has `_index.md` and contains other pages)
 
-- `post_meta.html`: Render meta-data under a post title.
-  We have not yet defined this template, but you can use it to add author information, date, etc.
-- `footer_actions`: This appears in the right-hand side of the footer. E.g., numpy.org uses it for mailing list subscriptions.
+Blog post layouts:
+
+- `layouts/partials/posts/post.html`: Blog post layout
+- `layouts/partials/posts/list.html`: Blog post listing layout
+- `layouts/partials/posts/tag.html`: Tag page layout
 
 ## Shortcut list
 
@@ -146,3 +149,8 @@ graph LR
     B --> D{Rhombus}
     C --> D
 ```
+
+## Creating a blog
+
+Pages that are placed under either `content/posts` or `content/blog`
+will be formatted as blog posts.
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -18,9 +18,8 @@
       {{ end }}
     {{ end -}}
 
-    <!-- Add twitter card for logo and images. You can test here:  https://cards-dev.twitter.com/validator -->
+    <!-- Add twitter card for logo and images. You can preview cards in the X compose window. -->
     {{ template "_internal/twitter_cards.html" . }}
-
   </head>
   <body>
     {{ block "navbar" . }}
@@ -39,7 +38,6 @@
     {{ end }}
 
     {{ partial "javascript.html" . -}}
-
     {{ partial "analytics.html" . -}}
   </body>
 </html>
diff --git a/layouts/_default/section.html b/layouts/_default/section.html
@@ -1,3 +1,28 @@
 {{ define "main" }}
-{{ partial "section/section.html" . }}
+<section class="section content-padding flex-row">
+  <div class="content-container">
+    {{ partial "breadcrumbs.html" . }}
+    <h1>{{ .Title }}</h1>
+    {{ if .Params.Subtitle }}
+    <h5 class="subtitle">{{ .Params.Subtitle }}</h5>
+    {{ end }}
+    {{ if .Content }}
+    {{ .Content }}
+    {{ end }}
+    {{ if (or (not .Content) .Params.listPages) }}
+    <div class="page-list">
+      <ul>
+        {{ range .Pages }}
+        {{ if .Title }}
+        <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+        {{ end }}
+        {{ end }}
+      </ul>
+    </div>
+    {{ end }}
+  </div>
+  {{ if .Content }}
+  {{ partial "shortcuts.html" . }}
+  {{ end }}
+</section>
 {{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -1,3 +1,15 @@
 {{ define "main" }}
-{{ partial "single/single.html" . }}
+<section class="article content-padding flex-row">
+  <div class="content-container">
+    {{ partial "breadcrumbs.html" . }}
+    <h1>{{ .Title }}</h1>
+    {{ if .Params.Subtitle }}
+    <h5 class="subtitle">{{ .Params.Subtitle }}</h5>
+    {{ end }}
+    <div class="article-content">
+        {{ .Content }}
+    </div>
+  </div>
+  {{ partial "shortcuts.html" . }}
+</section>
 {{ end }}
diff --git a/layouts/_default/term.html b/layouts/_default/term.html
@@ -0,0 +1,3 @@
+{{ define "main" }}
+{{ partial "posts/tag.html" . }}
+{{ end }}
diff --git a/layouts/blog/list.html b/layouts/blog/list.html
@@ -0,0 +1,3 @@
+{{ define "main" }}
+{{ partial "posts/list.html" . }}
+{{ end }}
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
@@ -0,0 +1,3 @@
+{{ define "main" }}
+{{ partial "posts/post.html" . }}
+{{ end }}
diff --git a/layouts/blog/term.html b/layouts/blog/term.html
@@ -0,0 +1,3 @@
+{{ define "main" }}
+{{ partial "posts/tag.html" . }}
+{{ end }}
diff --git a/layouts/partials/breadcrumbs.html b/layouts/partials/breadcrumbs.html
@@ -6,5 +6,5 @@
   <li class="breadcrumb-item breadcrumb-home"><a href="{{ .RelPermalink }}"><i class="fas fa-home"></i></a></li>
   {{ end }}
   {{- end }}
-<li class="breadcrumb-item"><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+  <li class="breadcrumb-item"><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
 </ul>
diff --git a/layouts/partials/post_meta.html b/layouts/partials/post_meta.html
diff --git a/layouts/partials/posts/list-with-summary.html b/layouts/partials/posts/list-with-summary.html
@@ -0,0 +1,13 @@
+{{ $posts := . }}
+
+<div class="post-list">
+  {{ range $posts }}
+  <article>
+    <div class="post-title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></div>
+    <div>
+    {{ partial "posts/meta.html" . }}
+    {{ partial "posts/summary.html" . }}
+    </div>
+  </article>
+  {{ end }}
+</div>
diff --git a/layouts/partials/posts/list-without-summary.html b/layouts/partials/posts/list-without-summary.html
@@ -0,0 +1,12 @@
+{{ $posts := . }}
+
+<div class="post-list">
+  {{ range $posts }}
+  <article>
+    <div class="post-title"><a href="{{ .RelPermalink }}">{{ .Title }}</a></div>
+    <div class="post-meta">
+      <div>{{ partial "posts/meta.html" . }}</div>
+    </div>
+  </article>
+  {{ end }}
+</div>
diff --git a/layouts/partials/posts/list.html b/layouts/partials/posts/list.html
@@ -0,0 +1,17 @@
+<section class="section content-padding flex-row">
+  <div class="content-container">
+    {{ partial "breadcrumbs.html" . }}
+    <h1>{{ .Title }}</h1>
+    {{ if .Params.Subtitle }}
+    <h5 class="subtitle">{{ .Params.Subtitle }}</h5>
+    {{ end }}
+    {{ if .Content }}
+    {{ .Content }}
+    {{ end }}
+    {{ $posts := .RegularPagesRecursive.ByPublishDate.Reverse }}
+    {{ partial "posts/list-without-summary.html" $posts }}
+  </div>
+  {{ if .Content }}
+  {{ partial "shortcuts.html" . }}
+  {{ end }}
+</section>
diff --git a/layouts/partials/posts/meta.html b/layouts/partials/posts/meta.html
@@ -0,0 +1,19 @@
+<div class="post-meta">
+  <span class="post-authors">
+    {{- range .Params.author -}}
+    <div class="post-author">{{ partial "svg-icon" "person" }} {{ . }}</div>
+    {{- end -}}
+  </span>
+  {{ if .Date }}
+  <span class="post-date">{{ partial "svg-icon" "calendar" }} {{.Date.Format "January 2, 2006"}}</span>
+  {{ end }}
+  {{- if .Params.tags -}}
+  <div class="post-tags">
+    {{ partial "svg-icon" "tag" }}
+    {{- range .Params.tags -}}
+    {{- $tag := lower . }}
+    <span class="post-tag"><a href="{{ path.Join "/tags/" $tag | relURL }}">#{{ $tag }}</a></span>
+    {{- end -}}
+  </div>
+  {{- end -}}
+</div>
diff --git a/layouts/partials/posts/post.html b/layouts/partials/posts/post.html
@@ -0,0 +1,14 @@
+<section class="post content-padding flex-row">
+  <div class="content-container">
+    {{ partial "breadcrumbs.html" . }}
+    <h1>{{ .Title }}</h1>
+    {{ if .Params.Subtitle }}
+    <h5 class="subtitle">{{ .Params.Subtitle }}</h5>
+    {{ end }}
+    <div class="post-meta">{{ partial "posts/meta.html" . }}</div>
+    <div class="post-content">
+        {{ .Content }}
+    </div>
+  </div>
+  {{ partial "shortcuts.html" . }}
+</section>
diff --git a/layouts/partials/posts/summary.html b/layouts/partials/posts/summary.html
@@ -0,0 +1,7 @@
+{{- $featuredImage := .Resources.GetMatch "featuredImage" -}}
+<div class="post-summary">
+  {{ with $featuredImage }}
+  <img src="{{ .RelPermalink }}" {{ if .Params.description }}alt="{{ .Params.description }}"{{ end }}/>
+  {{ end }}
+  {{ .Summary }}
+</div>
diff --git a/layouts/partials/posts/tag.html b/layouts/partials/posts/tag.html
@@ -0,0 +1,12 @@
+<section class="content-padding">
+  <div class="content-container">
+    {{ partial "breadcrumbs.html" . }}
+    <h1 id="term-title">
+      Posts with
+        <a href="atom.xml">#{{ .Title }}
+          <span class="icon fas fa-rss" style="vertical-align: baseline;"></span>
+        </a>
+    </h1>
+    {{ partial "posts/list-without-summary.html" .Pages }}
+  </div>
+</section>
diff --git a/layouts/partials/shortcuts.html b/layouts/partials/shortcuts.html
@@ -0,0 +1,5 @@
+<div id="shortcuts-container">
+    <div id="shortcuts">
+        <div id="shortcuts-header"><i class="fa-solid fa-list"></i> On this page</div>
+    </div>
+</div>
diff --git a/layouts/partials/single/content.html b/layouts/partials/single/content.html
diff --git a/layouts/partials/single/single.html b/layouts/partials/single/single.html
diff --git a/layouts/posts/list.html b/layouts/posts/list.html
@@ -0,0 +1,3 @@
+{{ define "main" }}
+{{ partial "posts/list.html" . }}
+{{ end }}
diff --git a/layouts/posts/single.html b/layouts/posts/single.html
@@ -0,0 +1,3 @@
+{{ define "main" }}
+{{ partial "posts/post.html" . }}
+{{ end }}
diff --git a/layouts/posts/term.html b/layouts/posts/term.html
@@ -0,0 +1,3 @@
+{{ define "main" }}
+{{ partial "posts/tag.html" . }}
+{{ end }}

Original file line number	Diff line number	Diff line change
`@@ -5,3 +5,4 @@ resources`
`5`	`5`
`6`	`6`	`# Auto-generated`
`7`	`7`	`doc/content/shortcodes.md`
	`8`	`+public`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{{ define "main" }}`
	`2`	`+{{ partial "posts/tag.html" . }}`
	`3`	`+{{ end }}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{{ define "main" }}`
	`2`	`+{{ partial "posts/list.html" . }}`
	`3`	`+{{ end }}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{{ define "main" }}`
	`2`	`+{{ partial "posts/post.html" . }}`
	`3`	`+{{ end }}`