From e326ae01d7e52ce5d85db0798631498bf6810cc2 Mon Sep 17 00:00:00 2001 From: Maik de Kruif Date: Fri, 22 Nov 2024 00:52:19 +0100 Subject: [PATCH] Add breadcrumbs and cleanup writeup ui --- .../holiday-hack-challenge/2024/_index.md | 1 + .../2024/prologue/_index.md | 3 +- .../2024/prologue/elf-minder.md | 2 +- themes/maik-blog/assets/js/main.js | 2 +- themes/maik-blog/assets/scss/_main.scss | 6 +- themes/maik-blog/assets/scss/_masonry.scss | 5 + themes/maik-blog/assets/scss/_portfolio.scss | 15 +-- themes/maik-blog/assets/scss/_post.scss | 25 +++-- themes/maik-blog/assets/scss/_posts.scss | 32 +++--- themes/maik-blog/assets/scss/_variables.scss | 1 + themes/maik-blog/layouts/_default/list.html | 4 + themes/maik-blog/layouts/_default/single.html | 14 ++- .../layouts/partials/breadcrumbs.html | 26 +++++ themes/maik-blog/layouts/partials/seo.html | 3 + themes/maik-blog/layouts/portfolio/list.html | 2 + .../maik-blog/layouts/portfolio/single.html | 3 +- themes/maik-blog/layouts/writeups/list.html | 99 ++++++++++--------- 17 files changed, 157 insertions(+), 86 deletions(-) create mode 100644 themes/maik-blog/layouts/partials/breadcrumbs.html diff --git a/content/writeups/holiday-hack-challenge/2024/_index.md b/content/writeups/holiday-hack-challenge/2024/_index.md index 944d9f1..be37de7 100644 --- 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." +++ diff --git a/content/writeups/holiday-hack-challenge/2024/prologue/_index.md b/content/writeups/holiday-hack-challenge/2024/prologue/_index.md index 944d9f1..b214f6f 100644 --- 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." +++ diff --git a/content/writeups/holiday-hack-challenge/2024/prologue/elf-minder.md b/content/writeups/holiday-hack-challenge/2024/prologue/elf-minder.md index 1131c00..bbfa7de 100644 --- 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", diff --git a/themes/maik-blog/assets/js/main.js b/themes/maik-blog/assets/js/main.js index b5b5068..f5eb154 100644 --- 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", () => { diff --git a/themes/maik-blog/assets/scss/_main.scss b/themes/maik-blog/assets/scss/_main.scss index 7529f57..22fd907 100644 --- 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; +} diff --git a/themes/maik-blog/assets/scss/_masonry.scss b/themes/maik-blog/assets/scss/_masonry.scss index 5dbca85..a44ffad 100644 --- 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; } diff --git a/themes/maik-blog/assets/scss/_portfolio.scss b/themes/maik-blog/assets/scss/_portfolio.scss index 4863940..513e8a5 100644 --- a/themes/maik-blog/assets/scss/_portfolio.scss +++ b/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; diff --git a/themes/maik-blog/assets/scss/_post.scss b/themes/maik-blog/assets/scss/_post.scss index 8d1c42e..09aa702 100644 --- 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 { diff --git a/themes/maik-blog/assets/scss/_posts.scss b/themes/maik-blog/assets/scss/_posts.scss index 3e95e2d..0a30a4c 100644 --- 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; - - 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; + } } } diff --git a/themes/maik-blog/assets/scss/_variables.scss b/themes/maik-blog/assets/scss/_variables.scss index 6154d9b..59bd8b4 100644 --- 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 { diff --git a/themes/maik-blog/layouts/_default/list.html b/themes/maik-blog/layouts/_default/list.html index 4d93091..a3a387e 100644 --- a/themes/maik-blog/layouts/_default/list.html +++ b/themes/maik-blog/layouts/_default/list.html @@ -2,6 +2,8 @@ {{ $paginator := .Paginate .Data.Pages }}
+

{{ partial "breadcrumbs.html" (dict "page" . "end" ">" "min" 1) }}

+

{{ .Title }}

{{- if and .Content (not .Paginator.HasPrev) }} @@ -43,6 +45,7 @@ {{- end }} {{- if .Params.Cover }} +
{{- partial "image.html" (dict "path" .Params.Cover "alt" (.Title | plainify)) }} @@ -50,6 +53,7 @@
{{ .Params.CoverCaption | markdownify }}
{{- end }}
+ {{- end }}
diff --git a/themes/maik-blog/layouts/_default/single.html b/themes/maik-blog/layouts/_default/single.html index 21143da..75beea8 100644 --- a/themes/maik-blog/layouts/_default/single.html +++ b/themes/maik-blog/layouts/_default/single.html @@ -9,23 +9,29 @@ - {{ 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 }} - {{- end}} + {{- end }} {{- end }}

+

{{ partial "breadcrumbs.html" (dict "page" . "end" ">" "min" 1) }}

+

{{ .Title | markdownify }}

- {{- with .Params.Subtitle }} -

{{ . | markdownify }}

+ {{- with .Params.Description }} +

{{ . | markdownify }}

{{- end }} {{- if .Params.Cover }} diff --git a/themes/maik-blog/layouts/partials/breadcrumbs.html b/themes/maik-blog/layouts/partials/breadcrumbs.html new file mode 100644 index 0000000..b436264 --- /dev/null +++ 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 }} +{{ $breadcrumb.name }}{{ if ne $index (sub (len $breadcrumbs) 1) }} > {{ end }} +{{- end }} +{{- if and $breadcrumbs .end }} +{{ .end }} +{{- end }} +{{- end }} +{{- end }} diff --git a/themes/maik-blog/layouts/partials/seo.html b/themes/maik-blog/layouts/partials/seo.html index 1339c66..bd53251 100644 --- 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 }} diff --git a/themes/maik-blog/layouts/portfolio/list.html b/themes/maik-blog/layouts/portfolio/list.html index 8718ba3..115aef9 100644 --- a/themes/maik-blog/layouts/portfolio/list.html +++ b/themes/maik-blog/layouts/portfolio/list.html @@ -1,6 +1,8 @@ {{ define "main" }}
+

{{ partial "breadcrumbs.html" (dict "page" . "end" ">") }}

+

Portfolio

{{- if and .Content (not .Paginator.HasPrev) }} diff --git a/themes/maik-blog/layouts/portfolio/single.html b/themes/maik-blog/layouts/portfolio/single.html index a3fca49..fda7efc 100644 --- a/themes/maik-blog/layouts/portfolio/single.html +++ b/themes/maik-blog/layouts/portfolio/single.html @@ -1,6 +1,5 @@ {{ define "main" }}
-

+

{{ partial "breadcrumbs.html" (dict "page" . "end" ">" "min" 1) }}

+

{{ .Title | markdownify }}

diff --git a/themes/maik-blog/layouts/writeups/list.html b/themes/maik-blog/layouts/writeups/list.html index 852b4c3..b40b320 100644 --- a/themes/maik-blog/layouts/writeups/list.html +++ b/themes/maik-blog/layouts/writeups/list.html @@ -2,6 +2,8 @@ {{ $paginator := (.Paginate .RegularPagesRecursive) }}
+

{{ partial "breadcrumbs.html" (dict "page" . "end" ">") }}

+

{{ .Title }}

{{- if and .Content (not .Paginator.HasPrev) }} @@ -14,60 +16,67 @@
{{ range $paginator.Pages }} -
-
-

{{ .Title | markdownify }}

- {{- with .Params.Subtitle }} -

{{ . | markdownify }}

- {{- end }} -
- {{- if .Date }} - - {{ .Date.Format ($.Site.Params.DateFormatList | default "2006-01-02") }} - - {{- end }} - {{- with .Params.Author }} - {{ $.Site.Params.WrittenBy | default "Written by" }} {{ . }} - {{- end }} - {{- if $.Site.Params.ShowReadingTimeInList }} - — {{ .ReadingTime }} - {{ $.Site.Params.MinuteReadingTime | default "min read" }} - {{- end }} -
+
+

{{ .Title | markdownify }}

+ +

+ {{/* {{- with .Params.Subtitle }} + {{ . | markdownify }} +
+ {{- end }} */}} - {{- if .Params.tags }} - - {{- range .Params.tags }} - #{{ . }}  - {{- end }} + {{ partial "breadcrumbs.html" (dict "page" . "min" 0) }} +

+ +
+ {{- if .Date }} + + {{ .Date.Format ($.Site.Params.DateFormatList | default "2006-01-02") }} {{- end }} + {{- with .Params.Author }} + {{ $.Site.Params.WrittenBy | default "Written by" }} {{ . }} + {{- end }} + {{- if $.Site.Params.ShowReadingTimeInList }} + — {{ .ReadingTime }} + {{ $.Site.Params.MinuteReadingTime | default "min read" }} + {{- end }} +
- {{- if .Params.Cover }} -
- {{- partial "image.html" (dict "path" .Params.Cover "alt" (.Title | plainify)) }} + {{- if .Params.tags }} + + {{- range .Params.tags }} + #{{ . }}  + {{- end }} + + {{- end }} - {{- if .Params.CoverCaption }} -
{{ .Params.CoverCaption | markdownify }}
- {{- end }} -
+ {{- if .Params.Cover }} + +
+ {{- partial "image.html" (dict "path" .Params.Cover "alt" (.Title | plainify)) }} + + {{- if .Params.CoverCaption }} +
{{ .Params.CoverCaption | markdownify }}
{{- end }} +
+ + {{- end }} -
- {{- with .Description }} - {{ . | markdownify }} - {{- else }} - {{- if .Truncated }} - {{ .Summary | markdownify }} - {{- end }} - {{- end }} -
- {{- if not .Params.hideReadMore }} - +
+ {{- with .Description }} + {{ . | markdownify }} + {{- else }} + {{- if .Truncated }} + {{ .Summary | markdownify }} + {{- end }} {{- end }}
+ {{- if not .Params.hideReadMore }} + + {{- end }}
{{- end }}