Linting & prettier #24 (#26)

.github/CODE_OF_CONDUCT.md

@@ -14,24 +14,24 @@ and orientation.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* **Recognise that not everyone has the same level of experience**
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions and viewpoints
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- **Recognise that not everyone has the same level of experience**
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions and viewpoints
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities

.github/CONTRIBUTING.md

@@ -1,11 +1,15 @@
 # Contributing Guidelines
-PLease note by participating in this project you agree on our term documented in [`CODE OF CONDUCT`](CODE_OF_CONDUCT.md).
+
+PLease note by participating in this project you agree on our term documented
+in [`CODE OF CONDUCT`](CODE_OF_CONDUCT.md).
 
 - [Contribution](#contribution)
 - [Pull Request](#pull-request)
 
 ## Contribution
-If you are willing to contribute to this project here is a step by step introduction on how you can create a new Component.
+
+If you are willing to contribute to this project here is a step by step introduction on how you can create a new
+Component.
 
 - Add your component (0 is just to make 0_artworks-list and 0_template stay at the top)
   ```
@@ -31,32 +35,40 @@ If you are willing to contribute to this project here is a step by step introduc
 - Now you have set up everything and your Component should render inside the application, you're ready to get creative.
 
 ## Pull Request
+
 - [Component](#component)
 - [Feature](#feature)
 
 ### Component
-If you have created a new component you'll have to tick off the following TODOs in order for you Pull request to be approved.
+
+If you have created a new component you'll have to tick off the following TODOs in order for you Pull request to be
+approved.
 
 - The Component is somewhere unique to already other crated components.
 - Everything I created is my own and I haven't stolen it from somebody else.
 - I have only used html and css to create my component, apart from the React component.
 - I have followed the Project structure for components, read [Contribution](#contribution) for more details.
-- My Component looks good on most device including (phones, tablets, laptops, screens), if not don't worry, but write a comment inside you main component tsx file.
+- My Component looks good on most device including (phones, tablets, laptops, screens), if not don't worry, but write a
+  comment inside you main component tsx file.
 - My Code is well-structured and easy to read for someone other to understand it properly.
 - If something could be unclear/complex for others to understand I have made a comment for this part.
 - If I use the full property I have mady my mind up and really need the extra space.
 - I haven't edited a file which is not my component files or the artworksList, else create a new [Feature](#feature).
 - I have only used module css classes.
 
 ### Feature
-If you have created a new feature that means contribution to the project by building something apart from a component, 
-like a new filter or other features that add to the overall project (you can use ts). You'll have to took of the following TODOs.
+
+If you have created a new feature that means contribution to the project by building something apart from a component,
+like a new filter or other features that add to the overall project (you can use ts). You'll have to took of the
+following TODOs.
 New features will be inspected much careful that new Components.
 
 - My changes do not affect anything in a way that it won't work no more.
-- I have looked through my code and decided for every part if it really makes sense to do it like this, or if there is an easier way.
+- I have looked through my code and decided for every part if it really makes sense to do it like this, or if there is
+  an easier way.
 - If I edited some core files of the Project I have checked the code extra carefully.
-- The position where I placed the new files inside the project tree make sense, in compartment to the current version of the code.
+- The position where I placed the new files inside the project tree make sense, in compartment to the current version of
+  the code.
 - My code is well-structured and easy to read for someone other to understand it properly.
 - If the new feature have UI changes, I have made them responsive as good as possible.
 - If something could be unclear/complex for others to understand I have made a comment for this part.

.github/ISSUE_TEMPLATE/BUG-REPORT.yml

@@ -91,4 +91,4 @@ body:
     attributes:
       label: "Feedback on Process"
       description: "Any suggestions for improving this report process?"
-      placeholder: "Your feedback"
+      placeholder: "Your feedback"

.github/ISSUE_TEMPLATE/FEATURE-REQUEST.yml

@@ -59,4 +59,4 @@ body:
     attributes:
       label: "Feedback on Process"
       description: "Any suggestions for improving this request process?"
-      placeholder: Your feedback
+      placeholder: Your feedback

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,6 +1,7 @@
 # Description
 
-Please include a summary of the changes and reference the issue. Please also include relevant motivation and context. List any dependencies that are required for this change.
+Please include a summary of the changes and reference the issue. Please also include relevant motivation and context.
+List any dependencies that are required for this change.
 
 Used issue # (fill in your issue)
 
@@ -32,6 +33,7 @@ Used issue # (fill in your issue)
 
 ## Feature specific
 
-- [ ] My new Feature does not affect the styling and the functioning of other thing, in a way, so they don't work anymore.
+- [ ] My new Feature does not affect the styling and the functioning of other thing, in a way, so they don't work
+      anymore.
 - [ ] If I edited some core files of the project I have checked the code extra carefully.
 - [ ] If the new feature have UI changes, I have made them responsive as good as possible.

.github/SECURITY.md

@@ -3,18 +3,21 @@
 ## Supported Versions
 
 | Version | Supported          |
-|---------|--------------------|
+| ------- | ------------------ |
 | latest  | :white_check_mark: |
 
 ## Reporting a Vulnerability
 
 If you are able to find a vulnerability inside the project, we beg you to report it immediately.
 
-You can do so by [Reporting](https://github.com/FabDonRixos/awesome-arts/issues/new/choose) it as a Bug assigning the label Vulnerability to the issue.
+You can do so by [Reporting](https://github.com/FabDonRixos/awesome-arts/issues/new/choose) it as a Bug assigning the
+label Vulnerability to the issue.
 
 We take vulnerability very seriously and will assess its severity based on its current impact. <br />
-Depending on the urgency of the vulnerability, we will prioritize resolving the issue as quickly as possible <br /> and keep you updated with any development news about your issue.
+Depending on the urgency of the vulnerability, we will prioritize resolving the issue as quickly as possible <br /> and
+keep you updated with any development news about your issue.
 
 ---
 
-<h4>Given that everyone has a unique perspective on the project and may interpret things differently, we greatly value your input to keep the project running.</h4>
+<h4>Given that everyone has a unique perspective on the project and may interpret things differently, we greatly value
+your input to keep the project running.</h4>

.github/workflows/pull_request.yml

@@ -0,0 +1,31 @@
+on:
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 🛒 Checkout code
+        uses: actions/checkout@v4
+
+      - name: 🏗️ Set up Node.js v18.20.4
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.20.4
+
+      - name: ✅ Check Node Dependencies
+        run: |
+          npm ci
+          npm run build
+
+      - name: ✅ Run ESLint
+        run: npm run lint
+
+      - name: ✅ Run Prettier Check
+        run: npm run prettier:check
+
+      - name: ✅ Run TypeScript Type Check
+        run: npm run tsc

.github/workflows/server_deployment.yml

@@ -25,4 +25,4 @@ jobs:
         uses: JamesIves/github-pages-deploy-action@v4
         with:
           folder: dist
-          branch: gh-pages
+          branch: gh-pages

.prettierrc

@@ -0,0 +1,17 @@
+{
+  "semi": true,
+  "useTabs": false,
+  "singleQuote": false,
+  "endOfLine": "lf",
+  "trailingComma": "all",
+  "printWidth": 120,
+  "tabWidth": 2,
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "options": {
+        "tabWidth": 4
+      }
+    }
+  ]
+}

README.md

@@ -10,17 +10,17 @@
   <a href="https://creativecommons.org/publicdomain/zero/1.0/" >
     <img src="https://img.shields.io/github/license/FabDonRixos/awesome-arts" alt="licence" />
   </a>
-  
+
   <a href="https://github.com/FabDonRixos/awesome-arts/tags" >
     <img src="https://img.shields.io/github/v/tag/FabDonRixos/awesome-arts" alt="tags" />
   </a>
-  
+
   <img src="https://badges.frapsoft.com/os/v1/open-source.svg?v=103" alt="open-source" />
-  
+
   <a href="https://github.com/FabDonRixos/awesome-arts.git" >
     <img src="https://img.shields.io/badge/Contributions-are_welcomed-green.svg" alt="Contributions are welcomed" />
   </a>
-  
+
   <a href="https://awesome-arts.fabian.li/" >
     <img src="https://img.shields.io/website?url=https%3A%2F%2Fawesome-arts.fabian.li" alt="website" />
   </a>
@@ -39,7 +39,10 @@
 <!-- [![Stargazers over time](https://starchart.cc/FabDonRixos/awesome-arts.svg?variant=adaptive)](https://starchart.cc/FabDonRixos/awesome-arts) -->
 
 # `🖐️` Introduction `Awesome-Arts`
-`Awesome-Arts` is an open-source repository designed to showcase your amazing and inspiring CSS-only artworks. Join our community of creative developers and share your unique designs while exploring the endless possibilities of CSS art. Contribute your creations and inspire others!
+
+`Awesome-Arts` is an open-source repository designed to showcase your amazing and inspiring CSS-only artworks. Join our
+community of creative developers and share your unique designs while exploring the endless possibilities of CSS art.
+Contribute your creations and inspire others!
 
 > \[!IMPORTANT]
 >
@@ -49,54 +52,73 @@ Check out my other projects:<br/>
 [fabian.li »](https://fabian.li/home)<br/>
 [TranZero »](https://github.com/FabDonRixos/TranZero)
 
-# 
-
 # `🏗️` Set up `Awesome-Arts` locally
-1. [Fork](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/fork-a-repo) and clone this repository
+
+1. [Fork](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/fork-a-repo) and
+   clone this repository
+
 ```
 git clone https://github.com/FabDonRixos/awesome-arts.git
 ```
+
 2. Install all dependencies
+
 ```
 npm install
 ```
-3. Start the application
+
+3. Configure Prettier
+
+- Install the Eslint & the Prettier Plugin
+- Go to settings and enable reformat code on Save
+- Configure Prettier & Eslint to run for Files `**/*`
+
+4. Start the application
+
 ```
 npm start
 ```
-4. Now you can open [localhost:5173](http://localhost:5173/)
+
+5. Now you can open [localhost:5173](http://localhost:5173/)
 
 # `🚧` Build with
+
 - [React vite](https://vite.dev/guide/): The best React-based framework in the universum.
 - [TypeScript](https://www.typescriptlang.org/): A programming language that adds static typing to JavaScript.
 - [Sass/Scss](https://sass-lang.com/guide/): A preprocessor, that interpreted or compiled into CSS,
 - [vite-plugin-svgr](https://www.npmjs.com/package/vite-plugin-svgr): A Plugin to transform SVGs to React Components.
 - [Eslint](https://eslint.org/): Static code analysis tool to find problematic patterns inside JavaScript / TypeScript
 
 # `📧` Get in contact
+
 If you have any more questions about / suggestions for the project you can:
+
 - Message me via [mail](mailto:[email protected]).
 - Create an [Issue](https://github.com/FabDonRixos/awesome-arts/issues/new/choose)
 - Join out [Discord server](https://discord.com/) (not yet opened)
 
 # `🛡️` License
+
 This project was licensed under the CC0-1.0 License.
 <br />
 See [`License`](LICENSE) for details.
 
 # `🤝` Contributing to `Awesome-Arts`
+
 Contributions are very welcomed, and you can contribute in many different ways:
+
 - Contribute to the Project by creating your own Components.
 - Contribute to the Project by giving others ideas for what to implement next.
 - Contribute to the Project by Reporting Bugs.
 - Contribute to the Project by giving us feedback, so we can improve.
 - **But most importantly, your presence and support are valuable contributions to the project.**
 
 > Please read [`CONTRIBUTING`](.github/CONTRIBUTING.md) for the process to submitting pull requests.
-> 
+>
 > Please read [`CODE OF CONDUCT`](.github/CODE_OF_CONDUCT.md) to lern about our standards.
 
 # `💕` Support
+
 💚 Thanks for your support to the Project. We are very pleased to have you here.
 
 ---

config/tsconfig.app.json

@@ -5,22 +5,16 @@
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
-
-    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "isolatedModules": true,
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
-
-    /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": [
-    "../src"
-  ]
+  "include": ["../src"]
 }

config/tsconfig.node.json

@@ -4,21 +4,15 @@
     "lib": ["ES2023"],
     "module": "ESNext",
     "skipLibCheck": true,
-
-    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "isolatedModules": true,
     "moduleDetection": "force",
     "noEmit": true,
-
-    /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": [
-    "../vite.config.ts"
-  ]
+  "include": ["../vite.config.ts"]
 }