revamp projects, continue editing and add precommit hook for lastmod frontmatter

layouts/projects/list.html

@@ -0,0 +1,62 @@
+{{ define "main" }}
+<style>
+  .status-badge {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-left: 0.5rem;
+    vertical-align: middle;
+  }
+
+  .status-active {
+    background-color: rgba(76, 175, 80, 0.15);
+    color: #4caf50;
+    border: 1px solid #4caf50;
+  }
+
+  .status-inactive {
+    background-color: rgba(158, 158, 158, 0.15);
+    color: #9e9e9e;
+    border: 1px solid #9e9e9e;
+  }
+
+  .project-date {
+    font-size: 0.85rem;
+    color: var(--light-secondary-color);
+    margin-left: 0.5rem;
+  }
+</style>
+
+<div class="container">
+  <h1 class="page-title">{{ .Title }}</h1>
+
+  {{ .Content }}
+
+  <div class="posts-list">
+    {{ range .Pages }}
+    <article class="post-entry">
+      <header class="entry-header">
+        <h3 class="entry-title">
+          <a href="{{ .Permalink }}" rel="bookmark">{{ .Title }}</a>
+          {{ if .Params.active }}
+          <span class="status-badge status-active">Active</span>
+          {{ else }}
+          <span class="status-badge status-inactive">Inactive</span>
+          {{ end }}
+          <span class="project-date">Updated {{ .Lastmod.Format "Jan 2, 2006" }}</span>
+        </h3>
+      </header>
+      {{ with .Description }}
+      <div class="entry-summary">{{ . }}</div>
+      {{ end }}
+    </article>
+    {{ end }}
+  </div>
+
+  {{ if eq (len .Pages) 0 }}
+  <p>No projects yet.</p>
+  {{ end }}
+</div>
+{{ end }}

layouts/projects/single.html

@@ -0,0 +1,122 @@
+{{ define "main" }}
+
+<style>
+  .status-badge {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-left: 0.5rem;
+    vertical-align: middle;
+  }
+
+  .status-active {
+    background-color: rgba(76, 175, 80, 0.15);
+    color: #4caf50;
+    border: 1px solid #4caf50;
+  }
+
+  .status-inactive {
+    background-color: rgba(158, 158, 158, 0.15);
+    color: #9e9e9e;
+    border: 1px solid #9e9e9e;
+  }
+
+  .post-image {
+    display: flex;
+    justify-content: center;
+    margin: 1.5rem 0;
+  }
+
+  .post-image img {
+    height: auto;
+    border-radius: 8px;
+    border: 1.5px solid var(--light-secondary-color);
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px;
+    object-fit: cover;
+  }
+
+  .image-caption p {
+    display: flex;
+    justify-content: center;
+  }
+
+  @media (max-width: 480px) {
+    .post-image img {
+      width: 100%;
+      max-width: 300px;
+    }
+  }
+
+  @media (min-width: 481px) and (max-width: 768px) {
+    .post-image img {
+      width: 80%;
+      max-width: 400px;
+    }
+  }
+
+  @media (min-width: 769px) {
+    .post-image img {
+      width: 60%;
+      max-width: 500px;
+    }
+  }
+</style>
+
+<div class="post container">
+  <div class="post-header-section">
+    <h1>
+      {{ .Title | markdownify }}
+      {{ if .Params.active }}
+      <span class="status-badge status-active">Active</span>
+      {{ else }}
+      <span class="status-badge status-inactive">Inactive</span>
+      {{ end }}
+    </h1>
+
+    {{ with .Description }}
+    <small role="doc-subtitle">{{ . }}</small>
+    {{ end }}
+
+    <p class="post-date">
+      Started {{ dateFormat (or .Site.Params.dateFormat "January 2, 2006") .Date }}
+      {{ if lt .Date .Lastmod }} | Updated {{ dateFormat (or .Site.Params.dateFormat "January 2, 2006") .Lastmod }}{{ end }}
+    </p>
+
+    <ul class="post-tags">
+      {{ range .Params.Tags }}
+      <li class="post-tag"><a href="{{ "tags/" | absLangURL }}{{ . | urlize }}">{{ . }}</a></li>
+      {{ end }}
+    </ul>
+  </div>
+
+  {{ if .Params.image }}
+  <div class="post-image">
+    <img src="{{ .Params.image | absURL }}" alt="{{ .Params.image_alt | default .Title }}">
+  </div>
+  <div class="image-caption">
+    <p>{{ .Params.image_caption }}</p>
+  </div>
+  {{ end }}
+
+  <div class="post-content">
+    {{ .Content }}
+  </div>
+
+  <div class="prev-next">
+    {{ if eq .Site.Params.TogglePreviousAndNextButtons "true" }}
+    {{ if or .PrevInSection .NextInSection }}
+    {{ partial "prev-next.html" . }}
+    {{ end }}
+    {{ end }}
+  </div>
+
+  {{ if .Site.Params.ShowBackToTopButton }}
+  {{ partial "back-to-top.html" . }}
+  {{ end }}
+</div>
+
+{{- partial "toc.html" . -}}
+
+{{ end }}