Merge pull request #2 from fitodac/feature/index-responsive

Feature/index responsive

Author: fitodac

e2e/check.js

@@ -0,0 +1,70 @@
+import { chromium } from 'playwright';
+
+(async () => {
+  const browser = await chromium.launch();
+  const page = await browser.newPage();
+  
+  const viewports = [
+    { name: 'Mobile', width: 375, height: 667 },
+    { name: 'Tablet', width: 768, height: 1024 },
+    { name: 'Desktop', width: 1440, height: 900 },
+  ];
+
+  const pagesToCheck = [
+    { name: 'Index', url: 'http://localhost:4321/' },
+    { name: 'Cursos', url: 'http://localhost:4321/cursos' },
+    { name: 'Proyectos', url: 'http://localhost:4321/proyectos' },
+    { name: 'Publicaciones', url: 'http://localhost:4321/publicaciones' }
+  ];
+
+  let hasErrors = false;
+
+  for (const pageInfo of pagesToCheck) {
+    console.log(`\nChecking page: ${pageInfo.name}`);
+    for (const vp of viewports) {
+      await page.setViewportSize({ width: vp.width, height: vp.height });
+      await page.goto(pageInfo.url);
+      await page.waitForLoadState('networkidle');
+
+      const isResponsive = await page.evaluate(() => {
+        return document.documentElement.scrollWidth <= window.innerWidth;
+      });
+
+      console.log(`  - Viewport ${vp.name} (${vp.width}x${vp.height}): Responsive=${isResponsive}`);
+
+      if (!isResponsive) {
+        console.error(`    ERROR: Horizontal scroll detected on ${pageInfo.name} at ${vp.name}!`);
+        
+        // Find what's overflowing
+        const overflowingElements = await page.evaluate(() => {
+          const docWidth = document.documentElement.clientWidth;
+          const elements = Array.from(document.querySelectorAll('*'));
+          const overflows = [];
+          for (const el of elements) {
+            const rect = el.getBoundingClientRect();
+            if (rect.right > docWidth) {
+              overflows.push({
+                tag: el.tagName,
+                className: el.className,
+                right: rect.right,
+                docWidth
+              });
+            }
+          }
+          return overflows.slice(0, 3); // top 3
+        });
+        console.log(`    Overflowing elements:`, overflowingElements);
+        hasErrors = true;
+      }
+    }
+  }
+
+  await browser.close();
+  
+  if (hasErrors) {
+    process.exit(1);
+  } else {
+    console.log('\nSUCCESS: All pages and viewports are successfully responsive.');
+    process.exit(0);
+  }
+})();

e2e/index.responsive.spec.ts

@@ -0,0 +1,30 @@
+import { test, expect } from '@playwright/test';
+
+const viewports = [
+  { name: 'Mobile', width: 375, height: 667 },
+  { name: 'Tablet', width: 768, height: 1024 },
+  { name: 'Desktop', width: 1440, height: 900 },
+];
+
+test.describe('Responsive Index Page', () => {
+  for (const vp of viewports) {
+    test(`Viewport: ${vp.name}`, async ({ page }) => {
+      await page.setViewportSize({ width: vp.width, height: vp.height });
+      await page.goto('http://localhost:4321/');
+      
+      // Wait for network idle to ensure everything is loaded
+      await page.waitForLoadState('networkidle');
+
+      // Check for horizontal scrollability by comparing scrollWidth and clientWidth
+      const isResponsive = await page.evaluate(() => {
+        return document.documentElement.scrollWidth <= window.innerWidth;
+      });
+      
+      // Take a screenshot for visual confirmation
+      await page.screenshot({ path: `playwright-report/screenshots/index-${vp.name.toLowerCase()}.png`, fullPage: true });
+
+      // The layout should fit without horizontal scrolling
+      expect(isResponsive, `Page should not have horizontal scrollbar on ${vp.name}`).toBe(true);
+    });
+  }
+});

package-lock.json

@@ -28,7 +28,9 @@
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.6",
+    "@playwright/test": "^1.58.2",
     "@types/node": "^20",
+    "playwright": "^1.58.2",
     "prettier": "^3.8.1",
     "prettier-plugin-astro": "^0.14.1",
     "typescript": "^5.9.3"