Merge pull request #8 from geekdada/dev

Author: geekdada

.github/workflows/ci.yml

@@ -14,7 +14,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node-version: [12]
+        node-version: [14]
 
     steps:
     - uses: actions/checkout@v1
@@ -40,7 +40,7 @@ jobs:
 
     - name: test, report coverage
       run: |
-        yarn test
+        yarn verify-translation
         yarn test:coverage
 
     - uses: codecov/codecov-action@v1

.github/workflows/release.yml

@@ -11,7 +11,7 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node-version: [12]
+        node-version: [14]
 
     steps:
       - uses: actions/checkout@v1
@@ -32,15 +32,9 @@ jobs:
             ${{ runner.OS }}-
 
       - name: yarn install, build, bundle
-        env:
-          REACT_APP_SHOW_AD: true
-          REACT_APP_HASH_ROUTER: true
         run: |
           yarn install
-          CI=false yarn build
-          sed -i 's/"\/home"/"\/#home"/g' build/manifest.json
-          sed -i 's/<script src=\"https:\/\/polyfill.alicdn.com\/modern\/polyfill.min.js\" crossorigin=\"anonymous\"><\/script>//g' build/index.html
-          tar -czf build.tar.gz ./build
+          CI=false yarn build:release
 
       - name: Upload Release Asset
         id: upload-release-asset

.gitignore

@@ -12,6 +12,8 @@
 
 # production
 /build
+/build.tar.gz
+/yasd.tar.gz
 
 # misc
 .DS_Store

.nvmrc

@@ -1 +1 @@
-12
+14

README.md

@@ -4,9 +4,7 @@
   </a>
 </p>
 
-# Yet Another Surge Dashboard
-
-> STILL IN ALPHA
+# Surge Web Dashboard (formerly YASD)
 
 ![Github Actions][github-actions-image]
 [![Test coverage][codecov-image]][codecov-url]
@@ -23,36 +21,28 @@
 
 [中文](/README_zh-CN.md) | [English](/README.md)
 
-## What is YASD?
+## What is Surge Web Dashboard?
+
+We are happy to announce Surge Web Dashboard (formerly YASD) has joined Surge! This project will remain open-source and active.
 
-Starts from Surge iOS 4.4.0 and Surge Mac 4.0.0, you may use [HTTP API](https://manual.nssurge.com/others/http-api.html) to control Surge. YASD provides a way to interact with Surge's HTTP API, enabling you to control Surge from another device or outside your house.
+Starting from Surge iOS 4.4.0 and Surge Mac 4.0.0, Surge added support for [HTTP API](https://manual.nssurge.com/others/http-api.html), which makes it possible to control Surge from a browser.
 
-YASD isn't in its final shape, so please be patient if you find anything you aren't happy with 😎.
+You can use Surge Web Dashboard to control policies, inspect requests and more from another device!
 
 ## How-to
 
-Right now, Surge doesn't support HTTPS API endpoints, so it's almost impossible to use HTTPS. If you find a way to proxy the HTTP API with HTTPS, you will be able to take advantages of many useful features such as the PWA.
+Surge has Surge Web Dashboard built in now, you can turn it on in advance settings (it may require a subscription to activate built-in Surge Web Dashboard).
 
-We provide both HTTP and HTTPS website:
+We also provide standalone version, so you can manage all Surge instances at one place (it may require a subscription to activate HTTP API).
 
 - [HTTP](http://yasd.nerdynerd.org)
 - [HTTPS](https://yasd.royli.dev)
 
 You can also find the full bundle in [releases](https://github.com/geekdada/yasd/releases) and deploy yourself.
 
-## Known issues
-
-- Error handling isn't ideal, try reloading if anything snaps.
-- i18n hasn't been implemented yet (0%), my apology to those who can't read Chinese or English.
-
 ## Roadmap
 
-- [x] Better PWA support
-- [ ] i18n
-- [x] Manage and inspect requests
-- [x] Write and debug scripts
-- [ ] Manage DHCP devices
-- [ ] Full unit and e2e tests
+See [Roadmap](https://github.com/geekdada/yasd/projects/1)
 
 ## License
 

README_zh-CN.md

@@ -1,6 +1,10 @@
-# YASD - Yet Another Surge Dashboard
+<p align="center">
+  <a href="https://github.com/geekdada/yasd">
+    <img width="300" src="public/github-banner.png" alt="logo">
+  </a>
+</p>
 
-> STILL IN ALPHA
+# Surge Web Dashboard (前身为 YASD)
 
 ![Github Actions][github-actions-image]
 [![Test coverage][codecov-image]][codecov-url]
@@ -17,4 +21,31 @@
 
 [中文](/README_zh-CN.md) | [English](/README.md)
 
-还未编撰
+## 什么是 Surge Web Dashboard？
+
+我们很高兴地宣布 Surge Web Dashboard（前身为 YASD）已加入 Surge！这个项目将保持开源和活跃开发维护。
+
+从 Surge i0S 4.4.0 和Surge Mac 4.0.0 开始，Surge 增加了对 [HTTP API](https://manual.nssurge.com/others/http-api.html) 的支持，这使得从浏览器控制 Surge 成为可能。
+
+您可以使用 Surge Web Dashboard 从另一台设备上控制策略、检查请求等！
+
+## 如何使用本项目
+
+新版本的 Surge 已经内建 Surge Web Dashboard， 又可以在高级设置中将其打开。
+
+内建的 Surge Web Dashboard 可能需要您拥有一个有效中的订阅才能开启，但是使用公开的独立版本（见后）则不受此限制。
+
+公开的独立版本地址如下。你可以通过这个版本的 Surge Web Dashboard 管理多个 Surge 实例。
+
+- [HTTP](http://yasd.nerdynerd.org)
+- [HTTPS](https://yasd.royli.dev)
+
+你也可以在 [releases](https://github.com/geekdada/yasd/releases) 找到完整应用包自主部署。
+
+## 路线图
+
+见 [路线图](https://github.com/geekdada/yasd/projects/1)
+
+## License
+
+[MIT](https://github.com/geekdada/yasd/blob/master/LICENSE)

package.json

@@ -5,16 +5,19 @@
   "license": "MIT",
   "scripts": {
     "start": "craco start",
-    "build": "NODE_ENV=production craco build",
+    "build": "zx scripts/build.mjs release-vercel",
+    "build:release": "zx scripts/build.mjs release-ci",
+    "build:surge": "zx scripts/build.mjs surge",
     "test": "craco test --watchAll=false",
     "test:watch": "craco test",
     "test:coverage": "craco test --coverage --runInBand --watchAll=false",
-    "test:lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "test:lint": "eslint . --ext .mjs,.js,.jsx,.ts,.tsx",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
     "pub": "np --no-publish",
     "version": "npm run changelog && git add .",
     "snyk-protect": "snyk protect",
-    "prepare": "npm run snyk-protect && husky install"
+    "prepare": "npm run snyk-protect && husky install",
+    "verify-translation": "zx scripts/verify-translations.mjs"
   },
   "dependencies": {
     "@commitlint/cli": "^12.0.1",
@@ -38,10 +41,11 @@
     "@types/chart.js": "^2.9.27",
     "@types/enzyme": "^3.10.7",
     "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/fs-extra": "^9.0.11",
     "@types/jest": "^26.0.15",
     "@types/loadable__component": "^5.13.0",
     "@types/lodash-es": "^4.17.3",
-    "@types/node": "^12.0.0",
+    "@types/node": "^14.0.0",
     "@types/react": "^17.0.3",
     "@types/react-collapse": "^5.0.0",
     "@types/react-dom": "^17.0.3",
@@ -53,6 +57,7 @@
     "@typescript-eslint/eslint-plugin": "^4.5.0",
     "@typescript-eslint/parser": "^4.5.0",
     "autoprefixer": "^9.8.6",
+    "await-to-js": "^3.0.0",
     "axios": "^0.21.0",
     "bluebird": "^3.7.2",
     "bytes": "^3.1.0",
@@ -70,8 +75,14 @@
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "fs-extra": "^10.0.0",
     "husky": "^5.2.0",
+    "i18next": "^20.3.1",
+    "i18next-chained-backend": "^3.0.2",
+    "i18next-http-backend": "^1.2.6",
+    "i18next-resources-to-backend": "^1.0.0",
     "identity-obj-proxy": "^3.0.0",
+    "is-ip": "^3.1.0",
     "lint-staged": "^10.4.0",
     "lodash-es": "^4.17.15",
     "modern-normalize": "^1.0.0",
@@ -88,12 +99,15 @@
     "react-collapse": "^5.0.1",
     "react-dom": "^17.0.1",
     "react-ga": "^3.1.2",
+    "react-hook-form": "^7.8.4",
+    "react-i18next": "^11.10.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "react-scroll-to": "^3.0.0-beta.6",
     "react-tabs": "^3.1.1",
     "react-toastify": "^7.0.3",
     "react-virtualized": "^9.22.2",
+    "rimraf": "^3.0.2",
     "semver": "^7.3.2",
     "smoothscroll-polyfill": "^0.4.4",
     "snyk": "^1.511.0",
@@ -104,7 +118,8 @@
     "twin.macro": "^1.11.1",
     "typescript": "^4.0.3",
     "use-is-in-viewport": "^1.0.9",
-    "uuid": "^8.3.0"
+    "uuid": "^8.3.0",
+    "zx": "^1.11.0"
   },
   "browserslist": {
     "production": [
@@ -127,10 +142,10 @@
     }
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx}": "eslint --ext .js,.jsx,.ts,.tsx"
+    "*.{js,jsx,ts,tsx}": "eslint --ext .mjs,.js,.jsx,.ts,.tsx"
   },
   "engines": {
-    "node": ">=12.0.0"
+    "node": "^14"
   },
   "snyk": true
 }

public/apple-touch-icon-120x120.png

@@ -6,15 +6,17 @@
     <meta name="theme-color" content="#f6f9fb" />
     <meta
       name="description"
-      content="Yet Another Surge Dashboard"
+      content="Surge Web Dashboard"
     />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon-120x120.png" sizes="120x120">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon-152x152.png" sizes="152x152">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon-180x180.png" sizes="180x180">
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <script src="https://polyfill.alicdn.com/modern/polyfill.min.js" crossorigin="anonymous"></script>
-    <title>YASD - Yet Another Surge Dashboard</title>
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="dark-content">
+    <meta name="format-detection" content="telephone=no">
+    <title>Surge Web Dashboard</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

public/apple-touch-icon-152x152.png

@@ -0,0 +1,98 @@
+/* global $ */
+
+import fs from 'fs-extra'
+
+await (async () => {
+  const { argv } = process
+  const target = argv[3]
+  const validTargets = ['release-vercel', 'release-ci', 'surge']
+
+  if (!validTargets.includes(target)) {
+    throw new Error('Invalid build target.')
+  }
+
+  await $`yarn verify-translation`
+  await clean()
+  console.info('🚧  Build artifact')
+
+  switch (target) {
+    case 'release-vercel':
+      process.env.NODE_ENV = 'production'
+      process.env.REACT_APP_USE_SW = 'true'
+      await $`craco build`
+
+      break
+
+    case 'release-ci':
+      process.env.NODE_ENV = 'production'
+      process.env.REACT_APP_SHOW_AD = 'true'
+      process.env.REACT_APP_HASH_ROUTER = 'true'
+      process.env.REACT_APP_USE_SW = 'true'
+      process.env.PUBLIC_URL = getUrlPathPrefix()
+      await $`craco build`
+      await changeManifest({
+        start_url: `${getUrlPathPrefix()}/#/home`,
+      })
+      await bundleArtifact()
+
+      break
+
+    case 'surge':
+      process.env.NODE_ENV = 'production'
+      process.env.REACT_APP_HASH_ROUTER = 'true'
+      process.env.REACT_APP_RUN_IN_SURGE = 'true'
+      process.env.REACT_APP_URL_PATH_PREFIX = '/web'
+      process.env.PUBLIC_URL = getUrlPathPrefix()
+      await $`craco build`
+      await changeManifest({
+        short_name: 'Dashboard',
+        name: 'Surge Web Dashboard',
+        start_url: `${getUrlPathPrefix()}/index.html#/home`,
+      })
+      await bundleArtifact()
+      await $`mv ./build.tar.gz ./yasd.tar.gz`
+
+      break
+
+    default:
+      process.env.NODE_ENV = 'production'
+      process.env.REACT_APP_USE_SW = 'true'
+      process.env.PUBLIC_URL = getUrlPathPrefix()
+      await $`craco build`
+
+      if ('REACT_APP_HASH_ROUTER' in process.env) {
+        await changeManifest({
+          start_url: `${getUrlPathPrefix()}/#/home`,
+        })
+      }
+  }
+})()
+
+async function changeManifest(obj = {}) {
+  const manifest = await fs.readJson('build/manifest.json')
+
+  await fs.writeJSON(
+    'build/manifest.json',
+    {
+      ...manifest,
+      ...obj,
+    },
+    { spaces: 2 },
+  )
+}
+
+async function bundleArtifact() {
+  await $`(cd ./build; tar -czf ../build.tar.gz ./)`
+}
+
+async function clean() {
+  console.info('🧹  Clean up')
+  await $`rimraf ./build`
+  await $`rimraf ./*.tar.gz`
+}
+
+function getUrlPathPrefix() {
+  return 'REACT_APP_URL_PATH_PREFIX' in process.env
+    ? process.env.REACT_APP_URL_PATH_PREFIX
+    : ''
+}