diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000000..6f9b40ca23 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,11 @@ +node_modules + +.git +.github +.gitignore + +package-lock.json +yarn-error.log +yarn.lock + +tsconfig.json \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000000..ffb9589824 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,40 @@ +{ + "env": { + "browser": true, + "es2021": true + }, + "extends": ["plugin:react/recommended", "airbnb", "plugin:prettier/recommended"], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaFeatures": { + "jsx": true + }, + "ecmaVersion": "latest", + "sourceType": "module" + }, + "plugins": ["react", "@typescript-eslint", "prettier"], + "rules": { + "prettier/prettier": "error", + "no-console": ["error", { "allow": ["warn", "error"] }], + "react/jsx-pascal-case": [1, {}], + "react/jsx-sort-props": [ + 1, + { + "callbacksLast": true, + "shorthandFirst": true, + "ignoreCase": true, + "noSortAlphabetically": true, + "multiline": "last" + } + ], + "react/jsx-boolean-value": [1, "always"], + "react/self-closing-comp": [ + "error", + { + "component": true, + "html": true + } + ], + "react/jsx-curly-brace-presence": [1, "always"] + } +} diff --git a/.github/ISSUE_TEMPLATE/----bug-report---.md b/.github/ISSUE_TEMPLATE/----bug-report---.md index d279fb48ca..df6bd53831 100644 --- a/.github/ISSUE_TEMPLATE/----bug-report---.md +++ b/.github/ISSUE_TEMPLATE/----bug-report---.md @@ -4,7 +4,6 @@ about: Create a report to help us improve title: "\U0001F41B [Bug report]: " labels: bug assignees: '' - --- **Describe the bug** @@ -12,6 +11,7 @@ A clear and concise description of what the bug is. **To Reproduce** Steps to reproduce the behavior: + 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' @@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen. If applicable, add screenshots to help explain your problem. **Desktop (please complete the following information):** - - OS: [e.g. iOS] - - Browser [e.g. chrome, safari] - - Version [e.g. 22] + +- OS: [e.g. iOS] +- Browser [e.g. chrome, safari] +- Version [e.g. 22] **Smartphone (please complete the following information):** - - Device: [e.g. iPhone6] - - OS: [e.g. iOS8.1] - - Browser [e.g. stock browser, safari] - - Version [e.g. 22] + +- Device: [e.g. iPhone6] +- OS: [e.g. iOS8.1] +- Browser [e.g. stock browser, safari] +- Version [e.g. 22] **Additional context** Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/---feature-request---.md b/.github/ISSUE_TEMPLATE/---feature-request---.md index 333c0cb245..f022833946 100644 --- a/.github/ISSUE_TEMPLATE/---feature-request---.md +++ b/.github/ISSUE_TEMPLATE/---feature-request---.md @@ -1,10 +1,9 @@ --- -name: "✨ [Feature request]: " +name: '✨ [Feature request]: ' about: Suggest an idea for this project -title: "✨ [Feature request]: " +title: '✨ [Feature request]: ' labels: '' assignees: '' - --- **Is your feature request related to a problem? Please describe.** diff --git a/.github/ISSUE_TEMPLATE/new-play.md b/.github/ISSUE_TEMPLATE/new-play.md index d55bf09a88..790f4369da 100644 --- a/.github/ISSUE_TEMPLATE/new-play.md +++ b/.github/ISSUE_TEMPLATE/new-play.md @@ -1,18 +1,15 @@ --- name: New Play about: Add a New Play Request -title: "[Add a Play]: " +title: '[Add a Play]: ' labels: play-request assignees: '' - --- -Thank You! +Thank You! ## What's the Play about? - ## What ReactJS concept will be used to create this play? - ## Are you willing to take it up for implementation? diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index f8baf616ae..fc3f3ec4dc 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,4 +1,3 @@ - > First thing, PLEASE READ THIS: [ReactPlay Code Review Checklist](https://github.com/reactplay/react-play/wiki/ReactPlay-Code-Review-Checklist) # Description @@ -18,7 +17,7 @@ Please delete options that are not relevant. # How Has This Been Tested? -Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. +Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. # Checklist: diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000000..51daf4483b --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "semi": true, + "tabWidth": 2, + "printWidth": 100, + "singleQuote": true, + "trailingComma": "none", + "endOfLine": "lf" +} diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 41d9c31373..371ae230ea 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -17,23 +17,23 @@ diverse, inclusive, and healthy community. Examples of behavior that contributes to a positive environment for our community include: -* Demonstrating empathy and kindness toward other people -* Being respectful of differing opinions, viewpoints, and experiences -* Giving and gracefully accepting constructive feedback -* Accepting responsibility and apologizing to those affected by our mistakes, +- Demonstrating empathy and kindness toward other people +- Being respectful of differing opinions, viewpoints, and experiences +- 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 @@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban. ### 4. Permanent Ban **Community Impact**: Demonstrating a pattern of violation of community -standards, including sustained inappropriate behavior, harassment of an +standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. **Consequence**: A permanent ban from any sort of public interaction within diff --git a/CREATE-PLAY.md b/CREATE-PLAY.md index 95a001bd49..3d48444b71 100644 --- a/CREATE-PLAY.md +++ b/CREATE-PLAY.md @@ -1,6 +1,9 @@ # Create a Play + This document helps you with the steps to `Create a play` in `react-play`. You will also find the details of how to submit a play for code review. + ## 🖥️ Steps to Create a Play + Welcome developers! We are as excited as you are to know that you are going to create a new play. It is super easy to get started. > **Note:** The steps below assumes that you have forked and cloned the [react-play](https://github.com/reactplay/react-play) repository. Also, you have installed the dependencies using the `npm install` or `yarn install` command. If you are new to forking, please watch this [YouTube Guide](https://www.youtube.com/watch?v=h8suY-Osn8Q) to get started. @@ -13,82 +16,83 @@ Welcome developers! We are as excited as you are to know that you are going to c npm run create-play ``` - This will ask a few questions about your `Play` and then perform required steps to create the play. The screen shot below shows the output of the command. - > **Script Language**: `react-play` is equipped with both `JavaScript` and `TypeScript`. So you can use either of it as base language for your play - -

- plop create -

- -
- - Please expand to find the description of the question details. - -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
QuestionMandatoryDescription
Please provide the name of the playYesPlease provide a meaningful name of the play(Example: Identity Card). This name will be visible to the users.
Tell us more about the playNoIt is a description of the play for users to understand it better. The maximum number of allowed characters is 1024.
Language to be used (javascript/typescript)YesLet the application know your choice of script. It supports both JavaScript and TypeScript. You can pick either of it.
Style to be used (css/scss)YesLet the application know your choice of style. It supports both css and scss. You can pick either of it.
What is the level of this play?YesYou will be asked to select one of the three levels, Beginner, Intermediate, or Advanced. Please select a level for the play. A level indicates the possible complexity of developing the play using React.
Provide maximum of 5 tagsNoPlease provide comma-separated list of tags. You can provide max 5 tags. Example: JSX, Hooks
Enter your github usernameYesProvide your GitHub user name to mark you as the creator of the play.
Please provide the path(URL) to cover imageNoA cover image is used to show your play with a thumbnail in the play list page. Please provide a link a cover image that is publicly accessible using a URL, example: https://res.cloudinary.com/reactplay/image/upload/v1649060528/demos/id-card_pdvyvz.png. Alternatively, you can have a cover.png file in the root of your play folder. - If you don't have a cover image, the app will use the default cover image.
Enter your blog urlNoIf you have written an article about this play, please provide the link to your blog article page.
Enter your video urlNoIf you have created a video tutorial about this play, please provide the link to your YouTube video.
+ + > **Script Language**: `react-play` is equipped with both `JavaScript` and `TypeScript`. So you can use either of it as base language for your play + +

+ plop create

- -
+ +
+ + Please expand to find the description of the question details. + +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
QuestionMandatoryDescription
Please provide the name of the playYesPlease provide a meaningful name of the play(Example: Identity Card). This name will be visible to the users.
Tell us more about the playNoIt is a description of the play for users to understand it better. The maximum number of allowed characters is 1024.
Language to be used (javascript/typescript)YesLet the application know your choice of script. It supports both JavaScript and TypeScript. You can pick either of it.
Style to be used (css/scss)YesLet the application know your choice of style. It supports both css and scss. You can pick either of it.
What is the level of this play?YesYou will be asked to select one of the three levels, Beginner, Intermediate, or Advanced. Please select a level for the play. A level indicates the possible complexity of developing the play using React.
Provide maximum of 5 tagsNoPlease provide comma-separated list of tags. You can provide max 5 tags. Example: JSX, Hooks
Enter your github usernameYesProvide your GitHub user name to mark you as the creator of the play.
Please provide the path(URL) to cover imageNoA cover image is used to show your play with a thumbnail in the play list page. Please provide a link a cover image that is publicly accessible using a URL, example: https://res.cloudinary.com/reactplay/image/upload/v1649060528/demos/id-card_pdvyvz.png. Alternatively, you can have a cover.png file in the root of your play folder. + If you don't have a cover image, the app will use the default cover image.
Enter your blog urlNoIf you have written an article about this play, please provide the link to your blog article page.
Enter your video urlNoIf you have created a video tutorial about this play, please provide the link to your YouTube video.
+

+ +
- Now you can run the app using the following command: ```shell @@ -99,7 +103,9 @@ Welcome developers! We are as excited as you are to know that you are going to c - You should now see your play added to the [play list](http://localhost:3000/plays) page. You can click on the play thumbnail to see the details of the play. - That's it. Now start coding your `Play` using your favorite code editor! + ## 👀 Submitting a Play for Review + After you done with coding for your `Play`, you can submit it for review. Submitting a `Play` for review is a two step process. - Create a Pull Request on the [react-play](https://github.com/reactplay/react-play) repository with your changes. Please add `atapas` as a reviewer. diff --git a/README.md b/README.md index df14cd8637..f2b561a931 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,9 @@ # ReactPlay(Repo: `react-play`) + + [![All Contributors](https://img.shields.io/badge/all_contributors-24-orange.svg?style=flat-square)](#contributors-) +

@@ -46,11 +49,13 @@ `react-play` is an `opensource` web app that helps you learn ReactJS faster with hands-on practice model. It is a collection of `ReactJS projects` that you can use to learn ReactJS. Is that all? Nope. You can also create your own projects and share them with the world. The best part is that the ReactJS experts will `review` your project code before it gets part of the `ReactPlay` app. Isn't that a pure WIN-WIN? + ## 🔥 Demo + Here is the link to the app. We hope you enjoy it. > [The ReactPlay app Link](https://reactplay.io) - + Who doesn't want motivation and support? Many Thanks to all the Stargazers who has supported this project with stars(⭐). You all are amazing!!! [![Stargazers repo roster for @reactplay/react-play](https://reporoster.com/stars/reactplay/react-play)](https://github.com/reactplay/react-play/stargazers) @@ -67,7 +72,8 @@ You may want to set up the `react-play` repo for the following reasons: Here is a quick overview of the `react-play` repo setup: -### 🍴 Fork and Clone the Repo +### 🍴 Fork and Clone the Repo + First, you need to fork the `react-play` repo. You can do this by clicking the `Fork` button on the top right corner of the repo. If you are new to forking, please watch this [YouTube Guide](https://www.youtube.com/watch?v=h8suY-Osn8Q) to get started. Once forked, you can clone the repo by clicking the `Clone or Download` button on the top right corner of forked repo. @@ -75,25 +81,29 @@ Once forked, you can clone the repo by clicking the `Clone or Download` button o Please change the directory after cloning the repository using the `cd ` command. ### ⬇️ Install Dependencies + Next, install the dependencies by running the following command in the `react-play` repo: ```bash npm install ``` + Or - + ```bash yarn install ``` ### 🦄 Start the Development Mode + Use the following command to start the app in the development mode: ```bash npm start ``` + Or - + ```bash yarn start ``` @@ -103,13 +113,15 @@ It runs the app in the development mode. Open [http://localhost:3000](http://loc The page will reload when you make changes. You may also see any lint errors in the console. ### 🧱 Build the App for Production + Use the following command to build the app for production: ```bash npm run build ``` + Or - + ```bash yarn build ``` @@ -128,6 +140,7 @@ You can deploy the app to `Vercel` or `Netlify` with a single click. ## 🤝 Contributing to `ReactPlay` + Any kind of positive contributions are welcome! Please help us to grow by contributing to the project. If you wish to contribute, you can, @@ -157,9 +170,6 @@ If you found the app helpful, consider supporting us with a coffee. A ⭐️ to ReactPlay is to make us more 💪 stronger and motivated. - - - ## Contributors ✨ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)): diff --git a/_config.yml b/_config.yml index 2f7efbeab5..fff4ab923c 100644 --- a/_config.yml +++ b/_config.yml @@ -1 +1 @@ -theme: jekyll-theme-minimal \ No newline at end of file +theme: jekyll-theme-minimal diff --git a/package.json b/package.json index 23b182eaa1..af064238d9 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,10 @@ "postbuild": "react-snap", "test": "react-scripts test", "eject": "react-scripts eject", - "create-play": "plop" + "create-play": "plop", + "lint:fix": "eslint . --fix", + "prettier:fix": "prettier --write \"**/*.+(js|jsx|ts|tsx|json|yml|yaml|css|scss|md|)\"", + "format": "yarn prettier:fix && yarn lint:fix" }, "eslintConfig": { "extends": [ @@ -58,6 +61,17 @@ ] }, "devDependencies": { + "@typescript-eslint/eslint-plugin": "^5.27.0", + "@typescript-eslint/parser": "^5.27.0", + "eslint": "^7.32.0 || ^8.2.0", + "eslint-config-airbnb": "^19.0.4", + "eslint-config-prettier": "^8.5.0", + "eslint-plugin-import": "^2.25.3", + "eslint-plugin-jsx-a11y": "^6.5.1", + "eslint-plugin-prettier": "^4.0.0", + "eslint-plugin-react": "^7.28.0", + "eslint-plugin-react-hooks": "^4.3.0", + "prettier": "^2.6.2", "puppeteer": "^13.7.0", "react-snap": "^1.23.0", "typescript": "^4.6.4" diff --git a/plopfile.js b/plopfile.js index 01ab257a45..7fe510b549 100644 --- a/plopfile.js +++ b/plopfile.js @@ -1,18 +1,22 @@ -String.prototype.replaceAll = String.prototype.replaceAll || function(string, replaced) { - return this.replace(new RegExp(string, 'g'), replaced); -}; +String.prototype.replaceAll = + String.prototype.replaceAll || + function (string, replaced) { + return this.replace(new RegExp(string, 'g'), replaced); + }; -module.exports = plop => { - plop.setHelper('trim', str => str.trim()); - plop.setHelper('removeAllSpaces', str => str.replaceAll(/\s/g,'')); +module.exports = (plop) => { + plop.setHelper('trim', (str) => str.trim()); + plop.setHelper('removeAllSpaces', (str) => str.replaceAll(/\s/g, '')); - plop.setHelper('generateId', str => `pl-${str.trim().replaceAll(/\s/g,'-').toLowerCase()}`); + plop.setHelper('generateId', (str) => `pl-${str.trim().replaceAll(/\s/g, '-').toLowerCase()}`); - plop.setHelper('generateFolderName', str => `${str.trim().replaceAll(/\s/g,'-').toLowerCase()}`); + plop.setHelper( + 'generateFolderName', + (str) => `${str.trim().replaceAll(/\s/g, '-').toLowerCase()}` + ); const insertIf = (condition, ...elements) => (condition ? elements : []); - // demo generator plop.setGenerator('play', { description: 'Steps to add a new play', @@ -20,12 +24,12 @@ module.exports = plop => { { type: 'input', name: 'name', - message: 'Please provide the name of the play(Example: Identity Card):', + message: 'Please provide the name of the play(Example: Identity Card):' }, { type: 'input', name: 'description', - message: 'Tell us more about the play(Max 1024 characters):', + message: 'Tell us more about the play(Max 1024 characters):' }, { type: 'list', @@ -48,63 +52,63 @@ module.exports = plop => { { type: 'input', name: 'tags', - message: 'Provide maximum of 5 tags(Example: JSX, Hooks):', + message: 'Provide maximum of 5 tags(Example: JSX, Hooks):' }, { type: 'input', name: 'github', - message: 'Enter your github username(Example: atapas):', + message: 'Enter your github username(Example: atapas):' }, { type: 'input', name: 'cover', - message: 'Please provide the path(URL) to cover image(When the image is hosted publicly):', + message: 'Please provide the path(URL) to cover image(When the image is hosted publicly):' }, { type: 'input', name: 'blog', - message: 'Enter your blog url(Example: https://blog.greenroots.info):', + message: 'Enter your blog url(Example: https://blog.greenroots.info):' }, { type: 'input', name: 'video', - message: 'Enter your video url(Example: https://www.youtube.com/watch?v=dQw4w9WgXcQ):', - }, + message: 'Enter your video url(Example: https://www.youtube.com/watch?v=dQw4w9WgXcQ):' + } ], actions: [ { type: 'add', path: 'src/plays/{{generateFolderName name}}/{{pascalCase name}}.{{language}}x', - templateFile: 'plop-templates/component_{{language}}.hbs', + templateFile: 'plop-templates/component_{{language}}.hbs' }, { type: 'add', path: 'src/plays/{{generateFolderName name}}/{{camelCase name}}.{{style}}', - templateFile: 'plop-templates/style_{{style}}.hbs', + templateFile: 'plop-templates/style_{{style}}.hbs' }, { type: 'add', path: 'src/plays/{{generateFolderName name}}/Readme.md', - templateFile: 'plop-templates/play-readme.hbs', + templateFile: 'plop-templates/play-readme.hbs' }, { type: 'modify', path: 'src/plays/index.js', pattern: /\/\/add export here/gi, - templateFile: 'plop-templates/exportPlay.hbs', + templateFile: 'plop-templates/exportPlay.hbs' }, { type: 'modify', path: 'src/meta/play-meta.js', pattern: /\/\/import play here/gi, - templateFile: 'plop-templates/importToMeta.hbs', + templateFile: 'plop-templates/importToMeta.hbs' }, { type: 'modify', path: 'src/meta/play-meta.js', pattern: /\/\/replace new play item here/gi, - templateFile: 'plop-templates/play.hbs', - }, - ], + templateFile: 'plop-templates/play.hbs' + } + ] }); -}; \ No newline at end of file +}; diff --git a/src/App.css b/src/App.css index 7e2e761558..dbd3b9d009 100644 --- a/src/App.css +++ b/src/App.css @@ -22,15 +22,15 @@ --color-brand-primary-rgb: 0, 244, 252; --color-brand-primary-alt: #61dafb; --color-brand-primary-dark: #00aada; - + /* Neutral */ --color-neutral-10: #ffffff; --color-neutral-20: #f6f6f9; --color-neutral-30: #e0e0e6; - --color-neutral-40: #BDBDBD; - --color-neutral-50: #7F878A; - --color-neutral-60: #5C6C70; - --color-neutral-70: #3E5156; + --color-neutral-40: #bdbdbd; + --color-neutral-50: #7f878a; + --color-neutral-60: #5c6c70; + --color-neutral-70: #3e5156; --color-neutral-80: #242230; --color-neutral-90: #010326; --color-neutral-100: #000000; @@ -58,7 +58,6 @@ --fs-lg: 2rem; --fs-xl: 3rem; --fs-xxl: 4rem; - /* Line Height */ --lh-xs: 0.8em; @@ -115,11 +114,9 @@ body * { } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } - @media screen and (max-width: 1200px) { :root { /* Font Sizes */ @@ -202,4 +199,3 @@ code { .app-footer a:focus { color: var(--color-brand-primary-alt); } - diff --git a/src/App.js b/src/App.js index 63c3da6727..2e1f6cb7da 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,9 @@ -import "App.css"; -import { Outlet } from "react-router-dom"; +import 'App.css'; +import { Outlet } from 'react-router-dom'; function App() { return ( -

+
); diff --git a/src/common/404/404.css b/src/common/404/404.css index 5ea224850e..3e912ee693 100644 --- a/src/common/404/404.css +++ b/src/common/404/404.css @@ -1,63 +1,63 @@ .page-404 { - padding: 2rem; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - min-height: calc(100vh - 120px); + padding: 2rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: calc(100vh - 120px); } .page-404-image { - max-width: 100%; - height: auto; + max-width: 100%; + height: auto; } .page-404-lead { - margin: 0; - font-family: var(--ff-accent); - font-size: var(--fs-xl); - text-align: center; + margin: 0; + font-family: var(--ff-accent); + font-size: var(--fs-xl); + text-align: center; } @media screen and (max-width: 768px) { - .page-404-lead { - line-height: var(--lh-rg); - margin-bottom: 1rem; - } + .page-404-lead { + line-height: var(--lh-rg); + margin-bottom: 1rem; + } } .page-404-desc { - margin-top: 0; - font-size: var(--fs-md); - text-align: center; + margin-top: 0; + font-size: var(--fs-md); + text-align: center; } .page-404-link { - position: relative; - color: var(--color-neutral-80); - text-decoration: none; - transition: all .5s ease-in-out; - font-weight: var(--fw-semibold); + position: relative; + color: var(--color-neutral-80); + text-decoration: none; + transition: all 0.5s ease-in-out; + font-weight: var(--fw-semibold); } .page-404-link:after { - content: ""; - position: absolute; - left: 0; - right: 0; - bottom: 2px; - height: 2px; - background-color: var(--color-brand-primary); - transition: all .1s ease-in-out; + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 2px; + height: 2px; + background-color: var(--color-brand-primary); + transition: all 0.1s ease-in-out; } .page-404-link:hover, .page-404-link:focus { - color: var(--color-neutral-90); + color: var(--color-neutral-90); } .page-404-link:hover:after, .page-404-link:focus:after { - height: 5px; - bottom: 0; - /* background-color: var(--color-neutral-90); */ -} \ No newline at end of file + height: 5px; + bottom: 0; + /* background-color: var(--color-neutral-90); */ +} diff --git a/src/common/404/PageNotFound.jsx b/src/common/404/PageNotFound.jsx index 4a81da5045..df8af5b998 100644 --- a/src/common/404/PageNotFound.jsx +++ b/src/common/404/PageNotFound.jsx @@ -1,18 +1,21 @@ import { Link } from 'react-router-dom'; -import { ReactComponent as Image404 } from "images/img-404.svg"; -import "./404.css"; +import { ReactComponent as Image404 } from 'images/img-404.svg'; +import './404.css'; const PageNotFound = () => { - - return( -
+ return ( +
-

Look like you are lost

-

- Why don't you go back to home? +

Look like you are lost

+

+ Why don't you go back to{' '} + + home + + ?

); }; -export default PageNotFound; \ No newline at end of file +export default PageNotFound; diff --git a/src/common/components/Comment.jsx b/src/common/components/Comment.jsx index ae88a40814..703cfad748 100644 --- a/src/common/components/Comment.jsx +++ b/src/common/components/Comment.jsx @@ -1,11 +1,9 @@ -import Giscus from "@giscus/react"; +import Giscus from '@giscus/react'; const Comment = () => { const projectRepoId = process.env.REACT_APP_GISCUS_PROJECT_REPO_ID; - const discussionCategoryId = - process.env.REACT_APP_GISCUS_DISCUSSION_CATEGORY_ID; - const discussionCategoryName = - process.env.REACT_APP_GISCUS_DISCUSSION_CATEGORY_NAME; + const discussionCategoryId = process.env.REACT_APP_GISCUS_DISCUSSION_CATEGORY_ID; + const discussionCategoryName = process.env.REACT_APP_GISCUS_DISCUSSION_CATEGORY_NAME; return ( <> diff --git a/src/common/components/LevelBadge.jsx b/src/common/components/LevelBadge.jsx index 466dbb7f1a..8cdb2b17cd 100644 --- a/src/common/components/LevelBadge.jsx +++ b/src/common/components/LevelBadge.jsx @@ -1,43 +1,43 @@ - import { useState, useEffect } from 'react'; -import { RiMedal2Fill } from "react-icons/ri"; -import { IoMdTrophy } from "react-icons/io"; -import { IoRibbon } from "react-icons/io5"; - +import { RiMedal2Fill } from 'react-icons/ri'; +import { IoMdTrophy } from 'react-icons/io'; +import { IoRibbon } from 'react-icons/io5'; const LevelBadge = ({ level }) => { const [playLevel, setPlayLevel] = useState(null); useEffect(() => { switch (level) { - case "Beginner": + case 'Beginner': setPlayLevel( {level} - ); + + ); break; - case "Intermediate": + case 'Intermediate': setPlayLevel( {level} - ); + + ); break; - case "Advanced": + case 'Advanced': setPlayLevel( {level} - ); + + ); break; default: setPlayLevel( {level} - ); + + ); } }, [level]); - return ( - <>{playLevel} - ); + return <>{playLevel}; }; -export default LevelBadge; \ No newline at end of file +export default LevelBadge; diff --git a/src/common/components/SocialShare.jsx b/src/common/components/SocialShare.jsx index 0475279652..35694ebfcb 100644 --- a/src/common/components/SocialShare.jsx +++ b/src/common/components/SocialShare.jsx @@ -1,49 +1,69 @@ - import { IoLogoFacebook, IoLogoTwitter, IoLogoLinkedin, IoLogoReddit } from 'react-icons/io5'; const SocialShare = () => { - const URL = window.location.href; const VIA = 'reactplayIO'; - + const tweetIt = () => { const msg = 'Learning ReactJS? Check out this awesome React Playlist!'; const hashTags = ['javascript', 'devcommunity', '100daysofcode', 'react', 'reactplay']; const tags = encodeURIComponent(hashTags.join(',')); - return `https://twitter.com/intent/tweet?url=${URL}&text=${encodeURIComponent(msg)}&hashtags=${tags}&via=${VIA}`; - } + return `https://twitter.com/intent/tweet?url=${URL}&text=${encodeURIComponent( + msg + )}&hashtags=${tags}&via=${VIA}`; + }; const postOnFB = () => { - return `https://www.facebook.com/sharer.php?u=${URL}` - } + return `https://www.facebook.com/sharer.php?u=${URL}`; + }; const postOnLinkedIn = () => { return `https://www.linkedin.com/sharing/share-offsite/?url=${URL}`; - } + }; const postOnReddit = () => { const title = 'Learning ReactJS? Check out this awesome React Playlist!'; return `http://www.reddit.com/submit?url=${URL}&title=${encodeURIComponent(title)}`; - } + }; - return( + return (
- + - - + + - - + + - - + +
-
- ) +
+ ); }; -export default SocialShare; \ No newline at end of file +export default SocialShare; diff --git a/src/common/components/YouTubeEmbed.jsx b/src/common/components/YouTubeEmbed.jsx index c250695615..0ca38ee406 100644 --- a/src/common/components/YouTubeEmbed.jsx +++ b/src/common/components/YouTubeEmbed.jsx @@ -1,18 +1,18 @@ - const YouTubeEmbed = ({ videoId, title }) => { return (