Init project.

.github/workflows/ci.yml

@@ -0,0 +1,54 @@
+name: Build & Deploy
+on:
+  push:
+    branches:
+      - main
+
+env:
+  SKIP_PREFLIGHT_CHECK: true
+
+jobs:
+  build-deploy:
+    runs-on: ubuntu-18.04
+    steps:
+    - uses: actions/checkout@v2
+    - uses: actions/setup-node@v2
+      with:
+        node-version: 14
+
+    - run: npm install
+    - run: npm run build
+    - run: npm run test:coverage
+
+    - name: Create Tag
+      id: create_tag
+      uses: jaywcjlove/create-tag-action@v1.2.0
+      with:
+        token: ${{ secrets.GITHUB_TOKEN }}
+        package-path: ./package.json
+
+    - name: Generate Changelog
+      id: changelog
+      uses: jaywcjlove/changelog-generator@v1.4.2
+      with:
+        token: ${{ secrets.GITHUB_TOKEN }}
+        head-ref: ${{steps.create_tag.outputs.version}}
+        filter-author: (jaywcjlove|小弟调调™|dependabot\[bot\]|Renovate Bot)
+        filter: '[R|r]elease[d]\s+[v|V]\d(\.\d+){0,2}'
+
+    - name: Deploy
+      uses: peaceiris/actions-gh-pages@v3
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        publish_dir: ./build
+
+    - name: Create Release
+      uses: ncipollo/release-action@v1
+      if: steps.create_tag.outputs.successful
+      with:
+        token: ${{ secrets.GITHUB_TOKEN }}
+        name: ${{ steps.create_tag.outputs.version }}
+        tag: ${{ steps.create_tag.outputs.version }}
+        body: |
+          ${{ steps.changelog.outputs.compareurl }}
+          ${{ steps.changelog.outputs.changelog }}

.gitignore

@@ -0,0 +1,18 @@
+build
+coverage
+node_modules
+npm-debug.log*
+package-lock.json
+.eslintcache
+.DS_Store
+.cache
+.vscode
+
+*.lerna_backup
+*.log
+*.bak
+*.tem
+*.temp
+#.swp
+*.*~
+~*.*

.kktrc.ts

@@ -0,0 +1,15 @@
+import webpack, { Configuration } from 'webpack';
+import lessModules from '@kkt/less-modules';
+import { LoaderConfOptions } from 'kkt';
+import pkg from './package.json';
+
+export default (conf: Configuration, env: 'development' | 'production', options: LoaderConfOptions) => {
+  conf = lessModules(conf, env, options);
+  // Get the project version.
+  conf.plugins!.push(
+    new webpack.DefinePlugin({
+      VERSION: JSON.stringify(pkg.version),
+    }),
+  );
+  return conf;
+};

.prettierignore

@@ -0,0 +1,11 @@
+**/*.md
+**/*.svg
+**/*.ejs
+**/*.html
+package.json
+dist
+build
+website/web/build
+lib
+coverage
+node_modules

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 130,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": { "parser": "json" }
+    }
+  ]
+}

README.md

@@ -0,0 +1,7 @@
+[`Keycode Info`](https://uiwjs.github.io/keycode-info)
+
+JavaScript Keycodes of KeyboardEvent
+
+https://uiwjs.github.io/keycode-info
+
+A simple web page that responds to the pressed key and returns information about the JavaScript'on-key press' key.

package.json

@@ -0,0 +1,61 @@
+{
+  "name": "keycode-info",
+  "homepage": "https://uiwjs.github.io/keycode-info",
+  "version": "1.0.0",
+  "description": "A simple web page that responds to the pressed key and returns information about the JavaScript'on-key press' key.",
+  "private": true,
+  "scripts": {
+    "start": "kkt start",
+    "build": "kkt build",
+    "test": "kkt test --env=jsdom",
+    "test:coverage": "kkt test --env=jsdom --coverage",
+    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kktjs/kkt.git"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@uiw/react-copy-to-clipboard": "4.9.1",
+    "@uiw/react-github-corners": "1.4.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-json-view": "1.21.3"
+  },
+  "devDependencies": {
+    "@kkt/less-modules": "6.10.4",
+    "@types/jest": "26.0.23",
+    "@types/react": "17.0.11",
+    "@types/react-dom": "17.0.8",
+    "kkt": "6.10.4",
+    "prettier": "2.3.2"
+  },
+  "jest": {
+    "testMatch": [
+      "<rootDir>/src/**/*.test.{ts,tsx}"
+    ],
+    "collectCoverageFrom": [
+      "<rootDir>/src/app/*.{tsx,ts}"
+    ]
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

public/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+  <meta name="description" content="A simple web page that responds to the pressed key and returns information about the JavaScript'on-key press' key." />
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<title>Keycode Info</title>
+</head>
+
+<body>
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+  <div id="root"></div>
+</body>
+
+</html>

src/app/App.css

@@ -0,0 +1,73 @@
+.App {
+  text-align: center;
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: white;
+}
+
+.help, .json-view {
+  display: inline-block;
+  color: #f2f4f8;
+  text-decoration: none;
+  text-align: center;
+  margin: 20px auto;
+  padding: 15px 20px;
+  background: rgb(0 0 0 / 15%);
+  border-radius: 5px;
+  min-width: 24px;
+}
+.help {
+  font-size: 26px;
+  box-shadow: 0 14px 26px rgb(0 0 0 / 4%);
+}
+
+.json-view {
+  text-align: initial;
+  min-width: 320px;
+  font-size: 16px;
+  background-color: rgb(43, 48, 59);
+}
+
+.key-which {
+  font-size: 40vmin;
+  text-align: center;
+}
+.keyboard {
+  color: #333;
+}
+.keyboard > span + span {
+  margin-left: 10px;
+  display: inline-block;
+}
+.keyboard .copied kbd {
+  background: #03a132;
+}
+.keyboard kbd {
+  display: inline-block;
+  background: #eff0f2;
+  border-radius: 3px;
+  padding: 5px 10px;
+  border-top: 1px solid #f5f5f5;
+  box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333;
+  text-shadow: 0px 1px 0px #f5f5f5;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.3s;
+}
+
+.copied-info {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  background-color: #03a132;
+  color: #fff;
+  padding: 2px 5px;
+  border-radius: 2px;
+}

src/app/App.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { render, fireEvent } from '@testing-library/react';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
+
+it('MDEditor commands code `ctrlcmd+j`', async () => {
+  const { getByTitle } = render(<App />);
+  // const input = getByTitle('test');
+  fireEvent.keyDown(document, { key: 'J', code: 'KeyJ', ctrlKey: true, shiftKey: true });
+  // expect(handleChange).toHaveReturnedWith('```\nHello\n```');
+});