mirror of
https://github.com/ZeppelinBot/Zeppelin.git
synced 2025-05-10 12:25:02 +00:00
dashboard: use webpack for builds; use tailwindcss instead of bulma; all sorts of tweaks
This commit is contained in:
Dragory
parent
028786d348
commit
577500af92
42 changed files with 4813 additions and 3174 deletions
|
|
@ -1,168 +1,134 @@
|
|||
<template>
|
||||
<div class="docs docs-cloak">
|
||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<div class="navbar-item">
|
||||
<img class="docs-logo" src="../../img/logo.png" alt="" aria-hidden="true">
|
||||
<h1 class="docs-title">Zeppelin Documentation</h1>
|
||||
</div>
|
||||
<div class="docs">
|
||||
<div class="container mx-auto px-4 py-2">
|
||||
<!-- Top bar -->
|
||||
<nav class="flex items-stretch pl-4 pr-2 py-1 border border-gray-700 rounded bg-gray-800 shadow-xl">
|
||||
<div class="flex-initial flex items-center">
|
||||
<img class="flex-auto w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true">
|
||||
<h1 class="flex-auto">Zeppelin Documentation</h1>
|
||||
</div>
|
||||
<div class="flex-1 flex items-center justify-end">
|
||||
<router-link
|
||||
to="/dashboard"
|
||||
role="menuitem"
|
||||
class="py-1 px-2 rounded hover:bg-gray-700">
|
||||
Go to dashboard
|
||||
</router-link>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="navbar-menu is-active">
|
||||
<div class="navbar-end">
|
||||
<router-link to="/dashboard" class="navbar-item">Go to dashboard</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<!-- WIP bar -->
|
||||
<div class="mt-6 px-3 py-2 rounded bg-gray-800 shadow-md">
|
||||
<i class="mdi mdi-alert mr-1" title="Note"></i>
|
||||
This documentation is a work in progress.
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="wip-bar">
|
||||
<i class="mdi mdi-alert"></i>
|
||||
<strong>Note!</strong> This documentation is a work in progress.
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="docs-sidebar">
|
||||
<div class="docs-sidebar-content">
|
||||
<aside class="menu">
|
||||
<p class="menu-label">General</p>
|
||||
<ul class="menu-list">
|
||||
<li><router-link to="/docs/introduction">Introduction</router-link></li>
|
||||
<li><router-link to="/docs/configuration-format">Configuration format</router-link></li>
|
||||
<li><router-link to="/docs/plugin-configuration">Plugin configuration</router-link></li>
|
||||
<li><router-link to="/docs/permissions">Permissions</router-link></li>
|
||||
</ul>
|
||||
|
||||
<p class="menu-label">Reference</p>
|
||||
<ul class="menu-list">
|
||||
<li><router-link to="/docs/reference/argument-types">Argument types</router-link></li>
|
||||
</ul>
|
||||
|
||||
<p class="menu-label">Setup guides</p>
|
||||
<ul class="menu-list">
|
||||
<li><router-link to="/docs/setup-guides/logs">Logs</router-link></li>
|
||||
<li><router-link to="/docs/setup-guides/moderation">Moderation</router-link></li>
|
||||
</ul>
|
||||
|
||||
<p class="menu-label">Plugins</p>
|
||||
<ul class="menu-list">
|
||||
<li v-for="plugin in plugins">
|
||||
<router-link :to="'/docs/plugins/' + plugin.name">{{ plugin.info.prettyName || plugin.name }}</router-link>
|
||||
<!-- Content wrapper -->
|
||||
<div class="flex items-start mt-8">
|
||||
<!-- Sidebar -->
|
||||
<nav class="docs-sidebar flex-none px-4 pt-2 pb-3 mr-8 border border-gray-700 rounded bg-gray-800 shadow-md">
|
||||
<div role="none" v-for="(group, index) in menu">
|
||||
<h1 class="font-bold" :aria-owns="'menu-group-' + index" :class="{'mt-4': index !== 0}">{{ group.label }}</h1>
|
||||
<ul v-bind:id="'menu-group-' + index" role="group" class="list-none pl-2">
|
||||
<li role="none" v-for="item in group.items">
|
||||
<router-link role="menuitem" :to="item.to" class="text-gray-300 hover:text-gray-500">{{ item.label }}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="docs-content flex-auto overflow-x-hidden">
|
||||
<router-view :key="$route.fullPath"></router-view>
|
||||
</div>
|
||||
</div>
|
||||
<div class="docs-main">
|
||||
<router-view :key="$route.fullPath"></router-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.docs-cloak {
|
||||
/* Replaced by "visible" in docs.scss */
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.docs {
|
||||
width: 100%;
|
||||
max-width: 1280px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
border: 1px solid #4e5d6c;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 24px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.docs-logo {
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.docs-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wip-bar {
|
||||
padding: 4px 10px;
|
||||
margin-bottom: 24px;
|
||||
background-color: #2B3E50;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.wip-bar i {
|
||||
color: #fdd7a5;
|
||||
font-size: 24px;
|
||||
vertical-align: -3px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.docs-sidebar {
|
||||
flex: 0 0 280px;
|
||||
}
|
||||
|
||||
.docs-sidebar-content {
|
||||
/* can't scroll with a long list before reaching the end of the page, figure out */
|
||||
/*position: sticky;*/
|
||||
/*top: 20px;*/
|
||||
}
|
||||
|
||||
.docs-sidebar .menu {
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #4e5d6c;
|
||||
background-color: #2b3e50;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.docs-sidebar .menu-label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.docs-main {
|
||||
flex: 1 1 100%;
|
||||
padding: 0 24px 24px;
|
||||
}
|
||||
|
||||
.docs-main >>> h4 {
|
||||
margin-top: 1.25em; /* ? */
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import Vue from "vue";
|
||||
import hljs from "highlight.js/lib/highlight.js";
|
||||
import hljsYaml from "highlight.js/lib/languages/yaml.js";
|
||||
import VueHighlightJS from "vue-highlightjs";
|
||||
import Buefy from "buefy";
|
||||
import {mapState} from "vuex";
|
||||
|
||||
import "../../style/icons.scss";
|
||||
import "buefy/dist/buefy.css";
|
||||
import "highlight.js/styles/ocean.css";
|
||||
import "../../directives/trim-code";
|
||||
import "../../style/docs.scss";
|
||||
type TMenuItem = {
|
||||
to: string;
|
||||
label: string;
|
||||
};
|
||||
type TMenuGroup = {
|
||||
label: string;
|
||||
items: TMenuItem[];
|
||||
};
|
||||
type TMenu = TMenuGroup[];
|
||||
|
||||
hljs.registerLanguage("yaml", hljsYaml);
|
||||
Vue.use(VueHighlightJS, { hljs });
|
||||
Vue.use(Buefy);
|
||||
const menu: TMenu = [
|
||||
{
|
||||
label: 'General',
|
||||
items: [
|
||||
{
|
||||
to: '/docs/introduction',
|
||||
label: 'Introduction',
|
||||
},
|
||||
{
|
||||
to: '/docs/configuration-format',
|
||||
label: 'Configuration format',
|
||||
},
|
||||
{
|
||||
to: '/docs/plugin-configuration',
|
||||
label: 'Plugin configuration',
|
||||
},
|
||||
{
|
||||
to: '/docs/permissions',
|
||||
label: 'Permissions',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
label: 'Reference',
|
||||
items: [
|
||||
{
|
||||
to: '/docs/reference/argument-types',
|
||||
label: 'Argument types',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
label: 'Setup guides',
|
||||
items: [
|
||||
{
|
||||
to: '/docs/setup-guides/logs',
|
||||
label: 'Logs',
|
||||
},
|
||||
{
|
||||
to: '/docs/setup-guides/moderation',
|
||||
label: 'Moderation',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default {
|
||||
async mounted() {
|
||||
await this.$store.dispatch("docs/loadAllPlugins");
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState('docs', {
|
||||
plugins: 'allPlugins',
|
||||
}),
|
||||
menu() {
|
||||
return [
|
||||
...menu,
|
||||
{
|
||||
label: 'Plugins',
|
||||
items: this.plugins.map(plugin => ({
|
||||
label: plugin.info.prettyName || plugin.name,
|
||||
to: `/docs/plugins/${plugin.name}`,
|
||||
})),
|
||||
}
|
||||
];
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue