fix: telephone partial

## Détails

- Ajoute des metadata standards pour les réseaux sociaux

## Pourquoi

Ne pas dépendre des conventions Twitter et Facebook. Utiliser les standards de l'IndieWeb

## Références
https://tree.taiga.io/project/killiankemps-resilien/us/411

Reviewed-on: https://git.weko.io/kosssi/hugo-theme-lowtech/pulls/1

README.md

@@ -1,6 +1,16 @@
 # theme lowtech
 
-Création d'un site
+## Shortcodes
+
+### Year
+
+Pour afficher l'année en court :
+
+```
+{{< year >}}
+```
+
+## Initialisation d'un nouveau site
 
 ```sh
 hugo new site exemple
@@ -15,6 +25,10 @@ cd themes
 git submodule add https://git.weko.io/kosssi/hugo-theme-lowtech.git
 ```
 
+## Contact
+
+Pour la gestion de contact il est possible d'utiliser des shortcodes spécifiques `{{< mail >}}` ou `{{< tel >}}`
+
 ## Inspirations
 
 - https://github.com/yuin/goldmark/issues/59

assets/js/main.js

@@ -1,19 +0,0 @@
-const obfuscates = document.getElementsByClassName("obfuscate");
-for (const element of obfuscates) {
-  const link = document.createElement("a");
-  const separators = element.dataset.separators;
-  const protocol = element.dataset.param1.split("").reverse().join("");
-  let url = protocol;
-  for (let i = 0; i < separators.length; i++) {
-    url += separators[i] + element.dataset["param" + (i+2)].split("").reverse().join("");
-  }
-  let text = element.dataset.param2.split("").reverse().join("");
-  for (let i = 1; i < separators.length; i++) {
-    text += separators[i] + element.dataset["param" + (i+2)].split("").reverse().join("");
-  }
-  link.innerText = url.replace(new RegExp(element.dataset.regex, 'i'), element.dataset.replace);
-  link.href = url;
-  link.rel = "nofollow";
-  element.parentElement.insertBefore(link, element);
-}
-while (obfuscates.length > 0) obfuscates[0].remove();

assets/js/obfuscates.js

@@ -0,0 +1,9 @@
+export default function abfuscates() {
+  const obfuscates = document.getElementsByClassName("obfuscate");
+  while (obfuscates.length > 0) {
+    const element = obfuscates[0]
+    element.href = element.dataset.link.split("").reverse().join("");
+    element.innerText = element.innerText.split("").reverse().join("");
+    element.classList.remove('obfuscate');
+  }
+}

assets/styles/obfuscates.sass

@@ -0,0 +1,3 @@
+.obfuscate
+  unicode-bidi: bidi-override
+  direction: rtl

layouts/_default/_markup/render-image.html

@@ -0,0 +1,11 @@
+{{/*
+  S'il n'y a pas de / dans l'url d'une image alors on ajoute le path de l'article
+*/}}
+{{ $path := cond (in .Destination "/") .Destination (path.Join "/" .Page.File.Dir .Destination) }}
+{{ $image := .Page.Resources.GetMatch (printf "*%s*" .Destination) }}
+{{ with $image }}
+  {{ $resizeParams := delimit (slice (default "610x" site.Params.ImageSize) (default "q100" site.Params.ImageQuality) (default "webp" site.Params.ImageFormat)) " " }}
+  {{ $resized := $image.Resize (string $resizeParams) }}
+  {{ $path = $resized.RelPermalink }}
+{{ end }}
+<img src="{{ $path | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} loading="lazy" />

layouts/_default/_markup/render-link.html

@@ -5,31 +5,12 @@
 {{ $isWebLink := or $isExternalLink (eq 0 (.Destination | strings.Count ":")) }}
 {{ $isTelLink := strings.HasPrefix .Destination "tel:" }}
 {{ $isMailtoLink := strings.HasPrefix .Destination "mailto:" }}
-{{ $hasSlash := in .Destination "/" }}
 {{- if $isWebLink -}}
+  {{ $hasSlash := in .Destination "/" }}
   {{ $link := cond (and $isWebLink (and (not $hasSlash) (not $isExternalLink))) (path.Join "/" .Page.File.Dir .Destination) .Destination }}
-  <a href="{{ $link | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if $isExternalLink }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>
+  <a href="{{ $link | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if $isExternalLink }} rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>
-{{- else -}}
+{{- else if $isMailtoLink -}}
-  {{- $separators := cond $isMailtoLink ":@." ":" -}}
+  {{ partial "contact/mail" .Destination }}
-  {{- $regex := cond $isMailtoLink "[a-z]*:(.*)" "[a-z]*:([0-9]{2})([0-9]{2})([0-9]{2})([0-9]{2})([0-9]{2})"}}
+{{- else if $isTelLink -}}
-  {{- $replace := cond $isMailtoLink "$1" "$1 $2 $3 $4 $5" -}}
+  {{ partial "contact/telephone" .Destination }}
-  {{- $string := .Destination -}}
-  {{- $params := slice -}}
-
-  {{- range split $separators "" }}
-    {{ $parts := split $string . }}
-    {{ $params = $params | append (index $parts 0) }}
-    {{ $string = index $parts 1 }}
-  {{ end }}
-  {{- $params = $params | append (string $string) -}}
-  <span
-    class="obfuscate{{ if $isMailtoLink }} at{{ end }}"
-    data-separators="{{ $separators }}"
-    {{ range $param_index, $param_value := $params }}
-      data-param{{add $param_index 1}}="{{ range $index := seq (sub (len $param_value) 1) 0}}{{ substr $param_value $index 1}}{{ end }}"
-    {{ end }}
-    data-regex="{{ $regex }}"
-    data-replace="{{ $replace }}"
-  >
-  </span>
 {{- end -}}

layouts/_default/baseof.html

@@ -4,7 +4,7 @@
   <body>
     {{ partial "header.html" . }}
     {{ partial "debug.html" . }}
-    <main id="content">
+    <main>
       {{ block "main" . }}{{ end }}
     </main>
     {{ partial "footer.html" . }}

layouts/_default/list.html

@@ -1,3 +1,8 @@
 {{ define "main" }}
   {{ .Content }}
+  <ul>
+  {{ range .Pages }}
+    <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
+  {{ end }}
+  </ul>
 {{ end }}

layouts/partials/contact/adresse.html

@@ -0,0 +1,6 @@
+{{- with .Site.Data.contact.adresse -}}
+<p>
+  {{ .rue }} <br>
+  {{ .cp }}{{ " " }}{{ .ville }}
+</p>
+{{- end -}}

layouts/partials/contact/instagram.html

@@ -0,0 +1,3 @@
+{{- with .Site.Data.contact.instagram -}}
+<a class="instagram" href="https://www.instagram.com/{{ . }}/">@{{ . }}</a>
+{{- end -}}

layouts/partials/contact/mail.html

@@ -0,0 +1,12 @@
+{{- $protocol := "mailto" -}}
+{{- $mail := . -}}
+{{- $mailWithProtocol := $mail -}}
+{{- if strings.HasPrefix $mail $protocol -}}
+  {{- $mail = substr $mail 7 -}}
+{{- else -}}
+  {{- $mailWithProtocol = print $protocol ":" $mail -}}
+{{- end -}}
+<a
+  class="mail obfuscate"
+  data-link="{{ range $index := seq (sub (len $mailWithProtocol) 1) 0}}{{ substr $mailWithProtocol $index 1}}{{ end }}"
+>{{ range $index := seq (sub (len $mail) 1) 0}}{{ substr $mail $index 1}}{{ end }}</a>

layouts/partials/contact/telephone.html

@@ -0,0 +1,12 @@
+{{- $protocol := "tel" -}}
+{{- $tel := . -}}
+{{- $telWithProtocol := $tel -}}
+{{- if strings.HasPrefix $tel $protocol -}}
+  {{- $tel = substr $tel 4 -}}
+{{- else -}}
+  {{- $telWithProtocol = print $protocol ":" (replace $tel " " "") -}}
+{{- end -}}
+<a
+  class="tel obfuscate"
+  data-link="{{ range $index := seq (sub (len $telWithProtocol) 1) 0}}{{ substr $telWithProtocol $index 1}}{{ end }}"
+>{{ range $index := seq (sub (len $tel) 1) 0}}{{ substr $tel $index 1}}{{if modBool $index 2}} {{ end }}{{ end }}</a>

layouts/partials/copyright.html

@@ -0,0 +1 @@
+<p>© {{ .Site.Title }}{{ " " }}{{ partial "year" }}</p>

layouts/partials/head.html

@@ -2,12 +2,12 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <base href="{{ .Site.BaseURL }}">
     <link rel="canonical" href="{{ .Permalink }}" />
     {{ with .OutputFormats.Get "RSS" }}<link href="{{ .RelPermalink }}" rel="alternate" type="application/rss+xml" />{{ end }}
 
     <meta name="HandheldFriendly" content="True">
     <meta name="MobileOptimized" content="320">
+    {{ if ne hugo.Environment "production" }}<meta name="robots" content="noindex">{{ end }}
 
     {{ partial "social_metadata.html" . }}
     {{ partial "style.html" . }}

layouts/partials/js.html

@@ -1,5 +1,9 @@
 {{ $js := resources.Get "js/main.js" }}
 {{ with $js }}
-{{ $secureJS := . | resources.Minify | resources.Fingerprint }}
+{{ $secureJS := . | js.Build }}
+{{ if not $.Site.Params.debug }}
+  {{ $secureJS = $secureJS | minify }}
+{{ end }}
+{{ $secureJS = $secureJS | fingerprint }}
 <script src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
 {{ end }}

layouts/partials/social_metadata.html

@@ -1,5 +1,13 @@
 {{/* https://github.com/msfjarvis/hugo-social-metadata */}}
 
+    {{ if .Site.Params.FaviconEmoji }}
+      <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>{{ .Site.Params.FaviconEmoji }}</text></svg>">
+    {{ else if .Site.Params.FaviconSVG }}
+      <link rel="icon" href="data:image/svg+xml;{{ safeURL .Site.Params.FaviconSVG }}">
+    {{ else if .Site.Params.FaviconFile }}
+      <link rel="icon" href="{{ .Site.Params.FaviconFile }}">
+    {{ end }}
+
     <!-- Configure meta and title tags -->
     <meta property="og:type" content="website" />
     {{ if .Site.Params.TwitterCardType }}
@@ -20,7 +28,7 @@
     <meta name="twitter:title" content="{{ default .Site.Title .Title }}" />
     <meta name="twitter:description" content="{{ $.Site.Params.description }}" />
     <meta name="twitter:url" content="{{ .Site.BaseURL }}" />
-    <meta name="twitter:image:src" content="{{ .Site.BaseURL}}{{ .Site.Params.SocialImage }}" />
+    <meta name="twitter:image" content="{{ .Site.BaseURL}}{{ .Site.Params.SocialImage }}" />
     {{ else }}
     <title>{{ .Title }} &middot; {{ .Site.Title }}</title>
     <meta name="description" content="{{ .Description }}" />
@@ -37,9 +45,9 @@
     {{ end }}
     <meta name="twitter:url" content="{{ .Permalink }}" />
     {{ if .Params.SocialImage }}
-    <meta name="twitter:image:src" content="{{ .Site.BaseURL }}{{ .Params.SocialImage }}" />
+    <meta name="twitter:image" content="{{ .Site.BaseURL }}{{ .Params.SocialImage }}" />
     {{ else }}
-    <meta name="twitter:image:src" content="{{ .Site.Params.SocialImage }}" />
+    <meta name="twitter:image" content="{{ .Site.BaseURL }}{{ .Site.Params.SocialImage }}" />
     {{ end }}
     {{ end }}
     {{ if .Params.tags }}
@@ -49,3 +57,13 @@
     {{ else }}
     <meta name="keywords" content="{{ $.Site.Params.Keywords }}" />
     {{ end }}
+
+    <script type="application/ld+json">
+    {
+      "@context": "http://schema.org/",
+      "@type": "WebSite",
+      "name": "{{ default .Site.Title .Title }}",
+      "image": "{{ .Site.BaseURL}}{{ default .Site.Params.SocialImage .Params.SocialImage }}",
+      "about": "{{ .Site.Params.description }}"
+    }
+    </script>

layouts/partials/style.html

@@ -1,2 +1,9 @@
-    {{ $style := resources.Get "styles/main.sass" | toCSS | minify | fingerprint }}
+{{ $style := resources.Get "styles/main.sass" }}
-    <link rel="stylesheet" href="{{ $style.Permalink }}">
+{{ with $style }}
+{{ $styleCSS := . | toCSS }}
+{{ if not $.Site.Params.debug }}
+  {{ $styleCSS = $styleCSS | minify }}
+{{ end }}
+{{ $styleCSS = $styleCSS | fingerprint }}
+<link rel="stylesheet" href="{{ $styleCSS.Permalink }}" integrity="{{ $styleCSS.Data.Integrity }}">
+{{ end }}

layouts/partials/year.html

@@ -0,0 +1 @@
+{{- now.Format "2006" -}}

layouts/shortcodes/adresse.html

@@ -0,0 +1 @@
+{{ partial "contact/adresse" . }}

layouts/shortcodes/instagram.html

@@ -0,0 +1 @@
+{{- partial "contact/instagram" . -}}

layouts/shortcodes/mail.html

@@ -0,0 +1 @@
+{{- partial "contact/mail" .Site.Data.contact.mail -}}

layouts/shortcodes/telephone.html

@@ -0,0 +1 @@
+{{- partial "contact/telephone" .Site.Data.contact.telephone -}}

layouts/shortcodes/year.html

@@ -1 +1 @@
-{{- now.Format "2006" -}}
+{{ partial "year" . }}

package.json

@@ -4,10 +4,12 @@
   "author": "Simon <simon@lamelio.fr>",
   "license": "GPL-3.0",
   "dependencies": {
+    "@resilien/directus-to-markdown": "1.0.1",
     "imagemin-cli": "^6.0.0",
     "imagemin-webp": "^6.0.0",
-    "richtypo": "4.0.7",
+    "richtypo": "4.1.9",
-    "richtypo-rules-common": "4.0.2",
+    "richtypo-rules-common": "4.1.8",
-    "richtypo-rules-fr": "4.0.2"
+    "richtypo-rules-fr": "4.0.11",
+    "url-slug": "3.0.3"
   }
 }

scripts/run

@@ -31,12 +31,9 @@ stats() {
 }
 
 install() {
-  echo "📦 Installation des dépendances 📦"
-  echo "----------------------------------"
   echo
-  echo "- Récupération du theme"
+  echo "📦 Installation des dépendances node du theme 📦"
-  git submodule update --init
+  echo
-  echo "- Installation des dépendances node du theme"
   cd themes/hugo-theme-lowtech && npm i
 }
 
@@ -50,6 +47,12 @@ dev_prod() {
   hugo server
 }
 
+build_prod() {
+  rm -rf public
+  hugo --minify --environment production
+  node themes/hugo-theme-lowtech/scripts/typo
+}
+
 prod() {
   echo
   echo "🚀 Déploiement du site en mode production 🚀"
@@ -58,7 +61,7 @@ prod() {
   hugo --minify --environment production
   node themes/hugo-theme-lowtech/scripts/typo
   #DATE=`date +\"%Y0101\"` && find public -exec touch -d $DATE {} +
-  docker-compose --context $DOCKER_CONTEXT -f docker-compose.prod.yml up -d --build --force-recreate
+  DOCKER_CONTEXT=$DOCKER_CONTEXT docker compose -f docker-compose.prod.yml up -d --build --force-recreate
 }
 
 staging() {
@@ -69,14 +72,27 @@ staging() {
   hugo --minify -DF --environment staging
   node themes/hugo-theme-lowtech/scripts/typo
   #DATE=`date +\"%Y0101\"` && find public -exec touch -d $DATE {} +
-  docker-compose --context $DOCKER_CONTEXT -f docker-compose.staging.yml up -d --build --force-recreate
+  DOCKER_CONTEXT=$DOCKER_CONTEXT docker compose -f docker-compose.staging.yml up -d --build --force-recreate
 }
 
 favicons() {
   echo
+  if [ -f "static/logo.png" ]; then
     echo "🔍 Génération des favicons à partir d'une image 512px"
     echo
-  convert static/logo.png -resize 32x32 -colors 16 \( -clone 0 -resize 16x16 -extent 16x16 \) \( -clone 0 -resize 32x32 -extent 32x32 \) -delete 0 static/favicon.ico
+    convert static/logo.png -background transparent -resize 48x48 -colors 16 \( -clone 0 -resize 16x16 -extent 16x16 \) \( -clone 0 -resize 32x32 -extent 32x32 \) \( -clone 0 -resize 48x48 -extent 48x48 \) -delete 0 static/favicon.ico
+  elif [ -f "static/logo.svg" ]; then
+    echo "🔍 Génération des favicons à partir d'une image SVG"
+    echo
+    convert static/logo.svg -background transparent -resize 48x48 -colors 16 \( -clone 0 -resize 16x16 -extent 16x16 \) \( -clone 0 -resize 32x32 -extent 32x32 \) \( -clone 0 -resize 48x48 -extent 48x48 \) -delete 0 static/favicon.ico
+  else
+    echo "🚧 Il faut un fichier 'logo.svg' ou 'logo.png' dans le dossier static"
+  fi
+  echo
+  echo "Aide :"
+  echo "- liste des emoji : https://www.unicode.org/emoji/charts/full-emoji-list.html"
+  echo "- les emoji de twitter : https://github.com/twitter/twemoji"
+  echo "- Pour créer un base64 : \`echo \"data:image/svg+xml;base64,\$(cat static/logo.svg | base64 | tr -d '\r\n')\"\`"
 }
 
 optimizer() {
@@ -127,7 +143,7 @@ help_generic() {
   echo "- ./run logs_backup        📥 Sauvegarde les logs"
   echo "- ./run logs_restore       📤 Restaure les logs"
   echo "- ./run stats              🌠 Mise à jour de GoAccess"
-  echo "- ./run favicons           🔍 Génération des favicons à partir d'une image 512px"
+  echo "- ./run favicons           🔍 Génération des favicons à partir d'une image 512px ou un SVG"
   echo "- ./run optimizer          🖼️ Optimisation des images"
 }