Compare commits

..

3 commits

Author SHA1 Message Date
8fcc303be2 Add support for callouts
All checks were successful
continuous-integration/drone/push Build is passing
2023-10-01 13:40:45 +02:00
07c8a13e2c Add support for mermaid graphs 2023-10-01 13:39:28 +02:00
df3b911030 Ignore vscode files 2023-10-01 13:38:06 +02:00
9 changed files with 433 additions and 212 deletions

5
.gitignore vendored
View file

@ -1,4 +1,7 @@
# hugo files
.hugo_build.lock
**/_gen
public
public
# Vscode
.vscode

View file

@ -6,87 +6,87 @@ favicon = true
title = "Melora's tech and stuff"
theme = "hello-friend-ng"
paginate = 10
rssLimit = 10 # Maximum number of items in the RSS feed.
rssLimit = 10 # Maximum number of items in the RSS feed.
copyright = "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License." # This message is only used by the RSS template.
archetypeDir = "archetypes"
contentDir = "content"
dataDir = "data"
layoutDir = "layouts"
publishDir = "public"
contentDir = "content"
dataDir = "data"
layoutDir = "layouts"
publishDir = "public"
[author]
name = "Melora Hugues"
name = "Melora Hugues"
[taxonomies]
category = "blog"
tags = "tags"
series = "series"
category = "blog"
tags = "tags"
series = "series"
[params]
dateform = "2 Jan 2006"
dateformShort = "2 Jan"
dateformNum = "02-01-2006"
dateformNumTime = "02-01-2006 15:04"
dateform = "2 Jan 2006"
dateformShort = "2 Jan"
dateformNum = "02-01-2006"
dateformNumTime = "02-01-2006 15:04"
disableReadOtherPosts = false
enableSharingButtons = true
enableGlobalLanguageMenu = true
disableReadOtherPosts = false
enableSharingButtons = true
enableGlobalLanguageMenu = true
description = "Personal website and tech blog for Melora Hugues"
keywords = "blog, tech, dev"
images = [""]
description = "Personal website and tech blog for Melora Hugues"
keywords = "blog, tech, dev"
images = [""]
# Enable to add comment support
# [params.commento]
# url = ""
# Enable to add comment support
# [params.commento]
# url = ""
# Integrate Plausible.io
plausibleDataDomain = 'faercol.me'
plausibleScriptSource = 'https://plausible.faercol.me/js/script.js'
# Integrate Plausible.io
plausibleDataDomain = 'faercol.me'
plausibleScriptSource = 'https://plausible.faercol.me/js/script.js'
[params.footer]
trademark = true
rss = true
copyright = false
author = true
[params.footer]
trademark = true
rss = true
copyright = false
author = true
[params.logo]
logoText = "Hello there!"
logoHomeLink = "/"
[params.logo]
logoText = "Hello there!"
logoHomeLink = "/"
[[params.social]]
name = "gitea"
url = "https://git.faercol.me"
[[params.social]]
name = "gitea"
url = "https://git.faercol.me"
[[params.social]]
name = "github"
url = "https://github.com/aHugues"
[[params.social]]
name = "github"
url = "https://github.com/aHugues"
[[params.social]]
name = "linkedin"
url = "https://www.linkedin.com/in/huguesmel/"
[[params.social]]
name = "linkedin"
url = "https://www.linkedin.com/in/huguesmel/"
[[params.social]]
name = "email"
url = "mailto:contact@faercol.me"
[[params.social]]
name = "email"
url = "mailto:contact@faercol.me"
[languages]
[languages.en]
contentDir = "content/en"
[languages.en.params]
homeSubtitle = "This is where I mostly talk about tech... and stuff"
[languages.en.params.logo]
logoText = "Hello there!"
logoHomeLink = "/en/"
[languages.en]
contentDir = "content/en"
[languages.en.params]
homeSubtitle = "This is where I mostly talk about tech... and stuff"
[languages.en.params.logo]
logoText = "Hello there!"
logoHomeLink = "/en/"
[languages.fr]
contentDir = "content/fr"
[languages.fr.params]
homeSubtitle = "Là où je parle de tech... et d'autres trucs"
[languages.fr.params.logo]
logoText = "Hello there!"
logoHomeLink = "/fr/"
[languages.fr]
contentDir = "content/fr"
[languages.fr.params]
homeSubtitle = "Là où je parle de tech... et d'autres trucs"
[languages.fr.params.logo]
logoText = "Hello there!"
logoHomeLink = "/fr/"
[menu]
# [[menu.main]]
@ -95,14 +95,20 @@ publishDir = "public"
# url = "/posts"
# weight = 1
[[menu.main]]
identifier = "about_me"
name = "About me"
url = "/about-me"
weight = 10
[[menu.main]]
identifier = "about_me"
name = "About me"
url = "/about-me"
weight = 10
[[menu.main]]
identifier = "resume"
name = "Resume"
url = "https://resume.faercol.me"
weight = 40
[[menu.main]]
identifier = "resume"
name = "Resume"
url = "https://resume.faercol.me"
weight = 40
[module]
[[module.imports]]
path = "github.com/hugomods/icons"
[[module.imports]]
path = "github.com/hugomods/icons/vendors/lucide"

8
go.mod Normal file
View file

@ -0,0 +1,8 @@
module git.faercol.me/faercol/hugo-relie
go 1.20
require (
github.com/hugomods/icons v0.6.0 // indirect
github.com/hugomods/icons/vendors/lucide v0.3.16 // indirect
)

4
go.sum Normal file
View file

@ -0,0 +1,4 @@
github.com/hugomods/icons v0.6.0 h1:G6RU93okhPPRDh/jqcew9gwkcYpSpg0rCBv4S6yUAFw=
github.com/hugomods/icons v0.6.0/go.mod h1:cIkSvK6W0q6N4U6n9KGz+QfRWQXAW0INd+1P31gPNGg=
github.com/hugomods/icons/vendors/lucide v0.3.16 h1:IQqgped/4DIe+FGe7u7W3pXcGCl9iztzUPi00rmt2UI=
github.com/hugomods/icons/vendors/lucide v0.3.16/go.mod h1:92fL24fAnTYWIAnq8i3UbWyeERFA/bupS2uhe8btB64=

View file

@ -0,0 +1,149 @@
{{ $type := .Get "type"}}
{{ $iconName := "pencil" }}
{{ $calloutTitle := $type | humanize }}
{{ $calloutColorClass := "callout-blue"}}
{{ if (eq $type "info") }}
{{ $iconName = "info" }}
{{ end }}
{{ if (eq $type "note") }}
{{ end }}
{{ if (eq $type "warning") }}
{{ $iconName = "alert-triangle" }}
{{ $calloutTitle = "Warning" }}
{{ $calloutColorClass = "callout-orange" }}
{{ end }}
{{ if (eq $type "summary") }}
{{ $iconName = "clipboard-list" }}
{{ $calloutTitle = "Summary" }}
{{ $calloutColorClass = "callout-cyan" }}
{{ end }}
{{ if (eq $type "todo") }}
{{ $iconName = "check-circle-2" }}
{{ $calloutTitle = "TODO" }}
{{ $calloutColorClass = "callout-blue" }}
{{ end }}
{{ if (eq $type "hint") }}
{{ $iconName = "flame" }}
{{ $calloutTitle = "Hint" }}
{{ $calloutColorClass = "callout-cyan" }}
{{ end }}
{{ if (eq $type "success") }}
{{ $iconName = "check" }}
{{ $calloutTitle = "Done" }}
{{ $calloutColorClass = "callout-green" }}
{{ end }}
{{ if (eq $type "help") }}
{{ $iconName = "help-circle" }}
{{ $calloutTitle = "Help" }}
{{ $calloutColorClass = "callout-yellow" }}
{{ end }}
{{ if (eq $type "help") }}
{{ $iconName = "help-circle" }}
{{ $calloutTitle = "Help" }}
{{ $calloutColorClass = "callout-yellow" }}
{{ end }}
{{ if (eq $type "fail") }}
{{ $iconName = "x" }}
{{ $calloutTitle = "Fail" }}
{{ $calloutColorClass = "callout-red" }}
{{ end }}
{{ if (eq $type "danger") }}
{{ $iconName = "zap" }}
{{ $calloutTitle = "Danger" }}
{{ $calloutColorClass = "callout-red" }}
{{ end }}
{{ if (eq $type "bug") }}
{{ $iconName = "bug" }}
{{ $calloutTitle = "Bug" }}
{{ $calloutColorClass = "callout-red" }}
{{ end }}
{{ if (eq $type "example") }}
{{ $iconName = "list" }}
{{ $calloutTitle = "Example" }}
{{ $calloutColorClass = "callout-purple" }}
{{ end }}
{{ if (eq $type "quote") }}
{{ $iconName = "quote" }}
{{ $calloutTitle = "Quote" }}
{{ $calloutColorClass = "callout-grey" }}
{{ end }}
{{ $context := dict
"vendor" "lucide"
"name" $iconName
"height" "1.5em"
"width" "1.5em"
}}
<style>
.callout-blue {
--callout-color: var(--callout-color-blue);
}
.callout-cyan {
--callout-color: var(--callout-color-cyan);
}
.callout-yellow {
--callout-color: var(--callout-color-yellow);
}
.callout-orange {
--callout-color: var(--callout-color-orange);
}
.callout-red {
--callout-color: var(--callout-color-red);
}
.callout-grey {
--callout-color: var(--callout-color-grey);
}
.callout-purple {
--callout-color: var(--callout-color-purple);
}
.callout-green {
--callout-color: var(--callout-color-green);
}
#callout {
--callout-color-blue: 138, 173, 244;
--callout-color-cyan: 125, 196, 228;
--callout-color-yellow: 238, 212, 159;
--callout-color-orange: 245, 169, 127;
--callout-color-red: 237, 135, 150;
--callout-color-grey: 158, 158, 158;
--callout-color-purple: 198, 160, 246;
--callout-color-green: 166, 218, 149;
background-color: rgba(var(--callout-color), 0.1);
border: 1px solid rgba(var(--callout-color), 0.6);
padding: 1.5em 1.25em;
border-radius: 5px;
margin-bottom: 20px;
}
#callout-title {
color: rgb(var(--callout-color));
margin-top: 0px;
svg {
margin-right: 5px;
vertical-align: -0.125rem;
}
}
@media (max-width: 767px) {
#callout {
padding: 1.5em 0.75em 1.5em 0.6em;
}
}
</style>
<div id="callout" class="{{ $type }} {{ $calloutColorClass }}">
<h4 id="callout-title">{{ partial "icons/icon" $context }} {{ $calloutTitle }}</h4>
<div id="callout-inner">
{{ .Inner | markdownify }}
</div>
</div>

26
static/mermaid.css Normal file
View file

@ -0,0 +1,26 @@
.mermaid {
.nodeLabel {
color: #A9A9B3 !important;
}
.edgePaths path {
stroke: #A9A9B3 !important;
}
.marker path {
stroke: #cad3f5;
fill: #A9A9B3;
}
.cluster rect {
fill: #1B1C1D !important;
stroke: #1F202E !important;
}
.node rect {
fill: #131415 !important;
stroke: #1F202E !important;
}
}

View file

@ -0,0 +1,4 @@
<pre class="mermaid">
{{- .Inner | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}

View file

@ -1,25 +1,29 @@
<!DOCTYPE html>
<html lang="{{ .Site.Language }}">
<head>
{{ partial "head.html" . }}
</head>
{{ block "body" . }}
<body>
<head>
{{ partial "head.html" . }}
<link rel="stylesheet" href="/mermaid.css">
</head>
{{ block "body" . }}
<body>
{{ end }}
<div class="container">
{{ partial "header.html" . }}
<div class="content">
{{ block "main" . }}{{ end }}
</div>
<div class="container">
{{ partial "header.html" . }}
{{ block "footer" . }}
{{ partial "footer.html" . }}
{{ end }}
<div class="content">
{{ block "main" . }}{{ end }}
</div>
{{ partial "javascript.html" . }}
</body>
</html>
{{ block "footer" . }}
{{ partial "footer.html" . }}
{{ end }}
</div>
{{ partial "javascript.html" . }}
</body>
</html>

View file

@ -1,139 +1,156 @@
{{ define "main" }}
<main class="post">
<main class="post">
<div class="post-info">
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
{{ i18n "readingTime" .Page.ReadingTime }}
<div class="post-info">
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-clock">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
{{ i18n "readingTime" .Page.ReadingTime }}
{{ if .IsTranslated }} | {{ i18n "postAvailable" }}
{{ range .Translations }}
<a href="{{ .Permalink }}"><span class="flag fi fi-{{ index $.Site.Data.langFlags (.Lang) }}"></span></a>
{{ end}}
{{ end }}
</p>
</div>
<article>
<h1 class="post-title">
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
</h1>
{{ with .Params.Description }}
<div class="post-excerpt">{{ . }}</div>
{{ if .IsTranslated }} | {{ i18n "postAvailable" }}
{{ range .Translations }}
<a href="{{ .Permalink }}"><span class="flag fi fi-{{ index $.Site.Data.langFlags (.Lang) }}"></span></a>
{{ end}}
{{ end }}
</p>
</div>
{{ if .Params.Cover }}
<figure class="post-cover">
<img src="{{ .Params.Cover | absURL }}" alt="{{ .Title }}" />
{{ if .Params.CoverCaption }}
<figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>
{{ end }}
</figure>
<article>
<h1 class="post-title">
<a href="{{ .Permalink }}">{{ .Title | markdownify }}</a>
</h1>
{{ with .Params.Description }}
<div class="post-excerpt">{{ . }}</div>
{{ end }}
{{ if .Params.Cover }}
<figure class="post-cover">
<img src="{{ .Params.Cover | absURL }}" alt="{{ .Title }}" />
{{ if .Params.CoverCaption }}
<figcaption class="center">{{ .Params.CoverCaption | markdownify }}</figcaption>
{{ end }}
</figure>
{{ end }}
{{- if .Params.toc }}
<hr />
<aside id="toc">
<div class="toc-title">{{ i18n "tableOfContents" }}</div>
{{ .TableOfContents }}
</aside>
<hr />
{{- end }}
{{ if .Params.Audio }}
<div class="post-audio">
<audio controls>
<source src="{{ .Params.Audio }}">
</audio>
</div>
{{ end }}
<div class="post-content">
{{ .Content }}
</div>
</article>
{{- if .Params.toc }}
<hr />
<aside id="toc">
<div class="toc-title">{{ i18n "tableOfContents" }}</div>
{{ .TableOfContents }}
</aside>
<hr />
<div class="post-info">
{{ partial "tags.html" .Params.tags }}
{{ partial "categories.html" . }}
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
<line x1="16" y1="13" x2="8" y2="13"></line>
<line x1="16" y1="17" x2="8" y2="17"></line>
<polyline points="10 9 9 9 8 9"></polyline>
</svg>
{{ i18n "wordCount" .Page.WordCount }}
</p>
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
{{ if .Site.Params.dateformNumTime }}
{{ dateFormat .Site.Params.dateformNumTime .Date.Local }}
{{ else }}
{{ dateFormat "2006-01-02 15:04" .Date.Local }}
{{ end }}
{{ if .Lastmod }}
{{ if not (eq .Lastmod .Date )}}
{{ if .Site.Params.dateformNumTime }}
({{ i18n "lastModified" }}: {{ dateFormat .Site.Params.dateformNumTime .Lastmod.Local }})
{{ else }}
({{ i18n "lastModified" }}: {{ dateFormat "2006-01-02 15:04" .Lastmod.Local }})
{{ end }}
{{ end }}
{{ end }}
</p>
{{- if .GitInfo }}
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-git-commit">
<circle cx="12" cy="12" r="4"></circle>
<line x1="1.05" y1="12" x2="7" y2="12"></line>
<line x1="17.01" y1="12" x2="22.96" y2="12"></line>
</svg>
<a href="{{ .Site.Params.gitUrl -}}{{ .GitInfo.Hash }}" target="_blank" rel="noopener">{{ .GitInfo.AbbreviatedHash }}</a>
@ {{ if .Site.Params.dateformNum }}{{ dateFormat .Site.Params.dateformNum .GitInfo.AuthorDate.Local }}{{ else }}{{ dateFormat "2006-01-02" .GitInfo.AuthorDate.Local }}{{ end }}
</p>
{{- end }}
</div>
{{- if .Site.Params.EnableSharingButtons }}
<hr />
<div class="sharing-buttons">
{{ partial "sharing-buttons.html" . }}
</div>
{{- end }}
{{ partial "pagination-single.html" . }}
{{ if .Params.Audio }}
<div class="post-audio">
<audio controls>
<source src="{{ .Params.Audio }}">
</audio>
</div>
{{ end }}
{{ if .Site.DisqusShortname }}
{{ if not (eq .Params.Comments "false") }}
<div id="comments">
{{ template "_internal/disqus.html" . }}
</div>
<div class="post-content">
{{ .Content }}
{{ if .Page.Store.Get "hasMermaid" }}
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true });
</script>
{{ end }}
{{ end }}
{{ if .Site.Params.Commento.Url }}
<script defer src={{ .Site.Params.Commento.Url }}></script>
<div id="commento"></div>
{{ end }}
</div>
</article>
</main>
{{ end }}
<hr />
<div class="post-info">
{{ partial "tags.html" .Params.tags }}
{{ partial "categories.html" . }}
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-file-text">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
<line x1="16" y1="13" x2="8" y2="13"></line>
<line x1="16" y1="17" x2="8" y2="17"></line>
<polyline points="10 9 9 9 8 9"></polyline>
</svg>
{{ i18n "wordCount" .Page.WordCount }}
</p>
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-calendar">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
{{ if .Site.Params.dateformNumTime }}
{{ dateFormat .Site.Params.dateformNumTime .Date.Local }}
{{ else }}
{{ dateFormat "2006-01-02 15:04" .Date.Local }}
{{ end }}
{{ if .Lastmod }}
{{ if not (eq .Lastmod .Date )}}
{{ if .Site.Params.dateformNumTime }}
({{ i18n "lastModified" }}: {{ dateFormat .Site.Params.dateformNumTime .Lastmod.Local }})
{{ else }}
({{ i18n "lastModified" }}: {{ dateFormat "2006-01-02 15:04" .Lastmod.Local }})
{{ end }}
{{ end }}
{{ end }}
</p>
{{- if .GitInfo }}
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-git-commit">
<circle cx="12" cy="12" r="4"></circle>
<line x1="1.05" y1="12" x2="7" y2="12"></line>
<line x1="17.01" y1="12" x2="22.96" y2="12"></line>
</svg>
<a href="{{ .Site.Params.gitUrl -}}{{ .GitInfo.Hash }}" target="_blank" rel="noopener">{{ .GitInfo.AbbreviatedHash
}}</a>
@ {{ if .Site.Params.dateformNum }}{{ dateFormat .Site.Params.dateformNum .GitInfo.AuthorDate.Local }}{{ else }}{{
dateFormat "2006-01-02" .GitInfo.AuthorDate.Local }}{{ end }}
</p>
{{- end }}
</div>
{{- if .Site.Params.EnableSharingButtons }}
<hr />
<div class="sharing-buttons">
{{ partial "sharing-buttons.html" . }}
</div>
{{- end }}
{{ partial "pagination-single.html" . }}
{{ if .Site.DisqusShortname }}
{{ if not (eq .Params.Comments "false") }}
<div id="comments">
{{ template "_internal/disqus.html" . }}
</div>
{{ end }}
{{ end }}
{{ if .Site.Params.Commento.Url }}
<script defer src={{ .Site.Params.Commento.Url }}></script>
<div id="commento"></div>
{{ end }}
</main>
{{ end }}