chore(tree-wide): remove non-catwalk images (#610)

.github/PULL_REQUEST_TEMPLATE/userstyle-creation.md

@@ -28,8 +28,5 @@ Feel free to leave this section empty if you don't have anything more to say.
 - [ ] I have included the following files:
   - `catppuccin.user.css` - all the CSS for the userstyle, based on the
     template.
-  - `assets/mocha.webp`, `assets/macchiato.webp`, `assets/frappe.webp` and
-    `assets/latte.webp` - individual screenshots of the themed website, in all 4
-    Catppuccin flavors.
-  - `catwalk.webp` - image of all individual screenshots stitched together,
+  - `preview.webp` - composite image of all four individual flavor screenshots stitched together,
     generated via [Catwalk](https://github.com/catppuccin/toolbox/tree/main/catwalk#readme).

docs/userstyle-creation.md

@@ -39,13 +39,12 @@ To create a userstyle, follow the instructions listed below:
 5. [Write the userstyle](./how-to-write-a-userstyle.md).
 6. Edit the [`userstyles.yml`](../scripts/userstyles.yml) file and put in the details
    of your port. **More details given below.**
-7. Create your image previews in the [`assets/`](../template/assets/) folder
-   - **All previews must be `.webp` files.**
-   - Create a preview image for each flavor. (e.g. `mocha.webp`,
-     `macchiato.webp`, `frappe.webp` & `latte.webp`)
-   - Use [catwalk](https://github.com/catppuccin/toolbox#catwalk) to generate a
-     composite or grid image of all the flavors. **This must be saved as
-     `catwalk.webp`.**
+7. Create your image preview.
+   - Take a screenshot of the themed website in each flavor, and then convert all four images [to WebP](./tips-and-tricks.md#how-do-i-convert-preview-images-to-webp) (e.g. `mocha.webp`,
+     `macchiato.webp`, `frappe.webp` & `latte.webp`).
+   - Use [Catwalk](https://github.com/catppuccin/toolbox#catwalk) to generate a
+     composite or grid image of all the images. **This must be saved as
+     `styles/<name-of-website>/preview.webp`.**
 8. Raise a [pull request](https://github.com/catppuccin/userstyles/compare),
    making sure to read and fill out the template properly. The title of your pull request should follow the format of `feat(<port-name>): init`.
 

scripts/generate/templates/userstyle.md

@@ -14,28 +14,9 @@
 </p>
 
 <p align="center">
-  <img src="assets/catwalk.webp"/>
+  <img src="preview.webp"/>
 </p>
 
-## Previews
-
-<details>
-<summary>🌻 Latte</summary>
-<img src="assets/latte.webp"/>
-</details>
-<details>
-<summary>🪴 Frappé</summary>
-<img src="assets/frappe.webp"/>
-</details>
-<details>
-<summary>🌺 Macchiato</summary>
-<img src="assets/macchiato.webp"/>
-</details>
-<details>
-<summary>🌿 Mocha</summary>
-<img src="assets/mocha.webp"/>
-</details>
-
 {{#if usage}}
 ## Usage
 {{{ usage }}}

scripts/lint/file-checker.ts

@@ -8,9 +8,7 @@ import * as color from "std/fmt/colors.ts";
 
 const requiredFiles = [
   "catppuccin.user.css",
-  ...["latte", "frappe", "macchiato", "mocha", "catwalk"].map((f) =>
-    join("assets", `${f}.webp`)
-  ),
+  "preview.webp",
 ];
 
 export const checkForMissingFiles = async () => {