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

📝 Write documentation

Browse Source
This commit is contained in:
Freeze455
2021-10-06 18:09:53 +02:00
parent 5493a2d11e
commit 1b5d24af74
1 changed files with 14 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
src/templates/modules/documentation/base/Starting.vue
View File

@@ -1,88 +1,20 @@
<template> <template>
<Documentation title="Starting"> <Documentation>
<p> <Markdown v-if="data" :source="data" />
Installing a framework to use it is not always obvious because of the configuration that the developer must make. <Spinner v-else />
</p>
<p>
Unfortunately there is currently no equivalent to automatically create the project. (But we are thinking about it! 😐)
</p>
<h2>Factory, the interactive ordering guest</h2>
<p>
Let's get to the heart of the matter.<br>
In order to develop with the framework, you need to have
<LinkExternal url="https://nodejs.org/en/download/current">NodeJS (<span class="font-extrabold">v.16+</span>)</LinkExternal>
installed on your development environment. Then, globally install the CLI Architect of the bot.
</p>
<div class="flex items-center space-x-5">
<CodeHighlight code="npm install -g @discord-factory/command" />
<p class="text-gray-800">or</p>
<CodeHighlight code="yarn global add @discord-factory/command" />
</div>
<AlertWarn>
<template v-slot:label>
Warn
</template>
<template v-slot:message>
It's possible that using YARN to add the CLI globally does not work correctly, in this case please use NPM.
</template>
</AlertWarn>
<h2>Create your first project</h2>
<p>
The <span class="font-bold">@discord-factory/command</span> module is a CLI which, in the same way as Artisan for Laravel, will allow you to interact quickly with the bot's functionalities.
You can now initialize a project very easily with the following command
</p>
<CodeHighlight class="w-min" code="$ factory create-project" />
<p>
Answer the questions and a blank project will be initialized according to the elements you have defined.
An .env file will be created, this file must have at least the following data :
</p>
<AlertInfo>
<template v-slot:label>
Info
</template>
<template v-slot:message>
The <span class="font-bold">prefix</span> key represents the prefix that each message must have in order to be recognised as a command.
</template>
</AlertInfo>
<AlertInfo>
<template v-slot:label>
Info
</template>
<template v-slot:message>
The <span class="font-bold">token</span> key is the token of your bot. It should never be disclosed or sent on a versioning platform such as github. An article is available here to know how to recover the token of its bot.
</template>
</AlertInfo>
<h2>Starting your project</h2>
<p>All you have to do is install the dependencies with the following commands</p>
<div class="flex items-center space-x-5">
<CodeHighlight code="$ npm install" />
<p class="text-gray-800">or</p>
<CodeHighlight code="$ yarn install" />
</div>
<p>
The Factory framework uses in memory compilation allowing typescript code to be executed directly by ts-node without having to go through a build folder.
Furthermore, this hot compile allows you to reduce your CPU usage by almost 4 times by reducing the memory cost from <span class="font-bold">~600MB</span> to <span class="font-bold">~170MB</span>.
</p>
<div class="flex items-center space-x-5">
<CodeHighlight code="$ npm run dev" />
<p class="text-gray-800">or</p>
<CodeHighlight code="$ yarn dev" />
</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 AlertWarn from '../../../../components/AlertWarn.vue' import { onMounted, ref } from 'vue'
import AlertSuccess from '../../../../components/AlertSuccess.vue'
import AlertInfo from '../../../../components/AlertInfo.vue' const data = ref('')
</script> onMounted(async () => {
data.value = await useDocumentation(markdownEndpoint.STARTING)
})
</script>