diff --git a/.github/config.yml b/.github/config.yml deleted file mode 100644 index c62bc052d..000000000 --- a/.github/config.yml +++ /dev/null @@ -1,14 +0,0 @@ -# Configuration for request-info - https://github.com/behaviorbot/request-info - -# *Required* Comment to reply with -requestInfoReplyComment: > - We would appreciate it if you could provide us with some more information about this issue/PR! - -# *OPTIONAL* default titles to check against for lack of descriptiveness -# MUST BE ALL LOWERCASE -requestInfoDefaultTitles: - - update readme.md - - updates - -# *OPTIONAL* Label to be added to Issues and Pull Requests with insufficient information given -requestInfoLabelToAdd: needs-more-info diff --git a/.github/lock.yml b/.github/lock.yml deleted file mode 100644 index 197497fe2..000000000 --- a/.github/lock.yml +++ /dev/null @@ -1,35 +0,0 @@ -# Configuration for Lock Threads - https://github.com/dessant/lock-threads - -# Number of days of inactivity before a closed issue or pull request is locked -daysUntilLock: 60 - -# Skip issues and pull requests created before a given timestamp. Timestamp must -# follow ISO 8601 (`YYYY-MM-DD`). Set to `false` to disable -skipCreatedBefore: false - -# Issues and pull requests with these labels will be ignored. Set to `[]` to disable -exemptLabels: [] - -# Label to add before locking, such as `outdated`. Set to `false` to disable -lockLabel: false - -# Comment to post before locking. Set to `false` to disable -lockComment: false - -# Assign `resolved` as the reason for locking. Set to `false` to disable -setLockReason: true - -# Limit to only `issues` or `pulls` -# only: issues - -# Optionally, specify configuration settings just for `issues` or `pulls` -# issues: -# exemptLabels: -# - help-wanted -# lockLabel: outdated - -# pulls: -# daysUntilLock: 30 - -# Repository to extend settings from -# _extends: repo diff --git a/.github/stale.yml b/.github/stale.yml deleted file mode 100644 index 03a77e140..000000000 --- a/.github/stale.yml +++ /dev/null @@ -1,18 +0,0 @@ -# Number of days of inactivity before an issue becomes stale -daysUntilStale: 21 -# Number of days of inactivity before a stale issue is closed -daysUntilClose: 7 -# Issues with these labels will never be considered stale -exemptLabels: - - not-stale - - pinned - - security -# Label to use when marking an issue as stale -staleLabel: false -# Comment to post when marking an issue as stale. Set to `false` to disable -markComment: > - This issue has been automatically marked as stale because it has not had - recent activity. It will be closed if no further activity occurs. Thank you - for your contributions. -# Comment to post when closing a stale issue. Set to `false` to disable -closeComment: false diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e3a5617c4..5f70a9bfc 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,16 +2,6 @@ **30 seconds of code** is powered by the community, so feel free to contribute in any way you can to help us! -## Tools - -Before you begin contributing, you should install the integration-tools globally on your machine: - -```sh -npm install -g @30-seconds/integration-tools -``` - -This will allow you to use our customized tools for all of our content repositories. - ## How you can help - Submit pull requests with new snippets (see guidelines below) or snippet updates (tags, descriptions, explanations, typos, examples, code improvements). @@ -23,25 +13,24 @@ Breaking any of these rules will result in your pull request being closed. Pleas - **Always be polite and respectful to others** and try to follow the advice of the moderators/collaborators/owners. - **Only modify snippet files**, never modify the generated files in the `snippet_data` directory. -- **Use the integration tools commands** to generate new snippets, ensuring they have the correct name and are in the correct location. +- **Use the snippet template** to create new snippets, ensure they have the correct name and are in the correct location. - **Follow snippet format exactly**, otherwise your snippets will not be recognized correctly by the tools responsible for publishing them on the website. This includes such things as spacing and empty lines - if you accidentally make a mistake, consult the repository's [snippet template](snippet-template.md). - **Snippets should solve real-world problems**, no matter how simple and should be abstract enough to be applied to different scenarios. ## Snippet creation -After installing the integration tools, you can run the following command: +In order to create a new snippet, you should follow the steps below: -```sh -create-new-snippet -``` - -Replace `` with the name of the snippet you are adding. +- Crate a copy of the [snippet template](snippet-template.md) in the `snippets` directory. +- Change the name of the newly created file to the name of your snippet. +- Edit the file, adding your snippet based on the guidelines. ## Snippet guidelines - Snippets must have all their frontmatter sections (title, tags etc.) filled. - Snippet titles must correspond to the filename and follow the language and repository's naming conventions. - Snippet tags must be comma-separated, contain a primary tag as seen on the website as their first tag and an expertise tag (`beginner`, `intermediate` or `advanced`) as their last tag. +- Snippets must have their `firstSeen` dates formatted using [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601). - Snippet descriptions must be short and to the point. Explain *what* the snippet does and detail *how* the snippet works and the language features used in it. - Snippet code and examples must be enclosed in appropriate, language-tagged blocks as shown in the snippet template, be short and use modern techniques and features. Also make sure to test your code before submitting. - If your snippet contains arguments with default parameters, explain what happens if they are omitted when calling the function and what the default case is. Specify default parameters for arguments only if necessary. diff --git a/README.md b/README.md index 369616e24..716d9355f 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,14 @@ [![Logo](/logo.png)](https://30secondsofcode.org/react/p/1) -# 30 seconds of React +# 30 seconds of code > Short React code snippets for all your development needs * Visit [our website](https://30secondsofcode.org) to view our snippet collection. * Use the [Search page](https://30secondsofcode.org/search) to find snippets that suit your needs. You can search by name, tag, language or using a snippet's description. Just start typing a term and see what comes up. -* Browse the [React Snippet List](https://30secondsofcode.org/react/p/1) to see all the snippets in this project or click individual tags at the top of the same page to narrow down your search to a specific tag. +* Browse the [React Snippet collection](https://30secondsofcode.org/react/p/1) to see all the snippets in this project or click individual tags at the top of the same page to narrow down your search to a specific tag. * Click on each snippet card to view the whole snippet, including code, explanation and examples. -* You can use the button on the right side of a snippet card to copy the code to clipboard. +* You can use the button at the bottom of a snippet card to view the snippet in Codepen. * If you like the project, give it a star. It means a lot to the people maintaining it. ## Want to contribute? @@ -18,9 +18,9 @@ * If you find a problem with a specific snippet, please [open an issue](https://github.com/30-seconds/30-seconds-of-react/issues/new). * If you find a problem with the website, please [report it in the web repository](https://github.com/30-seconds/30-seconds-web/issues/new). -## Credits & Sponsors +## Credits -* This repository is maintained by the [30-seconds organization on GitHub](https://github.com/30-seconds). +* This repository is maintained by the [30 seconds of code organization on GitHub](https://github.com/30-seconds). * All snippets are licensed under the CC0-1.0 License, unless explicitly stated otherwise. -* Logos, names and trademarks are not to be used without the explicit consent of the maintainers or owners of the 30 seconds GitHub organization. -* Our website is powered by [Netlify](https://www.netlify.com/), [Gatsby](https://www.gatsbyjs.org/), [Travis CI](https://travis-ci.com/) & [GitHub](https://github.com/). +* Logos, names and trademarks are not to be used without the explicit consent of the owners of the 30 seconds of code GitHub organization. +* Our website is powered by [Netlify](https://www.netlify.com/), [Next.js](https://nextjs.org/) & [GitHub](https://github.com/). diff --git a/logo.png b/logo.png index 8a96c3066..a7661d15e 100644 Binary files a/logo.png and b/logo.png differ diff --git a/snippet-template.md b/snippet-template.md index 7bf83bf6e..1d4302afa 100644 --- a/snippet-template.md +++ b/snippet-template.md @@ -1,6 +1,7 @@ --- title: ComponentName tags: components,state,effect,intermediate +firstSeen: 2021-06-13T05:00:00-04:00 --- Explain briefly what the snippet does. diff --git a/snippets/Accordion.md b/snippets/Accordion.md index 30e3df082..e333ef602 100644 --- a/snippets/Accordion.md +++ b/snippets/Accordion.md @@ -1,6 +1,8 @@ --- title: Accordion tags: components,children,state,advanced +firstSeen: 2019-03-02T10:46:34+02:00 +lastUpdated: 2021-01-07T23:57:13+02:00 --- Renders an accordion menu with multiple collapsible content elements. diff --git a/snippets/Alert.md b/snippets/Alert.md index e593cbd08..4ec66fdf6 100644 --- a/snippets/Alert.md +++ b/snippets/Alert.md @@ -1,6 +1,8 @@ --- title: Alert tags: components,state,effect,beginner +firstSeen: 2019-09-17T13:19:30+03:00 +lastUpdated: 2021-01-07T23:57:13+02:00 --- Renders an alert component with `type` prop. diff --git a/snippets/AutoLink.md b/snippets/AutoLink.md index 6ca08c913..b207d4179 100644 --- a/snippets/AutoLink.md +++ b/snippets/AutoLink.md @@ -1,6 +1,8 @@ --- title: AutoLink tags: components,fragment,regexp,intermediate +firstSeen: 2018-12-05T15:04:49+02:00 +lastUpdated: 2020-11-03T20:42:15+02:00 --- Renders a string as plaintext, with URLs converted to appropriate link elements. diff --git a/snippets/Callto.md b/snippets/Callto.md index a1ebb4136..adda5b9c3 100644 --- a/snippets/Callto.md +++ b/snippets/Callto.md @@ -2,6 +2,8 @@ title: Callto tags: components,beginner unlisted: true +firstSeen: 2020-10-04T00:07:37+03:00 +lastUpdated: 2021-01-04T12:32:47+02:00 --- Renders a link formatted to call a phone number (`tel:` link). diff --git a/snippets/Carousel.md b/snippets/Carousel.md index 0af6b189e..9fed5f829 100644 --- a/snippets/Carousel.md +++ b/snippets/Carousel.md @@ -1,6 +1,8 @@ --- title: Carousel tags: components,children,state,effect,advanced +firstSeen: 2018-11-13T21:24:55+02:00 +lastUpdated: 2020-11-03T20:42:15+02:00 --- Renders a carousel component. diff --git a/snippets/Collapse.md b/snippets/Collapse.md index 0f5235b97..d77cb9522 100644 --- a/snippets/Collapse.md +++ b/snippets/Collapse.md @@ -1,6 +1,8 @@ --- title: Collapse tags: components,children,state,beginner +firstSeen: 2018-10-17T20:42:23+03:00 +lastUpdated: 2020-11-03T20:42:15+02:00 --- Renders a component with collapsible content. diff --git a/snippets/ControlledInput.md b/snippets/ControlledInput.md index c60d8e4c5..7be091faf 100644 --- a/snippets/ControlledInput.md +++ b/snippets/ControlledInput.md @@ -1,6 +1,8 @@ --- title: ControlledInput tags: components,input,intermediate +firstSeen: 2019-08-21T13:09:10+03:00 +lastUpdated: 2020-11-03T21:08:39+02:00 --- Renders a controlled `` element that uses a callback function to inform its parent about value updates. diff --git a/snippets/CountDown.md b/snippets/CountDown.md index 96c4c2772..c92767072 100644 --- a/snippets/CountDown.md +++ b/snippets/CountDown.md @@ -1,6 +1,8 @@ --- title: CountDown tags: components,state,advanced +firstSeen: 2019-02-06T14:39:31+02:00 +lastUpdated: 2020-11-26T23:57:34+02:00 --- Renders a countdown timer that prints a message when it reaches zero. diff --git a/snippets/DataList.md b/snippets/DataList.md index 9d3f0b24f..3d50648e0 100644 --- a/snippets/DataList.md +++ b/snippets/DataList.md @@ -1,6 +1,8 @@ --- title: DataList tags: components,beginner +firstSeen: 2018-11-29T12:12:24+02:00 +lastUpdated: 2020-11-03T21:26:34+02:00 --- Renders a list of elements from an array of primitives. diff --git a/snippets/DataTable.md b/snippets/DataTable.md index 2815ccb62..58f12a1ad 100644 --- a/snippets/DataTable.md +++ b/snippets/DataTable.md @@ -1,6 +1,8 @@ --- title: DataTable tags: components,beginner +firstSeen: 2018-11-29T11:13:59+02:00 +lastUpdated: 2020-11-03T21:26:34+02:00 --- Renders a table with rows dynamically created from an array of primitives. diff --git a/snippets/FileDrop.md b/snippets/FileDrop.md index 223b88480..bc2429574 100644 --- a/snippets/FileDrop.md +++ b/snippets/FileDrop.md @@ -1,6 +1,8 @@ --- title: FileDrop tags: components,input,state,effect,event,advanced +firstSeen: 2019-02-02T12:17:27+02:00 +lastUpdated: 2020-11-26T09:43:21+02:00 --- Renders a file drag and drop component for a single file. diff --git a/snippets/LimitedTextarea.md b/snippets/LimitedTextarea.md index 237d776c3..5355ee3c6 100644 --- a/snippets/LimitedTextarea.md +++ b/snippets/LimitedTextarea.md @@ -1,6 +1,8 @@ --- title: LimitedTextarea tags: components,state,callback,event,beginner +firstSeen: 2018-10-19T09:11:59+03:00 +lastUpdated: 2020-11-16T16:50:57+02:00 --- Renders a textarea component with a character limit. diff --git a/snippets/LimitedWordTextarea.md b/snippets/LimitedWordTextarea.md index 456a4d48e..d7f3d881a 100644 --- a/snippets/LimitedWordTextarea.md +++ b/snippets/LimitedWordTextarea.md @@ -1,6 +1,8 @@ --- title: LimitedWordTextarea tags: components,input,state,callback,effect,event,intermediate +firstSeen: 2019-02-20T18:22:22+02:00 +lastUpdated: 2021-01-07T23:57:13+02:00 --- Renders a textarea component with a word limit. diff --git a/snippets/Loader.md b/snippets/Loader.md index 51613aa61..5f3bf25e9 100644 --- a/snippets/Loader.md +++ b/snippets/Loader.md @@ -1,6 +1,8 @@ --- title: Loader tags: components,beginner +firstSeen: 2019-09-11T21:59:12+03:00 +lastUpdated: 2020-11-16T15:17:26+02:00 --- Renders a spinning loader component. diff --git a/snippets/Mailto.md b/snippets/Mailto.md index 130fb213d..0e85b81ae 100644 --- a/snippets/Mailto.md +++ b/snippets/Mailto.md @@ -1,6 +1,8 @@ --- title: Mailto tags: components,beginner +firstSeen: 2019-01-28T20:10:51+02:00 +lastUpdated: 2020-11-16T15:17:26+02:00 --- Renders a link formatted to send an email (`mailto:` link). diff --git a/snippets/MappedTable.md b/snippets/MappedTable.md index 8449bd095..3907bec6e 100644 --- a/snippets/MappedTable.md +++ b/snippets/MappedTable.md @@ -1,6 +1,8 @@ --- title: MappedTable tags: components,array,object,intermediate +firstSeen: 2018-11-29T11:50:10+02:00 +lastUpdated: 2020-09-06T14:20:45+03:00 --- Renders a table with rows dynamically created from an array of objects and a list of property names. diff --git a/snippets/Modal.md b/snippets/Modal.md index 93633592c..747d245e7 100644 --- a/snippets/Modal.md +++ b/snippets/Modal.md @@ -1,6 +1,8 @@ --- title: Modal tags: components,effect,intermediate +firstSeen: 2019-03-11T11:25:06+02:00 +lastUpdated: 2020-11-25T21:12:16+02:00 --- Renders a Modal component, controllable through events. diff --git a/snippets/MultiselectCheckbox.md b/snippets/MultiselectCheckbox.md index 7aa325ab7..4a880d280 100644 --- a/snippets/MultiselectCheckbox.md +++ b/snippets/MultiselectCheckbox.md @@ -1,6 +1,8 @@ --- title: MultiselectCheckbox tags: components,input,state,array,intermediate +firstSeen: 2019-01-27T09:25:57+02:00 +lastUpdated: 2020-11-26T23:57:34+02:00 --- Renders a checkbox list that uses a callback function to pass its selected value/values to the parent component. diff --git a/snippets/PasswordRevealer.md b/snippets/PasswordRevealer.md index 11f325b2b..296fb7f18 100644 --- a/snippets/PasswordRevealer.md +++ b/snippets/PasswordRevealer.md @@ -1,6 +1,8 @@ --- title: PasswordRevealer tags: components,input,state,beginner +firstSeen: 2018-10-18T20:04:22+03:00 +lastUpdated: 2020-11-25T20:46:35+02:00 --- Renders a password input field with a reveal button. diff --git a/snippets/RippleButton.md b/snippets/RippleButton.md index 77fbf123a..d884a926a 100644 --- a/snippets/RippleButton.md +++ b/snippets/RippleButton.md @@ -1,6 +1,8 @@ --- title: RippleButton tags: components,state,effect,intermediate +firstSeen: 2019-09-10T09:07:29+03:00 +lastUpdated: 2020-11-26T09:43:21+02:00 --- Renders a button that animates a ripple effect when clicked. diff --git a/snippets/Select.md b/snippets/Select.md index ff721085c..57bf6b076 100644 --- a/snippets/Select.md +++ b/snippets/Select.md @@ -1,6 +1,8 @@ --- title: Select tags: components,input,beginner +firstSeen: 2018-12-10T10:48:03+02:00 +lastUpdated: 2020-11-25T20:46:35+02:00 --- Renders an uncontrolled `