Skip to content

Commit d493f22

Browse files
authored
feat: add ui source (#157)
* add ui source * integrate ui src * reverse symlink * update * remove submodule * .gitignore * ui/ * .gitattributes
1 parent b82302b commit d493f22

File tree

214 files changed

+14422
-5
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

214 files changed

+14422
-5
lines changed

.gitattributes

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
ui/** linguist-vendored

.github/workflows/ui.yml

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,22 @@ jobs:
1010
- name: Checkout repository
1111
uses: actions/checkout@v4
1212

13-
- name: Start Server
13+
- uses: actions/setup-node@v4
14+
with:
15+
node-version: lts/*
16+
17+
- name: Echo Go Version
18+
run: go version
19+
20+
- name: Install Yarn
21+
run: npm install -g yarn
22+
23+
- name: Build UI and Start Server
1424
env:
1525
HOST: 0.0.0.0
1626
PORT: 8000
1727
run: |
28+
make build-ui
1829
make run &
1930
2031
- name: Wait for server to start
@@ -23,10 +34,6 @@ jobs:
2334
sleep 1
2435
done
2536
26-
- uses: actions/setup-node@v4
27-
with:
28-
node-version: lts/*
29-
3037
- name: Setup npm
3138
run: npm init -y
3239

.gitignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
# But not these files...
1111
!/.gitignore
12+
!/.gitattributes
1213

1314
!*.go
1415
!go.sum
@@ -30,6 +31,12 @@
3031
!tests/**
3132
!cmd/reaper/dist/**
3233
!tls/*
34+
!ui/
35+
!ui/**
36+
ui/node_modules
37+
ui/node_modules/**
38+
ui/dist
39+
ui/dist/**
3340

3441
.DS_Store
3542

Makefile

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@ help: ## Show this help
1212
@cat ${MAKEFILE_LIST} | grep "[#]# " | grep -v grep | sort | column -t -s '##' | sed -e 's/^/ /'
1313
@echo ""
1414

15+
.PHONY: build-ui
16+
build-ui: ## Build the UI
17+
cd ui && yarn && yarn build
18+
1519
.PHONY: run
1620
run: ## Run the local server
1721
go run ./cmd/reaper

tests/readme.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Frontend UI Test
2+
3+
TODO: add more UI tests here.

ui/.env

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
VITE_BASE_URL=http://localhost:8000
2+
VITE_WS_URL=ws://localhost:8000/ws

ui/README.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Vue 3 + TypeScript + Vite
2+
3+
## Setup
4+
5+
Run the installer
6+
7+
```
8+
./install.sh
9+
```
10+
11+
## Verify setup
12+
13+
Load site in browser: [http://localhost:5173](http://localhost:5173)
14+
15+
16+
17+
## Vue 3 + TypeScript + Vite
18+
19+
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
20+
21+
## Recommended IDE Setup
22+
23+
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
24+
25+
## Type Support For `.vue` Imports in TS
26+
27+
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
28+
29+
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
30+
31+
1. Disable the built-in TypeScript Extension
32+
1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
33+
2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
34+
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

ui/components.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"$schema": "https://shadcn-vue.com/schema.json",
3+
"style": "new-york",
4+
"typescript": true,
5+
"tsConfigPath": "./tsconfig.json",
6+
"tailwind": {
7+
"config": "tailwind.config.js",
8+
"css": "src/assets/index.css",
9+
"baseColor": "zinc",
10+
"cssVariables": true
11+
},
12+
"framework": "vite",
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils"
16+
}
17+
}

ui/eslint.config.mjs

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import vue from "eslint-plugin-vue";
2+
import typescriptEslint from "@typescript-eslint/eslint-plugin";
3+
import tailwindcss from "eslint-plugin-tailwindcss";
4+
import parser from "vue-eslint-parser";
5+
import path from "node:path";
6+
import { fileURLToPath } from "node:url";
7+
import js from "@eslint/js";
8+
import { FlatCompat } from "@eslint/eslintrc";
9+
10+
const __filename = fileURLToPath(import.meta.url);
11+
const __dirname = path.dirname(__filename);
12+
const compat = new FlatCompat({
13+
baseDirectory: __dirname,
14+
recommendedConfig: js.configs.recommended,
15+
allConfig: js.configs.all
16+
});
17+
18+
export default [...compat.extends(
19+
"eslint:recommended",
20+
"plugin:vue/vue3-essential",
21+
"plugin:@typescript-eslint/recommended",
22+
), {
23+
plugins: {
24+
vue,
25+
"@typescript-eslint": typescriptEslint,
26+
tailwindcss,
27+
},
28+
29+
languageOptions: {
30+
globals: {
31+
NodeJS: true,
32+
},
33+
34+
parser: parser,
35+
ecmaVersion: "latest",
36+
sourceType: "script",
37+
38+
parserOptions: {
39+
parser: "@typescript-eslint/parser",
40+
extraFileExtensions: [".vue"],
41+
},
42+
},
43+
44+
settings: {
45+
tailwindcss: {
46+
config: "./tailwind.config.js",
47+
},
48+
},
49+
50+
rules: {
51+
"tailwindcss/classnames-order": "warn",
52+
"tailwindcss/enforces-negative-arbitrary-values": "warn",
53+
"tailwindcss/enforces-shorthand": "warn",
54+
"tailwindcss/no-contradicting-classname": "warn",
55+
},
56+
}, {
57+
files: ["**/*.vue"],
58+
59+
languageOptions: {
60+
parser: parser,
61+
},
62+
}];

ui/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en" class="h-full bg-gray-100">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="https://d1548abrjij03p.cloudfront.net/icon.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Reaper - A Ghost Labs Project</title>
8+
</head>
9+
<body class="h-screen">
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)