Fix GoReleaser config, update moq dep

Bumps [ini](https://github.com/isaacs/ini) from 1.3.5 to 1.3.8.
- [Release notes](https://github.com/isaacs/ini/releases)
- [Commits](https://github.com/isaacs/ini/compare/v1.3.5...v1.3.8)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.dockerignore

@@ -1,5 +1,8 @@
-**/rice-box.go
 /admin/.env
 /admin/.next
 /admin/dist
-/admin/node_modules
+/admin/node_modules
+/dist
+/docs
+/hetty
+/cmd/hetty/admin

.github/workflows/build-test.yml

@@ -0,0 +1,52 @@
+name: Build and Test
+on: [push, pull_request]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        go: ["1.17", "1.16"]
+    name: Go ${{ matrix.go }} - Build
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-go@v2
+        with:
+          go-version: ${{ matrix.go }}
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "14"
+      - uses: actions/cache@v2
+        with:
+          path: |
+            ~/.cache/go-build
+            ~/go/pkg/mod
+          key: ${{ runner.os }}-go-${{ hashFiles('**/go.sum') }}
+          restore-keys: |
+            ${{ runner.os }}-go-
+      - uses: actions/cache@v2
+        with:
+          path: ${{ github.workspace }}/admin/.next/cache
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
+      - run: make build
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        go: ["1.17", "1.16"]
+    name: Go ${{ matrix.go }} - Test
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-go@v2
+        with:
+          go-version: ${{ matrix.go }}
+      - uses: actions/cache@v2
+        with:
+          path: |
+            ~/.cache/go-build
+            ~/go/pkg/mod
+          key: ${{ runner.os }}-go-${{ hashFiles('**/go.sum') }}
+          restore-keys: |
+            ${{ runner.os }}-go-
+      - run: go test ./pkg/...

.github/workflows/build_run.yml

@@ -1,31 +0,0 @@
-name: Build Frontend, Backend  and Run
-
-on: [pull_request]
-
-jobs:
-  build:
-    name: Build Images and Deploy Example WebApp
-    runs-on: ubuntu-20.04
-
-    steps:
-    - name: Checkout
-      uses: actions/checkout@v2
-      with:
-        submodules: true
-
-    - name: Test Yarn
-      uses:
-        node_version: '14.x'
-      run: |-
-        cd admin && \
-        yarn install && \
-        yarn export
-
-    - name: Test make
-      run: |-
-        cd .. && \
-        make build 
-
-    - name: Run
-      run: |-
-        ./hetty

.github/workflows/dockerimage.yml

@@ -1,14 +0,0 @@
-name: Docker Image CI
-
-on: [pull_request]
-
-jobs:
-
-  build:
-
-    runs-on: ubuntu-latest
-
-    steps:
-    - uses: actions/checkout@v2
-    - name: Build the Docker image
-      run: docker build . --file Dockerfile --tag hetty:$(date +%s)

.github/workflows/go.yml

@@ -1,24 +0,0 @@
-name: Go
-on: [pull_request]
-jobs:
-
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-    steps:
-
-    - name: Set up Go 1.15
-      uses: actions/setup-go@v1
-      with:
-        go-version: 1.15
-      id: go
-
-    - name: Check out code into the Go module directory
-      uses: actions/checkout@v2
-
-    - name: Get dependencies
-      run: |
-        go get -v -t -d ./...
-
-    - name: Build
-      run: go build -v ./cmd/hetty

.gitignore

@@ -1,10 +1,6 @@
-.release-env
-.vscode
-**/rice-box.go
-sqlite3_mod_regexp.dylib
-dist
-hetty
-hetty.bolt
-hetty.db
+/.vscode
+/dist
+/hetty
+/cmd/hetty/admin
 *.pem
-*.test
+*.test

.golangci.yml

@@ -0,0 +1,48 @@
+linters:
+  presets:
+    - bugs
+    - comment
+    - error
+    - format
+    - import
+    - metalinter
+    - module
+    - performance
+    - style
+    - test
+    - unused
+  disable:
+    - exhaustive
+    - exhaustivestruct
+    - gochecknoglobals
+    - gochecknoinits
+    - godox
+    - goerr113
+    - gomnd
+    - interfacer
+    - maligned
+    - nlreturn
+    - scopelint 
+    - testpackage
+    - wrapcheck
+
+linters-settings:
+  gci:
+    local-prefixes: github.com/dstotijn/hetty
+  godot:
+    capital: true
+    
+issues:
+  exclude-rules:
+    - linters:
+      - gosec
+      # Ignore SHA1 usage.
+      text: "G(401|505):"
+    - linters:
+      - wsl
+      # Ignore cuddled defer statements.
+      text: "only one cuddle assignment allowed before defer statement"
+    - linters:
+      - nlreturn
+      # Ignore `break` without leading blank line.
+      text: "break with no blank line before"

.goreleaser.yml

@@ -1,63 +1,39 @@
-env:
-  - GO111MODULE=on
-  - CGO_ENABLED=1
-  - CGO_CFLAGS=-I/go/pkg/mod/github.com/mattn/go-sqlite3@v1.14.4
 before:
   hooks:
     - make clean
-    - make embed
+    - sh -c "NEXT_PUBLIC_VERSION={{ .Version}} make build-admin"
+    - go mod tidy
+
 builds:
-  - id: hetty-darwin-amd64
+  - env:
+      - CGO_ENABLED=0
     main: ./cmd/hetty
-    goarch:
-      - amd64
-    goos:
-      - darwin
-    env:
-      - CC=o64-clang
-      - CXX=o64-clang++
-      - CGO_LDFLAGS=-Wl,-undefined,dynamic_lookup
-    flags:
-      - -mod=readonly
     ldflags:
-  - id: hetty-linux-amd64
-    main: ./cmd/hetty
-    goarch:
-      - amd64
+      - -s -w -X main.version={{.Version}}
     goos:
       - linux
-    env:
-      - CGO_CFLAGS=-I/go/pkg/mod/github.com/mattn/go-sqlite3@v1.14.4
-      - CGO_LDFLAGS=-Wl,--unresolved-symbols=ignore-in-object-files
-    flags:
-      - -mod=readonly
-    ldflags:
-  # - id: hetty-windows-amd64
-  #   main: ./cmd/hetty
-  #   goarch:
-  #     - amd64
-  #   goos:
-  #     - windows
-  #   env:
-  #     - CC=x86_64-w64-mingw32-gcc
-  #     - CXX=x86_64-w64-mingw32-g++
-  #     - CGO_CFLAGS=-I/go/pkg/mod/github.com/mattn/go-sqlite3@v1.14.4
-  #     - CGO_LDFLAGS=-Wl,--unresolved-symbols=ignore-in-object-files # Not working :(
-  #   flags:
-  #     - -mod=readonly
-  #   ldflags:
-  #     - -buildmode=exe
+      - windows
+      - darwin
+    goarch:
+      - amd64
+      - arm64
+
 archives:
   - replacements:
       darwin: macOS
       linux: Linux
       windows: Windows
-      386: i386
       amd64: x86_64
+    format_overrides:
+      - goos: windows
+        format: zip
+
 checksum:
   name_template: "checksums.txt"
+
 snapshot:
-  name_template: "{{ .Tag }}-next"
+  name_template: "{{ incpatch .Version }}-next"
+
 changelog:
   sort: asc
   filters:

Dockerfile

@@ -1,18 +1,6 @@
-ARG GO_VERSION=1.15
-ARG CGO_ENABLED=1
-ARG NODE_VERSION=14.11
-
-FROM golang:${GO_VERSION} AS go-builder
-WORKDIR /app
-RUN apt-get update && \
-    apt-get install -y build-essential
-COPY go.mod go.sum ./
-RUN go mod download
-COPY cmd ./cmd
-COPY pkg ./pkg
-ENV CGO_CFLAGS=-I/go/pkg/mod/github.com/mattn/go-sqlite3@v1.14.4
-ENV CGO_LDFLAGS=-Wl,--unresolved-symbols=ignore-in-object-files
-RUN go build -o hetty ./cmd/hetty
+ARG GO_VERSION=1.17
+ARG NODE_VERSION=16.13
+ARG ALPINE_VERSION=3.15
 
 FROM node:${NODE_VERSION}-alpine AS node-builder
 WORKDIR /app
@@ -22,11 +10,21 @@ COPY admin/ .
 ENV NEXT_TELEMETRY_DISABLED=1
 RUN yarn run export
 
-FROM debian:buster-slim
+FROM golang:${GO_VERSION}-alpine AS go-builder
+ARG HETTY_VERSION=0.0.0
+ENV CGO_ENABLED=0
+WORKDIR /app
+COPY go.mod go.sum ./
+RUN go mod download
+COPY cmd ./cmd
+COPY pkg ./pkg
+COPY --from=node-builder /app/dist ./cmd/hetty/admin
+RUN go build -ldflags="-s -w -X main.version=${HETTY_VERSION}" ./cmd/hetty
+
+FROM alpine:${ALPINE_VERSION}
 WORKDIR /app
 COPY --from=go-builder /app/hetty .
-COPY --from=node-builder /app/dist admin
 
-ENTRYPOINT ["./hetty", "-adminPath=./admin"]
+ENTRYPOINT ["./hetty"]
 
 EXPOSE 8080

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 David Stotijn
+Copyright (c) 2021 David Stotijn
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

Makefile

@@ -1,46 +1,21 @@
-PACKAGE_NAME := github.com/dstotijn/hetty
-GOLANG_CROSS_VERSION ?= v1.15.2
+export CGO_ENABLED = 0
+export NEXT_TELEMETRY_DISABLED = 1
 
-setup:
-	go mod download
-	go generate ./...
-.PHONY: setup
-
-embed:
-	go install github.com/GeertJohan/go.rice/rice
-	cd cmd/hetty && rice embed-go
-.PHONY: embed
-
-build: embed
-	env CGO_ENABLED=1 CGO_CFLAGS="-DUSE_LIBSQLITE3" CGO_LDFLAGS="-Wl,-undefined,dynamic_lookup" \
-		go build -tags libsqlite3 ./cmd/hetty
-.PHONY: build
-
-clean:
-	rm -rf cmd/hetty/rice-box.go
 .PHONY: clean
+clean:
+	rm -f hetty
+	rm -rf ./cmd/hetty/admin
+	rm -rf ./admin/node_modules
+	rm -rf ./admin/dist
+	rm -rf ./admin/.next
 
-release-dry-run:
-	@docker run \
-		--rm \
-		-v `pwd`:/go/src/$(PACKAGE_NAME) \
-		-v `pwd`/admin/dist:/go/src/$(PACKAGE_NAME)/admin/dist \
-		-w /go/src/$(PACKAGE_NAME) \
-		troian/golang-cross:${GOLANG_CROSS_VERSION} \
-		--rm-dist --skip-validate --skip-publish
-.PHONY: release-dry-run
+.PHONY: build-admin
+build-admin:
+	cd admin && \
+	yarn install --frozen-lockfile && \
+	yarn run export && \
+    mv dist ../cmd/hetty/admin
 
-release:
-	@if [ ! -f ".release-env" ]; then \
-		echo "\033[91mFile \`.release-env\` is missing.\033[0m";\
-		exit 1;\
-	fi
-	@docker run \
-		--rm \
-		-v `pwd`:/go/src/$(PACKAGE_NAME) \
-		-v `pwd`/admin/dist:/go/src/$(PACKAGE_NAME)/admin/dist \
-		-w /go/src/$(PACKAGE_NAME) \
-		--env-file .release-env \
-		troian/golang-cross:${GOLANG_CROSS_VERSION} \
-		release --rm-dist
-.PHONY: release
+.PHONY: build
+build: build-admin
+	go build ./cmd/hetty

README.md

@@ -1,70 +1,94 @@
-<img src="https://i.imgur.com/AT71SBq.png" width="346" />
+<h1>
+  <a href="https://github.com/dstotijn/hetty">
+    <img src="https://hetty.xyz/assets/logo.png" width="293">
+  </a>
+</h1>
 
-> Hetty is an HTTP toolkit for security research. It aims to become an open source
-> alternative to commercial software like Burp Suite Pro, with powerful features
-> tailored to the needs of the infosec and bug bounty community.
+[![Latest GitHub release](https://img.shields.io/github/v/release/dstotijn/hetty?color=18BA91&style=flat-square)](https://github.com/dstotijn/hetty/releases/latest)
+[![Build Status](https://img.shields.io/endpoint.svg?url=https://actions-badge.atrox.dev/dstotijn/hetty/badge&style=flat-square&label=build+%26+test&logo=none&color=18BA91)](https://github.com/dstotijn/hetty/actions/workflows/build-test.yml)
+![GitHub download count](https://img.shields.io/github/downloads/dstotijn/hetty/total?color=18BA91&style=flat-square)
+[![GitHub](https://img.shields.io/github/license/dstotijn/hetty?color=18BA91&style=flat-square)](https://github.com/dstotijn/hetty/blob/master/LICENSE)
+[![Documentation](https://img.shields.io/badge/hetty-docs-18BA91?style=flat-square)](https://hetty.xyz/)
 
-<img src="https://i.imgur.com/ZZ6o83X.png">
+**Hetty** is an HTTP toolkit for security research. It aims to become an open
+source alternative to commercial software like Burp Suite Pro, with powerful
+features tailored to the needs of the infosec and bug bounty community.
 
-## Features/to do
+<img src="https://hetty.xyz/assets/hetty_v0.2.0_header.png">
 
-- [x] HTTP man-in-the-middle (MITM) proxy and GraphQL server.
-- [x] Web interface (Next.js) with proxy log viewer.
-- [x] Add scope support to the proxy.
-- [ ] Full text search (with regex) in proxy log viewer.
-- [x] Project management.
-- [ ] Sender module for sending manual HTTP requests, either from scratch or based
-      off requests from the proxy log.
-- [ ] Attacker module for automated sending of HTTP requests. Leverage the concurrency
-      features of Go and its `net/http` package to make it blazingly fast.
+## Features
+
+- Man-in-the-middle (MITM) HTTP/1.1 proxy with logs
+- Project based database storage (SQLite)
+- Scope support
+- Headless management API using GraphQL
+- Embedded web interface (Next.js)
+
+ℹ️ Hetty is in early development. Additional features are planned
+for a `v1.0` release. Please see the <a href="https://github.com/dstotijn/hetty/projects/1">backlog</a>
+for details.
+
+## Documentation
+
+📖 [Read the docs.](https://hetty.xyz/)
 
 ## Installation
 
-Hetty is packaged on GitHub as a single binary, with the web interface resources
-embedded.
+Hetty compiles to a self-contained binary, with an embedded BadgerDB database
+and web based admin interface.
 
-👉 You can find downloads for Linux, macOS and Windows on the [releases page](https://github.com/dstotijn/hetty/releases).
+### Install pre-built release (recommended)
 
-### Alternatives:
+👉 Downloads for Linux, macOS and Windows are available on the [releases page](https://github.com/dstotijn/hetty/releases).
 
-**Build from source**
+### Build from source
+
+#### Prerequisites
+
+- [Go 1.16](https://golang.org/)
+- [Yarn](https://yarnpkg.com/)
+
+When building from source, the static resources for the admin interface
+(Next.js) need to be generated via [Yarn](https://yarnpkg.com/). The generated
+files will be embedded (using the [embed](https://golang.org/pkg/embed/)
+package) when you use the `build` Makefile target.
+
+Clone the repository and use the `build` make target to create a binary:
 
 ```
-$ GO111MODULE=auto go get -u -v github.com/dstotijn/hetty/cmd/hetty
+$ git clone git@github.com:dstotijn/hetty.git
+$ cd hetty
+$ make build
 ```
 
-Then export the Next.js frontend app:
+### Docker
+
+A Docker image is available on Docker Hub: [`dstotijn/hetty`](https://hub.docker.com/r/dstotijn/hetty).
+For persistent storage of CA certificates and projects database, mount a volume:
 
 ```
-$ cd admin
-$ yarn install
-$ yarn export
-```
-
-This will ensure a folder `./admin/dist` exists.
-Then, you can bundle the frontend app using `rice`.
-The easiest way to do this is via a supplied `Makefile` command in the root of
-the project:
-
-```
-make build
-```
-
-**Docker**
-
-Alternatively, you can run Hetty via Docker. See: [`dstotijn/hetty`](https://hub.docker.com/r/dstotijn/hetty)
-on Docker Hub.
-
-```
-$ docker run -v $HOME/.hetty:/root/.hetty -p 127.0.0.1:8080:8080 dstotijn/hetty
+$ mkdir -p $HOME/.hetty
+$ docker run -v $HOME/.hetty:/root/.hetty -p 8080:8080 dstotijn/hetty
 ```
 
 ## Usage
 
-Hetty is packaged as a single binary, with the web interface resources embedded.
-When the program is run, it listens by default on `:8080` and is accessible via
+When Hetty is run, by default it listens on `:8080` and is accessible via
 http://localhost:8080. Depending on incoming HTTP requests, it either acts as a
-MITM proxy, or it serves the GraphQL API and web interface (Next.js).
+MITM proxy, or it serves the API and web interface.
+
+By default, the projects database files and CA certificates are stored in a `.hetty`
+directory under the user's home directory (`$HOME` on Linux/macOS, `%USERPROFILE%`
+on Windows).
+
+To start, ensure `hetty` (downloaded from a release, or manually built) is in your
+`$PATH` and run:
+
+```
+$ hetty
+```
+
+An overview of configuration flags:
 
 ```
 $ hetty -h
@@ -74,13 +98,23 @@ Usage of ./hetty:
   -adminPath string
         File path to admin build
   -cert string
-        CA certificate filepath. Creates a new CA certificate is file doesn't exist (default "~/.hetty/hetty_cert.pem")
+        CA certificate filepath. Creates a new CA certificate if file doesn't exist (default "~/.hetty/hetty_cert.pem")
   -key string
         CA private key filepath. Creates a new CA private key if file doesn't exist (default "~/.hetty/hetty_key.pem")
-  -projects string
-        Projects directory path (default "~/.hetty/projects")
+  -db string
+        Database directory path (default "~/.hetty/db")
 ```
 
+You should see:
+
+```
+2022/01/26 10:34:24 [INFO] Hetty (v0.3.2) is running on :8080 ...
+```
+
+Then, visit [http://localhost:8080](http://localhost:8080) to get started.
+
+ℹ️ Detailed documentation is under development and will be available soon.
+
 ## Certificate Setup and Installation
 
 In order for Hetty to proxy requests going to HTTPS endpoints, a root CA certificate for
@@ -163,39 +197,47 @@ _more information on how to update the system to trust your self-signed certific
 
 ## Vision and roadmap
 
-The project has just gotten underway, and as such I haven’t had time yet to do a
-write-up on its mission and roadmap. A short summary/braindump:
-
 - Fast core/engine, built with Go, with a minimal memory footprint.
-- GraphQL server to interact with the backend.
-- Easy to use web interface, built with Next.js and Material UI.
+- Easy to use admin interface, built with Next.js and Material UI.
+- Headless management, via GraphQL API.
 - Extensibility is top of mind. All modules are written as Go packages, to
-  be used by the main `hetty` program, but also usable as libraries for other software.
-  Aside from the GraphQL server, it should (eventually) be possible to also use
-  it as a CLI tool.
-- Pluggable architecture for the MITM proxy and future modules, making it
-  possible for hook into the core engine.
-- Talk to the community, and focus on the features that the majority.
-  Less features means less code to maintain.
+  be used by Hetty, but also as libraries by other software.
+- Pluggable architecture for MITM proxy, projects, scope. It should be possible.
+  to build a plugin system in the (near) future.
+- Based on feedback and real-world usage of pentesters and bug bounty hunters.
+- Aim for a relatively small core feature set that the majority of security researchers need.
 
-## Status
+## Support
 
-The project is currently under active development. Please star/follow and check
-back soon. 🤗
+Use [issues](https://github.com/dstotijn/hetty/issues) for bug reports and
+feature requests, and [discussions](https://github.com/dstotijn/hetty/discussions)
+for questions and troubleshooting.
+
+## Community
+
+💬 [Join the Hetty Discord server](https://discord.gg/3HVsj5pTFP).
 
 ## Contributing
 
-Please see the [Contribution Guidelines](CONTRIBUTING.md) for details.
+Want to contribute? Great! Please check the [Contribution Guidelines](CONTRIBUTING.md)
+for details.
 
 ## Acknowledgements
 
-Thanks to the [Hacker101 community on Discord](https://www.hacker101.com/discord)
-for all the encouragement to actually start building this thing!
+- Thanks to the [Hacker101 community on Discord](https://www.hacker101.com/discord)
+  for all the encouragement and feedback.
+- The font used in the logo and admin interface is [JetBrains Mono](https://www.jetbrains.com/lp/mono/).
+
+## Sponsors
+
+<a href="https://www.tines.com/?utm_source=oss&utm_medium=sponsorship&utm_campaign=hetty">
+<img src="https://hetty.xyz/assets/tines-sponsorship-badge.png" width="140" alt="Sponsored by Tines">
+</a>
 
 ## License
 
-[MIT](LICENSE)
+[MIT License](LICENSE)
 
 ---
 
-© 2020 David Stotijn — [Twitter](https://twitter.com/dstotijn), [Email](mailto:dstotijn@gmail.com)
+© 2021 David Stotijn — [Twitter](https://twitter.com/dstotijn), [Email](mailto:dstotijn@gmail.com)

admin/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "@next/next/no-css-tags": "off"
+  }
+}

admin/.prettierignore

@@ -0,0 +1,4 @@
+/.next/
+/out/
+/build
+/coverage

admin/.prettierrc.json

@@ -0,0 +1,3 @@
+{
+    "printWidth": 120
+}

admin/next-env.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

admin/next.config.js

@@ -1,7 +1,10 @@
-const withCSS = require("@zeit/next-css");
-const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
+// @ts-check
 
-module.exports = withCSS({
+/**
+ * @type {import('next').NextConfig}
+ **/
+const nextConfig = {
+  reactStrictMode: true,
   trailingSlash: true,
   async rewrites() {
     return [
@@ -11,24 +14,6 @@ module.exports = withCSS({
       },
     ];
   },
-  webpack: (config) => {
-    config.module.rules.push({
-      test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
-      use: {
-        loader: "url-loader",
-        options: {
-          limit: 100000,
-        },
-      },
-    });
+};
 
-    config.plugins.push(
-      new MonacoWebpackPlugin({
-        languages: ["html", "json", "javascript"],
-        filename: "static/[name].worker.js",
-      })
-    );
-
-    return config;
-  },
-});
+module.exports = nextConfig;

admin/package.json

@@ -6,31 +6,38 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "export": "rm -rf .next && next build && next export -o dist"
+    "lint": "next lint",
+    "export": "next build && next export -o dist"
   },
   "dependencies": {
     "@apollo/client": "^3.2.0",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "^4.0.0-alpha.56",
-    "@zeit/next-css": "^1.0.1",
-    "graphql": "^15.3.0",
-    "monaco-editor": "^0.20.0",
-    "monaco-editor-webpack-plugin": "^1.9.0",
-    "next": "^9.5.4",
+    "@emotion/react": "^11.7.1",
+    "@emotion/server": "^11.4.0",
+    "@emotion/styled": "^11.6.0",
+    "@monaco-editor/react": "^4.3.1",
+    "@mui/icons-material": "^5.3.1",
+    "@mui/lab": "^5.0.0-alpha.66",
+    "@mui/material": "^5.3.1",
+    "deepmerge": "^4.2.2",
+    "graphql": "^16.2.0",
+    "lodash": "^4.17.21",
+    "monaco-editor": "^0.31.1",
+    "next": "^12.0.8",
     "next-fonts": "^1.0.3",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-monaco-editor": "^0.34.0",
-    "react-syntax-highlighter": "^13.5.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "typescript": "^4.0.3"
   },
   "devDependencies": {
-    "@types/node": "^14.11.1",
-    "@types/react": "^16.9.49",
-    "eslint": "^7.9.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "prettier": "^2.1.2"
+    "@babel/core": "^7.0.0",
+    "@types/lodash": "^4.14.178",
+    "@types/node": "^17.0.12",
+    "@types/react": "^17.0.38",
+    "eslint": "^8.7.0",
+    "eslint-config-next": "12.0.8",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "prettier": "^2.1.2",
+    "webpack": "^5.67.0"
   }
 }

admin/src/components/CenteredPaper.tsx

@@ -1,10 +1,6 @@
-import { Paper } from "@material-ui/core";
+import { Paper } from "@mui/material";
 
-function CenteredPaper({
-  children,
-}: {
-  children: React.ReactNode;
-}): JSX.Element {
+function CenteredPaper({ children }: { children: React.ReactNode }): JSX.Element {
   return (
     <div>
       <Paper

admin/src/components/Layout.tsx

@@ -1,31 +1,31 @@
 import React from "react";
 import {
-  makeStyles,
   Theme,
-  createStyles,
   useTheme,
-  AppBar,
   Toolbar,
   IconButton,
   Typography,
-  Drawer,
   Divider,
   List,
-  ListItem,
-  ListItemIcon,
-  ListItemText,
   Tooltip,
-} from "@material-ui/core";
+  styled,
+  CSSObject,
+  Box,
+  ListItemText,
+} from "@mui/material";
+import MuiAppBar, { AppBarProps as MuiAppBarProps } from "@mui/material/AppBar";
+import MuiDrawer from "@mui/material/Drawer";
+import MuiListItemButton, { ListItemButtonProps } from "@mui/material/ListItemButton";
+import MuiListItemIcon, { ListItemIconProps } from "@mui/material/ListItemIcon";
 import Link from "next/link";
-import MenuIcon from "@material-ui/icons/Menu";
-import HomeIcon from "@material-ui/icons/Home";
-import SettingsEthernetIcon from "@material-ui/icons/SettingsEthernet";
-import SendIcon from "@material-ui/icons/Send";
-import FolderIcon from "@material-ui/icons/Folder";
-import LocationSearchingIcon from "@material-ui/icons/LocationSearching";
-import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
-import ChevronRightIcon from "@material-ui/icons/ChevronRight";
-import clsx from "clsx";
+import MenuIcon from "@mui/icons-material/Menu";
+import HomeIcon from "@mui/icons-material/Home";
+import SettingsEthernetIcon from "@mui/icons-material/SettingsEthernet";
+import SendIcon from "@mui/icons-material/Send";
+import FolderIcon from "@mui/icons-material/Folder";
+import LocationSearchingIcon from "@mui/icons-material/LocationSearching";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 
 export enum Page {
   Home,
@@ -39,85 +39,91 @@ export enum Page {
 
 const drawerWidth = 240;
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: "flex",
-      width: "100%",
-    },
-    appBar: {
-      zIndex: theme.zIndex.drawer + 1,
-      transition: theme.transitions.create(["width", "margin"], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-      }),
-    },
-    appBarShift: {
-      marginLeft: drawerWidth,
-      width: `calc(100% - ${drawerWidth}px)`,
-      transition: theme.transitions.create(["width", "margin"], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.enteringScreen,
-      }),
-    },
-    menuButton: {
-      marginRight: 28,
-    },
-    hide: {
-      display: "none",
-    },
-    drawer: {
-      width: drawerWidth,
-      flexShrink: 0,
-      whiteSpace: "nowrap",
-    },
-    drawerOpen: {
-      width: drawerWidth,
-      transition: theme.transitions.create("width", {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.enteringScreen,
-      }),
-    },
-    drawerClose: {
-      transition: theme.transitions.create("width", {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen,
-      }),
-      overflowX: "hidden",
-      width: theme.spacing(7) + 1,
-      [theme.breakpoints.up("sm")]: {
-        width: theme.spacing(7) + 8,
+const openedMixin = (theme: Theme): CSSObject => ({
+  width: drawerWidth,
+  transition: theme.transitions.create("width", {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.enteringScreen,
+  }),
+  overflowX: "hidden",
+});
+
+const closedMixin = (theme: Theme): CSSObject => ({
+  transition: theme.transitions.create("width", {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  overflowX: "hidden",
+  width: 56,
+});
+
+const DrawerHeader = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  padding: theme.spacing(0, 1),
+  // necessary for content to be below app bar
+  ...theme.mixins.toolbar,
+}));
+
+interface AppBarProps extends MuiAppBarProps {
+  open?: boolean;
+}
+
+const AppBar = styled(MuiAppBar, {
+  shouldForwardProp: (prop) => prop !== "open",
+})<AppBarProps>(({ theme, open }) => ({
+  backgroundColor: theme.palette.secondary.dark,
+  zIndex: theme.zIndex.drawer + 1,
+  transition: theme.transitions.create(["width", "margin"], {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  ...(open && {
+    marginLeft: drawerWidth,
+    width: `calc(100% - ${drawerWidth}px)`,
+    transition: theme.transitions.create(["width", "margin"], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  }),
+}));
+
+const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== "open" })(({ theme, open }) => ({
+  width: drawerWidth,
+  flexShrink: 0,
+  whiteSpace: "nowrap",
+  boxSizing: "border-box",
+  ...(open && {
+    ...openedMixin(theme),
+    "& .MuiDrawer-paper": openedMixin(theme),
+  }),
+  ...(!open && {
+    ...closedMixin(theme),
+    "& .MuiDrawer-paper": closedMixin(theme),
+  }),
+}));
+
+const ListItemButton = styled(MuiListItemButton)<ListItemButtonProps>(({ theme }) => ({
+  [theme.breakpoints.up("sm")]: {
+    px: 1,
+  },
+  "&.MuiListItemButton-root": {
+    "&.Mui-selected": {
+      backgroundColor: theme.palette.primary.main,
+      "& .MuiListItemIcon-root": {
+        color: theme.palette.secondary.dark,
+      },
+      "& .MuiListItemText-root": {
+        color: theme.palette.secondary.dark,
       },
     },
-    toolbar: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "flex-end",
-      padding: theme.spacing(0, 1),
-      // necessary for content to be below app bar
-      ...theme.mixins.toolbar,
-    },
-    content: {
-      flexGrow: 1,
-      padding: theme.spacing(3),
-    },
-    listItem: {
-      paddingLeft: 16,
-      paddingRight: 16,
-      [theme.breakpoints.up("sm")]: {
-        paddingLeft: 20,
-        paddingRight: 20,
-      },
-    },
-    listItemIcon: {
-      minWidth: 42,
-    },
-    titleHighlight: {
-      color: theme.palette.secondary.main,
-      marginRight: 4,
-    },
-  })
-);
+  },
+}));
+
+const ListItemIcon = styled(MuiListItemIcon)<ListItemIconProps>(() => ({
+  minWidth: 42,
+}));
 
 interface Props {
   children: React.ReactNode;
@@ -126,7 +132,6 @@ interface Props {
 }
 
 export function Layout({ title, page, children }: Props): JSX.Element {
-  const classes = useStyles();
   const theme = useTheme();
   const [open, setOpen] = React.useState(false);
 
@@ -138,145 +143,109 @@ export function Layout({ title, page, children }: Props): JSX.Element {
     setOpen(false);
   };
 
+  const SiteTitle = styled("span")({
+    ...(title !== "" && {
+      color: theme.palette.primary.main,
+      marginRight: 4,
+    }),
+  });
+
   return (
-    <div className={classes.root}>
-      <AppBar
-        position="fixed"
-        className={clsx(classes.appBar, {
-          [classes.appBarShift]: open,
-        })}
-      >
+    <Box sx={{ display: "flex" }}>
+      <AppBar position="fixed" open={open}>
         <Toolbar>
           <IconButton
             color="inherit"
-            aria-label="open drawer"
+            aria-label="Open drawer"
             onClick={handleDrawerOpen}
             edge="start"
-            className={clsx(classes.menuButton, {
-              [classes.hide]: open,
-            })}
+            sx={{
+              mr: 5,
+              ...(open && { display: "none" }),
+            }}
           >
             <MenuIcon />
           </IconButton>
-          <Typography variant="h5" noWrap>
-            <span className={title !== "" ? classes.titleHighlight : ""}>
-              Hetty://
-            </span>
-            {title}
-          </Typography>
+          <Box
+            sx={{
+              display: "flex",
+              justifyContent: "space-around",
+              width: "100%",
+            }}
+          >
+            <Typography variant="h5" noWrap sx={{ width: "100%" }}>
+              <SiteTitle>Hetty://</SiteTitle>
+              {title}
+            </Typography>
+            <Box sx={{ flexShrink: 0, pt: 0.75 }}>v{process.env.NEXT_PUBLIC_VERSION || "0.0"}</Box>
+          </Box>
         </Toolbar>
       </AppBar>
-      <Drawer
-        variant="permanent"
-        className={clsx(classes.drawer, {
-          [classes.drawerOpen]: open,
-          [classes.drawerClose]: !open,
-        })}
-        classes={{
-          paper: clsx({
-            [classes.drawerOpen]: open,
-            [classes.drawerClose]: !open,
-          }),
-        }}
-      >
-        <div className={classes.toolbar}>
+      <Drawer variant="permanent" open={open}>
+        <DrawerHeader>
           <IconButton onClick={handleDrawerClose}>
-            {theme.direction === "rtl" ? (
-              <ChevronRightIcon />
-            ) : (
-              <ChevronLeftIcon />
-            )}
+            {theme.direction === "rtl" ? <ChevronRightIcon /> : <ChevronLeftIcon />}
           </IconButton>
-        </div>
+        </DrawerHeader>
         <Divider />
-        <List>
+        <List sx={{ p: 0 }}>
           <Link href="/" passHref>
-            <ListItem
-              button
-              component="a"
-              key="home"
-              selected={page === Page.Home}
-              className={classes.listItem}
-            >
+            <ListItemButton key="home" selected={page === Page.Home}>
               <Tooltip title="Home">
-                <ListItemIcon className={classes.listItemIcon}>
+                <ListItemIcon>
                   <HomeIcon />
                 </ListItemIcon>
               </Tooltip>
               <ListItemText primary="Home" />
-            </ListItem>
+            </ListItemButton>
           </Link>
           <Link href="/proxy/logs" passHref>
-            <ListItem
-              button
-              component="a"
-              key="proxyLogs"
-              selected={page === Page.ProxyLogs}
-              className={classes.listItem}
-            >
+            <ListItemButton key="proxyLogs" selected={page === Page.ProxyLogs}>
               <Tooltip title="Proxy">
-                <ListItemIcon className={classes.listItemIcon}>
+                <ListItemIcon>
                   <SettingsEthernetIcon />
                 </ListItemIcon>
               </Tooltip>
               <ListItemText primary="Proxy" />
-            </ListItem>
+            </ListItemButton>
           </Link>
           <Link href="/sender" passHref>
-            <ListItem
-              button
-              component="a"
-              key="sender"
-              selected={page === Page.Sender}
-              className={classes.listItem}
-            >
+            <ListItemButton key="sender" selected={page === Page.Sender}>
               <Tooltip title="Sender">
-                <ListItemIcon className={classes.listItemIcon}>
+                <ListItemIcon>
                   <SendIcon />
                 </ListItemIcon>
               </Tooltip>
               <ListItemText primary="Sender" />
-            </ListItem>
+            </ListItemButton>
           </Link>
           <Link href="/scope" passHref>
-            <ListItem
-              button
-              component="a"
-              key="scope"
-              selected={page === Page.Scope}
-              className={classes.listItem}
-            >
+            <ListItemButton key="scope" selected={page === Page.Scope}>
               <Tooltip title="Scope">
-                <ListItemIcon className={classes.listItemIcon}>
+                <ListItemIcon>
                   <LocationSearchingIcon />
                 </ListItemIcon>
               </Tooltip>
               <ListItemText primary="Scope" />
-            </ListItem>
+            </ListItemButton>
           </Link>
           <Link href="/projects" passHref>
-            <ListItem
-              button
-              component="a"
-              key="projects"
-              selected={page === Page.Projects}
-              className={classes.listItem}
-            >
+            <ListItemButton key="projects" selected={page === Page.Projects}>
               <Tooltip title="Projects">
-                <ListItemIcon className={classes.listItemIcon}>
+                <ListItemIcon>
                   <FolderIcon />
                 </ListItemIcon>
               </Tooltip>
               <ListItemText primary="Projects" />
-            </ListItem>
+            </ListItemButton>
           </Link>
         </List>
       </Drawer>
-      <main className={classes.content}>
-        <div className={classes.toolbar} />
+      <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
+        <DrawerHeader />
         {children}
-      </main>
-    </div>
+      </Box>
+    </Box>
   );
 }
 

admin/src/components/projects/NewProject.tsx

@@ -1,32 +1,21 @@
 import { gql, useMutation } from "@apollo/client";
-import {
-  Box,
-  Button,
-  CircularProgress,
-  createStyles,
-  makeStyles,
-  TextField,
-  Theme,
-  Typography,
-} from "@material-ui/core";
-import AddIcon from "@material-ui/icons/Add";
+import { Box, Button, CircularProgress, TextField, Typography } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
 import React, { useState } from "react";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    projectName: {
-      marginTop: -6,
-      marginRight: theme.spacing(2),
-    },
-    button: {
-      marginRight: theme.spacing(2),
-    },
-  })
-);
+const CREATE_PROJECT = gql`
+  mutation CreateProject($name: String!) {
+    createProject(name: $name) {
+      id
+      name
+    }
+  }
+`;
 
 const OPEN_PROJECT = gql`
-  mutation OpenProject($name: String!) {
-    openProject(name: $name) {
+  mutation OpenProject($id: ID!) {
+    openProject(id: $id) {
+      id
       name
       isActive
     }
@@ -34,23 +23,27 @@ const OPEN_PROJECT = gql`
 `;
 
 function NewProject(): JSX.Element {
-  const classes = useStyles();
-  const [input, setInput] = useState(null);
+  const [name, setName] = useState("");
 
-  const [openProject, { error, loading }] = useMutation(OPEN_PROJECT, {
+  const [createProject, { error: createProjErr, loading: createProjLoading }] = useMutation(CREATE_PROJECT, {
     onError: () => {},
-    onCompleted() {
-      input.value = "";
+    onCompleted(data) {
+      setName("");
+      openProject({ variables: { id: data.createProject.id } });
     },
+  });
+  const [openProject, { error: openProjErr, loading: openProjLoading }] = useMutation(OPEN_PROJECT, {
+    onError: () => {},
     update(cache, { data: { openProject } }) {
       cache.modify({
         fields: {
           activeProject() {
             const activeProjRef = cache.writeFragment({
-              id: openProject.name,
+              id: openProject.id,
               data: openProject,
               fragment: gql`
                 fragment ActiveProject on Project {
+                  id
                   name
                   isActive
                   type
@@ -61,10 +54,11 @@ function NewProject(): JSX.Element {
           },
           projects(_, { DELETE }) {
             cache.writeFragment({
-              id: openProject.name,
+              id: openProject.id,
               data: openProject,
               fragment: gql`
                 fragment OpenProject on Project {
+                  id
                   name
                   isActive
                   type
@@ -78,9 +72,9 @@ function NewProject(): JSX.Element {
     },
   });
 
-  const handleNewProjectForm = (e: React.SyntheticEvent) => {
+  const handleCreateAndOpenProjectForm = (e: React.SyntheticEvent) => {
     e.preventDefault();
-    openProject({ variables: { name: input.value } });
+    createProject({ variables: { name } });
   };
 
   return (
@@ -88,29 +82,30 @@ function NewProject(): JSX.Element {
       <Box mb={3}>
         <Typography variant="h6">New project</Typography>
       </Box>
-      <form onSubmit={handleNewProjectForm} autoComplete="off">
+      <form onSubmit={handleCreateAndOpenProjectForm} autoComplete="off">
         <TextField
-          className={classes.projectName}
-          color="secondary"
-          inputProps={{
-            id: "projectName",
-            ref: (node) => {
-              setInput(node);
-            },
+          sx={{
+            mr: 2,
           }}
+          color="primary"
+          size="small"
           label="Project name"
           placeholder="Project name…"
-          error={Boolean(error)}
-          helperText={error && error.message}
+          onChange={(e) => setName(e.target.value)}
+          error={Boolean(createProjErr || openProjErr)}
+          helperText={(createProjErr && createProjErr.message) || (openProjErr && openProjErr.message)}
         />
         <Button
-          className={classes.button}
           type="submit"
           variant="contained"
-          color="secondary"
+          color="primary"
           size="large"
-          disabled={loading}
-          startIcon={loading ? <CircularProgress size={22} /> : <AddIcon />}
+          sx={{
+            pt: 0.9,
+            pb: 0.7,
+          }}
+          disabled={createProjLoading || openProjLoading}
+          startIcon={createProjLoading || openProjLoading ? <CircularProgress size={22} /> : <AddIcon />}
         >
           Create & open project
         </Button>

admin/src/components/projects/ProjectList.tsx

@@ -4,7 +4,6 @@ import {
   Box,
   Button,
   CircularProgress,
-  createStyles,
   Dialog,
   DialogActions,
   DialogContent,
@@ -16,38 +15,25 @@ import {
   ListItemAvatar,
   ListItemSecondaryAction,
   ListItemText,
-  makeStyles,
+  Paper,
   Snackbar,
-  Theme,
   Tooltip,
   Typography,
-} from "@material-ui/core";
-import CloseIcon from "@material-ui/icons/Close";
-import DescriptionIcon from "@material-ui/icons/Description";
-import DeleteIcon from "@material-ui/icons/Delete";
-import LaunchIcon from "@material-ui/icons/Launch";
-import { Alert } from "@material-ui/lab";
-
+  useTheme,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import DescriptionIcon from "@mui/icons-material/Description";
+import DeleteIcon from "@mui/icons-material/Delete";
+import LaunchIcon from "@mui/icons-material/Launch";
+import { Alert } from "@mui/lab";
 import React, { useState } from "react";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    projectsList: {
-      backgroundColor: theme.palette.background.paper,
-    },
-    activeProject: {
-      color: theme.palette.getContrastText(theme.palette.secondary.main),
-      backgroundColor: theme.palette.secondary.main,
-    },
-    deleteProjectButton: {
-      color: theme.palette.error.main,
-    },
-  })
-);
+import { Project } from "../../lib/Project";
 
 const PROJECTS = gql`
   query Projects {
     projects {
+      id
       name
       isActive
     }
@@ -55,8 +41,9 @@ const PROJECTS = gql`
 `;
 
 const OPEN_PROJECT = gql`
-  mutation OpenProject($name: String!) {
-    openProject(name: $name) {
+  mutation OpenProject($id: ID!) {
+    openProject(id: $id) {
+      id
       name
       isActive
     }
@@ -72,61 +59,61 @@ const CLOSE_PROJECT = gql`
 `;
 
 const DELETE_PROJECT = gql`
-  mutation DeleteProject($name: String!) {
-    deleteProject(name: $name) {
+  mutation DeleteProject($id: ID!) {
+    deleteProject(id: $id) {
       success
     }
   }
 `;
 
 function ProjectList(): JSX.Element {
-  const classes = useStyles();
-  const { loading: projLoading, error: projErr, data: projData } = useQuery(
-    PROJECTS
+  const theme = useTheme();
+  const { loading: projLoading, error: projErr, data: projData } = useQuery<{ projects: Project[] }>(PROJECTS);
+  const [openProject, { error: openProjErr, loading: openProjLoading }] = useMutation<{ openProject: Project }>(
+    OPEN_PROJECT,
+    {
+      errorPolicy: "all",
+      onError: () => {},
+      update(cache, { data }) {
+        cache.modify({
+          fields: {
+            activeProject() {
+              const activeProjRef = cache.writeFragment({
+                data: data?.openProject,
+                fragment: gql`
+                  fragment ActiveProject on Project {
+                    id
+                    name
+                    isActive
+                    type
+                  }
+                `,
+              });
+              return activeProjRef;
+            },
+            projects(_, { DELETE }) {
+              cache.writeFragment({
+                id: data?.openProject.id,
+                data: openProject,
+                fragment: gql`
+                  fragment OpenProject on Project {
+                    id
+                    name
+                    isActive
+                    type
+                  }
+                `,
+              });
+              return DELETE;
+            },
+            httpRequestLogFilter(_, { DELETE }) {
+              return DELETE;
+            },
+          },
+        });
+      },
+    }
   );
-  const [
-    openProject,
-    { error: openProjErr, loading: openProjLoading },
-  ] = useMutation(OPEN_PROJECT, {
-    errorPolicy: "all",
-    onError: () => {},
-    update(cache, { data: { openProject } }) {
-      cache.modify({
-        fields: {
-          activeProject() {
-            const activeProjRef = cache.writeFragment({
-              data: openProject,
-              fragment: gql`
-                fragment ActiveProject on Project {
-                  name
-                  isActive
-                  type
-                }
-              `,
-            });
-            return activeProjRef;
-          },
-          projects(_, { DELETE }) {
-            cache.writeFragment({
-              id: openProject.name,
-              data: openProject,
-              fragment: gql`
-                fragment OpenProject on Project {
-                  name
-                  isActive
-                  type
-                }
-              `,
-            });
-            return DELETE;
-          },
-          httpRequestLogFilter(_, { DELETE }) {
-            return DELETE;
-          },
-        },
-      });
-    },
-  });
   const [closeProject, { error: closeProjErr }] = useMutation(CLOSE_PROJECT, {
     errorPolicy: "all",
     onError: () => {},
@@ -146,10 +133,7 @@ function ProjectList(): JSX.Element {
       });
     },
   });
-  const [
-    deleteProject,
-    { loading: deleteProjLoading, error: deleteProjErr },
-  ] = useMutation(DELETE_PROJECT, {
+  const [deleteProject, { loading: deleteProjLoading, error: deleteProjErr }] = useMutation(DELETE_PROJECT, {
     errorPolicy: "all",
     onError: () => {},
     update(cache) {
@@ -165,21 +149,21 @@ function ProjectList(): JSX.Element {
     },
   });
 
-  const [deleteProjName, setDeleteProjName] = useState(null);
+  const [deleteProj, setDeleteProj] = useState<Project>();
   const [deleteDiagOpen, setDeleteDiagOpen] = useState(false);
-  const handleDeleteButtonClick = (name: string) => {
-    setDeleteProjName(name);
+  const handleDeleteButtonClick = (project: any) => {
+    setDeleteProj(project);
     setDeleteDiagOpen(true);
   };
   const handleDeleteConfirm = () => {
-    deleteProject({ variables: { name: deleteProjName } });
+    deleteProject({ variables: { id: deleteProj?.id } });
   };
   const handleDeleteCancel = () => {
     setDeleteDiagOpen(false);
   };
 
   const [deleteNotifOpen, setDeleteNotifOpen] = useState(false);
-  const handleCloseDeleteNotif = (_, reason?: string) => {
+  const handleCloseDeleteNotif = (_: Event | React.SyntheticEvent, reason?: string) => {
     if (reason === "clickaway") {
       return;
     }
@@ -190,27 +174,29 @@ function ProjectList(): JSX.Element {
     <div>
       <Dialog open={deleteDiagOpen} onClose={handleDeleteCancel}>
         <DialogTitle>
-          Delete project “<strong>{deleteProjName}</strong>”?
+          Delete project “<strong>{deleteProj?.name}</strong>”?
         </DialogTitle>
         <DialogContent>
           <DialogContentText>
-            Deleting a project permanently removes its database file from disk.
-            This action is irreversible.
+            Deleting a project permanently removes all its data from the database. This action is irreversible.
           </DialogContentText>
-          {deleteProjErr && (
-            <Alert severity="error">
-              Error closing project: {deleteProjErr.message}
-            </Alert>
-          )}
+          {deleteProjErr && <Alert severity="error">Error closing project: {deleteProjErr.message}</Alert>}
         </DialogContent>
         <DialogActions>
-          <Button onClick={handleDeleteCancel} autoFocus>
+          <Button onClick={handleDeleteCancel} autoFocus color="secondary" variant="contained">
             Cancel
           </Button>
           <Button
-            className={classes.deleteProjectButton}
+            sx={{
+              color: "white",
+              backgroundColor: "error.main",
+              "&:hover": {
+                backgroundColor: "error.dark",
+              },
+            }}
             onClick={handleDeleteConfirm}
             disabled={deleteProjLoading}
+            variant="contained"
           >
             Delete
           </Button>
@@ -221,9 +207,10 @@ function ProjectList(): JSX.Element {
         open={deleteNotifOpen}
         autoHideDuration={3000}
         onClose={handleCloseDeleteNotif}
+        anchorOrigin={{ horizontal: "center", vertical: "bottom" }}
       >
         <Alert onClose={handleCloseDeleteNotif} severity="info">
-          Project <strong>{deleteProjName}</strong> was deleted.
+          Project <strong>{deleteProj?.name}</strong> was deleted.
         </Alert>
       </Snackbar>
 
@@ -233,82 +220,70 @@ function ProjectList(): JSX.Element {
 
       <Box mb={4}>
         {projLoading && <CircularProgress />}
-        {projErr && (
-          <Alert severity="error">
-            Error fetching projects: {projErr.message}
-          </Alert>
-        )}
-        {openProjErr && (
-          <Alert severity="error">
-            Error opening project: {openProjErr.message}
-          </Alert>
-        )}
-        {closeProjErr && (
-          <Alert severity="error">
-            Error closing project: {closeProjErr.message}
-          </Alert>
-        )}
+        {projErr && <Alert severity="error">Error fetching projects: {projErr.message}</Alert>}
+        {openProjErr && <Alert severity="error">Error opening project: {openProjErr.message}</Alert>}
+        {closeProjErr && <Alert severity="error">Error closing project: {closeProjErr.message}</Alert>}
       </Box>
 
-      {projData?.projects.length > 0 && (
-        <List className={classes.projectsList}>
-          {projData.projects.map((project) => (
-            <ListItem key={project.name}>
-              <ListItemAvatar>
-                <Avatar
-                  className={
-                    project.isActive ? classes.activeProject : undefined
-                  }
-                >
-                  <DescriptionIcon />
-                </Avatar>
-              </ListItemAvatar>
-              <ListItemText>
-                {project.name} {project.isActive && <em>(Active)</em>}
-              </ListItemText>
-              <ListItemSecondaryAction>
-                {project.isActive && (
-                  <Tooltip title="Close project">
-                    <IconButton onClick={() => closeProject()}>
-                      <CloseIcon />
-                    </IconButton>
-                  </Tooltip>
-                )}
-                {!project.isActive && (
-                  <Tooltip title="Open project">
+      {projData && projData.projects.length > 0 && (
+        <Paper>
+          <List>
+            {projData.projects.map((project) => (
+              <ListItem key={project.id}>
+                <ListItemAvatar>
+                  <Avatar
+                    sx={{
+                      ...(project.isActive && {
+                        color: theme.palette.secondary.dark,
+                        backgroundColor: theme.palette.primary.main,
+                      }),
+                    }}
+                  >
+                    <DescriptionIcon />
+                  </Avatar>
+                </ListItemAvatar>
+                <ListItemText>
+                  {project.name} {project.isActive && <em>(Active)</em>}
+                </ListItemText>
+                <ListItemSecondaryAction>
+                  {project.isActive && (
+                    <Tooltip title="Close project">
+                      <IconButton onClick={() => closeProject()}>
+                        <CloseIcon />
+                      </IconButton>
+                    </Tooltip>
+                  )}
+                  {!project.isActive && (
+                    <Tooltip title="Open project">
+                      <span>
+                        <IconButton
+                          disabled={openProjLoading || projLoading}
+                          onClick={() =>
+                            openProject({
+                              variables: { id: project.id },
+                            })
+                          }
+                        >
+                          <LaunchIcon />
+                        </IconButton>
+                      </span>
+                    </Tooltip>
+                  )}
+                  <Tooltip title="Delete project">
                     <span>
-                      <IconButton
-                        disabled={openProjLoading || projLoading}
-                        onClick={() =>
-                          openProject({
-                            variables: { name: project.name },
-                          })
-                        }
-                      >
-                        <LaunchIcon />
+                      <IconButton onClick={() => handleDeleteButtonClick(project)} disabled={project.isActive}>
+                        <DeleteIcon />
                       </IconButton>
                     </span>
                   </Tooltip>
-                )}
-                <Tooltip title="Delete project">
-                  <span>
-                    <IconButton
-                      onClick={() => handleDeleteButtonClick(project.name)}
-                      disabled={project.isActive}
-                    >
-                      <DeleteIcon />
-                    </IconButton>
-                  </span>
-                </Tooltip>
-              </ListItemSecondaryAction>
-            </ListItem>
-          ))}
-        </List>
+                </ListItemSecondaryAction>
+              </ListItem>
+            ))}
+          </List>
+        </Paper>
       )}
       {projData?.projects.length === 0 && (
-        <Alert severity="info">
-          There are no projects. Create one to get started.
-        </Alert>
+        <Alert severity="info">There are no projects. Create one to get started.</Alert>
       )}
     </div>
   );

admin/src/components/reqlog/ConfirmationDialog.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogTitle from "@mui/material/DialogTitle";
+
+export function useConfirmationDialog() {
+  const [isOpen, setIsOpen] = useState(false);
+  const close = () => setIsOpen(false);
+  const open = () => setIsOpen(true);
+
+  return { open, close, isOpen };
+}
+
+interface ConfirmationDialog {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  children: React.ReactNode;
+}
+
+export function ConfirmationDialog(props: ConfirmationDialog) {
+  const { onClose, onConfirm, isOpen, children } = props;
+
+  function confirm() {
+    onConfirm();
+    onClose();
+  }
+
+  return (
+    <Dialog
+      open={isOpen}
+      onClose={onClose}
+      aria-labelledby="alert-dialog-title"
+      aria-describedby="alert-dialog-description"
+    >
+      <DialogTitle id="alert-dialog-title">Are you sure?</DialogTitle>
+      <DialogContent>
+        <DialogContentText id="alert-dialog-description">{children}</DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button onClick={confirm} autoFocus>
+          Confirm
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

admin/src/components/reqlog/Editor.tsx

@@ -1,7 +1,7 @@
-import dynamic from "next/dynamic";
-const MonacoEditor = dynamic(import("react-monaco-editor"), { ssr: false });
+import MonacoEditor from "@monaco-editor/react";
+import monaco from "monaco-editor/esm/vs/editor/editor.api";
 
-const monacoOptions = {
+const monacoOptions: monaco.editor.IEditorOptions = {
   readOnly: true,
   wordWrap: "on",
   minimap: {
@@ -11,20 +11,7 @@ const monacoOptions = {
 
 type language = "html" | "typescript" | "json";
 
-function editorDidMount() {
-  return ((window as any).MonacoEnvironment.getWorkerUrl = (
-    moduleId,
-    label
-  ) => {
-    if (label === "json") return "/_next/static/json.worker.js";
-    if (label === "html") return "/_next/static/html.worker.js";
-    if (label === "javascript") return "/_next/static/ts.worker.js";
-
-    return "/_next/static/editor.worker.js";
-  });
-}
-
-function languageForContentType(contentType: string): language {
+function languageForContentType(contentType?: string): language | undefined {
   switch (contentType) {
     case "text/html":
       return "html";
@@ -41,7 +28,7 @@ function languageForContentType(contentType: string): language {
 
 interface Props {
   content: string;
-  contentType: string;
+  contentType?: string;
 }
 
 function Editor({ content, contentType }: Props): JSX.Element {
@@ -50,8 +37,7 @@ function Editor({ content, contentType }: Props): JSX.Element {
       height={"600px"}
       language={languageForContentType(contentType)}
       theme="vs-dark"
-      editorDidMount={editorDidMount}
-      options={monacoOptions as any}
+      options={monacoOptions}
       value={content}
     />
   );

admin/src/components/reqlog/HttpHeadersTable.tsx

@@ -1,83 +1,66 @@
-import {
-  makeStyles,
-  Theme,
-  createStyles,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableRow,
-  Snackbar,
-} from "@material-ui/core";
-import { Alert } from "@material-ui/lab";
+import { Table, TableBody, TableCell, TableContainer, TableRow, Snackbar } from "@mui/material";
+import { Alert } from "@mui/lab";
 import React, { useState } from "react";
 
-const useStyles = makeStyles((theme: Theme) => {
-  const paddingX = 0;
-  const paddingY = theme.spacing(1) / 3;
-  const tableCell = {
-    paddingLeft: paddingX,
-    paddingRight: paddingX,
-    paddingTop: paddingY,
-    paddingBottom: paddingY,
-    verticalAlign: "top",
-    border: "none",
-    whiteSpace: "nowrap" as any,
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    "&:hover": {
-      color: theme.palette.secondary.main,
-      whiteSpace: "inherit" as any,
-      overflow: "inherit",
-      textOverflow: "inherit",
-      cursor: "copy",
-    },
-  };
-  return createStyles({
-    root: {},
-    table: {
-      tableLayout: "fixed",
-      width: "100%",
-    },
-    keyCell: {
-      ...tableCell,
-      paddingRight: theme.spacing(1),
-      width: "40%",
-      fontWeight: "bold",
-      fontSize: ".75rem",
-    },
-    valueCell: {
-      ...tableCell,
-      width: "60%",
-      border: "none",
-      fontSize: ".75rem",
-    },
-  });
-});
+const baseCellStyle = {
+  px: 0,
+  py: 0.33,
+  verticalAlign: "top",
+  border: "none",
+  whiteSpace: "nowrap" as any,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  "&:hover": {
+    color: "primary.main",
+    whiteSpace: "inherit" as any,
+    overflow: "inherit",
+    textOverflow: "inherit",
+    cursor: "copy",
+  },
+};
+
+const keyCellStyle = {
+  ...baseCellStyle,
+  pr: 1,
+  width: "40%",
+  fontWeight: "bold",
+  fontSize: ".75rem",
+};
+
+const valueCellStyle = {
+  ...baseCellStyle,
+  width: "60%",
+  border: "none",
+  fontSize: ".75rem",
+};
 
 interface Props {
   headers: Array<{ key: string; value: string }>;
 }
 
 function HttpHeadersTable({ headers }: Props): JSX.Element {
-  const classes = useStyles();
-
   const [open, setOpen] = useState(false);
 
   const handleClick = (e: React.MouseEvent) => {
     e.preventDefault();
 
+    const windowSel = window.getSelection();
+
+    if (!windowSel || !document) {
+      return;
+    }
+
     const r = document.createRange();
     r.selectNode(e.currentTarget);
-    window.getSelection().removeAllRanges();
-    window.getSelection().addRange(r);
+    windowSel.removeAllRanges();
+    windowSel.addRange(r);
     document.execCommand("copy");
-    window.getSelection().removeAllRanges();
+    windowSel.removeAllRanges();
 
     setOpen(true);
   };
 
-  const handleClose = (event?: React.SyntheticEvent, reason?: string) => {
+  const handleClose = (event: Event | React.SyntheticEvent, reason?: string) => {
     if (reason === "clickaway") {
       return;
     }
@@ -92,20 +75,21 @@ function HttpHeadersTable({ headers }: Props): JSX.Element {
           Copied to clipboard.
         </Alert>
       </Snackbar>
-      <TableContainer className={classes.root}>
-        <Table className={classes.table} size="small">
+      <TableContainer>
+        <Table
+          sx={{
+            tableLayout: "fixed",
+            width: "100%",
+          }}
+          size="small"
+        >
           <TableBody>
             {headers.map(({ key, value }, index) => (
               <TableRow key={index}>
-                <TableCell
-                  component="th"
-                  scope="row"
-                  className={classes.keyCell}
-                  onClick={handleClick}
-                >
+                <TableCell component="th" scope="row" sx={keyCellStyle} onClick={handleClick}>
                   <code>{key}:</code>
                 </TableCell>
-                <TableCell className={classes.valueCell} onClick={handleClick}>
+                <TableCell sx={valueCellStyle} onClick={handleClick}>
                   <code>{value}</code>
                 </TableCell>
               </TableRow>

admin/src/components/reqlog/HttpStatusCode.tsx

@@ -1,31 +1,25 @@
-import { Theme, withTheme } from "@material-ui/core";
-import { orange, red } from "@material-ui/core/colors";
-import FiberManualRecordIcon from "@material-ui/icons/FiberManualRecord";
+import { SvgIconTypeMap } from "@mui/material";
+import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
 
 interface Props {
   status: number;
-  theme: Theme;
 }
 
-function HttpStatusIcon({ status, theme }: Props): JSX.Element {
-  const style = { marginTop: "-.25rem", verticalAlign: "middle" };
+export default function HttpStatusIcon({ status }: Props): JSX.Element {
+  let color: SvgIconTypeMap["props"]["color"] = "inherit";
+
   switch (Math.floor(status / 100)) {
     case 2:
     case 3:
-      return (
-        <FiberManualRecordIcon
-          style={{ ...style, color: theme.palette.secondary.main }}
-        />
-      );
+      color = "primary";
+      break;
     case 4:
-      return (
-        <FiberManualRecordIcon style={{ ...style, color: orange["A400"] }} />
-      );
+      color = "warning";
+      break;
     case 5:
-      return <FiberManualRecordIcon style={{ ...style, color: red["A400"] }} />;
-    default:
-      return <FiberManualRecordIcon style={style} />;
+      color = "error";
+      break;
   }
-}
 
-export default withTheme(HttpStatusIcon);
+  return <FiberManualRecordIcon sx={{ marginTop: "-.25rem", verticalAlign: "middle" }} color={color} />;
+}

admin/src/components/reqlog/LogDetail.tsx

@@ -1,9 +1,9 @@
 import { gql, useQuery } from "@apollo/client";
-import { Box, Grid, Paper, CircularProgress } from "@material-ui/core";
+import { Box, Grid, Paper, CircularProgress } from "@mui/material";
 
 import ResponseDetail from "./ResponseDetail";
 import RequestDetail from "./RequestDetail";
-import Alert from "@material-ui/lab/Alert";
+import Alert from "@mui/lab/Alert";
 
 const HTTP_REQUEST_LOG = gql`
   query HttpRequestLog($id: ID!) {
@@ -32,7 +32,7 @@ const HTTP_REQUEST_LOG = gql`
 `;
 
 interface Props {
-  requestId: number;
+  requestId: string;
 }
 
 function LogDetail({ requestId: id }: Props): JSX.Element {
@@ -44,11 +44,7 @@ function LogDetail({ requestId: id }: Props): JSX.Element {
     return <CircularProgress />;
   }
   if (error) {
-    return (
-      <Alert severity="error">
-        Error fetching logs details: {error.message}
-      </Alert>
-    );
+    return <Alert severity="error">Error fetching logs details: {error.message}</Alert>;
   }
 
   if (!data.httpRequestLog) {

admin/src/components/reqlog/LogsOverview.tsx

@@ -1,43 +1,19 @@
 import { useRouter } from "next/router";
-import { gql, useQuery } from "@apollo/client";
 import Link from "next/link";
-import {
-  Box,
-  Typography,
-  CircularProgress,
-  Link as MaterialLink,
-} from "@material-ui/core";
-import Alert from "@material-ui/lab/Alert";
+import { Box, CircularProgress, Link as MaterialLink, Typography } from "@mui/material";
+import Alert from "@mui/lab/Alert";
 
 import RequestList from "./RequestList";
 import LogDetail from "./LogDetail";
 import CenteredPaper from "../CenteredPaper";
-
-const HTTP_REQUEST_LOGS = gql`
-  query HttpRequestLogs {
-    httpRequestLogs {
-      id
-      method
-      url
-      timestamp
-      response {
-        statusCode
-        statusReason
-      }
-    }
-  }
-`;
+import { useHttpRequestLogs } from "./hooks/useHttpRequestLogs";
 
 function LogsOverview(): JSX.Element {
   const router = useRouter();
-  const detailReqLogId =
-    router.query.id && parseInt(router.query.id as string, 10);
+  const detailReqLogId = router.query.id as string | undefined;
+  const { loading, error, data } = useHttpRequestLogs();
 
-  const { loading, error, data } = useQuery(HTTP_REQUEST_LOGS, {
-    pollInterval: 1000,
-  });
-
-  const handleLogClick = (reqId: number) => {
+  const handleLogClick = (reqId: string) => {
     router.push("/proxy/logs?id=" + reqId, undefined, {
       shallow: false,
     });
@@ -52,7 +28,7 @@ function LogsOverview(): JSX.Element {
         <Alert severity="info">
           There is no project active.{" "}
           <Link href="/projects" passHref>
-            <MaterialLink color="secondary">Create or open</MaterialLink>
+            <MaterialLink color="primary">Create or open</MaterialLink>
           </Link>{" "}
           one first.
         </Alert>
@@ -66,11 +42,7 @@ function LogsOverview(): JSX.Element {
   return (
     <div>
       <Box mb={2}>
-        <RequestList
-          logs={logs}
-          selectedReqLogId={detailReqLogId}
-          onLogClick={handleLogClick}
-        />
+        <RequestList logs={logs || []} selectedReqLogId={detailReqLogId} onLogClick={handleLogClick} />
       </Box>
       <Box>
         {detailReqLogId && <LogDetail requestId={detailReqLogId} />}

admin/src/components/reqlog/RequestDetail.tsx

@@ -1,42 +1,9 @@
 import React from "react";
-import {
-  Typography,
-  Box,
-  createStyles,
-  makeStyles,
-  Theme,
-  Divider,
-} from "@material-ui/core";
+import { Typography, Box, Divider } from "@mui/material";
 
 import HttpHeadersTable from "./HttpHeadersTable";
 import Editor from "./Editor";
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    requestTitle: {
-      width: "calc(100% - 80px)",
-      fontSize: "1rem",
-      wordBreak: "break-all",
-      whiteSpace: "pre-wrap",
-    },
-    headersTable: {
-      tableLayout: "fixed",
-      width: "100%",
-    },
-    headerKeyCell: {
-      verticalAlign: "top",
-      width: "30%",
-      fontWeight: "bold",
-    },
-    headerValueCell: {
-      width: "70%",
-      verticalAlign: "top",
-      wordBreak: "break-all",
-      whiteSpace: "pre-wrap",
-    },
-  })
-);
-
 interface Props {
   request: {
     method: string;
@@ -49,29 +16,27 @@ interface Props {
 
 function RequestDetail({ request }: Props): JSX.Element {
   const { method, url, proto, headers, body } = request;
-  const classes = useStyles();
 
-  const contentType = headers.find((header) => header.key === "Content-Type")
-    ?.value;
+  const contentType = headers.find((header) => header.key === "Content-Type")?.value;
   const parsedUrl = new URL(url);
 
   return (
     <div>
       <Box p={2}>
-        <Typography
-          variant="overline"
-          color="textSecondary"
-          style={{ float: "right" }}
-        >
+        <Typography variant="overline" color="textSecondary" style={{ float: "right" }}>
           Request
         </Typography>
-        <Typography className={classes.requestTitle} variant="h6">
+        <Typography
+          sx={{
+            width: "calc(100% - 80px)",
+            fontSize: "1rem",
+            wordBreak: "break-all",
+            whiteSpace: "pre-wrap",
+          }}
+          variant="h6"
+        >
           {method} {decodeURIComponent(parsedUrl.pathname + parsedUrl.search)}{" "}
-          <Typography
-            component="span"
-            color="textSecondary"
-            style={{ fontFamily: "'JetBrains Mono', monospace" }}
-          >
+          <Typography component="span" color="textSecondary" style={{ fontFamily: "'JetBrains Mono', monospace" }}>
             {proto}
           </Typography>
         </Typography>

admin/src/components/reqlog/RequestList.tsx

@@ -8,48 +8,23 @@ import {
   TableBody,
   Typography,
   Box,
-  createStyles,
-  makeStyles,
-  Theme,
-  withTheme,
-} from "@material-ui/core";
+  useTheme,
+} from "@mui/material";
 
 import HttpStatusIcon from "./HttpStatusCode";
 import CenteredPaper from "../CenteredPaper";
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    row: {
-      "&:hover": {
-        cursor: "pointer",
-      },
-    },
-    /* Pseudo-class applied to the root element if `hover={true}`. */
-    hover: {},
-  })
-);
+import { RequestLog } from "../../lib/requestLogs";
 
 interface Props {
-  logs: Array<any>;
-  selectedReqLogId?: number;
-  onLogClick(requestId: number): void;
-  theme: Theme;
+  logs: RequestLog[];
+  selectedReqLogId?: string;
+  onLogClick(requestId: string): void;
 }
 
-function RequestList({
-  logs,
-  onLogClick,
-  selectedReqLogId,
-  theme,
-}: Props): JSX.Element {
+export default function RequestList({ logs, onLogClick, selectedReqLogId }: Props): JSX.Element {
   return (
     <div>
-      <RequestListTable
-        onLogClick={onLogClick}
-        logs={logs}
-        selectedReqLogId={selectedReqLogId}
-        theme={theme}
-      />
+      <RequestListTable onLogClick={onLogClick} logs={logs} selectedReqLogId={selectedReqLogId} />
       {logs.length === 0 && (
         <Box my={1}>
           <CenteredPaper>
@@ -62,19 +37,14 @@ function RequestList({
 }
 
 interface RequestListTableProps {
-  logs?: any;
-  selectedReqLogId?: number;
-  onLogClick(requestId: number): void;
-  theme: Theme;
+  logs: RequestLog[];
+  selectedReqLogId?: string;
+  onLogClick(requestId: string): void;
 }
 
-function RequestListTable({
-  logs,
-  selectedReqLogId,
-  onLogClick,
-  theme,
-}: RequestListTableProps): JSX.Element {
-  const classes = useStyles();
+function RequestListTable({ logs, selectedReqLogId, onLogClick }: RequestListTableProps): JSX.Element {
+  const theme = useTheme();
+
   return (
     <TableContainer
       component={Paper}
@@ -102,26 +72,25 @@ function RequestListTable({
               textOverflow: "ellipsis",
             } as any;
 
-            const rowStyle = {
-              backgroundColor:
-                id === selectedReqLogId && theme.palette.action.selected,
-            };
-
             return (
               <TableRow
                 key={id}
-                className={classes.row}
-                style={rowStyle}
+                sx={{
+                  "&:hover": {
+                    cursor: "pointer",
+                  },
+                  ...(id === selectedReqLogId && {
+                    bgcolor: theme.palette.action.selected,
+                  }),
+                }}
                 hover
                 onClick={() => onLogClick(id)}
               >
                 <TableCell style={{ ...cellStyle, width: "100px" }}>
                   <code>{method}</code>
                 </TableCell>
-                <TableCell style={{ ...cellStyle, maxWidth: "100px" }}>
-                  {origin}
-                </TableCell>
-                <TableCell style={{ ...cellStyle, maxWidth: "200px" }}>
+                <TableCell sx={{ ...cellStyle, maxWidth: "100px" }}>{origin}</TableCell>
+                <TableCell sx={{ ...cellStyle, maxWidth: "200px" }}>
                   {decodeURIComponent(pathname + search + hash)}
                 </TableCell>
                 <TableCell style={{ maxWidth: "100px" }}>
@@ -142,5 +111,3 @@ function RequestListTable({
     </TableContainer>
   );
 }
-
-export default withTheme(RequestList);

admin/src/components/reqlog/ResponseDetail.tsx

@@ -1,4 +1,4 @@
-import { Typography, Box, Divider } from "@material-ui/core";
+import { Typography, Box, Divider } from "@mui/material";
 
 import HttpStatusIcon from "./HttpStatusCode";
 import Editor from "./Editor";
@@ -15,30 +15,17 @@ interface Props {
 }
 
 function ResponseDetail({ response }: Props): JSX.Element {
-  const contentType = response.headers.find(
-    (header) => header.key === "Content-Type"
-  )?.value;
+  const contentType = response.headers.find((header) => header.key === "Content-Type")?.value;
   return (
     <div>
       <Box p={2}>
-        <Typography
-          variant="overline"
-          color="textSecondary"
-          style={{ float: "right" }}
-        >
+        <Typography variant="overline" color="textSecondary" style={{ float: "right" }}>
           Response
         </Typography>
-        <Typography
-          variant="h6"
-          style={{ fontSize: "1rem", whiteSpace: "nowrap" }}
-        >
+        <Typography variant="h6" style={{ fontSize: "1rem", whiteSpace: "nowrap" }}>
           <HttpStatusIcon status={response.statusCode} />{" "}
           <Typography component="span" color="textSecondary">
-            <Typography
-              component="span"
-              color="textSecondary"
-              style={{ fontFamily: "'JetBrains Mono', monospace" }}
-            >
+            <Typography component="span" color="textSecondary" style={{ fontFamily: "'JetBrains Mono', monospace" }}>
               {response.proto}
             </Typography>
           </Typography>{" "}
@@ -52,9 +39,7 @@ function ResponseDetail({ response }: Props): JSX.Element {
         <HttpHeadersTable headers={response.headers} />
       </Box>
 
-      {response.body && (
-        <Editor content={response.body} contentType={contentType} />
-      )}
+      {response.body && <Editor content={response.body} contentType={contentType} />}
     </div>
   );
 }

admin/src/components/reqlog/Search.tsx

@@ -3,28 +3,29 @@ import {
   Checkbox,
   CircularProgress,
   ClickAwayListener,
-  createStyles,
   FormControlLabel,
   InputBase,
-  makeStyles,
   Paper,
   Popper,
-  Theme,
   Tooltip,
   useTheme,
-} from "@material-ui/core";
-import IconButton from "@material-ui/core/IconButton";
-import SearchIcon from "@material-ui/icons/Search";
-import FilterListIcon from "@material-ui/icons/FilterList";
+} from "@mui/material";
+import IconButton from "@mui/material/IconButton";
+import SearchIcon from "@mui/icons-material/Search";
+import FilterListIcon from "@mui/icons-material/FilterList";
+import DeleteIcon from "@mui/icons-material/Delete";
 import React, { useRef, useState } from "react";
-import { gql, useApolloClient, useMutation, useQuery } from "@apollo/client";
+import { gql, useMutation, useQuery } from "@apollo/client";
 import { withoutTypename } from "../../lib/omitTypename";
-import { Alert } from "@material-ui/lab";
+import { Alert } from "@mui/lab";
+import { useClearHTTPRequestLog } from "./hooks/useClearHTTPRequestLog";
+import { ConfirmationDialog, useConfirmationDialog } from "./ConfirmationDialog";
 
 const FILTER = gql`
   query HttpRequestLogFilter {
     httpRequestLogFilter {
       onlyInScope
+      searchExpression
     }
   }
 `;
@@ -33,168 +34,182 @@ const SET_FILTER = gql`
   mutation SetHttpRequestLogFilter($filter: HttpRequestLogFilterInput) {
     setHttpRequestLogFilter(filter: $filter) {
       onlyInScope
+      searchExpression
     }
   }
 `;
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      padding: "2px 4px",
-      display: "flex",
-      alignItems: "center",
-      width: 400,
-    },
-    input: {
-      marginLeft: theme.spacing(1),
-      flex: 1,
-    },
-    iconButton: {
-      padding: 10,
-    },
-    filterPopper: {
-      width: 400,
-      marginTop: 6,
-      zIndex: 99,
-    },
-    filterOptions: {
-      padding: theme.spacing(2),
-    },
-    filterLoading: {
-      marginRight: 1,
-      color: theme.palette.text.primary,
-    },
-  })
-);
-
 export interface SearchFilter {
   onlyInScope: boolean;
+  searchExpression: string;
 }
 
 function Search(): JSX.Element {
-  const classes = useStyles();
   const theme = useTheme();
 
-  const { loading: filterLoading, error: filterErr, data: filter } = useQuery(
-    FILTER
-  );
-
-  const client = useApolloClient();
-  const [
-    setFilterMutate,
-    { error: setFilterErr, loading: setFilterLoading },
-  ] = useMutation<{
-    setHttpRequestLogFilter: SearchFilter | null;
-  }>(SET_FILTER, {
-    update(_, { data: { setHttpRequestLogFilter } }) {
-      client.writeQuery({
-        query: FILTER,
-        data: {
-          httpRequestLogFilter: setHttpRequestLogFilter,
-        },
-      });
+  const [searchExpr, setSearchExpr] = useState("");
+  const {
+    loading: filterLoading,
+    error: filterErr,
+    data: filter,
+  } = useQuery(FILTER, {
+    onCompleted: (data) => {
+      setSearchExpr(data.httpRequestLogFilter?.searchExpression || "");
     },
   });
 
-  const filterRef = useRef<HTMLElement | null>();
+  const [setFilterMutate, { error: setFilterErr, loading: setFilterLoading }] = useMutation<{
+    setHttpRequestLogFilter: SearchFilter | null;
+  }>(SET_FILTER, {
+    update(cache, { data }) {
+      cache.writeQuery({
+        query: FILTER,
+        data: {
+          httpRequestLogFilter: data?.setHttpRequestLogFilter,
+        },
+      });
+    },
+    onError: () => {},
+  });
+
+  const [clearHTTPRequestLog, clearHTTPRequestLogResult] = useClearHTTPRequestLog();
+  const clearHTTPConfirmationDialog = useConfirmationDialog();
+
+  const filterRef = useRef<HTMLFormElement>(null);
   const [filterOpen, setFilterOpen] = useState(false);
 
   const handleSubmit = (e: React.SyntheticEvent) => {
+    setFilterMutate({
+      variables: {
+        filter: {
+          ...withoutTypename(filter?.httpRequestLogFilter),
+          searchExpression: searchExpr,
+        },
+      },
+    });
+    setFilterOpen(false);
     e.preventDefault();
   };
 
-  const handleClickAway = (event: React.MouseEvent<EventTarget>) => {
-    if (filterRef.current.contains(event.target as HTMLElement)) {
+  const handleClickAway = (event: MouseEvent | TouchEvent) => {
+    if (filterRef?.current && filterRef.current.contains(event.target as HTMLElement)) {
       return;
     }
     setFilterOpen(false);
   };
 
   return (
-    <ClickAwayListener onClickAway={handleClickAway}>
-      <Box style={{ display: "inline-block" }}>
-        {filterErr && (
-          <Box mb={4}>
-            <Alert severity="error">
-              Error fetching filter: {filterErr.message}
-            </Alert>
-          </Box>
-        )}
-        {setFilterErr && (
-          <Box mb={4}>
-            <Alert severity="error">
-              Error setting filter: {setFilterErr.message}
-            </Alert>
-          </Box>
-        )}
-        <Paper
-          component="form"
-          onSubmit={handleSubmit}
-          ref={filterRef}
-          className={classes.root}
-        >
-          <Tooltip title="Toggle filter options">
-            <IconButton
-              className={classes.iconButton}
-              onClick={() => setFilterOpen(!filterOpen)}
-              style={{
-                color:
-                  filter?.httpRequestLogFilter !== null
-                    ? theme.palette.secondary.main
-                    : "inherit",
+    <Box>
+      <Error prefix="Error fetching filter" error={filterErr} />
+      <Error prefix="Error setting filter" error={setFilterErr} />
+      <Error prefix="Error clearing all HTTP logs" error={clearHTTPRequestLogResult.error} />
+      <Box style={{ display: "flex", flex: 1 }}>
+        <ClickAwayListener onClickAway={handleClickAway}>
+          <Paper
+            component="form"
+            onSubmit={handleSubmit}
+            ref={filterRef}
+            sx={{
+              padding: "2px 4px",
+              display: "flex",
+              alignItems: "center",
+              width: 400,
+            }}
+          >
+            <Tooltip title="Toggle filter options">
+              <IconButton
+                onClick={() => setFilterOpen(!filterOpen)}
+                sx={{
+                  p: 1,
+                  color: filter?.httpRequestLogFilter?.onlyInScope ? "primary.main" : "inherit",
+                }}
+              >
+                {filterLoading || setFilterLoading ? (
+                  <CircularProgress sx={{ color: theme.palette.text.primary }} size={23} />
+                ) : (
+                  <FilterListIcon />
+                )}
+              </IconButton>
+            </Tooltip>
+            <InputBase
+              sx={{
+                ml: 1,
+                flex: 1,
               }}
-            >
-              {filterLoading || setFilterLoading ? (
-                <CircularProgress className={classes.filterLoading} size={23} />
-              ) : (
-                <FilterListIcon />
-              )}
-            </IconButton>
-          </Tooltip>
-          <InputBase
-            className={classes.input}
-            placeholder="Search proxy logs…"
-            onFocus={() => setFilterOpen(true)}
-          />
-          <Tooltip title="Search">
-            <IconButton type="submit" className={classes.iconButton}>
-              <SearchIcon />
-            </IconButton>
-          </Tooltip>
-        </Paper>
-
-        <Popper
-          className={classes.filterPopper}
-          open={filterOpen}
-          anchorEl={filterRef.current}
-          placement="bottom-start"
-        >
-          <Paper className={classes.filterOptions}>
-            <FormControlLabel
-              control={
-                <Checkbox
-                  checked={
-                    filter?.httpRequestLogFilter?.onlyInScope ? true : false
-                  }
-                  disabled={filterLoading || setFilterLoading}
-                  onChange={(e) =>
-                    setFilterMutate({
-                      variables: {
-                        filter: {
-                          ...withoutTypename(filter?.httpRequestLogFilter),
-                          onlyInScope: e.target.checked,
-                        },
-                      },
-                    })
-                  }
-                />
-              }
-              label="Only show in-scope requests"
+              placeholder="Search proxy logs…"
+              value={searchExpr}
+              onChange={(e) => setSearchExpr(e.target.value)}
+              onFocus={() => setFilterOpen(true)}
             />
+            <Tooltip title="Search">
+              <IconButton type="submit" sx={{ padding: 1.25 }}>
+                <SearchIcon />
+              </IconButton>
+            </Tooltip>
+            <Popper
+              open={filterOpen}
+              anchorEl={filterRef.current}
+              placement="bottom"
+              style={{ zIndex: theme.zIndex.appBar }}
+            >
+              <Paper
+                sx={{
+                  width: 400,
+                  marginTop: 0.5,
+                  p: 1.5,
+                }}
+              >
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={filter?.httpRequestLogFilter?.onlyInScope ? true : false}
+                      disabled={filterLoading || setFilterLoading}
+                      onChange={(e) =>
+                        setFilterMutate({
+                          variables: {
+                            filter: {
+                              ...withoutTypename(filter?.httpRequestLogFilter),
+                              onlyInScope: e.target.checked,
+                            },
+                          },
+                        })
+                      }
+                    />
+                  }
+                  label="Only show in-scope requests"
+                />
+              </Paper>
+            </Popper>
           </Paper>
-        </Popper>
+        </ClickAwayListener>
+        <Box style={{ marginLeft: "auto" }}>
+          <Tooltip title="Clear all">
+            <IconButton onClick={clearHTTPConfirmationDialog.open}>
+              <DeleteIcon />
+            </IconButton>
+          </Tooltip>
+        </Box>
       </Box>
-    </ClickAwayListener>
+      <ConfirmationDialog
+        isOpen={clearHTTPConfirmationDialog.isOpen}
+        onClose={clearHTTPConfirmationDialog.close}
+        onConfirm={clearHTTPRequestLog}
+      >
+        All proxy logs are going to be removed. This action cannot be undone.
+      </ConfirmationDialog>
+    </Box>
+  );
+}
+
+function Error(props: { prefix: string; error?: Error }) {
+  if (!props.error) return null;
+
+  return (
+    <Box mb={4}>
+      <Alert severity="error">
+        {props.prefix}: {props.error.message}
+      </Alert>
+    </Box>
   );
 }
 

admin/src/components/reqlog/hooks/useClearHTTPRequestLog.ts

@@ -0,0 +1,16 @@
+import { gql, useMutation } from "@apollo/client";
+import { HTTP_REQUEST_LOGS } from "./useHttpRequestLogs";
+
+const CLEAR_HTTP_REQUEST_LOG = gql`
+  mutation ClearHTTPRequestLog {
+    clearHTTPRequestLog {
+      success
+    }
+  }
+`;
+
+export function useClearHTTPRequestLog() {
+  return useMutation(CLEAR_HTTP_REQUEST_LOG, {
+    refetchQueries: [{ query: HTTP_REQUEST_LOGS }],
+  });
+}

admin/src/components/reqlog/hooks/useHttpRequestLogs.ts

@@ -0,0 +1,22 @@
+import { gql, useQuery } from "@apollo/client";
+
+export const HTTP_REQUEST_LOGS = gql`
+  query HttpRequestLogs {
+    httpRequestLogs {
+      id
+      method
+      url
+      timestamp
+      response {
+        statusCode
+        statusReason
+      }
+    }
+  }
+`;
+
+export function useHttpRequestLogs() {
+  return useQuery(HTTP_REQUEST_LOGS, {
+    pollInterval: 1000,
+  });
+}

admin/src/components/scope/AddRule.tsx

@@ -3,20 +3,18 @@ import {
   Box,
   Button,
   CircularProgress,
-  createStyles,
   FormControl,
   FormControlLabel,
   FormLabel,
-  makeStyles,
   Radio,
   RadioGroup,
   TextField,
-  Theme,
-} from "@material-ui/core";
-import AddIcon from "@material-ui/icons/Add";
-import { Alert } from "@material-ui/lab";
+} from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import { Alert } from "@mui/lab";
 import React from "react";
 import { SCOPE } from "./Rules";
+import { ScopeRule } from "../../lib/scope";
 
 const SET_SCOPE = gql`
   mutation SetScope($scope: [ScopeRuleInput!]!) {
@@ -26,25 +24,15 @@ const SET_SCOPE = gql`
   }
 `;
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    ruleExpression: {
-      fontFamily: "'JetBrains Mono', monospace",
-    },
-  })
-);
-
 function AddRule(): JSX.Element {
-  const classes = useStyles();
-
   const [ruleType, setRuleType] = React.useState("url");
-  const [expression, setExpression] = React.useState(null);
+  const [expression, setExpression] = React.useState("");
 
   const client = useApolloClient();
   const [setScope, { error, loading }] = useMutation(SET_SCOPE, {
     onError() {},
     onCompleted() {
-      expression.value = "";
+      setExpression("");
     },
     update(_, { data: { setScope } }) {
       client.writeQuery({
@@ -59,21 +47,20 @@ function AddRule(): JSX.Element {
   };
   const handleSubmit = (e: React.SyntheticEvent) => {
     e.preventDefault();
-    let scope = [];
+    let scope: ScopeRule[] = [];
 
     try {
-      const data = client.readQuery({
+      const data = client.readQuery<{ scope: ScopeRule[] }>({
         query: SCOPE,
       });
-      scope = data.scope;
+      if (data) {
+        scope = data.scope;
+      }
     } catch (e) {}
 
     setScope({
       variables: {
-        scope: [
-          ...scope.map(({ url }) => ({ url })),
-          { url: expression.value },
-        ],
+        scope: [...scope.map(({ url }) => ({ url })), { url: expression }],
       },
     });
   };
@@ -87,15 +74,10 @@ function AddRule(): JSX.Element {
       )}
       <form onSubmit={handleSubmit} autoComplete="off">
         <FormControl fullWidth>
-          <FormLabel color="secondary" component="legend">
+          <FormLabel color="primary" component="legend">
             Rule Type
           </FormLabel>
-          <RadioGroup
-            row
-            name="ruleType"
-            value={ruleType}
-            onChange={handleTypeChange}
-          >
+          <RadioGroup row name="ruleType" value={ruleType} onChange={handleTypeChange}>
             <FormControlLabel value="url" control={<Radio />} label="URL" />
           </RadioGroup>
         </FormControl>
@@ -104,20 +86,17 @@ function AddRule(): JSX.Element {
             label="Expression"
             placeholder="^https:\/\/(.*)example.com(.*)"
             helperText="Regular expression to match on."
-            color="secondary"
+            color="primary"
             variant="outlined"
             required
+            value={expression}
+            onChange={(e) => setExpression(e.target.value)}
             InputProps={{
-              className: classes.ruleExpression,
+              sx: { fontFamily: "'JetBrains Mono', monospace" },
             }}
             InputLabelProps={{
               shrink: true,
             }}
-            inputProps={{
-              ref: (node) => {
-                setExpression(node);
-              },
-            }}
             margin="normal"
           />
         </FormControl>
@@ -125,7 +104,7 @@ function AddRule(): JSX.Element {
           <Button
             type="submit"
             variant="contained"
-            color="secondary"
+            color="primary"
             disabled={loading}
             startIcon={loading ? <CircularProgress size={22} /> : <AddIcon />}
           >

admin/src/components/scope/RuleListItem.tsx

@@ -8,11 +8,12 @@ import {
   ListItemSecondaryAction,
   ListItemText,
   Tooltip,
-} from "@material-ui/core";
-import CodeIcon from "@material-ui/icons/Code";
-import DeleteIcon from "@material-ui/icons/Delete";
+} from "@mui/material";
+import CodeIcon from "@mui/icons-material/Code";
+import DeleteIcon from "@mui/icons-material/Delete";
 import React from "react";
 import { SCOPE } from "./Rules";
+import { ScopeRule } from "../../lib/scope";
 
 const SET_SCOPE = gql`
   mutation SetScope($scope: [ScopeRuleInput!]!) {
@@ -22,7 +23,13 @@ const SET_SCOPE = gql`
   }
 `;
 
-function RuleListItem({ scope, rule, index }): JSX.Element {
+type RuleListItemProps = {
+  scope: ScopeRule[];
+  rule: ScopeRule;
+  index: number;
+};
+
+function RuleListItem({ scope, rule, index }: RuleListItemProps): JSX.Element {
   const client = useApolloClient();
   const [setScope, { loading }] = useMutation(SET_SCOPE, {
     update(_, { data: { setScope } }) {
@@ -65,8 +72,8 @@ function RuleListItem({ scope, rule, index }): JSX.Element {
   );
 }
 
-function RuleListItemText({ rule }): JSX.Element {
-  let text: JSX.Element;
+function RuleListItemText({ rule }: { rule: ScopeRule }): JSX.Element {
+  let text: JSX.Element = <div></div>;
 
   if (rule.url) {
     text = <code>{rule.url}</code>;
@@ -77,10 +84,14 @@ function RuleListItemText({ rule }): JSX.Element {
   return <ListItemText>{text}</ListItemText>;
 }
 
-function RuleTypeChip({ rule }): JSX.Element {
+function RuleTypeChip({ rule }: { rule: ScopeRule }): JSX.Element {
+  let label = "Unknown";
+
   if (rule.url) {
-    return <Chip label="URL" variant="outlined" />;
+    label = "URL";
   }
+
+  return <Chip label={label} variant="outlined" />;
 }
 
 export default RuleListItem;

admin/src/components/scope/Rules.tsx

@@ -1,22 +1,9 @@
 import { gql, useQuery } from "@apollo/client";
-import {
-  CircularProgress,
-  createStyles,
-  List,
-  makeStyles,
-  Theme,
-} from "@material-ui/core";
-import { Alert } from "@material-ui/lab";
+import { CircularProgress, List } from "@mui/material";
+import { Alert } from "@mui/lab";
 import React from "react";
 import RuleListItem from "./RuleListItem";
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    rulesList: {
-      backgroundColor: theme.palette.background.paper,
-    },
-  })
-);
+import { ScopeRule } from "../../lib/scope";
 
 export const SCOPE = gql`
   query Scope {
@@ -27,24 +14,20 @@ export const SCOPE = gql`
 `;
 
 function Rules(): JSX.Element {
-  const classes = useStyles();
-  const { loading, error, data } = useQuery(SCOPE);
+  const { loading, error, data } = useQuery<{ scope: ScopeRule[] }>(SCOPE);
 
   return (
     <div>
       {loading && <CircularProgress />}
-      {error && (
-        <Alert severity="error">Error fetching scope: {error.message}</Alert>
-      )}
-      {data?.scope.length > 0 && (
-        <List className={classes.rulesList}>
+      {error && <Alert severity="error">Error fetching scope: {error.message}</Alert>}
+      {data && data.scope.length > 0 && (
+        <List
+          sx={{
+            bgcolor: "background.paper",
+          }}
+        >
           {data.scope.map((rule, index) => (
-            <RuleListItem
-              key={index}
-              rule={rule}
-              scope={data.scope}
-              index={index}
-            />
+            <RuleListItem key={index} rule={rule} scope={data.scope} index={index} />
           ))}
         </List>
       )}

admin/src/lib/Project.ts

@@ -0,0 +1,5 @@
+export type Project = {
+    id: string
+    name: string
+    isActive: boolean
+}

admin/src/lib/createEmotionCache.ts

@@ -0,0 +1,7 @@
+import createCache from "@emotion/cache";
+
+// prepend: true moves MUI styles to the top of the <head> so they're loaded first.
+// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
+export default function createEmotionCache() {
+  return createCache({ key: "css", prepend: true });
+}

admin/src/lib/graphql.ts

@@ -1,7 +1,11 @@
 import { useMemo } from "react";
-import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
+import { ApolloClient, HttpLink, InMemoryCache, NormalizedCacheObject } from "@apollo/client";
+import merge from "deepmerge";
+import isEqual from "lodash/isEqual";
 
-let apolloClient;
+export const APOLLO_STATE_PROP_NAME = "__APOLLO_STATE__";
+
+let apolloClient: ApolloClient<NormalizedCacheObject>;
 
 function createApolloClient() {
   return new ApolloClient({
@@ -9,13 +13,7 @@ function createApolloClient() {
     link: new HttpLink({
       uri: "/api/graphql/",
     }),
-    cache: new InMemoryCache({
-      typePolicies: {
-        Project: {
-          keyFields: ["name"],
-        },
-      },
-    }),
+    cache: new InMemoryCache(),
   });
 }
 
@@ -27,9 +25,18 @@ export function initializeApollo(initialState = null) {
   if (initialState) {
     // Get existing cache, loaded during client side data fetching
     const existingCache = _apolloClient.extract();
-    // Restore the cache using the data passed from getStaticProps/getServerSideProps
-    // combined with the existing cached data
-    _apolloClient.cache.restore({ ...existingCache, ...initialState });
+
+    // Merge the existing cache into data passed from getStaticProps/getServerSideProps
+    const data = merge(initialState, existingCache, {
+      // combine arrays using object equality (like in sets)
+      arrayMerge: (destinationArray, sourceArray) => [
+        ...sourceArray,
+        ...destinationArray.filter((d) => sourceArray.every((s) => !isEqual(d, s))),
+      ],
+    });
+
+    // Restore the cache with the merged data
+    _apolloClient.cache.restore(data);
   }
   // For SSG and SSR always create a new Apollo Client
   if (typeof window === "undefined") return _apolloClient;
@@ -39,7 +46,16 @@ export function initializeApollo(initialState = null) {
   return _apolloClient;
 }
 
-export function useApollo(initialState) {
-  const store = useMemo(() => initializeApollo(initialState), [initialState]);
+export function addApolloState(client: ApolloClient<NormalizedCacheObject>, pageProps: any) {
+  if (pageProps?.props) {
+    pageProps.props[APOLLO_STATE_PROP_NAME] = client.cache.extract();
+  }
+
+  return pageProps;
+}
+
+export function useApollo(pageProps: any) {
+  const state = pageProps[APOLLO_STATE_PROP_NAME];
+  const store = useMemo(() => initializeApollo(state), [state]);
   return store;
 }

admin/src/lib/omitTypename.ts

@@ -1,4 +1,4 @@
-const omitTypename = (key, value) => (key === "__typename" ? undefined : value);
+const omitTypename = (key: string, value: any) => (key === "__typename" ? undefined : value);
 
 export function withoutTypename(input: any): any {
   return JSON.parse(JSON.stringify(input), omitTypename);

admin/src/lib/requestLogs.ts

@@ -0,0 +1,24 @@
+
+export type RequestLog = {
+    id: string
+    url: string
+    method: string
+    proto: string
+    headers: HTTPHeader[]
+    body?: string
+    timestamp: string
+    response?: ResponseLog
+}
+
+export type ResponseLog = {
+    proto: string
+    statusCode: number
+    statusReason: string
+    body?: string
+    headers: HTTPHeader[]
+}
+
+export type HTTPHeader = {
+    key: string
+    value: string
+}

admin/src/lib/scope.ts

@@ -0,0 +1,3 @@
+export type ScopeRule = {
+    url?: string
+}

admin/src/lib/theme.ts

@@ -1,49 +1,51 @@
-import { createMuiTheme } from "@material-ui/core/styles";
-import grey from "@material-ui/core/colors/grey";
-import teal from "@material-ui/core/colors/teal";
+import { createTheme } from "@mui/material/styles";
+import * as colors from "@mui/material/colors";
 
-const theme = createMuiTheme({
+const heading = {
+  fontFamily: "'JetBrains Mono', monospace",
+  fontWeight: 600,
+};
+
+let theme = createTheme({
   palette: {
-    type: "dark",
+    mode: "dark",
     primary: {
-      main: grey[900],
+      main: colors.teal["A400"],
     },
     secondary: {
-      main: teal["A400"],
-    },
-    info: {
-      main: teal["A400"],
-    },
-    success: {
-      main: teal["A400"],
+      main: colors.grey[900],
+      light: "#333",
+      dark: colors.common.black,
     },
   },
   typography: {
-    h2: {
-      fontFamily: "'JetBrains Mono', monospace",
-      fontWeight: 600,
+    h2: heading,
+    h3: heading,
+    h4: heading,
+    h5: heading,
+    h6: heading,
+  },
+});
+
+theme = createTheme(theme, {
+  palette: {
+    background: {
+      default: theme.palette.secondary.main,
+      paper: theme.palette.secondary.light,
     },
-    h3: {
-      fontFamily: "'JetBrains Mono', monospace",
-      fontWeight: 600,
+    info: {
+      main: theme.palette.primary.main,
     },
-    h4: {
-      fontFamily: "'JetBrains Mono', monospace",
-      fontWeight: 600,
-    },
-    h5: {
-      fontFamily: "'JetBrains Mono', monospace",
-      fontWeight: 600,
-    },
-    h6: {
-      fontFamily: "'JetBrains Mono', monospace",
-      fontWeight: 600,
+    success: {
+      main: theme.palette.primary.main,
     },
   },
-  overrides: {
+  components: {
     MuiTableCell: {
-      stickyHeader: {
-        backgroundColor: grey[900],
+      styleOverrides: {
+        stickyHeader: {
+          backgroundColor: theme.palette.secondary.dark,
+        },
       },
     },
   },

admin/src/pages/_app.tsx

@@ -1,32 +1,31 @@
-import React from "react";
+import * as React from "react";
+import Head from "next/head";
 import { AppProps } from "next/app";
 import { ApolloProvider } from "@apollo/client";
-import Head from "next/head";
-import { ThemeProvider } from "@material-ui/core/styles";
-import CssBaseline from "@material-ui/core/CssBaseline";
+import { ThemeProvider } from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+import { CacheProvider, EmotionCache } from "@emotion/react";
 
+import createEmotionCache from "../lib/createEmotionCache";
 import theme from "../lib/theme";
 import { useApollo } from "../lib/graphql";
 
-function App({ Component, pageProps }: AppProps): JSX.Element {
-  const apolloClient = useApollo(pageProps.initialApolloState);
+// Client-side cache, shared for the whole session of the user in the browser.
+const clientSideEmotionCache = createEmotionCache();
 
-  React.useEffect(() => {
-    // Remove the server-side injected CSS.
-    const jssStyles = document.querySelector("#jss-server-side");
-    if (jssStyles) {
-      jssStyles.parentElement.removeChild(jssStyles);
-    }
-  }, []);
+interface MyAppProps extends AppProps {
+  emotionCache?: EmotionCache;
+}
+
+export default function MyApp(props: MyAppProps) {
+  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
+  const apolloClient = useApollo(pageProps);
 
   return (
-    <React.Fragment>
+    <CacheProvider value={emotionCache}>
       <Head>
         <title>Hetty://</title>
-        <meta
-          name="viewport"
-          content="minimum-scale=1, initial-scale=1, width=device-width"
-        />
+        <meta name="viewport" content="initial-scale=1, width=device-width" />
       </Head>
       <ApolloProvider client={apolloClient}>
         <ThemeProvider theme={theme}>
@@ -34,8 +33,6 @@ function App({ Component, pageProps }: AppProps): JSX.Element {
           <Component {...pageProps} />
         </ThemeProvider>
       </ApolloProvider>
-    </React.Fragment>
+    </CacheProvider>
   );
 }
-
-export default App;

admin/src/pages/_document.tsx

@@ -1,7 +1,8 @@
-import React from "react";
+import * as React from "react";
 import Document, { Html, Head, Main, NextScript } from "next/document";
-import { ServerStyleSheets } from "@material-ui/core/styles";
+import createEmotionServer from "@emotion/server/create-instance";
 
+import createEmotionCache from "../lib/createEmotionCache";
 import theme from "../lib/theme";
 
 export default class MyDocument extends Document {
@@ -11,14 +12,9 @@ export default class MyDocument extends Document {
         <Head>
           <meta name="theme-color" content={theme.palette.primary.main} />
           <link rel="stylesheet" href="/style.css" />
-          <link
-            rel="stylesheet"
-            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
-          />
-          <link
-            rel="stylesheet"
-            href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap"
-          />
+          <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+          <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap" />
+          {(this.props as any).emotionStyleTags}
         </Head>
         <body>
           <Main />
@@ -30,25 +26,60 @@ export default class MyDocument extends Document {
 }
 
 // `getInitialProps` belongs to `_document` (instead of `_app`),
-// it's compatible with server-side generation (SSG).
+// it's compatible with static-site generation (SSG).
 MyDocument.getInitialProps = async (ctx) => {
-  // Render app and page and get the context of the page with collected side effects.
-  const sheets = new ServerStyleSheets();
+  // Resolution order
+  //
+  // On the server:
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. document.getInitialProps
+  // 4. app.render
+  // 5. page.render
+  // 6. document.render
+  //
+  // On the server with error:
+  // 1. document.getInitialProps
+  // 2. app.render
+  // 3. page.render
+  // 4. document.render
+  //
+  // On the client
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. app.render
+  // 4. page.render
+
   const originalRenderPage = ctx.renderPage;
 
+  // You can consider sharing the same emotion cache between all the SSR requests to speed up performance.
+  // However, be aware that it can have global side effects.
+  const cache = createEmotionCache();
+  const { extractCriticalToChunks } = createEmotionServer(cache);
+
   ctx.renderPage = () =>
     originalRenderPage({
-      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
+      enhanceApp: (App: any) =>
+        function EnhanceApp(props) {
+          return <App emotionCache={cache} {...props} />;
+        },
     });
 
   const initialProps = await Document.getInitialProps(ctx);
+  // This is important. It prevents emotion to render invalid HTML.
+  // See https://github.com/mui-org/material-ui/issues/26561#issuecomment-855286153
+  const emotionStyles = extractCriticalToChunks(initialProps.html);
+  const emotionStyleTags = emotionStyles.styles.map((style) => (
+    <style
+      data-emotion={`${style.key} ${style.ids.join(" ")}`}
+      key={style.key}
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: style.css }}
+    />
+  ));
 
   return {
     ...initialProps,
-    // Styles fragment is rendered after the app and page rendering finish.
-    styles: [
-      ...React.Children.toArray(initialProps.styles),
-      sheets.getStyleElement(),
-    ],
+    emotionStyleTags,
   };
 };

admin/src/pages/get-started/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Link as MaterialLink, Typography } from "@material-ui/core";
+import { Box, Link as MaterialLink, Typography } from "@mui/material";
 import Link from "next/link";
 
 import React from "react";
@@ -13,17 +13,13 @@ function Index(): JSX.Element {
           <Typography variant="h4">Get started</Typography>
         </Box>
         <Typography paragraph>
-          You’ve loaded a (new) project. What’s next? You can now use the MITM
-          proxy and review HTTP requests and responses via the{" "}
+          You’ve loaded a (new) project. What’s next? You can now use the MITM proxy and review HTTP requests and
+          responses via the{" "}
           <Link href="/proxy/logs" passHref>
-            <MaterialLink color="secondary">Proxy logs</MaterialLink>
+            <MaterialLink color="primary">Proxy logs</MaterialLink>
           </Link>
           . Stuck? Ask for help on the{" "}
-          <MaterialLink
-            href="https://github.com/dstotijn/hetty/discussions"
-            color="secondary"
-            target="_blank"
-          >
+          <MaterialLink href="https://github.com/dstotijn/hetty/discussions" color="primary" target="_blank">
             Discussions forum
           </MaterialLink>
           .

admin/src/pages/index.tsx

@@ -1,253 +1,53 @@
-import {
-  Avatar,
-  Box,
-  Button,
-  CircularProgress,
-  createStyles,
-  List,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
-  makeStyles,
-  TextField,
-  Theme,
-  Typography,
-} from "@material-ui/core";
-import AddIcon from "@material-ui/icons/Add";
-import FolderIcon from "@material-ui/icons/Folder";
-import DescriptionIcon from "@material-ui/icons/Description";
-import PlayArrowIcon from "@material-ui/icons/PlayArrow";
+import { Box, Button, Typography } from "@mui/material";
+import FolderIcon from "@mui/icons-material/Folder";
 import Link from "next/link";
 
-import { useState } from "react";
-import { gql, useMutation, useQuery } from "@apollo/client";
-import { useRouter } from "next/router";
-
 import Layout, { Page } from "../components/Layout";
-import { Alert } from "@material-ui/lab";
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    titleHighlight: {
-      color: theme.palette.secondary.main,
-    },
-    subtitle: {
-      fontSize: "1.6rem",
-      width: "60%",
-      lineHeight: 2,
-      marginBottom: theme.spacing(5),
-    },
-    projectName: {
-      marginTop: -6,
-      marginRight: theme.spacing(2),
-    },
-    button: {
-      marginRight: theme.spacing(2),
-    },
-    activeProject: {
-      color: theme.palette.getContrastText(theme.palette.secondary.main),
-      backgroundColor: theme.palette.secondary.main,
-    },
-  })
-);
-
-const ACTIVE_PROJECT = gql`
-  query ActiveProject {
-    activeProject {
-      name
-    }
-  }
-`;
-
-const OPEN_PROJECT = gql`
-  mutation OpenProject($name: String!) {
-    openProject(name: $name) {
-      name
-      isActive
-    }
-  }
-`;
 
 function Index(): JSX.Element {
-  const classes = useStyles();
-  const router = useRouter();
-  const [input, setInput] = useState(null);
-  const { error: activeProjErr, data: activeProjData } = useQuery(
-    ACTIVE_PROJECT,
-    {
-      pollInterval: 1000,
-    }
-  );
-  const [
-    openProject,
-    { error: openProjErr, data: openProjData, loading: openProjLoading },
-  ] = useMutation(OPEN_PROJECT, {
-    onError: () => {},
-    onCompleted({ openProject }) {
-      if (openProject) {
-        router.push("/get-started");
-      }
-    },
-    update(cache, { data: { openProject } }) {
-      cache.modify({
-        fields: {
-          activeProject() {
-            const activeProjRef = cache.writeFragment({
-              id: openProject.name,
-              data: openProject,
-              fragment: gql`
-                fragment ActiveProject on Project {
-                  name
-                  isActive
-                  type
-                }
-              `,
-            });
-            return activeProjRef;
-          },
-          projects(_, { DELETE }) {
-            cache.writeFragment({
-              id: openProject.name,
-              data: openProject,
-              fragment: gql`
-                fragment OpenProject on Project {
-                  name
-                  isActive
-                  type
-                }
-              `,
-            });
-            return DELETE;
-          },
-        },
-      });
-    },
-  });
-
-  const handleForm = (e: React.SyntheticEvent) => {
-    e.preventDefault();
-    openProject({ variables: { name: input.value } });
-  };
-
-  if (activeProjErr) {
-    return (
-      <Layout page={Page.Home} title="">
-        <Alert severity="error">
-          Error fetching active project: {activeProjErr.message}
-        </Alert>
-      </Layout>
-    );
-  }
+  const highlightSx = { color: "primary.main" };
 
   return (
     <Layout page={Page.Home} title="">
       <Box p={4}>
         <Box mb={4} width="60%">
           <Typography variant="h2">
-            <span className={classes.titleHighlight}>Hetty://</span>
+            <Box component="span" sx={highlightSx}>
+              Hetty://
+            </Box>
             <br />
             The simple HTTP toolkit for security research.
           </Typography>
         </Box>
 
-        <Typography className={classes.subtitle} paragraph>
-          What if security testing was intuitive, powerful, and good looking?
-          What if it was <strong>free</strong>, instead of $400 per year?{" "}
-          <span className={classes.titleHighlight}>Hetty</span> is listening on{" "}
-          <code>:8080</code>…
+        <Typography
+          paragraph
+          sx={{
+            fontSize: "1.6rem",
+            width: "60%",
+            lineHeight: 2,
+            mb: 5,
+          }}
+        >
+          Welcome to{" "}
+          <Box component="span" sx={highlightSx}>
+            Hetty
+          </Box>
+          . Get started by creating a project.
         </Typography>
 
-        {activeProjData?.activeProject?.name ? (
-          <div>
-            <Box mb={1}>
-              <Typography variant="h6">Active project:</Typography>
-            </Box>
-            <Box ml={-2} mb={2}>
-              <List>
-                <ListItem>
-                  <ListItemAvatar>
-                    <Avatar className={classes.activeProject}>
-                      <DescriptionIcon />
-                    </Avatar>
-                  </ListItemAvatar>
-                  <ListItemText primary={activeProjData.activeProject.name} />
-                </ListItem>
-              </List>
-            </Box>
-            <div>
-              <Link href="/get-started" passHref>
-                <Button
-                  className={classes.button}
-                  variant="outlined"
-                  component="a"
-                  color="secondary"
-                  size="large"
-                  startIcon={<PlayArrowIcon />}
-                >
-                  Get started
-                </Button>
-              </Link>
-              <Link href="/projects" passHref>
-                <Button
-                  className={classes.button}
-                  variant="outlined"
-                  component="a"
-                  size="large"
-                  startIcon={<FolderIcon />}
-                >
-                  Manage projects
-                </Button>
-              </Link>
-            </div>
-          </div>
-        ) : (
-          <form onSubmit={handleForm} autoComplete="off">
-            <TextField
-              className={classes.projectName}
-              color="secondary"
-              inputProps={{
-                id: "projectName",
-                ref: (node) => {
-                  setInput(node);
-                },
-              }}
-              label="Project name"
-              placeholder="Project name…"
-              error={Boolean(openProjErr)}
-              helperText={openProjErr && openProjErr.message}
-            />
-            <Button
-              className={classes.button}
-              type="submit"
-              variant="contained"
-              color="secondary"
-              size="large"
-              disabled={
-                openProjLoading || Boolean(openProjData?.openProject?.name)
-              }
-              startIcon={
-                openProjLoading || openProjData?.openProject ? (
-                  <CircularProgress size={22} />
-                ) : (
-                  <AddIcon />
-                )
-              }
-            >
-              Create project
-            </Button>
-            <Link href="/projects" passHref>
-              <Button
-                className={classes.button}
-                variant="outlined"
-                component="a"
-                size="large"
-                startIcon={<FolderIcon />}
-              >
-                Open project…
-              </Button>
-            </Link>
-          </form>
-        )}
+        <Link href="/projects" passHref>
+          <Button
+            sx={{ mr: 2 }}
+            variant="contained"
+            color="primary"
+            component="a"
+            size="large"
+            startIcon={<FolderIcon />}
+          >
+            Manage projects
+          </Button>
+        </Link>
       </Box>
     </Layout>
   );

admin/src/pages/projects/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Divider, Grid, Typography } from "@material-ui/core";
+import { Box, Divider, Grid, Typography } from "@mui/material";
 import Layout, { Page } from "../../components/Layout";
 import NewProject from "../../components/projects/NewProject";
 import ProjectList from "../../components/projects/ProjectList";
@@ -11,8 +11,7 @@ function Index(): JSX.Element {
           <Typography variant="h4">Projects</Typography>
         </Box>
         <Typography paragraph>
-          Projects contain settings and data generated/processed by Hetty. They
-          are stored as SQLite database files on disk.
+          Projects contain settings and data generated/processed by Hetty. They are stored in a single database on disk.
         </Typography>
         <Box my={4}>
           <Divider />

admin/src/pages/proxy/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { Button, Typography } from "@material-ui/core";
-import ListIcon from "@material-ui/icons/List";
+import { Button, Typography } from "@mui/material";
+import ListIcon from "@mui/icons-material/List";
 import Link from "next/link";
 
 import Layout, { Page } from "../../components/Layout";
@@ -10,13 +10,7 @@ function Index(): JSX.Element {
     <Layout page={Page.ProxySetup} title="Proxy setup">
       <Typography paragraph>Coming soon…</Typography>
       <Link href="/proxy/logs" passHref>
-        <Button
-          variant="contained"
-          color="secondary"
-          component="a"
-          size="large"
-          startIcon={<ListIcon />}
-        >
+        <Button variant="contained" color="primary" component="a" size="large" startIcon={<ListIcon />}>
           View logs
         </Button>
       </Link>

admin/src/pages/proxy/logs/index.tsx

@@ -1,4 +1,4 @@
-import { Box } from "@material-ui/core";
+import { Box } from "@mui/material";
 
 import LogsOverview from "../../../components/reqlog/LogsOverview";
 import Layout, { Page } from "../../../components/Layout";

admin/src/pages/scope/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Divider, Grid, Typography } from "@material-ui/core";
+import { Box, Divider, Grid, Typography } from "@mui/material";
 import React from "react";
 
 import Layout, { Page } from "../../components/Layout";
@@ -13,11 +13,9 @@ function Index(): JSX.Element {
           <Typography variant="h4">Scope</Typography>
         </Box>
         <Typography paragraph>
-          Scope rules are used by various modules in Hetty and can influence
-          their behavior. For example: the Proxy logs module can match incoming
-          requests against scope rules and decide its behavior (e.g. log or
-          bypass) based on the outcome of the match. All scope configuration is
-          stored per project.
+          Scope rules are used by various modules in Hetty and can influence their behavior. For example: the Proxy logs
+          module can match incoming requests against scope rules and decide its behavior (e.g. log or bypass) based on
+          the outcome of the match. All scope configuration is stored per project.
         </Typography>
         <Box my={4}>
           <Divider />

admin/src/pages/sender/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography } from "@material-ui/core";
+import { Box, Typography } from "@mui/material";
 
 import Layout, { Page } from "../../components/Layout";
 

admin/tsconfig.json

@@ -8,7 +8,7 @@
     ],
     "allowJs": true,
     "skipLibCheck": true,
-    "strict": false,
+    "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "esModuleInterop": true,
@@ -16,7 +16,8 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "incremental": true
   },
   "include": [
     "next-env.d.ts",

cmd/hetty/main.go

@@ -2,105 +2,122 @@ package main
 
 import (
 	"crypto/tls"
+	"embed"
+	"errors"
 	"flag"
+	"fmt"
+	"io/fs"
 	"log"
 	"net"
 	"net/http"
 	"os"
 	"strings"
 
-	rice "github.com/GeertJohan/go.rice"
+	"github.com/99designs/gqlgen/graphql/handler"
+	"github.com/99designs/gqlgen/graphql/playground"
+	badgerdb "github.com/dgraph-io/badger/v3"
+	"github.com/gorilla/mux"
+	"github.com/mitchellh/go-homedir"
+
 	"github.com/dstotijn/hetty/pkg/api"
-	"github.com/dstotijn/hetty/pkg/db/sqlite"
+	"github.com/dstotijn/hetty/pkg/db/badger"
 	"github.com/dstotijn/hetty/pkg/proj"
 	"github.com/dstotijn/hetty/pkg/proxy"
 	"github.com/dstotijn/hetty/pkg/reqlog"
 	"github.com/dstotijn/hetty/pkg/scope"
-
-	"github.com/99designs/gqlgen/graphql/handler"
-	"github.com/99designs/gqlgen/graphql/playground"
-	"github.com/gorilla/mux"
-	"github.com/mitchellh/go-homedir"
 )
 
+var version = "0.0.0"
+
+// Flag variables.
 var (
 	caCertFile string
 	caKeyFile  string
-	projPath   string
+	dbPath     string
 	addr       string
-	adminPath  string
 )
 
+//go:embed admin
+//go:embed admin/_next/static
+//go:embed admin/_next/static/chunks/pages/*.js
+//go:embed admin/_next/static/*/*.js
+var adminContent embed.FS
+
 func main() {
-	flag.StringVar(&caCertFile, "cert", "~/.hetty/hetty_cert.pem", "CA certificate filepath. Creates a new CA certificate is file doesn't exist")
-	flag.StringVar(&caKeyFile, "key", "~/.hetty/hetty_key.pem", "CA private key filepath. Creates a new CA private key if file doesn't exist")
-	flag.StringVar(&projPath, "projects", "~/.hetty/projects", "Projects directory path")
+	if err := run(); err != nil {
+		log.Fatalf("[ERROR]: %v", err)
+	}
+}
+
+func run() error {
+	flag.StringVar(&caCertFile, "cert", "~/.hetty/hetty_cert.pem",
+		"CA certificate filepath. Creates a new CA certificate if file doesn't exist")
+	flag.StringVar(&caKeyFile, "key", "~/.hetty/hetty_key.pem",
+		"CA private key filepath. Creates a new CA private key if file doesn't exist")
+	flag.StringVar(&dbPath, "db", "~/.hetty/db", "Database directory path")
 	flag.StringVar(&addr, "addr", ":8080", "TCP address to listen on, in the form \"host:port\"")
-	flag.StringVar(&adminPath, "adminPath", "", "File path to admin build")
 	flag.Parse()
 
 	// Expand `~` in filepaths.
 	caCertFile, err := homedir.Expand(caCertFile)
 	if err != nil {
-		log.Fatalf("[FATAL] Could not parse CA certificate filepath: %v", err)
+		return fmt.Errorf("could not parse CA certificate filepath: %w", err)
 	}
+
 	caKeyFile, err := homedir.Expand(caKeyFile)
 	if err != nil {
-		log.Fatalf("[FATAL] Could not parse CA private key filepath: %v", err)
+		return fmt.Errorf("could not parse CA private key filepath: %w", err)
 	}
-	projPath, err := homedir.Expand(projPath)
+
+	dbPath, err := homedir.Expand(dbPath)
 	if err != nil {
-		log.Fatalf("[FATAL] Could not parse projects filepath: %v", err)
+		return fmt.Errorf("could not parse projects filepath: %w", err)
 	}
 
 	// Load existing CA certificate and key from disk, or generate and write
 	// to disk if no files exist yet.
 	caCert, caKey, err := proxy.LoadOrCreateCA(caKeyFile, caCertFile)
 	if err != nil {
-		log.Fatalf("[FATAL] Could not create/load CA key pair: %v", err)
+		return fmt.Errorf("could not create/load CA key pair: %w", err)
 	}
 
-	db, err := sqlite.New(projPath)
+	badger, err := badger.OpenDatabase(badgerdb.DefaultOptions(dbPath))
 	if err != nil {
-		log.Fatalf("[FATAL] Could not initialize database client: %v", err)
+		return fmt.Errorf("could not open badger database: %w", err)
 	}
+	defer badger.Close()
 
-	projService, err := proj.NewService(db)
-	if err != nil {
-		log.Fatalf("[FATAL] Could not create new project service: %v", err)
-	}
-	defer projService.Close()
-
-	scope := scope.New(db, projService)
+	scope := &scope.Scope{}
 
 	reqLogService := reqlog.NewService(reqlog.Config{
-		Scope:          scope,
-		ProjectService: projService,
-		Repository:     db,
+		Scope:      scope,
+		Repository: badger,
 	})
 
+	projService, err := proj.NewService(proj.Config{
+		Repository:    badger,
+		ReqLogService: reqLogService,
+		Scope:         scope,
+	})
+	if err != nil {
+		return fmt.Errorf("could not create new project service: %w", err)
+	}
+
 	p, err := proxy.NewProxy(caCert, caKey)
 	if err != nil {
-		log.Fatalf("[FATAL] Could not create Proxy: %v", err)
+		return fmt.Errorf("could not create proxy: %w", err)
 	}
 
 	p.UseRequestModifier(reqLogService.RequestModifier)
 	p.UseResponseModifier(reqLogService.ResponseModifier)
 
-	var adminHandler http.Handler
-	if adminPath == "" {
-		// Used for embedding with `rice`.
-		box, err := rice.FindBox("../../admin/dist")
-		if err != nil {
-			log.Fatalf("[FATAL] Could not find embedded admin resources: %v", err)
-		}
-		adminHandler = http.FileServer(box.HTTPBox())
-	} else {
-		adminHandler = http.FileServer(http.Dir(adminPath))
+	fsSub, err := fs.Sub(adminContent, "admin")
+	if err != nil {
+		return fmt.Errorf("could not prepare subtree file system: %w", err)
 	}
 
+	adminHandler := http.FileServer(http.FS(fsSub))
 	router := mux.NewRouter().SkipClean(true)
-
 	adminRouter := router.MatcherFunc(func(req *http.Request, match *mux.RouteMatch) bool {
 		hostname, _ := os.Hostname()
 		host, _, _ := net.SplitHostPort(req.Host)
@@ -109,11 +126,11 @@ func main() {
 
 	// GraphQL server.
 	adminRouter.Path("/api/playground/").Handler(playground.Handler("GraphQL Playground", "/api/graphql/"))
-	adminRouter.Path("/api/graphql/").Handler(handler.NewDefaultServer(api.NewExecutableSchema(api.Config{Resolvers: &api.Resolver{
-		RequestLogService: reqLogService,
-		ProjectService:    projService,
-		ScopeService:      scope,
-	}})))
+	adminRouter.Path("/api/graphql/").Handler(
+		handler.NewDefaultServer(api.NewExecutableSchema(api.Config{Resolvers: &api.Resolver{
+			RequestLogService: reqLogService,
+			ProjectService:    projService,
+		}})))
 
 	// Admin interface.
 	adminRouter.PathPrefix("").Handler(adminHandler)
@@ -127,9 +144,12 @@ func main() {
 		TLSNextProto: map[string]func(*http.Server, *tls.Conn, http.Handler){}, // Disable HTTP/2
 	}
 
-	log.Printf("[INFO] Running server on %v ...", addr)
+	log.Printf("[INFO] Hetty (v%v) is running on %v ...", version, addr)
+
 	err = s.ListenAndServe()
-	if err != nil && err != http.ErrServerClosed {
-		log.Fatalf("[FATAL] HTTP server closed: %v", err)
+	if err != nil && errors.Is(err, http.ErrServerClosed) {
+		return fmt.Errorf("http server closed unexpected: %w", err)
 	}
+
+	return nil
 }

docs/.gitignore

@@ -0,0 +1,12 @@
+pids
+logs
+node_modules
+npm-debug.log
+coverage/
+run
+dist
+.DS_Store
+.nyc_output
+.basement
+config.local.js
+basement_dist

docs/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "hetty-docs",
+  "version": "0.1.0",
+  "description": "An HTTP toolkit for security research.",
+  "main": "index.js",
+  "authors": {
+    "name": "David Stotijn",
+    "email": "dstotijn@gmail.com"
+  },
+  "repository": "github.com/dstotijn/hetty/docs",
+  "scripts": {
+    "dev": "vuepress dev src",
+    "build": "vuepress build src"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "markdown-it-imsize": "^2.0.1",
+    "vuepress": "^1.5.3"
+  },
+  "dependencies": {}
+}

docs/src/.vuepress/config.js

@@ -0,0 +1,77 @@
+const { description } = require("../../package");
+
+module.exports = {
+  port: 3000,
+  title: "Hetty",
+  description: description,
+  head: [
+    ["meta", { name: "theme-color", content: "#30e3b7" }],
+    ["meta", { name: "apple-mobile-web-app-capable", content: "yes" }],
+    [
+      "meta",
+      { name: "apple-mobile-web-app-status-bar-style", content: "black" },
+    ],
+    [
+      "meta",
+      {
+        property: "og:title",
+        content: "Hetty",
+      },
+    ],
+    [
+      "meta",
+      {
+        property: "og:description",
+        content: "An HTTP toolkit for security research.",
+      },
+    ],
+    [
+      "meta",
+      {
+        property: "og:image",
+        content: "https://hetty.xyz/assets/hetty_v0.2.0_header.png",
+      },
+    ],
+  ],
+  themeConfig: {
+    repo: "dstotijn/hetty",
+    editLinks: true,
+    docsDir: "docs/src",
+    editLinkText: "",
+    lastUpdated: true,
+    logo: "/assets/logo.png",
+    nav: [
+      {
+        text: "Guide",
+        link: "/guide/",
+      },
+      {
+        text: "Appendix",
+        link: "/appendix/",
+      },
+    ],
+    sidebar: {
+      "/guide/": [
+        {
+          title: "Guide",
+          collapsable: false,
+          children: ["", "getting-started", "modules"],
+        },
+      ],
+      "/appendix/": [
+        {
+          title: "Appendix",
+          collapsable: false,
+          children: [""],
+        },
+      ],
+    },
+  },
+  plugins: ["@vuepress/plugin-back-to-top", "@vuepress/plugin-medium-zoom"],
+  markdown: {
+    toc: { includeLevel: [2] },
+    extendMarkdown: (md) => {
+      md.use(require("markdown-it-imsize"));
+    },
+  },
+};

docs/src/.vuepress/enhanceApp.js

@@ -0,0 +1,14 @@
+/**
+ * Client app enhancement file.
+ *
+ * https://v1.vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements
+ */
+
+export default ({
+  Vue, // the version of Vue being used in the VuePress app
+  options, // the options for the root Vue instance
+  router, // the router instance for the app
+  siteData // site metadata
+}) => {
+  // ...apply enhancements for the site.
+}

docs/src/.vuepress/styles/index.styl

@@ -0,0 +1,9 @@
+/**
+ * Custom Styles here.
+ *
+ * ref：https://v1.vuepress.vuejs.org/config/#index-styl
+ */
+
+.home .hero img
+  width 450px
+  max-width 100%!important

docs/src/.vuepress/styles/palette.styl

@@ -0,0 +1,11 @@
+/**
+ * Custom palette here.
+ *
+ * ref：https://v1.vuepress.vuejs.org/zh/config/#palette-styl
+ */
+
+$accentColor = #2CC09B
+$textColor = #2c3e50
+$borderColor = #eaecef
+$codeBgColor = #282c34
+$badgeTipColor = #2CC09B

docs/src/.vuepress/theme/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018-present, Yuxi (Evan) You
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

docs/src/.vuepress/theme/components/AlgoliaSearchBox.vue

@@ -0,0 +1,171 @@
+<template>
+  <form
+    id="search-form"
+    class="algolia-search-wrapper search-box"
+    role="search"
+  >
+    <input
+      id="algolia-search-input"
+      class="search-query"
+      :placeholder="placeholder"
+    >
+  </form>
+</template>
+
+<script>
+export default {
+  name: 'AlgoliaSearchBox',
+
+  props: ['options'],
+
+  data () {
+    return {
+      placeholder: undefined
+    }
+  },
+
+  watch: {
+    $lang (newValue) {
+      this.update(this.options, newValue)
+    },
+
+    options (newValue) {
+      this.update(newValue, this.$lang)
+    }
+  },
+
+  mounted () {
+    this.initialize(this.options, this.$lang)
+    this.placeholder = this.$site.themeConfig.searchPlaceholder || ''
+  },
+
+  methods: {
+    initialize (userOptions, lang) {
+      Promise.all([
+        import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.js'),
+        import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.css')
+      ]).then(([docsearch]) => {
+        docsearch = docsearch.default
+        const { algoliaOptions = {}} = userOptions
+        docsearch(Object.assign(
+          {},
+          userOptions,
+          {
+            inputSelector: '#algolia-search-input',
+            // #697 Make docsearch work well at i18n mode.
+            algoliaOptions: Object.assign({
+              'facetFilters': [`lang:${lang}`].concat(algoliaOptions.facetFilters || [])
+            }, algoliaOptions),
+            handleSelected: (input, event, suggestion) => {
+              const { pathname, hash } = new URL(suggestion.url)
+              const routepath = pathname.replace(this.$site.base, '/')
+              const _hash = decodeURIComponent(hash)
+              this.$router.push(`${routepath}${_hash}`)
+            }
+          }
+        ))
+      })
+    },
+
+    update (options, lang) {
+      this.$el.innerHTML = '<input id="algolia-search-input" class="search-query">'
+      this.initialize(options, lang)
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.algolia-search-wrapper
+  & > span
+    vertical-align middle
+  .algolia-autocomplete
+    line-height normal
+    .ds-dropdown-menu
+      background-color #fff
+      border 1px solid #999
+      border-radius 4px
+      font-size 16px
+      margin 6px 0 0
+      padding 4px
+      text-align left
+      &:before
+        border-color #999
+      [class*=ds-dataset-]
+        border none
+        padding 0
+      .ds-suggestions
+        margin-top 0
+      .ds-suggestion
+        border-bottom 1px solid $borderColor
+    .algolia-docsearch-suggestion--highlight
+      color #2c815b
+    .algolia-docsearch-suggestion
+      border-color $borderColor
+      padding 0
+      .algolia-docsearch-suggestion--category-header
+        padding 5px 10px
+        margin-top 0
+        background $accentColor
+        color #fff
+        font-weight 600
+        .algolia-docsearch-suggestion--highlight
+          background rgba(255, 255, 255, 0.6)
+      .algolia-docsearch-suggestion--wrapper
+        padding 0
+      .algolia-docsearch-suggestion--title
+        font-weight 600
+        margin-bottom 0
+        color $textColor
+      .algolia-docsearch-suggestion--subcategory-column
+        vertical-align top
+        padding 5px 7px 5px 5px
+        border-color $borderColor
+        background #f1f3f5
+        &:after
+          display none
+      .algolia-docsearch-suggestion--subcategory-column-text
+        color #555
+    .algolia-docsearch-footer
+      border-color $borderColor
+    .ds-cursor .algolia-docsearch-suggestion--content
+      background-color #e7edf3 !important
+      color $textColor
+
+@media (min-width: $MQMobile)
+  .algolia-search-wrapper
+    .algolia-autocomplete
+      .algolia-docsearch-suggestion
+        .algolia-docsearch-suggestion--subcategory-column
+          float none
+          width 150px
+          min-width 150px
+          display table-cell
+        .algolia-docsearch-suggestion--content
+          float none
+          display table-cell
+          width 100%
+          vertical-align top
+        .ds-dropdown-menu
+          min-width 515px !important
+
+@media (max-width: $MQMobile)
+  .algolia-search-wrapper
+    .ds-dropdown-menu
+      min-width calc(100vw - 4rem) !important
+      max-width calc(100vw - 4rem) !important
+    .algolia-docsearch-suggestion--wrapper
+      padding 5px 7px 5px 5px !important
+    .algolia-docsearch-suggestion--subcategory-column
+      padding 0 !important
+      background white !important
+    .algolia-docsearch-suggestion--subcategory-column-text:after
+      content " > "
+      font-size 10px
+      line-height 14.4px
+      display inline-block
+      width 5px
+      margin -3px 3px 0
+      vertical-align middle
+
+</style>

docs/src/.vuepress/theme/components/DropdownLink.vue

@@ -0,0 +1,252 @@
+<template>
+  <div
+    class="dropdown-wrapper"
+    :class="{ open }"
+  >
+    <button
+      class="dropdown-title"
+      type="button"
+      :aria-label="dropdownAriaLabel"
+      @click="handleDropdown"
+    >
+      <span class="title">{{ item.text }}</span>
+      <span
+        class="arrow down"
+      />
+    </button>
+    <button
+      class="mobile-dropdown-title"
+      type="button"
+      :aria-label="dropdownAriaLabel"
+      @click="setOpen(!open)"
+    >
+      <span class="title">{{ item.text }}</span>
+      <span
+        class="arrow"
+        :class="open ? 'down' : 'right'"
+      />
+    </button>
+
+    <DropdownTransition>
+      <ul
+        v-show="open"
+        class="nav-dropdown"
+      >
+        <li
+          v-for="(subItem, index) in item.items"
+          :key="subItem.link || index"
+          class="dropdown-item"
+        >
+          <h4 v-if="subItem.type === 'links'">
+            {{ subItem.text }}
+          </h4>
+
+          <ul
+            v-if="subItem.type === 'links'"
+            class="dropdown-subitem-wrapper"
+          >
+            <li
+              v-for="childSubItem in subItem.items"
+              :key="childSubItem.link"
+              class="dropdown-subitem"
+            >
+              <NavLink
+                :item="childSubItem"
+                @focusout="
+                  isLastItemOfArray(childSubItem, subItem.items) &&
+                    isLastItemOfArray(subItem, item.items) &&
+                    setOpen(false)
+                "
+              />
+            </li>
+          </ul>
+
+          <NavLink
+            v-else
+            :item="subItem"
+            @focusout="isLastItemOfArray(subItem, item.items) && setOpen(false)"
+          />
+        </li>
+      </ul>
+    </DropdownTransition>
+  </div>
+</template>
+
+<script>
+import NavLink from '@theme/components/NavLink.vue'
+import DropdownTransition from '@theme/components/DropdownTransition.vue'
+import last from 'lodash/last'
+
+export default {
+  name: 'DropdownLink',
+
+  components: {
+    NavLink,
+    DropdownTransition
+  },
+
+  props: {
+    item: {
+      required: true
+    }
+  },
+
+  data () {
+    return {
+      open: false
+    }
+  },
+
+  computed: {
+    dropdownAriaLabel () {
+      return this.item.ariaLabel || this.item.text
+    }
+  },
+
+  watch: {
+    $route () {
+      this.open = false
+    }
+  },
+
+  methods: {
+    setOpen (value) {
+      this.open = value
+    },
+
+    isLastItemOfArray (item, array) {
+      return last(array) === item
+    },
+
+    /**
+     * Open the dropdown when user tab and click from keyboard.
+     *
+     * Use event.detail to detect tab and click from keyboard. Ref: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail
+     * The Tab + Click is UIEvent > KeyboardEvent, so the detail is 0.
+     */
+    handleDropdown () {
+      const isTriggerByTab = event.detail === 0
+      if (isTriggerByTab) this.setOpen(!this.open)
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.dropdown-wrapper
+  cursor pointer
+  .dropdown-title
+    display block
+    font-size 0.9rem
+    font-family inherit
+    cursor inherit
+    padding inherit
+    line-height 1.4rem
+    background transparent
+    border none
+    font-weight 500
+    color $textColor
+    &:hover
+      border-color transparent
+    .arrow
+      vertical-align middle
+      margin-top -1px
+      margin-left 0.4rem
+  .mobile-dropdown-title
+    @extends .dropdown-title
+    display none
+    font-weight 600
+    font-size inherit
+      &:hover
+        color $accentColor
+  .nav-dropdown
+    .dropdown-item
+      color inherit
+      line-height 1.7rem
+      h4
+        margin 0.45rem 0 0
+        border-top 1px solid #eee
+        padding 1rem 1.5rem 0.45rem 1.25rem
+      .dropdown-subitem-wrapper
+        padding 0
+        list-style none
+        .dropdown-subitem
+          font-size 0.9em
+      a
+        display block
+        line-height 1.7rem
+        position relative
+        border-bottom none
+        font-weight 400
+        margin-bottom 0
+        padding 0 1.5rem 0 1.25rem
+        &:hover
+          color $accentColor
+        &.router-link-active
+          color $accentColor
+          &::after
+            content ""
+            width 0
+            height 0
+            border-left 5px solid $accentColor
+            border-top 3px solid transparent
+            border-bottom 3px solid transparent
+            position absolute
+            top calc(50% - 2px)
+            left 9px
+      &:first-child h4
+        margin-top 0
+        padding-top 0
+        border-top 0
+
+@media (max-width: $MQMobile)
+  .dropdown-wrapper
+    &.open .dropdown-title
+      margin-bottom 0.5rem
+    .dropdown-title
+      display: none
+    .mobile-dropdown-title
+      display: block
+    .nav-dropdown
+      transition height .1s ease-out
+      overflow hidden
+      .dropdown-item
+        h4
+          border-top 0
+          margin-top 0
+          padding-top 0
+        h4, & > a
+          font-size 15px
+          line-height 2rem
+        .dropdown-subitem
+          font-size 14px
+          padding-left 1rem
+
+@media (min-width: $MQMobile)
+  .dropdown-wrapper
+    height 1.8rem
+    &:hover .nav-dropdown,
+    &.open .nav-dropdown
+      // override the inline style.
+      display block !important
+    &.open:blur
+      display none
+    .nav-dropdown
+      display none
+      // Avoid height shaked by clicking
+      height auto !important
+      box-sizing border-box;
+      max-height calc(100vh - 2.7rem)
+      overflow-y auto
+      position absolute
+      top 100%
+      right 0
+      background-color #fff
+      padding 0.6rem 0
+      border 1px solid #ddd
+      border-bottom-color #ccc
+      text-align left
+      border-radius 0.25rem
+      white-space nowrap
+      margin 0
+</style>

docs/src/.vuepress/theme/components/DropdownTransition.vue

@@ -0,0 +1,33 @@
+<template>
+  <transition
+    name="dropdown"
+    @enter="setHeight"
+    @after-enter="unsetHeight"
+    @before-leave="setHeight"
+  >
+    <slot />
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'DropdownTransition',
+
+  methods: {
+    setHeight (items) {
+      // explicitly set height so that it can be transitioned
+      items.style.height = items.scrollHeight + 'px'
+    },
+
+    unsetHeight (items) {
+      items.style.height = ''
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.dropdown-enter, .dropdown-leave-to
+  height 0 !important
+
+</style>

docs/src/.vuepress/theme/components/Home.vue

@@ -0,0 +1,197 @@
+<template>
+  <main
+    class="home"
+    :aria-labelledby="data.heroText !== null ? 'main-title' : null"
+  >
+    <header class="hero">
+      <h1 v-if="data.heroImage" id="main-title">
+        <img :src="$withBase(data.heroImage)" :alt="data.heroAlt || 'hero'" />
+      </h1>
+
+      <p v-if="data.tagline !== null" class="description">
+        {{ data.tagline || $description || "Welcome to your VuePress site" }}
+      </p>
+
+      <p v-if="data.actionText && data.actionLink" class="action">
+        <NavLink class="action-button" :item="actionLink" />
+      </p>
+    </header>
+
+    <div v-if="data.features && data.features.length" class="features">
+      <div
+        v-for="(feature, index) in data.features"
+        :key="index"
+        class="feature"
+      >
+        <h2>{{ feature.title }}</h2>
+        <p>{{ feature.details }}</p>
+      </div>
+    </div>
+
+    <Content class="theme-default-content custom" />
+
+    <div v-if="data.footer" class="footer">
+      {{ data.footer }}
+    </div>
+  </main>
+</template>
+
+<script>
+import NavLink from "@theme/components/NavLink.vue";
+
+export default {
+  name: "Home",
+
+  components: { NavLink },
+
+  computed: {
+    data() {
+      return this.$page.frontmatter;
+    },
+
+    actionLink() {
+      return {
+        link: this.data.actionLink,
+        text: this.data.actionText,
+      };
+    },
+  },
+};
+</script>
+
+<style lang="stylus">
+.home {
+  padding: $navbarHeight 2rem 0;
+  max-width: $homePageWidth;
+  margin: 0px auto;
+  display: block;
+
+  .hero {
+    text-align: center;
+
+    img {
+      max-width: 100%;
+      max-height: 280px;
+      display: block;
+      margin: 3rem auto 1.5rem;
+    }
+
+    h1 {
+      font-size: 3rem;
+    }
+
+    h1, .description, .action {
+      margin: 1.8rem auto;
+    }
+
+    .description {
+      max-width: 35rem;
+      font-size: 1.6rem;
+      line-height: 1.3;
+      color: lighten($textColor, 40%);
+    }
+
+    .action-button {
+      display: inline-block;
+      font-size: 1.2rem;
+      color: #fff;
+      background-color: $accentColor;
+      padding: 0.8rem 1.6rem;
+      border-radius: 4px;
+      transition: background-color 0.1s ease;
+      box-sizing: border-box;
+      border-bottom: 1px solid darken($accentColor, 10%);
+
+      &:hover {
+        background-color: lighten($accentColor, 10%);
+      }
+    }
+  }
+
+  .features {
+    border-top: 1px solid $borderColor;
+    padding: 1.2rem 0;
+    margin-top: 2.5rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    align-content: stretch;
+    justify-content: space-between;
+  }
+
+  .feature {
+    flex-grow: 1;
+    flex-basis: 30%;
+    max-width: 30%;
+
+    h2 {
+      font-size: 1.4rem;
+      font-weight: 500;
+      border-bottom: none;
+      padding-bottom: 0;
+      color: lighten($textColor, 10%);
+    }
+
+    p {
+      color: lighten($textColor, 25%);
+    }
+  }
+
+  .footer {
+    padding: 2.5rem;
+    border-top: 1px solid $borderColor;
+    text-align: center;
+    color: lighten($textColor, 25%);
+  }
+}
+
+@media (max-width: $MQMobile) {
+  .home {
+    .features {
+      flex-direction: column;
+    }
+
+    .feature {
+      max-width: 100%;
+      padding: 0 2.5rem;
+    }
+  }
+}
+
+@media (max-width: $MQMobileNarrow) {
+  .home {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+
+    .hero {
+      img {
+        max-height: 210px;
+        margin: 2rem auto 1.2rem;
+      }
+
+      h1 {
+        font-size: 2rem;
+      }
+
+      h1, .description, .action {
+        margin: 1.2rem auto;
+      }
+
+      .description {
+        font-size: 1.2rem;
+      }
+
+      .action-button {
+        font-size: 1rem;
+        padding: 0.6rem 1.2rem;
+      }
+    }
+
+    .feature {
+      h2 {
+        font-size: 1.25rem;
+      }
+    }
+  }
+}
+</style>

docs/src/.vuepress/theme/components/NavLink.vue

@@ -0,0 +1,90 @@
+<template>
+  <RouterLink
+    v-if="isInternal"
+    class="nav-link"
+    :to="link"
+    :exact="exact"
+    @focusout.native="focusoutAction"
+  >
+    {{ item.text }}
+  </RouterLink>
+  <a
+    v-else
+    :href="link"
+    class="nav-link external"
+    :target="target"
+    :rel="rel"
+    @focusout="focusoutAction"
+  >
+    {{ item.text }}
+    <OutboundLink v-if="isBlankTarget" />
+  </a>
+</template>
+
+<script>
+import { isExternal, isMailto, isTel, ensureExt } from '../util'
+
+export default {
+  name: 'NavLink',
+
+  props: {
+    item: {
+      required: true
+    }
+  },
+
+  computed: {
+    link () {
+      return ensureExt(this.item.link)
+    },
+
+    exact () {
+      if (this.$site.locales) {
+        return Object.keys(this.$site.locales).some(rootLink => rootLink === this.link)
+      }
+      return this.link === '/'
+    },
+
+    isNonHttpURI () {
+      return isMailto(this.link) || isTel(this.link)
+    },
+
+    isBlankTarget () {
+      return this.target === '_blank'
+    },
+
+    isInternal () {
+      return !isExternal(this.link) && !this.isBlankTarget
+    },
+
+    target () {
+      if (this.isNonHttpURI) {
+        return null
+      }
+      if (this.item.target) {
+        return this.item.target
+      }
+      return isExternal(this.link) ? '_blank' : ''
+    },
+
+    rel () {
+      if (this.isNonHttpURI) {
+        return null
+      }
+      if (this.item.rel === false) {
+        return null
+      }
+      if (this.item.rel) {
+        return this.item.rel
+      }
+      return this.isBlankTarget ? 'noopener noreferrer' : null
+    }
+  },
+
+  methods: {
+    focusoutAction () {
+      this.$emit('focusout')
+    }
+  }
+}
+</script>

docs/src/.vuepress/theme/components/NavLinks.vue

@@ -0,0 +1,156 @@
+<template>
+  <nav
+    v-if="userLinks.length || repoLink"
+    class="nav-links"
+  >
+    <!-- user links -->
+    <div
+      v-for="item in userLinks"
+      :key="item.link"
+      class="nav-item"
+    >
+      <DropdownLink
+        v-if="item.type === 'links'"
+        :item="item"
+      />
+      <NavLink
+        v-else
+        :item="item"
+      />
+    </div>
+
+    <!-- repo link -->
+    <a
+      v-if="repoLink"
+      :href="repoLink"
+      class="repo-link"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {{ repoLabel }}
+      <OutboundLink />
+    </a>
+  </nav>
+</template>
+
+<script>
+import DropdownLink from '@theme/components/DropdownLink.vue'
+import { resolveNavLinkItem } from '../util'
+import NavLink from '@theme/components/NavLink.vue'
+
+export default {
+  name: 'NavLinks',
+
+  components: {
+    NavLink,
+    DropdownLink
+  },
+
+  computed: {
+    userNav () {
+      return this.$themeLocaleConfig.nav || this.$site.themeConfig.nav || []
+    },
+
+    nav () {
+      const { locales } = this.$site
+      if (locales && Object.keys(locales).length > 1) {
+        const currentLink = this.$page.path
+        const routes = this.$router.options.routes
+        const themeLocales = this.$site.themeConfig.locales || {}
+        const languageDropdown = {
+          text: this.$themeLocaleConfig.selectText || 'Languages',
+          ariaLabel: this.$themeLocaleConfig.ariaLabel || 'Select language',
+          items: Object.keys(locales).map(path => {
+            const locale = locales[path]
+            const text = themeLocales[path] && themeLocales[path].label || locale.lang
+            let link
+            // Stay on the current page
+            if (locale.lang === this.$lang) {
+              link = currentLink
+            } else {
+              // Try to stay on the same page
+              link = currentLink.replace(this.$localeConfig.path, path)
+              // fallback to homepage
+              if (!routes.some(route => route.path === link)) {
+                link = path
+              }
+            }
+            return { text, link }
+          })
+        }
+        return [...this.userNav, languageDropdown]
+      }
+      return this.userNav
+    },
+
+    userLinks () {
+      return (this.nav || []).map(link => {
+        return Object.assign(resolveNavLinkItem(link), {
+          items: (link.items || []).map(resolveNavLinkItem)
+        })
+      })
+    },
+
+    repoLink () {
+      const { repo } = this.$site.themeConfig
+      if (repo) {
+        return /^https?:/.test(repo)
+          ? repo
+          : `https://github.com/${repo}`
+      }
+      return null
+    },
+
+    repoLabel () {
+      if (!this.repoLink) return
+      if (this.$site.themeConfig.repoLabel) {
+        return this.$site.themeConfig.repoLabel
+      }
+
+      const repoHost = this.repoLink.match(/^https?:\/\/[^/]+/)[0]
+      const platforms = ['GitHub', 'GitLab', 'Bitbucket']
+      for (let i = 0; i < platforms.length; i++) {
+        const platform = platforms[i]
+        if (new RegExp(platform, 'i').test(repoHost)) {
+          return platform
+        }
+      }
+
+      return 'Source'
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+.nav-links
+  display inline-block
+  a
+    line-height 1.4rem
+    color inherit
+    &:hover, &.router-link-active
+      color $accentColor
+  .nav-item
+    position relative
+    display inline-block
+    margin-left 1.5rem
+    line-height 2rem
+    &:first-child
+      margin-left 0
+  .repo-link
+    margin-left 1.5rem
+
+@media (max-width: $MQMobile)
+  .nav-links
+    .nav-item, .repo-link
+      margin-left 0
+
+@media (min-width: $MQMobile)
+  .nav-links a
+    &:hover, &.router-link-active
+      color $textColor
+  .nav-item > a:not(.external)
+    &:hover, &.router-link-active
+      margin-bottom -2px
+      border-bottom 2px solid lighten($accentColor, 8%)
+</style>

docs/src/.vuepress/theme/components/Navbar.vue

@@ -0,0 +1,162 @@
+<template>
+  <header class="navbar">
+    <SidebarButton @toggle-sidebar="$emit('toggle-sidebar')" />
+
+    <RouterLink :to="$localePath" class="home-link">
+      <img
+        v-if="$site.themeConfig.logo"
+        class="logo"
+        :src="$withBase($site.themeConfig.logo)"
+        :alt="$siteTitle"
+      />
+    </RouterLink>
+
+    <div
+      class="links"
+      :style="
+        linksWrapMaxWidth
+          ? {
+              'max-width': linksWrapMaxWidth + 'px',
+            }
+          : {}
+      "
+    >
+      <AlgoliaSearchBox v-if="isAlgoliaSearch" :options="algolia" />
+      <SearchBox
+        v-else-if="
+          $site.themeConfig.search !== false &&
+          $page.frontmatter.search !== false
+        "
+      />
+      <NavLinks class="can-hide" />
+    </div>
+  </header>
+</template>
+
+<script>
+import AlgoliaSearchBox from "@AlgoliaSearchBox";
+import SearchBox from "@SearchBox";
+import SidebarButton from "@theme/components/SidebarButton.vue";
+import NavLinks from "@theme/components/NavLinks.vue";
+
+export default {
+  name: "Navbar",
+
+  components: {
+    SidebarButton,
+    NavLinks,
+    SearchBox,
+    AlgoliaSearchBox,
+  },
+
+  data() {
+    return {
+      linksWrapMaxWidth: null,
+    };
+  },
+
+  computed: {
+    algolia() {
+      return (
+        this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
+      );
+    },
+
+    isAlgoliaSearch() {
+      return this.algolia && this.algolia.apiKey && this.algolia.indexName;
+    },
+  },
+
+  mounted() {
+    const MOBILE_DESKTOP_BREAKPOINT = 719; // refer to config.styl
+    const NAVBAR_VERTICAL_PADDING =
+      parseInt(css(this.$el, "paddingLeft")) +
+      parseInt(css(this.$el, "paddingRight"));
+    const handleLinksWrapWidth = () => {
+      if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
+        this.linksWrapMaxWidth = null;
+      } else {
+        this.linksWrapMaxWidth =
+          this.$el.offsetWidth -
+          NAVBAR_VERTICAL_PADDING -
+          ((this.$refs.siteName && this.$refs.siteName.offsetWidth) || 0);
+      }
+    };
+    handleLinksWrapWidth();
+    window.addEventListener("resize", handleLinksWrapWidth, false);
+  },
+};
+
+function css(el, property) {
+  // NOTE: Known bug, will return 'auto' if style value is 'auto'
+  const win = el.ownerDocument.defaultView;
+  // null means not to return pseudo styles
+  return win.getComputedStyle(el, null)[property];
+}
+</script>
+
+<style lang="stylus">
+$navbar-vertical-padding = 0.7rem;
+$navbar-horizontal-padding = 1.5rem;
+
+.navbar {
+  padding: $navbar-vertical-padding $navbar-horizontal-padding;
+  line-height: $navbarHeight - 1.4rem;
+
+  a, span, img {
+    display: inline-block;
+  }
+
+  .logo {
+    height: $navbarHeight - 1.4rem;
+    min-width: $navbarHeight - 1.4rem;
+    margin-right: 0.8rem;
+    vertical-align: top;
+  }
+
+  .site-name {
+    font-size: 1.3rem;
+    font-weight: 600;
+    color: $textColor;
+    position: relative;
+  }
+
+  .links {
+    padding-left: 1.5rem;
+    box-sizing: border-box;
+    background-color: white;
+    white-space: nowrap;
+    font-size: 0.9rem;
+    position: absolute;
+    right: $navbar-horizontal-padding;
+    top: $navbar-vertical-padding;
+    display: flex;
+
+    .search-box {
+      flex: 0 0 auto;
+      vertical-align: top;
+    }
+  }
+}
+
+@media (max-width: $MQMobile) {
+  .navbar {
+    padding-left: 4rem;
+
+    .can-hide {
+      display: none;
+    }
+
+    .links {
+      padding-left: 1.5rem;
+    }
+
+    .site-name {
+      width: calc(100vw - 9.4rem);
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}
+</style>

docs/src/.vuepress/theme/components/Page.vue

@@ -0,0 +1,31 @@
+<template>
+  <main class="page">
+    <slot name="top" />
+
+    <Content class="theme-default-content" />
+    <PageEdit />
+
+    <PageNav v-bind="{ sidebarItems }" />
+
+    <slot name="bottom" />
+  </main>
+</template>
+
+<script>
+import PageEdit from '@theme/components/PageEdit.vue'
+import PageNav from '@theme/components/PageNav.vue'
+
+export default {
+  components: { PageEdit, PageNav },
+  props: ['sidebarItems']
+}
+</script>
+
+<style lang="stylus">
+@require '../styles/wrapper.styl'
+
+.page
+  padding-bottom 2rem
+  display block
+
+</style>

docs/src/.vuepress/theme/components/PageEdit.vue

@@ -0,0 +1,155 @@
+<template>
+  <footer class="page-edit">
+    <div
+      v-if="editLink"
+      class="edit-link"
+    >
+      <a
+        :href="editLink"
+        target="_blank"
+        rel="noopener noreferrer"
+      >{{ editLinkText }}</a>
+      <OutboundLink />
+    </div>
+
+    <div
+      v-if="lastUpdated"
+      class="last-updated"
+    >
+      <span class="prefix">{{ lastUpdatedText }}:</span>
+      <span class="time">{{ lastUpdated }}</span>
+    </div>
+  </footer>
+</template>
+
+<script>
+import isNil from 'lodash/isNil'
+import { endingSlashRE, outboundRE } from '../util'
+
+export default {
+  name: 'PageEdit',
+
+  computed: {
+    lastUpdated () {
+      return this.$page.lastUpdated
+    },
+
+    lastUpdatedText () {
+      if (typeof this.$themeLocaleConfig.lastUpdated === 'string') {
+        return this.$themeLocaleConfig.lastUpdated
+      }
+      if (typeof this.$site.themeConfig.lastUpdated === 'string') {
+        return this.$site.themeConfig.lastUpdated
+      }
+      return 'Last Updated'
+    },
+
+    editLink () {
+      const showEditLink = isNil(this.$page.frontmatter.editLink)
+        ? this.$site.themeConfig.editLinks
+        : this.$page.frontmatter.editLink
+
+      const {
+        repo,
+        docsDir = '',
+        docsBranch = 'master',
+        docsRepo = repo
+      } = this.$site.themeConfig
+
+      if (showEditLink && docsRepo && this.$page.relativePath) {
+        return this.createEditLink(
+          repo,
+          docsRepo,
+          docsDir,
+          docsBranch,
+          this.$page.relativePath
+        )
+      }
+      return null
+    },
+
+    editLinkText () {
+      return (
+        this.$themeLocaleConfig.editLinkText
+        || this.$site.themeConfig.editLinkText
+        || `Edit this page`
+      )
+    }
+  },
+
+  methods: {
+    createEditLink (repo, docsRepo, docsDir, docsBranch, path) {
+      const bitbucket = /bitbucket.org/
+      if (bitbucket.test(docsRepo)) {
+        const base = docsRepo
+        return (
+          base.replace(endingSlashRE, '')
+          + `/src`
+          + `/${docsBranch}/`
+          + (docsDir ? docsDir.replace(endingSlashRE, '') + '/' : '')
+          + path
+          + `?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default`
+        )
+      }
+
+      const gitlab = /gitlab.com/
+      if (gitlab.test(docsRepo)) {
+        const base = docsRepo
+        return (
+          base.replace(endingSlashRE, '')
+          + `/-/edit`
+          + `/${docsBranch}/`
+          + (docsDir ? docsDir.replace(endingSlashRE, '') + '/' : '')
+          + path
+        )
+      }
+
+      const base = outboundRE.test(docsRepo)
+        ? docsRepo
+        : `https://github.com/${docsRepo}`
+      return (
+        base.replace(endingSlashRE, '')
+        + '/edit'
+        + `/${docsBranch}/`
+        + (docsDir ? docsDir.replace(endingSlashRE, '') + '/' : '')
+        + path
+      )
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+@require '../styles/wrapper.styl'
+
+.page-edit
+  @extend $wrapper
+  padding-top 1rem
+  padding-bottom 1rem
+  overflow auto
+
+  .edit-link
+    display inline-block
+    a
+      color lighten($textColor, 25%)
+      margin-right 0.25rem
+  .last-updated
+    float right
+    font-size 0.9em
+    .prefix
+      font-weight 500
+      color lighten($textColor, 25%)
+    .time
+      font-weight 400
+      color #767676
+
+@media (max-width: $MQMobile)
+  .page-edit
+    .edit-link
+      margin-bottom 0.5rem
+    .last-updated
+      font-size 0.8em
+      float none
+      text-align left
+
+</style>

docs/src/.vuepress/theme/components/PageNav.vue

@@ -0,0 +1,163 @@
+<template>
+  <div
+    v-if="prev || next"
+    class="page-nav"
+  >
+    <p class="inner">
+      <span
+        v-if="prev"
+        class="prev"
+      >
+        ←
+        <a
+          v-if="prev.type === 'external'"
+          class="prev"
+          :href="prev.path"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {{ prev.title || prev.path }}
+
+          <OutboundLink />
+        </a>
+
+        <RouterLink
+          v-else
+          class="prev"
+          :to="prev.path"
+        >
+          {{ prev.title || prev.path }}
+        </RouterLink>
+      </span>
+
+      <span
+        v-if="next"
+        class="next"
+      >
+        <a
+          v-if="next.type === 'external'"
+          :href="next.path"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {{ next.title || next.path }}
+
+          <OutboundLink />
+        </a>
+
+        <RouterLink
+          v-else
+          :to="next.path"
+        >
+          {{ next.title || next.path }}
+        </RouterLink>
+        →
+      </span>
+    </p>
+  </div>
+</template>
+
+<script>
+import { resolvePage } from '../util'
+import isString from 'lodash/isString'
+import isNil from 'lodash/isNil'
+
+export default {
+  name: 'PageNav',
+
+  props: ['sidebarItems'],
+
+  computed: {
+    prev () {
+      return resolvePageLink(LINK_TYPES.PREV, this)
+    },
+
+    next () {
+      return resolvePageLink(LINK_TYPES.NEXT, this)
+    }
+  }
+}
+
+function resolvePrev (page, items) {
+  return find(page, items, -1)
+}
+
+function resolveNext (page, items) {
+  return find(page, items, 1)
+}
+
+const LINK_TYPES = {
+  NEXT: {
+    resolveLink: resolveNext,
+    getThemeLinkConfig: ({ nextLinks }) => nextLinks,
+    getPageLinkConfig: ({ frontmatter }) => frontmatter.next
+  },
+  PREV: {
+    resolveLink: resolvePrev,
+    getThemeLinkConfig: ({ prevLinks }) => prevLinks,
+    getPageLinkConfig: ({ frontmatter }) => frontmatter.prev
+  }
+}
+
+function resolvePageLink (
+  linkType,
+  { $themeConfig, $page, $route, $site, sidebarItems }
+) {
+  const { resolveLink, getThemeLinkConfig, getPageLinkConfig } = linkType
+
+  // Get link config from theme
+  const themeLinkConfig = getThemeLinkConfig($themeConfig)
+
+  // Get link config from current page
+  const pageLinkConfig = getPageLinkConfig($page)
+
+  // Page link config will overwrite global theme link config if defined
+  const link = isNil(pageLinkConfig) ? themeLinkConfig : pageLinkConfig
+
+  if (link === false) {
+    return
+  } else if (isString(link)) {
+    return resolvePage($site.pages, link, $route.path)
+  } else {
+    return resolveLink($page, sidebarItems)
+  }
+}
+
+function find (page, items, offset) {
+  const res = []
+  flatten(items, res)
+  for (let i = 0; i < res.length; i++) {
+    const cur = res[i]
+    if (cur.type === 'page' && cur.path === decodeURIComponent(page.path)) {
+      return res[i + offset]
+    }
+  }
+}
+
+function flatten (items, res) {
+  for (let i = 0, l = items.length; i < l; i++) {
+    if (items[i].type === 'group') {
+      flatten(items[i].children || [], res)
+    } else {
+      res.push(items[i])
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+@require '../styles/wrapper.styl'
+
+.page-nav
+  @extend $wrapper
+  padding-top 1rem
+  padding-bottom 0
+  .inner
+    min-height 2rem
+    margin-top 0
+    border-top 1px solid $borderColor
+    padding-top 1rem
+    overflow auto // clear float
+  .next
+    float right
+</style>

docs/src/.vuepress/theme/components/Sidebar.vue

@@ -0,0 +1,64 @@
+<template>
+  <aside class="sidebar">
+    <NavLinks />
+
+    <slot name="top" />
+
+    <SidebarLinks
+      :depth="0"
+      :items="items"
+    />
+    <slot name="bottom" />
+  </aside>
+</template>
+
+<script>
+import SidebarLinks from '@theme/components/SidebarLinks.vue'
+import NavLinks from '@theme/components/NavLinks.vue'
+
+export default {
+  name: 'Sidebar',
+
+  components: { SidebarLinks, NavLinks },
+
+  props: ['items']
+}
+</script>
+
+<style lang="stylus">
+.sidebar
+  ul
+    padding 0
+    margin 0
+    list-style-type none
+  a
+    display inline-block
+  .nav-links
+    display none
+    border-bottom 1px solid $borderColor
+    padding 0.5rem 0 0.75rem 0
+    a
+      font-weight 600
+    .nav-item, .repo-link
+      display block
+      line-height 1.25rem
+      font-size 1.1em
+      padding 0.5rem 0 0.5rem 1.5rem
+  & > .sidebar-links
+    padding 1.5rem 0
+    & > li > a.sidebar-link
+      font-size 1.1em
+      line-height 1.7
+      font-weight bold
+    & > li:not(:first-child)
+      margin-top .75rem
+
+@media (max-width: $MQMobile)
+  .sidebar
+    .nav-links
+      display block
+      .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after
+        top calc(1rem - 2px)
+    & > .sidebar-links
+      padding 1rem 0
+</style>

docs/src/.vuepress/theme/components/SidebarButton.vue

@@ -0,0 +1,40 @@
+<template>
+  <div
+    class="sidebar-button"
+    @click="$emit('toggle-sidebar')"
+  >
+    <svg
+      class="icon"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      role="img"
+      viewBox="0 0 448 512"
+    >
+      <path
+        fill="currentColor"
+        d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"
+        class=""
+      />
+    </svg>
+  </div>
+</template>
+
+<style lang="stylus">
+.sidebar-button
+  cursor pointer
+  display none
+  width 1.25rem
+  height 1.25rem
+  position absolute
+  padding 0.6rem
+  top 0.6rem
+  left 1rem
+  .icon
+    display block
+    width 1.25rem
+    height 1.25rem
+
+@media (max-width: $MQMobile)
+  .sidebar-button
+    display block
+</style>

docs/src/.vuepress/theme/components/SidebarGroup.vue

@@ -0,0 +1,141 @@
+<template>
+  <section
+    class="sidebar-group"
+    :class="[
+      {
+        collapsable,
+        'is-sub-group': depth !== 0
+      },
+      `depth-${depth}`
+    ]"
+  >
+    <RouterLink
+      v-if="item.path"
+      class="sidebar-heading clickable"
+      :class="{
+        open,
+        'active': isActive($route, item.path)
+      }"
+      :to="item.path"
+      @click.native="$emit('toggle')"
+    >
+      <span>{{ item.title }}</span>
+      <span
+        v-if="collapsable"
+        class="arrow"
+        :class="open ? 'down' : 'right'"
+      />
+    </RouterLink>
+
+    <p
+      v-else
+      class="sidebar-heading"
+      :class="{ open }"
+      @click="$emit('toggle')"
+    >
+      <span>{{ item.title }}</span>
+      <span
+        v-if="collapsable"
+        class="arrow"
+        :class="open ? 'down' : 'right'"
+      />
+    </p>
+
+    <DropdownTransition>
+      <SidebarLinks
+        v-if="open || !collapsable"
+        class="sidebar-group-items"
+        :items="item.children"
+        :sidebar-depth="item.sidebarDepth"
+        :initial-open-group-index="item.initialOpenGroupIndex"
+        :depth="depth + 1"
+      />
+    </DropdownTransition>
+  </section>
+</template>
+
+<script>
+import { isActive } from '../util'
+import DropdownTransition from '@theme/components/DropdownTransition.vue'
+
+export default {
+  name: 'SidebarGroup',
+
+  components: {
+    DropdownTransition
+  },
+
+  props: [
+    'item',
+    'open',
+    'collapsable',
+    'depth'
+  ],
+
+  // ref: https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
+  beforeCreate () {
+    this.$options.components.SidebarLinks = require('@theme/components/SidebarLinks.vue').default
+  },
+
+  methods: { isActive }
+}
+</script>
+
+<style lang="stylus">
+.sidebar-group
+  .sidebar-group
+    padding-left 0.5em
+  &:not(.collapsable)
+    .sidebar-heading:not(.clickable)
+      cursor auto
+      color inherit
+  // refine styles of nested sidebar groups
+  &.is-sub-group
+    padding-left 0
+    & > .sidebar-heading
+      font-size 0.95em
+      line-height 1.4
+      font-weight normal
+      padding-left 2rem
+      &:not(.clickable)
+        opacity 0.5
+    & > .sidebar-group-items
+      padding-left 1rem
+      & > li > .sidebar-link
+        font-size: 0.95em;
+        border-left none
+  &.depth-2
+    & > .sidebar-heading
+      border-left none
+
+.sidebar-heading
+  color $textColor
+  transition color .15s ease
+  cursor pointer
+  font-size 1.1em
+  font-weight bold
+  // text-transform uppercase
+  padding 0.35rem 1.5rem 0.35rem 1.25rem
+  width 100%
+  box-sizing border-box
+  margin 0
+  border-left 0.25rem solid transparent
+  &.open, &:hover
+    color inherit
+  .arrow
+    position relative
+    top -0.12em
+    left 0.5em
+  &.clickable
+    &.active
+      font-weight 600
+      color $accentColor
+      border-left-color $accentColor
+    &:hover
+      color $accentColor
+
+.sidebar-group-items
+  transition height .1s ease-out
+  font-size 0.95em
+  overflow hidden
+</style>

docs/src/.vuepress/theme/components/SidebarLink.vue

@@ -0,0 +1,133 @@
+<script>
+import { isActive, hashRE, groupHeaders } from '../util'
+
+export default {
+  functional: true,
+
+  props: ['item', 'sidebarDepth'],
+
+  render (h,
+    {
+      parent: {
+        $page,
+        $site,
+        $route,
+        $themeConfig,
+        $themeLocaleConfig
+      },
+      props: {
+        item,
+        sidebarDepth
+      }
+    }) {
+    // use custom active class matching logic
+    // due to edge case of paths ending with / + hash
+    const selfActive = isActive($route, item.path)
+    // for sidebar: auto pages, a hash link should be active if one of its child
+    // matches
+    const active = item.type === 'auto'
+      ? selfActive || item.children.some(c => isActive($route, item.basePath + '#' + c.slug))
+      : selfActive
+    const link = item.type === 'external'
+      ? renderExternal(h, item.path, item.title || item.path)
+      : renderLink(h, item.path, item.title || item.path, active)
+
+    const maxDepth = [
+      $page.frontmatter.sidebarDepth,
+      sidebarDepth,
+      $themeLocaleConfig.sidebarDepth,
+      $themeConfig.sidebarDepth,
+      1
+    ].find(depth => depth !== undefined)
+
+    const displayAllHeaders = $themeLocaleConfig.displayAllHeaders
+      || $themeConfig.displayAllHeaders
+
+    if (item.type === 'auto') {
+      return [link, renderChildren(h, item.children, item.basePath, $route, maxDepth)]
+    } else if ((active || displayAllHeaders) && item.headers && !hashRE.test(item.path)) {
+      const children = groupHeaders(item.headers)
+      return [link, renderChildren(h, children, item.path, $route, maxDepth)]
+    } else {
+      return link
+    }
+  }
+}
+
+function renderLink (h, to, text, active, level) {
+  const component = {
+    props: {
+      to,
+      activeClass: '',
+      exactActiveClass: ''
+    },
+    class: {
+      active,
+      'sidebar-link': true
+    }
+  }
+
+  if (level > 2) {
+    component.style = {
+      'padding-left': level + 'rem'
+    }
+  }
+
+  return h('RouterLink', component, text)
+}
+
+function renderChildren (h, children, path, route, maxDepth, depth = 1) {
+  if (!children || depth > maxDepth) return null
+  return h('ul', { class: 'sidebar-sub-headers' }, children.map(c => {
+    const active = isActive(route, path + '#' + c.slug)
+    return h('li', { class: 'sidebar-sub-header' }, [
+      renderLink(h, path + '#' + c.slug, c.title, active, c.level - 1),
+      renderChildren(h, c.children, path, route, maxDepth, depth + 1)
+    ])
+  }))
+}
+
+function renderExternal (h, to, text) {
+  return h('a', {
+    attrs: {
+      href: to,
+      target: '_blank',
+      rel: 'noopener noreferrer'
+    },
+    class: {
+      'sidebar-link': true
+    }
+  }, [text, h('OutboundLink')])
+}
+</script>
+
+<style lang="stylus">
+.sidebar .sidebar-sub-headers
+  padding-left 1rem
+  font-size 0.95em
+
+a.sidebar-link
+  font-size 1em
+  font-weight 400
+  display inline-block
+  color $textColor
+  border-left 0.25rem solid transparent
+  padding 0.35rem 1rem 0.35rem 1.25rem
+  line-height 1.4
+  width: 100%
+  box-sizing: border-box
+  &:hover
+    color $accentColor
+  &.active
+    font-weight 600
+    color $accentColor
+    border-left-color $accentColor
+  .sidebar-group &
+    padding-left 2rem
+  .sidebar-sub-headers &
+    padding-top 0.25rem
+    padding-bottom 0.25rem
+    border-left none
+    &.active
+      font-weight 500
+</style>

docs/src/.vuepress/theme/components/SidebarLinks.vue

@@ -0,0 +1,103 @@
+<template>
+  <ul
+    v-if="items.length"
+    class="sidebar-links"
+  >
+    <li
+      v-for="(item, i) in items"
+      :key="i"
+    >
+      <SidebarGroup
+        v-if="item.type === 'group'"
+        :item="item"
+        :open="i === openGroupIndex"
+        :collapsable="item.collapsable || item.collapsible"
+        :depth="depth"
+        @toggle="toggleGroup(i)"
+      />
+      <SidebarLink
+        v-else
+        :sidebar-depth="sidebarDepth"
+        :item="item"
+      />
+    </li>
+  </ul>
+</template>
+
+<script>
+import SidebarGroup from '@theme/components/SidebarGroup.vue'
+import SidebarLink from '@theme/components/SidebarLink.vue'
+import { isActive } from '../util'
+
+export default {
+  name: 'SidebarLinks',
+
+  components: { SidebarGroup, SidebarLink },
+
+  props: [
+    'items',
+    'depth',  // depth of current sidebar links
+    'sidebarDepth', // depth of headers to be extracted
+    'initialOpenGroupIndex'
+  ],
+
+  data () {
+    return {
+      openGroupIndex: this.initialOpenGroupIndex || 0
+    }
+  },
+
+  watch: {
+    '$route' () {
+      this.refreshIndex()
+    }
+  },
+
+  created () {
+    this.refreshIndex()
+  },
+
+  methods: {
+    refreshIndex () {
+      const index = resolveOpenGroupIndex(
+        this.$route,
+        this.items
+      )
+      if (index > -1) {
+        this.openGroupIndex = index
+      }
+    },
+
+    toggleGroup (index) {
+      this.openGroupIndex = index === this.openGroupIndex ? -1 : index
+    },
+
+    isActive (page) {
+      return isActive(this.$route, page.regularPath)
+    }
+  }
+}
+
+function resolveOpenGroupIndex (route, items) {
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i]
+    if (descendantIsActive(route, item)) {
+      return i
+    }
+  }
+  return -1
+}
+
+function descendantIsActive (route, item) {
+  if (item.type === 'group') {
+    return item.children.some(child => {
+      if (child.type === 'group') {
+        return descendantIsActive(route, child)
+      } else {
+        return child.type === 'page' && isActive(route, child.path)
+      }
+    })
+  }
+  return false
+}
+</script>

docs/src/.vuepress/theme/global-components/Badge.vue

@@ -0,0 +1,44 @@
+<script>
+export default {
+  functional: true,
+  props: {
+    type: {
+      type: String,
+      default: 'tip'
+    },
+    text: String,
+    vertical: {
+      type: String,
+      default: 'top'
+    }
+  },
+  render (h, { props, slots }) {
+    return h('span', {
+      class: ['badge', props.type],
+      style: {
+        verticalAlign: props.vertical
+      }
+    }, props.text || slots().default)
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+.badge
+  display inline-block
+  font-size 14px
+  height 18px
+  line-height 18px
+  border-radius 3px
+  padding 0 6px
+  color white
+  background-color #42b983
+  &.tip, &.green
+    background-color $badgeTipColor
+  &.error
+    background-color $badgeErrorColor
+  &.warning, &.warn, &.yellow
+    background-color $badgeWarningColor
+  & + &
+    margin-left 5px
+</style>

docs/src/.vuepress/theme/global-components/CodeBlock.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    class="theme-code-block"
+    :class="{ 'theme-code-block__active': active }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CodeBlock',
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    active: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .theme-code-block {
+    display: none;
+  }
+  .theme-code-block__active {
+    display: block;
+  }
+  .theme-code-block > pre {
+    background-color: orange;
+  }
+</style>

docs/src/.vuepress/theme/global-components/CodeGroup.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="theme-code-group">
+    <div class="theme-code-group__nav">
+      <ul class="theme-code-group__ul">
+        <li
+          v-for="(tab, i) in codeTabs"
+          :key="tab.title"
+          class="theme-code-group__li"
+        >
+          <button
+            class="theme-code-group__nav-tab"
+            :class="{
+              'theme-code-group__nav-tab-active': i === activeCodeTabIndex,
+            }"
+            @click="changeCodeTab(i)"
+          >
+            {{ tab.title }}
+          </button>
+        </li>
+      </ul>
+    </div>
+    <slot />
+    <pre
+      v-if="codeTabs.length < 1"
+      class="pre-blank"
+    >// Make sure to add code blocks to your code group</pre>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CodeGroup',
+  data () {
+    return {
+      codeTabs: [],
+      activeCodeTabIndex: -1
+    }
+  },
+  watch: {
+    activeCodeTabIndex (index) {
+      this.codeTabs.forEach(tab => {
+        tab.elm.classList.remove('theme-code-block__active')
+      })
+      this.codeTabs[index].elm.classList.add('theme-code-block__active')
+    }
+  },
+  mounted () {
+    this.codeTabs = (this.$slots.default || []).filter(slot => Boolean(slot.componentOptions)).map((slot, index) => {
+      if (slot.componentOptions.propsData.active === '') {
+        this.activeCodeTabIndex = index
+      }
+
+      return {
+        title: slot.componentOptions.propsData.title,
+        elm: slot.elm
+      }
+    })
+
+    if (this.activeCodeTabIndex === -1 && this.codeTabs.length > 0) {
+      this.activeCodeTabIndex = 0
+    }
+  },
+  methods: {
+    changeCodeTab (index) {
+      this.activeCodeTabIndex = index
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+  .theme-code-group {}
+  .theme-code-group__nav {
+    margin-bottom: -35px;
+    background-color: $codeBgColor;
+    padding-bottom: 22px;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    padding-left: 10px;
+    padding-top: 10px;
+  }
+  .theme-code-group__ul {
+    margin: auto 0;
+    padding-left: 0;
+    display: inline-flex;
+    list-style: none;
+  }
+  .theme-code-group__li {}
+  .theme-code-group__nav-tab {
+    border: 0;
+    padding: 5px;
+    cursor: pointer;
+    background-color: transparent;
+    font-size: 0.85em;
+    line-height: 1.4;
+    color: rgba(255, 255, 255, 0.9);
+    font-weight: 600;
+  }
+  .theme-code-group__nav-tab-active {
+    border-bottom: #42b983 1px solid;
+  }
+  .pre-blank {
+    color: #42b983;
+  }
+</style>

docs/src/.vuepress/theme/index.js

@@ -0,0 +1,59 @@
+const path = require('path')
+
+// Theme API.
+module.exports = (options, ctx) => {
+  const { themeConfig, siteConfig } = ctx
+
+  // resolve algolia
+  const isAlgoliaSearch = (
+    themeConfig.algolia
+    || Object
+        .keys(siteConfig.locales && themeConfig.locales || {})
+        .some(base => themeConfig.locales[base].algolia)
+  )
+
+  const enableSmoothScroll = themeConfig.smoothScroll === true
+
+  return {
+    alias () {
+      return {
+        '@AlgoliaSearchBox': isAlgoliaSearch
+          ? path.resolve(__dirname, 'components/AlgoliaSearchBox.vue')
+          : path.resolve(__dirname, 'noopModule.js')
+      }
+    },
+
+    plugins: [
+      ['@vuepress/active-header-links', options.activeHeaderLinks],
+      '@vuepress/search',
+      '@vuepress/plugin-nprogress',
+      ['container', {
+        type: 'tip',
+        defaultTitle: {
+          '/': 'TIP',
+          '/zh/': '提示'
+        }
+      }],
+      ['container', {
+        type: 'warning',
+        defaultTitle: {
+          '/': 'WARNING',
+          '/zh/': '注意'
+        }
+      }],
+      ['container', {
+        type: 'danger',
+        defaultTitle: {
+          '/': 'WARNING',
+          '/zh/': '警告'
+        }
+      }],
+      ['container', {
+        type: 'details',
+        before: info => `<details class="custom-block details">${info ? `<summary>${info}</summary>` : ''}\n`,
+        after: () => '</details>\n'
+      }],
+      ['smooth-scroll', enableSmoothScroll]
+    ]
+  }
+}

docs/src/.vuepress/theme/layouts/404.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="theme-container">
+    <div class="theme-default-content">
+      <h1>404</h1>
+
+      <blockquote>{{ getMsg() }}</blockquote>
+
+      <RouterLink to="/">
+        Take me home.
+      </RouterLink>
+    </div>
+  </div>
+</template>
+
+<script>
+const msgs = [
+  `There's nothing here.`,
+  `How did we get here?`,
+  `That's a Four-Oh-Four.`,
+  `Looks like we've got some broken links.`
+]
+
+export default {
+  methods: {
+    getMsg () {
+      return msgs[Math.floor(Math.random() * msgs.length)]
+    }
+  }
+}
+</script>

docs/src/.vuepress/theme/layouts/Layout.vue

@@ -0,0 +1,137 @@
+<template>
+  <div
+    class="theme-container"
+    :class="pageClasses"
+    @touchstart="onTouchStart"
+    @touchend="onTouchEnd"
+  >
+    <Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar" />
+
+    <div class="sidebar-mask" @click="toggleSidebar(false)" />
+
+    <Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar">
+      <template #top>
+        <slot name="sidebar-top" />
+      </template>
+      <template #bottom>
+        <slot name="sidebar-bottom" />
+      </template>
+    </Sidebar>
+
+    <Home v-if="$page.frontmatter.home" />
+
+    <Page v-else :sidebar-items="sidebarItems">
+      <template #top>
+        <slot name="page-top" />
+      </template>
+      <template #bottom>
+        <slot name="page-bottom" />
+      </template>
+    </Page>
+  </div>
+</template>
+
+<script>
+import Home from "@theme/components/Home.vue";
+import Navbar from "@theme/components/Navbar.vue";
+import Page from "@theme/components/Page.vue";
+import Sidebar from "@theme/components/Sidebar.vue";
+import { resolveSidebarItems } from "../util";
+
+export default {
+  name: "Layout",
+
+  components: {
+    Home,
+    Page,
+    Sidebar,
+    Navbar,
+  },
+
+  data() {
+    return {
+      isSidebarOpen: false,
+    };
+  },
+
+  computed: {
+    shouldShowNavbar() {
+      const { themeConfig } = this.$site;
+      const { frontmatter } = this.$page;
+      if (frontmatter.navbar === false || themeConfig.navbar === false) {
+        return false;
+      }
+      return (
+        this.$title ||
+        themeConfig.logo ||
+        themeConfig.repo ||
+        themeConfig.nav ||
+        this.$themeLocaleConfig.nav
+      );
+    },
+
+    shouldShowSidebar() {
+      const { frontmatter } = this.$page;
+      return (
+        !frontmatter.home &&
+        frontmatter.sidebar !== false &&
+        this.sidebarItems.length
+      );
+    },
+
+    sidebarItems() {
+      return resolveSidebarItems(
+        this.$page,
+        this.$page.regularPath,
+        this.$site,
+        this.$localePath
+      );
+    },
+
+    pageClasses() {
+      const userPageClass = this.$page.frontmatter.pageClass;
+      return [
+        {
+          "no-navbar": !this.shouldShowNavbar,
+          "sidebar-open": this.isSidebarOpen,
+          "no-sidebar": !this.shouldShowSidebar,
+        },
+        userPageClass,
+      ];
+    },
+  },
+
+  mounted() {
+    this.$router.afterEach(() => {
+      this.isSidebarOpen = false;
+    });
+  },
+
+  methods: {
+    toggleSidebar(to) {
+      this.isSidebarOpen = typeof to === "boolean" ? to : !this.isSidebarOpen;
+      this.$emit("toggle-sidebar", this.isSidebarOpen);
+    },
+
+    // side swipe
+    onTouchStart(e) {
+      this.touchStart = {
+        x: e.changedTouches[0].clientX,
+        y: e.changedTouches[0].clientY,
+      };
+    },
+
+    onTouchEnd(e) {
+      const dx = e.changedTouches[0].clientX - this.touchStart.x;
+      const dy = e.changedTouches[0].clientY - this.touchStart.y;
+      if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
+        if (dx > 0 && this.touchStart.x <= 80) {
+          this.toggleSidebar(true);
+        } else {
+          this.toggleSidebar(false);
+        }
+      }
+    },
+  },
+};
+</script>

docs/src/.vuepress/theme/noopModule.js

@@ -0,0 +1 @@
+export default {}

docs/src/.vuepress/theme/styles/arrow.styl

@@ -0,0 +1,22 @@
+@require './config'
+
+.arrow
+  display inline-block
+  width 0
+  height 0
+  &.up
+    border-left 4px solid transparent
+    border-right 4px solid transparent
+    border-bottom 6px solid $arrowBgColor
+  &.down
+    border-left 4px solid transparent
+    border-right 4px solid transparent
+    border-top 6px solid $arrowBgColor
+  &.right
+    border-top 4px solid transparent
+    border-bottom 4px solid transparent
+    border-left 6px solid $arrowBgColor
+  &.left
+    border-top 4px solid transparent
+    border-bottom 4px solid transparent
+    border-right 6px solid $arrowBgColor

docs/src/.vuepress/theme/styles/code.styl

@@ -0,0 +1,137 @@
+{$contentClass}
+  code
+    color lighten($textColor, 20%)
+    padding 0.25rem 0.5rem
+    margin 0
+    font-size 0.85em
+    background-color rgba(27,31,35,0.05)
+    border-radius 3px
+    .token
+      &.deleted
+        color #EC5975
+      &.inserted
+        color $accentColor
+
+{$contentClass}
+  pre, pre[class*="language-"]
+    line-height 1.4
+    padding 1.25rem 1.5rem
+    margin 0.85rem 0
+    background-color $codeBgColor
+    border-radius 6px
+    overflow auto
+    code
+      color #fff
+      padding 0
+      background-color transparent
+      border-radius 0
+
+div[class*="language-"]
+  position relative
+  background-color $codeBgColor
+  border-radius 6px
+  .highlight-lines
+    user-select none
+    padding-top 1.3rem
+    position absolute
+    top 0
+    left 0
+    width 100%
+    line-height 1.4
+    .highlighted
+      background-color rgba(0, 0, 0, 66%)
+  pre, pre[class*="language-"]
+    background transparent
+    position relative
+    z-index 1
+  &::before
+    position absolute
+    z-index 3
+    top 0.8em
+    right 1em
+    font-size 0.75rem
+    color rgba(255, 255, 255, 0.4)
+  &:not(.line-numbers-mode)
+    .line-numbers-wrapper
+      display none
+  &.line-numbers-mode
+    .highlight-lines .highlighted
+        position relative
+        &:before
+          content ' '
+          position absolute
+          z-index 3
+          left 0
+          top 0
+          display block
+          width $lineNumbersWrapperWidth
+          height 100%
+          background-color rgba(0, 0, 0, 66%)
+    pre
+      padding-left $lineNumbersWrapperWidth + 1 rem
+      vertical-align middle
+    .line-numbers-wrapper
+      position absolute
+      top 0
+      width $lineNumbersWrapperWidth
+      text-align center
+      color rgba(255, 255, 255, 0.3)
+      padding 1.25rem 0
+      line-height 1.4
+      br
+        user-select none
+      .line-number
+        position relative
+        z-index 4
+        user-select none
+        font-size 0.85em
+    &::after
+      content ''
+      position absolute
+      z-index 2
+      top 0
+      left 0
+      width $lineNumbersWrapperWidth
+      height 100%
+      border-radius 6px 0 0 6px
+      border-right 1px solid rgba(0, 0, 0, 66%)
+      background-color $codeBgColor
+
+
+for lang in $codeLang
+  div{'[class~="language-' + lang + '"]'}
+    &:before
+      content ('' + lang)
+
+div[class~="language-javascript"]
+  &:before
+    content "js"
+
+div[class~="language-typescript"]
+  &:before
+    content "ts"
+
+div[class~="language-markup"]
+  &:before
+    content "html"
+
+div[class~="language-markdown"]
+  &:before
+    content "md"
+
+div[class~="language-json"]:before
+  content "json"
+
+div[class~="language-ruby"]:before
+  content "rb"
+
+div[class~="language-python"]:before
+  content "py"
+
+div[class~="language-bash"]:before
+  content "sh"
+
+div[class~="language-php"]:before
+  content "php"
+
+@import '~prismjs/themes/prism-tomorrow.css'

docs/src/.vuepress/theme/styles/config.styl

@@ -0,0 +1 @@
+$contentClass = '.theme-default-content'

docs/src/.vuepress/theme/styles/custom-blocks.styl

@@ -0,0 +1,44 @@
+.custom-block
+  .custom-block-title
+    font-weight 600
+    margin-bottom -0.4rem
+  &.tip, &.warning, &.danger
+    padding .1rem 1.5rem
+    border-left-width .5rem
+    border-left-style solid
+    margin 1rem 0
+  &.tip
+    background-color #f3f5f7
+    border-color #42b983
+  &.warning
+    background-color rgba(255,229,100,.3)
+    border-color darken(#ffe564, 35%)
+    color darken(#ffe564, 70%)
+    .custom-block-title
+      color darken(#ffe564, 50%)
+    a
+      color $textColor
+  &.danger
+    background-color #ffe6e6
+    border-color darken(red, 20%)
+    color darken(red, 70%)
+    .custom-block-title
+      color darken(red, 40%)
+    a
+      color $textColor
+  &.details
+    display block
+    position relative
+    border-radius 2px
+    margin 1.6em 0
+    padding 1.6em
+    background-color #eee
+    h4
+      margin-top 0
+    figure, p
+      &:last-child
+        margin-bottom 0
+        padding-bottom 0
+    summary
+      outline none
+      cursor pointer

docs/src/.vuepress/theme/styles/index.styl

@@ -0,0 +1,200 @@
+@require './config'
+@require './code'
+@require './custom-blocks'
+@require './arrow'
+@require './wrapper'
+@require './toc'
+
+html, body
+  padding 0
+  margin 0
+  background-color #fff
+
+body
+  font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
+  -webkit-font-smoothing antialiased
+  -moz-osx-font-smoothing grayscale
+  font-size 16px
+  color $textColor
+
+.page
+  padding-left $sidebarWidth
+
+.navbar
+  position fixed
+  z-index 20
+  top 0
+  left 0
+  right 0
+  height $navbarHeight
+  background-color #fff
+  box-sizing border-box
+  border-bottom 1px solid $borderColor
+
+.sidebar-mask
+  position fixed
+  z-index 9
+  top 0
+  left 0
+  width 100vw
+  height 100vh
+  display none
+
+.sidebar
+  font-size 16px
+  background-color #fff
+  width $sidebarWidth
+  position fixed
+  z-index 10
+  margin 0
+  top $navbarHeight
+  left 0
+  bottom 0
+  box-sizing border-box
+  border-right 1px solid $borderColor
+  overflow-y auto
+
+{$contentClass}:not(.custom)
+  @extend $wrapper
+  > *:first-child
+    margin-top $navbarHeight
+
+  a:hover
+    text-decoration underline
+
+  p.demo
+    padding 1rem 1.5rem
+    border 1px solid #ddd
+    border-radius 4px
+
+  img
+    max-width 100%
+
+{$contentClass}.custom
+  padding 0
+  margin 0
+
+  img
+    max-width 100%
+
+a
+  font-weight 500
+  color $accentColor
+  text-decoration none
+
+p a code
+  font-weight 400
+  color $accentColor
+
+kbd
+  background #eee
+  border solid 0.15rem #ddd
+  border-bottom solid 0.25rem #ddd
+  border-radius 0.15rem
+  padding 0 0.15em
+
+blockquote
+  font-size 1rem
+  color #999;
+  border-left .2rem solid #dfe2e5
+  margin 1rem 0
+  padding .25rem 0 .25rem 1rem
+
+  & > p
+    margin 0
+
+ul, ol
+  padding-left 1.2em
+
+strong
+  font-weight 600
+
+h1, h2, h3, h4, h5, h6
+  font-weight 600
+  line-height 1.25
+
+  {$contentClass}:not(.custom) > &
+    margin-top (0.5rem - $navbarHeight)
+    padding-top ($navbarHeight + 1rem)
+    margin-bottom 0
+
+    &:first-child
+      margin-top -1.5rem
+      margin-bottom 1rem
+
+      + p, + pre, + .custom-block
+        margin-top 2rem
+
+  &:hover .header-anchor
+    opacity: 1
+
+h1
+  font-size 2.2rem
+
+h2
+  font-size 1.65rem
+  padding-bottom .3rem
+  border-bottom 1px solid $borderColor
+
+h3
+  font-size 1.35rem
+
+a.header-anchor
+  font-size 0.85em
+  float left
+  margin-left -0.87em
+  padding-right 0.23em
+  margin-top 0.125em
+  opacity 0
+
+  &:hover
+    text-decoration none
+
+code, kbd, .line-number
+  font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace
+
+p, ul, ol
+  line-height 1.7
+
+hr
+  border 0
+  border-top 1px solid $borderColor
+
+table
+  border-collapse collapse
+  margin 1rem 0
+  display: block
+  overflow-x: auto
+
+tr
+  border-top 1px solid #dfe2e5
+
+  &:nth-child(2n)
+    background-color #f6f8fa
+
+th, td
+  border 1px solid #dfe2e5
+  padding .6em 1em
+
+.theme-container
+  &.sidebar-open
+    .sidebar-mask
+      display: block
+
+  &.no-navbar
+    {$contentClass}:not(.custom) > h1, h2, h3, h4, h5, h6
+      margin-top 1.5rem
+      padding-top 0
+
+    .sidebar
+      top 0
+
+@media (min-width: ($MQMobile + 1px))
+  .theme-container.no-sidebar
+    .sidebar
+      display none
+
+    .page
+      padding-left 0
+
+@require 'mobile.styl'

docs/src/.vuepress/theme/styles/mobile.styl

@@ -0,0 +1,37 @@
+@require './config'
+
+$mobileSidebarWidth = $sidebarWidth * 0.82
+
+// narrow desktop / iPad
+@media (max-width: $MQNarrow)
+  .sidebar
+    font-size 15px
+    width $mobileSidebarWidth
+  .page
+    padding-left $mobileSidebarWidth
+
+// wide mobile
+@media (max-width: $MQMobile)
+  .sidebar
+    top 0
+    padding-top $navbarHeight
+    transform translateX(-100%)
+    transition transform .2s ease
+  .page
+    padding-left 0
+  .theme-container
+    &.sidebar-open
+      .sidebar
+        transform translateX(0)
+    &.no-navbar
+      .sidebar
+        padding-top: 0
+
+// narrow mobile
+@media (max-width: $MQMobileNarrow)
+  h1
+    font-size 1.9rem
+  {$contentClass}
+    div[class*="language-"]
+      margin 0.85rem -1.5rem
+      border-radius 0

docs/src/.vuepress/theme/styles/toc.styl

@@ -0,0 +1,3 @@
+.table-of-contents
+  .badge
+    vertical-align middle

docs/src/.vuepress/theme/styles/wrapper.styl

@@ -0,0 +1,9 @@
+$wrapper
+  max-width $contentWidth
+  margin 0 auto
+  padding 2rem 2.5rem
+  @media (max-width: $MQNarrow)
+    padding 2rem
+  @media (max-width: $MQMobileNarrow)
+    padding 1.5rem
+

docs/src/.vuepress/theme/util/index.js

@@ -0,0 +1,244 @@
+export const hashRE = /#.*$/
+export const extRE = /\.(md|html)$/
+export const endingSlashRE = /\/$/
+export const outboundRE = /^[a-z]+:/i
+
+export function normalize (path) {
+  return decodeURI(path)
+    .replace(hashRE, '')
+    .replace(extRE, '')
+}
+
+export function getHash (path) {
+  const match = path.match(hashRE)
+  if (match) {
+    return match[0]
+  }
+}
+
+export function isExternal (path) {
+  return outboundRE.test(path)
+}
+
+export function isMailto (path) {
+  return /^mailto:/.test(path)
+}
+
+export function isTel (path) {
+  return /^tel:/.test(path)
+}
+
+export function ensureExt (path) {
+  if (isExternal(path)) {
+    return path
+  }
+  const hashMatch = path.match(hashRE)
+  const hash = hashMatch ? hashMatch[0] : ''
+  const normalized = normalize(path)
+
+  if (endingSlashRE.test(normalized)) {
+    return path
+  }
+  return normalized + '.html' + hash
+}
+
+export function isActive (route, path) {
+  const routeHash = decodeURIComponent(route.hash)
+  const linkHash = getHash(path)
+  if (linkHash && routeHash !== linkHash) {
+    return false
+  }
+  const routePath = normalize(route.path)
+  const pagePath = normalize(path)
+  return routePath === pagePath
+}
+
+export function resolvePage (pages, rawPath, base) {
+  if (isExternal(rawPath)) {
+    return {
+      type: 'external',
+      path: rawPath
+    }
+  }
+  if (base) {
+    rawPath = resolvePath(rawPath, base)
+  }
+  const path = normalize(rawPath)
+  for (let i = 0; i < pages.length; i++) {
+    if (normalize(pages[i].regularPath) === path) {
+      return Object.assign({}, pages[i], {
+        type: 'page',
+        path: ensureExt(pages[i].path)
+      })
+    }
+  }
+  console.error(`[vuepress] No matching page found for sidebar item "${rawPath}"`)
+  return {}
+}
+
+function resolvePath (relative, base, append) {
+  const firstChar = relative.charAt(0)
+  if (firstChar === '/') {
+    return relative
+  }
+
+  if (firstChar === '?' || firstChar === '#') {
+    return base + relative
+  }
+
+  const stack = base.split('/')
+
+  // remove trailing segment if:
+  // - not appending
+  // - appending to trailing slash (last segment is empty)
+  if (!append || !stack[stack.length - 1]) {
+    stack.pop()
+  }
+
+  // resolve relative path
+  const segments = relative.replace(/^\//, '').split('/')
+  for (let i = 0; i < segments.length; i++) {
+    const segment = segments[i]
+    if (segment === '..') {
+      stack.pop()
+    } else if (segment !== '.') {
+      stack.push(segment)
+    }
+  }
+
+  // ensure leading slash
+  if (stack[0] !== '') {
+    stack.unshift('')
+  }
+
+  return stack.join('/')
+}
+
+/**
+ * @param { Page } page
+ * @param { string } regularPath
+ * @param { SiteData } site
+ * @param { string } localePath
+ * @returns { SidebarGroup }
+ */
+export function resolveSidebarItems (page, regularPath, site, localePath) {
+  const { pages, themeConfig } = site
+
+  const localeConfig = localePath && themeConfig.locales
+    ? themeConfig.locales[localePath] || themeConfig
+    : themeConfig
+
+  const pageSidebarConfig = page.frontmatter.sidebar || localeConfig.sidebar || themeConfig.sidebar
+  if (pageSidebarConfig === 'auto') {
+    return resolveHeaders(page)
+  }
+
+  const sidebarConfig = localeConfig.sidebar || themeConfig.sidebar
+  if (!sidebarConfig) {
+    return []
+  } else {
+    const { base, config } = resolveMatchingConfig(regularPath, sidebarConfig)
+    if (config === 'auto') {
+      return resolveHeaders(page)
+    }
+    return config
+      ? config.map(item => resolveItem(item, pages, base))
+      : []
+  }
+}
+
+/**
+ * @param { Page } page
+ * @returns { SidebarGroup }
+ */
+function resolveHeaders (page) {
+  const headers = groupHeaders(page.headers || [])
+  return [{
+    type: 'group',
+    collapsable: false,
+    title: page.title,
+    path: null,
+    children: headers.map(h => ({
+      type: 'auto',
+      title: h.title,
+      basePath: page.path,
+      path: page.path + '#' + h.slug,
+      children: h.children || []
+    }))
+  }]
+}
+
+export function groupHeaders (headers) {
+  // group h3s under h2
+  headers = headers.map(h => Object.assign({}, h))
+  let lastH2
+  headers.forEach(h => {
+    if (h.level === 2) {
+      lastH2 = h
+    } else if (lastH2) {
+      (lastH2.children || (lastH2.children = [])).push(h)
+    }
+  })
+  return headers.filter(h => h.level === 2)
+}
+
+export function resolveNavLinkItem (linkItem) {
+  return Object.assign(linkItem, {
+    type: linkItem.items && linkItem.items.length ? 'links' : 'link'
+  })
+}
+
+/**
+ * @param { Route } route
+ * @param { Array<string|string[]> | Array<SidebarGroup> | [link: string]: SidebarConfig } config
+ * @returns { base: string, config: SidebarConfig }
+ */
+export function resolveMatchingConfig (regularPath, config) {
+  if (Array.isArray(config)) {
+    return {
+      base: '/',
+      config: config
+    }
+  }
+  for (const base in config) {
+    if (ensureEndingSlash(regularPath).indexOf(encodeURI(base)) === 0) {
+      return {
+        base,
+        config: config[base]
+      }
+    }
+  }
+  return {}
+}
+
+function ensureEndingSlash (path) {
+  return /(\.html|\/)$/.test(path)
+    ? path
+    : path + '/'
+}
+
+function resolveItem (item, pages, base, groupDepth = 1) {
+  if (typeof item === 'string') {
+    return resolvePage(pages, item, base)
+  } else if (Array.isArray(item)) {
+    return Object.assign(resolvePage(pages, item[0], base), {
+      title: item[1]
+    })
+  } else {
+    const children = item.children || []
+    if (children.length === 0 && item.path) {
+      return Object.assign(resolvePage(pages, item.path, base), {
+        title: item.title
+      })
+    }
+    return {
+      type: 'group',
+      path: item.path,
+      title: item.title,
+      sidebarDepth: item.sidebarDepth,
+      initialOpenGroupIndex: item.initialOpenGroupIndex,
+      children: children.map(child => resolveItem(child, pages, base, groupDepth + 1)),
+      collapsable: item.collapsable !== false
+    }
+  }
+}

docs/src/appendix/index.md

@@ -0,0 +1,45 @@
+---
+sidebarDepth: 1
+sidebar: auto
+---
+
+# Appendix
+
+## GraphQL API
+
+Hetty exposes a GraphQL API over HTTP for managing all its features. This API is
+used by the web admin interface; a Next.js app using Apollo Client.
+
+### Playground
+
+You can also introspect and manually experiment with the API via the included GraphQL Playground. To access it, start Hetty and visit: [http://localhost:8080/api/playground](http://localhost:8080/api/playground).
+
+### Schema
+
+<<< @/../pkg/api/schema.graphql
+
+Source: [pkg/api/schema.graphql](https://github.com/dstotijn/hetty/blob/master/pkg/api/schema.graphql)
+
+## License
+
+MIT License
+
+Copyright (c) 2021 David Stotijn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.