mirror of
https://github.com/sern-handler/website
synced 2026-06-06 09:26:46 +00:00
Compare commits
1 Commits
feat/tutor
...
feat/clear
| Author | SHA1 | Date | |
|---|---|---|---|
|
c9d8ef511a |
22
.idea/inspectionProfiles/Project_Default.xml
generated
22
.idea/inspectionProfiles/Project_Default.xml
generated
@@ -1,22 +0,0 @@
|
||||
<component name="InspectionProjectProfileManager">
|
||||
<profile version="1.0">
|
||||
<option name="myName" value="Project Default" />
|
||||
<inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
|
||||
<option name="myValues">
|
||||
<value>
|
||||
<list size="7">
|
||||
<item index="0" class="java.lang.String" itemvalue="nobr" />
|
||||
<item index="1" class="java.lang.String" itemvalue="noembed" />
|
||||
<item index="2" class="java.lang.String" itemvalue="comment" />
|
||||
<item index="3" class="java.lang.String" itemvalue="noscript" />
|
||||
<item index="4" class="java.lang.String" itemvalue="embed" />
|
||||
<item index="5" class="java.lang.String" itemvalue="script" />
|
||||
<item index="6" class="java.lang.String" itemvalue="herotitle_font" />
|
||||
</list>
|
||||
</value>
|
||||
</option>
|
||||
<option name="myCustomValuesEnabled" value="true" />
|
||||
</inspection_tool>
|
||||
<inspection_tool class="HtmlUnknownTarget" enabled="false" level="WARNING" enabled_by_default="false" />
|
||||
</profile>
|
||||
</component>
|
||||
188
.idea/workspace.xml
generated
188
.idea/workspace.xml
generated
@@ -4,7 +4,57 @@
|
||||
<option name="autoReloadType" value="SELECTIVE" />
|
||||
</component>
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="53dd69d3-e01a-4656-b414-c727f5aa549a" name="Changes" comment="two dirs back" />
|
||||
<list default="true" id="53dd69d3-e01a-4656-b414-c727f5aa549a" name="Changes" comment="docs: add new plugins docs">
|
||||
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/classes/CommandExecutable.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/classes/CommandExecutable.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/classes/Context.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/classes/Context.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/classes/DefaultErrorHandling.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/classes/DefaultErrorHandling.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/classes/DefaultLogging.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/classes/DefaultLogging.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/classes/DefaultModuleManager.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/classes/DefaultModuleManager.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/classes/EventExecutable.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/classes/EventExecutable.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/classes/ModuleStore.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/classes/ModuleStore.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/classes/SernEmitter.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/classes/SernEmitter.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/enums/CommandType.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/enums/CommandType.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/enums/EventType.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/enums/EventType.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/enums/PayloadType.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/enums/PayloadType.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/enums/PluginType.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/enums/PluginType.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/enums/SernError.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/enums/SernError.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/AutocompleteCommand.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/AutocompleteCommand.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/BothCommand.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/BothCommand.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/ButtonCommand.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/ButtonCommand.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/ChannelSelectCommand.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/ChannelSelectCommand.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/CommandPlugin.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/CommandPlugin.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/ContextMenuMsg.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/ContextMenuMsg.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/ContextMenuUser.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/ContextMenuUser.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/ControlPlugin.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/ControlPlugin.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/Controller.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/Controller.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/Dependencies.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/Dependencies.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/DependencyConfiguration.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/DependencyConfiguration.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/DiscordEventCommand.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/DiscordEventCommand.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/ErrorHandling.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/ErrorHandling.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/EventPlugin.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/EventPlugin.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/ExternalEventCommand.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/ExternalEventCommand.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/InitArgs.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/InitArgs.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/InitPlugin.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/InitPlugin.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/Logging.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/Logging.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/MentionableSelectCommand.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/MentionableSelectCommand.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/ModalSubmitCommand.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/ModalSubmitCommand.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/Module.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/Module.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/ModuleManager.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/ModuleManager.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/Plugin.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/Plugin.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/RoleSelectCommand.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/RoleSelectCommand.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/SernAutocompleteData.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/SernAutocompleteData.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/SernEventCommand.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/SernEventCommand.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/SernSubCommandData.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/SernSubCommandData.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/SernSubCommandGroupData.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/SernSubCommandGroupData.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/SlashCommand.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/SlashCommand.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/StringSelectCommand.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/StringSelectCommand.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/TextCommand.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/TextCommand.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/UserSelectCommand.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/UserSelectCommand.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/interfaces/Wrapper.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/interfaces/Wrapper.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/modules.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/modules.md" afterDir="false" />
|
||||
<change beforePath="$PROJECT_DIR$/docs/api/namespaces/Sern.md" beforeDir="false" afterPath="$PROJECT_DIR$/docs/api/namespaces/Sern.md" afterDir="false" />
|
||||
</list>
|
||||
<option name="SHOW_DIALOG" value="false" />
|
||||
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||
@@ -13,14 +63,6 @@
|
||||
<component name="ComposerSettings">
|
||||
<execution />
|
||||
</component>
|
||||
<component name="FileTemplateManagerImpl">
|
||||
<option name="RECENT_TEMPLATES">
|
||||
<list>
|
||||
<option value="CSS File" />
|
||||
<option value="JavaScript File" />
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
<component name="Git.Merge.Settings">
|
||||
<option name="BRANCH" value="master" />
|
||||
</component>
|
||||
@@ -35,16 +77,10 @@
|
||||
</option>
|
||||
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
|
||||
</component>
|
||||
<component name="GitHubPullRequestSearchHistory">{
|
||||
"lastFilter": {
|
||||
"state": "OPEN",
|
||||
"assignee": "SrIzan10"
|
||||
}
|
||||
}</component>
|
||||
<component name="GithubPullRequestsUISettings">
|
||||
<option name="selectedUrlAndAccountId">
|
||||
<UrlAndAccount>
|
||||
<option name="accountId" value="338eb51f-f02f-4dc6-997b-a87ba611c308" />
|
||||
<option name="accountId" value="1fedf39a-45aa-449b-9d1d-6f25985f42b4" />
|
||||
<option name="url" value="https://github.com/sern-handler/website.git" />
|
||||
</UrlAndAccount>
|
||||
</option>
|
||||
@@ -55,9 +91,6 @@
|
||||
<component name="MarkdownSettingsMigration">
|
||||
<option name="stateVersion" value="1" />
|
||||
</component>
|
||||
<component name="ProjectColorInfo">{
|
||||
"associatedIndex": 7
|
||||
}</component>
|
||||
<component name="ProjectId" id="2DJXFY4dwukGLOzXi05b6lHCkuk" />
|
||||
<component name="ProjectViewState">
|
||||
<option name="hideEmptyMiddlePackages" value="true" />
|
||||
@@ -69,37 +102,17 @@
|
||||
"Git.Branch.Popup.ShowAllRemotes": "true",
|
||||
"RunOnceActivity.OpenProjectViewOnStart": "true",
|
||||
"RunOnceActivity.ShowReadmeOnStart": "true",
|
||||
"SHARE_PROJECT_CONFIGURATION_FILES": "true",
|
||||
"WebServerToolWindowFactoryState": "false",
|
||||
"git-widget-placeholder": "feat/tutorial",
|
||||
"ignore.virus.scanning.warn.message": "true",
|
||||
"last_opened_file_path": "C:/Users/USER/Desktop/Development/mainwebsite",
|
||||
"list.type.of.created.stylesheet": "CSS",
|
||||
"node.js.detected.package.eslint": "true",
|
||||
"node.js.selected.package.eslint": "(autodetect)",
|
||||
"node.js.selected.package.tslint": "(autodetect)",
|
||||
"last_opened_file_path": "C:/Users/jacob/OneDrive/Desktop/Projects/sern/website",
|
||||
"nodejs_package_manager_path": "npm",
|
||||
"project.structure.last.edited": "Modules",
|
||||
"project.structure.proportion": "0.0",
|
||||
"project.structure.side.proportion": "0.0",
|
||||
"settings.editor.selected.configurable": "preferences.pluginManager",
|
||||
"ts.external.directory.path": "E:\\IntelliJ IDEA 2022.1.1\\plugins\\JavaScriptLanguage\\jsLanguageServicesImpl\\external",
|
||||
"vue.rearranger.settings.migration": "true"
|
||||
"ts.external.directory.path": "E:\\IntelliJ IDEA 2022.1.1\\plugins\\JavaScriptLanguage\\jsLanguageServicesImpl\\external"
|
||||
}
|
||||
}</component>
|
||||
<component name="ReactDesignerToolWindowState">
|
||||
<option name="myId2Visible">
|
||||
<map>
|
||||
<entry key="com.haulmont.rcb.reactComponents" value="false" />
|
||||
<entry key="com.haulmont.rcb.reactInspector" value="false" />
|
||||
<entry key="com.haulmont.rcb.storybook" value="false" />
|
||||
</map>
|
||||
</option>
|
||||
</component>
|
||||
<component name="RecentsManager">
|
||||
<key name="MoveFile.RECENT_KEYS">
|
||||
<recent name="C:\Users\USER\Desktop\Development\sern-website\docs\tutorial\en\intro" />
|
||||
<recent name="C:\Users\USER\Desktop\Development\sern-website\docs\tutorial\en" />
|
||||
<recent name="C:\Users\jacob\IdeaProjects\website\static\img" />
|
||||
</key>
|
||||
</component>
|
||||
@@ -169,15 +182,6 @@
|
||||
<workItem from="1671119393024" duration="3889000" />
|
||||
<workItem from="1673974979200" duration="2385000" />
|
||||
<workItem from="1674757791435" duration="925000" />
|
||||
<workItem from="1693943174979" duration="3494000" />
|
||||
<workItem from="1693998900601" duration="4854000" />
|
||||
<workItem from="1694013887941" duration="680000" />
|
||||
<workItem from="1694014634755" duration="3452000" />
|
||||
<workItem from="1694086921138" duration="3532000" />
|
||||
<workItem from="1694095607446" duration="2640000" />
|
||||
<workItem from="1694170854677" duration="225000" />
|
||||
<workItem from="1694463335421" duration="56000" />
|
||||
<workItem from="1694533500197" duration="2188000" />
|
||||
</task>
|
||||
<task id="LOCAL-00001" summary="feat: remove old index.html in static/">
|
||||
<created>1660418841831</created>
|
||||
@@ -368,71 +372,7 @@
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1673976828238</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00028" summary="fix: some grammar errors and dir structure">
|
||||
<option name="closed" value="true" />
|
||||
<created>1693943258104</created>
|
||||
<option name="number" value="00028" />
|
||||
<option name="presentableId" value="LOCAL-00028" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1693943258104</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00029" summary="chore: move file structure">
|
||||
<option name="closed" value="true" />
|
||||
<created>1693943441448</created>
|
||||
<option name="number" value="00029" />
|
||||
<option name="presentableId" value="LOCAL-00029" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1693943441448</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00030" summary="rephrasing a bit and ropox introduction invasion">
|
||||
<option name="closed" value="true" />
|
||||
<created>1693944545011</created>
|
||||
<option name="number" value="00030" />
|
||||
<option name="presentableId" value="LOCAL-00030" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1693944545011</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00031" summary="add introduction for me (im egoist)">
|
||||
<option name="closed" value="true" />
|
||||
<created>1693999127245</created>
|
||||
<option name="number" value="00031" />
|
||||
<option name="presentableId" value="LOCAL-00031" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1693999127245</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00032" summary="move to mdx">
|
||||
<option name="closed" value="true" />
|
||||
<created>1693999615376</created>
|
||||
<option name="number" value="00032" />
|
||||
<option name="presentableId" value="LOCAL-00032" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1693999615376</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00033" summary="add title">
|
||||
<option name="closed" value="true" />
|
||||
<created>1693999895960</created>
|
||||
<option name="number" value="00033" />
|
||||
<option name="presentableId" value="LOCAL-00033" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1693999895960</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00034" summary="feedback system">
|
||||
<option name="closed" value="true" />
|
||||
<created>1694534513180</created>
|
||||
<option name="number" value="00034" />
|
||||
<option name="presentableId" value="LOCAL-00034" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1694534513180</updated>
|
||||
</task>
|
||||
<task id="LOCAL-00035" summary="two dirs back">
|
||||
<option name="closed" value="true" />
|
||||
<created>1694535688773</created>
|
||||
<option name="number" value="00035" />
|
||||
<option name="presentableId" value="LOCAL-00035" />
|
||||
<option name="project" value="LOCAL" />
|
||||
<updated>1694535688773</updated>
|
||||
</task>
|
||||
<option name="localTasksCounter" value="36" />
|
||||
<option name="localTasksCounter" value="28" />
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TypeScriptGeneratedFilesManager">
|
||||
@@ -450,6 +390,14 @@
|
||||
</option>
|
||||
</component>
|
||||
<component name="VcsManagerConfiguration">
|
||||
<MESSAGE value="feat: remove old index.html in static/" />
|
||||
<MESSAGE value="feat: edit action" />
|
||||
<MESSAGE value="feat: delete needless assets/dir" />
|
||||
<MESSAGE value="feat: action changes and edit link" />
|
||||
<MESSAGE value="feat: add favicon" />
|
||||
<MESSAGE value="fix: broken link" />
|
||||
<MESSAGE value="chore: edit link so no new windows" />
|
||||
<MESSAGE value="chore: fix typo" />
|
||||
<MESSAGE value="feat: adding width attr" />
|
||||
<MESSAGE value="feat: adding blogs" />
|
||||
<MESSAGE value="feat: blogwork" />
|
||||
@@ -467,14 +415,6 @@
|
||||
<MESSAGE value="feat: update documentation and clarify documentation" />
|
||||
<MESSAGE value="fix: links" />
|
||||
<MESSAGE value="docs: add new plugins docs" />
|
||||
<MESSAGE value="fix: some grammar errors and dir structure" />
|
||||
<MESSAGE value="chore: move file structure" />
|
||||
<MESSAGE value="rephrasing a bit and ropox introduction invasion" />
|
||||
<MESSAGE value="add introduction for me (im egoist)" />
|
||||
<MESSAGE value="move to mdx" />
|
||||
<MESSAGE value="add title" />
|
||||
<MESSAGE value="feedback system" />
|
||||
<MESSAGE value="two dirs back" />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="two dirs back" />
|
||||
<option name="LAST_COMMIT_MESSAGE" value="docs: add new plugins docs" />
|
||||
</component>
|
||||
</project>
|
||||
BIN
.yarn/install-state.gz
Normal file
BIN
.yarn/install-state.gz
Normal file
Binary file not shown.
@@ -13,7 +13,7 @@ You see, on today's standards, having a simple logo is essential. Our logo align
|
||||
We were chilling, you know, cooking sern handler v3, sern gui, `npm create @sern/bot` and serncord when we thought about changing the logo to a sleek design with less colors.
|
||||
And here we are!
|
||||
|
||||
# Who did our new branding? {#ropox-thing}
|
||||
# Who did our new branding?
|
||||
|
||||
[Ropox](https://github.com/Murtatrxx)!
|
||||
Bro's the GOAT. This website is maintained by him, the domain costs are funded by him and also he started brainstorming how the logo would be on paper:
|
||||
|
||||
28
docs/cli/clear.md
Normal file
28
docs/cli/clear.md
Normal file
@@ -0,0 +1,28 @@
|
||||
```sh
|
||||
Usage: sern commands clear [options]
|
||||
|
||||
Clear and reset commands-data-remote.json and the api
|
||||
|
||||
Options:
|
||||
-y, --yes Say yes to all prompts
|
||||
-e, --env [path] Supply a path to a .env
|
||||
-h, --help display help for command
|
||||
```
|
||||
## Implicits
|
||||
- Automatically reads a .env in the working directory. For seamless integration, your .env file should look like this:
|
||||
```txt title=".env"
|
||||
DISCORD_TOKEN=<YOUR_TOKEN>
|
||||
APPLICATION_ID=<YOUR_APPLICATION_ID>
|
||||
NODE_ENV=<development|production>
|
||||
```
|
||||
- Calls the discord API with the [PUT route](https://discord.com/developers/docs/interactions/application-commands#bulk-overwrite-global-application-commands) with an EMPTY array, essentially setting all registered commands to nothing.
|
||||
|
||||
- Optionally override an .env path as a command line argument as well. **CLI arguments take precedence.**
|
||||
If you do not know how to obtain either of these credentials, [click here](https://github.com/reactiflux/discord-irc/wiki/Creating-a-discord-bot-&-getting-a-token)
|
||||
|
||||
- Automatically confirm with the **-y** flag.
|
||||
|
||||
## Features
|
||||
- Clears all application data and sern-commands-data.json
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ Options:
|
||||
```txt title=".env"
|
||||
DISCORD_TOKEN=<YOUR_TOKEN>
|
||||
APPLICATION_ID=<YOUR_APPLICATION_ID>
|
||||
MODE=<DEV|PROD>
|
||||
NODE_ENV=<production|development>
|
||||
```
|
||||
- Calls the discord API with the [PUT route](https://discord.com/developers/docs/interactions/application-commands#bulk-overwrite-global-application-commands). Wherever your commands directory is located, publish will override the existing application commands at Discord. Existing commands do not count towards the command limit creation daily.
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
sidebar_position: 7
|
||||
---
|
||||
:::warning
|
||||
This contains version 2 code. Please view [transitioning to v3](./transition)
|
||||
This contains version 2 code. Please view [transitioning to v3](../transition)
|
||||
:::
|
||||
|
||||
Since version 2.0.0, dependency injection, thanks to [iti](https://github.com/molszanski/iti), is a feature to customize your bot's utilities and structures.
|
||||
|
||||
@@ -4,8 +4,8 @@ sidebar_position: 0
|
||||
|
||||
# Welcome!
|
||||
|
||||
:::tip
|
||||
Please read the [transition](../docs/guide/walkthrough/transition.md) page if you are moving from version 2 to version 3.
|
||||
:::warning
|
||||
Please read the [transition](./transition) page if you are moving from version 2 to version 3.
|
||||
:::
|
||||
|
||||
## Content
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
---
|
||||
title: Overview
|
||||
sidebar_position: 1
|
||||
---
|
||||
import GuideFeedback from "../../../../src/components/GuideFeedback";
|
||||
|
||||
# Guide Overview
|
||||
Welcome to the sern Discord Bot Development Guide! 🚀
|
||||
|
||||
## What You'll Learn
|
||||
In this comprehensive guide, we'll take you on a journey from the basics to the advanced concepts of creating and deploying your own Discord bot using the sern framework. Whether you're a beginner or have some coding experience, we've designed this guide to be inclusive and accessible to all.
|
||||
|
||||
## Guide Structure
|
||||
Our guide is structured to take you step by step through the process of building a Discord bot with sern. Here's an overview of what you can expect:
|
||||
|
||||
- **Who are we?** Meet the sern team behind sern.
|
||||
|
||||
- **What is sern and what problems does it solve?**
|
||||
Understand why sern, what is it and what does it solve.
|
||||
|
||||
- **Preparing** Set up your development environment.
|
||||
|
||||
- **Setting up the project** Learn about libraries and tools like @sern/handler and discord.js.
|
||||
|
||||
- **Setting Up the Bot** Register your bot, obtain necessary credentials, and set it up.
|
||||
|
||||
- **sern Overview** Dive into the core concepts of sern and its components.
|
||||
|
||||
- **Example Projects** Build practical Discord bots with sern.
|
||||
|
||||
- **Integration with Databases** Learn what is a database, which is the right one for you. And how to use them in your bot.
|
||||
|
||||
- **Ship Your Code To GitHub** Learn about Git, GitHub CLI, and version control systems & how to use them.
|
||||
|
||||
- **Deploy** Discover hosting options, scaling with AWS Fargate, and more.
|
||||
|
||||
- **Other Steps** Explore additional topics like comparing sern to other solutions and planning for future growth.
|
||||
|
||||
- **Conclusion** Reflect on what you've learned and your next steps in Discord bot development and sern.
|
||||
|
||||
We're excited to embark on this journey with you. Each section is designed to build upon the previous one, so feel free to follow along step by step or jump to the topics that interest you the most. By the end of this guide, you'll have the skills and knowledge to create, deploy, and manage your own Discord bot using sern.
|
||||
|
||||
---
|
||||
<GuideFeedback />
|
||||
@@ -1,26 +0,0 @@
|
||||
---
|
||||
title: What is sern?
|
||||
sidebar_position: 3
|
||||
---
|
||||
import GuideFeedback from "../../../../src/components/GuideFeedback";
|
||||
|
||||
We're a discord bot framework. The lack of tooling in the discord.js community is apparent, and is also monolithic. You can make bots easily and concisely with our suite of tools. We're also a community. Please join [here](https://sern.dev/discord)!
|
||||
|
||||
### Problem
|
||||
|
||||
- **no beginner friendly handler**
|
||||
- **bad practices in discord.js guide**
|
||||
- **lack of wholesome community in discord.js**
|
||||
- **lack of modularity**
|
||||
|
||||
sern tries to solve all these problems. This tutorial is for anyone and everyone, beginners and advanced alike.
|
||||
|
||||
## Solution
|
||||
|
||||
- our handlers are modular and efficient.
|
||||
- from my personal experience, the community feels pretentious and mean.
|
||||
- discord.js discord chat feels pretentious and unwelcome to beginners.
|
||||
- From community plugins to container, swap out tooling and things with ease.
|
||||
|
||||
---
|
||||
<GuideFeedback />
|
||||
@@ -1,33 +0,0 @@
|
||||
---
|
||||
title: Who are we?
|
||||
sidebar_position: 2
|
||||
---
|
||||
import GuideFeedback from "../../../../src/components/GuideFeedback";
|
||||
|
||||
Who are we?
|
||||
Meet the passionate minds behind sern, working tirelessly to make your Discord bot development experience exceptional. Whether we're coding, designing, or building infrastructure, our common goal is to provide you the neccecities and bring your bot ideas to life.
|
||||
|
||||
# serendipity {#seren}
|
||||
Hi.
|
||||
I believe in making complicated things simpler and am an OSS contributor. OSS for life. This handler has been my baby for a long time now.
|
||||
My favorite programming language is clojure
|
||||
|
||||
# EvolutionX {#evo}
|
||||
You can call me Evo, I'm the automation lover of the team. discord.js was my turning point into programming and I've been hooked ever since. I'm a full stack developer and I love to learn new things. I'm also a huge fan of open source and I'm always looking for ways to contribute to the community.
|
||||
sern is close to my heart and I'm proud to be a part of it. Let's make some awesome bots together!
|
||||
|
||||
# Sr Izan {#ethan}
|
||||
|
||||
Hey! I'm Ethan, the only guy on the development team who is european, and the only one who commits on all repos except for the handler.
|
||||
|
||||
Nice to meet you and I hope you enjoy this guide as much as we enjoyed making it!
|
||||
|
||||
# ropox {#ropox}
|
||||
Hey there, I'm ropox! 👋
|
||||
|
||||
I'm not just a programmer; I'm one of the passionate maintainers of the sern framework. My mission is to demystify Discord bot development and ensure it's accessible to everyone. But that's not all – I wear multiple hats, including design (i designed the logo) and infrastructure
|
||||
|
||||
some say [I'm the coolest of all](/blog/newlogo#ropox-thing)
|
||||
|
||||
---
|
||||
<GuideFeedback />
|
||||
@@ -1,18 +0,0 @@
|
||||
---
|
||||
title: Choosing a package manager
|
||||
---
|
||||
import GuideFeedback from "../../../../src/components/GuideFeedback";
|
||||
|
||||
<!-- Rephrasing and title done by Ethan -->
|
||||
|
||||
A package manager is like a helper for your programs. It brings all the tools for your projects and makes sure they fit and work well together. It's like having someone organize things so you can work without problems.
|
||||
|
||||
The most used ones are:
|
||||
- [npm](https://www.npmjs.com)
|
||||
- [Yarn](https://yarnpkg.com)
|
||||
- [pnpm](https://pnpm.io/)
|
||||
|
||||
For this tutorial, we'll be using **[NPM](https://www.npmjs.com)**, to keep it simple.
|
||||
|
||||
---
|
||||
<GuideFeedback />
|
||||
@@ -1,26 +0,0 @@
|
||||
---
|
||||
title: npm create @sern/bot
|
||||
sidebar_position: 1
|
||||
---
|
||||
import GuideFeedback from "../../../../src/components/GuideFeedback";
|
||||
|
||||
Alright, you've got everything set up. Now it's time to create your bot!
|
||||
|
||||
## The backstory
|
||||
|
||||
In the initial days of sern, we used to create our bots with the `sern init` command in the CLI.
|
||||
This command was an easy way to set up a sern project in ten, even five minutes!
|
||||
|
||||
But now there's a new, cooler and faster sheriff in town: the [`npm create @sern/bot`](https://github.com/sern-handler/create-bot) command.
|
||||
This was an alternative to the old command, which got deprecated in favor of this tool in no time.
|
||||
|
||||
## The GUI
|
||||
|
||||
Currently WIP by me, sern GUI will be a graphical frontend to sern CLI and the npm create command.
|
||||
Follow development on the [Github repo](https://github.com/sern-handler/gui).
|
||||
|
||||
See you on the next chapter where we'll use the already discussed command to set up your bot!
|
||||
|
||||
---
|
||||
Written by [Sr Izan](../intro/who-are-we#ethan)
|
||||
<GuideFeedback />
|
||||
@@ -1,31 +0,0 @@
|
||||
---
|
||||
title: Creating your sern bot
|
||||
sidebar_position: 1
|
||||
---
|
||||
import GuideFeedback from "../../../../src/components/GuideFeedback";
|
||||
|
||||
Creating a bot with sern is a piece of cake, trust me!
|
||||
As discussed in [the npm create command chapter](../setting-up-project/npm-create), we're going to be using that awesome tool to set sern up.
|
||||
So, what are we waiting for? Let's get started!
|
||||
|
||||
Open up a terminal in your ~~failed~~ projects directory. Then, type the following command:
|
||||
```sh
|
||||
npm create @sern/bot
|
||||
```
|
||||
After installing the package, prompts will show up on your terminal. Neat!
|
||||
|
||||
## Prompt walkthrough
|
||||
|
||||
First, choose a template. In this guide, select the please select the `Javascript with sern cli & ESM` option when prompted.
|
||||
|
||||
Then, choose a project name. This one should be lowercase with dashes and/or underscores (aka `kebab-case` or `snake_case`).
|
||||
|
||||
In the package manager prompt, select [NPM](../preparing/package-manager)
|
||||
|
||||
|
||||
And you're done... with that. See you in the next chapter, where you'll get your discord bot token!
|
||||
|
||||
---
|
||||
Written by [Sr Izan](../intro/who-are-we#ethan)
|
||||
Get the [source code](https://github.com/sern-handler/tutorial-bot/tree/setting-up-bot/creating-bot)!
|
||||
<GuideFeedback />
|
||||
@@ -1,124 +0,0 @@
|
||||
---
|
||||
title: Create your Discord Application
|
||||
sidebar_position: 2
|
||||
---
|
||||
import GuideFeedback from "../../../../src/components/GuideFeedback";
|
||||
|
||||
Welcome back!
|
||||
|
||||
Before we do anything, we need to edit some code in our bot to make it read the Discord token safely and securely.
|
||||
|
||||
Create a blank `.env` file in the root of your project directory (the directory where your `package.json` file is located)
|
||||
|
||||
```
|
||||
.
|
||||
├── .env
|
||||
├── .env.example
|
||||
├── .sern
|
||||
├── generated
|
||||
├── .gitignore
|
||||
├── .npmignore
|
||||
├── README.md
|
||||
├── package.json
|
||||
├── sern.config.json
|
||||
├── jsconfig.json
|
||||
├── src
|
||||
│ ├── commands
|
||||
│ │ └── ping.js
|
||||
│ ├── dependencies.d.ts
|
||||
│ └── index.js
|
||||
└── package-lock.json
|
||||
```
|
||||
|
||||
## Setting up your Discord Application
|
||||
Notice the `.env.example` file? Let's open it.
|
||||
```sh
|
||||
DISCORD_TOKEN=YOUR_DISCORD_TOKEN
|
||||
APPLICATION_ID=YOUR_DISCORD_BOT_USER_ID
|
||||
NODE_ENV=<production OR development>
|
||||
```
|
||||
We need to fill this out, but in another file.
|
||||
- Create a file `.env` next to `.env.example`
|
||||
- Copy `.env.example` contents into `.env`, we'll fill this out now.
|
||||
|
||||
### Discord Token
|
||||
You have your bot (almost) ready to go, but first we need a bot token.
|
||||
|
||||
- Go to Discord Developer's homepage (you can type [discord.dev](https://discord.dev) in your browser and then click on "Applications" on the sidebar)
|
||||
|
||||
- Click on "New Application" in the top right.
|
||||
|
||||
Then, fill in your application's name:
|
||||
|
||||
|
||||
- Click on "Bot" in the sidebar, then the "Reset Token" button and copy the token. The token should look something like this:
|
||||
```
|
||||
MTE1MjM2MDczNzczMDE5OTU2Mg.GUWUsy.dXAoO6NI1Cy3OV7IA-BTGcyzLS28-9tECNcVOg
|
||||
```
|
||||
|
||||
- Scroll down and enable the `Message Content Intent` and `Server Members Intent` so text commands work and discord.js doesn't error out.
|
||||
|
||||
- Replace `YOUR_DISCORD_TOKEN` with your actual discord token:
|
||||
```
|
||||
DISCORD_TOKEN=MTE1MjM2MDczNzczMDE5OTU2Mg.GUWUsy.dXAoO6NI1Cy3OV7IA-BTGcyzLS28-9tECNcVOg
|
||||
```
|
||||
### APPLICATION_ID
|
||||
- Go to "General Information" and find your "APPLICATION ID". Copy That!
|
||||
- Place it into your .env file.
|
||||
- In future versions of sern, this may not be needed, but bear with me.
|
||||
```
|
||||
APPLICATION_ID=12345632432423987432987
|
||||
```
|
||||
|
||||
### Mode
|
||||
With sern, there are two stages, development and production. Production is when we ship it to a hosting server and development is
|
||||
for ...developing. Let's set our NODE_ENV to development. For a more formal explanation, read [this](https://nodejs.org/en/learn/getting-started/nodejs-the-difference-between-development-and-production)
|
||||
|
||||
```
|
||||
NODE_ENV=development
|
||||
```
|
||||
|
||||
### Final
|
||||
Your `.env` file should looks something like this.
|
||||
```
|
||||
DISCORD_TOKEN=MTE1MjM2MDczNzczMDE5OTU2Mg.GUWUsy.dXAoO6NI1Cy3OV7IA-BTGcyzLS28-9tECNcVOg
|
||||
APPLICATION_ID=12345632432423987432987
|
||||
NODE_ENV=development
|
||||
```
|
||||
|
||||
:::danger
|
||||
Please do NOT commit this file! It basically contains the bot's password and, even though Discord will notice and create another token, other services will most probably not have that privilege!
|
||||
To fix this, create a `.gitignore` file and add an entry for `.env` [and `node_modules` while we're there](https://i.redd.it/tfugj4n3l6ez.png).
|
||||
:::
|
||||
|
||||
## Inviting your bot to a Discord server.
|
||||
|
||||
This is the last stretch!
|
||||
|
||||
On the sidebar of the Discord Developer Portal, click `OAuth2` and then on `URL Generator`.
|
||||
On scopes, tick only `bot`:
|
||||
|
||||
Then on `Bot permissions` tick `Send Messages` and `Read Message History`. If you need others for your specific use-case, add them here.
|
||||
|
||||
|
||||
Finally, scroll down, copy the generated URL, paste it on the address bar and invite your bot as usual.
|
||||
|
||||
## Starting the bot
|
||||
Since we use slash commands, we need to let Discord know we want to use their user interface.
|
||||
- Run `npm run commands:publish`
|
||||
|
||||
:::info
|
||||
This script uses our command line utility, [publish](https://sern.dev/docs/cli/publish).
|
||||
:::
|
||||
|
||||
There's an npm script that's called `start`, so we're going to be running that.
|
||||
Execute in your terminal:
|
||||
```
|
||||
npm start
|
||||
```
|
||||
And your bot should start up in no time! **Congrats!**
|
||||
|
||||
---
|
||||
Written by [Sr Izan](../intro/who-are-we#ethan)
|
||||
Get the [source code](https://github.com/sern-handler/tutorial-bot/tree/setting-up-bot/creating-discord-app)!
|
||||
<GuideFeedback />
|
||||
@@ -1,44 +0,0 @@
|
||||
---
|
||||
title: command
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
import GuideFeedback from "../../../../src/components/GuideFeedback";
|
||||
|
||||
# Commands
|
||||
|
||||
## Example command
|
||||
- View the command **ping.js** in `src/commands`.
|
||||
- Make a new file next to **ping.js** called **rps.js**
|
||||
- Copy **ping.js** contents into **rps.js**.
|
||||
We base **rps.js** from **ping.js**
|
||||
|
||||
:::tip
|
||||
The name of your command will be the name of your file.
|
||||
:::
|
||||
|
||||
Each slash command will follow this similar structure.
|
||||
In this tutorial, maybe you were smart enough to guess, but we'll be making rock paper scissors!
|
||||
|
||||
## New command, rock paper scissors
|
||||
- Instead of **CommandType.Both**, `type` property should be **CommandType.Slash**
|
||||
- This is to keep it simple. You'll see later, but slash commands work well with message components.
|
||||
- Give it a description.
|
||||
- run `npm run commands:publish`
|
||||
|
||||
**Your command should be usable on discord now!**
|
||||
|
||||
### Result
|
||||
Your command should now look something along the lines of this:
|
||||
```js title=./commands/rps.js
|
||||
export default commandModule({
|
||||
type: CommandType.Slash,
|
||||
description: "I do rps.",
|
||||
execute: async (ctx) => {
|
||||
await ctx.reply("Pwease wait. dis command in pwogwess"); // 👻
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
<GuideFeedback />
|
||||
@@ -1,104 +0,0 @@
|
||||
---
|
||||
title: Logic
|
||||
sidebar_position: 5
|
||||
---
|
||||
|
||||
import GuideFeedback from "../../../../src/components/GuideFeedback";
|
||||
|
||||
## Game rules
|
||||
- Two players max.
|
||||
- Each player can choose rock, paper scissors
|
||||
- Scissors beats paper, paper beats rock, rock beats scissors
|
||||
|
||||
Get the option selected, adding this to the top of your **execute** function:
|
||||
```js
|
||||
const opponent = ctx.options.getUser("opponent");
|
||||
```
|
||||
:::warning
|
||||
Since we are in a Slash command, the above is valid. If we were to interoperate between Text Commands and Slash Commands,
|
||||
we'd have to check if the current [Context](https://sern.dev/docs/api/classes/Context) is the correct type.
|
||||
:::
|
||||
|
||||
We need to ensure we're not playing against **an invalid user**. Invalid users are those that
|
||||
- are bots **or**
|
||||
- ourselves.
|
||||
|
||||
Create helper function **isInvalidUser** which returns a boolean satisfying the conditions above.
|
||||
|
||||
```js
|
||||
const isInvalidUser = (user) => {
|
||||
return user.id === "182326315813306368" || user.bot;
|
||||
}
|
||||
```
|
||||
:::tip
|
||||
You can easily access anyone's user id by [enabling dev mode](https://beebom.com/how-enable-disable-developer-mode-discord).
|
||||
:::
|
||||
|
||||
Cool, now let's call it, preventing invalid users from being opponents. Put the code snippet before any of the UI logic:
|
||||
```js title="tictactoe, execute function"
|
||||
if(isInvalidUser(opponent)) {
|
||||
return;
|
||||
}
|
||||
```
|
||||
We **return**, or **stop** execution of the function if the condition `isInvalidUser` is true.
|
||||
:::info
|
||||
A step further would be extracting `isInvalidUser` into a separate plugin, if multiple commands share this same logic.
|
||||
:::
|
||||
Before we go any further, let's test. Start up the bot again.
|
||||
- Try running `/rps` with a bot.
|
||||
- What happens?
|
||||
- It may be beneficial to give the user some feedback instead of a **return**.
|
||||
- Try running `/rps` with yourself
|
||||
- What happens?
|
||||
- It may be beneficial to give the user some feedback instead of a **return**.
|
||||
- Try running `/rps` in a DM channel with the bot itself.
|
||||
- What happens?
|
||||
|
||||
Great! notice how in a DM channel, the command is entirely **useless**.
|
||||
Let's use our **channelType** plugin to ensure this doesn't happen.
|
||||
- Add the **plugins** field to your commandModule, adding the channelType plugin.
|
||||
```js
|
||||
plugins: [channelType( )]
|
||||
```
|
||||
- Call it with the right parameters.
|
||||
- All plugins come with documentation in the same file
|
||||
- In our case, we need to supply an array of ChannelTypes, and an optional message.
|
||||
```js
|
||||
plugins: [channelType([ChannelType.GuildText], "You cannot execute this command here.")]
|
||||
```
|
||||
:::info
|
||||
You can publish commands to specific guilds using special configuration.
|
||||
For more information, view the docs [here](https://sern.dev/docs/cli/publish).
|
||||
For educational and simplicity purposes, I'm using a plugin here.
|
||||
:::
|
||||
|
||||
Great! When we rerunning these test conditions, it should catch and respond to these conditions.
|
||||
|
||||
|
||||
## Collectors
|
||||
We know how to display components, but what about responding to them?
|
||||
Discord.js gives us the Collector API, which at its core, listens to incoming interactions from discord.js. It essentially comes in two flavors.
|
||||
- **await**
|
||||
- **callback based**
|
||||
|
||||
**Await** is [easy](https://www.infoq.com/presentations/Simple-Made-Easy/), but it comes at the cost of only collecting `one` at a time. Also,
|
||||
it is blocking on other commands attempting to be run; When we await a component,
|
||||
All other commands will be waiting as well. So, we'll be using callback based, lazily waiting. Let's create a collector to the message sent by the bot. How do we get that message?
|
||||
Luckily `ctx.reply` returns the [Message](https://discord.js.org/#/docs/discord.js/main/class/Message) sent. Let's capture that in a variable.
|
||||
|
||||
- Capture the result of ctx.reply in a variable called **resultMessage**.
|
||||
```js
|
||||
const resultMessage = await ctx.reply({ message, components: grid });
|
||||
```
|
||||
- Create a collector from the message's property `.createMessageComponentCollector()`
|
||||
- Accept only interactions of type **Button** (we are making a tictactoe game of solely buttons),
|
||||
- Make sure to import **ComponentType** from discord.js
|
||||
- Give it a time limit of 60_000 milliseconds aka 1 minute.
|
||||
```js
|
||||
const collector = responseMessage.createMessageComponentCollector({
|
||||
componentType: ComponentType.Button,
|
||||
time: 60_000
|
||||
});
|
||||
```
|
||||
---
|
||||
<GuideFeedback />
|
||||
@@ -1,24 +0,0 @@
|
||||
---
|
||||
title: intro
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
import GuideFeedback from "../../../../src/components/GuideFeedback";
|
||||
|
||||
> How hard can this be?
|
||||
|
||||
This will probably be the longest chapter in the guide. Don't worry though, once we're done, making commands is [**fodder**](https://www.merriam-webster.com/dictionary/fodder).
|
||||
|
||||
Here are some inspirational quotes to make you get motivated.
|
||||
> "If you don't make mistakes, you're not working on hard enough problems." ― Frank Wilczek
|
||||
|
||||
> "Dwell on the beauty of life. Watch the stars, and see yourself running with them." ― Marcus Aurelius, Meditations
|
||||
|
||||
> "Never let the future disturb you. You will meet it, if you have to, with the same weapons of reason which today arm you against the present." ― Marcus Aurelius, Meditations
|
||||
|
||||
If you want to add more, feel free to pull request this, but not too many please!
|
||||
|
||||
TODO!!! - ADD RPS DISCORD BOT GIF HERE
|
||||
|
||||
---
|
||||
<GuideFeedback />
|
||||
@@ -1,120 +0,0 @@
|
||||
---
|
||||
title: UI
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
import GuideFeedback from "../../../../src/components/GuideFeedback";
|
||||
|
||||
## Message Components
|
||||
|
||||
Discord has a rich api for developers, and they allow bots to use and interact with certain UI components.
|
||||
Some of these include
|
||||
|
||||
- Buttons
|
||||
- Modals (technically not a component)
|
||||
- Select Menu
|
||||
- Action Rows
|
||||
|
||||
Let's use the mush we call [**brain**](https://www.ninds.nih.gov/health-information/public-education/brain-basics/brain-basics-know-your-brain).
|
||||
|
||||
> **Question**: What components do we need to create a rps game?
|
||||
|
||||
> **Answer**: Buttons!!!! (And also some text i guess)
|
||||
|
||||
|
||||
### Rules
|
||||
Obviously we can't spam the user interface with lots of components; Discord knows this as well.
|
||||
|
||||
Per the [**discord api documentation**](https://discord.com/developers/docs/interactions/message-components#action-rows):
|
||||
- You can have up to 5 Action Rows per message
|
||||
- Maximum of **5** components in an Action Row
|
||||
- An Action Row cannot contain another Action Row
|
||||
- Select Menus take up an entire Action Row, and cannot have buttons
|
||||
|
||||
|
||||
Do the math, and we can have up to 5 (action rows) times 5 (per row), 25 buttons in one message
|
||||
|
||||
### Custom Ids
|
||||
We also need some way to distinguish buttons between other buttons. Whenever a user clicks a button, we are notified that **some** interaction has happened, but from **where?** Custom ids to the rescue. Think of these like 'classes' or 'ids' on html tags. **Each component that we need to handle
|
||||
will have to be retrieved by their custom id in order to properly handle it**
|
||||
|
||||
|
||||
We'll get more into this in the next chapter.
|
||||
|
||||
### Design
|
||||
Our UI will contain a message, and a total of 3 buttons, laid out in a one row.
|
||||
|
||||
TODO!!! PICTURE HERE
|
||||
|
||||
|
||||
### Implementation
|
||||
|
||||
How do we represent this in code? In discord.js, the library we're using, we can represent this via their builder api.
|
||||
Let's create some utility functions before diving straight in.
|
||||
|
||||
```js title="tictactoe.js"
|
||||
const EMPTY = "\0"; // A little trick to show buttons with no 'label'
|
||||
const button = (custom_id, label=EMPTY) => {
|
||||
return new ButtonBuilder({
|
||||
custom_id,
|
||||
label,
|
||||
style: ButtonStyle.Secondary
|
||||
});
|
||||
}
|
||||
|
||||
const row = (...elements) => {
|
||||
return new ActionRowBuilder().addComponents(elements);
|
||||
}
|
||||
```
|
||||
The names for these are pretty self explanatory. **EMPTY** is a placeholder for labels in a button.
|
||||
|
||||
In our **execute** function, let's build the Action Rows.
|
||||
```js title="tictactoe.js, in the execute body"
|
||||
const message = "Tic Tac Toe";
|
||||
|
||||
//Our TicTacToe grid. consists of 3 rows, and in each row, 3 buttons.
|
||||
//Each button has a unique 'customId' of a number.
|
||||
const grid = [row(button('0'), button('1'), button('2'))];
|
||||
|
||||
|
||||
await ctx.reply("Pwease wait. dis command in pwogwess"); // 👻
|
||||
```
|
||||
> Question: Does this grid satisfy the rules stated above?
|
||||
|
||||
> Answer: Yes! We have 1 Action Row that has 3 Buttons. Less than 25 Components!
|
||||
|
||||
Let's try displaying this to Discord. We're not just displaying plain text anymore, we need to change ctx.reply.
|
||||
|
||||
- Change how we call `ctx.reply`. Give it an object instead:
|
||||
```diff
|
||||
- await ctx.reply("Pwease wait. dis command in pwogwess"); // 👻
|
||||
|
||||
+ await ctx.reply({ content: message, components: grid });
|
||||
```
|
||||
One more thing, we need to play against someone, so we'll need to update our commandModule.
|
||||
- Add the import **ApplicationCommandOptionType** from discord.js
|
||||
- Add a new **option** of type **User** to the **options** field of your commandModule.
|
||||
This will display on the user's end as an option to choose from.
|
||||
```js
|
||||
options: [
|
||||
{
|
||||
name: "opponent",
|
||||
description: "Opponent you would like to play with",
|
||||
type: ApplicationCommandOptionType.User,
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
```
|
||||
- Run `npm run commands:publish` once more to update it.
|
||||
|
||||
:::tip
|
||||
Anytime we add a new slash command or its options, its a good idea to run `npm run commands:publish`
|
||||
:::
|
||||
|
||||
Run your bot.
|
||||
- Congrats! You got something to display.
|
||||
Notice how when you try to click, it will say something like `interaction failed to respond`.
|
||||
**Next chapter**, let's wire everything up.
|
||||
|
||||
---
|
||||
<GuideFeedback />
|
||||
@@ -1,13 +0,0 @@
|
||||
---
|
||||
title: Choose your language
|
||||
---
|
||||
|
||||
import GuideFeedback from "../../src/components/GuideFeedback";
|
||||
|
||||
Choose your language:
|
||||
- [English](./en/intro/overview)
|
||||
- [Español](./es)
|
||||
- [Turkish](./tr)
|
||||
|
||||
---
|
||||
<GuideFeedback />
|
||||
32763
package-lock.json
generated
32763
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -7,7 +7,6 @@
|
||||
"scripts": {
|
||||
"docusaurus": "docusaurus",
|
||||
"start": "docusaurus start",
|
||||
"dev": "docusaurus start",
|
||||
"build": "docusaurus build",
|
||||
"swizzle": "docusaurus swizzle",
|
||||
"deploy": "docusaurus deploy",
|
||||
@@ -24,13 +23,11 @@
|
||||
"@docusaurus/preset-classic": "^2.4.0",
|
||||
"@docusaurus/theme-search-algolia": "^2.4.0",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"axios": "^1.5.0",
|
||||
"clsx": "^1.2.1",
|
||||
"jsdoc-parse-plus": "^1.3.0",
|
||||
"prism-react-renderer": "^1.3.5",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-modal": "^3.16.1",
|
||||
"react-turnstile": "^1.1.1"
|
||||
"react-dom": "^17.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@docusaurus/module-type-aliases": "2.0.0-rc.1",
|
||||
|
||||
@@ -1,133 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import styles from "./index.module.css";
|
||||
import Modal from 'react-modal';
|
||||
import Turnstile from "react-turnstile";
|
||||
import { useLocation } from "@docusaurus/router";
|
||||
|
||||
const customStyles = {
|
||||
content: {
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
right: 'auto',
|
||||
bottom: 'auto',
|
||||
marginRight: '-50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
backgroundColor: 'var(--ifm-background-color)',
|
||||
width: '60vw',
|
||||
height: '60vh',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
feedbackBox: {
|
||||
width: '100%',
|
||||
height: '65%',
|
||||
resize: 'none'
|
||||
}
|
||||
};
|
||||
|
||||
export default function GuideFeedback() {
|
||||
const location = useLocation();
|
||||
const [feedback, setFeedback] = useState('');
|
||||
const [inputText, setInputText] = useState('');
|
||||
const [modalIsOpen, setModalIsOpen] = useState(false);
|
||||
const [isSubmitted, setSubmitted] = useState(false);
|
||||
const [turnstileToken, setTurnstileToken] = useState('');
|
||||
const handleFeedbackChange = (e) => {
|
||||
setInputText(e.target.value);
|
||||
};
|
||||
const handleSubmit = () => {
|
||||
if (!turnstileToken) return
|
||||
fetch("https://automata.srizan.dev/api/tutorial/feedback", {
|
||||
method: "POST",
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({
|
||||
inputText,
|
||||
feedback,
|
||||
turnstileToken,
|
||||
route: location.pathname
|
||||
}),
|
||||
mode: 'cors'
|
||||
}).then(() => {
|
||||
closeModal();
|
||||
setSubmitted(true)
|
||||
}).catch((e) => {
|
||||
closeModal();
|
||||
alert('Well, that didn\'t work! Try again later. If it\'s urgent join https://sern.dev/discord :)')
|
||||
console.error(e)
|
||||
})
|
||||
};
|
||||
const openModal = () => {
|
||||
setModalIsOpen(true);
|
||||
};
|
||||
const closeModal = () => {
|
||||
setModalIsOpen(false);
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<Modal
|
||||
isOpen={modalIsOpen}
|
||||
onRequestClose={closeModal}
|
||||
style={customStyles}
|
||||
contentLabel="Example Modal"
|
||||
ariaHideApp={false}
|
||||
>
|
||||
<h1>
|
||||
{feedback === "up"
|
||||
? "Thank you!"
|
||||
: "Sorry you didn't like it! Can you help us improve?"}
|
||||
</h1>
|
||||
<textarea
|
||||
style={customStyles.feedbackBox}
|
||||
value={inputText}
|
||||
onChange={handleFeedbackChange}
|
||||
placeholder="If you have any more feedback, please let us know! (optional)"
|
||||
/>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<Turnstile
|
||||
sitekey={
|
||||
"0x4AAAAAAAJ518xa-S0l-saQ"
|
||||
}
|
||||
onVerify={(token) => {
|
||||
setTurnstileToken(token);
|
||||
}}
|
||||
theme='dark'
|
||||
style={{
|
||||
width: '270px',
|
||||
height: '63px'
|
||||
}} />
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
style={{
|
||||
marginLeft: "auto",
|
||||
order: 2,
|
||||
height: "10vh",
|
||||
width: "30%",
|
||||
backgroundColor: "var(--ifm-color-primary)",
|
||||
}}
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
<div className={styles.inline}>
|
||||
<p
|
||||
className={styles.thumbsUpButton}
|
||||
onClick={() => {
|
||||
if (!isSubmitted) openModal();
|
||||
setFeedback("up");
|
||||
}}
|
||||
>
|
||||
👍
|
||||
</p>
|
||||
<p
|
||||
className={styles.thumbsDownButton}
|
||||
onClick={() => {
|
||||
if (!isSubmitted) openModal();
|
||||
setFeedback("down");
|
||||
}}
|
||||
>
|
||||
👎
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
.inline {
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
.thumbsUpButton, .thumbsDownButton {
|
||||
border: none;
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
font-size: 15px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.thumbsUpButton {
|
||||
background-color: var(--ifm-color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.thumbsDownButton {
|
||||
background-color: var(--ifm-color-primary-dark);
|
||||
margin-left: 5px;
|
||||
}
|
||||
@@ -40,5 +40,5 @@
|
||||
--ifm-color-primary-lightest: #ffffff;
|
||||
--docusaurus-highlighted-code-line-bg: rgba(82, 78, 183, 0.3);
|
||||
--ifm-font-family-monospace: 'JetBrains Mono', 'Fira Code', 'Meslo NGF', 'Menlo', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
|
||||
--ifm-navbar-background-color: #66002a;
|
||||
--ifm-navbar-background-color :#66002a
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user