squash!

PlayForm · Jun 29, 2024 · bfde6c8 · bfde6c8
1 parent 0967998
commit bfde6c8
Showing 1 changed file with 162 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -1,56 +1,182 @@
-<table><tr> <td colspan="1"> <h3 align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/PlayForm/Round/Current/src-tauri/src/Image/32x32.png"> <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/PlayForm/Round/Current/src-tauri/src/Image/32x32.png"> <img width="28" alt="" src="https://raw.githubusercontent.com/PlayForm/Round/Current/src-tauri/src/Image/32x32.png"> </picture>  </h3> </td> <td colspan="3" valign="top"> <h3 align="center"> Round — </h3> </td> </tr><tr><td valign="top" colspan="1"><br><a href="HTTPS://GitHub.Com/PlayForm/Round" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/last-commit/PlayForm/Round?label=Update&color=black&labelColor=black&logoColor=white&logoWidth=0"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/last-commit/PlayForm/Round?label=Update&color=white&labelColor=white&logoColor=black&logoWidth=0"> <img src="https://img.shields.io/github/last-commit/PlayForm/Round?label=Update&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Update" title="Update"> </picture> </a><br><a href="HTTPS://GitHub.Com/PlayForm/Round" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/issues/PlayForm/Round?label=Issue&color=black&labelColor=black&logoColor=white&logoWidth=0"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/issues/PlayForm/Round?label=Issue&color=white&labelColor=white&logoColor=black&logoWidth=0"> <img src="https://img.shields.io/github/issues/PlayForm/Round?label=Issue&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Issue" title="Issue"> </picture> </a><br><br></td><td valign="top" colspan="1"><br><a href="https://github.com/PlayForm/Round" target="_blank"><picture><source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/stars/PlayForm/Round?style=flat&label=Star&logo=github&color=black&labelColor=black&logoColor=white&logoWidth=0"><source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/stars/PlayForm/Round?style=flat&label=Star&logo=github&color=white&labelColor=white&logoColor=black&logoWidth=0"><img src="https://img.shields.io/github/stars/PlayForm/Round?style=flat&label=Star&logo=github&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Star"></picture></a><br><a href="HTTPS://GitHub.Com/PlayForm/Round" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/downloads/PlayForm/Round/total?label=Download&color=black&labelColor=black&logoColor=white&logoWidth=0"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/downloads/PlayForm/Round/total?label=Download&color=white&labelColor=white&logoColor=black&logoWidth=0"> <img src="https://img.shields.io/github/downloads/PlayForm/Round/total?label=Download&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Download" title="Download"> </picture> </a><br><a href="https://github.com/PlayForm/Round" target="_blank"><b>⬜ Round —</b></a><br></td><td valign="top" colspan="1"><br><a href="HTTPS://GitHub.Com/RoundWindows/Website" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/last-commit/RoundWindows/Website?label=Update&color=black&labelColor=black&logoColor=white&logoWidth=0"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/last-commit/RoundWindows/Website?label=Update&color=white&labelColor=white&logoColor=black&logoWidth=0"> <img src="https://img.shields.io/github/last-commit/RoundWindows/Website?label=Update&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Update" title="Update"> </picture> </a><br><a href="HTTPS://GitHub.Com/RoundWindows/Website" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/issues/RoundWindows/Website?label=Issue&color=black&labelColor=black&logoColor=white&logoWidth=0"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/issues/RoundWindows/Website?label=Issue&color=white&labelColor=white&logoColor=black&logoWidth=0"> <img src="https://img.shields.io/github/issues/RoundWindows/Website?label=Issue&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Issue" title="Issue"> </picture> </a><br><br></td><td valign="top" colspan="1"><br><a href="https://github.com/RoundedCorners/Website" target="_blank"><picture><source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/stars/RoundedCorners/Website?style=flat&label=Star&logo=github&color=black&labelColor=black&logoColor=white&logoWidth=0"><source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/stars/RoundedCorners/Website?style=flat&label=Star&logo=github&color=white&labelColor=white&logoColor=black&logoWidth=0"><img src="https://img.shields.io/github/stars/RoundedCorners/Website?style=flat&label=Star&logo=github&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Star"></picture></a><br><a href="HTTPS://GitHub.Com/RoundWindows/Website" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/downloads/RoundWindows/Website/total?label=Download&color=black&labelColor=black&logoColor=white&logoWidth=0"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/downloads/RoundWindows/Website/total?label=Download&color=white&labelColor=white&logoColor=black&logoWidth=0"> <img src="https://img.shields.io/github/downloads/RoundWindows/Website/total?label=Download&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Download" title="Download"> </picture> </a><br><a href="https://github.com/RoundedCorners/Website" target="_blank"><b></b></a><br></td></tr></table>
+<table><tr> <td colspan="1"> <h3 align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://nikolahristov.tech/Dark/Image/GitHub/Astro.svg"> <source media="(prefers-color-scheme: light)" srcset="https://nikolahristov.tech/Image/GitHub/Astro.svg"> <img width="28" alt="Astro" src="https://nikolahristov.tech/Image/GitHub/Astro.svg"> </picture>  </h3> </td> <td colspan="3" valign="top"> <h3 align="center"> Related — </h3> </td> </tr><tr><td valign="top" colspan="1"><br><a href="HTTPS://GitHub.Com/PlayForm/Compress/actions/workflows/Node.yml" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/actions/workflow/status/PlayForm/Compress/Node.yml?branch=main&label=Build&logo=node.js&color=black&labelColor=black&logoColor=white&logoWidth=0"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/actions/workflow/status/PlayForm/Compress/Node.yml?branch=main&label=Build&logo=node.js&color=white&labelColor=white&logoColor=black&logoWidth=0"> <img src="https://img.shields.io/github/actions/workflow/status/PlayForm/Compress/Node.yml?branch=main&label=Build&logo=node.js&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Build" title="Build"> </picture> </a><br><a href="HTTPS://NPMJS.Org/@playform/compress?activeTab=dependencies" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/librariesio/release/npm/@playform/compress?logo=dependabot&label=&color=black&labelColor=black&logoColor=white&logoWidth=0"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/librariesio/release/npm/@playform/compress?logo=dependabot&label=&color=white&labelColor=white&logoColor=black&logoWidth=0"> <img src="https://img.shields.io/librariesio/release/npm/@playform/compress?logo=dependabot&label=&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Dependency" title="Dependency"> </picture> </a><br><a href="HTTPS://NPMJS.Org/@playform/compress" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/v/@playform/compress?label=Version&logo=npm&color=black&labelColor=black&logoColor=white&logoWidth=0"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/npm/v/@playform/compress?label=Version&logo=npm&color=white&labelColor=white&logoColor=black&logoWidth=0"> <img src="https://img.shields.io/npm/v/@playform/compress?label=Version&logo=npm&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Version" title="Version"> </picture> </a><br><br></td><td valign="top" colspan="1"><br><a href="HTTPS://GitHub.Com/PlayForm/Compress" target="_blank"><picture><source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/stars/PlayForm/Compress?style=flat&label=Star&logo=github&color=black&labelColor=black&logoColor=white&logoWidth=0"><source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/stars/PlayForm/Compress?style=flat&label=Star&logo=github&color=white&labelColor=white&logoColor=black&logoWidth=0"><img src="https://img.shields.io/github/stars/PlayForm/Compress?style=flat&label=Star&logo=github&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Star"></picture></a><br><a href="HTTPS://NPMJS.Org/@playform/compress" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/dt/@playform/compress?label=Download&logo=npm&color=black&labelColor=black&logoColor=white&logoWidth=0"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/npm/dt/@playform/compress?label=Download&logo=npm&color=white&labelColor=white&logoColor=black&logoWidth=0"> <img src="https://img.shields.io/npm/dt/@playform/compress?label=Download&logo=npm&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Download" title="Download"> </picture> </a><br><a href="HTTPS://GitHub.Com/PlayForm/Compress" target="_blank"><b>🗜️ Compress —</b></a><br></td><td valign="top" colspan="1"><br><a href="HTTPS://GitHub.Com/PlayForm/Format/actions/workflows/Node.yml" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/actions/workflow/status/PlayForm/Format/Node.yml?branch=main&label=Build&logo=node.js&color=black&labelColor=black&logoColor=white&logoWidth=0"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/actions/workflow/status/PlayForm/Format/Node.yml?branch=main&label=Build&logo=node.js&color=white&labelColor=white&logoColor=black&logoWidth=0"> <img src="https://img.shields.io/github/actions/workflow/status/PlayForm/Format/Node.yml?branch=main&label=Build&logo=node.js&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Build" title="Build"> </picture> </a><br><a href="HTTPS://NPMJS.Org/@playform/format?activeTab=dependencies" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/librariesio/release/npm/@playform/format?logo=dependabot&label=&color=black&labelColor=black&logoColor=white&logoWidth=0"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/librariesio/release/npm/@playform/format?logo=dependabot&label=&color=white&labelColor=white&logoColor=black&logoWidth=0"> <img src="https://img.shields.io/librariesio/release/npm/@playform/format?logo=dependabot&label=&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Dependency" title="Dependency"> </picture> </a><br><a href="HTTPS://NPMJS.Org/@playform/format" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/v/@playform/format?label=Version&logo=npm&color=black&labelColor=black&logoColor=white&logoWidth=0"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/npm/v/@playform/format?label=Version&logo=npm&color=white&labelColor=white&logoColor=black&logoWidth=0"> <img src="https://img.shields.io/npm/v/@playform/format?label=Version&logo=npm&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Version" title="Version"> </picture> </a><br><br></td><td valign="top" colspan="1"><br><a href="HTTPS://GitHub.Com/PlayForm/Format" target="_blank"><picture><source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/stars/PlayForm/Format?style=flat&label=Star&logo=github&color=black&labelColor=black&logoColor=white&logoWidth=0"><source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/github/stars/PlayForm/Format?style=flat&label=Star&logo=github&color=white&labelColor=white&logoColor=black&logoWidth=0"><img src="https://img.shields.io/github/stars/PlayForm/Format?style=flat&label=Star&logo=github&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Star"></picture></a><br><a href="HTTPS://NPMJS.Org/@playform/format" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/dt/@playform/format?label=Download&logo=npm&color=black&labelColor=black&logoColor=white&logoWidth=0"> <source media="(prefers-color-scheme: light)" srcset="https://img.shields.io/npm/dt/@playform/format?label=Download&logo=npm&color=white&labelColor=white&logoColor=black&logoWidth=0"> <img src="https://img.shields.io/npm/dt/@playform/format?label=Download&logo=npm&color=black&labelColor=black&logoColor=white&logoWidth=0" alt="Download" title="Download"> </picture> </a><br><a href="HTTPS://GitHub.Com/PlayForm/Format" target="_blank"><b>🗻 Format —</b></a><br></td></tr></table># 🦔 [Inline] —
 
-<p align="center">
-  <img width="64" height="64" src="./src-tauri/src/Image/icon.ico" alt="Round Windows" />
-</p>
+This **[Astro integration][astro-integration]** brings [critters][critters] to
+your Astro project.
 
-# Round
+Critters is a plugin that inlines your app's [critical CSS] and lazy-loads the rest.
 
-Rounds the corners of your Windows screen.
+> **Note**
+>
+> `Inline` will not inline your requests, only your statically generated build
+> and pre-rendered routes.
 
-![Round Windows](./.github/cover.png)
+## Installation
 
-## Getting started
+There are two ways to add integrations to your project. Let's try the most
+convenient option first!
+
+### `astro add` command
+
+Astro includes a CLI tool for adding first party integrations: `astro add`. This
+command will:
+
+1. (Optionally) Install all necessary dependencies and peer dependencies
+2. (Also optionally) Update your `astro.config.*` file to apply this integration
 
-`Round` sets up a system tray application using the Tauri framework. It creates
-a window for each monitor available on the system, sets up a menu for the system
-tray, and handles events from the menu.
+To install `Inline`, run the following from your project directory and follow
+the prompts:
 
-## Dependencies
+Using NPM:
 
-The code imports several crates:
+```sh
+npx astro add @playform/inline
+```
 
--   `regex` - provides support for regular expressions
--   `serde_json`- is a JSON serialization/deserialization library
--   `tauri` - is the main framework for building cross-platform desktop apps in
-    Rust
--   `tauri_plugin_store` - provides a key-value store for persisting application
-    data
+Using Yarn:
 
-## Options
+```sh
+yarn astro add @playform/inline
+```
 
-The app has several menu items:
+Using PNPM:
 
--   ➕ **Increase Size**
--   ➖ **Decrease Size**
--   ↩️ **Reset**
--   🌑 **Dark**
--   ☀️ **Light**
--   👨🏻 **Show**
--   🥷🏽 **Hide**
--   ❌ **Exit**
+```sh
+pnpx astro add @playform/inline
+```
 
-Clicking on **Increase Size** or **Decrease Size** increases or decreases the
-roundness of the windows, respectively.
+### Install dependencies manually
 
-**Reset** sets the corner radius back to the default value of _23px_.
+First, install the `Inline` integration like so:
 
-**Dark** and **Light** switch the app between dark and light mode.
+```sh
+npm install -D -E @playform/inline
+```
 
-**Show** and **Hide** show or hide all windows, respectively.
+Then, apply this integration to your `astro.config.*` file using the
+`integrations` property:
+
+```ts
+export default {
+	integrations: [(await import("@playform/inline")).default()],
+};
+```
+
+## Getting started
 
-**Exit** closes the app.
+Critters will now automatically inline the critical CSS of your HTML files.
+
+### Default Inlining
+
+You can override any of the default options from the configuration of:
+
+-   [critters](https://github.com/GoogleChromeLabs/critters#usage)
+
+or disable them entirely:
+
+```ts
+export default {
+	integrations: [
+		(await import("@playform/inline")).default({
+			Critters: false,
+		}),
+	],
+};
+```
+
+### Add Multiple Paths
+
+You can add multiple paths to inline by specifying an array as the `Path`
+variable.
+
+**`astro.config.ts`**
+
+```ts
+export default {
+	integrations: [
+		(await import("@playform/inline")).default({
+			Path: ["./Target", "./Build"],
+		}),
+	],
+};
+```
+
+### Input-Output Mapping
+
+You can also provide a map of paths for different input output directories.
+
+**`astro.config.ts`**
+
+```ts
+export default {
+	integrations: [
+		(await import("@playform/inline")).default({
+			Path: new Map([["./Source", "./Target"]]),
+		}),
+	],
+};
+```
+
+Or an array of the two.
+
+**`astro.config.ts`**
+
+```ts
+export default {
+	integrations: [
+		(await import("@playform/inline")).default({
+			Path: [
+				// Inline Target
+				"./Target",
+				// Inline Target one more time into a different directory
+				new Map([["./Target", "./TargetInline"]]),
+			],
+		}),
+	],
+};
+```
+
+### File Filtering
+
+You can filter files to exclude specific ones from inlining. A filter can be an
+array of regular expressions or a single match. You can also use functions to
+match on file names:
+
+**`astro.config.ts`**
+
+```ts
+export default {
+	integrations: [
+		(await import("@playform/inline")).default({
+			Exclude: [
+				"File.html",
+				(File: string) => File === "./Target/index.html",
+			],
+		}),
+	],
+};
+```
+
+### Controlling Logging
+
+You can control the logging level by setting the `Logger` parameter. The default
+value is `2`, but you can set it to `0` if you don't want to see debug messages:
+
+```ts
+export default {
+	integrations: [
+		(await import("@playform/inline")).default({
+			Logger: 0,
+		}),
+	],
+};
+```
+
+[Inline]: HTTPS://NPMJS.Org/@playform/inline
+[critters]: HTTPS://github.com/GoogleChromeLabs/critters
+[astro-integration]: HTTPS://docs.astro.build/en/guides/integrations-guide/
+[critical CSS]:
+	HTTPS://www.smashingmagazine.com/2015/08/understanding-critical-css/
 
 ## Changelog
 
-See [CHANGELOG.md](CHANGELOG.md) for a history of changes to this app.
+See [CHANGELOG.md](CHANGELOG.md) for a history of changes to this integration.