render console dynamically
This commit is contained in:
parent
ee8480c1e9
commit
66db4de7ee
52
.eslintrc.js
52
.eslintrc.js
@ -1,17 +1,39 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
node: true
|
||||
},
|
||||
'extends': [
|
||||
'plugin:vue/vue3-essential',
|
||||
'eslint:recommended'
|
||||
],
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint'
|
||||
},
|
||||
rules: {
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
|
||||
}
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es6": true
|
||||
},
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:vue/essential"
|
||||
],
|
||||
"globals": {
|
||||
"Atomics": "readonly",
|
||||
"SharedArrayBuffer": "readonly"
|
||||
},
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 2018,
|
||||
"sourceType": "module"
|
||||
},
|
||||
"plugins": [
|
||||
"vue"
|
||||
],
|
||||
"rules": {
|
||||
"indent": [
|
||||
"error",
|
||||
2
|
||||
],
|
||||
"linebreak-style": [
|
||||
"error",
|
||||
"unix"
|
||||
],
|
||||
"quotes": [
|
||||
"error",
|
||||
"double"
|
||||
],
|
||||
"semi": [
|
||||
"error",
|
||||
"never"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -20,7 +20,7 @@
|
||||
"@vue/compiler-sfc": "^3.0.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-vue": "^7.0.0-0",
|
||||
"eslint-plugin-vue": "^7.5.0",
|
||||
"node-sass": "^5.0.0",
|
||||
"sass-loader": "^10.1.1"
|
||||
}
|
||||
|
||||
17
public/index.html
Normal file
17
public/index.html
Normal file
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body style="background-color: #1d1d1d;">
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
2
public/robots.txt
Normal file
2
public/robots.txt
Normal file
@ -0,0 +1,2 @@
|
||||
User-agent: *
|
||||
Disallow:
|
||||
49
src/App.vue
49
src/App.vue
@ -1,38 +1,16 @@
|
||||
<template>
|
||||
<div class="top">
|
||||
<pre class="console">
|
||||
<span class="host">[cybre.town]$ ></span> welcome --help
|
||||
|
||||
Welcome to:
|
||||
<span class="logo">
|
||||
__ __
|
||||
/\ \ /\ \__
|
||||
___ __ __\ \ \____ _____ ____ \ \ _\ ____ __ __ __ ______
|
||||
/ ___\/\ \/\ \\ \ __ \/\ __\/ __ \ \ \ \/ / __ \/\ \/\ \/\ \/\ __ \
|
||||
/\ \__/\ \ \_\ \\ \ \_\ \ \ \_/\ __/ __\ \ \_/\ \_\ \ \ \_\ \_\ \ \ \/\ \
|
||||
\ \____\\ \____ \\ \____/\ \_\\ \____\/\_\\ \__\ \____/\ \________/\ \_\ \_\
|
||||
\/____/ \/___/ \\/___/ \/_/ \/____/\/_/ \/__/\/___/ \/_______/ \/_/\/_/
|
||||
/\___/
|
||||
\/__/ @adb.sh
|
||||
</span>
|
||||
free services on this server:
|
||||
|
||||
- Mastodon > social
|
||||
- Gitea > git
|
||||
- Matrix > element
|
||||
- Etherpad > ether
|
||||
- short url > surl
|
||||
- Jitsi > meet
|
||||
|
||||
<span class="host">[cybre.town]$ ></span> <span contenteditable="true">_</span>
|
||||
</pre>
|
||||
<console class="console"></console>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import console from "@/components/console"
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
name: "App",
|
||||
components: {
|
||||
console
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -40,25 +18,10 @@ export default {
|
||||
<style lang="scss">
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
text-align: left;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
}
|
||||
body{
|
||||
background-color: #1d1d1d;
|
||||
}
|
||||
.top{
|
||||
.console{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%,0);
|
||||
.logo{
|
||||
color: #4d8;
|
||||
}
|
||||
.console{
|
||||
color: #fff;
|
||||
.host{color: #02a594;}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
50
src/components/console.vue
Normal file
50
src/components/console.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div class="console">
|
||||
<div class="group" v-for="group in history" :key="group">
|
||||
<pre><span class="host">{{group.host}}</span><span>{{group.command}}</span></pre>
|
||||
<pre><span v-for="output in group.output" :key="output" :class="output.color">{{output.content}}</span></pre>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import commands from "@/render-commands.js"
|
||||
|
||||
export default {
|
||||
name: "console",
|
||||
data(){
|
||||
return{
|
||||
console:{
|
||||
},
|
||||
history:[
|
||||
{
|
||||
host: "[cybre.town]$ > ",
|
||||
command: "welcome --help",
|
||||
output: commands.data().commands.welcome.output
|
||||
},
|
||||
{
|
||||
host: "[cybre.town]$ > ",
|
||||
command: "_",
|
||||
output: []
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
pre{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.console{
|
||||
color: #fff;
|
||||
.group{
|
||||
.host{color: #02a594;}
|
||||
.white{color: #fff}
|
||||
.green{color: #44dd88;}
|
||||
.blue{color: #0081b1;}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
46
src/render-commands.js
Normal file
46
src/render-commands.js
Normal file
@ -0,0 +1,46 @@
|
||||
let commands = {
|
||||
welcome:{
|
||||
output:[
|
||||
{
|
||||
color: "white",
|
||||
content: "\nWelcome to:\n",
|
||||
delay: 100
|
||||
},
|
||||
{
|
||||
color: "green",
|
||||
content:
|
||||
" __ __\n" +
|
||||
" /\\ \\ /\\ \\__\n" +
|
||||
" ___ __ __\\ \\ \\____ _____ ____ \\ \\ _\\ ____ __ __ __ ______\n" +
|
||||
" / ___\\/\\ \\/\\ \\\\ \\ __ \\/\\ __\\/ __ \\ \\ \\ \\/ / __ \\/\\ \\/\\ \\/\\ \\/\\ __ \\\n" +
|
||||
"/\\ \\__/\\ \\ \\_\\ \\\\ \\ \\_\\ \\ \\ \\_/\\ __/ __\\ \\ \\_/\\ \\_\\ \\ \\ \\_\\ \\_\\ \\ \\ \\/\\ \\\n" +
|
||||
"\\ \\____\\\\ \\____ \\\\ \\____/\\ \\_\\\\ \\____\\/\\_\\\\ \\__\\ \\____/\\ \\________/\\ \\_\\ \\_\\\n" +
|
||||
" \\/____/ \\/___/ \\\\/___/ \\/_/ \\/____/\\/_/ \\/__/\\/___/ \\/_______/ \\/_/\\/_/\n" +
|
||||
" /\\___/\n" +
|
||||
" \\/__/ @adb.sh\n\n",
|
||||
delay: 100
|
||||
},
|
||||
{
|
||||
color: "white",
|
||||
content:
|
||||
"free services on this server:\n" +
|
||||
"\n" +
|
||||
" - Mastodon > social\n" +
|
||||
" - Gitea > git\n" +
|
||||
" - Matrix > element\n" +
|
||||
" - Etherpad > ether\n" +
|
||||
" - short url > surl\n" +
|
||||
" - Jitsi > meet\n",
|
||||
delay: 100
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
commands:commands
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user