arthur/website-documentation
1
0
Fork 0
mirror of https://github.com/DiscordFactory/website-documentation.git synced 2026-01-26 06:40:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

📝 Write documentation

Browse Source
This commit is contained in:
Freeze455
2021-10-06 18:08:53 +02:00
parent 1af92b22a9
commit 4e10d64554
1 changed files with 13 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/templates/modules/documentation/base/Command.vue
View File

@@ -1,78 +1,20 @@
<template> <template>
<Documentation title="Commands"> <Documentation>
<p> <Markdown v-if="data" :source="data" />
The design of a discord bot spends most of the time developing commands. <Spinner v-else />
The purpose of these commands is to execute certain actions by the moderation or the community. Creating a command with the framework is very simple.
</p>
<div class="space-y-5">
<h2>Create new command from CLI</h2>
<p>
Open a new terminal in your project and write the following command :
</p>
<CodeHighlight class="w-min" code="$ factory make:file" />
<AlertInfo>
<template v-slot:label>
Info
</template>
<template v-slot:message>
Choose to create a command and then answer the questions you will be asked. It is important to note that when you define the file name, you can "place" the file in folders by specifying a path directory in addition to the file name as in the following example :
</template>
</AlertInfo>
</div>
<div class="space-y-5">
<h2>Default command file</h2>
<p>
A file will be created in the specified location otherwise in the root of your project with the following structure :
</p>
<CodeHighlight class="w-min" :code="file" />
</div>
<div class="space-y-5">
<h2>Decorator options</h2>
<p>
A file will be created in the specified location otherwise in the root of your project with the following structure :
</p>
<CodeHighlight class="w-min" :code="decorator" />
</div>
<div class="space-y-5">
<h2>Operation of the controls</h2>
<p>
Open a new terminal in your project and write the following command :
</p>
<img class="" src="../../../../assets/application-command.svg" alt="Workflow" />
</div>
</Documentation> </Documentation>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import Markdown from '../../../../components/Markdown.vue'
import Documentation from '../../../../components/Documentation.vue' import Documentation from '../../../../components/Documentation.vue'
import CodeHighlight from '../../../../components/CodeHighlight.vue' import Spinner from '../../../../components/Spinner.vue'
import Divider from '../../../../components/Divider.vue' import useDocumentation from '../../../../services/Documentation'
import LinkExternal from '../../../../components/LinkExternal.vue' import { markdownEndpoint } from '../../../../utils/Navigation'
import AlertInfo from '../../../../components/AlertInfo.vue' import { onMounted, ref } from 'vue'
const file = `
import { BaseCommand, Command } from '@discord-factory/core'
import { Message } from 'discord.js'
@Command({ label: 'FooCommand command', description: 'FooCommand description', tag: 'foo' }) const data = ref('')
export default class FooCommand implements BaseCommand { onMounted(async () => {
public async run(message: Message, args: string[]): Promise<void> { data.value = await useDocumentation(markdownEndpoint.COMMAND)
// Your code here })
} </script>
}`
const decorator = `
export interface CommandInterface {
label: string
description: string
tag: string
alias?: string[]
usages?: string[]
roles?: string[]
permissions?: PermissionResolvable[]
middlewares?: string[]
}`
</script>