feat: ESLint Playground 🎉 (#6)

* chore: init react

* chore: update scripts

* Revert "chore: update scripts"

* chore: add eleventyignore

* chore: update scripts

* refactor: code

* chore: migrate components to react

* feat: create Alert component

* remove old colde

* feat: create Popup component

* update popup text

* feat: add CodeEditor component

* feat: integrate eslint

* chore: udpate build script

* chore: remove chokidar

* chore: add postinstall script

* refactor: code

* feat: allow users to fix lint errors

* chore: update build script

* fix: Alert

* chore: respect font style for editor

* feat: create Configuration component

* chore: use `.slice()`

* fix: netlify deployment

* feat: store state in URL and local storage

* feat: add share URL functionality

* feat: add real data to configuration

* feat: add download configuration button

* interactive configuration

* fix: state update for configuration

* fix: remove warnings

* fix: show fix button only if error is fixable

* feat: custom styles and theme for react-select

* feat: allow to set rules options

* fix: show if a rule is deprecated

* fix: typo

* feat: show suggestions

* fix options

* feat: integrate codemirror 6

* improve theme

* disable zoom on mobile

* linter extension

* add attribution

* feat: popup

* fix: popup and theme

* chore: remove unused deps

* fix height and width of editor

* improve editor theme

.babelrc

@@ -0,0 +1,6 @@
+{
+    "presets": [
+        "@babel/preset-react",
+        "@babel/preset-env"
+    ]
+}

.eleventyignore

@@ -0,0 +1,7 @@
+node_modules
+src/playground
+LICENSE
+package-lock.json
+package.json
+README.md
+webpack.config.js

netlify.toml

@@ -1,8 +1,6 @@
 [build]
   publish = "_site"
-  command = "npx @11ty/eleventy"
-  # or it could say: command = "npm run build"
-
+  command = "npm run build"
 
 # fix avif loading in Firefox
 # Source: https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today/

package.json

@@ -8,24 +8,56 @@
     "license": "ISC",
     "scripts": {
         "images": "imagemin '_site/assets/images' --out-dir='_site/assets/images'",
+        "install:playground": "cd src/playground && npm install --no-package-lock",
         "watch:sass": "node-sass --watch src/assets/scss -o src/assets/css",
         "watch:eleventy": "eleventy --serve --port=2024",
+        "watch:webpack": "webpack watch --mode=development",
         "build:sass": "node-sass src/assets/scss -o src/assets/css",
-        "build:eleventy": "npx @11ty/eleventy",
-        "start": "npm-run-all build:sass --parallel watch:*  --parallel images",
-        "build": "npm-run-all build:sass --parallel build:*   --parallel images"
+        "build:eleventy": "eleventy --quiet",
+        "build:webpack": "webpack --mode=production",
+        "start": "node tools/dev-server.js",
+        "build": "npm-run-all install:playground build:eleventy build:sass build:webpack images",
+        "postinstall": "npm run install:playground"
     },
     "devDependencies": {
         "@11ty/eleventy": "^0.11.1",
         "@11ty/eleventy-img": "^1.0.0",
         "@11ty/eleventy-navigation": "^0.3.2",
         "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.2",
+        "@babel/core": "^7.17.5",
+        "@babel/preset-env": "^7.16.11",
+        "@babel/preset-react": "^7.16.7",
+        "babel-loader": "^8.2.3",
+        "cross-env": "^7.0.3",
+        "css-loader": "^6.7.1",
         "dom-parser": "^0.1.6",
+        "express": "^4.17.3",
         "imagemin": "^8.0.1",
         "imagemin-cli": "^7.0.0",
+        "morgan": "^1.10.0",
+        "node-polyfill-webpack-plugin": "^1.1.4",
         "node-sass": "^6.0.1",
         "npm-run-all": "^4.1.5",
+        "regenerator-runtime": "^0.13.5",
         "rimraf": "^3.0.2",
-        "sass": "^1.38.0"
+        "sass": "^1.38.0",
+        "sass-loader": "^12.6.0",
+        "style-loader": "^3.3.1",
+        "webpack": "^5.70.0",
+        "webpack-cli": "^4.9.2"
+    },
+    "dependencies": {
+        "@codemirror/highlight": "^0.19.7",
+        "@codemirror/history": "^0.19.2",
+        "@codemirror/lang-javascript": "^0.19.7",
+        "@codemirror/matchbrackets": "^0.19.4",
+        "@codemirror/state": "^0.19.9",
+        "@codemirror/view": "^0.19.47",
+        "@codemirror/tooltip": "^0.19.16",
+        "@uiw/react-codemirror": "^4.5.1",
+        "crelt": "^1.0.5",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "react-select": "^5.2.2"
     }
 }

src/_includes/layouts/base.njk

@@ -4,8 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <!-- SEO -->
     <title>{{ title }}</title>
     <meta name="description" content="{{ desc }}">