Project structur #23 (#25)

CONTRIBUTING.md → .github/CONTRIBUTING.md

@@ -26,38 +26,38 @@ If you are willing to contribute to this project here is a step by step introduc
   └── App.tsx
   ```
   - [Camelcase](https://developer.mozilla.org/en-US/docs/Glossary/Camel_case)
-- Use the templat
+- Use the template
 - Go to the artworkList and create a new entry look at the IArtworkItem to know what the props are
-- Now you have setup everithing and your Component should render inside the application, you're ready to get creative.
+- 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 folowing TODOs in order for you Pull requst to be aproved.
+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.
-- Everithing 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 structur for components, read [Contribution](#contribution) for more details.
+- 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 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.
+- 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 contrubution to the project by building somthing 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 tock of the following TODOs.
-New features will be inspected much carefullyer that new Components.
-
-- My changes do not effect anything in a way that it won't work nomore.
-- I have looked thourgh my code and decided for every part if it realy make sence 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 carfully.
-- The position where I placed the new files inside the project tree make sence, in comparicent to the current version of the code.
-- My code is well structured and easy to read for someone other to understand it properly.
+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.
+- 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.
+- 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.
-- I have only used module css classes, with exeption for some part where you can use the index.scss.
+- If something could be unclear/complex for others to understand I have made a comment for this part.
+- I have only used module css classes, with exception for some part where you can use the index.scss.

pull_request_template.md → .github/PULL_REQUEST_TEMPLATE/PULL_REQUEST_TEMPLATE.md

@@ -8,7 +8,7 @@ Used issue # (fill in your issue)
 
 - [ ] New Component (non-breaking change which adds functionality to the website)
 - [ ] New Feature (non-breaking change which adds a new css component)
-- [ ] Bug fix (non-breaking change which fixes an bug)
+- [ ] Bug fix (non-breaking change which fixes a bug)
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
 
 # Checklist:
@@ -19,19 +19,19 @@ Used issue # (fill in your issue)
 - [ ] My code is properly structured and easy to read for others.
 - [ ] If something could be unclear/complex for others to understand I have made a comment for this part.
 - [ ] My changes generate no new warnings or errors inside the console.
-- [ ] Its easy to see what issue was used for this changes.
-- [ ] I have only used module css classes, with exeption for some part where you can use the index.scss.
-- [ ] I have read the [`CODE OF CONDUCT`](CODE_OF_CONDUCT.md) & the [`CONTRIBUTING`](CONTRIBUTING.md).
+- [ ] It's easy to see what issue was used for these changes.
+- [ ] I have only used module css classes, with exception for some part where you can use the index.scss.
+- [ ] I have read the [`CODE OF CONDUCT`](../CODE_OF_CONDUCT.md) & the [`CONTRIBUTING`](../CONTRIBUTING.md).
 
 ## Components specific
 
 - [ ] The Component is somewhere unique to already other created components.
-- [ ] I have only used html and css to create my component, apart from the react component.
-- [ ] I have made the whole component myself and didn't stole it from someone other.
-- [ ] I have documented my own copyright statments inside the artworklist.
+- [ ] I have only used html and css to create my component, apart from the React component.
+- [ ] I have made the whole component myself and didn't steal it from someone other.
+- [ ] I have documented my own copyright statements inside the artwork List.
 
 ## Feature specific
 
-- [ ] My new Feature does not effect 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 carfully.
+- [ ] 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.

SECURITY.md → .github/SECURITY.md

@@ -3,8 +3,8 @@
 ## Supported Versions
 
 | Version | Supported          |
-| ------- | ------------------ |
-| latest   | :white_check_mark:|
+|---------|--------------------|
+| latest  | :white_check_mark: |
 
 ## Reporting a Vulnerability
 

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+*.tsbuildinfo
 
 # Editor directories and files
 .vscode/*

README.md

@@ -7,22 +7,22 @@
 <h4 align="center">Create CSS Only components or just get inspired by them</h4>
 
 <p align="center">
-  <a href="http://creativecommons.org/publicdomain/zero/1.0/" >
-    <img src="https://img.shields.io/github/license/FabDonRixos/awesome-arts" />
+  <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" />
+    <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" />
+  <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" />
+    <img src="https://img.shields.io/website?url=https%3A%2F%2Fawesome-arts.fabian.li" alt="website" />
   </a>
 </p>
 
@@ -38,7 +38,7 @@
 
 <!-- [![Stargazers over time](https://starchart.cc/FabDonRixos/awesome-arts.svg?variant=adaptive)](https://starchart.cc/FabDonRixos/awesome-arts) -->
 
-# `🖐️` Introducion `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!
 
 > \[!IMPORTANT]
@@ -70,7 +70,7 @@ npm start
 - [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 transforme SVGs to React Components.
+- [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
@@ -85,26 +85,26 @@ This project was licensed under the CC0-1.0 License.
 See [`License`](LICENSE) for details.
 
 # `🤝` Contributing to `Awesome-Arts`
-Contributions are very welcomed, and you can contribute in many diffrent ways:
+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.
+- 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`](CONTRIBUTING.md) for the process to submitting pull requests.
+> Please read [`CONTRIBUTING`](.github/CONTRIBUTING.md) for the process to submitting pull requests.
 > 
-> Please read [`CODE OF CONDUCT`](CODE_OF_CONDUCT.md) to lern about our standards.
+> 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.
 
 ---
 
 <h3 align="center">
-  A ⭐️ to <b>Awesome-Arts</b> to add yourself to the Milkyway 🌌.
+  A ⭐️ to <b>Awesome-Arts</b> to add yourself to the Milky Way 🌌.
 </h3>
 
 <h4 align="center">
   And Stay Awesome
-</h3>
+</h4>

tsconfig.app.json → config/tsconfig.app.json

@@ -20,5 +20,7 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"]
+  "include": [
+    "../src"
+  ]
 }

tsconfig.node.json → config/tsconfig.node.json

@@ -18,5 +18,7 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["vite.config.ts"]
+  "include": [
+    "../vite.config.ts"
+  ]
 }

src/App.tsx

@@ -1,8 +1,8 @@
-import Header from "./components/header/Header.tsx";
+import Header from "./website/header/Header.tsx";
 import {useState} from "react";
 import {EArtworkTags} from "./artworks/0_artworks-list/artworkTags.ts";
 import artworksList from "./artworks/0_artworks-list/artworksList.tsx";
-import Component from "./components/component/Component.tsx";
+import Artwork from "./website/artwork/Artwork.tsx";
 
 function App() {
     const [currentTag, setCurrentTag] = useState<EArtworkTags>();
@@ -33,7 +33,7 @@ function App() {
                 <div className={"component-list"}>
                     {filteredArtworks.length > 0 ?
                         filteredArtworks.map(artwork =>
-                            <Component key={artworksList.indexOf(artwork)} artwork={artwork}/>
+                            <Artwork key={artworksList.indexOf(artwork)} artwork={artwork}/>
                         ) : (
                             <div className={"no-components-found"}>
                                 <span>No Components where found corresponding to the current filter settings.</span>

src/components/component/Component.tsx → src/website/artwork/Artwork.tsx

@@ -1,17 +1,15 @@
-import style from "./component.module.scss";
 import {IArtworkItem} from "../../artworks/0_artworks-list/artworksList.tsx";
 import {CSSProperties} from "react";
+import style from "./artwork.module.scss";
 
 interface ArtWrapperProps {
-    key: number;
     artwork: IArtworkItem;
 }
 
-export default function Component({key, artwork}: ArtWrapperProps) {
+export default function Artwork({artwork}: ArtWrapperProps) {
 
     return (
         <div
-            key={key}
             className={`${style.component} ${artwork.full ? `${style.full}` : undefined}`}
             style={
                 artwork.backgroundColor && artwork.backgroundColor.length <= 7

src/components/header/Header.tsx → src/website/header/Header.tsx

@@ -1,6 +1,6 @@
 import {IconLogo, IconFabian, IconGithub, IconLinkedin} from "../../assets/iconLibrary.ts";
-import style from "./header.module.scss";
 import {EArtworkTags} from "../../artworks/0_artworks-list/artworkTags.ts";
+import style from "./header.module.scss";
 
 interface InputsProps {
     setCurrentTag: (currentTag: EArtworkTags) => void;

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "files": [],
   "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
+    { "path": "./config/tsconfig.app.json"},
+    { "path": "./config/tsconfig.node.json"}
   ]
 }