<h2>Overview:</h2>
<p>AstroCompress is an Astro integration that brings compression utilities to your Astro project. It allows for the compression of CSS, HTML, JavaScript, images, and SVG files in the Astro outDir folder. It is important to note that AstroCompress will only compress the statically generated build and pre-rendered routes, not requests. To achieve the best optimization, AstroCompress should be used as the last integration in the integration list.</p>
<h2>Features:</h2>
<ul>
<li>Compression of CSS, HTML, SVG, JavaScript, and image files in the Astro outDir folder.</li>
<li>Support for compressing image files types such as avci, avcs, avif, avifs, gif, heic, heics, heif, heifs, jfif, jif, jpeg, jpg, apng, png, raw, tiff, and webp via sharp.</li>
<li>Support for SVG compression via svgo.</li>
<li>Customization options to override default compression options from configurations of csso, html-minifier-terser, sharp, svgo, terser, and more.</li>
<li>Ability to add multiple paths for compression by specifying an array of paths.</li>
<li>Input-Output mapping to provide a map of paths for different input and output directories.</li>
<li>File filtering options to exclude specific files from compression.</li>
<li>Logging control to set the logging level and enable/disable debug messages.</li>
</ul>
<h3>Option 1: Using <code>astro add</code> command</h3>
<ol>
<li>
<p>Run the following command from your project directory:</p>
<ul>
<li>Using NPM: <code>npm install astrocompress</code></li>
<li>Using Yarn: <code>yarn add astrocompress</code></li>
<li>Using PNPM: <code>pnpm add astrocompress</code></li>
</ul>
</li>
<li>
<p>Follow the prompts to install the necessary dependencies and update your astro.config.* file to apply the integration.</p>
</li>
</ol>
<h3>Option 2: Manual installation</h3>
<ol>
<li>
<p>Install the AstroCompress integration by running <code>npm install astrocompress</code> or <code>yarn add astrocompress</code> or <code>pnpm add astrocompress</code>.</p>
</li>
<li>
<p>In your astro.config.* file, apply the integration using the integrations property:</p>
<pre><code class="language-typescript">import {astrocompress} from 'astrocompress';

export default {
  // ...
  integrations: [astrocompress()],
  // ...
};
</code></pre>
</li>
</ol>
<h2>Summary:</h2>
<p>AstroCompress is a powerful integration for Astro projects that brings compression utilities to optimize CSS, HTML, JavaScript, images, and SVG files. It provides various customization options, support for multiple paths and file filtering, as well as logging control. By using AstroCompress wisely, you can significantly improve the performance and loading speed of your Astro project.</p>


<h2>Overview</h2>
<p>AstroCritters is an Astro integration that brings critters to your Astro project. With the Critters plugin, you can inline your app's critical CSS and lazy-load the rest. However, it's important to note that AstroCritters will only inline your statically generated build and pre-rendered routes, and not inline your requests.</p>
<h2>Features</h2>
<ul>
<li><strong>Inline Critical CSS</strong>: AstroCritters automatically inlines the critical CSS of your HTML files.</li>
<li><strong>Override Default Options</strong>: You have the option to override any of the default options from the configuration of Critters or disable them entirely.</li>
<li><strong>Adding Multiple Paths</strong>: You can add multiple paths to inline by specifying an array as the Path variable.</li>
<li><strong>Input-Output Mapping</strong>: AstroCritters allows you to provide a map of paths for different input-output directories.</li>
<li><strong>File Filtering</strong>: You can filter files to exclude specific ones from inlining by using regular expressions or functions to match file names.</li>
<li><strong>Controlling Logging</strong>: You have the ability to control the logging level by setting the Logger parameter.</li>
</ul>
<h2>Summary</h2>
<p>AstroCritters is an Astro integration that allows you to inline critical CSS and lazy-load the rest in your Astro project. It provides various features such as overriding default options, adding multiple paths to inline, file filtering, input-output mapping, and controlling logging. By following the installation guide, you can easily add AstroCritters to your project and take advantage of its powerful features.</p>


<h2>Overview</h2>
<p>Blank-web-starter is a starter template designed specifically for AstroJS, a modern static site builder. This template provides users with a clean and minimalistic starting point for building websites with AstroJS. It offers a streamlined development process and preconfigured settings to help developers get up and running quickly.</p>
<h2>Features</h2>
<ul>
<li><strong>Minimalistic Design</strong>: The template provides a simple and clean design, allowing users to focus on their content without distractions.</li>
<li><strong>AstroJS Compatibility</strong>: Designed specifically for AstroJS, the template ensures smooth integration and optimized performance.</li>
<li><strong>Easy Setup</strong>: Users can quickly set up the template and start building their websites without excessive configuration or complex processes.</li>
</ul>
<h2>Summary</h2>
<p>Blank-web-starter is a starter template designed specifically for AstroJS users. It provides a clean and minimalistic starting point for building websites with AstroJS, ensuring compatibility and ease of use. With its easy installation process and preconfigured settings, developers can quickly set up their projects and start building without unnecessary complexities.</p>


<h2>Overview</h2>
<p>The Compress integration for Astro brings compression utilities to Astro projects, allowing for automatic compression of CSS, HTML, SVG, JavaScript, and image files in the Astro outDir folder. This integration provides options to override default settings, filter files, control logging level, and more.</p>
<h2>Features</h2>
<ul>
<li><strong>Compression Utilities:</strong> Automatically compress CSS, HTML, SVG, JavaScript, and image files.</li>
<li><strong>Customization:</strong> Override default compression options for CSS, lightningcss, html-minifier-terser, sharp, svgo, and terser.</li>
<li><strong>Multiple Paths:</strong> Easily specify multiple paths or directories to compress.</li>
<li><strong>File Filtering:</strong> Exclude specific files from compression based on regular expressions or file names.</li>
<li><strong>Logging Control:</strong> Set the logging level to customize the amount of debug messages.</li>
</ul>
<h3>Using Astro CLI:</h3>
<pre><code class="language-bash">astro add Compress
</code></pre>
<h3>Manually Install:</h3>
<pre><code class="language-bash">npm install @astro/compress
</code></pre>
<p>Then apply the integration in astro.config.ts file.</p>
<pre><code class="language-typescript">// astro.config.ts
{
  integrations: ['@astro/compress'],
}
</code></pre>
<h2>Summary</h2>
<p>The Compress integration for Astro provides a convenient way to compress CSS, HTML, SVG, JavaScript, and image files in an Astro project. With options for customization, logging control, and file filtering, developers can optimize their project build by integrating Compress in the project setup.</p>


<h2>Overview</h2>
<p>The Inline Astro integration brings the Critters plugin to your Astro project. Critters is a tool that inlines critical CSS for your app and lazy-loads the remaining CSS. Please note that Inline only works with statically generated builds and pre-rendered routes.</p>
<h2>Features</h2>
<ul>
<li><strong>Automatic Critical CSS Inlining</strong>: Critters will automatically inline the critical CSS of your HTML files.</li>
<li><strong>Default Inlining Customization</strong>: You can override default options and configurations from the critters plugin.</li>
<li><strong>Multiple Paths Support</strong>: Add multiple paths to inline by specifying an array as the Path variable.</li>
<li><strong>Input-Output Mapping</strong>: Provide a map of paths for different input-output directories in your astro.config.* file.</li>
<li><strong>File Filtering</strong>: Exclude specific files from inlining by using regular expressions or functions in your astro.config.* file.</li>
<li><strong>Logging Control</strong>: Customize the logging level by setting the Logger parameter in your astro.config.* file.</li>
</ul>
<h3>Option 1: Using <code>astro add</code></h3>
<ol>
<li>Run the following command in your project directory:<br>
Using NPM: <code>astro add inline</code><br>
Using Yarn: <code>astro add inline</code><br>
Using PNPM: <code>astro add inline</code></li>
</ol>
<h3>Option 2: Manual Installation</h3>
<ol>
<li>Install the Inline integration:
<pre><code class="language-bash">npm install @astro/inline
</code></pre>
</li>
<li>Apply the integration in your astro.config.* file:
<pre><code class="language-javascript">// astro.config.ts
export default {
    integrations: [
        '@astro/inline'
    ]
}
</code></pre>
</li>
</ol>
<h2>Summary</h2>
<p>The Inline Astro integration simplifies the process of inlining critical CSS for your Astro project using the Critters plugin. By following the installation steps and customizing configurations in the astro.config.* file, you can efficiently manage and optimize your CSS resources.</p>


Playform

Compress

Inline

Starter

CreateBlankWebStarter

BlankWebStarter

BlankWebStarter

Compress

CreateBlankWebStarter

CreateBlankWebStarter

Deploy

Inline

SSTTemplateAstro

Starter