Feat/62386070 showcase page

src/_data/cases.json

@@ -0,0 +1,50 @@
+[
+    {
+      "title": "John Smith",
+      "images": ["/assets/img/imagesCases/Emily_Blunt-new.jpg", "/assets/img/imagesCases/Koshak_Koteevich.jpg"],
+      "description": "Все, что человеческий разум способен понять и во что он способен поверить, достижимо.",
+      "link": "/"
+    },
+    {
+      "title": "Emily Blunt",
+      "images": ["/assets/img/imagesCases/John_Smith-new.jpg", "/assets/img/imagesCases/Emily_Blunt-new.jpg", "/assets/img/imagesCases/Koshak_Koteevich.jpg"],
+      "description": "Сложнее всего начать действовать, все остальное зависит только от упорства.",
+      "link": "/"
+    },
+    {
+      "title": "Koshak Koteevich",
+      "images": ["/assets/img/imagesCases/Tigra_Leopardovich.jpg", "/assets/img/imagesCases/Emily_Blunt-new.jpg", "/assets/img/imagesCases/Koshak_Koteevich.jpg"],
+      "description": "Неудача — это возможность начать заново, но уже более мудро.",
+      "link": "/"
+    },
+    {
+      "title": "Luna Lovegood",
+      "images": ["/assets/img/imagesCases/orange-wood-table.jpg", "/assets/img/imagesCases/Koshak_Koteevich.jpg"],
+      "description": "Если проблему можно решить, не стоит о ней беспокоиться.",
+      "link": "/"
+    },
+    {
+      "title": "Milana Clark",
+      "images": ["/assets/img/imagesCases/Panda_Padlovna.jpg", "/assets/img/imagesCases/orange-wood-table.jpg", "/assets/img/imagesCases/Emily_Blunt-new.jpg", "/assets/img/imagesCases/Koshak_Koteevich.jpg"],
+      "description": "Обстоятельства часто можно изменить, изменив свое отношение к ним.",
+      "link": "/"
+    },
+    {
+      "title": "Leopardovskiy Orange Apelsinovich",
+      "images": ["/assets/img/imagesCases/Koshak_Koteevich.jpg", "/assets/img/imagesCases/Emily_Blunt-new.jpg"],
+      "description": "Обстоятельства часто можно изменить, изменив свое отношение к ним.",
+      "link": "/"
+    },
+    {
+      "title": "Panda Padlovna",
+      "images": ["/assets/img/imagesCases/Milana_Clark-new.jpg", "/assets/img/imagesCases/Koshak_Koteevich.jpg"],
+      "description": "Вдохновение приходит только во время работы. Обстоятельства часто можно изменить, изменив свое отношение к ним.",
+      "link": "/"
+    },
+    {
+      "title": "Tigra Leopardovich",
+      "images": ["/assets/img/imagesCases/Luna_Lovegood-new.jpg", "/assets/img/imagesCases/Emily_Blunt-new.jpg", "/assets/img/imagesCases/Koshak_Koteevich.jpg", "/assets/img/imagesCases/Panda_Padlovna.jpg"],
+      "description": "Если проблему можно решить, не стоит о ней беспокоиться.",
+      "link": "/"
+    }
+]

src/_data/navLinks.json

@@ -14,5 +14,9 @@
 	{
 		"link":"https://play.mlut.style/",
 		"text":"Sandbox"
+	},
+	{
+		"link":"/showcase",
+		"text":"Showcase"
 	}
 ]

src/_includes/components/show-card-swiper.ejs

@@ -0,0 +1,14 @@
+<%
+  const item = it.item;
+  const images = item.images && Array.isArray(item.images) ? item.images : [];
+%>
+
+<li>
+    <a class="Txd-n C-ih W100p H100p D-f Fld-c -Bdy -Bdyc-$accent750 -Bdyc-$brand_h Ts-bd,0.3s,e Cs" href="<%= item.link %>">
+        <slider-component images='<%= JSON.stringify(images) %>' title="<%= item.title %>"></slider-component>
+        <div class="D-f Fld-c P2.5u Bdt1;s;$accent750">
+          <span class="Mb3u Fns4u"><%= item.title ?? '' %></span>
+          <span class="Fns3u C-$gray350"><%= item.description ?? '' %></span>
+        </div>
+    </a>
+</li>

src/assets/script/swiper.js

@@ -0,0 +1,132 @@
+const swiperModule = "https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs";
+const swiperCss = "https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css";
+
+class SliderComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.images = JSON.parse(this.getAttribute('images') || '[]');
+    this.title = this.getAttribute('title') || '';
+  }
+
+  connectedCallback() {
+    this.render();
+    this.ensureStyles();
+    this.loadSwiperModule();
+  }
+
+  render() {
+    const slidesHtml = this.images.length > 0
+      ? this.images.map(img => `
+          <div class="swiper-slide">
+            <div class="W100p H244">
+              <img src="${img}" alt="${this.title}" class="H100p W100p Ojf-cv Ojp-c Bdrd8">
+            </div>
+          </div>
+        `)
+      : `<div class="swiper-slide">Нет изображений</div>`;
+
+    this.innerHTML = `
+    <div class="P2.5u">
+      <div class="swiper">
+        <div class="swiper-wrapper">${slidesHtml}</div>
+        <div class="swiper-pagination"></div>
+        <button class="prev D-f P1u Bg-n Bd-n Bdrd8 Ps-a T109 L0 Zi1 md_D-n">
+          <svg class="Fi-$gray200 Fi-$brand_a Ts-shortTs Tf -Rt180d Cs" width="26px" height="26px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+            <polygon points="150.46 478 129.86 456.5 339.11 256 129.86 55.49 150.46 34 382.14 256 150.46 478"/>
+          </svg>
+        </button>
+        <button class="next D-f P1u Bg-n Bd-n Bdrd8 Ps-a T109 R0 Zi1 md_D-n">
+          <svg class="Fi-$gray200 Fi-$brand_a Ts-$shortTs Cs" width="26px" height="26px" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+            <polygon points="150.46 478 129.86 456.5 339.11 256 129.86 55.49 150.46 34 382.14 256 150.46 478"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+    `;
+  }
+
+  ensureStyles() {
+    if (document.querySelector(`link[href*="swiper-bundle.min.css"]`)) return;
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = swiperCss;
+    document.head.appendChild(link);
+  }
+
+  async loadSwiperModule() {
+    try {
+      const { default: Swiper } = await import(swiperModule);
+
+      if (!SliderComponent.Swiper) {
+        SliderComponent.Swiper = Swiper;
+      }
+
+      if (document.querySelector(`link[href*="swiper-bundle.min.css"]`)) {
+        this.initSwiper(Swiper);
+      } else {
+        this.waitForStylesAndInit(Swiper);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  waitForStylesAndInit(Swiper) {
+    const checkStyles = () => {
+      if (document.querySelector(`link[href*="swiper-bundle.min.css"]`)) {
+        this.initSwiper(Swiper);
+      } else {
+        setTimeout(checkStyles, 50);
+      }
+    };
+    checkStyles();
+  }
+
+  initSwiper(Swiper) {
+    if (!this.isConnected) return;
+
+    const swiperContainer = this.querySelector('.swiper');
+    if (!swiperContainer) {
+      return;
+    }
+
+    this.swiper = new Swiper(swiperContainer, {
+      pagination: {
+        el: this.querySelector('.swiper-pagination'),
+        clickable: false,
+        dynamicBullets: true
+      },
+      navigation: {
+        nextEl: '.next',
+        prevEl: '.prev'
+      },
+      loop: true,
+      speed: 300,
+      effect: 'fade',
+      fadeEffect: { crossFade: true },
+      simulateTouch: false,
+      allowTouchMove: true,
+      autoplay: false,
+      grabCursor: false
+    });
+
+    const totalSlides = this.querySelectorAll('.swiper-slide').length;
+    swiperContainer.addEventListener('mousemove', (e) => {
+      const rect = swiperContainer.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const percentage = x / rect.width;
+      let slideIndex = Math.floor(percentage * totalSlides);
+
+      if (slideIndex >= totalSlides) slideIndex = totalSlides - 1;
+      if (slideIndex < 0) slideIndex = 0;
+
+      this.swiper.slideTo(slideIndex, 300, false);
+    });
+
+    swiperContainer.addEventListener('mouseleave', () => {
+      this.swiper.slideTo(0, 800, false);
+    });
+  }
+}
+
+customElements.define('slider-component', SliderComponent);

src/assets/style/style.scss

@@ -41,6 +41,8 @@ html{
 	--ml-blueGray:rgb(236, 240, 246,0.5);
 	--ml-gray200:#d1d5db;
 	--ml-gray350:#cacacaa0;
+	// showcase
+	--ml-bleedWidth: calc(100% + 280px);
 }
 
 
@@ -157,5 +159,4 @@ html{
 
 	}
 
-}
-
+}

src/layouts/base.ejs

@@ -17,7 +17,7 @@ if (it.area === "main"){
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="/assets/style/style.min.css">
-	<link rel="icon" href="/assets/img/favicon.png" type="image/x-icon">
+	<link rel="icon" type="image/x-icon" href="/assets/img/favicon.png">
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/github-dark.min.css">
   <title>mlut - make CSS exciting again!</title>
 </head>

src/showcase.ejs

@@ -0,0 +1,28 @@
+---
+title: Showcase
+layout: base.ejs
+---
+
+<%
+  const bdX = "-Bdx -Bdxc-$accent750";
+  const bdY = "-Bdy -Bdyc-$accent750";
+%>
+
+<div class="P-$headerH;5;0 D-f C-$accent900 md_P-$headerH;100;0">
+  <div class="D-n W8u <%= bdX %> md_D-f"></div>
+      <div class="Pb40 W100p">
+        <div class="M40;0;60 P0;20 W100p <%= bdY %> md_W-$bleedWidth md_M40;-140;80 md_P0;160">
+          <h1 class="Txa-c M10;0">Showcase</h1>
+        </div>
+        <div class="D-n H8u W-$bleedWidth Ml-140 <%= bdY %> md_D-f"></div>
+          <ul class="Lss-n P0 M8u;5u D-g Gtc-t1 Gap8u sm_Gtc-t2 xl_Gtc-t3 xxl_Gtc-t4">
+            <% for (let elem of it.cases) { %>
+              <%- include('_includes/components/show-card-swiper.ejs', { item: elem }) %>
+            <% } %>
+          </ul>
+        <div class="D-n H8u W-$bleedWidth Ml-140 <%= bdY %> md_D-f"></div>
+      </div>
+  <div class="D-n W8u <%= bdX %> md_D-f"></div>
+</div>
+
+<script src="/assets/script/swiper.js" type="module"></script>