Ailleurs (#263)

Author: fabi1cazenave

www/assets/css/theme.css

@@ -167,6 +167,15 @@ a[href]:hover {
   text-decoration: underline;
 }
 
+.ext a::after {
+  display: inline-block;
+  /* XXX for some reason, stroke='currentcolor' does not work here */
+  content: url("data:image/svg+xml,<svg stroke='rgb(205,103,52)' fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 6H6C4.89543 6 4 6.89543 4 8V18C4 19.1046 4.89543 20 6 20H16C17.1046 20 18 19.1046 18 18V14M14 4H20M20 4V10M20 4L10 14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
+  width: 1.1em;
+  height: 1.1em;
+  margin-left: .25em;
+}
+
 
 /**
  * ╭───────────────────────────────────────────────────────────────╮
@@ -347,6 +356,44 @@ header + nav ul ul {
 }
 
 
+/**
+ * ╭───────────────────────────────────────────────────────────────╮
+ * │                          Link Icons                           │
+ * ╰───────────────────────────────────────────────────────────────╯
+**/
+
+.icon::after {
+  content: "";
+  display: inline-block;
+  background-size: contain;
+  background-color: currentColor;
+  background-repeat: no-repeat;
+  background-position: center;
+  margin-left: .2em;
+  height: 1.25em;
+  width: 1.25em;
+}
+
+.icon-rss::after { /* https://boxicons.com */
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19 20.001C19 11.729 12.271 5 4 5v2c7.168 0 13 5.832 13 13.001h2z'/><path d='M12 20.001h2C14 14.486 9.514 10 4 10v2c4.411 0 8 3.589 8 8.001z'/><circle cx='6' cy='18' r='2'/></svg>");
+}
+
+.icon-ext::after { /* https://boxicons.com */
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m13 3 3.293 3.293-7 7 1.414 1.414 7-7L21 11V3z'/><path d='M19 19H5V5h7l-2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5l-2-2v7z'/></svg>");
+}
+
+.icon-talk::after { /* https://boxicons.com */
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 3H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h7v3H8v2h8v-2h-3v-3h7c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zM4 15V5h16l.001 10H4z'/><path d='m10 13 5-3-5-3z'/></svg>");
+}
+
+.icon-video::after { /* https://boxicons.com */
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18 7c0-1.103-.897-2-2-2H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h12c1.103 0 2-.897 2-2v-3.333L22 17V7l-4 3.333V7zm-1.998 10H4V7h12l.001 4.999L16 12l.001.001.001 4.999z'/></svg>");
+}
+
+.icon-article::after { /* https://boxicons.com */
+  mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M19.875 3H4.125C2.953 3 2 3.897 2 5v14c0 1.103.953 2 2.125 2h15.75C21.047 21 22 20.103 22 19V5c0-1.103-.953-2-2.125-2zm0 16H4.125c-.057 0-.096-.016-.113-.016-.007 0-.011.002-.012.008L3.988 5.046c.007-.01.052-.046.137-.046h15.75c.079.001.122.028.125.008l.012 13.946c-.007.01-.052.046-.137.046z'/><path d='M6 7h6v6H6zm7 8H6v2h12v-2h-4zm1-4h4v2h-4zm0-4h4v2h-4z'/></svg>");
+
+
 /**
  * ╭───────────────────────────────────────────────────────────────╮
  * │                          Keys & Chars                         │

www/content/_index.md

@@ -98,7 +98,8 @@ Témoignages
   <cite>@Pyjam / Floppy</cite>
 </blockquote>
 
-[On parle d’Ergo‑L ailleurs, dans la presse et les blogs.][mentions]
+[On parle d’Ergo‑L et d’ergonomie clavier ailleurs][ailleurs]
+— dans la presse, dans des billets de blogs, dans des conférences…
 
 
 [presentation]: /presentation/
@@ -112,7 +113,7 @@ Témoignages
 [stats]:     /stats/
 [dactylo]:   /dactylo/#ergol
 [claviers]:  /claviers/
-[mentions]:  /mentions/
+[ailleurs]:  /ailleurs/
 
 [Lafayette]: https://qwerty-lafayette.org
 [Bépo]:      https://bepo.fr

www/content/ailleurs/_index.md

@@ -0,0 +1,9 @@
++++
+title = "On en parle ailleurs"
++++
+
+dans la presse, dans des billets de blogs, dans des conférences…
+
+<style>
+h3 { margin-top: 4em; }
+</style>

www/content/mentions/cdl2023_ergol.md www/content/ailleurs/cdl2023_ergol.md

@@ -3,16 +3,15 @@
   {{ if not .Params.hideSummaryOfChildPages }}
     {{ range sort .Pages "Date" "desc" }}
       <article>
-        {{ $link := or .Params.redirect_to .RelPermalink }}
-        {{ $author := index .Site.Data.authors (.Params.author | default "default") }}
         <header>
-          <h3><a href="{{ $link }}">{{ .LinkTitle }}</a></h3>
+          {{ $author := index .Site.Data.authors (.Params.author | default "default") }}
+          <h3>{{ .LinkTitle }}</h3>
           <p class="author">
             {{ if $author }}
               <a href="{{ $author.url }}">{{ $author.name }}</a> –
             {{ end }}
             {{ if .Params.domain }}
-              {{ $abstract := or .Params.abstract $link }}
+              {{ $abstract := or .Params.abstract .Params.redirect_to .RelPermalink }}
               <a href="{{ $abstract }}">{{.Params.domain }}</a> –
             {{ end }}
             <time>{{ time.Format "2006-01-02" .Date }}</time>
@@ -22,20 +21,20 @@ <h3><a href="{{ $link }}">{{ .LinkTitle }}</a></h3>
           {{ .Content }}
           <nav class="more">
             {{ if in .Params.tags "conférences" }}
-              <a href="{{ $link }}">Voir le diaporama 🡽</a>
+              <a href="{{ .Params.redirect_to }}" class="icon icon-talk">Voir le diaporama</a>
               {{ if .Params.video }}
-                – <a href="{{ .Params.video }}">Voir la vidéo 🡽</a>
+                – <a href="{{ .Params.video }}" class="icon icon-video">Voir la vidéo</a>
               {{ end }}
             {{ else if .Params.domain }}
-              <a href="{{ $link }}">Lire l’article sur {{.Params.domain }} 🡽</a>
+              <a href="{{ .Params.redirect_to }}" class="icon icon-article">Lire l’article sur {{.Params.domain }}</a>
             {{ else }}
-              <a href="{{ $link }}">Lire l’article 🡽</a>
+              <a href="{{ .Params.redirect_to }}" class="icon icon-article">Lire l’article</a>
             {{ end }}
           </nav>
         {{ else }}
           {{ .Summary }}
           <nav class="more">
-            <a href="{{ $link }}">Lire la suite…</a>
+            <a href="{{ .RelPermalink }}">Lire la suite…</a>
           </nav>
         {{ end }}
       </article>