Add breadcrumbs and cleanup writeup ui

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."
 +++
 

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."
 +++
 

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",

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", () => {

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;
+}

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;
   }

themes/maik-blog/assets/scss/_portfolio.scss

@@ -45,7 +45,7 @@
   &-content {
     margin-top: 30px;
   }
-  
+
   &-links {
     font-size: 0.8em;
     margin-top: -8px;
@@ -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;
 

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 {

themes/maik-blog/assets/scss/_posts.scss

@@ -38,27 +38,23 @@
     list-style: none;
   }
 
-  .post {
-    &.masonry-item {
-      .post-cover {
-        width: 115%;
-        margin: 40px -30px;
-
-        img {
-          max-height: 20rem;
-          margin: 0 auto;
-          object-fit: contain;
-        }
-      }
+  &-breadcrumbs {
+    margin: 0 0 -25px;
+
+    @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;
+    }
   }
 }

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 {

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">

themes/maik-blog/layouts/_default/single.html

@@ -9,23 +9,29 @@
         <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 }}
       <a href="{{ .Permalink }}"><span
           class="flag flag-icon flag-icon-{{ index $.Site.Data.langFlags (.Lang) }} flag-icon-squared"></span></a>
-      {{- end}}
+      {{- end }}
       {{- end }}
     </p>
   </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 }}

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 }}

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 }}

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) }}

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>

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,60 +16,67 @@
 
     <div class="posts-list masonry">
         {{ range $paginator.Pages }}
-        <div class="post masonry-item">
-            <div class="masonry-item-content">
-                <h2 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h2>
-                {{- with .Params.Subtitle }}
-                <p class="post-subtitle">{{ . | markdownify }}</p>
-                {{- end }}
-                <div class="post-meta">
-                    {{- if .Date }}
-                    <span class="post-date">
-                        {{ .Date.Format ($.Site.Params.DateFormatList | default "2006-01-02") }}
-                    </span>
-                    {{- end }}
-                    {{- with .Params.Author }}
-                    <span class="post-author">{{ $.Site.Params.WrittenBy | default "Written by" }} {{ . }}</span>
-                    {{- end }}
-                    {{- if $.Site.Params.ShowReadingTimeInList }}
-                    <span class="post-read-time">— {{ .ReadingTime }}
-                        {{ $.Site.Params.MinuteReadingTime | default "min read" }}</span>
-                    {{- end }}
-                </div>
+        <div class="post">
+            <h2 class="post-title"><a href="{{ .Permalink }}">{{ .Title | markdownify }}</a></h2>
+
+            <p class="post-subtitle">
+                {{/*  {{- with .Params.Subtitle }}
+                {{ . | markdownify }}
+                <br>
+                {{- end }}  */}}
 
-                {{- if .Params.tags }}
-                <span class="post-tags">
-                    {{- range .Params.tags }}
-                    #<a href="{{ (urlize (printf "tags/%s" . )) | absURL }}/">{{ . }}</a>&nbsp;
-                    {{- end }}
+                {{ partial "breadcrumbs.html" (dict "page" . "min" 0) }}
+            </p>
+
+            <div class="post-meta">
+                {{- if .Date }}
+                <span class="post-date">
+                    {{ .Date.Format ($.Site.Params.DateFormatList | default "2006-01-02") }}
                 </span>
                 {{- end }}
+                {{- with .Params.Author }}
+                <span class="post-author">{{ $.Site.Params.WrittenBy | default "Written by" }} {{ . }}</span>
+                {{- end }}
+                {{- if $.Site.Params.ShowReadingTimeInList }}
+                <span class="post-read-time">— {{ .ReadingTime }}
+                    {{ $.Site.Params.MinuteReadingTime | default "min read" }}</span>
+                {{- end }}
+            </div>
 
-                {{- if .Params.Cover }}
-                <figure class="post-cover">
-                    {{- partial "image.html" (dict "path" .Params.Cover "alt" (.Title | plainify)) }}
+            {{- if .Params.tags }}
+            <span class="post-tags">
+                {{- range .Params.tags }}
+                #<a href="{{ (urlize (printf "tags/%s" . )) | absURL }}/">{{ . }}</a>&nbsp;
+                {{- end }}
+            </span>
+            {{- end }}
 
-                    {{- if .Params.CoverCaption }}
-                    <figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>
-                    {{- end }}
-                </figure>
+            {{- if .Params.Cover }}
+            <a href="{{ .Permalink }}" class="nostyle">
+            <figure class="post-cover">
+                {{- partial "image.html" (dict "path" .Params.Cover "alt" (.Title | plainify)) }}
+
+                {{- if .Params.CoverCaption }}
+                <figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>
                 {{- end }}
+            </figure>
+            </a>
+            {{- end }}
 
-                <div class="post-content">
-                    {{- with .Description }}
-                    {{ . | markdownify }}
-                    {{- else }}
-                    {{- if .Truncated }}
-                    {{ .Summary | markdownify }}
-                    {{- end }}
-                    {{- end }}
-                </div>
-                {{- if not .Params.hideReadMore }}
-                <div><a class="read-more button"
-                        href="{{.Permalink}}">{{ $.Site.Params.ReadMore | default "Read more" }}
-                        →</a></div>
+            <div class="post-content">
+                {{- with .Description }}
+                {{ . | markdownify }}
+                {{- else }}
+                {{- if .Truncated }}
+                {{ .Summary | markdownify }}
+                {{- end }}
                 {{- end }}
             </div>
+            {{- if not .Params.hideReadMore }}
+            <div><a class="read-more button"
+                    href="{{.Permalink}}">{{ $.Site.Params.ReadMore | default "Read more" }}
+                    →</a></div>
+            {{- end }}
         </div>
         {{- end }}
     </div>