luzifer/twitch-bot
1
0
Fork 0
mirror of https://github.com/Luzifer/twitch-bot.git synced 2024-11-09 08:40:01 +00:00
Code Issues Projects Releases Wiki Activity

gootstrap new layout

Browse source 
Signed-off-by: Knut Ahlers <knut@ahlers.me>
This commit is contained in:
Knut Ahlers 2024-06-13 12:41:40 +02:00
parent 13fd9e604c
commit d6954c8abe
Signed by: luzifer
SSH key fingerprint: SHA256:/xtE5lCgiRDQr8SLxHMS92ZBlACmATUmF1crK16Ks4E
10 changed files with 2088 additions and 4785 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
.eslintrc.js
View file

@ -8,7 +8,7 @@
const Module = require('module') const Module = require('module')
const hacks = [ const hacks = [
'babel-eslint', '@babel/eslint-parser',
'eslint-plugin-vue', 'eslint-plugin-vue',
] ]
@ -34,7 +34,7 @@ module.exports = {
}, },
extends: [ extends: [
'plugin:vue/recommended', 'plugin:vue/vue3-recommended',
'eslint:recommended', // https://eslint.org/docs/rules/ 'eslint:recommended', // https://eslint.org/docs/rules/
], ],
@ -44,13 +44,14 @@ module.exports = {
parserOptions: { parserOptions: {
ecmaVersion: 2020, ecmaVersion: 2020,
parser: '@babel/eslint-parser', parser: '@typescript-eslint/parser',
requireConfigFile: false, requireConfigFile: false,
}, },
plugins: [ plugins: [
// required to lint *.vue files // required to lint *.vue files
'vue', 'vue',
'@typescript-eslint',
], ],
reportUnusedDisableDirectives: true, reportUnusedDisableDirectives: true,
@ -65,6 +66,7 @@ module.exports = {
'arrow-spacing': ['error', { after: true, before: true }], 'arrow-spacing': ['error', { after: true, before: true }],
'block-spacing': ['error'], 'block-spacing': ['error'],
'brace-style': ['error', '1tbs'], 'brace-style': ['error', '1tbs'],
'camelcase': ['error'],
'comma-dangle': ['error', 'always-multiline'], 'comma-dangle': ['error', 'always-multiline'],
'comma-spacing': ['error'], 'comma-spacing': ['error'],
'comma-style': ['error', 'last'], 'comma-style': ['error', 'last'],
@ -134,6 +136,7 @@ module.exports = {
'switch-colon-spacing': ['error'], 'switch-colon-spacing': ['error'],
'template-curly-spacing': ['error', 'never'], 'template-curly-spacing': ['error', 'never'],
'unicode-bom': ['error', 'never'], 'unicode-bom': ['error', 'never'],
'vue/comment-directive': 'off',
'vue/new-line-between-multi-line-property': ['error'], 'vue/new-line-between-multi-line-property': ['error'],
'vue/no-empty-component-block': ['error'], 'vue/no-empty-component-block': ['error'],
'vue/no-reserved-component-names': ['error'], 'vue/no-reserved-component-names': ['error'],

3
.gitignore vendored
View file

@ -4,7 +4,8 @@ config.yaml
docs/resources/_gen docs/resources/_gen
editor/app.css editor/app.css
editor/app.js editor/app.js
editor/bundle.* editor/*.ttf
editor/*.woff2
.env .env
hugo_* hugo_*
.hugo_build.lock .hugo_build.lock

37
ci/build.mjs
View file

@ -1,21 +1,34 @@
import vuePlugin from 'esbuild-vue'
import esbuild from 'esbuild' import esbuild from 'esbuild'
import { sassPlugin } from 'esbuild-sass-plugin'
import vuePlugin from 'esbuild-plugin-vue3'
esbuild.build({ const buildOpts = {
assetNames: '[name]-[hash]',
bundle: true, bundle: true,
define: { define: {
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'dev'), 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'dev'),
}, },
entryPoints: ['src/main.js'], entryPoints: ['src/main.ts'],
loader: {}, legalComments: 'none',
loader: {
'.ttf': 'file',
'.woff2': 'file',
},
minify: true, minify: true,
outfile: 'editor/app.js', outfile: 'editor/app.js',
plugins: [vuePlugin()], plugins: [
target: [ sassPlugin(),
'chrome87', vuePlugin(),
'edge87',
'es2020',
'firefox84',
'safari14',
], ],
}) target: [
'chrome109',
'edge116',
'es2020',
'firefox115',
'safari15',
],
}
export { buildOpts }
esbuild.build(buildOpts)

11
editor/index.html
View file

@ -1,18 +1,23 @@
<!doctype html> <!doctype html>
<html lang="de"> <html lang="en" data-bs-theme="dark">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Twitch-Bot: Config-Editor</title> <title>Twitch-Bot: Config-Editor</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="editor/app.css" rel="stylesheet"> <link href="editor/app.css" rel="stylesheet">
<style> <style>
[v-cloak] { display: none; } [v-cloak] {
display: none;
}
</style> </style>
</head>
<body>
<div id="app" v-cloak></div> <div id="app" v-cloak></div>
<script src="editor/app.js"></script> <script src="editor/app.js"></script>
</body>
</html> </html>

6581
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

35
package.json
View file

@ -1,24 +1,21 @@
{ {
"devDependencies": {
"@babel/eslint-parser": "^7.21.3",
"esbuild": "^0.17.13",
"esbuild-vue": "^1.2.2",
"eslint": "^8.36.0",
"eslint-plugin-vue": "^9.10.0",
"vue-template-compiler": "^2.7.14"
},
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.0", "@fortawesome/fontawesome-free": "^6.5.2",
"@fortawesome/free-brands-svg-icons": "^6.4.0", "bootstrap": "^5.3.3",
"@fortawesome/free-solid-svg-icons": "^6.4.0", "codejar": "^4.2.0",
"@fortawesome/vue-fontawesome": "^2.0.10",
"axios": "^1.3.4",
"bootstrap": "^4.6.2",
"bootstrap-vue": "^2.23.1",
"bootswatch": "^4.6.2",
"codejar": "^3.7.0",
"prismjs": "^1.29.0", "prismjs": "^1.29.0",
"vue": "^2.7.16", "vue": "^3.4.27",
"vue-router": "^3.6.5" "vue-router": "^4.3.3"
},
"devDependencies": {
"@babel/eslint-parser": "^7.24.7",
"@typescript-eslint/eslint-plugin": "^7.13.0",
"@typescript-eslint/parser": "^7.13.0",
"esbuild": "^0.21.5",
"esbuild-plugin-vue3": "^0.4.2",
"esbuild-sass-plugin": "^3.3.1",
"eslint": "^8.57.0",
"eslint-plugin-vue": "^9.26.0",
"typescript": "^5.4.5"
} }
} }

132
src/components/app.vue Normal file
View file

@ -0,0 +1,132 @@
<template>
<div class="h-100">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#" @click.prevent>
<i class="fas fa-robot fa-fw mr-1"></i>
Twitch-Bot
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link d-flex align-items-center" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
<img class="rounded-circle nav-profile-image" src="https://placehold.co/400">
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Sign-out</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="layout">
<div class="layoutNav bg-body-tertiary d-flex">
<div class="nav flex-grow-1">
<div class="layoutNavHeading">Core</div>
<a href="#" class="nav-link">
<i class="fas fa-cog fa-fw me-1"></i>
General Settings
</a>
<div class="layoutNavHeading">Chat Interaction</div>
<a href="#" class="nav-link">
<i class="fas fa-envelope-open-text fa-fw me-1"></i>
Auto-Messages
</a>
<a href="#" class="nav-link">
<i class="fas fa-inbox fa-fw me-1"></i>
Rules
</a>
<div class="layoutNavHeading">Modules</div>
<a href="#" class="nav-link">
<i class="fas fa-dice fa-fw me-1"></i>
Raffle
</a>
</div>
</div>
<div class="layoutContent">
<router-view />
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'TwitchBotEditorApp',
})
</script>
<style scoped>
.layout {
display: flex;
}
.layoutContent {
display: flex;
flex-direction: column;
flex-grow: 1;
min-height: calc(100vh - 56px);
min-width: 1;
padding-left: 225px;
position: relative;
}
.layoutNav {
height: 100vh;
left: 0;
padding-top: 56px;
position: fixed;
right: 0;
top: 0;
width: 225px;
z-index: 900;
}
.layoutNav>.nav {
flex-direction: column;
flex-wrap: nowrap;
overflow-y: auto;
}
.layoutNav>.nav>.nav-link {
align-items: center;
color: inherit;
display: flex;
padding-bottom: 0.75rem;
padding-left: 1.5rem;
padding-top: 0.75rem;
position: relative;
}
.layoutNavHeading {
color: color-mix(in srgb, var(--bs-body-color) 50%, transparent);
font-size: 0.75rem;
font-weight: bold;
padding: 1.75rem 1rem 0.75rem;
text-transform: uppercase;
}
.nav-profile-image {
max-width: 24px;
}
.navbar {
z-index: 1000;
}
</style>

24
src/main.ts Normal file
View file

@ -0,0 +1,24 @@
/* eslint-disable sort-imports */
import './style.scss'
import 'bootstrap/dist/css/bootstrap.css'
import '@fortawesome/fontawesome-free/css/all.css'
import 'bootstrap/dist/js/bootstrap.bundle'
import { createApp, h } from 'vue'
import router from './router'
import App from './components/app.vue'
const app = createApp({
name: 'TwitchBotEditor',
render() {
return h(App)
},
router,
})
app.use(router)
app.mount('#app')

22
src/router.ts Normal file
View file

@ -0,0 +1,22 @@
import { createRouter, createMemoryHistory } from 'vue-router'
//import AuthView from './components/auth.vue'
//import ChatView from './components/chatview.vue'
const routes = [
// {
// component: AuthView,
// path: '/',
// },
// {
// component: ChatView,
// path: '/chat',
// },
]
const router = createRouter({
history: createMemoryHistory(),
routes,
})
export default router

5
src/style.scss Normal file
View file

@ -0,0 +1,5 @@
html,
body,
#app {
height: 100%;
}