Now possible to modify user avatar

content/users/4180d747-da58-4428-addd-8db36e5d5ad0/_index.md

@@ -5,6 +5,7 @@ date: 2022-11-07T12:56:40+01:00
 ac_create:
 - /pages/1er-quiz/_index
 groups: test
+featured_image: ../../assets/users/d10c6d1c-f539-4084-9ff9-95a6305d7278.jpg
 ---
 
 Bienvenue sur votre page de joueur.

themes/acoeur/assets/ananke/css/custom.css

@@ -125,6 +125,7 @@ body.users .ac_choice input[type="radio"]:checked + label.text {
 	border-radius: 0.2em;
 }
 
+aside#actions input#cover,
 aside#actions input#file {
 	display: none;
 }

themes/acoeur/assets/js/author.js

@@ -1,7 +1,3 @@
-// Move up when a page is absent
-if (document.head.querySelector('meta[content="/404.html"]'))
-  document.location.assign('..')
-
 // Add the proper absolute url to invitation link
 document.querySelectorAll('aside#actions #invitation')
   .forEach(elt => elt.href += document.location.href)
@@ -14,7 +10,7 @@ document.querySelectorAll('aside#actions #create')
   .forEach(elt => elt.onclick = () => {
     const url = `${topSection}/${uuid()}`
 
-    fetch(`/edit/${url}.create`, { method: 'PUT', body: topSection })
+    fetch(`/edit/${url}.create`, { credentials: 'include', method: 'PUT', body: topSection })
       .then(() => sleep(1))
       .then(() => window.location.assign('/' + url))
       .catch(error => console.error(`Error creating #{topSection}`, error))
@@ -30,6 +26,20 @@ document.querySelectorAll('aside#actions #delete')
   })
 
 
+document.querySelectorAll('aside#actions input#cover')
+  .forEach(elt => elt.onchange = () => {
+    const header = document.querySelector('body > header')
+    const url = `/assets/users/${uuid()}.${elt.files[0].name.split('.').reverse()[0]}`
+    const body = `featured_image: ../..${url}`
+
+    fetch(`/edit${url}`, { method: 'PUT', body: elt.files[0] })
+      .then(() => fetch(`${document.body.dataset.editUrl}.prop`, { method: 'PUT', body: body }))
+      .then(() => header.style.backgroundImage = null)
+      .then(() => sleep(1))
+      .then(() => header.style.backgroundImage = `url("../..${url}")`)
+      .catch(error => console.error(`Error uploading ${elt.files[0].name}`, error))
+  })
+
 document.querySelectorAll('aside#actions input#file')
   .forEach(elt => elt.onchange = () =>
     [...elt.files].forEach(file =>

themes/acoeur/assets/js/setup.js

@@ -1,3 +1,7 @@
+// Move up when a page is absent
+if (document.head.querySelector('meta[content="/404.html"]'))
+  document.location.assign('..')
+
 document.body.dataset.editUrl = '/edit/' + file.replace('.md', '')
 
 const topSection = window.location.pathname.split('/')[1]

themes/acoeur/i18n/fr.yaml

@@ -7,6 +7,7 @@ pages:
   delete: 🗑 Supprimer quiz
 users:
   create: 👤 Créer un nouveau joueur
+  cover: 🎭 Avatar
   delete: 🗑 Supprimer joueur
   send: 📧 Envoyer invitation
 assets:

themes/acoeur/layouts/_default/assets.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 <section class="pa3 pa4-ns nested-copy-line-height">
    <aside id="actions" class="w-30-l mt4-l fr tc">
-      <button class="br-pill pa3 pointer"><label for="file">{{ T (print .Section ".create") }}</label></button>
+      <button class="br-pill f6 link dim pa3 dib white bg-dark-gray pointer"><label for="file">{{ T (print .Section ".create") }}</label></button>
       <input id="file" multiple name="file" type="file"/>
    </aside>
 

themes/acoeur/layouts/_default/group.html

@@ -12,11 +12,12 @@
   {{ $featured_image := partial "func/GetFeaturedImage.html" . }}
   <article class="bb b--black-10 w-100 mb4 bg-white pa3-ns flex flex-column flex-row-ns relative">
     {{ if $featured_image }}
-    <img src="{{ $featured_image }}" class="img" alt="image from {{ .Title }}">
+    <div class="mb4 mb0-ns w-100 w-40-ns {{ cond (eq $.Site.Language.LanguageDirection "rtl") "pl3-ns" "pr3-ns" }}">
+      <img src="{{ $featured_image }}" class="img" alt="image from {{ .Title }}">
+    </div>
 
     {{ else }}
-    <a class="hero-pill fl w-10-ns bg-black"
-       href="{{.RelPermalink}}"></a>
+    <a class="hero-pill fl w-10-ns bg-black" href="{{.RelPermalink}}"></a>
     {{ end }}
 
     <h1 class="f3 fw1 athelas lh-title mh3">

themes/acoeur/layouts/_default/pages.html

@@ -3,12 +3,12 @@
    <aside id="actions" class="w-30-l mt4-l fr tc">
       {{ if .Parent.IsHome }}
       <button id="create"
-              class="br-pill f6 link dim br3 ph3 pv2 mb2 dib white bg-dark-gray pointer">
+              class="br-pill f6 link dim pa3 mb2 dib white bg-dark-gray pointer">
          {{ T (print .Section ".create") }}
       </button>
       {{ else if .Parent.Parent.IsHome }}
       <button id="delete"
-              class="br-pill f6 link dim br3 ph3 pv2 mb2 dib white bg-dark-gray pointer"
+              class="br-pill f6 link dim pa3 mb2 dib white bg-dark-gray pointer"
               data-confirm="{{ T (print .Section ".delete") }}?">
          {{ T (print .Section ".delete") }}
       </button>

themes/acoeur/layouts/_default/summary-with-image.html

@@ -9,9 +9,9 @@
       <img src="{{ $featured_image }}" class="img" alt="image from {{ .Title }}">
     </a>
   </div>
+
   {{ else }}
-  <a class="hero-pill fl w-10-ns bg-black mr3"
-     href="{{.RelPermalink}}"></a>
+  <a class="hero-pill fl w-10-ns bg-black mr3" href="{{.RelPermalink}}"></a>
   {{ end }}
 
   <div class="blah w-100{{ if $featured_image }} w-60-ns{{ else }} w-90-ns{{ end }}">

themes/acoeur/layouts/_default/users.html

@@ -4,18 +4,24 @@
    <aside id="actions" class="w-30-l mt4-l fr tc">
       {{ if .Parent.IsHome }}
       <button id="create"
-              class="br-pill f6 link dim br3 ph3 pv2 mb2 dib white bg-dark-gray pointer">
+              class="br-pill f6 link dim pa3 mb2 dib white bg-dark-gray pointer">
          {{ T (print .Section ".create") }}
       </button>
+
       {{ else if .Parent.Parent.IsHome }}
+      <button class="br-pill f6 link dim pa3 mb2 dib white bg-dark-gray pointer">
+         <label for="cover">{{ T (print .Section ".cover") }}</label>
+      </button>
+      <input id="cover" name="cover" type="file"/>
+
       <button id="delete"
-              class="br-pill f6 link dim br3 ph3 pv2 mb2 dib white bg-dark-gray pointer"
+              class="br-pill f6 link dim pa3 mb2 dib white bg-dark-gray pointer"
               data-confirm="{{ T (print .Section ".delete") }}?">
          {{ T (print .Section ".delete") }}
       </button>
 
       <a href="mailto:?subject=invitation&body={{.Content | plainify}}"
-         class="br-pill f6 link dim br3 ph3 pv2 mb2 dib white bg-dark-gray"
+         class="br-pill f6 link dim pa3 mb2 dib white bg-dark-gray"
          id="invitation">
          {{ T (print .Section ".send") }}
       </a>