Merge branch 'main' into challenge-one

CONTRIBUTING.md

@@ -0,0 +1,21 @@
+# Contribution guide
+
+### How to participate in a challenge?
+1. Your contribution should fit on **single HTML file**, no folders, no any other external files even icons or images. You could use inline SVGs or CDN, if it is really necessary.
+2. Navigate to the folder which represents the challenge you want to participate in (`/public/challenge-contributions/THE_NUMBER_OF_THE_CHALLENGE`).
+3. Find the HTML file with your name and write the code you want to contribute. It is named using the first letter of your first name in combination with your last name.
+4. You could use any of the methods described below to access the project.
+
+### How to add my code to the project?
+#### Option 1: Request access to the project
+You could requires access writes to the project then you could use the GitHub UI to upload a HTML file. Alternatively you clone the project locally, create branch and submit your files by opening a PR to master.
+
+#### Option 2: Fork it
+You could fork the project and then open PR to the upstream project. Here are couple links you might find useful:
+
+* [Fork a repo](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/fork-a-repo)
+* [GitHub Pull Request in 100 Seconds - Git a FREE sticker](https://www.youtube.com/watch?v=8lGpZkjnkt4)
+* [How to make a pull request on an open source project](https://www.youtube.com/watch?v=8A4TsoXJOs8)
+
+### Git, branches, naming, strategy...
+TBD

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Rumen Petrov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,10 @@
+# Pull Request checklist
+
+* [ ] I am contributing single HTML file, no folders, no any other external files even icons or images. - [Image CDN](https://placehold.co/)
+* [ ] My HTML is 100% valid - [HTML Validator](https://validator.w3.org/#validate_by_input)
+* [ ] My code is semantic (HTML/CSS/JS)
+* [ ] I preferred native elements than external libraries/packages
+* [ ] I used meaningful class names
+* [ ] The elements, properties or APIs I used have sufficient browser support, required by the task I worked on
+* [ ] My code is performant
+* [ ] My code follows the general best practices in web development and the style guidelines of this project

README.md

@@ -1,13 +1,10 @@
 # FE hunger games
 Community-driven game focusing on front-end development, where participants collaborate to create the most polished code for simple UI blocks.
 
-## WIP
-The project is in active development phase.
-
 ## Requirements
 * node 18
 * npm 9.8.1
-* podman 4+
+* docker 24+
 
 ## Initial setup (for local development)
 1. Make all scripts excutable and run the setup-env script which will create the app's podman image

src/content/challenges/2.mdx

@@ -1,10 +1,10 @@
 ---
 index: 2
-isDraft: true
+isDraft: false
 title: 'Use the native Dialog element'
 description: ''
 pubDate: 'Jan 20 2024'
-updatedDate: 'Feb 12 2024'
+updatedDate: 'Mar 8 2024'
 heroImage: '/blog-placeholder-2.jpg'
 ---
 import Special from '@src/components/Special.astro';
@@ -20,19 +20,19 @@ import rpetrovDocument from '/challenge-contributions/2/rpetrov.html?url&raw';
 * Create a button which opens a modal
 * Create a dial using the native `dialog` element
 * Loosely follow the visual appearance provided below
-* Add 80% dark backdrop
+* Add slightly opaque backdrop
 * <Special /> Make the `ESC` key close the dialog
 
 ### Design preview
 ![blog placeholder](/fe-hunger-games/challenge-resources/challenge0-design.png)
 
 #### Resources
-* [Template](/fe-hunger-games/challenge-contributions/2/template.html)
 * [Close icon](/fe-hunger-games/challenge-resources/close.svg)
 
 #### Refs
 * [Dialg MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
 * [Dialog](https://web.dev/learn/html/dialog)
+* [HTML dialog element article](https://blog.webdevsimplified.com/2023-04/html-dialog/)
 
 ### Contributions
 <DocumentPreview content={asavovDocument} index="2" fileName="asavov.html" />