From 7e15d466846b6176dd565a9239c16129e36334b3 Mon Sep 17 00:00:00 2001 From: Jannik Menzel Date: Tue, 20 May 2025 11:31:16 +0200 Subject: [PATCH] improved svg rendering and prepared headline icons --- assets/css/markdown.css | 19 +++++ assets/icons/link.svg | 6 ++ assets/icons/social-media/github.svg | 12 +++ assets/icons/social-media/instagram.svg | 15 ++++ assets/icons/social-media/mastodon.svg | 4 + assets/icons/social-media/telegram.svg | 12 +++ hugo.toml | 8 +- layouts/_default/_markup/render-heading.html | 21 +++++ layouts/_partials/hero.html | 82 +++++--------------- 9 files changed, 117 insertions(+), 62 deletions(-) create mode 100644 assets/icons/link.svg create mode 100644 assets/icons/social-media/github.svg create mode 100644 assets/icons/social-media/instagram.svg create mode 100644 assets/icons/social-media/mastodon.svg create mode 100644 assets/icons/social-media/telegram.svg create mode 100644 layouts/_default/_markup/render-heading.html diff --git a/assets/css/markdown.css b/assets/css/markdown.css index 7d77ccd..93e871c 100644 --- a/assets/css/markdown.css +++ b/assets/css/markdown.css @@ -40,10 +40,29 @@ } #markdown h2 { + display: flex; + align-items: center; + gap: 0.3em; font-size: 2rem; color: var(--color-text); } +.icon { + width: 2.5rem; + height: 2.5rem; + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + color: currentColor; +} + +.icon svg { + width: 100%; + height: 100%; + display: block; +} + #markdown h3 { font-size: 1.5rem; color: var(--color-text); diff --git a/assets/icons/link.svg b/assets/icons/link.svg new file mode 100644 index 0000000..ee7bd62 --- /dev/null +++ b/assets/icons/link.svg @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/assets/icons/social-media/github.svg b/assets/icons/social-media/github.svg new file mode 100644 index 0000000..f4c8ca8 --- /dev/null +++ b/assets/icons/social-media/github.svg @@ -0,0 +1,12 @@ + + + + + + + + + + \ No newline at end of file diff --git a/assets/icons/social-media/instagram.svg b/assets/icons/social-media/instagram.svg new file mode 100644 index 0000000..f3c6d9b --- /dev/null +++ b/assets/icons/social-media/instagram.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/icons/social-media/mastodon.svg b/assets/icons/social-media/mastodon.svg new file mode 100644 index 0000000..21f2fbd --- /dev/null +++ b/assets/icons/social-media/mastodon.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/assets/icons/social-media/telegram.svg b/assets/icons/social-media/telegram.svg new file mode 100644 index 0000000..f957ffe --- /dev/null +++ b/assets/icons/social-media/telegram.svg @@ -0,0 +1,12 @@ + + + + + + + + + + \ No newline at end of file diff --git a/hugo.toml b/hugo.toml index 1ec4c81..e98d93c 100644 --- a/hugo.toml +++ b/hugo.toml @@ -13,4 +13,10 @@ target = 'static' source = 'images' target = 'static/images' -disableXML = true \ No newline at end of file +disableXML = true + +[markup] +[markup.goldmark] +[markup.goldmark.parser] +[markup.goldmark.parser.attribute] +title = true \ No newline at end of file diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html new file mode 100644 index 0000000..d884d03 --- /dev/null +++ b/layouts/_default/_markup/render-heading.html @@ -0,0 +1,21 @@ +{{- $level := .Level -}} +{{- $text := .Text -}} + +{{- $re := `\[(\w+)\]` -}} +{{- $matches := findRE $re $text -}} + +{{- if gt (len $matches) 0 -}} + {{- range $i, $match := $matches -}} + {{- $iconName := replaceRE `^\[(\w+)\]$` `$1` $match -}} + {{- $iconPath := printf "icons/%s.svg" $iconName -}} + {{- $svg := resources.Get $iconPath -}} + {{- if $svg -}} + {{- $svgContent := $svg.Content | safeHTML -}} + {{- $text = replace $text $match (printf `%s` $svgContent) -}} + {{- else -}} + {{- $text = replace $text $match (printf `[%s]` $iconName) -}} + {{- end -}} + {{- end -}} +{{- end -}} + +{{ $text | safeHTML }} \ No newline at end of file diff --git a/layouts/_partials/hero.html b/layouts/_partials/hero.html index 883e905..68a57b7 100644 --- a/layouts/_partials/hero.html +++ b/layouts/_partials/hero.html @@ -17,30 +17,21 @@
- - - - + {{ with resources.Get "icons/link.svg" }} + {{ .Content | safeHTML }} + {{ end }} ESE Website - - - - + {{ with resources.Get "icons/link.svg" }} + {{ .Content | safeHTML }} + {{ end }} Events - - - - + {{ with resources.Get "icons/link.svg" }} + {{ .Content | safeHTML }} + {{ end }} Neuigkeiten
@@ -49,55 +40,24 @@
- - - - - - - - - - - - + {{ with resources.Get "icons/social-media/instagram.svg" }} + {{ .Content | safeHTML }} + {{ end }} - - - - - - - - - - + {{ with resources.Get "icons/social-media/github.svg" }} + {{ .Content | safeHTML }} + {{ end }} - - - - - - - - - - + {{ with resources.Get "icons/social-media/telegram.svg" }} + {{ .Content | safeHTML }} + {{ end }} - - - + {{ with resources.Get "icons/social-media/mastodon.svg" }} + {{ .Content | safeHTML }} + {{ end }}