jtremesay.org - last articles

JSSG django app

2024-11-28T20:00:00+02:00

Disclaimer: article écrit avec l'assistance de GitHub Copilot.

TL;DR: JSSG le générateur de site statique est maintenant disponible sous forme d'app django.

#MyLife

Vu que ça fait plusieurs mois que je n'ai pas eu à toucher à JSSG (Jtremesay Static Site Generator) alors que dans l'interval j'ai fait plusieurs trucs rigolo sur le site, c'est un signe qu'il était plutôt stable. Je vais donc faire un point dessus.

Donc, JSSG, c'est qu'est-ce que c'est que quoi ?

C'est mon générateur de site statique à moi parce que j'ai des besoins de gros relous et que j'ai un gros syndrome de Not Invented Here.

Mes besoins de gros relous :

le résultat est un site statique, facilement délivrable par un serveur web lambda et deployable virtuellement partout; y compris en utilisant un bon vieux ftp sur un hébergeur gratuit si il le faut !
j'aime pas écrire du html ou me répéter, me faudra un truc qui me permette de prendre du contenu quelque soit son origine, généralement markdown. Mais qui n'aime pas exécuter un flow compliqué orchestré par make pour générer une page spécifique du site parce que l'automatisation a ses raisons que la raison ignore ? (oui, fut un temps, ce post était généré automatiquement à partir d'un export OPML de mon aggrégateur RSS via des scripts et un makefile :D)
maintenant que j'ai découvert les joies de la génération procédurale 2D/3D en typescript, j'veux pouvoir facilement intégrer du front moderne dans le site. donc faut supporter vite ou whatever est le truc à la mode pour compiler du typescript en js; mais pas de single page application. Le JS doit être chargé par page au besoin.
doit avoir une gestion des fichiers statiques (images, css, js, etc.). Par gestion, j'entends collection des statics, transformations nécessaires, et intégration dans le site généré
gestion des liens internes et détection des liens morts: le générateur doit détecter au build time les liens cassés pointant vers des pages ou fichiers inexistants, ainsi que les medias, les scripts et autres css
je veux organiser mon contenu comme je veux, pas comme le générateur le veut. Donc je veux pouvoir mettre mes fichiers markdown où je veux, avec la structure de répertoires que je veux, et que le générateur s'adapte à ça
je veux que ça soit facile à utiliser en local : je tape mon contenu, je sauvegarde, je rafraîchis la page (ou pas d'ailleurs, c'est bien aussi le live reload), et pouf, je vois mes changements

JSSG a connus plusieurs itérations. Tel le bateau de Thésée, il a d'ailleurs était réécrit from scratch plusieurs fois.

Ce fut originellement une app flask. La partie utilisation était bien; mais j'ai pas réussi à en faire un générateur static.

Puis ce fut un assemblage créatif de python, de jinja et de makefile. Ça faisait un contenu static comme je le voulais, mais c'était chiants à utiliser en local.

Au taf, on utilise Django. Et après 4 ans à bosser intensivement avec, j'aime beaucoup. c'est vraiment ma plateforme préféré pour faire dev du web en local. Y'a tout ce qu'il faut : du templating, du live reload, de l'extensibilité, des outils de dev, etc. Sauf que Django c'est pas fait pour générer du contenu statique. Qu'à cela ne tienne. J'ai donc bricolé un bout de code pour collecter les .md des pages et posts, ainsi qu'une commande Django qui exécute les vues des pages et des posts avec tous les .md trouvé et enregistre le résultat dans un répertoire de sortie. Django s'occupe comme un grand des statict avec ./manage.py collectstatic. Ainsi, on se retrouve avec toute la puissance et flexibilité de Django pour développer son site, et un site static tout simple en sortie !

En plus, grace à Django, vous pouvez faire des trucs débilement compliqué tel qu'utiliser une base de données. Wait, une base de données avec un site statique ? Non ! Une base de données utilisé pendant le dev pour générer des pages dynamiques qui seront ensuite capturés au build time :D

Donc si c'est votre truc, vous pouvez tout a fait envisager de transformer JSSG en un CMS pour usage local en profitant des possibilités du backoffice de Django et de la persistance du contenu dans une base de données. Puis utiliser cette DB pour générer la version statique de votre site.

Puis j'ai découvert Distill qui permet de générer des pages statiques à partir de vues Django. C'est sans aucun scrupule que je leur ai délégué la génération des pages statiques. J'ai donc pu me concentrer sur la partie ingestion du contenu.

Depuis, quelqu'un a manifesté son intérêt pour utiliser JSSG. Mais jusque là le code de JSSG était lié de manière trop incestueuse à celui de jtremesay.org. J'ai donc décidé de le séparer dans un repo à part. Mais c'était un peu relou d'avoir jssg aussi mêlé au contenu et devoir maintenir les deux versions, la vanilla et la mienne.

Ce qui nous mene à la version actuelle de JSSG et aussi un changement de paradigme. JSSG N'EST PAS un générateur de site statique. C'est un composant (app) Django à ajouter à votre projet pour simplifier la statification de ce dernier. Ou vu autrement, c'est une plateforme de développement web moderne permettant la création de stite statique. C'est vous qui voyez :shrug:

Installation

JSSG est installable via pip:

$ pip install git+https://github.com/jtremesay/jssg.git

Maintenant, il vous faut ajouter jssg à votre INSTALLED_APPS:

INSTALLED_APPS = [
    ...
    'jssg',
    ...
]

Vous aurez aussi besoin de définir les variables suivantes dans votre settings.py:

JSSG_RSS_LINK: str: L'url de votre site, utilisé dans le flux RSS
JSSG_RSS_TITLE: str: la description de votre site, utilisé dans le flux RSS

Mettez à jour votre urls.py pour déclarer les urls de JSSG:

from jssg.utils import jssg_urls

urlpatterns = [
    # ...
]

# Automatically declare urls for pages, posts and rss feed
urlpatterns += jssg_urls()

Fonctionnement

JSSG va chercher un dossier content dans les applications de votre projet. De cette manière, vous pouvez facilement organiser votre contenu comme vous le souhaitez, en plusieurs applications si cela est nécessaire pour s'adapter à votre complexité. Par exemple pour définir des sous-sites.

Dans ce dossier content, vous devez avoir un dossier posts et un dossier pages. Les fichiers markdown de ces dossiers seront traités pour générer les pages et les posts de votre site.

Exemple d'application utilisant JSSG :

yousapp/
├── apps.py
├── content
│   ├── pages
│   │   ├── doom.md
│   │   └── index.md
│   └── posts
│       ├── 20230531_helloworld.md
│       └── 20250231_DOOM.md
├── front
│   ├── doom
│   │   ├── engine.ts
│   │   ├── lumps.ts
│   │   ├── main.ts
│   │   ├── readers.ts
│   │   ├── types.ts
│   │   ├── view2d.ts
│   │   └── view3d.ts
│   ├── main
│   │   ├── doom.ts
│   │   └── mytsapp.ts
│   └── vite-env.d.ts
├── __init__.py
├── migrations
│   └── __init__.py
├── static
│   └── yousapp
│       ├── doom
│       │   └── doom1.wad
│       ├── files
│       │   └── my_file.txt
│       ├── images
│       │   └── myimage.jpg
│       ├── css
│       │   └── mycss.css
│       ├── theme
│       │   └── favicon.ico
├── storage.py
└── templates
    ├── base.html
    ├── blocks
    │   ├── footer.html
    │   └── header.html
    ├── page.html
    └── post.html

Chaque fichier markdown trouvé sera rendu accessible par Django via une vue et des routes. Ainsi, vous pouvez accéder à votre contenu en local en utilisant les urls générées par Django. JSSG génère aussi une route pour un flux RSS de votre contenu.

Si vous souhaitez gérez vous même les urls de votre contenu, vous pouvez désactiver l'autodiscovery et déclarer les routes à la main tout en profitant des vues de JSSG pour générer le contenu.

Vous pouvez même directement utiliser Distill pour déclarer les routes de vos propres vues pour générer des pages statiques à partir de celles-ci.

Le contenu des fichiers markdown est traité par le moteur de template de Django avant d'être rendu en html. Vous pouvez donc utiliser toute la puissance du langage de template de Django.

Vous pouvez utiliser {% static %} et {% url %} pour référencer vos fichiers statiques et vos urls Django dans le contenu.

Templates

Si vous utilisez les vues de JSSG, vous devez fournir les templates post.html et page.html. Ils doivent être dans le dossier templates d'une de vos applications, n'importe laquelle.

Dans ces template, vous aurez accès à la variable object qui contiendra respectivement un objet Post ou Page selon le type de contenu à afficher.

Exemple de template post.html:

{% extends "base.html" %}

{% block "content" %}
Publié le {{ object.timestamp|date:"Y-m-d" }}.

<h1>{{ object.title }}</h1>
{{ object.content_md|safe }}
{% endblock %}

Exemple de template page.html:

{% extends "base.html" %}

{% block "content" %}
<h1>{{ object.title }}</h1>
{{ object.content_md|safe }}
{% endblock %}

Comme ces vos propres templates, vous êtes libres de faire absolument tous ce que vous voulez.

Contenu

Pour l'instant, JSSG ne supporte que le markdown. Il reprend la convention "front matter" et cherche un header en entête du fichier markdown. Ce header doit être délimité par --- et contenir des clés/valeurs au format key: value. Les clés supportées dépendent du type de contenue. Après le header, le contenu du fichier est traité comme du un template django contenant du markdown.

Document

C'est une abstraction représentant un contenu et ses metadata et destiné à être utilisé pour construire une page. Aucun à priori n'est fait sur le type de contenu ou ses metadata.

Dans le contenu, vous avez accès à l'objet posts contenant la list des Post ordonnés par date de publication décroissante. Principalement utile pour générer des liens vers d'autres posts, tel que sur la page d'accueil.

---
foo: bar
iiii: jjjj
---
blabla

Vous pouvez charger un document de la manière suivante:

from jssg.models import Document

doc = Document.load('path/to/file.md') # relatif à n'importe quel dossier `content`
print(doc.path) # le chemin du fichier, utilisé pour générer l'url. N'a pas besoin d'être un vrai fichier existant réellement. Utile pour créer dynamiquement des pages
print(doc.metadata) # les metadata du document (le contenu du header)
print(doc.content) # le contenu du document tel que lu depuis le fichier
print(doc.content_md) # le contenu du document après traitement par le moteur de template de Django et markdown2html

Page

Une page est un document (la classe Page hérite de Document) qui représente une page du site. Si l'autodiscovery est activé, JSSG cherche les fichiers markdown dans le dossier content/pages de chaque application de votre projet.

Header:

title: str: le titre de la page, obligatoire
slug: str: le slug de la page, utilisé pour générer l'url. Déterminé automatiquement si non fourni

Chaque page est accessible via la route /pages/<slug>.html nommée page

Exemple de page :

---
title: Hello, world!
slug: hello
---
A [link  to a page]({% url 'page' 'other-page' }).

List of posts: 

{% for post in posts %}
- [{{ post.title }}]({% url 'post' post.slug %})
{% endfor %}

An image:
![A cat]({% static 'yourapp/images/cat.jpg' %})

A js app:
<div id="myjsapp"></div>
<script src="{% static 'yourapp/js/myjsapp.js' %}"></script>

A table generated from a csv:
{% csv_table 'yourapp/files/data.csv' %}

Exemple d'objet Page:

from jssg.models import Page
from django.urls import reverse

page = Page.load('path/to/file.md') # relatif à n'importe quel dossier `content/pages`
print(page.title) # "Hello, world!"
print(page.slug) # "hello"
print(page.content_md) # ...
print(reverse('page', args=[page.slug])) # "/pages/path/to/hello.html"

Post

Un post est une page (la classe Post hérite de Page) qui représente un article du site. Un flux RSS est généré automatiquement pour les posts. Si l'autodiscovery est activé, JSSG cherche les fichiers markdown dans le dossier content/posts de chaque application de votre projet.

Header :

title: str: le titre du post, obligatoire
date: str: la date de publication, obligatoire. Format ISO 8601
slug: str: le slug du post, utilisé pour générer l'url. Déterminé automatiquement si non fourni

Chaque post est accessible via la route /posts/<slug>.html nommée post

Exemple de post :

---
title: Hello, world
date: 2023-05-31T20:00+02:00
---
bla bla bla

Exemple d'objet Post:

from jssg.models import Post
from django.urls import reverse

post = Post.load('path/to/file.md') # relatif à n'importe quel dossier `content/posts`
print(page.title) # "Hello, world!"
print(page.slug) # "hello-world"
print(page.content_md) # ...
print(reverse('page', args=[page.slug])) # "/posts/path/to/hello-world.html"

Vues

JSSG fournit des vues pour afficher les pages et les posts. Vous pouvez les utiliser telles quelles ou les étendre pour ajouter des fonctionnalités.

Fichiers statiques

C'est du django standard. Vous mettez vos fichiers statiques dans un dossier static à la racine de vos applications et vous les référencez dans vos templates avec {% static %}.

Liens internes

Comme JSSG permet d'utiliser le système d'url de Django, y compris dans le contenu, il est facile de faire des liens internes. JSSG détecte les liens cassés au build time et vous prévient si un lien pointe vers un fichier ou une page qui n'existe pas.

Génaration du site statique

Pour générer le site statique, vous pouvez utiliser la commande distill-local fournie par distill. Elle va collecter les fichiers statiques et générer les pages statiques dans un dossier de sortie. Vous pouvez ensuite servir ce dossier avec n'importe quel serveur web.

$ ./manage.py distill-local --collectstatic dist

Extra: typescript

Ce n'est pas intégré à JSSG, mais grace à django-vite, il est très facile d'intégrer typescript dans votre projet.

Pour cela, vous devez installer django-vite:

$ pip install django-vite

Puis ajouter vite à votre INSTALLED_APPS:

INSTALLED_APPS = [
    ...
    'django_vite',
    'jssg',
    ...
]

Puis définir la variable DJANGO_VITE dans votre settings.py:

DJANGO_VITE = {"default": {"dev_mode": DEBUG}}

Vous pouvez utilisez ce vite.config.ts:

import { defineConfig } from 'vite'
import { globSync } from 'glob'

export default defineConfig({
    base: "/static/",
    build: {
        manifest: "manifest.json",
        outDir: "./static",
        rollupOptions: {
            input: globSync('*/front/main/*.ts'),
        }
    }
})

À partir de là, vite va traiter chaque fichier .ts dans les dossiers front/main de vos applications et les compiler en .js dans le dossier static de votre projet. De cette manière, vous pouvez profiter du dev web moderne (imports, gestion des dépendances par pinage, vérification du code par typescript, transpilation vers du vieux js pour supporter un max de navigateur…) sans avoir à subir la bullshiterie du SPA et intégrer mes js à l'ancienne page par page comme le gros boomer que je suis.

Ex pour charger votre app typescript top moumoute dans une page:

---
title: Hello, typescript!
slug: hello-ts
---
{% load django_vite %}

{% vite_asset 'yourapp/front/main/mytsapp.ts' %}
<div id="app"></div>

Un petit coup de npm run dev && ./manage.py runserver, un petit tour sur http://localhost:8000/pages/hello-ts.html et tadam; Vous pouvez faire vos délire front les plus créatifs, dans du markdown, servi par django, et destiné à finir dans un site statique. C'est pas beau ça ? #kamoulox

Et pour le site final ?

$ npm run build
$ ./manage.py distill-local --collectstatic dist

Simple et efficace.

Extra: Docker

FROM node:current-alpine AS front
WORKDIR /code
COPY package.json package-lock.json ./
RUN npm install
COPY tsconfig.json vite.config.ts ./
COPY myapp/front/ myapp/front/
RUN npm run build

FROM python:3-slim AS site
WORKDIR /code
COPY requirements.txt ./
RUN pip install -Ur requirements.txt
COPY manage.py ./
COPY proj/ proj/
COPY myapp/ myapp/
COPY --from=front /code/static/ static/
RUN ./manage.py distill-local --collectstatic --force dist

FROM nginx:mainline-alpine
COPY --from=site /code/dist/ /usr/share/nginx/html/

$ docker build -t mysite .
$ docker run -p 8080:80 mysite

Extra: Docker-compose pour déployement avec docker swarm + traefik

version: "3.8"
services:
  jtremesay:
    image: "killruana/jtremesay.org:main"
    ports:
      - 8003:80
    networks:
      - "traefik_public"
    labels:
      - "traefik.enable=true"
      - "traefik.http.middlewares.jtremesay-compress.compress=true"
      - "traefik.http.routers.jtremesay.entrypoints=websecure"
      - "traefik.http.routers.jtremesay.middlewares=jtremesay-compress"
      - "traefik.http.routers.jtremesay.rule=Host(`jtremesay.org`) || Host(`slaanesh.org`)"
      - "traefik.http.routers.jtremesay.service=jtremesay"
      - "traefik.http.routers.jtremesay.tls.certresolver=leresolver"
      - "traefik.http.services.jtremesay.loadbalancer.server.port=80"

networks:
  traefik_public:
    external: true

Je vends le script de CI/CD Github Actions et le docker-compose de traefik pour une giraffe de bière.

Évolutions futures

le rendre plus configurable et flexible. Il est actuellemnent très lié à mes besoins et mon organisation de contenu
intégrer le contenu avec l'orm django (aka faire hérieter Document de models.Model) pour donner la possibilité JSSG en tant que CMS plus traditionnel. Y'a plein d'endroit où ça serait cool de pouvoir utiliser un queryset pour lister des pages ou charger un post
fournir un nouveau type de db backend pour django qui permettrait de rendre directement accessible à l'orm les trucs dans le dossier content pour une utilisation plus traditionnelle de django sans avoir à charger les posts dans une db. Vous pouvez utiliser l'ORM de Django ET avoir un contenu toujours à jour parce que directement lu depuis le disque :D. Post.objects.filter(title__icontains="hello") directement mappé sur Path("content/posts").rglob("*.md") :D post.save() ? Paf ! content/posts/bla.md est crée !
intégrer django-vite directement dans JSSG ? C'est quand meme un truc un peu relou qui a plus de sens à être appliqué sur le projet qui utilise jssg

Conclusion

Pour mon usage, JSSG fait le taf. Comme dit en intro, j'ai pas eu à y toucher depuis plusieurs mois. malgré les ajouts de conneries sur le site. Et ce fut un régal de faire ces conneries (text 2 particules ! ! Doom ! Crankshaft !)

Ça vous permet de transformer simplement votre projet Django tout moderne, complexe et hackable en bon vieux site statique ennuyeux qui juste marche. Et c'est disponible sous licence GNU AGPL dans toutes les bonnes cremeries libristes. Que demander de plus ?

JSSG + django-distill

2024-01-30T20:00:00+02:00

Petite mise à jour de JSSG.

Depuis l'épisode précédent, j'ai découvert django-distill.

django-distill is an open source, MIT licenced static site generator library for the Django web development framework and is designed to integrate into existing Django projects to allow some, or all of the content in the site to be written out as static pages. Integration is simple and the level of static site generation is up to the project. django-distill integrates with Django, rather than requiring projects to be written for django-distill.

L'intégration fut très facile. Essentiellement mettre à jour le urls.py :

from django_distill import distill_path

from jssg import views
from jssg.models import Page, Post


def get_pages():
    return ({"slug": p.slug} for p in Page.load_glob())


def get_posts():
    return ({"slug": p.slug} for p in Post.load_glob())


urlpatterns = [
    distill_path(
        "", views.IndexView.as_view(), name="index", distill_file="index.html"
    ),
    distill_path("atom.xml", views.PostFeedsView(), name="atom_feed"),
    distill_path(
        "pages/<slug:slug>.html",
        views.PageView.as_view(),
        name="page",
        distill_func=get_pages,
    ),
    distill_path(
        "posts/<slug:slug>.html",
        views.PostView.as_view(),
        name="post",
        distill_func=get_posts,
    ),
]

Un petit coup de ./manage.py distill-local --collectstatic dist et pouf, vos assets sont collectés, et les pages html et le flux atom généré.

Ça m'a permis de supprimer pas mal de code :D

De plus, c'est aussi utilisable avec un django en prod pour avoir une partie du site en static et le reste en dynamique. Je n'en ai pas l'usage immédiat, mais c'est toujours bon à savoir :)

JSSG Django

2024-01-05T12:30:00+02:00

Encore une nouvelle itération de JSSG, mon générateur de sites statiques propulsant ce site afin de mieux répondre à mes besoins.

Pour rappel, mes besoins étaient :

je veux un site statique en plain old html
je ne veux pas écrire de html
je veux que le déployement soit en mode "fire & forget" (CI/CD on push)
je veux toujours faire des trucs tordus qui ne rentrent pas dans les cases des solutions clés en main existantes.

Dans l'épisode précédent, j'avais bricolé un pelican du pauvre à truc à base de python + restructuredtext + jinja pour gérer le contenue et vite + typescript pour le front.

Ça marche super bien pour générer la version finale du site. Mais c'était super désagréable d'écrire du contenu ou de travailler sur les animations en typescript. La faute à l'absence d'un auto-rebuild à la volée pour simplifier la vie. Mais c'est super relou à coder ça :P

Retour à la planche à dessin, avec cette contrainte en plus :

il faut que ça soit très facile de travailler sur le contenu du site

Après quelques PoC infructueux, dont un basé sur ninja parce que pourquoi pas, j'eu une épiphanie : il me fallait django.

En effet, django est absolument génial en ce qui concerne le développement web :

$ npm run dev &
$ ./manage.py runserver

Et pouf, j'ai un environnement de dev très confortable, l'accès à plein de modules et bibliothèques, de l'autoreload automatique, et l'intégration de vite/typescript via le plugin django-vite-plugin.

Sauf que Django sert à propulser des webapps WSGI/ASGI, pas à générer des sites statiques.

Qu'à cela ne tienne. Y'a qu'à ajouter une commande qui parcoure toutes les routes de l'application et appellent les vues sous-jacentes pour générer le HTML et l'enregistrer dans des fichiers. C'est moche mais c'est pas stupide si ça marche.

$ npm run build
$ ./manage.py collectstatic --no-input
$ ./manage.py gensite

Et pouf, j'ai mon front transpilé, mes statics traités, et mon html généré.

dist/
├── atom.xml
├── index.html
├── pages
│   ├── a-propos.html
│   ├── cgi.html
│   ├── crankshaft.html
│   ├── cv.html
│   ├── pi-monte-carlo.html
│   ├── raycaster.html
│   ├── scadaplayer.html
│   └── tris-animes.html
├── posts
│   ├── chaines-youtubes.html
│   ├── django-vuejs-multipage-application.html
│   ├── hello-world.html
│   ├── jssg-django.html
│   ├── jssg.html
│   ├── migration-de-gandi-mail-vers-mailo.html
│   ├── news.html
│   ├── pelican.html
│   ├── terraform-oracle-cloud.html
│   └── tris-animes.html
└── static
    ├── assets
    │   ├── cgi-d89f4043.js
    │   ├── crankshaft-e50e7a32.js
    │   ├── pimontecarlo-ecd5d6d5.js
    │   ├── raycaster-d4ad5a5e.js
    │   ├── scadaplayer-f0555500.js
    │   └── sorts-02a45577.js
    ├── jssg
    │   ├── files
    │   │   ├── jonathan.tremesaygues_at_slaanesh.org.pub.043beb42ea7d.asc
    │   │   ├── jonathan.tremesaygues_at_slaanesh.org.pub.043beb42ea7d.asc.br
    │   │   ├── jonathan.tremesaygues_at_slaanesh.org.pub.043beb42ea7d.asc.gz
    │   │   ├── jonathan.tremesaygues_at_slaanesh.org.pub.asc
    │   │   ├── jonathan.tremesaygues_at_slaanesh.org.pub.asc.br
    │   │   ├── jonathan.tremesaygues_at_slaanesh.org.pub.asc.gz
    │   │   ├── youtube_channels.csv
    │   │   ├── youtube_channels.csv.br
    │   │   ├── youtube_channels.csv.gz
    │   │   ├── youtube_channels.d4eefe1fdb68.csv
    │   │   ├── youtube_channels.d4eefe1fdb68.csv.br
    │   │   └── youtube_channels.d4eefe1fdb68.csv.gz
    │   ├── images
    │   │   ├── mailo_access_to_spaces.704ca18ad68e.jpg
    │   │   └── mailo_access_to_spaces.jpg
    │   ├── pygments
    │   │   ├── monokai.569e3254f732.css
    │   │   ├── monokai.569e3254f732.css.br
    │   │   ├── monokai.569e3254f732.css.gz
    │   │   ├── monokai.css
    │   │   ├── monokai.css.br
    │   │   └── monokai.css.gz
    │   ├── theme
    │   │   ├── cc_byncsa.44c7d2e04342.png
    │   │   ├── cc_byncsa.png
    │   │   ├── favicon-16x16.e4b7b2c44b28.png
    │   │   ├── favicon-16x16.png
    │   │   ├── favicon-32x32.57254c655e62.png
    │   │   ├── favicon-32x32.png
    │   │   ├── favicon.fac9193e2b71.ico
    │   │   ├── favicon.fac9193e2b71.ico.br
    │   │   ├── favicon.fac9193e2b71.ico.gz
    │   │   ├── favicon.ico
    │   │   ├── favicon.ico.br
    │   │   └── favicon.ico.gz
    │   └── tol
    │       ├── analyse_grammaticale_francais_vs_pros_large.daa0891c22db.jpg
    │       ├── analyse_grammaticale_francais_vs_pros_large.jpg
    │       ├── analyse_grammaticale_francais_vs_pros_small.4e91758daeea.jpg
    │       └── analyse_grammaticale_francais_vs_pros_small.jpg
    ├── manifest.json
    └── staticfiles.json

11 directories, 64 files

Le contenu

Le contenu (pages et posts) est maintenant écrit en markdown. La précédente version de JSSG utilisait restructuredtext, mais je me suis rendu compte à l'usage que je détestais :D

Chaque document commence par un block de méta-data encadrés par des ---. Il me sert notamment à renseigner le nom ou le slug de la page, et la date de publication des posts.

---
title: Ma super page!
---

## Un titre

Bla bla bla

J'ai aussi accès à toute la puissance du django, ce qui permet de faire des trucs rigolos.

Les urls internes sont gérés par django. Comme ça, tous lien mort est automatiquement détecté à la génération, permettant d'avoir un semblant de cohérence du contenu au cours du temps.

- [Images générés par ordinateur]({% url 'page' 'cgi' %})

Génération de la liste des articles :

{% for post in posts %}
- [{{ post.timestamp|date:"Y-m-d" }}]({% url 'post' post.slug %}): {{ post.title }}{% endfor %}

Inclusion d'une web app :

{% vite_asset 'jtremesay/front/main/crankshaft.ts' %}
{% static 'jtremesay/jss/css/crankshaft.css' %}
<div id="crankshaft-app"></div>

Pour un exemple plus complet, voila la page d’accueil :

---
title: Bienvenue sur mon site !
slug: index
---

## Pages

- [Images générés par ordinateur]({% url 'page' 'cgi' %})
- [Un raycaster façon Wolfenstein3D en pur typescript]({% url 'page' 'raycaster' %})
- [Algorithmes de tris animés]({% url 'page' 'tris-animes' %})
- [Calculer Pi au casino]({% url 'page' 'pi-monte-carlo' %})
- [Scada player]({% url 'page' 'scadaplayer' %}) : un outil pour visualiser les données issues d'une éolienne
- [Crankshaft]({% url 'page' 'crankshaft' %}) : Simulation de systèmes vilebrequin / bielle / piston

## Projets

Quelqu'uns de mes projets :

- [Raytracer](https://github.com/jtremesay/raytracer) : Itération suivante, un raytraceur en rust.
- [Mathsworld](https://mathsworld.jtremesay.org/) ([sources](https://github.com/jtremesay/mathsworld)) : Le next level du projet précédent : un générateur de shader WebGL raytraçant une scène décrite en s-expression
- [kFPGA](https://github.com/jtremesay/kfpga) : une architecture FPGA opensource (openhardware?).
- [MPS](https://github.com/jtremesay/mpssim) : Un processor MIPS 8 bits.

## Articles

{% for post in posts %}
- [{{ post.timestamp|date:"Y-m-d" }}]({% url 'post' post.slug %}): {{ post.title }}{% endfor %}

Les vues

class PageView(TemplateView):
    template_name = "page.html"
    page_cls = Page
    slug: Optional[str] = None

    def get_context_data(self, **kwargs: Any) -> dict[str, Any]:
        try:
            self.slug = kwargs["slug"]
        except:
            ...
        ctx = super().get_context_data(**kwargs)
        ctx["object"] = self.page_cls.load_page_with_slug(self.slug)
        return ctx


class PostView(PageView):
    template_name = "post.html"
    page_cls = Post

J'aime Django, simple et efficace <3

Comme vous vous en doutez à la vue de mon site, les templates sont ultra minimalistes.

{% extends "base.html" %}

{% block "content" %}
Publié le {{ object.timestamp|date:"Y-m-d" }}.

<h1>{{ object.title }}</h1>
{{ object.content_md|safe }}
{% endblock %}

La propriété Page.content_md s'occupe de générer à la volée le HTML à partir du markdown, après que ce dernier soit passé par le moteur de templating.

class Post:
    # snip

    @property
    def content_md(self):
        return markdown2.markdown(
            Template(self.content).render(
                Context(
                    {
                        "posts": sorted(
                            Post.load_glob(), key=lambda p: p.timestamp, reverse=True
                        )
                    }
                )
            ),
            extras=["fenced-code-blocks"],
        )

Le flux de syndication atom est généré par django.

class PostFeedsView(Feed):
    title = "jtremesay - derniers articles"
    link = ""
    feed_type = Atom1Feed

    def items(self) -> list[Post]:
        return sorted(Post.load_glob(), key=lambda p: p.timestamp, reverse=True)[:20]

    def item_title(self, post: Post) -> str:
        return post.title

    def item_description(self, item: Post):
        return item.content_md

    def item_link(self, post: Post) -> str:
        return reverse("post", args=(post.slug,))

    def item_pubdate(self, post: Post) -> str:
        return post.timestamp

Les routes

Encore une fois, rien de bien compliqué.

urlpatterns = [
    path("", RedirectView.as_view(url="/pages/index.html"), name="index"),
    path("atom.xml", views.PostFeedsView(), name="atom_feed"),
    path("pages/<slug:slug>.html", views.PageView.as_view(), name="page"),
    path("posts/<slug:slug>.html", views.PostView.as_view(), name="post"),
]

La génération statique

La partie "rigolote" du projet, la commande qui s'occupe de générer le HTML. Encore une fois, rien de bien compliqué.

On se contente de visiter toutes les pages du site et d'enregistrer le résultat.

class Command(BaseCommand):
    def handle(self, *args, **options):
        get_page(reverse("index"), "index.html")
        get_page(reverse("atom_feed"))
        for page in Page.load_glob():
            if page.slug == "index":
                continue
            get_page(reverse("page", args=(page.slug,)))
        for post in Post.load_glob():
            get_page(reverse("post", args=(post.slug,)))

La récupération proprement dite, on crée une requête HTTP et on laisse la vue faire son travail :)

def get_page(url: str, path: Optional[Path] = None) -> None:
    match = resolve(url)
    request = HttpRequest()
    request.META["HTTP_HOST"] = "jtremesay.org"
    request.method = "get"
    request.path = url
    request._get_scheme = lambda: "https"
    response = match.func(request, *match.args, **match.kwargs)
    if response.status_code in (301, 302):
        return get_page(response.url, path)

    assert response.status_code == 200

    try:
        response.render()
    except AttributeError:
        ...

    if path is None:
        path = settings.DIST_DIR / url[1:]
    else:
        path = settings.DIST_DIR / path
    path.parent.mkdir(parents=True, exist_ok=True)
    path.write_bytes(response.content)

Dockerization

On installe le bordel nécessaire, on copie le code source, on build le front, on traite les statics, on génère le site, et on génère le site. Enfin on copie le résultat dans une nouvelle image nginx.

FROM python:3.12 AS site

# Update packages and install needed stuff
RUN apt-get update && apt-get dist-upgrade -y
# I hate modern way of doing things
RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - &&\
    apt-get install -y nodejs
RUN pip install -U pip setuptools wheel

# Install python & node deps
WORKDIR /code
COPY requirements.txt ./
RUN pip install -Ur requirements.txt
COPY package.json package-lock.json ./
RUN npm install

# Copy source dir
COPY manage.py tsconfig.json vite.config.ts ./
COPY jssg/ jssg/
COPY content/ content/
COPY front/ front/

# Build
RUN npm run build
RUN python manage.py collectstatic --no-input
RUN python manage.py gensite

FROM nginx
COPY --from=site /code/dist/ /usr/share/nginx/html/

Cloudification

Ça tourne dans un cluster docker swarm avec traefik en frontal.

version: "3.8"
services:
  jtremesay:
    image: "killruana/jtremesay.org:main"
    ports:
      - 8003:80
    networks:
      - "traefik_public"
    labels:
      - "traefik.enable=true"
      - "traefik.http.middlewares.jtremesay-compress.compress=true"
      - "traefik.http.routers.jtremesay.entrypoints=websecure"
      - "traefik.http.routers.jtremesay.middlewares=jtremesay-compress"
      - "traefik.http.routers.jtremesay.rule=Host(`jtremesay.org`, `slaanesh.org`)"
      - "traefik.http.routers.jtremesay.service=jtremesay"
      - "traefik.http.routers.jtremesay.tls.certresolver=zerossl"
      - "traefik.http.services.jtremesay.loadbalancer.server.port=80"

networks:
  traefik_public:
    external: true

CI/CD

Github Actions.

name: CI/CD

on:
  push:
  pull_request:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      -
        name: Docker meta
        id: meta
        uses: docker/metadata-action@v4
        with:
          images: |
            killruana/jtremesay.org
          tags: |
            type=schedule
            type=ref,event=branch
            type=ref,event=pr
            type=sha
      -
        name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v2
      -
        name: Login to Docker Hub
        uses: docker/login-action@v2
        with:
          username: killruana
          password: ${{ secrets.DOCKERHUB_TOKEN }}
      -
        name: Build and push
        uses: docker/build-push-action@v3
        with:
          push: true
          tags: ${{ steps.meta.outputs.tags }}
          cache-from: type=registry,ref=killruana/jtremesay.org:buildcache
          cache-to: type=registry,ref=killruana/jtremesay.org:buildcache,mode=max

  deploy:
    runs-on: ubuntu-latest
    needs: build
    if: github.ref == 'refs/heads/main'

    steps:
      -
        name: Deploy
        uses: distributhor/workflow-webhook@v3
        with:
          webhook_url: ${{ secrets.WEBHOOK_URL }}
          verify_ssl: false

Conclusion

site static ? check
chouette environement de dev ? check
integration de vite/typescript ? check
écriture du contenu en pas html ? check
transpilation du front ? check
gestion des static ? check
customizable ? check
simple ? check
fire & forget ? check

$ cloc jssg/
      12 text files.
      10 unique files.
      14 files ignored.

github.com/AlDanial/cloc v 1.98  T=0.01 s (1127.0 files/s, 71340.1 lines/s)
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
Python                          10            125            223            285
-------------------------------------------------------------------------------
SUM:                            10            125            223            285
-------------------------------------------------------------------------------

C'est fou ce qu'on peut faire avec moins de 300 lignes de python !

News

2024-01-04T22:30:00+02:00

Bonne années !

Dans les ajouts récents sur le site :

Comment calculer pi en lançant des fléchettes sur une cible
Scadaplayer, un truc muche animé pour visualiser des données produites par une éolienne
Crankshaft, une simulation d'un système vilebrequin/bielle/piston

Tris animés

2023-08-18T12:30:00+02:00

J'ai fait un truc muche pour visualiser les différents algorithmes de tris. C'est disponible ici.

Terraform + Oracle Cloud

2023-08-01T23:00:00+02:00

Ce soir, j'ai été amené à découvrir Oracle Cloud pour aider l'amie Solène'%.

Je ne pensais pas ça possible, mais j'ai trouvé l'expérience encore plus désagréable que celle offerte par AWS :D

Enfin bref. Après près d'une heure passée à essayer de créer le compte et se connecter à l'interface (oui, sérieusement), et 2 heures à potasser la doc, voila le main.tf que j'accoucha.

Il permet de provisionner une VM sous Oracle Linux 9.2, ainsi que tout le bazar autour (VNC, subnet, internet gateway, route table, …).

# Go to https://cloud.oracle.com/identity/compartments/
# to get your own compartment id
variable "compartment_id" {
    type    = string
    default = "ocid1.tenancy.oc1.."
}


# eu-marseille-1
# https://docs.oracle.com/en-us/iaas/Content/General/Concepts/regions.htm
variable "availability_domain" {
    type    = string
    default = "nLTo:EU-MARSEILLE-1-AD-1"
}


# Oracle Linux 9.2, eu-marseille-1
# https://docs.oracle.com/en-us/iaas/images/image/ba32bce1-c03a-48be-8dba-4436b1b190d3/
variable "image_id" {
    type    = string
    default = "ocid1.image.oc1.eu-marseille-1.aaaaaaaa5mugakrcfhb73itd7uvclgorricrb5n4g7ydgykxyzejqcdocqda"
}


# SSH public key
variable "ssh_public_key" {
    type    = string
    default = "ssh-rsa ... id_rsa"
}


terraform {
required_providers {

    oci = {
        source  = "oracle/oci"
        version = "5.6.0"
        }
    }
}


# https://registry.terraform.io/providers/oracle/oci/latest/docs
provider "oci" {
    # Configuration options
}


# https://registry.terraform.io/providers/oracle/oci/latest/docs/resources/identity_compartment
# https://docs.oracle.com/en-us/iaas/Content/Identity/Tasks/managingcompartments.htm
resource "oci_identity_compartment" "sandbox" {
    compartment_id = var.compartment_id
    name           = "sandbox"
    description    = "My first compartment!"
}


# https://registry.terraform.io/providers/oracle/oci/latest/docs/resources/core_vcn
# https://docs.oracle.com/en-us/iaas/Content/Network/Tasks/managingVCNs.htm
resource "oci_core_vcn" "sandbox" {
    compartment_id = oci_identity_compartment.sandbox.id
    display_name   = "sandbox"
    cidr_blocks    = ["10.0.0.0/16"]
}


# https://registry.terraform.io/providers/oracle/oci/latest/docs/data-sources/core_internet_gateways
# https://docs.oracle.com/en-us/iaas/Content/Network/Tasks/managingIGs.htm
resource "oci_core_internet_gateway" "sandbox" {
    compartment_id = oci_identity_compartment.sandbox.id
    vcn_id         = oci_core_vcn.sandbox.id
    display_name   = "sandbox"
    enabled        = true
}


# https://registry.terraform.io/providers/oracle/oci/latest/docs/resources/core_route_table
# https://docs.oracle.com/en-us/iaas/Content/Network/Tasks/managingroutetables.htm
resource "oci_core_route_table" "sandbox_igw" {
    compartment_id = oci_identity_compartment.sandbox.id
    vcn_id         = oci_core_vcn.sandbox.id
    display_name   = "sandbox-igw"
    route_rules {
        network_entity_id = oci_core_internet_gateway.sandbox.id
        destination       = "0.0.0.0/0"

    }
}


# https://registry.terraform.io/providers/oracle/oci/latest/docs/resources/core_subnet
# https://docs.oracle.com/en-us/iaas/Content/Network/Tasks/managingVCNs.htm
resource "oci_core_subnet" "sanbox_public" {
    cidr_block     = "10.0.0.0/24"
    compartment_id = oci_identity_compartment.sandbox.id
    vcn_id         = oci_core_vcn.sandbox.id
    display_name   = "sandbox-public"
}


# https://registry.terraform.io/providers/oracle/oci/latest/docs/resources/core_route_table_attachment
resource "oci_core_route_table_attachment" "sandbox_public_igw" {
    subnet_id      = oci_core_subnet.sanbox_public.id
    route_table_id = oci_core_route_table.sandbox_igw.id
}


# https://registry.terraform.io/providers/oracle/oci/latest/docs/resources/core_instance
# https://docs.oracle.com/en-us/iaas/Content/Compute/Concepts/computeoverview.htm
resource "oci_core_instance" "sandbox" {
    compartment_id      = oci_identity_compartment.sandbox.id
    availability_domain = var.availability_domain
    shape               = "VM.Standard.E2.1.Micro"
    source_details {
        source_id   = var.image_id
        source_type = "image"
    }

    display_name = "sandbox"
    create_vnic_details {
        assign_public_ip = true
        subnet_id        = oci_core_subnet.sanbox_public.id
    }
    metadata = {
        ssh_authorized_keys = var.ssh_public_key
    }
}


output "vm_ip" {
    value = oci_core_instance.sandbox.public_ip
}

Provisionning et connection en ssh :

$ terraform apply -auto-approve
Terraform used the selected providers to generate the following execution plan. Resource actions are indicated with the following
symbols:
+ create

Terraform will perform the following actions:

(…)


Plan: 7 to add, 0 to change, 0 to destroy.

Changes to Outputs:
+ vm_ip = (known after apply)

(…)

Apply complete! Resources: 7 added, 0 changed, 0 destroyed.

Outputs:

vm_ip = "144.24.203.47"

$ ssh opc@144.24.203.47
The authenticity of host '144.24.203.47 (144.24.203.47)' can't be established.
ED25519 key fingerprint is SHA256:2fDt7TNdNlHf1gprtRThKOM4mtay4Aj5XpRM5QEHgpQ.
This key is not known by any other names.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added '144.24.203.47' (ED25519) to the list of known hosts.
[opc@sandbox ~]$ exit
logout

JSSG: jtremesay's static site generator

2023-07-29T17:33:00+02:00

Bon ben finalement je suis parti sur mon propre générateur, jssg. C'est minimaliste, ça gère rien, c'est parfait pour mes besoins.

C'est juste un bricolage autour de python et jinja.

On verra comment il évolue :)

Migration de Gandi Mail vers Mailo

2023-06-18T16:00:00+02:00

Context

Récemment, Gandi a annoncé une augmentation de ses prix, dont notamment celui des boites mail. Actuellement, Je profite de 3 boites mails gratuites incluses avec mon nom de domaine. À partir de juillet, elles passeraient à presque 5€/mois chacune. Un peu excessif, surtout pour mes 200Mo d'archives toutes boites mails confondues.

Le besoin

Héberger 3 boites mails, en utilisant mon propre nom de domaine, chez un hébergeur idéalement associatif ou coopératif, situé en Europe, et n'ayant pas son business basé sur la collecte des données. Le tout à un tarif acceptable.

Les challengers

J'ai rapidement regardé du côté des chatons. Rien ne fit mon bonheur même si je note l'existence de l'association l'Autre Net pour un éventuel usage futur.

J'ai regardé du côté de [ProtonMail] (https://proton.me). Ils sont chers (5€/mois) pour plusieurs boites mails. Et il faut obligatoirement installer leur middleware pour profiter de IMAP :(.

Pis Mailo. C'est des frenchies, ils prétendent offrir « une messagerie 100 % européenne, garantissant aux utilisateurs de retrouver la maîtrise de leurs données et les accompagnant dans une utilisation éthique et responsable du Web ». Leur politique de confidentialité indique que « (…) Mailo ne communique aucune de vos données personnelles à des tiers. En particulier, Mailo ne transmet aucune information à ses régies publicitaires partenaires. ». L'offre gratuite permet d'utiliser son propre domaine et est financée par la pub. L'offre payante est à 1€/mois.

Ils semblaient cocher toutes les cases, je décida de partir avec eux.

Creation du compte. Les formulaires sont simples et clairs. Les seules informations personnelles demandées sont nom, prénom et date de naissance. Je pars sur l'offre gratuite (je suis s/radin/économe/). Me voila l'heureux propriétaire d'une nouvelle adresse éponyme en @mailo.com.

Sauf que mon but est d'avoir des adresses en @slaanesh.org.

La doc n'est pas super claire sur la procédure :

Votre nom de domaine avec Mailo

Vous pouvez acheter un nom de domaine à partir de 15 euros TTC par an. - (…) - Si vous avez déjà acheté un nom de domaine ailleurs, vous pouvez aussi le déclarer pour l'utiliser avec les services Mailo.

Pour cela, vous devez disposer d'un espace Mailo gratuit : - Vous devez disposer d'un compte Mailo. - Dans votre compte Mailo, choisissez "Espaces Mailo" dans le menu. - Créez un espace Mailo.

Après quelques tâtonnement, voila comment que j'ai fait.

Utiliser son propre domaine avec Mailo

Connectez vous avec votre adresse en @mailo.com. C'est la seule fois ou vous vous en servirez. Par la suite, vous utiliserez les comptes crées sous votre domaine perso.

Accéder à « Mailo Space » par l’icône aux trois bonhommes dans la barre en haut à droite.

Créez un nouvel espace. J'ai choisi un espace familial mais j'aurai probablement du prendre un espace pro ou asso. Tant pis. Ça n'a pas l'air de changer grand choses, et comme j'ai la flemme de me retaper la config, ça va rester ainsi.

Edit: en fait si, ça change des trucs. L'espace familiale coûte 2€/mois et offre 5 comptes premiums (+nombre illimités de comptes gratuits).

Une fois l'espace créer, aller dans Management -> Declare a domain name.

Mailo va vous donner un champs TXT à ajouter à votre domaine pour prouver que vous en êtes le propriétaire.

Une fois votre domaine authentifié, sélectionner le dans la liste puis allez dans DNS configuration. À la section Mail configuration, il vous donnera les champs MX et TXT que vous devez ajouter votre domaine.

En attendant que les DNS se propagent, vous pouvez créer votre compte. Retourner à l'écran Management, sélectionner Create an account et rentrez toutes les informations demandées. Assurez vous de bien sélectionner votre domaine dans la liste des domaines disponibles.

Une fois le compte créer, allez dans Management -> Managers pour ajouter les droits administratifs à votre nouveau compte.

Vous pouvez maintenant vous déconnecter et vous reconnecter avec votre nouveau compte pour vérifier que tous marche.

Pour créer de nouveau comptes, il suffit de répéter la procédure précédente :P

Pour les alias, c'est un peu le bordel.

pour un alias avec votre domaine perso, Mailo spaces -> Management -> List of accounts -> Manage the aliases
pour un alias avec un des domaines de Mailo, Settingt -> Aliases -> Create an alias
les alias dynamiques (fonctionnalité de l'offre premium) : les mails envoyés à <username>++<tag>@ sont redirigés vers <username>@. (Obligatoirement ++, rip toutes mes adresses avec un seul +)

imapsync

Mailo a l'air de fournir tout ce qu'il faut pour migrer les anciens mails depuis les serveurs IMAP de Gandi, mais j'ai préféré jouer avec imapsync pour tout copier.

$ imapsync \
  --host1 mail.gandi.net \
  --user1 camille@slaanesh.org \
  --password1  "secret1" \
  --host2 mail.mailo.com \
  --user2  camille@slaanesh.org \
  --password2  "secret2"

Premier retour

Bah, ça juste marche. Ça juste marche tellement bien que j'ai pris un an d'abonnement premium (12€), copié tout ce qui avait à être copié et supprimé mes boites Gandi.

La webapp est meh, j'ai eu un peu de mal à trouver comment enregistrer mes domaines ou créer les alias. Mais une fois le bon menu trouvé, c'est simple et clair.

Ils ont l'air de proposer d'autres trucs tel que caldav, carddav, stockage et partage de fichiers, mais j'ai déjà mon nextcloud pour ça.

Retours des 6 mois

Ouais ben ça juste marche. Je n'ai jamais eu à me reconnecter à l'interface d'adminstration ou au webmail. J'ai pas eu de problèmes de mails non délivrés ou de spam. Je continue de recommender.

Django + VueJS - MultiPage Application

2023-06-14T20:00:00+02:00

Préambule

Parce que j'ai passé beaucoup trop de temps à faire tomber ça en marche, je partage ici le résultat de mes expérimentations.

Contexte: j'ai fait un peu de dev front au début des années 2010. À l'époque, c'était simple. Jquery, quelques fichiers javascript inclus dans la page, et roulez jeunesse.

$ tree oldschool/
oldschool/
├── js
│   ├── common.js
│   ├── index.js
│   ├── jquery.js
│   └── ma_page.js
├── index.html
└── ma_page.html

$ cat oldschool/ma_page.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Mon Site | Ma Page</title>
    <script src="/js/jquery.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/ma_page.js"></script>
</head>

<body>

</body>

</html>

Ça fini immanquablement par devenir du code spaghetti, mais le coût d'entrée est pour ainsi dire nul. C'est à la portée du premier crétin venu. Cf moi.

La problématique

Nous voila en 2023. Au cours de cette décennie écoulée, j'ai fait assez peu de dev web, et je n'ai pas DU TOUT suivi les évolutions du domaine. Au taf, on a une webapp django dont le frontend est géré à l'ancienne : HTML généré par les templates Django et Vanilla JS inclut à l'ancienne.

Ça commence à devenir assez gros et bordélique. Je voudrais faire du ménage dans tout ça, et moderniser. Au moins ajouter TypeScript pour profiter du typage statique et de la compilation pour détecter et corriger aux plus tôt les petites erreurs d'inattention à la con et de profiter de l'intelligence de l'IDE. NPM serait aussi un plus pour simplifier les mises à jours de nos dépendances. Puis peut-être expérimenter avec des framework UI tel que vuejs pour voir si ça peut nous simplifier la vie pour certain éléments de l'interface.

Bref, le cahier des charges est simple : transitionner vers du front moderne, tout en continuant à le gérer à l'ancienne, et intégration avec l'existant parce qu'on ne va pas tout remplacer.

Ben il s'avère que l'écosystème moderne n'est ABSOLUMENT pas pensé pour être utilisé comme ça.

Non, maintenant le front est censé être pensé comme une application à part entière et indépendante du backend et causer avec ce dernier via une api REST.

Sauf que cette manière de faire arrange pas du tout quand il faut intégrer avec l'existant. Surtout quand tu veux juste quelque composants par ci par là et pas une application complète.

Après beaucoup trop de prises de tête, de crises de nerfs, d'expérimetations, et d'épluchage de documentations, j'ai fini par faire fonctionner vuejs+typescript et django pour que ça marche à l'ancienne.

La solution est d'utiliser vitejs en mode MultiPage Application, de découvrir dynamiquement vos différents points d'entrées, et demander à Django de servir en tant que static le dossier contenant le résultat de la compilation.

Le front

Intéressons nous tout d'abord à la partie front.

$ tree djangovuejs
djangovuejs
├── front
│   ├── main
│   │   ├── index.ts
│   │   └── ma_page.ts
│   └── src
│       ├── common.ts
│       ├── Index.vue
│       └── MaPage.vue
├── package.json
├── tsconfig.json
└── vite.config.ts

$ cat djangovuejs/package.json
{
    "name": "djangovuejs",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
        "dev": "vite build --watch -m dev",
        "build": "tsc && vite build"
    },
    "dependencies": {
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^4.1.0",
        "typescript": "^5.0.2",
        "vite": "^4.3.9",
        "glob": "^10.2.6"
    }
}

$ djangovuejs/tsconfig.json
{
    "compilerOptions": {
        "target": "ES2020",
        "useDefineForClassFields": true,
        "module": "ESNext",
        "lib": [
        "ES2020",
        "DOM",
        "DOM.Iterable"
        ],
        "skipLibCheck": true,
        /* Bundler mode */
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "preserve",
        /* Linting */
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true
    },
    "include": [
        "front/**/*.ts",
        "front/**/*.d.ts",
        "front/**/*.vue"
    ],
}

$ cat djangovuejs/vite.config.ts
import { globSync } from 'glob'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
import { globSync } from 'glob'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    build: {
        rollupOptions: {
        input: globSync("front/main/**/*.ts"),
        output: {
            dir: "out/front/",
            entryFileNames: "[name].js",
            assetFileNames: "assets/[name].[ext]",
            chunkFileNames: "chunks/[name].js",
        }
        }
    }
})

$ cat front/main/ma_page.ts
import { createApp } from 'vue'
import App from '../src/MaPage.vue'

createApp(App).mount('#app')

Le dossier front/main/ contient nos différents point d'entrées qui seront découverts dynamiquement par vitejs. front/src/ contient le reste du code relatif au front.

Pour plus de détail, la doc est votre amie :

https://vitejs.dev/config/
https://rollupjs.org/configuration-options/
https://vuejs.org/guide/introduction.html
https://www.typescriptlang.org/docs/

Nous pouvons maintenant installer les dépendances et compiler le différents points d'entrées :

$ cd djangovuejs/

$ npm install

added 67 packages, and audited 68 packages in 853ms

15 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

$ npm run build

> djangovuejs@0.0.0 build
> vite build

vite v4.3.9 building for production...
✓ 14 modules transformed.
out/front/assets/ma_page.css                    0.04 kB │ gzip:  0.06 kB
out/front/assets/index.css                      0.04 kB │ gzip:  0.06 kB
out/front/index.js                              0.33 kB │ gzip:  0.26 kB
out/front/ma_page.js                            0.34 kB │ gzip:  0.27 kB
out/front/chunks/_plugin-vue_export-helper.js  49.54 kB │ gzip: 20.01 kB
✓ built in 684ms

$ tree out/
out/
└── front
    ├── assets
    │   ├── index.css
    │   └── ma_page.css
    ├── chunks
    │   └── _plugin-vue_export-helper.js
    ├── index.js
    └── ma_page.js

4 directories, 5 files

Le sous dossier chunks contient les morceaux de codes qui sont communs à vos points d'entrées afin de minimiser la quantité de javascript téléchargée par le client. Le sous dossier assets contient les css générés à partir des composants vuejs et les assets (images et cie) référencés dans ces derniers.

Vous pouvez aussi compiler le code à la demande quand vous éditer un fichier avec la commande suivante :

$  npm run dev

> djangovuejs@0.0.0 dev
> vite build --watch -m dev

vite v4.3.9 building for dev...

watching for file changes...

Django

Les modifications à appliquer à Django sont minimales. Il vous suffit d'abord de définir la variable STATICFILES_DIRS de votre proj/settings.py :

STATICFILES_DIRS = [
    # ...
    ("front", BASE_DIR / "out" / "front"),
]

Vous pouvez maintenant importer le javascript dans votre template :

{% load static %}
{% extends "myapp/base.html" %}

{% block content %}
    <script src="{% static 'jtremesay/front/ma_page.js' %}" type="module"></script>
    <link rel="stylesheet" type="text/css" href="{% static 'jtremesay/front/assets/ma_page.css' %}" />

    <div id="ma_page" data-api-url="{% url 'app:api.json' %}"></div>
{% endblock %}

Conclusion

Le dev web s'est quand même sacrément complexifié aux cours des 10 dernières années :-/

$ tree oldschool
oldschool
├── js
│   ├── common.js
│   ├── index.js
│   ├── jquery.js
│   └── ma_page.js
├── index.html
└── ma_page.html

2 directories, 6 files

$ djangovuejs
├── front
│   ├── main
│   │   ├── index.ts
│   │   └── ma_page.ts
│   └── src
│       ├── common.ts
│       ├── Index.vue
│       └── MaPage.vue
├── manage.py
├── myapp
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── templates
│   │   └── myapp
│   │       ├── base.html
│   │       ├── index.html
│   │       └── ma_page.html
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── package.json
├── package-lock.json
├── proj
│   ├── asgi.py
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── requirements.txt
├── tsconfig.json
└── vite.config.ts

9 directories, 27 files

Pelican

2023-06-13T19:00:00+02:00

Il y a 2 semaines, ce blog était une webapp flask minimaliste. Quelques jours de travail plus tard, le voila transformé en générateur de sites statiques ultra simple utilisant de manière assez créative le moteur de templates Jinja et des Makefiles. Pis quand j'ai commencé à réfléchir à comment intégrer Markdown ou restructuredText pour taper les posts dans un truc moins relou que HTML, j'ai réalisé que ce projet commençais sérieusement à ressembler à Pelican : un générateur de site statique qui utilise les templates Jinja.

Bon ben voila, le site est maintenant gé(né)ré par Pelican.

Le seul truc qui me manque vraiment est la possibilité d'utiliser le templating Jinja DANS le contenu plutôt que simplement pour le design.

Ça me serait utile pour notamment générer dynamiquement la table des chaines Youtube ici.

Là, j'ai fait crados. J'ai un Makefile qui s'occupe de générer un fragment HTML à partir du CSV de données, et ce fragment est inclus dans l'article. Ça a le mérite de respecter le cahier des charges et d'être simple et rapide à implémenter.

Pis là, je découvre l'existence du plugin jinja2content qui, je cite, "allows the use of Jinja2 directives inside your Pelican articles and pages"…

Bon ben je sais quoi faire ce soir…

Chaînes YouTubes

2023-06-06T20:00:00+02:00

Une sélection de chaînes Youtube dumpées de mon agrégateur de flux. Généré automatiquement depuis youtube_channels.csv :

title	url	description
3Blue1Brown	https://www.youtube.com/channel/UCYOjabesuFRV4b17AJtAw	3Blue1Brown, by Grant Sanderson, is some combination of math and entertainment, depending on your disposition. The goal is for explanations to be driven by a...
12 Parsecs	https://www.youtube.com/channel/UCkMsSGlEMPRxhqvGj6qeucQ	Bienvenue sur la chaine de l'à peu près...Parce que tout ce que je raconte, on va dire que c'est à peu près ça...
Ahoy	https://www.youtube.com/channel/UCE1jXbVAGJQEORz9nZqb5bQ	Insightful gaming videos.
ANALEPSE	https://www.youtube.com/channel/UCDB2qWL_20CgNC22fgPz00w	Analepse vous propose de revenir sur un personnage, un évènement, un contexte historique au travers d'œuvres artistiques et culturelles.Romans, bandes dessin...
Asclépios	https://www.youtube.com/channel/UCDqEttzOpPbDoeC05HRPPDQ	La Médecine à l'ancienne, genre... Vraiment à l'ancienne
AstronoGeek	https://www.youtube.com/channel/UC5X4e8ScZI2AFd_vkjSoyoQ	AstronoGeek, c'est une chaîne dédiée à la vulgarisation de l'astronomie. Bordel de merde.
Ave'Roes	https://www.youtube.com/channel/UCMGzPGJMKKDjnproamSIC1A	Romain, alias Ave’Roes.5 ans à étudier l’histoire (surtout médiévale !).Je vous aide à comprendre réellement l’islam et l’histoire arabo-musulmane… au-delà d...
Bazar du Grenier	https://www.youtube.com/channel/UCCMxHHciWRBBouzk-PGzmtQ	La chaîne "fourre tout" du grenier ! - Cinéma- Jeux de rôles- Let's play- Reviews de jeux !
Bismuth	https://www.youtube.com/channel/UCQ9STd0zeHrrQGJQEuvhuTw	World record and tool-assisted speedrun explanations
Bolchegeek	https://www.youtube.com/channel/UCEfpbmshpf-G90fGLla73kA	La chaîne Bolchegeek aborde la culture populaire sous des angles artistiques, sociaux et politiques.Cinoche, BD, séries, bouquins ou jeux vidéo : on s'interr...
Calmos	https://www.youtube.com/channel/UCYBr8enT5x4-JIxcPY6y-_A	Calmos c’est une chaîne YouTube, un podcast, et une foule d’autres petites choses pour les gens bien comme vous qui aimez le cinéma.Ça s'appelle Calmos parce...
CGP Grey	https://www.youtube.com/channel/UC2C_jShtL725hvbm1arSV9w	Share your videos with friends, family, and the world
Chat Sceptique	https://www.youtube.com/channel/UCOuIgj0CYCXCvjWywjDbauw	Chat Sceptique est un projet belge de vulgarisation scientifique sur YouTube axé sur les stats, les maths et l'esprit critique... avec en vedette des petits ...
Cody'sLab	https://www.youtube.com/channel/UCu6mSoMNzHQiBIOCkHUa2Aw	Aright everyone Cody here!Welcome to my channel! I simply post videos with science, bees, and anything else that I am working on. Enjoy!If you need to get in...
Confessions d'Histoire	https://www.youtube.com/channel/UCzj9-ZfpJ74vYv1RZzAWTVg	Enfin, il était temps de donner directement la parole aux grands personnages historiques pour qu'ils nous donnent leur point de vue sur les événements marqua...
Curiosity Catalyst	https://www.youtube.com/channel/UCg47pIhBRJbz52-ABnm0uxw	Un regard sceptique sur le monde.Membre du Café des sciences .Toutes les vidéos de la chaîne Curiosity Catalyst sont sous licence Créative Common : CC-BY-NC-SA
Data Gueule	https://www.youtube.com/channel/UCm5wThREh298TkK8hCT9HuA	Chaque jour, nous sommes bombardés par des milliers de molécules d'information. Des faits, des noms, des chiffres qui s'empilent et se percutent sans que, po...
Deerstalker Pictures	https://www.youtube.com/channel/UCEqTQ5ijLOcVv930jSimg	New videos every Wednesday! Making 1 For All, an original fantasy comedy webseries. Check out our live-action cosplay short films and skits from popular vide...
Deus Ex Silicium	https://www.youtube.com/channel/UCH6ppHEvV3_WIXEwmhv9HEg	DEUS EX SILICIUM est une chaine francophone dont la thématique principale est l'électronique numérique, et plus particulièrement autour des semiconducteurs e...
Diable Positif	https://www.youtube.com/channel/UCI_FnSJPNGd3Y3IL0PwD-NQ	Découvrons ensemble comment rendre la vie sur Terre encore plus pourrie qu'elle ne l'est déjà voulez-vous ?Ensemble, nous allons étudier différents procédés ...
driving 4 answers	https://www.youtube.com/channel/UCwosUnVH6AINmxtqkNJ3Fbg	Let's learn, build and explore the amazing world of mechanics, engines, cars and bikes
e-penser	https://www.youtube.com/channel/UCcziTK2NKeWtWQ6kB5tmQ8Q	Ici, je parle de ce dont j'ai envie de parler quoi qu'en pense la plate-forme :)Retrouvez ici les nouvelles vidéos e-penser (à partir de 2022), ainsi que le...
ElectroBOOM	https://www.youtube.com/channel/UCJ0-OtVpF0wOKEqT2Z1HEtA	Want to subconsciously learn while being entertained? Then subscribe!! My videos are also available on Odysee in the link below, in case YouTube decides to ...
El Jj	https://www.youtube.com/channel/UCgkhWgBGRp0sdFy2MHDWfSg	Mais si ! C'est la chaîne avec des vidéos de maths ! Des fois, ça va un peu vite, du coup, j'ai pas tout bien compris.contact : contact.eljj@gmail.com
Enfants de l'Est	https://www.youtube.com/channel/UCfqYDo0XQC3tgkt7rs1-NqQ	Une balalaïka dans une main, une bouteille de vodka dans l'autre - c'est ainsi que chez les Enfants de l'Est nous combattons les clichés.Rejoignez notre chal...
Esquive la Boule de Feu	https://www.youtube.com/channel/UCYPwq5uafGQrr4PW8GQRxew	Chaîne d'analyse de game design sur des jeux divers et variés, avec des touches d'humour et parfois de commentaire politique quand le sujet s'y prête. Le for...
Et tout le monde s'en fout	https://www.youtube.com/channel/UC-2EkisRV8h9KsHpslQ1gXA	Notre monde est stupéfiant et mal barré, et ça nous fait saigner du nez. Et si on arrêtait de s'en foutre ?Web série bi-mensuelle alternant toutes les deux s...
Fabien Campaner	https://www.youtube.com/channel/UCn2odfT6D4WPg4y-zRIgU5g	Diverses émissions sur le cinéma dans lesquelles j'analyse des films qui m'ont marqués pour de bonnes ou de mauvaises raisons, avec de l'humour dedans :- Le ...
Fouloscopie	https://www.youtube.com/channel/UCLXDNUOO3EQ80VmD9nQBHPg	Découvrez la fouloscopie – la science du comportement des foules : paniques, mouvement de foule, propagation de rumeurs, réseaux sociaux, intelligence collec...
François Descraques	https://www.youtube.com/channel/UCpJWP5_DNPdIhrJIpRkZPoA	Réalisateur / Scénariste. J'ai créé cette chaîne principalement pour mon feuilleton audio "Mystères à St-Jacut".Mes faits d'armes : Le Visiteur du Futur, la ...
Half as Interesting	https://www.youtube.com/channel/UCuCkxoKLYOEQ2GeFtbMbw	Education-y explainer videos that are almost good enough to watch.
Herodot'com	https://www.youtube.com/channel/UCWWzB99AURYo2KLzCReWqmA	Salut Camarades!Laissez-moi vous montrer l'Histoire de fond en comble, avec de gros bouquins, des vannes moisies, de grosses bibliographies, des références l...
Heu?reka	https://www.youtube.com/channel/UC7sXGI8p8PvKosLWagkK9wQ	Vous ne comprenez rien à la finance et à l'économie ? Vous êtes au bon endroit !Les épisodes sont écrits comme des dialogues entre deux personnages afin de p...
Histoire Appliquée	https://www.youtube.com/channel/UCcT7B4zCzrfywO2Q19OJIzA	Une chaîne où l'on teste l'Histoire, et on la rend vivante ! Parce que si l'Histoire se raconte elle peut aussi s'expérimenter et se vivre... Alors on va en ...
horizon-gull	https://www.youtube.com/channel/UCGeFgMJfWclTWuPw8Ok5FUQ	Chaîne officielle du site "Hacking social" ( https://www.hacking-social.com/ )Pour nous soutenir : https://fr.tipeee.com/hacking-socialhttps://liberapay.com/...
Hygiène Mentale	https://www.youtube.com/channel/UCMFcMhePnH4onVHt2-ItPZw	"Si on avait un vrai système éducatif dans ce pays, on y donnerait des cours d'Autodéfense-Intellectuelle"Zététique , Scepticisme, Etude scientifique des phé...
Hypallage	https://www.youtube.com/channel/UCsZ1CqyrMoadedIBuKl1nyw	J'analyse des œuvres de fictions diverses, ou plutôt je partage ce que j'ai compris de leur construction et ce qui m'a fait les aimer.
J'm'énerve pas, j'explique	https://www.youtube.com/channel/UC1Ue7TuX3iH4y8-Qrjj-hyg	Physique, Histoire des sciences et quasi-blagounettes
Joueur Du Grenier	https://www.youtube.com/channel/UC_yP2DpIgs5Y1uWC0T03Chw	Test de jeux à la con !
Kurzgesagt – In a Nutshell	https://www.youtube.com/channel/UCsXVk37bltHxD1rDPwtNM8Q	Animation videos explaining things with optimistic nihilism since 12,013.We’re a team of illustrators, animators, number crunchers and one dog who aim to spa...
L'Histoire par les cartes	https://www.youtube.com/channel/UCQ3ZULRPs2T-hlCBd9-1vtA	Je réalise de animations cartographiques. L’objectif de mes vidéos est de donner de courtes introductions (+/- 5minutes) sur divers sujets historiques. Vous ...
L'Histoire trouve toujours un chemin	https://www.youtube.com/channel/UChD5UkL8LtcLk_D0-obwW8w	Ici on parle d'Histoire, on est sérieux sur les faits, moins sur le reste.Membre du label Hérodote. https://label-herodote.com/Disclaimer : L'objectivité tot...
La Manie Du Cinéma	https://www.youtube.com/channel/UCJVtE8BwsjVxt6W-lTA-8sA	How about I show you behind the scenes of the movie world?Anecdotes, small and big stories of the 7th Art, hidden references, let’s sneak behind the big scre...
Lanterne Cosmique	https://www.youtube.com/channel/UCWYxQt9Y3y2CDzXLf2K7xCA	De l'hypercuriosité, des questions et de la Science. Notre Univers est badass.
Le Fossoyeur de Films	https://www.youtube.com/channel/UCwbV8cTR4yBgFdfa_BXV2OA	Bienvenue sur cette chaîne où l'on va explorer les mystères du cinéma, voyager et ne pas oublier de prendre un bon café au passage.Le visuel du bandeau est s...
LegalEagle	https://www.youtube.com/channel/UCpa-Zb0ZcQjTCPP1Dx_1M8Q	Do you want to know how our legal system works? You’ve come to the right place. LegalEagle is all about giving you an insider’s view to the legal system. ...
Le monde en cartes	https://www.youtube.com/channel/UCYA_ElxMgkJlvcKa4SM0dOg	Cette chaîne a pour but de traiter différents sujets par le prisme de la cartographie.
Le Point Genius	https://www.youtube.com/channel/UCXO8f8SAVP02zSAxnSvtYHw	"L'intelligence vient du latin intellegere, relier les choses entre elles. L'idiot dit qu'il voit pas le rapport…."Chaîne consacrée aux génies en tout genre ...
Le Réveilleur	https://www.youtube.com/channel/UC1EacOJoqsKaYxaDomTCTEQ	Les éléments scientifiques disponibles m'ont convaincu que les problèmes environnementaux (changement climatique, érosion de la biodiversité... etc) vont con...
Les Revues du Monde	https://www.youtube.com/channel/UCnf0fDz1vTYW-sl36wbVMbg	Les Revues du Monde - Émission culturelle sur l'archéologie, l'Histoire, l'Anthropologie, les découvertes.Je suis Charlie Danger, je réalise, écris et présen...
le Stagirite	https://www.youtube.com/channel/UCtyONQLs6htK-wWiCAk4wVw	Ma chaîne elle est bien.Les messages par ici : lestagirite.topoi(at)gmail.com
Le Vortex	https://www.youtube.com/channel/UCZxLew-WXWm5dhRZBgEFl-Q	Bienvenue dans le Vortex !Une colocation pour les mélanger tous, une colocation pour les écouter tous, une colocation pour apprendre de tous et dans le Vorte...
Linguisticae	https://www.youtube.com/channel/UCofQxJWd4qkqc7ZgaLkZfcw	Une expression qui te turlupine? Un mot étrange dont tu ne connais pas l'origine? Tu t'intéresses aux Sciences du Langage mais les déclinaisons ne sont pas t...
LinksTheSun	https://www.youtube.com/channel/UCfXXAQ-mp1uUcvSpvMcAAtw	Bienvenue sur la chaîne de LinksTheSun, des Points Culture, des critiques de paroles de chansons, des résumés de film, des chansons, des parodies et plein d'...
Mathieu Sommet	https://www.youtube.com/channel/UCCpwMG0qZkr62FNZktfcvYg	Vidéaste indépendant depuis 2011. En ce moment, je bosse sur ma nouvelle émission : « OVNI »
Mediapart	https://www.youtube.com/channel/UCdnaDhU-LDQrIEEmSIfq0-Q	Journal d'information numérique, indépendant et participatif. Seuls nos lecteurs peuvent nous acheter.Depuis 2008, Mediapart s’est fait connaître par ses inf...
Meeea	https://www.youtube.com/channel/UCEEi1rclmzywXicV7JfPjWw	On y cause adaptations, Comics, Cinéma et Jeux vidéo.En plus c'est gratos.Seal Of Quality SINCE 2010
META	https://www.youtube.com/channel/UCUOgJaic4p3kwuN7LDJ5ukA	META est une chaîne de philosophie, animée par Jim Gabaret et Céline Marty, dont le but est de populariser les grandes thèses classiques et contemporaines de...
Mickaël Launay	https://www.youtube.com/channel/UC4PasDd25MXqlXBogBw9CAg	La chaîne Micmaths vous propose diverses vidéos autour des mathématiques. Vous y trouverez des cours de maths, des jeux de logique, des chroniques ou encore ...
minutephysics	https://www.youtube.com/channel/UCUHW94eEFW7hkUMVaZz4eDg	Simply put: cool physics and other sweet science."If you can't explain it simply, you don't understand it well enough."~Rutherford via Einstein? (wikiquote)C...
MisterJDay	https://www.youtube.com/channel/UC2uPHgyyLv2rnkm4CfIgWcw	Analyses de clips / Analyses de pubs / Culture Tube / Vidéos randomBy Gael K. / M. Connard / JDay / Kama / Hardisk / Paniac
Modern Vintage Gamer	https://www.youtube.com/channel/UCjFaPUcJU1vwk193mnW_w1w	I love Modern, I love Retro.Tech, Hardware, Gaming
monsieur bidouille	https://www.youtube.com/channel/UCSULDz1yaHLVQWHpm4g_GHA	Vidéaste spécialisé vulgarisation technique, DIY, réseau et énergie.Pour tous contact, veuillez passer par le formulaire sur mon site : http://monsieurbidoui...
Monsieur Phi	https://www.youtube.com/channel/UCqA8H22FwgBVcF3GJpp0MQw	Docteur en philosophie, ce qui ne soigne pas grand chose. 📚 Mon livre "Curiosités philosophiques, de Platon à Russell" : https://amzn.to/3hIshrw 🎧 La versi...
Mr. Sam - Point d'interrogation	https://www.youtube.com/channel/UCh2YBKhYIy-_LtfCIn2Jycg	Mr.Sam - Prenons soin de la MÉTHODE avec laquelle on se met des trucs dans le crâne.LES ÉMISSIONSFake ? • Que penser d'un sujet lorsqu'on y applique les méth...
NEXUS VI	https://www.youtube.com/channel/UC8-UThnwzBI5ApzVG4MY7VQ	Embarquez à bord du Nexus VI et suivez le Capitaine ainsi que son équipage aux quatre coins de la Galaxie pour votre chronique spécialisée dans la Science-Fi...
NileRed	https://www.youtube.com/channel/UCFhXFikryT4aFcLkLw2LBLA	Capturing the natural beauty of chemistryI find that chemistry is often taught poorly or without a purpose. Because of this, people tend to lose interest and...
Officiel DEFAKATOR	https://www.youtube.com/channel/UCU0FhLr6fr7U9GOn6OiQHpQ	On défake sur les fakes. Et que l'obscurantisme retourne à l'obscurité !Defakator est un super héros. Du coup il porte un costume, avec un masque et une cape...
OLYDRI	https://www.youtube.com/channel/UCdHXMcWxwZr2qQpdCCOcSkw	NOOB est un univers étendu sur le thème du MMORPG. Il s'agit d'une licence transmédia existant en web-série, bande dessinée, roman, light novel, manga, jeu v...
OverSimplified	https://www.youtube.com/channel/UCNIuvl7V8zACPpTmmNIqP2A	Explaining things in an OverSimplified way
pannenkoek2012	https://www.youtube.com/channel/UCMm211NGh4Ls5SAMZJF7E8A	I make videos about Super Mario 64.
Passe-Science	https://www.youtube.com/channel/UCsz9DiwPtgDvxJ-njWnieZw	Chaîne de vulgarisation scientifique: physique, mathématiques et informatique. Un niveau de vulgarisation avancé pour approfondir ce que vous aurez pu déjà e...
Passé sauvage	https://www.youtube.com/channel/UCLhOJJbPciPdocXTaAk2SdA	Archéologie I Anthropologie I HistoireSérie documentaire Odyssée sauvage.
Primitive Technology	https://www.youtube.com/channel/UCAL3JXZSzSm8AlZyD3nQdBA	Primitive technology is a hobby where you build things in the wild completely from scratch using no modern tools or materials. These are the strict rules: If...
Primum Non Nocere	https://www.youtube.com/channel/UC9BnGZLT4iPaJtDOXYwQuHQ	Salut à toi internaute !Bienvenu sur Primum Non NocereJe suis Primum et accompagné de mon Doppelganger Doppel, on va essayer de te parler de médecine autreme...
Questions d'Histoire	https://www.youtube.com/channel/UCCGRtSqLfljpX9mzCYDsQIg	Questions d’Histoire est une chaine de vulgarisation historique traitant de nombreuses thématiques et problématiques. Plusieurs formats sont développés.Histo...
ratelrock	https://www.youtube.com/channel/UCaVWxVObKsthKR92x6bz7zA	Une tasse à café en colère qui parle de films, souvent de mauvais films, mais de films avant tout!
Real Engineering	https://www.youtube.com/channel/UCR1IuLEqb6UEA_zQ81kwXfg	Interesting answers to simple questions.
RealLifeLore	https://www.youtube.com/channel/UCP5tjEmvPItGyLhmjdwP7Ww	Answers to questions that you've never asked. Welcome to the RealLifeLore communityPlease subscribe and ring the bellBusiness Email: reallifelore@standard.tv
Retro Game Mechanics Explained	https://www.youtube.com/channel/UCwRqWnW5ZkVaP_lZF7caZ-g	A YouTube channel about video games & programming. For inquiries, please visit inquiries.rgmechex.com.
ScienceClic	https://www.youtube.com/channel/UCV6uM3y-8TeO7JlCtcEN-Bg	D'où venons-nous ? Dans quel monde vivons nous ? En quelques minutes, découvrez et comprenez les théories scientifiques les plus complexes, à la base du cosm...
Science de comptoir	https://www.youtube.com/channel/UCE_LWXcsdp7cWbo4DR4ZA-A	⚒ De la géologie (n')en veux-tu (pas) en voilà (quand même) !Vous êtes-vous déjà demandé pourquoi lécher un caillou ? Comment se forme le sable ? Comment per...
ScienceEtonnante	https://www.youtube.com/channel/UCaNlbnghtwlsGF-KzAFThqA	Des vidéos pour raconter la science étonnante, amusante, passionnante et stupéfiante !Retrouvez moi aussi sur mon blog "Science étonnante" http://sciencetonn...
Simplex Paléo	https://www.youtube.com/channel/UCej7tmvtZ_ex9dZE-ZYS0EQ	L'évolution des espèces à travers les périodes géologiques...
Spirit Of The Law	https://www.youtube.com/channel/UChzLZJo-SxuPHz-oYKAIC_g	Age of Empires 2 Youtuber
StudioUha	https://www.youtube.com/channel/UCkjJda7HO1WVVhUsMrDmYuA	Studio Uha!, ce sont deux fiers larrons shootés à la vidéo qui vont vous botter le cul à coups de micro-séries chatoyantes.Retrouvez-nous sur www.facebook.co...
Stupid Economics	https://www.youtube.com/channel/UCyJDHgrsUKuWLe05GvC2lng	Stupid Economics is a French-speaking YouTube channel of journalism and economic popularization, interpreted by Arnaud and produced by Valentin.
Sur le champ	https://www.youtube.com/channel/UCiWrr_SnP8eK-_9yJWFzbEA	Le chaîne Sur le Champ est une chaîne de vulgarisation de l'histoire de la guerre. A travers des batailles ou des campagnes historiques dont nous explorons l...
Techniques Spatiales	https://www.youtube.com/channel/UCwf-gTeemly9VOVALdBXiTw	Chaine de curiosité scientifique sur les technologies spatiales.
Technology Connections	https://www.youtube.com/channel/UCy0tKL1T7wFoYcxCe0xjN6Q	Share your videos with friends, family, and the world
The 8-Bit Guy	https://www.youtube.com/channel/UC8uT9cgJorJPWu7ITLGo9Ww	A computer video series focusing mainly on retro technology from the 80s, 90s and 2000s. However, once or twice a year I'll create something totally "out the...
The Sciencoder	https://www.youtube.com/channel/UC1zVvHsRsvxInUMX4dfIyAQ	The Unbolter. Bientôt.Mail pro : thesciencoder@harydprod.com
The Urban Doctor	https://www.youtube.com/channel/UC33WWpCRHft51iEV2hVcRzQ	Ever wonder why people daydream of European towns? Or why your city's core isn't bustling with energy like New York? The answers probably have something to d...
Tzitzimitl - Esprit Critique	https://www.youtube.com/channel/UC0yPCUmdMZIGtnxSnx5_ifA	Esprit Critique est une chaîne pour développer bah... votre esprit critique.On y fait de la vulgarisation/réfléxion politico-philosophico-historico-scientifi...
UnDropDansLaMare	https://www.youtube.com/channel/UCbq4WwLfbhRxvyVYOTYU25g	Le site UnDropDansLaMare est l'interlocuteur de ceux qui souhaitent parler du jeu vidéo sérieusement. Nous vous proposons nos réflexions et nos réponses, vou...
Une bière et Jivay	https://www.youtube.com/channel/UCwzxu1j19ICnfW5zrBvUw-w	La bière, comme vous ne l'avez jamais bue !
Veritasium	https://www.youtube.com/channel/UCHnyfMqiRRG1u-2MsSQLbXA	An element of truth - videos about science, education, and anything else I find interesting.
Vous Avez Le Droit	https://www.youtube.com/channel/UCynBu7PDfJsCXeCSqT1QUQw	La justice est quelque chose de trop sérieux pour la laisser aux juristes !Je ne dis pas que des conneries, j'en filme également : des formats courts qui vul...
Wendover Productions	https://www.youtube.com/channel/UC9RM-iSvTu1uPJb8X5yp3EQ	Wendover Productions is all about explaining how our world works. From travel, to economics, to geography, to marketing and more, every video will leave you ...

Hello, world

2023-05-31T20:00:00+02:00

Encore un nouveau Hello world, sur une nouvelle itération du blog, qui va encore une fois rester désespérément vide :D

Je veux un truc simple. J'écris mon contenu dans mon éditeur de texte préféré, je commit, je push, et ka-boom, le site est mis à jour. Idéalement, je voudrais un site complètement statique. Du bon vieux HTML servi par un bon vieux nginx. Malheureusement, je n'ai pas trouvé mon bonheur dans les trucs existants (principalement Pelican, Hugo et Jekyll) (disclaimer: j'ai pas non plus trop cherché). Pis y'a nécessairement où je voudrais faire des trucs pas prévus pour. Genre des expérimentations en JS pour illustrer certains articles. Mais voila, j'ai la flemme d'écrire du bon vieux HTML. Pis j'aime beaucoup la méta-programmation et les trucs qui génèrent des bidules.

Du coup, voila ma solution, pas du tout sur-ingénieurée <https://xeiaso.net/talks/how-my-website-works>_. Le contenu écrit sous forme de templates Jinja, et servi par une app Flask maison. Comme tout est sous forme de template, je peux écrire mes articles depuis le comfort de mon éditeur de texte, tout en ayant une bonne séparations entre la partie contenu et la partie présentation.

Un post ressemble à ça :

{% extends "base.html" %}

{% block title %}Hello, world{% endblock %}

{% block content %}
<p>
    Mon super article
</p>
{% endblock %}

On a déjà vu plus simple. Certes. Mais on a aussi pire :shrug:

La vue flask s'occupant d'afficher ce post :

@app.route("/<int:year>/<int:month>/<int:day>/<slug>")
def view_post(year: int, month: int, day: int, slug: str):
    try:
        return render_template(f"blog/{year:04}{month:02}{day:02}_{slug}.html")
    except TemplateNotFound:
        return abort(404)

Simple et efficace. Y'a que la partie découverte des posts pour générer l'index qui est «créative» et assez insatisfaisante. Mébon, si j'attends d'être satisfait de la solution avant de publier du contenu, on est pas arrivés :D

Fin bref, bienvenue dans mon antre :)

kFPGA et DEL qui clignotent

2019-11-27T00:00:00+02:00

(Billet que j'avais publié sur un précédent blog et que je pensais irrémédiablement perdu jusqu'à ce que j'en trouve une copie sur la Wayback Machine)

Lors de l'épisode précédent, j'avais annoncé avoir validé le fonctionnement de l'architecture kFPGA - ou du moins celui de son plus petit cœur possible - par simulation. Comme son nom l'indique, la simulation consiste à faire simuler le circuit par l'ordinateur. C'est donc un moyen facile de voir son circuit fonctionner. Et avec l'usage de banc de tests, il est possible d'automatiser l'exécution du circuit afin de s'assurer qu'il fonctionne comme attendu malgré. C'est un peu nos tests unitaires à nous. La simulation est donc un outil important dans la conception d'un circuit intégré. Mais je trouve que la simulation possède 2 problèmes majeurs : elle est imbitable et abstraite. Pour le côté imbitable, je pense qu'une image vaut mieux que milles mots. Simulation d'un Adder 2 bits mappé dans k1g4

Là, c'est le résultat de l'exécution d'un banc de test validant le fonctionnement d'un additionneur deux bits mappé dans un cœur kFPGA. Quand j'avais dit que c'était imbitable…

Pour le côté abstrait, c'est plus un truc personnel. Voir des vagues de couleurs et des lignes de log sur un écran, ce n'est pas assez concret pour moi. J'ai besoin de toucher le truc (c'est là que je me dis que l'informatique n'était peut-être pas le meilleur choix de carrière pour moi…). Et comment fait-on pour exécuter réellement un circuit intégré sans l'envoyer en fonderie ? On le met dans un FPGA ! #FPGAception. Mais pour éviter des histoires d'œuf et de poule, j'ai choisi de me tourner vers une carte de développement QMTech basé sur un FPGA Xilinx Artix 7 100T. J'ai choisi cette carte parce qu'elle intègre un gros FPGA (100k logic cells !) et beaucoup d'I/O pour vraiment pas cher ($60)

Seul bémol, il a fallu que je soude les connecteurs d'IO moi même. 120 putains de pins à souder. J'ai jamais était très bon pour souder des composants et j'avais rien pour me faire la main. Du coup, pas le choix, c'est avec beaucoup d'appréhension j'ai appris sur le tas. Comme attendu, les premières soudures étaient franchement catastrophique. Mais sur la fin, ça commençait à être acceptables. Du coup, je suis repassé sur toute les pins. Ce qui nous fait plus de 200 points de soudure. Youhou.

Je vous passe les galères pour faire reconnaitre le FPGA par le programmeur (spoiler alert, ça marche mieux quand on installe les pilotes), la prise en main du dit programmeur, les premiers tests (youhou, j'arrive à faire clignoter des DEL o/).

Fun fact : Malgré mes 4 ans dans une startup proposant des softs & hard IP de eFPGA, c'était la première fois de ma vie que j'utilisais un FGPA.

Une fois cette prise en main terminée, il a fallut faire rentrer mon kFPGA dans le Xilinx. Puis aussi de quoi le programmer. Et une ROM pour contenir le bitstream. Et un générateur de signaux parce que j'aime bien quand ça fait des trucs tout seul. Et un diviseur de clock parce que sinon la STA n'était pas validée. Au final, je me suis retrouvé avec ce design :

Bref, après un peu de bidouillage, j'ai fini par avoir un cœur kFPGA implémenté sur un Xilinx qui réalise des additions 2 bits et dont on peut visualiser le fonctionnement avec des DEL. Le résultat est visible en vidéo ici.

Je suis content :)