Refactor to Ember

.github/workflows/deploy.yml

@@ -0,0 +1,34 @@
+name: Build and Deploy
+on:
+  push:
+    branches:
+      - master
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/[email protected]
+
+      - name: Install pnpm
+        uses: pnpm/[email protected]
+        with:
+          version: 8.15.6
+
+      - name: Use Node.js 16
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: pnpm
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Build
+        run: pnpm build
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist

app/components/adr-article-button.hbs

@@ -0,0 +1,13 @@
+<a class="pure-button pure-button--black article-button"
+  target="_blank"
+  rel="noopener noreferrer"
+  href={{@link}}>
+  <div class="pure-g">
+    <div class="article-button-icon pure-u-3-24">🔗</div>
+    <div class="pure-u-21-24">
+      <strong>{{@title}}</strong>
+      <br />
+      <span>sur {{@platform}}</span>
+    </div>
+  </div>
+</a>

app/components/adr-book-details-feedback.hbs

@@ -0,0 +1,7 @@
+<h2>🦊📖 Les retours de lecture</h2>
+{{#each @quotes as |quote|}}
+  <AdrQuote
+    @content={{quote.content}}
+    @author={{quote.author}}
+></AdrQuote>
+{{/each}}

app/components/adr-book-details.hbs

@@ -0,0 +1,19 @@
+<div id={{@book}} class="infobox">
+  <div class="centered">
+    {{#if (gt @slots 1)}}
+      <button
+        class="pure-button pure-button--black"
+        type="button"
+        {{on "click" this.previous}}>
+        &lt;
+      </button>
+      <button
+        class="pure-button pure-button--black"
+        type="button"
+        {{on "click" this.next}}>
+        &gt;
+      </button>
+    {{/if}}
+    {{yield}}
+  </div>
+</div>

app/components/adr-book-details.js

@@ -0,0 +1,35 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+import { select } from '../utilities/generics';
+
+export default class AdrBookDetailsComponent extends Component {
+  @tracked current = this.args.current;
+
+  @action
+  previous() {
+    // Hide the current slot
+    let wrapperId = this.args.book;
+    select(`${wrapperId}-${this.current}`).classList.remove('show-from-left');
+    select(`${wrapperId}-${this.current}`).classList.remove('show-from-right');
+    select(`${wrapperId}-${this.current}`).classList.add('hidden');
+    // Compute the new current slot and do the changes
+    this.current = this.current > 0 ? this.current - 1 : this.args.slots - 1;
+    select(`${wrapperId}-${this.current}`).classList.remove('hidden');
+    select(`${wrapperId}-${this.current}`).classList.add('show-from-left');
+  }
+
+  @action
+  next() {
+    // Hide the current slot
+    let wrapperId = this.args.book;
+    select(`${wrapperId}-${this.current}`).classList.remove('show-from-left');
+    select(`${wrapperId}-${this.current}`).classList.remove('show-from-right');
+    select(`${wrapperId}-${this.current}`).classList.add('hidden');
+    // Compute the new current slot and do the changes
+    this.current = this.current + 1 < this.args.slots ? this.current + 1 : 0;
+    select(`${wrapperId}-${this.current}`).classList.remove('hidden');
+    select(`${wrapperId}-${this.current}`).classList.add('show-from-right');
+  }
+}

app/components/adr-book-links.hbs

@@ -0,0 +1,8 @@
+<div class="book-links">
+  <AdrShopButton @link={{@bookLink}}>
+    Commander le livre ({{@price}}€)
+  </AdrShopButton>
+  <AdrShopButton @link={{@ebookLink}}>
+    Télécharger l'e-book (0€)
+  </AdrShopButton>
+</div>

app/components/adr-quote.hbs

@@ -0,0 +1,4 @@
+<div class="quote">
+  <q><em>{{@content}}</em></q>
+  <span>-&nbsp;<strong>{{@author}}</strong></span>
+</div>

app/components/adr-shop-button.hbs

@@ -0,0 +1,9 @@
+<div>
+  <a class="pure-button pure-button--black"
+    target="_blank"
+    rel="noopener noreferrer"
+    href={{@link}}
+  >
+    {{yield}}
+  </a>
+</div>

app/components/books/adr-ede.hbs

@@ -0,0 +1,34 @@
+<div id="ede" class="book-background background--ede">
+  <div class="pure-u-1 pure-u-sm-1 pure-u-md-12-24 pure-u-lg-10-24">
+    <div class="book padding--large">
+      <h1>L'Enfant des Esprits</h1>
+      <p>Les esprits existent-ils vraiment&nbsp;?</p>
+      <p>Certains le pensent, et leurs croyances influencent les pas des enfants de ce monde&nbsp;; ceux de cette jeune Rêveuse, cloîtrée dans son temple sous-marin, ou ceux de ce garçon maudit, résigné à un avenir fade.</p>
+      <p>Entre relique du Rêve qui ne fonctionne plus et manifestation de pouvoirs étranges, c'est ensemble qu'ils quittent leur foyer en quête de réponses. Mais le destin les sépare déjà et les entraine en un même lieu&nbsp;: la mystérieuse Académie des Renards.</p><p>On raconte qu'on peut tout y apprendre... y apprendront-ils l'évidence qui se cache en eux&nbsp;?</p>
+      {{!-- <adr-book-links file="enfant-des-esprits-extrait.pdf" ebook-link="https://ko-fi.com/s/3a9743c5de"></adr-book-links>  --}}
+      {{!-- <p>L'Enfant des Esprits est aussi disponible sur <a href="https://www.kobo.com/fr/fr/ebook/l-enfant-des-esprits" target="_blank" rel="noopener">Kobo</a>.</p> --}}
+      <br />
+      <p>L'Enfant des Esprits est en cours de ré-écriture, en vue d'améliorer le texte avant l'impression d'un livre broché.</p>
+    </div>      
+  </div>
+  <div class="pure-u-1 pure-u-sm-1 pure-u-md-12-24 pure-u-lg-14-24">
+    <div class="padding--large">
+      <AdrBookDetails @book="book-info-ede" @slots={{1}} @current={{0}}>
+        <div id="book-info-ede-0">
+          <div class="margin-bottom--medium">
+            <AdrBookDetailsFeedback @quotes={{array
+              (hash
+                author="Guillaume"
+                content="Les personnages ont tous une personnalité unique et voyagent dans des lieux tous très différents qu'on prend plaisir à découvrir. Il y a une bonne immersion dans l'univers et l'histoire garde le tout très rythmé. J'ai particulièrement apprécié les chapitres dans le désert."
+              )
+              (hash
+                author="Ana"
+                content="J'ai beaucoup aimé par contre je me demandais s'il y a une suite, histoire de savoir ce que deviennent Ben et Sun..."
+              )
+              }} />
+          </div>
+        </div>
+      </AdrBookDetails>
+    </div>
+  </div>
+</div>

app/components/books/adr-suzuha.hbs

@@ -0,0 +1,70 @@
+<div id="suzuha" class="book-background background--suzuha">
+  <div class="pure-u-1 pure-u-sm-1 pure-u-md-12-24 pure-u-lg-10-24">
+    <div class="book padding--large">
+      <h1>Suzuha</h1>
+      <p>Les enfants de l'île aux voix naissent sans voix ni reflet. Melle est l'une de ces enfants. Comme toutes les filles, elle restera muette toute sa vie.</p>
+      <p>Mais quand des étrangers débarquent sur l'île, son monde vacille. Une femme lui parle pour la première fois&nbsp;!</p>
+      <p>Sur un coup de tête, l'aventure commence. Melle embarque vers une terre où les femmes ont une voix, où les femmes peuvent apprendre l'art du combat.</p>
+      <p>Cette terre... Melle y trouvera-t-elle sa voix&nbsp;?</p>
+      <AdrBookLinks
+        @bookLink="https://ko-fi.com/s/f11811b37b"
+        @ebookLink="https://ko-fi.com/s/a9d904a96b"
+        @price="12,90"
+      />
+      <p>Suzuha est aussi disponible sur la <a href="https://librairiejeunespousses.fr/produit/suzuha-de-marine-dunstetter/" target="_blank" rel="noopener noreferrer">librairie Jeunes Pousses</a> et sur <a href="https://www.kobo.com/fr/fr/ebook/suzuha" target="_blank" rel="noopener noreferrer">Kobo</a>.</p>
+    </div>
+  </div>
+  <div class="pure-u-1 pure-u-sm-1 pure-u-md-12-24 pure-u-lg-14-24">
+    <div class="padding--large">
+      <AdrBookDetails @book="book-info-suzuha" @slots={{3}} @current={{1}}>
+        <div id="book-info-suzuha-0" class="hidden">
+          <div class="margin-bottom--medium">
+            <AdrBookDetailsFeedback @quotes={{array
+              (hash
+                author="Sissicat"
+                content="Dès les premières lignes, on est embarqué dans ce voyage extraordinaire mêlant magie et combat et on ne veut plus quitter l'héroïne jusqu'à la fin. Bien écrit et facile à lire, c'est un livre super pour les jeunes."
+              )
+              (hash
+                author="Dadone"
+                content="J'ai adoré ce livre car je trouve Suzuha magnifique et je trouve qu'elle avait raison sur le point que les femmes ont le droit d'avoir une voix."
+              )
+            }} />
+          </div>
+        </div>
+        <div id="book-info-suzuha-1">
+          <h2>🦊✨ Le <em>booktrailer</em></h2>
+          <div class="video-container centered">
+            <iframe
+              width="430"
+              height="242"
+              src="https://www.youtube.com/embed/9o6yO7G0q9Y?si=0YYtz2_WtpwFL2CU" 
+              title="Lecteur de vidéo YouTube, Booktrailer de Suzuha"
+              frameborder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              allowfullscreen
+              lazy="true" 
+            />
+          </div>
+          <div class="video-link centered">
+            <a href="https://www.youtube.com/embed/9o6yO7G0q9Y?si=0YYtz2_WtpwFL2CU" rel="noopener noreferrer">
+              Regarder sur YouTube
+            </a>
+          </div>
+        </div>
+        <div id="book-info-suzuha-2" class="hidden">
+          <h2>🦊📚 Articles et ressources</h2>
+          <AdrArticleButton
+            @title="7 raisons de lire (ou pas) Suzuha"
+            @link="https://panodyssey.com/fr/article/culture/7-raisons-de-lire-ou-pas-suzuha-j7n8cjh4f5js"
+            @platform="Panodyssey"
+          ></AdrArticleButton>
+          <AdrArticleButton
+            @title="Page Babelio du livre"
+            @link="https://www.babelio.com/livres/Dunstetter-LAcademie-des-renards-Suzuha/1212187"
+            @platform="Babelio (⚠️ Contient des extraits obsolètes, le texte a été amélioré)"
+          ></AdrArticleButton>
+        </div>
+      </AdrBookDetails>
+    </div>   
+  </div>
+</div>

app/components/books/adr-vdy.hbs

@@ -0,0 +1,39 @@
+<div id="le-voeu-de-yoko" class="book-background background--vdy">
+  <div class="pure-u-1 pure-u-sm-1 pure-u-md-12-24 pure-u-lg-10-24">
+    <div class="book padding--large">
+      <h1>Le Voeu de Yoko</h1>
+      <h2>I. Renaissance</h2>
+      <p>Tobias Fènnel est un jeune homme devenu acariâtre et très affaibli depuis un sort qui a mal tourné. Privé de sa magie, fardeau pour sa famille, son existence a perdu tout son sens.</p>
+      <p>Pour le guérir, son père place ses derniers espoirs en une chamane du Pays Rouge. Tobias accepte avec fatalité cet exil et s'apprête à attendre la mort loin de chez lui.</p>
+      <p>Qui aurait cru que cette région mystérieuse, cachée derrière le Mur d'Athos, réveillerait en lui de tels sentiments&nbsp;?</p>
+      <p>Mais le désir de vivre ne suffit pas toujours à donner un sens à la vie. Tobias saura-t-il trouver, dans l'avenir qui se dessine, assez de détermination pour combattre son état&nbsp;? et assez d'inspiration pour partager ce nouvel amour du Pays Rouge&nbsp;?</p>
+      <a class="pure-button pa"
+        target="_blank" 
+        rel="noopener noreferrer"  
+        href="https://www.plumedargent.fr/histoire/renaissance-1"
+      >
+        Lire sur Plume d'Argent
+      </a>
+    </div>
+  </div>
+  <div class="pure-u-1 pure-u-sm-1 pure-u-md-12-24 pure-u-lg-14-24">
+    <div class="padding--large">
+      <AdrBookDetails @book="book-info-vdy" @slots={{1}} @current={{0}}>
+        <div id="book-info-vdy-0">
+          <div class="margin-bottom--medium">
+            <AdrBookDetailsFeedback @quotes={{array
+              (hash
+                author="Ewjoachim"
+                content="Je l'ai lu d'une traite. J'ai trouvé plutôt énergisant la &ldquo;renaissance&rdquo; du protagoniste, et la subtilité de l'écriture où, à travers le roman, il comprend que c'est moins sa reconstruction physique qui est en jeu, qui est un thème de moins en moins présent au fur et à mesure des pages, et de plus en plus la réinvention de sa personnalité."
+              )
+              (hash
+                author="Mlle Ellute"
+                content="C'est une très belle histoire que celle de Tobias et Yoko. J'ai été transportée dans l'ambiance du pays rouge et apaisée par sa sérénité. En même temps, j'aime beaucoup la réflexion autour de l'isolement dans les traditions : oui c'est exotique et apaisant, mais c'est aussi un enfermement. C'est une histoire douce et intelligente. J'ai hâte de découvrir comment cette histoire va évoluer. Je pense que le développement de Tobias et Yoko sera aussi intéressant que celui de l'univers."
+              )
+            }} />
+          </div>
+        </div>
+      </AdrBookDetails>
+    </div> 
+  </div>
+</div>

app/components/form/adr-question-number.hbs

@@ -0,0 +1,3 @@
+<div class="question-number">
+  <p>{{@questionIndex}}/{{@questionLength}}</p>
+</div>

app/components/form/adr-question.hbs

@@ -0,0 +1,15 @@
+<div>
+  <p>{{@question.label}}</p>
+  {{#each @question.choices as |choice|}}
+    <div>
+      <input 
+        type="radio" 
+        id={{choice.id}} 
+        name="question" 
+        value={{choice.id}} 
+        {{on "input" this.selectAnswer}}
+      >
+      <label for={{choice.id}}>{{choice.label}}</label>
+    </div>
+  {{/each}}
+</div>

app/components/form/adr-question.js

@@ -0,0 +1,8 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+
+export default class FormAdrQuestionComponent extends Component {
+  @action selectAnswer(event) {
+    this.args.onSelectAnswer(event.target.value);
+  }
+}

app/components/form/adr-result-list.hbs

@@ -0,0 +1,11 @@
+<div class="result-list">
+  {{#each this.bookListing as |book index|}}
+    <p 
+      id="result-{{book.id}}" 
+      class="result-item" 
+      {{on-score-change this.results book}}
+    >
+      {{add index 1}}. {{book.title}}
+    </p>
+  {{/each}}
+</div>