Add breadcrumbs and cleanup writeup ui

2 days ago · e326ae01d7
parent 0576d99b9d
commit e326ae01d7
17 changed files with 157 additions and 86 deletions
--- a/content/writeups/holiday-hack-challenge/2024/_index.md
+++ b/content/writeups/holiday-hack-challenge/2024/_index.md
@ -1,6 +1,7 @@
 +++
 author = "Maik de Kruif"
 title = "SANS Holiday Hack Challenge 2024"
+breadcrumb = "2024"
 description = "A collection of my writeups for the 2024 edition of the SANS Holiday Hack Challenge (HHC). HHC is a free series of fun, quality, hands-on cybersecurity challenges."
 +++

--- a/content/writeups/holiday-hack-challenge/2024/prologue/_index.md
+++ b/content/writeups/holiday-hack-challenge/2024/prologue/_index.md
@ -1,6 +1,7 @@
 +++
 author = "Maik de Kruif"
-title = "SANS Holiday Hack Challenge 2024"
+title = "Prologue - SANS HHC 2024"
+breadcrumb = "Prologue"
 description = "A collection of my writeups for the 2024 edition of the SANS Holiday Hack Challenge (HHC). HHC is a free series of fun, quality, hands-on cybersecurity challenges."
 +++

--- a/content/writeups/holiday-hack-challenge/2024/prologue/elf-minder.md
+++ b/content/writeups/holiday-hack-challenge/2024/prologue/elf-minder.md
@ -3,7 +3,7 @@ author = "Maik de Kruif"
 title = "Elf Minder"
 subtitle = "Prologue - SANS Holiday Hack Challenge 2024"
 date = 2024-11-21T15:18:53+01:00
-description = ""
+description = "On to our second game of the Holiday Hack Challenge. This time we'll have to find some routes."
 cover = "img/writeups/holiday-hack-challenge/2024/prologue/elf-minder/cover.png"
 tags = [
    "Holiday Hack Challenge",
--- a/themes/maik-blog/assets/js/main.js
+++ b/themes/maik-blog/assets/js/main.js
@ -1,6 +1,6 @@
 window.addEventListener("load", () => {
    for (let figure of document.getElementsByTagName("figure")) {
-        if (figure.classList.contains("post-cover"))
+        if (figure.classList.contains("post-cover") || figure.classList.contains("portfolio-cover"))
            continue

        figure.addEventListener("click", () => {
--- a/themes/maik-blog/assets/scss/_main.scss
+++ b/themes/maik-blog/assets/scss/_main.scss
@ -225,7 +225,7 @@ figure {
    justify-content: center;
    flex-direction: column;
    background-color: #212020ec;
-    z-index: 100;
+    z-index: 10000;

    figcaption {
      color: #ddd3c6;
@ -460,3 +460,7 @@ table {
  width: 1em;
  height: 1em;
 }
+
+.nostyle {
+  text-decoration: none;
+}
--- a/themes/maik-blog/assets/scss/_masonry.scss
+++ b/themes/maik-blog/assets/scss/_masonry.scss
@ -1,10 +1,15 @@
 .masonry {
  display: grid;
+  margin-top: 20px;
  grid-gap: 20px 90px;
  grid-template-columns: repeat(2, minmax(250px, 1fr));
  // grid-auto-rows: 20px; // Set by JavaScript
  // margin-bottom: calc(4 * 20px); // Set by JavaScript

+  > * {
+    margin: 0;
+  }
+
  @media #{$media-size-medium} {
    grid-template-columns: 1fr;
  }
--- a/themes/maik-blog/assets/scss/_portfolio.scss
+++ b/themes/maik-blog/assets/scss/_portfolio.scss
@ -58,22 +58,11 @@
    > * {
      margin-right: 8px;
    }
-
-    // display: flex;
-    // flex-direction: row;
-    // align-items: center;
-    // font-size: 0.9em;
-    // gap: 10px;
-
-
-    // > * {
-    //   margin: 0;
-    // }
  }

  &-cover {
    border-radius: 8px;
-    margin: 40px -50px;
+    margin: 30px -50px;
    width: 1060px;
    max-width: 1060px;

--- a/themes/maik-blog/assets/scss/_post.scss
+++ b/themes/maik-blog/assets/scss/_post.scss
@ -38,9 +38,21 @@
    @media #{$media-size-phone} {
      font-size: 1.6rem;
    }
+  }

-    a {
-      text-decoration: none;
+  &-breadcrumbs {
+    font-size: 1.15rem;
+    margin: 10px 0 5px;
+
+    @media #{$media-size-phone} {
+      font-size: 0.9rem;
+    }
+  }
+
+  &-description {
+    font-size: 1.15rem;
+    @media #{$media-size-phone} {
+      font-size: 1.075rem;
    }
  }

@ -61,9 +73,10 @@

  &-cover {
    border-radius: 8px;
-    margin: 40px -50px;
-    width: 1060px;
-    max-width: 1060px;
+    margin: 30px -5.20%;
+    width: 110%;
+    max-width: 110%;
+    text-decoration: none;

    @media #{$media-size-medium} {
      max-width: 860px;
@ -71,7 +84,7 @@

    @media #{$media-size-tablet} {
      margin: 20px 0;
-      width: 100%;
+      width: 100% !important;
    }

    img {
--- a/themes/maik-blog/assets/scss/_posts.scss
+++ b/themes/maik-blog/assets/scss/_posts.scss
@ -38,27 +38,23 @@
    list-style: none;
  }

-  .post {
-    &.masonry-item {
-      .post-cover {
-        width: 115%;
-        margin: 40px -30px;
+  &-breadcrumbs {
+    margin: 0 0 -25px;

-        img {
-          max-height: 20rem;
-          margin: 0 auto;
-          object-fit: contain;
-        }
+    @media #{$media-size-phone} {
+      font-size: 0.9rem;
+      margin: 0 0 -15px;
    }
  }

+  .post {
    &-title {
      font-size: 1.9rem;
      margin: 5px 0 5px 0;
    }

    &-subtitle {
-      font-size: 1.2rem;
+      font-size: 1.1rem;
      margin: 5px 0 10px 0;
      font-weight: 600;
    }
@ -91,5 +87,15 @@
      margin-left: 1em;
      @include dimmed;
    }
+
+    &-cover {
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
+
+    &-content {
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
  }
 }
--- a/themes/maik-blog/assets/scss/_variables.scss
+++ b/themes/maik-blog/assets/scss/_variables.scss
@ -17,6 +17,7 @@ $dark-border-color: #4a4b50;
 $media-size-phone: "(max-width: 684px)";
 $media-size-tablet: "(max-width: 900px)";
 $media-size-medium: "(max-width: 1200px)";
+$media-size-medium-min: "(min-width: 1200px)";

 /* variables for js, must be the same as these in @custom-media queries */
 :root {
--- a/themes/maik-blog/layouts/_default/list.html
+++ b/themes/maik-blog/layouts/_default/list.html
@ -2,6 +2,8 @@
 {{ $paginator := .Paginate .Data.Pages }}

 <main class="posts">
+    <p class="posts-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">" "min" 1) }}</p>
+
    <h1>{{ .Title }}</h1>

    {{- if and .Content (not .Paginator.HasPrev) }}
@ -43,6 +45,7 @@
            {{- end }}

            {{- if .Params.Cover }}
+            <a href="{{ .Permalink }}" class="nostyle">
            <figure class="post-cover">
                {{- partial "image.html" (dict "path" .Params.Cover "alt" (.Title | plainify)) }}

@ -50,6 +53,7 @@
                <figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>
                {{- end }}
            </figure>
+            </a>
            {{- end }}

            <div class="post-content">
--- a/themes/maik-blog/layouts/_default/single.html
+++ b/themes/maik-blog/layouts/_default/single.html
@ -9,7 +9,11 @@
        <circle cx="12" cy="12" r="10"></circle>
        <polyline points="12 6 12 12 16 14"></polyline>
      </svg>
-      {{ i18n "readingTime" .Page.ReadingTime }}
+      {{- $readingTime := .Page.ReadingTime }}
+      {{- if eq .Type "writeups" }}
+      {{- $readingTime = mul 1.5 .Page.ReadingTime | int }}
+      {{- end }}
+      {{ i18n "readingTime" $readingTime }}

      {{- if .IsTranslated }} | {{ i18n "postAvailable" }}
      {{- range .Translations }}
@ -21,11 +25,13 @@
  </div>

  <article>
+    <p class="post-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">" "min" 1) }}</p>
+
    <h1 class="post-title">
      <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
    </h1>
-    {{- with .Params.Subtitle }}
-    <p class="post-subtitle">{{ . | markdownify }}</p>
+    {{- with .Params.Description }}
+    <p class="post-description">{{ . | markdownify }}</p>
    {{- end }}

    {{- if .Params.Cover }}
--- a/themes/maik-blog/layouts/partials/breadcrumbs.html
+++ b/themes/maik-blog/layouts/partials/breadcrumbs.html
@ -0,0 +1,26 @@
+{{- $breadcrumbs := slice }}
+{{- $path := .page.RelPermalink }}
+{{- $path = trim $path "/" }}
+{{- $currentPath := "" }}
+{{- range split $path "/" }}
+{{- $currentPath = printf "%s/%s" $currentPath . }}
+{{- $page := $.page.GetPage $currentPath }}
+{{- if ne (trim $currentPath "/") $path }}
+{{- $title := $page.Title }}
+{{- with $page.Params.breadcrumb }}
+{{- $title = . }}
+{{- end }}
+{{- $breadcrumbs = $breadcrumbs | append (dict "name" $title "url" $page.Permalink) }}
+{{- end }}
+{{- end }}
+{{- $breadcrumbs = after (int .page.IsPage) $breadcrumbs}}
+{{- if ne .page.Type "page"}}
+{{- if lt (default 0 .min) (len $breadcrumbs) }}
+{{- range $index, $breadcrumb := $breadcrumbs }}
+<a href="{{ $breadcrumb.url }}">{{ $breadcrumb.name }}</a>{{ if ne $index (sub (len $breadcrumbs) 1) }}<span> > </span>{{ end }}
+{{- end }}
+{{- if and $breadcrumbs .end }}
+{{ .end }}
+{{- end }}
+{{- end }}
+{{- end }}
--- a/themes/maik-blog/layouts/partials/seo.html
+++ b/themes/maik-blog/layouts/partials/seo.html
@ -21,6 +21,9 @@
 {{- $breadcrumbs = $breadcrumbs | append (dict "name" "Not Found" "url" (printf "%s%s" $.Site.BaseURL (strings.TrimLeft "/" $currentPath))) }}
 {{- else }}
 {{- $title := $page.Title }}
+{{- with $page.Params.breadcrumb }}
+{{- $title = . }}
+{{- end }}
 {{- if eq (trim $currentPath "/") $path }}
 {{- $breadcrumbs = $breadcrumbs | append (dict "name" $visiblePage.Title "url" $visiblePage.Permalink) }}
 {{- else }}
--- a/themes/maik-blog/layouts/portfolio/list.html
+++ b/themes/maik-blog/layouts/portfolio/list.html
@ -1,6 +1,8 @@
 {{ define "main" }}

 <main class="portfolios">
+    <p class="posts-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">") }}</p>
+
    <h1>Portfolio</h1>

    {{- if and .Content (not .Paginator.HasPrev) }}
--- a/themes/maik-blog/layouts/portfolio/single.html
+++ b/themes/maik-blog/layouts/portfolio/single.html
@ -1,6 +1,5 @@
 {{ define "main" }}
 <main class="portfolio">
-
  <div class="portfolio-info">
    <p>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
@ -21,6 +20,8 @@
  </div>

  <article>
+    <p class="post-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">" "min" 1) }}</p>
+
    <h1 class="portfolio-title">
      <a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
    </h1>
--- a/themes/maik-blog/layouts/writeups/list.html
+++ b/themes/maik-blog/layouts/writeups/list.html
@ -2,6 +2,8 @@
 {{ $paginator := (.Paginate .RegularPagesRecursive) }}

 <main class="posts">
+    <p class="posts-breadcrumbs">{{ partial "breadcrumbs.html" (dict "page" . "end" ">") }}</p>
+
    <h1>{{ .Title }}</h1>

    {{- if and .Content (not .Paginator.HasPrev) }}
@ -14,12 +16,18 @@

    <div class="posts-list masonry">
        {{ range $paginator.Pages }}
-        <div class="post masonry-item">
-            <div class="masonry-item-content">
+        <div class="post">
            <h2 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h2>
-                {{- with .Params.Subtitle }}
-                <p class="post-subtitle">{{ . | markdownify }}</p>
-                {{- end }}
+
+            <p class="post-subtitle">
+                {{/*  {{- with .Params.Subtitle }}
+                {{ . | markdownify }}
+                <br>
+                {{- end }}  */}}
+
+                {{ partial "breadcrumbs.html" (dict "page" . "min" 0) }}
+            </p>
+
            <div class="post-meta">
                {{- if .Date }}
                <span class="post-date">
@ -44,6 +52,7 @@
            {{- end }}

            {{- if .Params.Cover }}
+            <a href="{{ .Permalink }}" class="nostyle">
            <figure class="post-cover">
                {{- partial "image.html" (dict "path" .Params.Cover "alt" (.Title | plainify)) }}

@ -51,6 +60,7 @@
                <figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>
                {{- end }}
            </figure>
+            </a>
            {{- end }}

            <div class="post-content">
@ -68,7 +78,6 @@
                    →</a></div>
            {{- end }}
        </div>
-        </div>
        {{- end }}
    </div>