Added Tool Showcase Directive
Summary
Created a beautiful, brand consistent tool showcase carousel component that can be embedded in markdown using a simple directive syntax.
Why Care
This brings significant embedding capabilities to our markdown content without requiring MDX files. Content authors can now embed tool showcases using simple directive syntax.
Added ToolShowcase Component
New Features
- Created a new
ToolShowcasedirective that renders an interactive carousel of tools/companies - Added support for responsive design with mobile and desktop layouts
- Implemented touch and keyboard navigation
- Added smooth transitions between slides
Component Structure
ToolShowcaseCarousel.svelte: Main carousel component with navigation controlsToolShowcaseItem--Wide-Responsive.astro: Responsive item template for tool display
Key Features
- Responsive Layout: Adapts to different screen sizes with appropriate spacing
- Image Fallbacks: Supports multiple image sources with fallback chain
- Accessible: Keyboard navigable and screen reader friendly
- Performance: Lazy loading for images and optimized rendering
Styling
- Custom styling for cards, navigation, and indicators
- Smooth animations and transitions
- Dark theme support
Usage
astro
---
import ToolShowcase from '@components/toolkit/ToolShowcase.astro';
---
<ToolShowcase tools={tools} />Dependencies
- Svelte for interactive components
- Astro for static site generation
Testing
- Tested across major browsers (Chrome, Firefox, Safari)
- Verified mobile touch interactions
- Confirmed keyboard navigation
Notes
- This component replaces the previous static tool display with an interactive carousel
- The design follows the site's existing visual language and accessibility standards