adb
/
cybre.town
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

render console dynamically

Browse Source
master
adb 3 years ago
parent ee8480c1e9
commit 66db4de7ee
7 changed files with 161 additions and 61 deletions
Show Stats Download Patch File Download Diff File

54
.eslintrc.js
Unescape View File

@ -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"
]
}
}

2
package.json
Unescape View File

@ -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
Unescape View 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
Unescape View File

@ -0,0 +1,2 @@
User-agent: *
Disallow:

51
src/App.vue
Unescape View File

@ -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>
</style>

50
src/components/console.vue
Unescape View 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
Unescape View 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
}
}
}
Write Preview
Loading…
Cancel
Save