<h2>Overview</h2>
The Eleventy Plugin - ESbuild is a powerful tool designed to streamline the process of transpiling JavaScript for your web projects. Whether you are leveraging React or Preact, this plugin simplifies the integration of modern JavaScript features by ensuring your code is efficiently compiled and ready for deployment. With its flexible configuration options, it caters to developers looking to enhance their workflow while minimizing complexities.
This plugin excels in its ability to process various file types and provides an intuitive interface through shortcodes, making it accessible for both beginners and seasoned developers. Its focus on supporting JSX and TypeScript demonstrates a commitment to modern web standards, ensuring your applications run smoothly across devices.
<h2>Features</h2>
<ul>
<li>
Custom Entry Points: Define key/value pairs to configure output file names and paths, allowing for flexibility in how you structure your JavaScript files.
</li>
<li>
Output Directory Management: Easily set the output directory for your transpiled files, ensuring your project structure remains organized.
</li>
<li>
Direct Esbuild Options: Utilize esbuild's Build API by providing options directly to fine-tune the build process to your needs.
</li>
<li>
Automatic File Type Recognition: Supports various file extensions, including JSX, making it easier to work with React and Preact applications without additional setup.
</li>
<li>
Loader Specification: Specify which loaders to use in your builds, offering more control over how your JavaScript files are processed.
</li>
<li>
Shortcode Integration: Incorporate esbuild functionality directly into your templates using shortcodes for a smoother development experience.
</li>
<li>
Comprehensive File Transformation: Transform a wide range of file types, including "js", "jsx", "ts", and "tsx", providing versatility for modern JavaScript development.
</li>
</ul>

<h2>Overview</h2>
Eleventy Plugin offers a creative way to generate forms directly from frontmatter, bringing an interesting and efficient solution to anyone working with the Eleventy static site generator. It simplifies the process of form creation, making it accessible to developers who want to enhance user interactivity on their sites without needing extensive coding knowledge. While still in early development, the plugin promises additional features in future versions, indicating an inviting roadmap ahead.
The flexibility and ease of usage provided by the Eleventy Plugin make it an appealing choice for those looking to integrate forms seamlessly. This tool can serve as a powerful asset for developers aiming to streamline the way they handle user input on their websites.
<h2>Features</h2>
<ul>
<li>
Frontmatter Driven: Easily generates forms by leveraging frontmatter, allowing for quick setup and integration within your site’s structure.
</li>
<li>
No npm Installation Required: Currently, there's no need for npm installation, making it user-friendly and straightforward to start using.
</li>
<li>
Configurability: Simplify your setup with straightforward configuration options that allow tweaking to meet specific needs.
</li>
<li>
Future Enhancements: The developer is committed to adding more features before the official v1 release, suggesting ongoing improvement and support.
</li>
<li>
Template Integration: Simple usage within templates allows for sleek incorporation of forms into your Eleventy-powered websites.
</li>
<li>
User-Friendly: Designed to be approachable for users of all skill levels, enabling even beginners to create functional forms without hassle.
</li>
</ul>

<h2>Overview</h2>
The Eleventy Plugin for Images is a powerful tool designed for web developers who want to optimize their image handling in projects seamlessly. Utilizing the Sharp library, this plugin allows for the dynamic resizing of images without the need for extensive preprocessing, making it efficient and easy to use. It brings flexibility to templates by only processing images when they are actually used, which can significantly enhance performance for websites with multiple pages.
With features like smart cropping and dimension adjustments, this plugin caters to a variety of use cases, ensuring that images appear sharp and appropriately sized across different screen resolutions. Whether you're working on a personal blog or a more significant web project, this plugin simplifies the often cumbersome task of image management.
<h2>Features</h2>
<ul>
<li>Dynamic Resizing: Process images on-the-fly, reducing the need for massive upfront processing and saving time.</li>
<li>Flexible Shortcodes: Easily integrate image resizing into your templates with a straightforward shortcode setup in .eleventy.js.</li>
<li>Efficient Processing: If the same image is used on multiple pages, it processes it only once to conserve resources.</li>
<li>Single Dimension Resizing: Resize images to a single dimension without the need for cropping, ideal for consistent aesthetics.</li>
<li>Smart Cropping Options: Choose to crop images from different points (center, south, north) to fit your design needs.</li>
<li>URL Only Processing: Use the plugin efficiently by referencing images directly via URL, simplifying the inclusion process in your templates.</li>
</ul>

<h2>Overview</h2>
The Eleventy Plugin for MDX brings a powerful templating format to the 11ty static site generator, allowing users to leverage both Markdown and JSX components effectively. Designed for developers looking to enhance their static sites, this plugin makes it easier to incorporate React components with the simplicity of Markdown syntax. With its smooth integration into the Eleventy ecosystem, users can create dynamic and engaging content while benefiting from server-side rendering.
This plugin is particularly appealing for those who prefer static rendering but want to maintain the option for interactivity. It provides a range of features that bring together the best of static and dynamic content seamlessly, offering a compelling solution for modern web development.
<h2>Features</h2>
<ul>
<li>
Easy Installation: Simply install the plugin along with the required peer dependencies, React and ReactDOM, to get started without any hassle.
</li>
<li>
Static Rendering: The plugin is optimized for static rendering, allowing you to create fast-loading pages without the need for JavaScript on the front-end.
</li>
<li>
CDN Support: An option to include React and ReactDOM via CDN links makes it easy for users who may not want to manage their own JavaScript bundles.
</li>
<li>
Import Capabilities: You can import local modules and components from JavaScript and MDX files, enhancing modularity and code reuse.
</li>
<li>
Front Matter Support: The plugin fully supports front matter, allowing you to export data objects and mix them with your MDX content seamlessly.
</li>
<li>
Hydration Options: For pages requiring interactivity, the plugin provides a process to "hydrate" React components, bringing them to life on the client-side while maintaining server-rendered performance.
</li>
<li>
Custom Serialization: Users can define a serializeEleventyProps function to help export necessary data for interactive components client-side, ensuring everything works smoothly between the server and client.
</li>
<li>
Community Contributions: The plugin invites pull requests and contributions, encouraging developers to enhance its functionality and keep up with evolving needs.
</li>
</ul>
With its collection of robust features, the Eleventy Plugin for MDX stands out as a valuable tool for web developers seeking to create interactive and versatile content in a static site environment.

<h2>Overview</h2>
The Eleventy Plugin - SVG is an essential tool for web developers and designers looking to enhance their projects with scalable vector graphics. This simple shortcode allows you to effortlessly fetch and optimize SVG assets, streamlining your workflow and ensuring that your SVGs are displayed inline. The plugin's efficiency not only improves loading times but also preserves the quality of the graphics across different screen sizes.
What sets this plugin apart is its straightforward setup and usage. By merely including it in your <code>.eleventy.js</code> file and referencing the SVG by its filename (without the extension), you can integrate SVG graphics into your templates with ease. This functionality helps you maintain cleaner and more efficient code while ensuring that your SVG images are optimized for performance.
<h2>Features</h2>
<ul>
<li>Inline SVG Rendering: Automatically returns SVGs as inline elements, enhancing performance and accessibility.</li>
<li>Automatic Optimization: Optimizes SVG assets for better performance, ensuring that your graphics load quickly without loss of quality.</li>
<li>Simple Installation: Easily installable with just a few lines of code in your <code>.eleventy.js</code> file, making initial setup a breeze.</li>
<li>Wildcard Support: Filename input is straightforward (without the extension), streamlining the process of fetching SVGs in templates.</li>
<li>Lightweight Solution: Designed to be lightweight, the plugin does not add unnecessary bulk to your project, keeping it fast and efficient.</li>
<li>Compatible with Eleventy: Seamlessly integrates with Eleventy, enhancing the static site generation experience with SVG capabilities.</li>
</ul>

<h2>Overview</h2>
The Eleventy Plugin for Typography is a fantastic tool that enhances your text by applying typographic improvements to your HTML output. This lightweight plugin acts as a wrapper around the powerful typogr.js library, offering an easy way to make your content more visually appealing while maintaining semantic correctness. The plugin comes equipped with additional filters that make formatting and presentation effortless, leading to an overall superior reading experience.
With the Eleventy Plugin, you can benefit from concise and smart transformations of plain text, optimizing your web pages without needing extensive coding prowess. Whether you’re managing a blog, a portfolio, or a business website, this plugin is designed to elevate your typographic standards with minimal effort.
<h2>Features</h2>
<ul>
<li>Easy Installation: Integrate the plugin seamlessly into your .eleventy.js configuration, allowing for quick setup.</li>
<li>Enhanced Typography: Automatically applies various transformations to plain text, improving its overall appearance and readability.</li>
<li>HTML Output Handling: Outputs HTML safely using the | safe filter, ensuring your content is presented correctly.</li>
<li>Additional Filters Available: Includes unique filters like nl2br and paragraphs for enhanced text formatting.</li>
<li>Smart New Line Conversion: Collapses empty paragraphs and multiple line breaks intelligently, preventing formatting clutter.</li>
<li>Customizable: Offers flexibility to use individual typogr transformations as filters based on specific needs.</li>
<li>User-Friendly Documentation: Provides easy access to guidelines and examples for effective usage, reducing the learning curve.</li>
</ul>

<h2>Overview</h2>
The Eleventy Stripe Boilerplate is a project that provides a simple boilerplate for managing payments with the Eleventy static site generator (11ty) using Serverless functions. The project includes two serverless functions, stripe-get-checkout.js and stripe-get-payment-intent.js, which allow for easy integration with Stripe payment processing. This boilerplate is aimed at developers who want to manage payments within their 11ty projects.
<h2>Features</h2>
<ul>
<li>Serverless Functions: The boilerplate includes two serverless functions, stripe-get-checkout.js and stripe-get-payment-intent.js, which enable seamless integration with Stripe's payment processing functionalities.</li>
<li>Checkout with Stripe: The stripe-get-checkout.js function allows transactions to take place on Stripe's servers, providing a convenient way to handle payments without managing product information.</li>
<li>Customizable Payment Intent: The stripe-get-payment-intent.js function allows for complete customization and the freedom to store product information elsewhere, giving developers more flexibility in managing payments.</li>
<li>Shipping Calculation: The included methods make it easy to calculate shipping costs for products.</li>
<li>Configurable API Integration: The stripe function in the _data folder allows for easy retrieval of data from Stripe's API at build time, making it suitable for creating dashboards or managing dynamic content related to payments.</li>
</ul>
<h2>Summary</h2>
The Eleventy Stripe Boilerplate is a simple and convenient solution for integrating Stripe payment processing into 11ty projects. With serverless functions for both checkout and payment intent, along with methods for calculating shipping and configurable API integration, this boilerplate provides developers with a solid foundation for managing payments within their 11ty projects.

Jamshop

Eleventy Plugin Esbuild

Eleventy Plugin Forms

Eleventy Plugin Images

Eleventy Plugin Mdx

Eleventy Plugin Svg

Eleventy Plugin Typography

Eleventy Stripe Boilerplate