nouvelle page d’accueil annonçant Araberlin

main
Jalil Arfaoui 2022-11-27 23:00:04 +01:00
parent e89d13e0e5
commit 7b5e9a2f7d
5 changed files with 1071 additions and 50 deletions

View File

@ -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'

1033
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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",

Binary file not shown.

After

Width:  |  Height:  |  Size: 118 KiB

View File

@ -2,51 +2,18 @@
layout: layouts/base.njk
---
<div data-elementor-type="wp-page" data-elementor-id="24" class="elementor elementor-24" data-elementor-settings="[]">
<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>
<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 dhabitude, 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 jai eu lhonneur et le privilège de
rencontrer à Tunis en mars dernier.<br>
<br>
On vous tient au courant !</p>
<p class="text-3xl font-bold">Malika</p>
<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>