relref replaces jekyll's links

content/posts/transition-2.md

@@ -1,6 +1,7 @@
 +++
 title = "transitions II - javascript"
 date = 2020-04-13
+tags = ["html"]
 # layout: code
 +++
 <script>
@@ -131,5 +132,5 @@ Je dois dire que je trouve assez frustrant de ne pas pouvoir déclencher les
 transitions sur les éléments impactés. J'ai essayé, je n'ai rien trouvé de
 concluant.
 
-[la suite]({% post_url html/2020-04-13-transition-3 %})
+[la suite]({{< relref transition-3 >}})
 

content/posts/transition-3.md

@@ -3,7 +3,7 @@ title = "transitions III - css"
 date = 2020-04-13
 # layout: code
 +++
-<script src="{% link html/transition-3.js %}" type="text/javascript"></script>
+<script src="/js/transition-3.js" type="text/javascript"></script>
 
 On a la possibilité de donner des réglages par défaut à nos transitions en css ;
 ça permet d'alléger le javascript, et de contrôler les paramètres de la
@@ -12,16 +12,13 @@ transition depuis le css.
 Ici `move_into(el, destEl)` va utiliser une classe qui durera le temps de la
 transition, qui s'appelera `transition-deplacement`. On pourra y stocker des
 valeurs par défaut pour la transition. Par exemple,
-
+``` js
-{% highlight js %}
+el.style.top = "";
-  el.style.top = "";
+```
-{% endhighlight %}
-
 donnera à l'élément `el` la valeur `top` décrite dans le css. Comme `el`
 appartient à la classe `transition-deplacement` qui dit que `top = 0;` eh ben
 voilà.
-
+``` js
-{% highlight js %}
 function move_into(el, destEl) {
   if(el.classList.contains('transition-deplacement')) {
     console.log('! already movin');
@@ -36,7 +33,7 @@ function move_into(el, destEl) {
       console.log("élément", el, "déclassé");
     });
   }
-{% endhighlight %}
+```
 
 Pour finir, `toggle(el, destEl)` utilisera une autre classe pour déterminer si
 `el` a déjà été ouvert, la classe `ouvert`. Si oui, il le mettra dans le parent
@@ -45,7 +42,7 @@ direct de `destEl`.
 Dans ce cas, on n'utilise même pas cette classe dans le css. Elle ne sert qu'à
 javascript.
 
-{% highlight js %}
+``` js
 function toggle(el, destEl) {
   if(el.classList.contains('ouvert')) {
     el.classList.remove('ouvert');
@@ -55,10 +52,10 @@ function toggle(el, destEl) {
     move_into(el, destEl);
   }
 }
-{% endhighlight %}
+```
 
 Tous ces points sont dans le fichier javascript inclus dans la page à partir de
-[là]({% link html/transition-3.js %}). Et maintenant le html et la
+[là](/js/transition-3.js). Et maintenant le html et la
 prévisualisation :
 ``` html
 <style>
@@ -89,5 +86,5 @@ prévisualisation :
   </div>
 </div>
 ```
-[la suite]({% post_url html/2020-04-13-transition-4 %})
+[la suite]({{< relref transition-4 >}})
 

content/posts/transition-4.md

@@ -3,7 +3,7 @@ title = "transition IV - SVG"
 date = 2020-04-13
 # layout: code
 +++
-<script src="{% link html/transition-4.js %}" type="text/javascript"></script>
+<script src="/js/transition-4.js" type="text/javascript"></script>
 
 Et si c'est un objet SVG qu'on veut déplacer ? Ça fonctionne encore, en
 utilisant `svg.getBoundingClientRect()` pour récupérer la position, et la même
@@ -11,7 +11,7 @@ fonction pour initialiser la position. Pour clarifier, on crée des fonctions qu
 font le tri en fonction du type de l'élément : `initialize_state(el)` et
 `tell_coords(el)`.
 
-{% highlight js %}
+``` js
 function tell_coords(el) {
   var coords = new Object();
   if(el.viewBox === undefined) {
@@ -31,12 +31,12 @@ function initialize_state(el) {
     el.getBoundingClientRect();
   }
 }
-{% endhighlight %}
+```
 
 Ensuite `move_into(el, destEl)` fait le même travail qu'avant, mais
 en appelant les fonctions qu'on a construites.
 
-{% highlight js %}
+``` js
 function move_into(el, destEl) {
   if(el.classList.contains('transition-deplacement')) {
     console.log('! already movin');
@@ -66,12 +66,12 @@ function move_into(el, destEl) {
     el.style.top = "";
   }
 }
-{% endhighlight %}
+```
 
 Le javascript inclus complet est toujours [là][js].
 Enfin le html :
 
-```html
+``` html
 <style>
   span {
     display: inline-block;
@@ -100,4 +100,4 @@ Enfin le html :
   </svg>
 </div>
 ```
-[js]: {% link html/transition-4.js %}
+[js]: /js/transition-4.js

content/posts/transition.md

@@ -1,6 +1,7 @@
 +++
-tite = "transition"
+tite = "transitions css"
 date = 2020-04-13
+tags = ["html"]
 # layout: code
 +++
 <script>
@@ -56,5 +57,5 @@ exemple :
   </span>
 </div>
 ```
-[la suite]({% post_url html/2020-04-13-transition-2 %})
+[la suite]({{% relref transition-2 %}})