added legacy plugins section

backend/src/api/docs.ts

@@ -37,7 +37,7 @@ export function initDocs(app: express.Express) {
   app.get("/docs/plugins", (req: express.Request, res: express.Response) => {
     res.json(
       docsPlugins.map(plugin => {
-        const thinInfo = plugin.info ? { prettyName: plugin.info.prettyName } : {};
+        const thinInfo = plugin.info ? { prettyName: plugin.info.prettyName, legacy: plugin.info.legacy ?? false } : {};
         return {
           name: plugin.name,
           info: thinInfo,

backend/src/plugins/Censor/CensorPlugin.ts

@@ -52,6 +52,7 @@ export const CensorPlugin = zeppelinGuildPlugin<CensorPluginType>()({
       Censor words, tokens, links, regex, etc.
       For more advanced filtering, check out the Automod plugin!
     `),
+    legacy: true,
   },
 
   dependencies: [LogsPlugin],

backend/src/plugins/Spam/SpamPlugin.ts

@@ -51,6 +51,7 @@ export const SpamPlugin = zeppelinGuildPlugin<SpamPluginType>()({
       Basic spam detection and auto-muting.
       For more advanced spam filtering, check out the Automod plugin!
     `),
+    legacy: true,
   },
 
   dependencies: [LogsPlugin],

backend/src/plugins/ZeppelinPluginBlueprint.ts

@@ -27,6 +27,7 @@ export interface ZeppelinGuildPluginBlueprint<TPluginData extends GuildPluginDat
     description?: TMarkdown;
     usageGuide?: TMarkdown;
     configurationGuide?: TMarkdown;
+    legacy?: boolean;
   };
 
   configPreprocessor?: (

backend/src/types.ts

@@ -49,6 +49,7 @@ export interface ZeppelinPluginInfo {
   description?: TMarkdown;
   usageGuide?: TMarkdown;
   configurationGuide?: TMarkdown;
+  legacy?: boolean;
 }
 
 export interface CommandInfo {

dashboard/src/components/docs/DocsLayout.vue

@@ -5,17 +5,14 @@
     <!-- 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">
+        <img class="flex-auto w-10 mr-5" src="../../img/logo.png" alt="" aria-hidden="true" />
 
         <router-link to="/docs">
           <h1 class="flex-auto font-semibold">Zeppelin Documentation</h1>
         </router-link>
       </div>
       <div class="flex-1 flex items-center justify-end">
-        <router-link
+        <router-link to="/dashboard" role="menuitem" class="py-1 px-2 rounded hover:bg-gray-700 hidden lg:block">
-          to="/dashboard"
-          role="menuitem"
-          class="py-1 px-2 rounded hover:bg-gray-700 hidden lg:block">
           Go to dashboard
         </router-link>
         <button class="link-button text-2xl leading-zero lg:hidden" v-on:click="toggleMobileMenu()" aria-hidden="true">
@@ -29,12 +26,23 @@
     <!-- Content wrapper -->
     <div class="flex flex-wrap items-start mt-8">
       <!-- Sidebar -->
-      <nav class="docs-sidebar px-4 pt-2 pb-3 mr-8 mb-4 border border-gray-700 rounded bg-gray-800 shadow-md flex-full lg:flex-none lg:block" v-bind:class="{ closed: !mobileMenuOpen }">
+      <nav
+        class="docs-sidebar px-4 pt-2 pb-3 mr-8 mb-4 border border-gray-700 rounded bg-gray-800 shadow-md flex-full lg:flex-none lg:block"
+        v-bind:class="{ closed: !mobileMenuOpen }"
+      >
         <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>
+          <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" v-on:click.native="onChooseMenuItem()">{{ item.label }}</router-link>
+              <router-link
+                role="menuitem"
+                :to="item.to"
+                class="text-gray-300 hover:text-gray-500"
+                v-on:click.native="onChooseMenuItem()"
+                >{{ item.label }}</router-link
+              >
             </li>
           </ul>
         </div>
@@ -50,118 +58,131 @@
 </template>
 
 <script lang="ts">
-  import Vue from "vue";
+import Vue from "vue";
-  import {mapState} from "vuex";
+import { mapState } from "vuex";
-  import Menu from 'vue-material-design-icons/Menu.vue';
+import Menu from "vue-material-design-icons/Menu.vue";
-  import Title from "../Title.vue";
+import Title from "../Title.vue";
 
-  type TMenuItem = {
+type TMenuItem = {
-    to: string;
+  to: string;
-    label: string;
+  label: string;
-  };
+};
-  type TMenuGroup = {
+type TMenuGroup = {
-    label: string;
+  label: string;
-    items: TMenuItem[];
+  items: TMenuItem[];
-  };
+};
-  type TMenu = TMenuGroup[];
+type TMenu = TMenuGroup[];
 
-  const menu: TMenu = [
+const menu: TMenu = [
-    {
+  {
-      label: 'General',
+    label: "General",
-      items: [
+    items: [
-        {
+      {
-          to: '/docs/introduction',
+        to: "/docs/introduction",
-          label: 'Introduction',
+        label: "Introduction",
-        },
-      ],
-    },
-
-    {
-      label: 'Configuration',
-      items: [
-        {
-          to: '/docs/configuration/configuration-format',
-          label: 'Configuration format',
-        },
-        {
-          to: '/docs/configuration/plugin-configuration',
-          label: 'Plugin configuration',
-        },
-        {
-          to: '/docs/configuration/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',
-        },
-        {
-          to: '/docs/setup-guides/counters',
-          label: 'Counters',
-        },
-      ],
-    },
-  ];
-
-  export default {
-    components: { Menu, Title },
-    async mounted() {
-      await this.$store.dispatch("docs/loadAllPlugins");
-    },
-
-    data() {
-      return {
-        mobileMenuOpen: false
-      };
-    },
-
-    methods: {
-      toggleMobileMenu() {
-        this.mobileMenuOpen = !this.mobileMenuOpen;
       },
+    ],
+  },
 
-      onChooseMenuItem() {
+  {
-        this.mobileMenuOpen = false;
+    label: "Configuration",
-        this.$refs['main-anchor'].focus();
+    items: [
+      {
+        to: "/docs/configuration/configuration-format",
+        label: "Configuration format",
       },
+      {
+        to: "/docs/configuration/plugin-configuration",
+        label: "Plugin configuration",
+      },
+      {
+        to: "/docs/configuration/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",
+      },
+      {
+        to: "/docs/setup-guides/counters",
+        label: "Counters",
+      },
+    ],
+  },
+];
+
+export default {
+  components: { Menu, Title },
+  async mounted() {
+    await this.$store.dispatch("docs/loadAllPlugins");
+  },
+
+  data() {
+    return {
+      mobileMenuOpen: false,
+    };
+  },
+
+  methods: {
+    toggleMobileMenu() {
+      this.mobileMenuOpen = !this.mobileMenuOpen;
     },
 
-    computed: {
+    onChooseMenuItem() {
-      ...mapState('docs', {
+      this.mobileMenuOpen = false;
-        plugins: 'allPlugins',
+      this.$refs["main-anchor"].focus();
-      }),
+    },
-      menu() {
+  },
-        return [
+
-          ...menu,
+  computed: {
-          {
+    ...mapState("docs", {
-            label: 'Plugins',
+      plugins: "allPlugins",
-            items: this.plugins.map(plugin => ({
+    }),
+    menu() {
+      console.log(this.plugins);
+
+      return [
+        ...menu,
+        {
+          label: "Plugins",
+          items: this.plugins
+            .filter(plugin => !plugin.info.legacy)
+            .map(plugin => ({
               label: plugin.info.prettyName || plugin.name,
               to: `/docs/plugins/${plugin.name}`,
             })),
-          }
+        },
-        ];
+        {
-      },
+          label: "Legacy Plugins",
+          items: this.plugins
+            .filter(plugin => plugin.info.legacy)
+            .map(plugin => ({
+              label: plugin.info.prettyName || plugin.name,
+              to: `/docs/plugins/${plugin.name}`,
+            })),
+        },
+      ];
     },
-  };
+  },
+};
 </script>