chore: init

examples/README.md

@@ -0,0 +1,92 @@
+# WebShot Example Scripts
+
+Collection of example puppeteer automation scripts for WebShot.
+
+## 📜 Available Scripts
+
+### `scroll-animation.js`
+Smoothly scrolls through the entire page before capturing. Great for long-form content and revealing lazy-loaded images.
+
+**Usage:**
+```bash
+webshot -u https://example.com -s ~/webshot-examples/scroll-animation.js
+```
+
+### `dark-mode.js`
+Attempts to enable dark mode on the page using various common methods. Perfect for capturing dark theme versions of websites.
+
+**Usage:**
+```bash
+webshot -u https://github.com -s ~/webshot-examples/dark-mode.js
+```
+
+### `interact-form.js`
+Fills out and interacts with forms on the page. Useful for capturing form states with data.
+
+**Usage:**
+```bash
+webshot -u https://example.com/contact -s ~/webshot-examples/interact-form.js
+```
+
+### `hover-effects.js`
+Simulates hovering over interactive elements to capture hover states.
+
+**Usage:**
+```bash
+webshot -u https://example.com -s ~/webshot-examples/hover-effects.js
+```
+
+### `mobile-view.js`
+Sets viewport to mobile dimensions (iPhone SE). Capture mobile-responsive designs.
+
+**Usage:**
+```bash
+webshot -u https://example.com -s ~/webshot-examples/mobile-view.js
+```
+
+### `animated-sections.js`
+Scrolls through page sections to trigger scroll-based animations. Perfect for modern websites with scroll-triggered effects.
+
+**Usage:**
+```bash
+webshot -u https://bruno-simon.com -s ~/webshot-examples/animated-sections.js
+```
+
+## 🎯 Cool Websites to Try
+
+- **https://bruno-simon.com** - 3D portfolio with scroll interactions
+- **https://threejs.org/examples** - WebGL animations
+- **https://stripe.com** - Beautiful modern design
+- **https://linear.app** - Sleek UI with animations
+- **https://github.com** - Try with dark-mode.js
+
+## ✨ Creating Your Own Scripts
+
+Scripts have access to the `page` object from Puppeteer. Here's a template:
+
+```javascript
+// Your custom automation script
+
+console.log('🚀 Starting custom automation...');
+
+// Do something with the page
+await page.evaluate(() => {
+  // Manipulate DOM
+  document.body.style.background = '#000';
+});
+
+// Wait for animations
+await new Promise(resolve => setTimeout(resolve, 1000));
+
+console.log('✓ Automation complete');
+```
+
+## 📚 Puppeteer API Reference
+
+- [Page Methods](https://pptr.dev/api/puppeteer.page)
+- [Browser Context](https://pptr.dev/api/puppeteer.browsercontext)
+- [Element Handles](https://pptr.dev/api/puppeteer.elementhandle)
+
+---
+
+**WebShot** - Shoot your favorite Websites!!!

examples/animated-sections.js

@@ -0,0 +1,33 @@
+// Animated Sections Example
+// Scrolls through page to trigger scroll-based animations
+
+console.log('✨ Triggering scroll animations...');
+
+// Get all sections
+const sections = await page.evaluate(() => {
+  const elements = document.querySelectorAll('section, .section, [class*="section"]');
+  return Array.from(elements).map(el => el.offsetTop);
+});
+
+console.log(`Found ${sections.length} sections to animate`);
+
+// Scroll to each section
+for (let i = 0; i < sections.length; i++) {
+  await page.evaluate((top) => {
+    window.scrollTo({ top, behavior: 'smooth' });
+  }, sections[i]);
+
+  console.log(`✓ Scrolled to section ${i + 1}/${sections.length}`);
+
+  // Wait for animations to trigger
+  await new Promise(resolve => setTimeout(resolve, 800));
+}
+
+// Scroll back to top
+await page.evaluate(() => {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+});
+
+await new Promise(resolve => setTimeout(resolve, 1000));
+
+console.log('✓ All animations triggered');

examples/dark-mode.js

@@ -0,0 +1,48 @@
+// Dark Mode Toggle Example
+// Attempts to enable dark mode on the page
+
+console.log('🌙 Attempting to enable dark mode...');
+
+// Try common dark mode implementations
+await page.evaluate(() => {
+  // Method 1: Toggle dark class on html
+  if (document.documentElement.classList.contains('light')) {
+    document.documentElement.classList.remove('light');
+    document.documentElement.classList.add('dark');
+  } else if (!document.documentElement.classList.contains('dark')) {
+    document.documentElement.classList.add('dark');
+  }
+
+  // Method 2: Toggle dark class on body
+  if (document.body.classList.contains('light')) {
+    document.body.classList.remove('light');
+    document.body.classList.add('dark');
+  } else if (!document.body.classList.contains('dark')) {
+    document.body.classList.add('dark');
+  }
+
+  // Method 3: Set data-theme attribute
+  document.documentElement.setAttribute('data-theme', 'dark');
+
+  // Method 4: Try to click dark mode toggle button
+  const darkModeSelectors = [
+    '[aria-label*="dark" i]',
+    '[title*="dark" i]',
+    'button[class*="dark" i]',
+    'button[class*="theme" i]',
+    '[data-theme-toggle]'
+  ];
+
+  for (const selector of darkModeSelectors) {
+    const element = document.querySelector(selector);
+    if (element && !element.classList.contains('active')) {
+      element.click();
+      break;
+    }
+  }
+});
+
+console.log('✓ Dark mode enabled');
+
+// Wait for transitions
+await new Promise(resolve => setTimeout(resolve, 500));

examples/hover-effects.js

@@ -0,0 +1,24 @@
+// Hover Effects Example
+// Simulates hovering over interactive elements
+
+console.log('👆 Simulating hover effects...');
+
+// Hover over buttons and links
+await page.evaluate(() => {
+  const hoverTargets = document.querySelectorAll('button, a, .card, [class*="hover"]');
+
+  hoverTargets.forEach((element, index) => {
+    if (index < 5) { // Hover first 5 elements
+      element.dispatchEvent(new MouseEvent('mouseenter', {
+        view: window,
+        bubbles: true,
+        cancelable: true
+      }));
+    }
+  });
+});
+
+console.log('✓ Hover effects activated');
+
+// Let effects settle
+await new Promise(resolve => setTimeout(resolve, 500));

examples/interact-form.js

@@ -0,0 +1,41 @@
+// Form Interaction Example
+// Fills out and interacts with forms on the page
+
+console.log('📝 Interacting with forms...');
+
+// Find and fill input fields
+await page.evaluate(() => {
+  // Fill text inputs
+  const textInputs = document.querySelectorAll('input[type="text"], input[type="email"]');
+  textInputs.forEach((input, index) => {
+    if (input.placeholder.toLowerCase().includes('email')) {
+      input.value = 'demo@example.com';
+    } else if (input.placeholder.toLowerCase().includes('name')) {
+      input.value = 'John Doe';
+    } else {
+      input.value = `Demo Text ${index + 1}`;
+    }
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+  });
+
+  // Select first option in dropdowns
+  const selects = document.querySelectorAll('select');
+  selects.forEach(select => {
+    if (select.options.length > 1) {
+      select.selectedIndex = 1;
+      select.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+  });
+
+  // Check checkboxes
+  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
+  checkboxes.forEach(checkbox => {
+    checkbox.checked = true;
+    checkbox.dispatchEvent(new Event('change', { bubbles: true }));
+  });
+});
+
+console.log('✓ Forms filled');
+
+// Wait for any animations
+await new Promise(resolve => setTimeout(resolve, 500));

examples/mobile-view.js

@@ -0,0 +1,19 @@
+// Mobile View Example
+// Sets viewport to mobile dimensions
+
+console.log('📱 Switching to mobile view...');
+
+await page.setViewport({
+  width: 375,
+  height: 667,
+  deviceScaleFactor: 2,
+  isMobile: true,
+  hasTouch: true
+});
+
+console.log('✓ Mobile viewport set (iPhone SE)');
+
+// Reload page for mobile view
+await page.reload({ waitUntil: 'networkidle0' });
+
+console.log('✓ Page reloaded in mobile view');

examples/scroll-animation.js

@@ -0,0 +1,37 @@
+// Scroll Animation Example
+// Smoothly scrolls through the entire page before capturing
+
+console.log('🎬 Starting scroll animation...');
+
+// Scroll to bottom smoothly
+await page.evaluate(async () => {
+  await new Promise((resolve) => {
+    let totalHeight = 0;
+    const distance = 100;
+    const timer = setInterval(() => {
+      const scrollHeight = document.body.scrollHeight;
+      window.scrollBy(0, distance);
+      totalHeight += distance;
+
+      if (totalHeight >= scrollHeight) {
+        clearInterval(timer);
+        resolve();
+      }
+    }, 100);
+  });
+});
+
+console.log('✓ Scrolled to bottom');
+
+// Wait a bit at bottom
+await new Promise(resolve => setTimeout(resolve, 1000));
+
+// Scroll back to top
+await page.evaluate(() => {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+});
+
+console.log('✓ Scrolled back to top');
+
+// Wait for scroll to finish
+await new Promise(resolve => setTimeout(resolve, 1000));