arthur/website-documentation
1
0
Fork 0
mirror of https://github.com/DiscordFactory/website-documentation.git synced 2026-01-14 17:34:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Remove old files

Browse Source
This commit is contained in:
Freeze455
2021-10-06 18:01:19 +02:00
parent d7fac5de9f
commit a3752d019d
3 changed files with 0 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
src/components/CodeHighlight.vue
View File

@@ -1,232 +0,0 @@
<template>
<Prism :language="language">{{ code.trim() }}</Prism>
</template>
<script setup lang='ts'>
import 'prismjs'
import 'prismjs/components/prism-typescript'
// @ts-ignore
import Prism from 'vue-prism-component'
type Props = {
language?: string
code: string
}
withDefaults(defineProps<Props>(), {
language: 'typescript',
code: ''
})
</script>
<style lang="scss">
code[class*="language-"],
pre[class*="language-"] {
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
color: #c3cee3;
background: #263238;
font-family: Jetbrains Mono, Roboto Mono, monospace;
font-size: 0.9em;
line-height: 1.8em;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
@apply rounded-md;
}
code[class*="language-"]::-moz-selection,
pre[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection,
pre[class*="language-"] ::-moz-selection {
background: #363636;
}
code[class*="language-"]::selection,
pre[class*="language-"]::selection,
code[class*="language-"] ::selection,
pre[class*="language-"] ::selection {
background: #363636;
}
:not(pre) > code[class*="language-"] {
white-space: normal;
border-radius: 0.2em;
padding: 0.1em;
}
pre[class*="language-"] {
overflow: auto;
position: relative;
padding: .5rem 1em .5rem;
margin: 0;
}
.language-css > code,
.language-sass > code,
.language-scss > code {
color: #fd9170;
}
[class*="language-"] .namespace {
opacity: 0.7;
}
.token.atrule {
color: #c792ea;
}
.token.attr-name {
color: #ffcb6b;
}
.token.attr-value {
color: #c3e88d;
}
.token.attribute {
color: #c3e88d;
}
.token.boolean {
color: #c792ea;
}
.token.builtin {
color: #BFBFBF;
}
.token.cdata {
color: #80cbc4;
}
.token.char {
color: #80cbc4;
}
.token.class {
color: #ffcb6b;
}
.token.class-name {
color: #BFBFBF;
}
.token.color {
color: #f2ff00;
}
.token.comment {
color: #546e7a;
}
.token.constant {
color: #c792ea;
}
.token.deleted {
color: #f07178;
}
.token.doctype {
color: #546e7a;
}
.token.entity {
color: #f07178;
}
.token.function {
color: #0F74B9;
}
.token.hexcode {
color: #f2ff00;
}
.token.id {
color: #c792ea;
font-weight: bold;
}
.token.important {
color: #c792ea;
font-weight: bold;
}
.token.inserted {
color: #80cbc4;
}
.token.keyword {
color: #17A7C1;
font-style: italic;
}
.token.number {
color: #fd9170;
}
.token.operator {
color: #0F74B9;
}
.token.prolog {
color: #546e7a;
}
.token.property {
color: #80cbc4;
}
.token.pseudo-class {
color: #c3e88d;
}
.token.pseudo-element {
color: #c3e88d;
}
.token.punctuation {
color: #BFBFBF;
}
.token.regex {
color: #f2ff00;
}
.token.selector {
color: #f07178;
}
.token.string {
color: #c3e88d;
}
.token.symbol {
color: #C792EA;
}
.token.tag {
color: #f07178;
}
.token.unit {
color: #f07178;
}
.token.url {
color: #fd9170;
}
.token.variable {
color: #f07178;
}
</style>

56
src/templates/modules/documentation/base/Middleware.vue
View File

@@ -1,56 +0,0 @@
<template>
<Documentation title="Middlewares">
<p>
When creating commands, it is very common to have to perform a check before the execution of the command in order to verify,
for example, if the executor of the command has a specific role, required permissions (non-exhaustive list).
</p>
<p>
These checks are usually recurring from command to command and must be duplicated which goes against the Don't Repeat Yourself principle.<br>
The role of middleware is to create a file that can be reused at will and used by any command that requires recurring checks.
</p>
<p>
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 middleware 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 middleware 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>
</Documentation>
</template>
<script setup lang="ts">
import Documentation from '../../../../components/Documentation.vue'
import CodeHighlight from '../../../../components/CodeHighlight.vue'
import Divider from '../../../../components/Divider.vue'
import LinkExternal from '../../../../components/LinkExternal.vue'
import AlertInfo from '../../../../components/AlertInfo.vue'
const file = `
import { Middleware, BaseMiddleware, MiddlewareContext } from '@discord-factory/core'
@Middleware({ pattern: 'YourRegexPattern')}
export default class FooMiddleware implements BaseMiddleware {
public async run(context: MiddlewareContext): Promise<void> {
// Your code here
}
}`
</script>

81
src/templates/modules/documentation/base/SlashCommand.vue
View File

@@ -1,81 +0,0 @@
<template>
<Documentation title="Slash commands">
<p>
The version 13 update of discord.js marks the arrival of Slash Commands.<br>This new feature provides real support for developers who want to create commands on their bots.
It was announced by Discord that they will gradually replace the old command system that we all knew based on the presence of a prefix as the first character of a message with this new suppo
</p>
<div class="space-y-5">
<h2>Create new slash 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" />
<p>
See more about ApplicationCommandOption <LinkExternal url="https://discord.js.org/#/docs/main/stable/typedef/ApplicationCommandOption">here</LinkExternal>
</p>
</div>
</Documentation>
</template>
<script setup lang="ts">
import Documentation from '../../../../components/Documentation.vue'
import CodeHighlight from '../../../../components/CodeHighlight.vue'
import Divider from '../../../../components/Divider.vue'
import LinkExternal from '../../../../components/LinkExternal.vue'
import AlertInfo from '../../../../components/AlertInfo.vue'
import Hightlight from '../../../../components/Hightlight.vue'
const file = `
import { BaseSlashCommand, SlashCommand } from '@discord-factory/core'
import { CommandInteraction } from 'discord.js'
@SlashCommand({
scope: ['your guild id'], 👈 // Or 'GLOBAL' if you want to register globally
options: {
name: 'foo', 👈 // UpperCase isn't valid, please use lowerCase
description: 'Your foo command description',
options: [],
},
})
export default class FooCommand implements BaseSlashCommand {
public async run(interaction: CommandInteraction): Promise<void> {
// Your code here
}
}`
const decorator = `
export interface SlashCommandInterface {
scope: 'GLOBAL' | Snowflake[], 👈 // Or 'GLOBAL' if you want to register globally
roles: Snowflake[],
options: {
name: string, 👈 // UpperCase isn't valid, please use lowerCase
description: string,
options: ApplicationCommandOption[],
}
}`
</script>