diff --git a/README.md b/README.md
index 6b600ba..d7f2d04 100644
--- a/README.md
+++ b/README.md
@@ -3,15 +3,15 @@
L'association Ti Nuage offre une palette des services numériques pour ses adhérents et les internautes, et promeut les logiciels libres et un usage éclairé et raisonné d'Internet.
Le site de l'association doit décrire ses missions et fournir un aperçu des services qu'elle propose, ainsi que de leurs conditions d'usage.
-## Technologie
+## Génération du site
Le site est créé à l'aide du logiciel libre [MetalSmith](http://www.metalsmith.io). Il s'agit d'un outil de tansformation de fichiers qui permet en particulier la génération de sites statiques. L'intérêt de tels sites est leur facilité de déploiement, le peu d'usage qu'ils font en terme de ressources et leur robustesse. L'inconvénient est la nécessité de connaître quelques rudiments sur l'usage d'une ligne de comande pour re-générer et re-déployer le site à chaque modification.
-## Sources
+### Préparation des sources
-**Metalsmith** requiert la disponibilité de **NodeJS** et **npm**.
+**Metalsmith** requiert la disponibilité de **NodeJS** et **npm**. L'installation de ces logiciels dépend du système d'exploitation utilisé.
-Pour installer les sources du site sur votre machine :
+Les sources peuvent être téléchargées depuis le dépôt **Gitea** ou bien copiées localement à l'aide de **git** avec la commande suivante.
git clone https://apps.ti-nuage.fr/gitea/ti-nuage/site.git
@@ -24,9 +24,17 @@ Le projet s'appuie sur un certain nombre de dépendances, utiles au developpemen
Le script `package.json` comprend une série de commandes utiles au développement et à la génération du site. Les plus utiles sont :
- pour générer le site : `npm run build`,
-
- pour le servir localement et le tester sur son navigateur : `npm run server`.
La liste des dommandes existantes est disponible avec `npm run`. Il est possible d'obtenir davantage d'informations en cas de problème avec la variable d'environnement `DEBUG`. Par exemple :
DEBUG=metalsmith* npm run build
+
+## Structure
+
+Le site de l'association est essentiellement composé de pages statiques. Les billets d'actualité et les comptes-rendus de réunion sont eux-même générés ou assemblés avec le reste des pages du site.
+
+Cependant, afin d'être réactif, l'affichage des événements du calendrier partagé de l'association est effectué depuis le navigateur. Si le navigateur dispose d'un support Javascript actif, alors :
+
+- les événements à venir sont mixés avec les billets récents du blog dans la rubrique Actualité de la page d'accueil ;
+- le menu propose une entrée « Calendrier » à la suite de « Actualité ». Cette nouvelle page présente plus largement les événements récents ou à venir.
diff --git a/content/calendrier.html b/content/calendrier.html
new file mode 100644
index 0000000..f85cc4e
--- /dev/null
+++ b/content/calendrier.html
@@ -0,0 +1,5 @@
+---
+layout: calendar.njk
+permalink: false
+title: Événements à venir
+---
diff --git a/content/donnees/calendrier.php b/content/donnees/calendrier.php
new file mode 100644
index 0000000..d53ef32
--- /dev/null
+++ b/content/donnees/calendrier.php
@@ -0,0 +1,8 @@
+
diff --git a/content/js/calendrier.js b/content/js/calendrier.js
new file mode 100644
index 0000000..77e7bd4
--- /dev/null
+++ b/content/js/calendrier.js
@@ -0,0 +1,101 @@
+
+const http = require('http')
+const ical = require('ical')
+
+function createEventEntry (event) {
+ const entry = document.createElement('div')
+ const formatDate = Intl.DateTimeFormat('fr', { dateStyle: 'long', timeStyle: 'short' }).format
+ const header = document.createElement('h3')
+
+ header.textContent = formatDate(event.date) + ' | ' + event.summary
+
+ entry.className = 'event-entry'
+ entry.setAttribute('entry-time', event.date.getTime())
+ entry.appendChild(header)
+
+ return entry
+}
+
+function sortEvents (events) {
+ const sorted = []
+
+ /* First extract the events. */
+ Object.values(events).forEach(event => {
+ if (event.type === 'VEVENT') {
+ sorted.push({
+ date: event.start,
+ location: event.location,
+ summary: event.summary
+ })
+ }
+ })
+
+ /* Then sort them out. */
+ // TODO: Useless here. Should be done on callbacks below
+ return sorted.sort((a, b) => { return a.date < b.date })
+}
+
+function loadEvents (cb) {
+ http.request({
+ // host: 'www.ti-nuage.fr',
+ host: 'test-www.ti-nuage.fr',
+ path: '/donnees/calendrier.php'
+ }, function (response) {
+ let str = ''
+
+ response.on('data', function (chunk) {
+ str += chunk
+ })
+
+ response.on('end', function () {
+ const events = sortEvents(ical.parseICS(str))
+ cb(events)
+ })
+ }).end()
+}
+
+module.exports = {
+
+ fill: function (target) {
+ loadEvents(events => {
+ events.forEach(event => {
+ target.appendChild(createEventEntry(event))
+ })
+ })
+ },
+
+ mergeWithNews: function (target) {
+ const blogEntries = target.getElementsByClassName('blog-entry')
+ const entries = {}
+
+ for (let i = 0; i < blogEntries.length; ++i) {
+ const item = blogEntries.item(i)
+ entries[item.getAttribute('entry-time')] = item
+ }
+
+ loadEvents(events => {
+ target.innerHTML = ''
+
+ /* Merge events with blog entries */
+ events.forEach(event => {
+ entries[event.date.getTime()] = createEventEntry(event)
+ })
+
+ /* Sort and only keep entries up to the next 30 days */
+ const limitTime = Date.now() + (30 * 24 * 60 * 60 * 1000)
+ const times = Object.keys(entries).sort(function (a, b) { return a < b })
+
+ for (let i = times.length; i--;) {
+ if (times[i] > limitTime) {
+ times.splice(i, 1)
+ }
+ }
+
+ /* Finally display only the first six entries */
+ times.splice(5, times.length)
+ times.forEach(time => {
+ target.appendChild(entries[time])
+ })
+ })
+ }
+}
diff --git a/layouts/article.njk b/layouts/article.njk
index 046df56..af93aa1 100644
--- a/layouts/article.njk
+++ b/layouts/article.njk
@@ -4,7 +4,7 @@
{{ title }}
{% if date %}
- Publié le : {{ moment(date).format('LL') }}
+ Publié le : {{ date_format(date) }}
{% endif %}
diff --git a/layouts/base.njk b/layouts/base.njk
index 745f27d..fcd2b74 100644
--- a/layouts/base.njk
+++ b/layouts/base.njk
@@ -45,7 +45,7 @@