✨ Astro stuff, admo, content, etc.

astro-python-fr/astro.config.mjs

@@ -1,13 +1,19 @@
 import { defineConfig } from "astro/config";
-
+import remarkToc from "remark-toc";
 import mdx from "@astrojs/mdx";
 
 // https://astro.build/config
 export default defineConfig({
+  experimental: {
+    assets: true,
+  },
   integrations: [
     mdx({
       syntaxHighlight: "shiki",
       shikiConfig: { theme: "github-dark" },
+      // Links don't work as expected
+      // remarkPlugins: [[remarkToc, { heading: "Table des matières" }]],
+      //
     }),
   ],
 });

astro-python-fr/package.json

@@ -14,6 +14,8 @@
     "@fontsource-variable/fira-code": "^5.0.8",
     "@fontsource-variable/inter": "^5.0.8",
     "astro": "^2.10.13",
-    "astro-icon": "^0.8.1"
+    "astro-icon": "^0.8.1",
+    "rehype-toc": "^3.0.2",
+    "remark-toc": "^8.0.1"
   }
 }

astro-python-fr/src/components/Admonition.astro

@@ -2,11 +2,12 @@
 import { Icon } from "astro-icon";
 
 interface Props {
-  type?: "note" | "warning";
+  type?: "note" | "solution" | "warning";
   label?: string;
+  open?: boolean;
 }
 
-let { type = "note", label = undefined } = Astro.props;
+let { type = "note", label = undefined, open = true } = Astro.props;
 
 function capitalize(word: string) {
   return word.charAt(0).toUpperCase() + word.slice(1);
@@ -23,17 +24,21 @@ const styles = {
     light: "#ffedd5",
     dark: "#ea580c",
   },
+  solution: {
+    icon: "bulb",
+    light: "#fbcfe8",
+    dark: "#db2777",
+  },
 };
 
 const { icon, light, dark } = styles[type];
 label = label ? label : capitalize(type);
 
-console.log(`tabler:${icon}`);  
-
+console.log(`tabler:${icon}`);
 ---
 
 <aside>
-  <details open>
+  <details open={open}>
     <summary
       style="display:flex;align-items:center;justify-content:space-between;"
     >
@@ -44,14 +49,8 @@ console.log(`tabler:${icon}`);
         <span style="font-weight:500;">{label}</span>
       </span>
       <span class="minmax">
-        <Icon
-          class="closed"
-          name="tabler:arrows-maximize"
-        />
-        <Icon
-          class="open"
-          name="tabler:arrows-minimize"
-        />
+        <Icon class="closed" name="tabler:arrows-maximize" />
+        <Icon class="open" name="tabler:arrows-minimize" />
       </span>
     </summary>
     <div class="content">

astro-python-fr/src/env.d.ts

@@ -1 +1 @@
-/// <reference types="astro/client" />
+/// <reference types="astro/client-image" />

astro-python-fr/src/layouts/MDXLayout.astro

@@ -22,6 +22,10 @@ const { title, description } = frontmatter;
         font-family: "Inter Variable", sans-serif;
       }
 
+      h2 {
+        margin-top: 64px;
+      }
+
       pre.astro-code { /* pre:has(> code) support not there yet */
         border-radius: 0.25rem;
         overflow-x: auto;
@@ -30,6 +34,9 @@ const { title, description } = frontmatter;
       code {
         font-family: "Fira Code Variable", sans-serif;
       }
+      pre > code {
+        line-height: 1rem;
+      }
     </style>
     <style>
       main {

astro-python-fr/src/pages/snake-1.mdx

@@ -6,37 +6,17 @@ license: "[CC BY 4.0](https://creativecommons.org/licenses/by/4.0/)"
 layout: ../layouts/MDXLayout.astro
 ---
 
----
-
-🙏 Projet original par Aurélien Noce ([@ushu](https://github.com/ushu)).
+import Admonition from '/src/components/Admonition.astro';
+import { Image } from 'astro:assets';
 
----
 
-## Sandbox
+import snake from "/src/assets/snake.jpg";
 
-import Admonition from '/src/components/Admonition.astro'
+<Image src={snake} alt="Boa constrictor by Jan Kopřiva"/>
 
-<Admonition type="note">
-Hey dude! I can see you now!
-```python
-import pyxel
+Projet original par Aurélien Noce (aka [@ushu](https://github.com/ushu)).
 
-def update():
-    if pyxel.btnp(pyxel.KEY_Q):
-        pyxel.quit()
-
-def draw():
-    pyxel.cls(0)
-    pyxel.text(56, 54, "Hello, Snake!", pyxel.frame_count % 16)
-
-pyxel.init(160, 120, title="Hello Pyxel")
-pyxel.run(update, draw)
-```
-</Admonition >
-
-<Admonition type="warning" label="🐺 Attention les p'tits loups !">
-Nan rien, c'est un test ...
-</Admonition>
+{/* ## Table des matières */}
 
 ## Introduction
 
@@ -46,7 +26,7 @@ d'un programme complet.
 
 Son sujet est un standard du jeu vidéo, le 🐍 [snake].
 
-![[🎮 Snake!](https://kitao.github.io/pyxel/wasm/examples/07_snake.html) ;
+[[🎮 Snake!](https://kitao.github.io/pyxel/wasm/examples/07_snake.html) ;
 une version classique du snake, réalisée avec la plate-forme de retro-gaming
 Python [Pyxel](https://github.com/kitao/pyxel).](images/snake-pyxel.jpg)
 
@@ -85,29 +65,70 @@ pyxel.run(update, draw)
 
 ## Comment ça marche ?
 
-- 🗔 **Fenêtre.** Agrandissez la fenêtre du jeu -- initialement 300x300 --
-  pour adopter une taille de votre choix.
+**TODO:**
+
+  - couleurs: faire le tour des possibles, renvoyer sur la "doc"?
 
-- ⏲️ **Horloge.** Dans l'appel à la fonction `clock.tick`,
+  - Text: comprendre la taille (fixe) de chaque caractère,
+    display d'une "grille" de caractères., comprendre comment est
+    placé le "Hello world!", ajuster le programme pour que le texte
+    soit toujours centré (même si plusieurs lignes ?).
 
-  - remplacez l'argument `1` par `2` (puis exécutez le programme),
+## Nombre d'images par seconde
 
-  - procédez de même avec `5`,
+La fonction `time.time` de la bibliothèque standard Python renvoie le temps 
+écoulé en secondes depuis le 1er janvier 1970 à midi.
 
-  - puis supprimez (ou commentez) l'appel à `clock.tick`.
+```
+>>> import time
+>>> time.time()
+1692980870.0990813
+>>> time.time()
+1692980871.2445116
+>>> time.time()
+1692980872.3245282
+```
+Utilisez-là pour mesurer le temps qui s'écoule entre deux appels à la fonction
+`draw` de Pyxel. Puis, affichez le nombre d'images par seconde 
+(ou FPS pour *frames per second*) dans le coin en haut à gauche de la fenêtre.
+
+<video controls width="768">
+  <source src="/videos/fps.webm" type="video/webm" />
+</video>
 
-  Que se passe-t'il dans chaque cas ?
-  A votre avis, quel est le rôle de la fonction `clock.tick`
-  et de son argument ?
 
-- 🖌️ **Affichage.**
-  Que se passe-t'il si l'on commente la ligne `pygame.display.update()` ?
-  Savez-vous expliquer ce phénomène ?
+<Admonition type="solution" open={false} >
+```python
+import math
+import time
+import pyxel
+
+def update():
+    if pyxel.btnp(pyxel.KEY_Q):
+        pyxel.quit()
+
+def draw():
+    global t
+    t_new = time.time()
+    dt = t_new - t
+    t = t_new
+    fps = 1.0 / dt
+    pyxel.cls(0)
+    pyxel.text(0, 0, f"fps: {int(round(fps))}", 7)
+
+pyxel.init(160, 120, title="🐍 Snake")
+t = time.time()
+pyxel.run(update, draw)
+```
+</Admonition>
+
+## Evènements
 
-- 🎨 **Couleurs.** Faites en sorte que les couleurs qui s'affichent
-  soient toujours aléatoires, mais uniquement parmi des nuances de bleu.
+  - évènement claviers: détecter les flèches, afficher les symboles,
+    avec ceux qui sont pressés d'une couleur différente (plus vive).
 
-  🗝️ On pourra consulter l'annexe ["Codes RGB"](#annexe--codes-rgb).
+  - éventuellement: "P" pour pause ? Plus rien n'est mis à jour ?
+   (sauf la détection de la touche "P")
 
 ## Événements
 
@@ -162,7 +183,7 @@ Nous allons commencer par construire notre plateau de jeu ainsi :
 Pour vérifier la validité de ce plateau de jeu,
 écrivez un programme qui dessine un damier :
 
-![](images/damier.png)
+{/* ![](images/damier.png) */}
 
 🗝️ Vous pouvez utiliser la méthode [`pygame.draw.rect`](https://www.pygame.org/docs/ref/draw.html#pygame.draw.rect) :
 
@@ -199,7 +220,7 @@ pour obtenir un schéma comme suit ;
 disons pour fixer les idées que dans ce cas de figure `[10, 15]` est la queue
 et `[12, 15]` est la tête :
 
-![](images/serpent.png)
+{/* ![](images/serpent.png) */}
 
 <details>
 <summary>
@@ -253,7 +274,7 @@ Ensuite, nous allons faire bouger le serpent :
 - à chaque itération de la boucle, nous pouvons déplacer le serpent dans
   cette direction en "ajoutant" ce vecteur à la position de la tête du serpent
 
-![](images/serpent-bouge.gif)
+{/* ![](images/serpent-bouge.gif) */}
 
 Une fois que le serpent bouge, ajouter les commandes pour se déplacer dans
 les 4 directions, en appuyant sur les touches de direction du clavier.
@@ -333,7 +354,7 @@ On va procéder comme suit:
   on place un nouveau fruit à une position aléatoire
   et on allonge le serpent d'une case
 
-  ![](images/manger.gif)
+  {/* ![](images/manger.gif) */}
 
 <details>
 <summary>