feat: Avancement général sur le contenu et le design

fixes #3, fixes #4, fixes #5, fixes #7, fixes #8, fixes #9, fixes #10

layouts/actualites/list.html

@@ -3,13 +3,9 @@
     <h1>{{ .RenderString .Title }}</h1>
     <div class="container md">
       {{ .Content }}
-      <ul>
-        {{ block "list" . }}
-        {{ range .Pages }}
-        <li><a href="{{ .URL }}">{{ .Date.Day }} {{ index $.Site.Data.mois (printf "%d" .Date.Month) }} {{ .Date.Year }} - {{ .RenderString .Title }}</a></li>
-        {{ end }}
-        {{ end }}
-      </ul>
+      {{ range .Pages }}
+        {{ partial "article-preview.html" . }}
+      {{ end }}
     </div>
   </div>
 {{ end }}

layouts/actualites/single.html

@@ -2,7 +2,30 @@
   <div class="container">
     <h1>{{ .RenderString .Title }}</h1>
     <div class="container news md">
+      <small>
+        <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Day }} {{ index $.Site.Data.mois (printf "%d" .Date.Month) }} {{ .Date.Year }}</time>
+      </small>
       {{ .Content }}
+      <aside>
+        <hr>
+        <h2>
+          {{ if and .NextInSection .PrevInSection }}
+          Les actualités suivant et précédent
+          {{ else if .NextInSection }}
+          L'actualité précédent
+          {{ else }}
+          L'actualité suivant
+          {{ end }}
+        </h2>
+        {{ with .NextInSection }}
+          {{ .Scratch.Set "big" false }}
+          {{ partial "article-preview.html" . }}
+        {{ end }}
+        {{ with .PrevInSection }}
+          {{ .Scratch.Set "big" false }}
+          {{ partial "article-preview.html" . }}
+        {{ end }}
+      </aside>
     </div>
   </div>
 {{ end }}

layouts/home.html

@@ -8,46 +8,15 @@
         {{ $first := index (first 1 $lastnews) 0 }}
         {{ $others := after 1 $lastnews }}
         {{ with $first }}
-        <div class="post last">
-          <div class="picture">
-            {{ $image := .Resources.GetMatch (default "*" .Params.image) }}
-            {{ $resized := $image.Fill "220x220 Center"}}
-            <a href="{{ .RelPermalink }}">
-              <img src="{{ $resized.RelPermalink }}" alt="{{ .RenderString .Title }}" />
-            </a>
-          </div>
-          <div class="details">
-            <div class="info">
-              <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Day }} {{ index $.Site.Data.mois (printf "%d" .Date.Month) }} {{ .Date.Year }}</time>
-            </div>
-            <h2 title="{{ .RenderString .Title }}"><a href="{{ .RelPermalink }}">{{ .RenderString .Title }}</a></h2>
-            <div class="text">
-              {{ .Content | truncate 280 }}
-            </div>
-          </div>
-        </div>
+          {{ .Scratch.Set "big" true }}
+          {{ partial "article-preview.html" . }}
         {{ end }}
         {{ range $others }}
-        <div class="post ">
-          <div class="picture">
-            {{ $image := .Resources.GetMatch (default "*" .Params.image) }}
-            {{ if $image }}
-              {{ $resized := $image.Fill "100x100 Center"}}
-              <a href="{{ .RelPermalink }}">
-                <img src="{{ $resized.RelPermalink }}" alt="{{ .Title }}" />
-              </a>
-            {{ end }}
-          </div>
-          <div class="details">
-            <span><time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Day }} {{ index $.Site.Data.mois (printf "%d" .Date.Month) }} {{ .Date.Year }}</time></span>
-            <h3 title="{{ .Title }}"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
-            <div class="text">
-              {{ .Content | truncate 200 }}
-            </div>
-          </div>
-        </div>
+          {{ partial "article-preview.html" . }}
         {{ end }}
-        <a href="/actualites">Voir toutes les actualités</a>
+        <p>
+          <a href="/actualites">Voir toutes les actualités</a>
+        </p>
       </div>
       <div class="opening">
         {{ .Content }}

layouts/partials/article-preview.html

@@ -0,0 +1,30 @@
+{{ $isBig := default false (.Scratch.Get "big") }}
+{{ $title := .RenderString .Title }}
+{{ $titleWithoutHTML := $title | plainify }}
+{{ $pictureSize := cond $isBig "220x220 Center" "100x100 Center" }}
+{{ $truncateSize := cond $isBig 180 90}}
+<div class="post{{ if $isBig }} big{{ end }}">
+  <div class="picture">
+    {{ $image := .Resources.GetMatch (default "*" .Params.image) }}
+    <a href="{{ .RelPermalink }}">
+      {{ if $image }}
+      {{ $resized := $image.Fill $pictureSize}}
+      <img src="{{ $resized.RelPermalink }}" alt="{{ $titleWithoutHTML }}" />
+      {{ end }}
+    </a>
+  </div>
+  <div class="details">
+    <small>
+      <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Day }} {{ index $.Site.Data.mois (printf "%d" .Date.Month) }} {{ .Date.Year }}</time>
+    </small>
+    {{ if $isBig }}
+    <h2 title="{{ $titleWithoutHTML }}"><a href="{{ .RelPermalink }}">{{ $title }}</a></h2>
+    {{else}}
+    <h3 title="{{ $titleWithoutHTML }}"><a href="{{ .RelPermalink }}">{{ $title }}</a></h3>
+    {{ end }}
+    <div class="text">
+      {{ $ellipsis := print " <a href='" .RelPermalink "'>…</a>" | safeHTML }}
+      {{ .Content | plainify | htmlUnescape | truncate $truncateSize $ellipsis }}
+    </div>
+  </div>
+</div>

layouts/partials/footer.html

@@ -13,11 +13,11 @@
       </p>
     </div>
     <div class="logo">
-      <img width="135" height="163" src="/icons/logo-footer.png" alt="Commune de Crémeaux" />
+      <img width="130" height="160" src="/icons/logo-footer_blanc.svg" alt="Commune de Crémeaux" />
     </div>
     <div class="horaire">
       <h3>Horaire d'ouverture<br>au public :</h3>
-      <p>Lundi, mardi, jeudi et vendredi : 8h30 à 12h15</p>
+      <p>Lundi, mardi, jeudi et vendredi : <br>8h30 à 12h15</p>
       <p>Mercredi : 9h15 à 12h15</p>
     </div>
   </div>

layouts/partials/header.html

@@ -1,22 +1,18 @@
-{{ $imageSize := cond .IsHome "1920x850 Top" "1920x450 Center" }}
+{{ $imageSizeSmall := cond .IsHome "600x600 Top" "600x400 Center" }}
+{{ $imageSizeBig := cond .IsHome "1920x850 Top" "1920x450 Center" }}
 <header class="header{{ if .IsHome }} home{{ end }}">
-  {{ if .Resources.ByType "image" }}
-    {{ $image := .Resources.GetMatch (default "*" .Params.image) }}
-    {{ if $image }}
-      {{ $resized := $image.Fill $imageSize }}
-      <img class="hero" src="{{ $resized.RelPermalink }}" />
-    {{ end }}
-  {{ else }}
-    {{ $headless := .Site.GetPage "/" }}
-    {{ $image := $headless.Resources.GetMatch "*" }}
-    {{ $resized := $image.Fill $imageSize }}
-    <img class="hero" src="{{ $resized.RelPermalink }}" />
+  {{ $headless := .Site.GetPage "/" }}
+  {{ $image := default ($headless.Resources.GetMatch "*") (.Resources.GetMatch (default "*" .Params.image)) }}
+  {{ if $image }}
+    {{ $resizedSmall := $image.Fill $imageSizeSmall }}
+    {{ $resizedBig := $image.Fill $imageSizeBig }}
+    <img class="hero no-print" src="{{ $resizedSmall.RelPermalink }}" srcset="{{ $resizedSmall.RelPermalink }} 600w, {{ $resizedBig.RelPermalink }} 1920w" sizes="(max-width: 600px) 500px, 1920px" />
   {{ end }}
   <nav class="nav">
     <div class="container">
       <div class="logo">
         <a href="/" class="">
-          <img src="/icons/logo-header.png" alt="Blason de Crémeaux" />
+          <img src="/icons/logo-entete-200x70.svg" alt="Blason de Crémeaux" />
         </a>
       </div>
       <button class="open-button">≡ Menu</button>

layouts/partials/maire.html

@@ -1,6 +1,6 @@
 {{ $headless := .Site.GetPage "/viemunicipale/lemotdumaire" }}
-<div class="maire">
+<p class="maire">
   {{ $image := $headless.Resources.GetMatch "maire.jpg" }}
   {{ $resized := $image.Resize "300x" }}
   <img class="round" src="{{ $resized.RelPermalink }}" alt="Didier PONCET" />
-</div>
+</p>