feat: ajoute actualité rectorat 17 octobre

.eleventy.js

@@ -1,12 +1,13 @@
 require('dotenv').config()
-
-const { DateTime } = require("luxon");
-
 const pluginNavigation = require("@11ty/eleventy-navigation");
+const fg = require('fast-glob');
+const { DateTime } = require("luxon");
 const markdownIt = require('markdown-it')
 const markdownItAttrs = require('markdown-it-attrs')
-
 const filters = require('./src/filters')
+const galleryShortcode = require('./src/shortcodes/gallery')
+
+const photosRectorat20221017 = fg.sync(['**/src/images/rectorat-2022-10-17/*', '!**/_site'])
 
 const markdownItOptions = {
   html: true,
@@ -34,6 +35,11 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addPassthroughCopy("src/presse/audios");
   eleventyConfig.addPassthroughCopy("src/idees-recues/images");
   eleventyConfig.addPassthroughCopy("src/actualites/images");
+  eleventyConfig.addPassthroughCopy({
+    "node_modules/photoswipe/dist/photoswipe.css": "js/photoswipe.css",
+    "node_modules/photoswipe/dist/photoswipe.esm.js": "js/photoswipe.esm.js",
+    "node_modules/photoswipe/dist/photoswipe-lightbox.esm.js": "js/photoswipe-lightbox.esm.js"
+  })
 
   eleventyConfig.addFilter("toHTML", str => {
     return new markdownIt(markdownItOptions).renderInline(str);
@@ -74,6 +80,10 @@ module.exports = function(eleventyConfig) {
     ]
   })
 
+  eleventyConfig.addCollection('photosRectorat20221017', function() {
+    return photosRectorat20221017;
+  });
+
   eleventyConfig.addCollection('presseNonscollectif', collection => [
     ...collection
       .getFilteredByTags('presse', 'nonscollectif')
@@ -100,6 +110,8 @@ module.exports = function(eleventyConfig) {
       .filter(post => post.date >= DateTime.fromISO('2022-09-15') && post.date < DateTime.fromISO('2022-09-17'))
   ])
 
+  eleventyConfig.addAsyncShortcode('gallery', galleryShortcode);
+
   eleventyConfig.setLibrary('md', markdownIt(markdownItOptions).use(markdownItAttrs))
 
   eleventyConfig.setFrontMatterParsingOptions({ excerpt: true });

package.json

@@ -10,17 +10,21 @@
     "clean": "rm -rf _site",
     "tailwind:watch": "postcss src/style/global.pcss --o src/css/global.css --watch",
     "tailwind:build": "postcss src/style/global.pcss --o src/css/global.css --minify",
-    "dev": "npm run clean && concurrently \"npm run tailwind:watch\" \"eleventy --serve\"",
+    "dev": "concurrently \"npm run tailwind:watch\" \"eleventy --serve\"",
     "build": "npm run clean && npm run tailwind:build && eleventy"
   },
   "devDependencies": {
     "@11ty/eleventy": "^1.0.1",
+    "@11ty/eleventy-img": "^2.0.1",
     "@11ty/eleventy-navigation": "^0.3.3",
     "autoprefixer": "^10.4.7",
     "concurrently": "^7.3.0",
     "dotenv": "^16.0.1",
+    "fast-glob": "^3.2.12",
     "markdown-it": "^13.0.1",
     "markdown-it-attrs": "^4.1.4",
+    "outdent": "^0.8.0",
+    "photoswipe": "^5.3.2",
     "postcss-cli": "^10.0.0",
     "tailwindcss": "^3.1.6"
   }

src/_includes/common-metas.njk

@@ -41,9 +41,9 @@
         }
         </script>
         <link rel="stylesheet" href="{{ '/css/global.css' | url }}">
-        <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-        <link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
+        <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
-        <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
+        <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
-        <link rel="icon" type="image/png" href="android-chrome-192x192.png" sizes="192x192">
+        <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
-        <link rel="icon" type="image/png" href="android-chrome-512x512.png" sizes="512x512">
+        <link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">
         <meta name="theme-color" content="#fff7ed">

src/actualites/2022-10-17-rectorat-toulouse.njk

@@ -0,0 +1,51 @@
+---
+title: Journée d’école hors les murs
+description: Le NonSco’llectif a organisé une journée d’instruction hors-les-murs devant le rectorat afin de montrer à M. le recteur la réalité de l’instruction en famille.
+date: 2022-10-17
+modified: 2022-10-23
+image: /images/rectorat-2022-10-17/journee.jpeg
+---
+
+Le NonSco’llectif a organisé une journée d’instruction hors-les-murs devant le rectorat afin de montrer à M. le recteur la réalité de l’instruction en famille.
+
+---
+
+
+<blockquote>
+    « À Toulouse, peut être plus qu’ailleurs, nous sommes très attentifs à tout ce qui a trait à l’application de la loi, notamment dans le contexte du séparatisme »<br>
+    - Mostafa Fourar
+</blockquote>
+
+<p>Dans
+    <a target="_blank" href="https://www.ladepeche.fr/2022/10/17/instruction-en-famille-le-recteur-de-lacademie-de-toulouse-est-attentif-a-respecter-la-loi-du-24-aout-2021-10740055.php">La Dépêche d’aujourd’hui</a>,
+    Mostafa Fourar, recteur de l’académie de Toulouse, persévère dans sa posture irrecevable et continue d’assimiler les familles en IEF a des séparatistes.</p>
+
+
+<p>Alors le NonSco’llectif s’est déplacé jusqu’au rectorat pour une entreprise de vulgarisation afin de rétablir la vérité.</p>
+
+<p>Tout l’après-midi, parents et enfants se sont rassemblés devant les grilles de l’institution pour une grande session d’école hors les murs. Échecs, lecture, atelier d’arts, atelier philo sur la liberté… </p>
+
+<p>Le personnel académique et les médias ont pu découvrir des enfants socialisés, curieux, autonomes et ouverts sur le monde !</p>
+
+<p>Merci à <a target="_blank" href="https://twitter.com/gverniol">Gisèle Verniol</a> - EELV - pour sa présence !</p>
+
+<p>Le personnel académique et les médias ont pu découvrir lundi après-midi des enfants socialisés, curieux, autonomes et ouverts sur le monde !</p>
+
+<p><a href="/presse/2022-10-17-via-occitanie/">viàOccitanie</a> est venu à notre journée d'instruction devant l'Académie De Toulouse :</p>
+
+<iframe title="Un rassemblement pour défendre l'instruction en famille à Toulouse" src="https://peertube.stream/videos/embed/afbc0782-7f2e-4dfe-a905-34209a0a3e46?warningTitle=0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" class="mx-auto my-2 w-1/2 video-iframe"></iframe>
+
+<p class="mt-8">Malgré nos invitations en chansons, Moustafa Fourar n'est pas descendu à notre rencontre, ni aucun representant du rectorat.</p>
+
+<p>Quelques photos de notre journée :</p>
+
+{% gallery collections.photosRectorat20221017 %}
+
+<p>Le NonSco'llectif continue à se mobiliser pour faire sauter l'article 49 de cette loi absurde.<br>
+On ne s'arrêtera pas au Tribunal Administratif !
+</p>
+
+
+<p>#OnLâcheRien
+#SuppressionArt49IEF
+</p>

src/index.njk

@@ -10,7 +10,7 @@ description: Le NonSco’llectif œuvre pour préserver une liberté qui nous es
 
 {% set liste = collections.actusHome  %}
 
-<ol id="actualites-liste" class="flex flex-col lg:grid lg:gap-4 lg:grid-cols-3">
+<ol id="actualites-liste" class="flex flex-col md:grid md:gap-4 md:grid-cols-3">
     {% for actualite in liste %}
         <li class="{% if actualite.url == url %} famille-item-active{% endif %}">
             <a href="{{ actualite.url | url }}" class="no-underline">

src/shortcodes/gallery.js

@@ -0,0 +1,104 @@
+const Image = require("@11ty/eleventy-img");
+const outdent = require('outdent');
+
+
+const stringifyAttributes = (attributeMap) => {
+  return Object.entries(attributeMap)
+    .map(([attribute, value]) => {
+      if (typeof value === 'undefined') return '';
+      return `${attribute}="${value}"`;
+    })
+    .join(' ');
+};
+
+const sourceHtmlString = (imageMetadata) => Object.values(imageMetadata)
+  .map((images) => {
+    const { sourceType } = images[0];
+
+    const sourceAttributes = stringifyAttributes({
+      type: sourceType,
+      srcset: images.map((image) => image.srcset).join(', '),
+      sizes: '25rem',
+    });
+
+    return `<source ${sourceAttributes}>`;
+  })
+  .join('\n');
+
+const getLargestImage = (imageMetadata, format) => {
+  const images = imageMetadata[format];
+  return images[images.length - 1];
+}
+
+const imgHtmlString = (image, imageMetadata) => {
+  const largestUnoptimizedImg = getLargestImage(imageMetadata, "jpeg");
+
+  const imgAttributes = stringifyAttributes({
+    src: largestUnoptimizedImg.url,
+    alt: image.split('/').at(-1),
+    loading: 'lazy',
+    decoding: 'async',
+  });
+
+  return `<img ${imgAttributes}>`;
+}
+
+const pictureHtml = (image, imageMetadata) => {
+  const pictureAttributes = stringifyAttributes({
+
+  });
+
+  const picture = `<picture ${pictureAttributes}>
+  ${sourceHtmlString(imageMetadata)}
+  ${imgHtmlString(image, imageMetadata)}
+</picture>`;
+
+  return outdent`${picture}`;
+}
+
+
+const metadataToPicture = ([image, m]) => {
+  const largestUnoptimizedImg = getLargestImage(m, "jpeg");
+
+  return `<a 
+  href="${largestUnoptimizedImg.url}" 
+  class="${largestUnoptimizedImg.width >= largestUnoptimizedImg.height ? 'landscape' : 'portrait'}"
+  data-pswp-width="${largestUnoptimizedImg.width}"
+  data-pswp-height="${largestUnoptimizedImg.height}"
+  >`
+    + pictureHtml(image, m)
+    + `</a>`
+}
+
+const galleryShortcode = async (images) => {
+  console.log("Generating gallery …")
+  const metadatas = await Promise.all(images.map(async i => {
+    const metadata = await Image(i, {
+      widths: [300, 600, null],
+      formats: ['webp', 'jpeg'],
+      outputDir: '_site/images/generated',
+      urlPath: '/images/generated'
+    });
+    return [i, metadata];
+  }));
+
+  console.log("Gallery generated !")
+
+  return `
+    <script type="module">
+      import PhotoSwipeLightbox from '/js/photoswipe-lightbox.esm.js';
+      const lightbox = new PhotoSwipeLightbox({
+        gallery: '#gallery',
+        children: 'a',
+        pswpModule: () => import('/js/photoswipe.esm.js')
+      });
+      lightbox.init();
+    </script>
+    <link rel="stylesheet" href="/js/photoswipe.css">
+    <section id="gallery" class="gallery">`
+    + metadatas.map(metadataToPicture).join('')
+    + `</section>
+`;
+}
+
+module.exports = galleryShortcode

src/style/actualites.pcss

@@ -5,7 +5,7 @@
     }
 
     img {
-        @apply object-cover object-top w-full;
+        @apply object-cover object-top w-full h-48;
         max-height: 14rem;
     }
 

src/style/global.pcss

@@ -38,3 +38,18 @@
     @apply p-4 w-full max-w-7xl aspect-video;
 }
 
+.gallery {
+    @apply grid grid-flow-row-dense grid-cols-2 md:grid-cols-3 gap-4;
+
+    a {
+        @apply w-full h-full;
+
+        &.portrait {
+            @apply row-span-2;
+        }
+
+        picture img {
+            @apply h-full w-full object-cover;
+        }
+    }
+}

src/style/presse.pcss

@@ -1,19 +1,18 @@
 .wrapper-news {
-    @apply flex flex-wrap mt-4 justify-center;
+    @apply flex flex-col lg:grid md:gap-2 lg:grid-cols-3;
 
     a {
         @apply no-underline;
 
         .news-card {
-            @apply m-2 border-2 rounded-lg lg:w-[480px] relative flex flex-col items-center overflow-hidden bg-slate-600;
+            @apply m-2 border-2 rounded-lg relative flex flex-col items-center overflow-hidden bg-slate-600 max-w-xl mx-auto lg:h-[35rem];
-            height: 35rem;
 
             .news-head {
                 @apply w-full flex items-center mt-2;
                 height: 5rem;
 
                 img {
-                    @apply w-1/4 mx-2 mt-2 py-2 px-2;
+                    @apply h-full w-20 mx-2 mt-2 object-contain;
                 }
 
                 h3 {