diff --git a/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md similarity index 100% rename from CODE_OF_CONDUCT.md rename to .github/CODE_OF_CONDUCT.md diff --git a/CONTRIBUTING.md b/.github/CONTRIBUTING.md similarity index 65% rename from CONTRIBUTING.md rename to .github/CONTRIBUTING.md index 7fb6810..a83f93d 100644 --- a/CONTRIBUTING.md +++ b/.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. diff --git a/pull_request_template.md b/.github/PULL_REQUEST_TEMPLATE/PULL_REQUEST_TEMPLATE.md similarity index 66% rename from pull_request_template.md rename to .github/PULL_REQUEST_TEMPLATE/PULL_REQUEST_TEMPLATE.md index d959b5d..ae9e216 100644 --- a/pull_request_template.md +++ b/.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. diff --git a/SECURITY.md b/.github/SECURITY.md similarity index 92% rename from SECURITY.md rename to .github/SECURITY.md index e8e6b9a..12a5576 100644 --- a/SECURITY.md +++ b/.github/SECURITY.md @@ -3,8 +3,8 @@ ## Supported Versions | Version | Supported | -| ------- | ------------------ | -| latest | :white_check_mark:| +|---------|--------------------| +| latest | :white_check_mark: | ## Reporting a Vulnerability diff --git a/.gitignore b/.gitignore index a547bf3..b6cdf57 100644 --- a/.gitignore +++ b/.gitignore @@ -11,6 +11,7 @@ node_modules dist dist-ssr *.local +*.tsbuildinfo # Editor directories and files .vscode/* diff --git a/README.md b/README.md index a164459..3d5672b 100644 --- a/README.md +++ b/README.md @@ -7,22 +7,22 @@

Create CSS Only components or just get inspired by them

- - + + licence - + tags - + open-source Contributions are welcomed - + website

@@ -38,7 +38,7 @@ -# `🖐️` 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,16 +85,16 @@ 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. @@ -102,9 +102,9 @@ Contributions are very welcomed, and you can contribute in many diffrent ways: ---

- A ⭐️ to Awesome-Arts to add yourself to the Milkyway 🌌. + A ⭐️ to Awesome-Arts to add yourself to the Milky Way 🌌.

And Stay Awesome -

+ diff --git a/tsconfig.app.json b/config/tsconfig.app.json similarity index 94% rename from tsconfig.app.json rename to config/tsconfig.app.json index f0a2350..d7e1825 100644 --- a/tsconfig.app.json +++ b/config/tsconfig.app.json @@ -20,5 +20,7 @@ "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, - "include": ["src"] + "include": [ + "../src" + ] } diff --git a/tsconfig.node.json b/config/tsconfig.node.json similarity index 91% rename from tsconfig.node.json rename to config/tsconfig.node.json index 0d3d714..7cba205 100644 --- a/tsconfig.node.json +++ b/config/tsconfig.node.json @@ -18,5 +18,7 @@ "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, - "include": ["vite.config.ts"] + "include": [ + "../vite.config.ts" + ] } diff --git a/src/App.tsx b/src/App.tsx index 70afbb9..9fda560 100644 --- a/src/App.tsx +++ b/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(); @@ -33,7 +33,7 @@ function App() {
{filteredArtworks.length > 0 ? filteredArtworks.map(artwork => - + ) : (
No Components where found corresponding to the current filter settings. diff --git a/src/components/component/Component.tsx b/src/website/artwork/Artwork.tsx similarity index 89% rename from src/components/component/Component.tsx rename to src/website/artwork/Artwork.tsx index 4832a67..8fa8d00 100644 --- a/src/components/component/Component.tsx +++ b/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 (
void; diff --git a/src/components/header/header.module.scss b/src/website/header/header.module.scss similarity index 100% rename from src/components/header/header.module.scss rename to src/website/header/header.module.scss diff --git a/tsconfig.json b/tsconfig.json index 1ffef60..ad80819 100644 --- a/tsconfig.json +++ b/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"} ] }