<h2>Overview:</h2>
<p>The Eleventy static site generator is a powerful tool for creating static websites. The 11ty.dev website and documentation provide useful information and resources for users of Eleventy. The website includes instructions for running Eleventy locally and integrating it with third-party services like IFTTT and Zapier.</p>
<h2>Features:</h2>
<ul>
<li><strong>Static Site Generator:</strong> Eleventy is a static site generator that allows users to build fast and efficient static websites.</li>
<li><strong>Local Development:</strong> The 11ty.dev website provides easy-to-follow instructions for running Eleventy locally, allowing users to develop and test their websites on their own machines.</li>
<li><strong>Third-Party Integrations:</strong> Eleventy can be integrated with third-party services like IFTTT and Zapier. These integrations allow users to automate tasks like building the site once a day or running a new production build when a new contributor joins Open Collective.</li>
</ul>
<h2>Summary:</h2>
<p>The Eleventy static site generator and the 11ty.dev website offer a range of features and resources for building static websites. With an easy-to-follow installation guide and support for third-party integrations, Eleventy provides a robust solution for web developers. Whether you're developing locally or automating tasks with tools like IFTTT and Zapier, Eleventy has you covered.</p>


<h2>Overview:</h2>
<p>Screenshot API is a runtime service that allows users to use live website screenshots on their own websites. It is a convenient solution for those who need to display dynamic website content or regularly updated information on their site. With Screenshot API, users can easily generate and embed website screenshots with customizable options.</p>
<h2>Features:</h2>
<ul>
<li><strong>Live Website Screenshots</strong>: Screenshot API enables users to capture live screenshots of any website.</li>
<li><strong>Customizable Size</strong>: Users can choose from different size options for the screenshots, including small, medium, and large.</li>
<li><strong>Custom Wait Conditions</strong>: Screenshot API allows users to customize the conditions for the headless browser to wait before taking the screenshot.</li>
</ul>
<h2>Summary:</h2>
<p>Screenshot API is a useful runtime service for generating live website screenshots that can be embedded on other websites. It offers customizable options for size, wait conditions, and timeout, providing flexibility to users. By following the installation guide, users can easily integrate Screenshot API into their projects and enhance the visual representation of their website content.</p>


<h2>Overview</h2>
<p>Eleventy is a simpler static site generator that serves as an alternative to Jekyll. It is written in JavaScript and it transforms a directory of templates, of different types such as HTML, Markdown, JavaScript, Liquid, and Nunjucks, into HTML. Eleventy also provides support for addons such as WebC, Sass, Vue, Svelte, JSX, and many others. With its extensive documentation and active community support, Eleventy is a popular choice among developers for static site generation.</p>
<h2>Features</h2>
<ul>
<li><strong>Written in JavaScript:</strong> Eleventy is written in JavaScript, making it easy for developers who are already familiar with the language to start using it.</li>
<li><strong>Support for Multiple Template Types:</strong> Eleventy supports various types of templates including HTML, Markdown, JavaScript, Liquid, and Nunjucks, allowing developers to choose the template language that best suits their needs.</li>
<li><strong>Extensive Addons:</strong> Eleventy offers addons for popular technologies like WebC, Sass, Vue, Svelte, and JSX, providing developers with greater flexibility and options when building static sites.</li>
<li><strong>Active Community:</strong> Eleventy has a thriving community of developers who actively contribute to its development and support. This ensures that there are regular updates and new features being added to the platform.</li>
</ul>


<h2>Overview:</h2>
<p>The eleventy-base-blog v8 is a starter repository that demonstrates how to build a blog using the Eleventy site generator, specifically utilizing the v2.0 release. It allows for the creation of a static site with pre-rendered content and offers various features and options for customization. The theme is performance-focused, achieving a high Lighthouse score out of the box, and supports modern image formats. The blog posts can be easily organized, and additional pages like home, archive, and about are automatically generated. The repository provides deployment options for services like Netlify and GitHub Pages.</p>
<h2>Features:</h2>
<ul>
<li><strong>Using Eleventy v2.0 with zero-JavaScript output</strong></li>
<li><strong>Content is exclusively pre-rendered (this is a static site)</strong></li>
<li><strong>Can easily deploy to a subfolder without changing any content</strong></li>
<li>Configure templates via the Eleventy Data Cascade</li>
<li>Performance focused: achieves a high Lighthouse score out of the box</li>
<li>View the Lighthouse report for the latest build courtesy of the Netlify Lighthouse plugin</li>
<li>Content-driven navigation menu</li>
<li>Image optimization via the {% image %} shortcode</li>
<li>Zero-JavaScript output</li>
<li>Support for modern image formats automatically (e.g. AVIF and WebP)</li>
<li>Prefers &#x3C;img> markup if possible (single image format) but switches automatically to &#x3C;picture> for multiple image formats</li>
<li>Automated &#x3C;picture> syntax markup with srcset and optional sizes</li>
<li>Includes width/height attributes to avoid content layout shift</li>
<li>Includes loading="lazy" for native lazy loading without JavaScript</li>
<li>Includes decoding="async"</li>
<li>Images can be co-located with blog post files</li>
</ul>


<h2>Overview</h2>
<p>eleventy-fetch is a plugin for the Eleventy static site generator that allows users to fetch network resources and cache them at configurable intervals. This helps prevent overwhelming API or other resources with frequent requests, and also enables users to work offline if a successful request has been completed. It supports caching various types of assets such as JSON, HTML, images, videos, etc.</p>
<h2>Features</h2>
<ul>
<li>Fetches network resources and caches them at configurable intervals</li>
<li>Helps prevent excessive requests to APIs or other resources</li>
<li>Enables offline work by utilizing successful requests</li>
</ul>


<h2>Overview:</h2>
<p>eleventy-img is a low-level utility that allows users to perform build-time image transformations for both vector and raster images. It supports outputting images in multiple sizes and formats, caching remote images locally, and provides full control over the HTML output. The utility can be used with various HTML elements such as &#x3C;picture>, &#x3C;img>, or CSS background-image, making it versatile for different use cases.</p>
<h2>Features:</h2>
<ul>
<li><strong>Build-time image transformations:</strong> eleventy-img allows users to perform image transformations during the build process, ensuring efficiency and optimized performance.</li>
<li><strong>Output multiple sizes:</strong> The utility enables users to generate images in multiple sizes, providing flexibility in displaying images across different devices and screen resolutions.</li>
<li><strong>Save multiple formats:</strong> Users can save images in different formats, such as JPEG, PNG, or SVG, based on their requirements.</li>
<li><strong>Cache remote images locally:</strong> eleventy-img provides the capability to cache remote images locally, reducing the reliance on external servers and improving load times.</li>
<li><strong>Full control over HTML:</strong> Users have complete control over the HTML output, allowing them to use eleventy-img with different HTML elements or CSS properties to suit their needs.</li>
<li><strong>Width and height attributes:</strong> The utility is useful for adding width and height attributes to images, aiding with responsive design and accessibility.</li>
</ul>


<h2>Overview</h2>
<p>eleventy-plugin-syntaxhighlight is a collection of Eleventy plugins designed to provide syntax highlighting functionality. Unlike many syntax highlighting plugins, eleventy-plugin-syntaxhighlight does not rely on browser or client-side JavaScript. Instead, all syntax highlighting transformations are performed at build-time. This allows for more efficient and lightweight rendering.</p>
<h2>Features</h2>
<ul>
<li><strong>Build-time syntax highlighting</strong>: All syntax highlighting transformations are performed during the build process, reducing reliance on client-side JavaScript.</li>
<li><strong>Easy integration with Eleventy</strong>: eleventy-plugin-syntaxhighlight is specifically designed to work seamlessly with the Eleventy static site generator.</li>
<li><strong>Wide range of languages supported</strong>: The plugin supports syntax highlighting for a variety of programming languages, making it versatile for different use cases.</li>
</ul>


<h2>Overview</h2>
<p>The eleventy-plugin-webc is a plugin that adds support for WebC, the single file web component format, to the Eleventy static site generator. This plugin allows users to create first-class components in Eleventy, expanding HTML elements to HTML with defined conventions from web standards. WebC components are compatible with server-side rendering and are Progressive Enhancement friendly. The plugin also provides features such as incremental builds, streaming compatibility, scoped component CSS, and easy bundling of CSS and JS for page-specific bundles. It can handle complex templating needs and works well with web component hydration using is-land.</p>
<h2>Features</h2>
<ul>
<li><strong>Brings first-class components to Eleventy</strong>: Allows the creation of components in Eleventy using the WebC format.</li>
<li><strong>Expand HTML elements</strong>: Converts HTML elements, including custom elements, to HTML using defined conventions from web standards.</li>
<li><strong>Compatible with server-side rendering</strong>: WebC components can be rendered on the server side without duplicating author-written markup.</li>
<li><strong>Progressive Enhancement friendly</strong>: WebC components follow the principles of Progressive Enhancement.</li>
<li><strong>Incremental builds</strong>: Provides first-class incremental builds for page templates, components, and Eleventy layouts.</li>
<li><strong>Streaming friendly</strong>: Supports streaming on the Edge, optimizing performance.</li>
<li><strong>Scoped component CSS</strong>: Easily scope component CSS or use your own scoping utility.</li>
<li><strong>Global or per-page no-import components</strong>: Provides options to use global or per-page no-import components, avoiding the need for component imports.</li>
<li><strong>Shadow DOM friendly</strong>: Works with or without Shadow DOM.</li>
<li><strong>Async-friendly configuration extensions/hooks</strong>: All configuration extensions/hooks into WebC are async-friendly out of the box.</li>
<li><strong>Bundler mode</strong>: Easily rolls up the CSS and JS used by WebC components on a page into page-specific bundles.</li>
<li><strong>Dirt-simple critical CSS/JS</strong>: Loads only the necessary code with dirt-simple critical CSS/JS.</li>
<li><strong>Render any existing Eleventy template syntax</strong>: Supports rendering of existing Eleventy template syntax (Liquid, markdown, Nunjucks, etc.) inside WebC.</li>
<li><strong>Works with is-land for web component hydration</strong>: Works seamlessly with is-land for web component hydration.</li>
</ul>


11ty

11ty Website

Api Screenshot

Eleventy

Eleventy Base Blog

Eleventy Fetch

Eleventy Img

Eleventy Plugin Syntaxhighlight

Eleventy Plugin Webc