Support du calendrier NextCloud (fix #7).

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.

assets/production/css/style.css

@@ -95,6 +95,34 @@ abbr {
   border-bottom: 1px dotted #373d3f;
 }
 
+.loader-wrapper {
+  display: grid;
+  grid-template-columns: 1fr 4fr;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 1em;
+  width: 400px;
+}
+
+.loader-wrapper div {
+  animation: spin 2s linear infinite;
+  display: table-column-group;
+  height: 30px;
+  width: 30px;
+  border: 5px solid #fff0;
+  border-top: 5px solid #555;
+  border-radius: 50%;
+}
+
+.loader-wrapper p {
+  padding-top: 0.5em;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
 .meta-published {
   color: #999;
   margin-bottom: 1em;
@@ -189,10 +217,37 @@ nav section ul li {
   font-size: 1.5em;
 }
 
+.news-entry h3 {
+  position: relative;
+  padding-left: 2em;
+  padding-top: 0.2em;
+}
+
+.news-entry h3::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 48px;
+  width: 48px;
+}
+
+.blog-entry h3::before {
+  background: transparent url(/images/uicons/comment.svg) center center no-repeat;
+}
+
+.event-entry h3::before {
+  background: transparent url(/images/uicons/alarm-clock.svg) center center no-repeat;
+}
+
+.event-elapsed h3 {
+  color: grey;
+  text-decoration: line-through;
+}
+
 .services {
   border: lightblue 4px solid;
   padding: 0.6em;
-
 }
 
 .services-title {
@@ -201,7 +256,7 @@ nav section ul li {
   line-height: 48px;
 }
 
-.services-title:before {
+.services-title::before {
   content: "";
   position: absolute;
   left: 0;

assets/production/images/uicons/alarm-clock.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="24" height="24"><path d="M13,2.051V1a1,1,0,0,0-2,0V2.051A10.98,10.98,0,0,0,3.681,20.176,3.024,3.024,0,0,0,2,23a1,1,0,0,0,2,0,1.2,1.2,0,0,1,1.11-1.229.932.932,0,0,0,.2-.062,10.924,10.924,0,0,0,13.39,0,1.033,1.033,0,0,0,.182.064A1.2,1.2,0,0,1,20,23a1,1,0,0,0,2,0,3.024,3.024,0,0,0-1.681-2.824A10.98,10.98,0,0,0,13,2.051ZM3,13a9,9,0,1,1,9,9A9.011,9.011,0,0,1,3,13Z"/><path d="M19.215,0a1,1,0,0,0,0,2A2.59,2.59,0,0,1,22,4.5a1,1,0,0,0,2,0A4.6,4.6,0,0,0,19.215,0Z"/><path d="M2,4.5A2.59,2.59,0,0,1,4.785,2a1,1,0,0,0,0-2A4.6,4.6,0,0,0,0,4.5a1,1,0,0,0,2,0Z"/><path d="M13,11.586V7a1,1,0,0,0-2,0v5a1,1,0,0,0,.293.707l3,3a1,1,0,0,0,1.414-1.414Z"/></svg>

assets/production/images/uicons/comment.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><g id="_01_align_center" data-name="01 align center"><path d="M24,24H12.018A12,12,0,1,1,24,11.246l0,.063ZM12.018,2a10,10,0,1,0,0,20H22V11.341A10.018,10.018,0,0,0,12.018,2Z"/><rect x="7" y="7" width="6" height="2"/><rect x="7" y="11" width="10" height="2"/><rect x="7" y="15" width="10" height="2"/></g></svg>

content/calendrier.html

@@ -0,0 +1,5 @@
+---
+layout: calendar.njk
+permalink: false
+title: Événements à venir
+---

content/donnees/calendrier.php

@@ -0,0 +1,8 @@
+<?php
+
+const ICS_URL = 'https://cloud.ti-nuage.fr/remote.php/dav/public-calendars/gqm9WNa9eoXGEiNc?export';
+
+$ics = file_get_contents(ICS_URL);
+echo $ics;
+
+?>

content/js/calendar.js

@@ -0,0 +1,153 @@
+
+const http = require('http')
+const ical = require('ical')
+
+const MONTH = 30 * 24 * 60 * 60 * 1000
+
+const Accumulator = {
+
+  init: function (pastLimit, futureLimit) {
+    this.entries = {}
+    this.futureLimit = futureLimit
+    this.pastLimit = pastLimit
+  },
+
+  add: function (time, element) {
+    if (!this.entries.hasOwnProperty(time)) {
+      this.entries[time] = []
+    }
+    this.entries[time].push(element)
+  },
+
+  offer: function (time, element) {
+    if (time >= this.pastLimit && time < this.futureLimit) {
+      this.add(time, element)
+    }
+  },
+
+  offerEvent: function (event) {
+    const content = document.createElement('p')
+    const element = document.createElement('div')
+    const formatDate = Intl.DateTimeFormat('fr', { dateStyle: 'long', timeStyle: 'short' }).format
+    const header = document.createElement('h3')
+
+    content.innerHTML = event.location
+    header.textContent = formatDate(event.date) + ' | ' + event.summary
+
+    element.className = 'event-entry news-entry'
+    element.setAttribute('entry-time', event.date.getTime())
+    element.appendChild(header)
+    element.appendChild(content)
+
+    this.offer(event.date.getTime(), element)
+  },
+
+  iterate: function (cb) {
+    Object
+      .keys(this.entries)
+      .sort(function (a, b) { return a < b })
+      .forEach(time => { cb(time, this.entries[time]) })
+  }
+}
+
+function createLoader (target) {
+  const message = document.createElement('p')
+  const spinner = document.createElement('div')
+  const wrapper = document.createElement('div')
+
+  wrapper.className = 'loader-wrapper'
+  message.innerHTML = 'Chargement du calendrier...'
+
+  wrapper.appendChild(spinner)
+  wrapper.appendChild(message)
+
+  target.insertBefore(wrapper, target.firstChild)
+}
+
+function loadEvents (cb) {
+  const events = []
+
+  http.get({
+    host: 'www.ti-nuage.fr',
+    path: '/donnees/calendrier.php'
+  }, function (response) {
+    let str = ''
+
+    response.on('data', (chunk) => {
+      str += chunk
+    })
+
+    response.on('end', () => {
+      /* Extract the events. */
+      Object.values(ical.parseICS(str)).forEach(event => {
+        if (event.type === 'VEVENT') {
+          events.push({
+            date: event.start,
+            location: event.location,
+            summary: event.summary
+          })
+        }
+      })
+
+      cb(events)
+    })
+
+    response.on('error', (e) => {
+      console.error(`Error on calendar response: ${e.message}`)
+      cb(events)
+    })
+  }).on('error', (e) => {
+    console.error(`Could not fetch calendar: ${e.message}`)
+    cb(events)
+  })
+}
+
+module.exports = {
+
+  fill: function (target) {
+    const now = Date.now()
+    const accumulator = Object.create(Accumulator)
+
+    accumulator.init(now - 1 * MONTH, now + 3 * MONTH)
+    createLoader(target)
+
+    loadEvents(events => {
+      events.forEach(event => { accumulator.offerEvent(event) })
+
+      target.innerHTML = ''
+
+      accumulator.iterate((time, elements) => {
+        elements.forEach(e => {
+          if (time < now) {
+            e.className = e.className + ' event-elapsed'
+          }
+          target.appendChild(e)
+        })
+      })
+    })
+  },
+
+  mergeWithNews: function (target) {
+    const now = Date.now()
+    const accumulator = Object.create(Accumulator)
+    const blogElements = target.getElementsByClassName('blog-entry')
+
+    accumulator.init(now, now + 1 * MONTH)
+    createLoader(target)
+
+    for (let i = 0; i < blogElements.length; ++i) {
+      const item = blogElements.item(i)
+      accumulator.add(item.getAttribute('entry-time'), item)
+    }
+
+    loadEvents(events => {
+      events.forEach(event => { accumulator.offerEvent(event) })
+
+      target.innerHTML = ''
+
+      accumulator.iterate((time, elements) => {
+        elements.forEach(e => { target.appendChild(e) })
+      })
+    })
+  }
+}

layouts/article.njk

@@ -4,7 +4,7 @@
 <h1 class="mt128">{{ title }}</h1>
 {% if date %}
 <div class="meta-published">
-  Publié le : {{ moment(date).format('LL') }}
+  Publié le : {{ date_format(date) }}
 </div>
 {% endif %}
 

layouts/base.njk

@@ -17,7 +17,7 @@
     <nav class="Container three-cols">
       <section>
         <h2>Association</h2>
-        <ul>
+        <ul id="menu-association">
           <li><a href="/association.html">Découvrir l'association</a></li>
           <li><a href="/blog">Actualités</a></li>
         </ul>
@@ -45,7 +45,7 @@
 
     <footer class="footer mt128">
       <div class="Container">
-        <p class="tad">Page générée le {{ moment(article.date).format('LL') }}.</p>
+        <p class="tad">Page générée le {{ date_format(article.date) }}.</p>
         <hr>
         <p class="tac">
           <a href="/"><img class="logo-small" src="/images/logo.svg" alt=""></a>
@@ -55,5 +55,16 @@
         </p>
       </div>
     </footer>
+
+    <script type='text/javascript'>
+      const menu = document.getElementById('menu-association')
+      const entry = document.createElement('li')
+      const link = document.createElement('a')
+
+      link.href = '/calendrier.html'
+      link.textContent = 'Calendrier'
+      entry.appendChild(link)
+      menu.appendChild(entry)
+    </script>
   </body>
 </html>

layouts/blog.njk

@@ -5,7 +5,7 @@
   {% block header %}{{ header | safe }}{% endblock %}
   <article>
     {% for article in collections["archives"] %}
-    <h2><a href="/{{ article.path }}">{{ moment(article.date).format('LL') }} | {{ article.title }}</a></h2>
+    <h2><a href="/{{ article.path }}">{{ date_format(article.date) }} | {{ article.title }}</a></h2>
     {{ article.excerpt | safe }}
     <p><a href="/{{ article.path }}">Lire la suite...</a></p>
     {% else %}

layouts/calendar.njk

@@ -0,0 +1,19 @@
+{% extends "base.njk" %}
+
+{% block head %}
+    <script type='text/javascript' src="/js/calendar.js"></script>
+{% endblock %}
+
+{% block article %}
+<h1 class="mt128">Calendrier</h1>
+<div id="calendar" />
+<noscript>
+  Le téléchargement des données du calendrier requiert JavaScript.
+</noscript>
+<script type='text/javascript'>
+  window.onload = function(event) {
+    Calendar.fill(document.getElementById('calendar'))
+  }
+</script>
+
+{% endblock %}

layouts/front.njk

@@ -1,5 +1,9 @@
 {% extends "base.njk" %}
 
+{% block head %}
+    <script type='text/javascript' src="/js/calendar.js"></script>
+{% endblock %}
+
 {% block article %}
   {% block header %}{{ header | safe }}{% endblock %}
   <article>
@@ -7,15 +11,26 @@
 
     <section class="Services">
       <h2 class="tac mt128 mb64">Actualités</h2>
+      <div id="calendar">
         {% for article in collections["news"] %}
-         <h3><a href="{{ article.path }}">{{ moment(article.date).format('LL') }} | {{article.title }}</a></h3>
+        <div class="blog-entry news-entry" entry-time="{{article.date.getTime()}}">
+          <h3><a href="{{ article.path }}">{{ date_format(article.date) }} | {{article.title }}</a></h3>
           {{ article.excerpt | safe }}
           <p><a href="{{ article.path }}">Lire la suite...</a></p>
+        </div>
         {% else %}
         {% endfor %}
+      </div>
       <div class="tac mt32">
         <a class="button" href="/blog">Voir les archives</a>
       </div>
     </section>
   </article>
+
+  <script type='text/javascript'>
+  window.onload = function(event) {
+    Calendar.mergeWithNews(document.getElementById('calendar'))
+  }
+  </script>
+
 {% endblock %}

package.json

@@ -18,7 +18,9 @@
     "test": "npm run lint && npm run build"
   },
   "author": "Ti Nuage <contact@ti-nuage.fr>",
-  "dependencies": {},
+  "dependencies": {
+    "ical": "^0.8.0"
+  },
   "devDependencies": {
     "@metalsmith/collections": "^1.2.1",
     "@metalsmith/excerpts": "^1.5.1",
@@ -41,11 +43,11 @@
     "jstransformer-nunjucks": "^1.0.0",
     "metalsmith": "^2.4.0",
     "metalsmith-assets": "^0.1.0",
+    "metalsmith-browserify": "^1.1.0",
     "metalsmith-clean-css": "^6.1.3",
     "metalsmith-groff": "^0.4.0",
     "metalsmith-rename": "^1.0.0",
     "metalsmith-sitemap": "^1.2.2",
-    "moment": "^2.29.1",
     "nodemon": "^2.0.12",
     "rimraf": "^3.0.2",
     "slug": "^5.1.0",

scripts/metalsmith.js

@@ -1,5 +1,6 @@
 /* This is the actual metalsmith configuration script. */
 const assets = require('metalsmith-assets')
+const browserify = require('metalsmith-browserify')
 const cleanCSS = require('metalsmith-clean-css')
 const config = require('./config.js')
 const collections = require('@metalsmith/collections')
@@ -9,7 +10,6 @@ const layouts = require('@metalsmith/layouts')
 const Metalsmith = require('metalsmith')
 const markdown = require('@metalsmith/markdown')
 const marked = require('marked')
-const moment = require('moment')
 const permalinks = require('@metalsmith/permalinks')
 const rename = require('metalsmith-rename')
 const services = require('./metalsmith-tinuage-services')
@@ -35,12 +35,16 @@ markdownRenderer.link = function (href, title, text) {
   return out
 }
 
-moment.locale('fr')
-
 module.exports = new Metalsmith(config.paths.projectRoot)
   .clean(__PROD__)
   .metadata({
-    moment: moment,
+    date_format: function (date, withHours) {
+      const options = { dateStyle: 'long' }
+      if (withHours) {
+        options.push('timeStyle', 'short')
+      }
+      return Intl.DateTimeFormat('fr', options).format(date)
+    },
     production: __PROD__,
     remove_diatrics: function (e) { return slug(e, { mode: 'rfc3986' }) },
     site: {
@@ -55,6 +59,14 @@ module.exports = new Metalsmith(config.paths.projectRoot)
       rebase: true
     }
   }))
+  .use(browserify({
+    browserifyOptions: {
+      standalone: 'Calendar'
+    },
+    entries: [
+      'js/calendar.js'
+    ]
+  }))
   .use(assets({
     source: './assets/' + (process.env.NODE_ENV || 'dev'),
     destination: './'