Port front-end over to Vue CLI (create-vue)
This commit makes an initial port of the front-end over to a proper Vue
CLI application. It seems to work from surface level testing.
Changes made:
* Rename web/static to public/static to place it into the Vue build path
* Notes: web/static/js/BareRTC.js and web/templates/chat.html are now
deprecated
* Rename web/static/js/sounds.js into src/lib/sounds.js making it a
proper JavaScript module with exports.
* Fill out initial src/App.vue by copying and updating
web/templates/chat.html and web/static/js/BareRTC.js into this module.
11
.eslintrc.cjs
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
/* eslint-env node */
|
||||
module.exports = {
|
||||
root: true,
|
||||
'extends': [
|
||||
'plugin:vue/vue3-essential',
|
||||
'eslint:recommended'
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest'
|
||||
}
|
||||
}
|
||||
28
.gitignore
vendored
|
|
@ -1,2 +1,30 @@
|
|||
settings.toml
|
||||
chatbot/
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
|
|||
7
.vscode/extensions.json
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"recommendations": [
|
||||
"Vue.volar",
|
||||
"Vue.vscode-typescript-vue-plugin",
|
||||
"dbaeumer.vscode-eslint"
|
||||
]
|
||||
}
|
||||
19
README.md
|
|
@ -184,6 +184,25 @@ user = user
|
|||
|
||||
Then `sudo supervisorctl reread && sudo supervisorctl add barertc` to start the app.
|
||||
|
||||
# Developing This App
|
||||
|
||||
In local development you'll probably run two processes in your terminal: one to `npm run watch` the Vue.js app and the other to run the Go server.
|
||||
|
||||
Building and running the front-end app:
|
||||
|
||||
```bash
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
# Build the front-end
|
||||
npm run build
|
||||
|
||||
# Run the front-end in watch mode for local dev
|
||||
npm run watch
|
||||
```
|
||||
|
||||
And `make run` to run the Go server.
|
||||
|
||||
# License
|
||||
|
||||
GPLv3.
|
||||
|
|
|
|||
35
index.html
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
{{define "index"}}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/bulma.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/bulma-prefers-dark.css?{{.CacheHash}}">
|
||||
<link rel="stylesheet" href="/static/fontawesome-free-6.1.2-web/css/all.css">
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/chat.css?{{.CacheHash}}">
|
||||
<title>{{.Config.Title}}</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
<!-- BareRTC constants injected by IndexPage route -->
|
||||
<script type="text/javascript">
|
||||
const Branding = {{.Config.Branding}};
|
||||
const PublicChannels = {{.Config.GetChannels}};
|
||||
const WebsiteURL = "{{.Config.WebsiteURL}}";
|
||||
const PermitNSFW = {{AsJS .Config.PermitNSFW}};
|
||||
const TURN = {{.Config.TURN}};
|
||||
const WebhookURLs = {{.Config.WebhookURLs}};
|
||||
const VIP = {{.Config.VIP}};
|
||||
const UserJWTToken = {{.JWTTokenString}};
|
||||
const UserJWTValid = {{if .JWTAuthOK}}true{{else}}false{{end}};
|
||||
const UserJWTClaims = {{.JWTClaims.ToJSON}};
|
||||
const CachedBlocklist = {{.CachedBlocklist}};
|
||||
</script>
|
||||
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
1970
package-lock.json
generated
Normal file
21
package.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"name": "barertc",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"watch": "vite build -w --sourcemap=true --minify=false",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.3.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.3.1",
|
||||
"eslint": "^8.46.0",
|
||||
"eslint-plugin-vue": "^9.16.1",
|
||||
"vite": "^4.4.9"
|
||||
}
|
||||
}
|
||||
|
|
@ -81,7 +81,7 @@ func IndexPage() http.HandlerFunc {
|
|||
return template.JS(fmt.Sprintf("%v", v))
|
||||
},
|
||||
})
|
||||
tmpl, err := tmpl.ParseFiles("web/templates/chat.html")
|
||||
tmpl, err := tmpl.ParseFiles("dist/index.html")
|
||||
if err != nil {
|
||||
panic(err.Error())
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,7 +37,8 @@ func (s *Server) Setup() error {
|
|||
mux.Handle("/api/blocklist", s.BlockList())
|
||||
mux.Handle("/api/authenticate", s.Authenticate())
|
||||
mux.Handle("/api/shutdown", s.ShutdownAPI())
|
||||
mux.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("web/static"))))
|
||||
mux.Handle("/assets/", http.StripPrefix("/assets/", http.FileServer(http.Dir("dist/assets"))))
|
||||
mux.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("dist/static"))))
|
||||
|
||||
s.mux = mux
|
||||
|
||||
|
|
|
|||
BIN
public/favicon.ico
Normal file
|
After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 469 KiB After Width: | Height: | Size: 469 KiB |
|
Before Width: | Height: | Size: 145 KiB After Width: | Height: | Size: 145 KiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 953 B After Width: | Height: | Size: 953 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 986 B After Width: | Height: | Size: 986 B |