rewrite layouts

16 files changed, 186 insertions, 0 deletions

diff --git a/layouts/partials/adaptive_details.html b/layouts/partials/adaptive_details.html
new file mode 100644
index 0000000..2180325
--- /dev/null
+++ b/layouts/partials/adaptive_details.html
@@ -0,0 +1,26 @@
+<script>
+function setDetailsOpen() {
+    const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+
+    // Adjust this value based on your preferred viewport size for default open
+    const viewportThreshold = 768;
+
+    // Get all details elements
+    const detailsElements = document.querySelectorAll('details');
+
+    // Loop through details elements and set open attribute conditionally
+    detailsElements.forEach(function(details) {
+        if (viewportWidth >= viewportThreshold) {
+            details.setAttribute('open', true);
+        } else {
+            details.removeAttribute('open');
+        }
+    });
+}
+
+// Initial call on page load
+setDetailsOpen();
+
+// Attach the function to the window resize event to handle changes dynamically
+window.addEventListener('resize', setDetailsOpen);
+</script>
diff --git a/layouts/partials/card.html b/layouts/partials/card.html
new file mode 100644
index 0000000..c451066
--- /dev/null
+++ b/layouts/partials/card.html
@@ -0,0 +1,53 @@
+{{ $cardConfig := .Scratch.Get "cardConfig" }}
+<div class="card">
+<a href="{{ .RelPermalink }}">
+    <li class="card-content">
+        <div class="card-body">
+        <h3 class="card-title">{{ .LinkTitle }}</h3>
+        <p>{{ partial "card/date.html" . }}</p>
+        {{ if $cardConfig.fullSummary }}
+            {{ partial "card/full_summary.html" . }}
+        {{ else }}
+        <p>{{ .Summary }}</p>
+        {{ end }}
+        </div>
+
+        {{ with .Resources.GetMatch .Params.thumbnail }}
+            {{ $image := .Fit "800x500" }}
+            <div>
+            <img class="card-image" src="{{ $image.RelPermalink }}" alt="{{ .Name }}">
+            </div>
+        {{ else }}
+            {{ with .Resources.GetMatch "thumbnail.*" }}
+            {{ $image := .Fit "400x400" }}
+            <div>
+            <img class="card-image" src="{{ $image.RelPermalink }}" alt="{{ $image.Name }}">
+            </div>
+            {{ end }}
+        {{ end }}
+    </li>
+</a>
+{{ if $cardConfig.showMeta }}
+    <hr>
+    {{ with .Params.github }}
+        {{ partial "links/github.html" . }}
+    {{ end }}
+    {{ with .Params.link }}
+        {{ partial "links/link.html" . }}
+    {{ end }}
+    {{ with .Params.site }}
+        {{ partial "links/site.html" . }}
+    {{ end }}
+    {{ $hasMetaAttrs := or $cardConfig.showCategories $cardConfig.showTags }}
+    {{ if $hasMetaAttrs }}
+    <div class="card-meta">
+        {{ if $cardConfig.showCategories }}
+            {{ partial "categories.html" . }}
+        {{ end }}
+        {{ if $cardConfig.showTags }}
+            {{ partial "tags.html" . }}
+        {{ end }}
+    </div>
+    {{ end }}
+{{ end }}
+</div>
diff --git a/layouts/partials/card/date.html b/layouts/partials/card/date.html
new file mode 100644
index 0000000..bcf1851
--- /dev/null
+++ b/layouts/partials/card/date.html
@@ -0,0 +1,13 @@
+{{ if .Params.start_date }}
+    {{  time.Format "January 2006" .Params.start_date }}
+    &mdash;
+    {{ if .Params.end_date }}
+        {{  time.Format "January 2006" .Params.end_date }}
+    {{ else }}
+        Present
+    {{ end }}
+{{ else }}
+    {{ if .Date }}
+    {{ .Date.Format "January 2006" }}
+    {{ end }}
+{{ end }}
diff --git a/layouts/partials/card/full_summary.html b/layouts/partials/card/full_summary.html
new file mode 100644
index 0000000..1230df6
--- /dev/null
+++ b/layouts/partials/card/full_summary.html
@@ -0,0 +1,7 @@
+<details open class="card-body">
+    <summary>{{ .Params.summary }}</summary>
+    {{ if .Params.abstract }}
+    <h4>Abstract</h4>
+    <p>{{ .Params.abstract }}</p>
+    {{ end }}
+</details>
diff --git a/layouts/partials/categories.html b/layouts/partials/categories.html
new file mode 100644
index 0000000..fa48e5b
--- /dev/null
+++ b/layouts/partials/categories.html
@@ -0,0 +1,5 @@
+{{ with .Params.categories }}
+    {{ range . }}
+      <a href="/categories/{{ . | urlize }}" class="meta-tag">{{ title . }}</a>
+    {{ end }}
+{{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
new file mode 100644
index 0000000..1057cac
--- /dev/null
+++ b/layouts/partials/footer.html
@@ -0,0 +1,2 @@
+<!-- TODO -->
+<p>&copy; {{ now.Format "2006" }} JP Appel</p>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
new file mode 100644
index 0000000..0128c2f
--- /dev/null
+++ b/layouts/partials/header.html
@@ -0,0 +1,10 @@
+<nav>
+    <h1><a href="/">JP Appel</a></h1>
+    <menu>
+        <li><a href="/projects">Projects</a></li>
+        <li><a href="/research">Research</a></li>
+        <li><a href="/utilities">Utilities</a></li>
+        <li><a href="/blog">Blog</a></li>
+    </menu>
+</nav>
+<!-- TODO -->
diff --git a/layouts/partials/katex.html b/layouts/partials/katex.html
new file mode 100644
index 0000000..e0468d2
--- /dev/null
+++ b/layouts/partials/katex.html
@@ -0,0 +1,22 @@
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">
+
+<!-- The loading of KaTeX is deferred to speed up page rendering -->
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script>
+
+<!-- To automatically render math in text elements, include the auto-render extension: -->
+<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+        renderMathInElement(document.body, {
+          // customised options
+          // • auto-render specific keys, e.g.:
+          delimiters: [
+              {left: '$$', right: '$$', display: true},
+              {left: '$', right: '$', display: false},
+              {left: '\\(', right: '\\)', display: false},
+              {left: '\\[', right: '\\]', display: true}
+          ],
+          throwOnError : false
+        });
+    });
+</script>
diff --git a/layouts/partials/links/email.html b/layouts/partials/links/email.html
new file mode 100644
index 0000000..87ddc8a
--- /dev/null
+++ b/layouts/partials/links/email.html
@@ -0,0 +1,5 @@
+<a href="mailto:jeanpierre.appel01@gmail.com" target="_blank" aria-label="email">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="logo" viewBox="0 0 16 16">
+  <path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z"/>
+</svg>
+</a>
diff --git a/layouts/partials/links/github.html b/layouts/partials/links/github.html
new file mode 100644
index 0000000..9cb2dbb
--- /dev/null
+++ b/layouts/partials/links/github.html
@@ -0,0 +1,5 @@
+<a href="{{ . }}" target="_blank" aria-label="github">
+<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg" class="logo" viewbox="0 0 98 96">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"/>
+</svg>
+</a>
diff --git a/layouts/partials/links/link.html b/layouts/partials/links/link.html
new file mode 100644
index 0000000..f45c0b9
--- /dev/null
+++ b/layouts/partials/links/link.html
@@ -0,0 +1,6 @@
+<a href="{{ . }}" target="_blank" aria-label="link">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"  class="logo" viewBox="0 0 16 16">
+  <path d="M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9c-.086 0-.17.01-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z"/>
+  <path d="M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4.02 4.02 0 0 1-.82 1H12a3 3 0 1 0 0-6z"/>
+</svg>
+</a>
diff --git a/layouts/partials/links/linkedin.html b/layouts/partials/links/linkedin.html
new file mode 100644
index 0000000..86efb09
--- /dev/null
+++ b/layouts/partials/links/linkedin.html
@@ -0,0 +1,5 @@
+<a href="https://www.linkedin.com/in/jean-pierre-appel-112447285" target="_blank" aria-label="linkedin">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" class="logo">
+  <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401m-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4"/>
+</svg>
+</a>
diff --git a/layouts/partials/links/site.html b/layouts/partials/links/site.html
new file mode 100644
index 0000000..58787ad
--- /dev/null
+++ b/layouts/partials/links/site.html
@@ -0,0 +1,5 @@
+<a href="{{ . }}" target="_blank" aria-label="website">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="logo" viewBox="0 0 16 16">
+    <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472M3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933M8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z"/>
+</svg>
+</a>
diff --git a/layouts/partials/meta-tag_nav.html b/layouts/partials/meta-tag_nav.html
new file mode 100644
index 0000000..8e68c5c
--- /dev/null
+++ b/layouts/partials/meta-tag_nav.html
@@ -0,0 +1,13 @@
+<div class="links-container section-nav">
+{{ with .PrevInSection }}
+    <a href="{{ .RelPermalink }}" class="prev">Previous: {{ .Title }}</a>
+{{ end }}
+{{ with .NextInSection }}
+    <a href="{{ .RelPermalink }}" class="next">Next: {{ .Title }}</a>
+{{ end }}
+</div>
+<div class="links-container">
+    <a href="/{{ .Section }}" class="meta-tag">{{ title .Section }}</a>
+    {{ partial "categories.html" . }}
+    {{ partial "tags.html" . }}
+</div>
diff --git a/layouts/partials/section_preview.html b/layouts/partials/section_preview.html
new file mode 100644
index 0000000..c973b06
--- /dev/null
+++ b/layouts/partials/section_preview.html
@@ -0,0 +1,4 @@
+<li>
+    <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+    <p>{{ .Summary }}</p>
+</li>
diff --git a/layouts/partials/tags.html b/layouts/partials/tags.html
new file mode 100644
index 0000000..9ca38af
--- /dev/null
+++ b/layouts/partials/tags.html
@@ -0,0 +1,5 @@
+{{ with .Params.tags }}
+    {{ range . }}
+      <a href="/tags/{{ . | urlize }}" class="meta-tag">{{ title . }}</a>
+    {{ end }}
+{{ end }}