$ show opensourcepledge/opensourcepledge.com
The Open Source Pledge website serves as the public platform for the Open Source Pledge initiative, showcasing member companies that have committed to supporting open source maintainers through financial contributions. It features a member directory, blog posts about open source sustainability, aggregated job postings from member companies, resources for advocates, and historical statistics demonstrating the pledge's impact over time. The site emphasizes transparency by publishing member reports and providing clear information about how companies can join the pledge. Built with the Astro framework and integrated with Sanity CMS for blog management, the site follows a modern Jamstack architecture. Member data is stored as JSON files in the repository, while job postings are fetched from member companies' career pages and cached periodically in data/jobSet.json. Historical tracking data is maintained in data/history.csv and updated via automated workflows. The frontend consists of reusable Astro components for displaying members, testimonials, logos, and interactive elements, with data flowing from these sources through utility functions in src/members/common.ts to the presentation layer. The codebase demonstrates strong engineering practices with comprehensive TypeScript usage, Zod-based schema validation for member data, and responsive design principles. Notable reusable components include a utility module (src/util.ts) with functions like debounceLeading that correctly implements leading-edge debounce, a YouTube carousel component (src/components/YoutubeCarousel.astro) that encapsulates state management for item navigation, and an interactive SVG blob effect (src/components/Blob.astro) that showcases advanced DOM manipulation techniques for creating responsive visual effects. While minor duplication exists in some display logic, the overall structure is clean, maintainable, and exhibits several patterns worth studying for frontend development.
The LLM identified 3 files worth highlighting for reuse:
Contains reusable utility functions including shuffle, range, slugify, and a correctly implemented debounceLeading function. The debounceLeading function demonstrates proper handling of timer cleanup for leading-edge debounce, a common source of bugs. These utilities are completely decoupled from the application logic and can be used in any TypeScript/JavaScript project.
A self-contained carousel component that manages state for navigating through a list of items with previous/next controls. While currently specialized for YouTube videos (constructing YouTube embed URLs), the core carousel logic is generic and only requires items to have 'id' and 'title' string properties. Demonstrates good encapsulation of state (current index), boundary checking, and DOM updating patterns. Can be adapted to other content types by modifying the URL construction in the template.
Implements an interactive SVG blob effect where gradient blobs follow the mouse cursor with smoothly updating gradients. Demonstrates advanced SVG manipulation techniques including querying and modifying linearGradient and mask elements based on mouse position. Designed to work as a global effect (using Astro's script deduplication to run once rather than per instance), making it safe for use in an SPA. The effect is self-contained and could be adapted for other interactive SVG effects by modifying the SVG element selection and attribute manipulation logic.