PostCSS Preset Env Website (#232)

* Creating basic structure

* Landing page

* extra workspace (#237)

* Finish the landing page

* Playground and reusing

* Updating dependencies

* Moving to simpler file

* Starting features

* Fixing tests

* Creating features

* Finishing site

* Finishing it

* Trying to fix CSS

* Update sites/postcss-preset-env/src/styles/_global.css

Co-authored-by: Romain Menke <11521496+romainmenke@users.noreply.github.com>

* Fixing CSS

* Adding deploy action

* Linting

* Updating docs

* Labeler

* postcss-preset-env : website - a11y (#247)

* postcss-preset-env : website - a11y

* fix labeler

* more fixes

* more fixes

Co-authored-by: Romain Menke <11521496+romainmenke@users.noreply.github.com>

Author: Antonio-Laguna

.github/labeler.yml

@@ -167,3 +167,5 @@
   - plugins/postcss-system-ui-font-family/**
   - experimental/postcss-system-ui-font-family/**
 
+"sites/postcss-preset-env":
+  - sites/postcss-preset-env/**

.github/workflows/deploy-preset-env.yml

@@ -0,0 +1,16 @@
+name: Deploy PostCSS Preset Env
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - 'main'
+    paths:
+      -  'sites/postcss-preset-env/**'
+
+jobs:
+  build:
+    name: Request Netlify Webhook
+    runs-on: ubuntu-latest
+    steps:
+      - name: Curl request
+        run: curl -X POST -d {} ${{ secrets.PRESET_ENV_DEPLOY_HOOK }}

.gitignore

@@ -4,3 +4,4 @@ reports
 .stryker-tmp
 */**/package-lock.json
 !e2e/webpack/bundle-through/package-lock.json
+!sites/*/package-lock.json

CONTRIBUTING.md

@@ -14,6 +14,15 @@ Remember, a bug is a _demonstrable problem_ caused by _our_ code.
 
 _If this guide itself is not working or is not clear, please report it._
 
+## Project setup
+
+If you do need to set the project up locally yourself, feel free to follow these
+instructions:
+
+### System Requirements
+
+- [Node.js](https://nodejs.org/) >= 16.0.0
+
 ## Submitting Pull Requests
 
 Pull requests are the greatest contributions, so be sure they are focused in
@@ -29,14 +38,29 @@ scope and avoid unrelated commits.
 
    # Assign the original repo to a remote called "upstream"
    git remote add upstream https://github.com/csstools/postcss-plugins.git
+   ```
+
+2. Where are you contributing?
 
-   # Install and build the needed things to start local development
-   # This also does an initial test of everything.
-   # If this gives errors please open an issue so that we can look into it.
-   npm run get-me-going
+* If you want to contribute to plugins, plugin-packs or the CLI, run the following command:
+
+   ```bash
+    # Install and build the needed things to start local development
+    # This also does an initial test of everything.
+    # If this gives errors please open an issue so that we can look into it.
+    npm run get-me-going
+   ```
+
+* If you want to contribute to sites, you need to run the following command: 
+
+   ```bash
+    cd sites
+    # Install the needed things to start local development
+    # If this gives errors please open an issue so that we can look into it.
+    npm run get-me-going
    ```
 
-2. Create a branch for your feature or fix:
+3. Create a branch for your feature or fix:
    ```bash
    # Move into a new branch for your feature
    git checkout -b feature/thing
@@ -76,9 +100,9 @@ That’s it! Now [open a pull request] with a clear title and description.
 
 ## Creating a new plugin here
 
-- follow the guide for submitting a pull request
-- run `npm run get-me-going` if you want to start local development.
-- run `npm run new-plugin` to create a new plugin.
+- Follow the guide for submitting a pull request
+- Run `npm run get-me-going` if you want to start local development.
+- Run `npm run new-plugin` to create a new plugin.
 
 ```bash
 npm run new-plugin
@@ -119,8 +143,8 @@ If you get warning about missing files, modules, packages you should do :
 
 _if your issues is not mentioned here please open an issue so that we can extend the guides_
 
-[already been reported]: issues
-[fork this project]:     fork
+[already been reported]: https://github.com/csstools/postcss-plugins/issues
+[fork this project]:     https://github.com/csstools/postcss-plugins/fork
 [live example]:          https://codepen.io/pen
 [open a pull request]:   https://help.github.com/articles/using-pull-requests/
 [reduced test case]:     https://css-tricks.com/reduced-test-cases/

README.md

@@ -3,16 +3,51 @@
 [<img alt="build status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url]
 [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
 
+We are happy you're here!
+
+This repository uses a monorepo architecture that contains plugins, plugin-packs and CLI tools to help you transform your CSS so every browser can understand it.
+
+Our wish is that you can leverage the CSS that will become a standard with every browser!
+
+## A brief look into the structure
+
+This repository leverages [NPM Workspaces] to handle every package/project. 
+
 [PostCSS Plugins] contains tools and plugins for [PostCSS Preset Env].
 
 [PostCSS Preset Env] lets you convert modern CSS into something most browsers
 can understand, determining the polyfills you need based on your targeted
 browsers or runtime environments.
 
+There's also a [CLI] that allows you to quickly debug or prototype without having to configure PostCSS before you need any toolchain.
+
+Under [sites] you can find websites that we publish to better display all of this information.
+
+## Our current focus
+
+We're trying to bring every reasonable CSS Spec into all the browsers. 
+
+First we keep track of new features through the [CSSDB] (see the [repo][CSSDB Repo]). Then we do our best to create a [PostCSS] plugin that can convert that new syntax/function/rules so every browser can understand it. 
+
+While it's not always possible we're enabling over 30 features with these plugins!
+
+You can keep track of our current efforts on the [PostCSS Preset Env Project] and also read announcements on the [project's discussions][discussions].
+
+## Contributing
+
+Thanks for being willing to contribute! Please read our [contributing guide]!
+
 [cli-img]: https://github.com/csstools/postcss-plugins/workflows/test/badge.svg
 [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
 [discord]: https://discord.gg/bUadyRwkJS
-
+[discussions]: https://github.com/csstools/postcss-plugins/discussions
 [PostCSS]: https://github.com/postcss/postcss
 [PostCSS Plugins]: https://github.com/csstools/postcss-plugins
+[CLI]: https://github.com/csstools/postcss-plugins/cli/csstools-cli
+[sites]: https://github.com/csstools/postcss-plugins/sites
 [PostCSS Preset Env]: https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env
+[NPM Workspaces]: https://docs.npmjs.com/cli/v7/using-npm/workspaces/
+[contributing guide]: https://github.com/csstools/postcss-plugins/CONTRIBUTING.md
+[CSSDB]: https://cssdb.org/
+[CSSDB Repo]: https://github.com/csstools/cssdb
+[PostCSS Preset Env Project]: https://github.com/orgs/csstools/projects/3/views/1