layout: add home, section, and page templates

diff --git a/layouts/home.html b/layouts/home.html
index 0c764256df22f8039425aa0b503bf6c20615f6bc..4eed7ad45e75aba5af1377fdcf09069d2c6dab46 100644 (file)
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -1,9 +1,20 @@
 {{ define "main" }}
-  {{ .Content }}
-  {{ range site.RegularPages }}
-    <section>
-      <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
-      {{ .Summary }}
-    </section>
-  {{ end }}
+  {{ partial "hero.html" . }}
+
+  <div class="container feed-section">
+    <div class="feed-label">Latest</div>
+
+    {{ $posts := where site.RegularPages "Type" "in" (slice "articles") }}
+    {{ $posts := sort $posts "Params.date" "desc" }}
+    {{ $latest := first 3 $posts }}
+
+    <div class="feed-grid">
+      {{ range $latest }}
+        {{ $data := dict "title" .Title "type" .Params.type "description" .Summary "date" .Date "url" .RelPermalink "image" .Params.image "featured" .Params.featured }}
+        {{ partial "post-card.html" $data }}
+      {{ end }}
+    </div>
+
+    <a href="/articles/" class="feed-cta">View all articles</a>
+  </div>
 {{ end }}

diff --git a/layouts/page.html b/layouts/page.html
index 7e286c80218e935af6181f62bdcc83f5fd9b197f..09cf39fcd35457aa5e02f27d1f72ad6b9e72bb3e 100644 (file)
--- a/layouts/page.html
+++ b/layouts/page.html
@@ -1,10 +1,36 @@
 {{ define "main" }}
-  <h1>{{ .Title }}</h1>
+  <article class="page-page">
+    <div class="container-narrow">
+      <h1>{{ .Title }}</h1>
+      <div class="post-card-meta" style="margin-bottom: 2rem;">
+        <span>{{ dateFormat "Jan 2, 2006" .Date }}</span>
+        {{ if .Params.type }}<span class="post-type-badge {{ .Params.type }}">{{ .Params.type }}</span>{{ end }}
+      </div>
 
-  {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
-  {{ $dateHuman := .Date | time.Format ":date_long" }}
-  <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
+      <div class="post-content">
+        {{ .Content }}
+      </div>
+    </div>
+  </article>
 
-  {{ .Content }}
-  {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
+  {{ if eq .Type "is" }}
+    <div class="container-narrow" style="margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border);">
+      <nav class="page-nav">
+        <h3 style="margin-bottom: 1rem;">Other pages</h3>
+        <ul style="list-style: none; margin: 0;">
+          {{ range .Site.Sections.By }}
+            {{ if eq .Type "is" }}
+              {{ range .Pages }}
+                <li style="margin-bottom: 0.5rem;">
+                  <a href="{{ .RelPermalink }}" {{ if eq $.RelPermalink .RelPermalink }}class="active"{{ end }}>
+                    {{ .Title }}
+                  </a>
+                </li>
+              {{ end }}
+            {{ end }}
+          {{ end }}
+        </ul>
+      </nav>
+    </div>
+  {{ end }}
 {{ end }}

diff --git a/layouts/section.html b/layouts/section.html
index 748f2f55938c1360aafdf30a3278ffe443c2031d..4de7628fa8841feca4ff6114b6c74c50a6c7b4f7 100644 (file)
--- a/layouts/section.html
+++ b/layouts/section.html
@@ -1,10 +1,29 @@
 {{ define "main" }}
-  <h1>{{ .Title }}</h1>
-  {{ .Content }}
-  {{ range .Pages }}
-    <section>
-      <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
-      {{ .Summary }}
-    </section>
+  <div class="container">
+    <h1>{{ .Title }}</h1>
+
+    {{ if eq .Type "articles" }}
+      <div class="filter-bar">
+        <button class="filter-btn active" data-filter="all">All</button>
+        <button class="filter-btn" data-filter="tech">Tech</button>
+        <button class="filter-btn" data-filter="life">Life</button>
+        <button class="filter-btn" data-filter="quote">Quote</button>
+        <button class="filter-btn" data-filter="link">Link</button>
+        <button class="filter-btn" data-filter="photo">Photo</button>
+      </div>
+
+      <div class="feed-list" id="articles-feed">
+        {{ range .Pages.ByDate.Reverse }}
+          {{ $data := dict "title" .Title "type" .Params.type "description" .Summary "date" .Date "url" .RelPermalink "image" .Params.image "featured" false }}
+          {{ partial "post-card.html" $data }}
+        {{ end }}
+      </div>
+    {{ else }}
+      {{ .Content }}
+    {{ end }}
+  </div>
+
+  {{ if eq .Type "articles" }}
+    <script defer src="{{ resources.Get "js/filters.js" | fingerprint | .RelPermalink }}"></script>
   {{ end }}
 {{ end }}