From 92341ca99409b683b17de32aea4e542ebb4f1598 Mon Sep 17 00:00:00 2001 From: Anna Makarudze Date: Sun, 21 Dec 2025 19:13:15 +0100 Subject: [PATCH 1/2] Try to fix carousel issues --- src/layouts/TutorialLayout.astro | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/layouts/TutorialLayout.astro b/src/layouts/TutorialLayout.astro index f2200ca..95e4958 100644 --- a/src/layouts/TutorialLayout.astro +++ b/src/layouts/TutorialLayout.astro @@ -9,15 +9,10 @@ const { title, currentOS } = Astro.props; {title} | Django Girls Tutorial - -

Django Girls Tutorial

-
From aa02b871383f8547321f70d0346d6a0356bbd8b1 Mon Sep 17 00:00:00 2001 From: Anna Makarudze Date: Sun, 21 Dec 2025 20:10:07 +0100 Subject: [PATCH 2/2] Fix carousel slider --- e2e/carousel.e2e.ts | 21 +++++++++++++++++---- src/components/Carousel.astro | 19 ------------------- src/components/Carousel.jsx | 17 +++++++++++++++++ src/components/Sidebar.astro | 4 +--- src/scripts/swiper.js | 1 + 5 files changed, 36 insertions(+), 26 deletions(-) delete mode 100644 src/components/Carousel.astro create mode 100644 src/components/Carousel.jsx diff --git a/e2e/carousel.e2e.ts b/e2e/carousel.e2e.ts index 29a8d4b..c0b0158 100644 --- a/e2e/carousel.e2e.ts +++ b/e2e/carousel.e2e.ts @@ -1,7 +1,20 @@ import { test, expect } from '@playwright/test'; -test('carousel container exists on /en/', async ({ page }) => { +test('carousel initializes on /en/', async ({ page }) => { await page.goto('/en/'); - await page.waitForSelector('.swiper, .carousel'); // adjust to your actual class - await expect(page.locator('.swiper, .carousel')).toBeVisible(); -}); + + const container = page.locator('swiper-container'); + await expect(container).toBeVisible(); + + await page.waitForFunction(() => { + const el = document.querySelector('swiper-container'); + return el && el.swiper; + }); + + const hasSwiper = await page.evaluate(() => { + const el = document.querySelector('swiper-container'); + return !!el.swiper; + }); + + expect(hasSwiper).toBe(true); +}); \ No newline at end of file diff --git a/src/components/Carousel.astro b/src/components/Carousel.astro deleted file mode 100644 index 8b29f36..0000000 --- a/src/components/Carousel.astro +++ /dev/null @@ -1,19 +0,0 @@ ---- -import { register } from 'swiper/element/bundle'; -import swiperStyles from 'swiper/swiper-bundle.css?inline'; - -register(); ---- - - - - Item 1 - Item 2 - Item 3 - \ No newline at end of file diff --git a/src/components/Carousel.jsx b/src/components/Carousel.jsx new file mode 100644 index 0000000..2fdc7e3 --- /dev/null +++ b/src/components/Carousel.jsx @@ -0,0 +1,17 @@ +import { useEffect } from "react"; +import { register } from "swiper/element/bundle"; +import "swiper/swiper-bundle.css"; + +export default function Carousel() { + useEffect(() => { + register(); + }, []); + + return ( + + Item 1 + Item 2 + Item 3 + + ); +} \ No newline at end of file diff --git a/src/components/Sidebar.astro b/src/components/Sidebar.astro index b51b1b3..5ee76c4 100644 --- a/src/components/Sidebar.astro +++ b/src/components/Sidebar.astro @@ -1,8 +1,6 @@ --- const { currentOS } = Astro.props; -import 'swiper/css'; -import 'swiper/element/bundle'; -import Carousel from '../components/Carousel.astro'; +import Carousel from '../components/Carousel.jsx'; ---