1c16ae7dd1
* fix: use correct shield for issues by label * style: run `deno fmt` * build(CODEOWNERS): remove extra `#` and `\n` * docs: remove escaping `.` for folders * docs: commit to using `userstyle` Originally, we wanted to avoid using the word userstyle in case non-developers were confused. However, given that the name of the repository is catppuccin/userstyles and there are now explanations for what a userstyle is. I believe we should be more consistent and commit to using the word. * build(userstyle.yml): shorten issue template This commit uses the abbreviated YAML list syntax to auto-populate the labels. This will ensure that this file remains easy to scroll as more userstyles are added. * chore: use raw link for schema Using a relative link only works when the user has locally cloned the repository. This commit changes it back to a raw link so that it overcomes this limitation. * build: refine commit msg in `git-auto-commit-action" The current commit message is quite verbose and co-authors the original author. In @nekowinston's words: "there's no reason i'm co-authored when i merge a PR in that changes a single line in the readme :baldkek:" This commit reduces the verbosity of the commit message and doesn't co-author the merger. * build(issue-labeler.yml): shorten file Please see the commit description of 4a1326983f1e1a3bbe663f4aa16b6e19f8df8da8 * docs: highlight text as bold We want to draw the user's attention to specific parts of the page. For the CONTRIBUTING.md, we want to make sure their eyes are down towards "New Userstyles." For the userstyle-creation.md, we want to make sure that the user knows READMEs are auto-generated. * chore: update `deno.lock` * chore: generate health files
124 lines
4.4 KiB
Markdown
124 lines
4.4 KiB
Markdown
<p align="center">
|
|
<h2 align="center">🎨 Userstyle Creation</h2>
|
|
</p>
|
|
|
|
<p align="center">
|
|
Guidelines for requesting and creating userstyles
|
|
</p>
|
|
|
|
|
|
|
|
### Requesting Userstyles
|
|
|
|
To request a website to be themed, please create a
|
|
[Port Request](https://github.com/catppuccin/catppuccin/discussions/new?category=port-requests)
|
|
discussion on [catppuccin/catppuccin](https://github.com/catppuccin/catppuccin).
|
|
While this may seem odd, this ensures to keep all of our requests in one place
|
|
and makes it easier for all people to request what they want without needing to
|
|
learn what "Stylus" exactly is.
|
|
|
|
**If you have already created a userstyle, please raise a
|
|
[Pull Request](https://github.com/catppuccin/userstyles/compare)!**
|
|
|
|
|
|
|
|
### Creating Userstyles
|
|
|
|
To create a userstyle, follow the instructions listed below:
|
|
|
|
1. Fork this repository.
|
|
2. Create a new branch under the name `feat/<name-of-website>`, (e.g.
|
|
`feat/nixos-search` instead of NixOS Search).
|
|
3. Create a new folder `styles/<name-of-website>`. The name must be
|
|
`lower-kebab-case`.
|
|
4. Copy the contents of the [`template`](../template/) folder into
|
|
`styles/<name-of-website>`.
|
|
- **The template uses [LESS](https://lesscss.org/#overview) as the
|
|
preprocessor for Stylus. Please do not change this as we will only accept
|
|
userstyles based on the template.**
|
|
5. Edit the [`catppuccin.user.css`](../template/catppuccin.user.css) file and
|
|
replace all the words wrapped with `<>` to fit the details of your port.
|
|
6. Edit the [`userstyle.yml`](../src/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`.**
|
|
8. Raise a [Pull Request](https://github.com/catppuccin/userstyles/compare),
|
|
making sure to read and fill out the template properly.
|
|
|
|
|
|
|
|
### `userstyles.yml`
|
|
|
|
**Please note that the `README`s for each port are auto-generated by scripts
|
|
defined in [`src/generate/`](../src/generate)**, along with many other parts of
|
|
this repository. This file, `userstyles.yml`, is responsible for holding the
|
|
necessary data to auto-generate everything.
|
|
|
|
[`userstyles.schema.json`](../src/userstyles.schema.json) is the schema
|
|
specification for this file. The fields in the following instructions are based
|
|
on the schema:
|
|
|
|
1. Add your name to the list of collaborators.
|
|
|
|
```yaml
|
|
collaborators:
|
|
- &<github-username>
|
|
name: <your name, this is optional>
|
|
url: https://github.com/<github-username>
|
|
```
|
|
|
|
2. Locate the `userstyles` section and add your port to the list.
|
|
|
|
You should make changes to everything wrapped in `<>` and remove the `<>`
|
|
characters. If you need help with any of the fields, you should refer to
|
|
other ports in the `userstyle.yml` file. If you still cannot figure it out,
|
|
you can ask for help in the pull request or join our
|
|
[Discord](https://discord.com/servers/catppuccin-907385605422448742).
|
|
|
|
`Required Fields:`
|
|
|
|
```yaml
|
|
<port>:
|
|
name: <name>
|
|
category: <category>
|
|
readme:
|
|
app-link: <url>
|
|
current-maintainers: [ *<github-username> ]
|
|
```
|
|
|
|
`All Fields:`
|
|
|
|
These extra `usage` & `faq` keys will ensure that you can add important
|
|
information about the port to the README.
|
|
|
|
The keys `color` & `icon` are best explained the schema specification itself.
|
|
|
|
The key `past-maintainers` is a list of people who have maintained the port
|
|
in the past. We encourage all maintainers to add/remove themselves from this
|
|
list as they see fit.
|
|
|
|
Remember that these 5 fields are **optional**.
|
|
|
|
```yaml
|
|
<port>:
|
|
name: <name>
|
|
category: <category>
|
|
color: <color> # OPTIONAL
|
|
icon: <icon> # OPTIONAL
|
|
readme:
|
|
app-link: "<url>"
|
|
usage: |+ # OPTIONAL
|
|
> **Note** <br>
|
|
> <your notes>
|
|
faq: # OPTIONAL
|
|
- question: <question>
|
|
answer: <answer>
|
|
current-maintainers: [ *<github-username> ]
|
|
past-maintainers: [ *<github-username> ] # OPTIONAL
|
|
```
|