nouvelle page d’accueil annonçant Araberlin

.eleventy.js

@@ -1,10 +1,10 @@
 require('dotenv').config()
 
 const { DateTime } = require("luxon");
-
 const pluginNavigation = require("@11ty/eleventy-navigation");
 const markdownIt = require('markdown-it')
 const markdownItAttrs = require('markdown-it-attrs')
+const Image = require("@11ty/eleventy-img");
 
 const markdownItOptions = {
   html: true,
@@ -16,6 +16,26 @@ const parseDate = (date) => typeof date === 'string' ?
   DateTime.fromISO(date) :
   DateTime.fromJSDate(date, {zone: 'utc'})
 
+async function imageShortcode(src, alt, sizes) {
+  let metadata = await Image(src, {
+    widths: [300, 600, 1200],
+    formats: ["webp", "jpg"],
+    outputDir: '_site/images/generated',
+    urlPath: '/images/generated'
+  });
+
+  let imageAttributes = {
+    alt,
+    sizes,
+    loading: "lazy",
+    decoding: "async",
+  };
+
+  // You bet we throw an error on missing alt in `imageAttributes` (alt="" works okay)
+  return Image.generateHTML(metadata, imageAttributes);
+}
+
+
 module.exports = function(eleventyConfig) {
   eleventyConfig.addPlugin(pluginNavigation);
 
@@ -59,6 +79,8 @@ module.exports = function(eleventyConfig) {
 
   eleventyConfig.setFrontMatterParsingOptions({ excerpt: true });
 
+  eleventyConfig.addAsyncShortcode("image", imageShortcode)
+
   return {
     dir: {
       input: 'src'

package.json

@@ -16,6 +16,7 @@
   "devDependencies": {
     "@11ty/eleventy": "^1.0.1",
     "@11ty/eleventy-navigation": "^0.3.3",
+    "@11ty/eleventy-img": "^2.0.1",
     "autoprefixer": "^10.4.7",
     "concurrently": "^7.3.0",
     "dotenv": "^16.0.1",

src/index.njk

@@ -2,51 +2,18 @@
 layout: layouts/base.njk
 ---
 
+<article class="w-2/3 mx-auto pt-24 pb-16">
+	<p class="text-3xl font-bold">Nous démarrons notre futur projet !<br><br>
+		Comme d’habitude, nous mettrons notre énergie, notre passion et notre expérience au service de la remarquable
+		pièce ARABERLIN. Un texte de la non moins remarquable Jalila Baccar, que j’ai eu l’honneur et le privilège de
+		rencontrer à Tunis en mars dernier.<br>
+		<br>
+		On vous tient au courant !</p>
 
-			<div data-elementor-type="wp-page" data-elementor-id="24" class="elementor elementor-24" data-elementor-settings="[]">
+	<p class="text-3xl font-bold">Malika</p>
-							<div class="elementor-section-wrap">
-							<section class="elementor-section elementor-top-section elementor-element elementor-element-a91051b elementor-section-content-middle elementor-reverse-mobile elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="a91051b" data-element_type="section">
-							<div class="elementor-background-overlay"></div>
-							<div class="elementor-container elementor-column-gap-wide">
-					<div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-885eee1" data-id="885eee1" data-element_type="column">
-			<div class="elementor-widget-wrap elementor-element-populated">
-								<div class="elementor-element elementor-element-09a5a1b elementor-widget elementor-widget-text-editor" data-id="09a5a1b" data-element_type="widget" data-settings="{&quot;_animation&quot;:&quot;none&quot;}" data-widget_type="text-editor.default">
-				<div class="elementor-widget-container">
-			<style>/*! elementor - v3.5.6 - 28-02-2022 */
-.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#818a91;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#818a91;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}</style>				<h2 style="text-align: center;">C’était à Paris,&nbsp;</h2><h2 style="text-align: center;">Du 12 novembre au 18 décembre 2021,&nbsp;</h2><h2 style="text-align: center;">vendredi et samedi,</h2><h2 style="text-align: center;">&nbsp;À 21h30,</h2><h2 style="text-align: center;">&nbsp;Théâtre Clavel</h2>						</div>
-				</div>
-					</div>
-		</div>
-				<div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-68d57c9" data-id="68d57c9" data-element_type="column">
-			<div class="elementor-widget-wrap elementor-element-populated">
-								<div class="elementor-element elementor-element-1ec1cbf elementor-widget elementor-widget-image" data-id="1ec1cbf" data-element_type="widget" data-settings="{&quot;_animation&quot;:&quot;none&quot;,&quot;_animation_tablet&quot;:&quot;none&quot;}" data-widget_type="image.default">
-				<div class="elementor-widget-container">
-			<style>/*! elementor - v3.5.6 - 28-02-2022 */
-.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=".svg"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}</style>
-					<a href="/images/Affiche.jpg" data-elementor-open-lightbox="yes" data-elementor-lightbox-title="&quot;IL&quot; - Affiche par Mehdi Arfaoui" e-action-hash="#elementor-action%3Aaction%3Dlightbox%26settings%3DeyJpZCI6NzA2LCJ1cmwiOiJodHRwOlwvXC9jb21wYWduaWVrYWxpbWF0LmZyXC93cC1jb250ZW50XC91cGxvYWRzXC8yMDIxXC8xMFwvQWZmaWNoZS5qcGcifQ%3D%3D">
-							<img src="/images/Affiche.jpg" class="attachment-full size-full" alt="" loading="lazy" srcset="/images/Affiche.jpg 595w, /images/Affiche-424x600.jpg 424w" sizes="(max-width: 595px) 100vw, 595px" width="595" height="842">								</a>
-															</div>
-				</div>
-					</div>
-		</div>
-							</div>
-		</section>
-				<section class="elementor-section elementor-top-section elementor-element elementor-element-c0b9e21 elementor-section-boxed elementor-section-height-default elementor-section-height-default animated fadeInUp" data-id="c0b9e21" data-element_type="section" data-settings="{&quot;animation&quot;:&quot;fadeInUp&quot;}">
-						<div class="elementor-container elementor-column-gap-default">
-					<div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-671bc7f" data-id="671bc7f" data-element_type="column">
-			<div class="elementor-widget-wrap elementor-element-populated">
-								<div class="elementor-element elementor-element-2829263 elementor-widget elementor-widget-heading" data-id="2829263" data-element_type="widget" data-widget_type="heading.default">
-				<div class="elementor-widget-container">
-			<style>/*! elementor - v3.5.6 - 28-02-2022 */
-.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}</style><h2 class="elementor-heading-title elementor-size-default">Merci
- à vous d'être venus nous voir si nombreux pour notre premier projet. 
-Nos comédiens sont peut-être sortis de leurs prisons. Ils travaillent
-peut-être sur une nouvelle pièce...</h2>		</div>
-				</div>
-					</div>
-		</div>
-							</div>
-		</section>
-						</div>
-					</div>
 
+	<figure class="w-full lg:w-[600px] mx-auto">
+		{% image "./src/images/malika_avec_jalila_baccar.jpg", "Malika Zirari avec Jalila Baccar à Tunis", "(min-width: 30em) 50vw, 100vw" %}
+		<figcaption>Malika Zirari avec Jalila Baccar à Tunis</figcaption>
+	</figure>
+</article>