Skip to content

Commit

Permalink
Merge branch 'main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
Pkmmte authored May 10, 2024
2 parents bdad312 + 0dbc9e9 commit d95f907
Show file tree
Hide file tree
Showing 10 changed files with 242 additions and 177 deletions.
40 changes: 20 additions & 20 deletions docs/docs/discord-activities/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@ import { CardRow } from '@site/src/components/shared/CardRow'

# Discord Activities Overview

Robo.js is a powerful framework that allows you to create Discord activities with ease, **[among other things](../discord-bots/overview)**. This section will explain all the concepts behind **[Discord Activities](https://support.discord.com/hc/en-us/articles/4422142836759-Activities-on-Discord)**, and how they are simplified with Robo.js.
**Robo.js** is a powerful framework that allows you to create **[Discord Activities](https://support.discord.com/hc/en-us/articles/4422142836759-Activities-on-Discord)** with ease, **[among other things](../discord-bots/overview)**. This section will explain all the concepts behind them, and how they are simplified with Robo.js.

## Getting Started

Ready to embark on this adventure? Creating a Discord Activity with Robo.js is as easy as running one command.

```bash
npx create-robo <projectName> --kit activity
npx create-robo <projectName> -k activity
```

This will walk you through setting up your project and installing the necessary dependencies. Once selected, you can run and start developing your Discord Activity right away!
Expand All @@ -19,33 +19,33 @@ This will walk you through setting up your project and installing the necessary
<Card
href="https://dev.to/waveplay/how-to-build-a-discord-activity-easily-with-robojs-5bng"
title="📚 Tutorial"
description="How to create a Discord Activity in seconds"
description="How to create a Discord Activity in seconds."
/>
</CardRow>

## What are Discord Activities?

Discord Activities are interactive experiences that users can engage with on Discord. They can be games, quizzes, or any other type of interactive content that users can play with. Basically, they are mini web apps that run inside Discord via iframes!
Discord Activities are web apps that run inside Discord. They can be games, quizzes, or any other type of interactive content that users can play with.

Just like a regular web app, Discord Activities are built using **[HTML](https://developer.mozilla.org/en-US/docs/Web/HTTP)**, **[CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)**, and **[JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)**. You can use any front-end framework you like, such as **[React](https://react.dev/)**, **[Vue](https://vuejs.org/)**, **[Svelte](https://svelte.dev/)**, or none at all. The only difference is that you need to use **[Discord's Embedded App SDK](https://github.com/discord/embedded-app-sdk/)** to interact with Discord's APIs.
Activities can be built using **[HTML](https://developer.mozilla.org/en-US/docs/Web/HTTP)**, **[CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)**, and **[JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)**, alongside any frontend framework such as **[React](https://react.dev/)**, **[Vue](https://vuejs.org/)**, **[Svelte](https://svelte.dev/)**, or none at all. They use **[Discord's Embedded App SDK](https://github.com/discord/embedded-app-sdk/)** to interact with Discord APIs.

## How does Robo.js help?

Robo.js simplifies the process of creating Discord Activities by providing a file-based structure, an integrated database, TypeScript support, and a multitude of plugin-powered skills to unlock along the way. It is designed to be simple and easy to use.
Robo.js simplifies the process by providing an ecosystem of plugins and features to help you build your Discord Activity faster and more efficiently. It is designed to be simple and easy to use.

Here's what you can expect:

- **[Single Project](../robojs/files)**: Everything is in one place, making it easy to manage. No need to set up separate backend and frontend projects then connect them together.
- **[Integrated Database](../robojs/flashcore)**: Robo.js comes with an optional integrated database, so you don't have to worry about setting up a database server. You can store data directly in your project, or using an external database of your choice via adapters.
- **[One Project](../robojs/files)**: Everything is in one place, making it easy to manage. No more separate backend and frontend projects.
- **[Integrated Database](../robojs/flashcore)**: Robo.js has an built-in KV database that can be pointed to any data source via adapters.
- **[TypeScript Support](../create-robo/typescript)**: TypeScript works out of the box, so you can use it without any additional setup.
- **[Built-in Tunnels](./tunnels)**: The Robo.js CLI automatically sets up free Cloudflare tunnels for easy testing.
- **[Plugin System](../plugins/overview)**: Robo.js has a powerful plugin system that allows you to extend your project with additional features. Because of the file-based structure, plugins seamlessly integrate with your project's backend and frontend alike.
- **[Easy Hosting](../hosting/overview)**: Robo.js makes it easy to deploy your project to the web. Just run `robo deploy` and your project will be live for others to use in seconds.
- **[Ecosystem](../plugins/overview)**: Robo.js has a growing ecosystem of plugins, templates, and tools to help you build your project faster and more powerful with less effort.
- **[Built-in Tunnels](./tunnels)**: The Robo CLI automatically sets up free Cloudflare tunnels for easy testing.
- **[Plugin System](../plugins/overview)**: Extend your activity's features with plugins that seamlessly add new functionality.
- **[Easy Hosting](../hosting/overview)**: Deploy your activity for others to use with just one command, or self-host it on your own.
- **[Ecosystem](../plugins/overview)**: A growing ecosystem of plugins, templates, and tools to help you build faster with less effort.

## Documentation

Discord Activities are similar to regular web apps, but there are a few unique things you should know.
Discord Activities are similar to web apps, but there are a few unique things you should know.

This documentation covers everything you need to know about creating Discord Activities with Robo.js, from setting up your project to adding features and deploying it for others to use.

Expand Down Expand Up @@ -74,38 +74,38 @@ Sage is powered by **[@robojs/ai](../plugins/ai)** and can answer your questions

## Templates

We have a collection of templates that you can use to kickstart your project or just use as a reference. Check them out on our GitHub repository!
We have a collection of templates that you can use to kickstart your project or just use as a reference.

Want to contribute your own? Feel free to submit a pull request!
Want to contribute your own? Submit a pull request!

<CardRow>
<Card
href="https://github.com/Wave-Play/robo.js/tree/main/templates/starter-app-js-react"
title="📚 Starter React Project (JavaScript)"
title="📚 Starter React (JS)"
description="A basic JavaScript project using React."
/>
<Card
href="https://github.com/Wave-Play/robo.js/tree/main/templates/starter-app-ts-react"
title="📚 Starter React Project (TypeScript)"
title="📚 Starter React (TS)"
description="A basic TypeScript project using React."
/>
</CardRow>
<CardRow>
<Card
href="https://github.com/Wave-Play/robo.js/tree/main/templates/starter-activity-javascript"
title="📚 Starter Vanilla Project (JavaScript)"
title="📚 Starter Vanilla (JS)"
description="A basic JavaScript project without any frameworks."
/>
<Card
href="https://github.com/Wave-Play/robo.js/tree/main/templates/starter-activity-typescript"
title="📚 Starter Vanilla Project (TypeScript)"
title="📚 Starter Vanilla (TS)"
description="A basic TypeScript project without any frameworks."
/>
</CardRow>
<CardRow>
<Card
href="https://github.com/Wave-Play/robo.js/tree/main/templates/starter-activity-javascript"
title="📚 Colyseus Project (TypeScript)"
title="📚 Colyseus Demo (TS)"
description="A simplified TypeScript project using Colyseus."
/>
<Card
Expand Down
26 changes: 26 additions & 0 deletions docs/docs/discord-bots/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -211,3 +211,29 @@ Sage is also the name of our Discord bot that can answer any questions you have
Sage is powered by **[@robojs/ai](../plugins/ai)** and can answer your questions about Robo.js, Discord Activities, and more.

:::

## Templates

We have a collection of templates that you can use to kickstart your project or just use as a reference.

Want to contribute your own? Submit a pull request!

<CardRow>
<Card
href="https://github.com/Wave-Play/robo.js/tree/main/templates/starter-bot-javascript"
title="📚 Starter Bot (JS)"
description="A basic JavaScript bot using Robo.js."
/>
<Card
href="https://github.com/Wave-Play/robo.js/tree/main/templates/starter-bot-typescript"
title="📚 Starter Bot (TS)"
description="A basic TypeScript bot using Robo.js."
/>
</CardRow>
<CardRow>
<Card
href="https://github.com/Wave-Play/robo.js/blob/main/CONTRIBUTING.md"
title="📝 Contributing"
description="How to contribute to Robo.js"
/>
</CardRow>
4 changes: 2 additions & 2 deletions docs/docs/discord-bots/secrets.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ The environment variables below are not strictly necessary, but they're sure to

### DISCORD_GUILD_ID

Setting up a `DISCORD_GUILD_ID` environment variable is a neat trick for testing. It ensures that any new commands you create only get applied to the Discord server this ID belongs to. To learn more about setting up test Discord servers, check out our [previous documentation](/docs/getting-started.md). To get the `DISCORD_GUILD_ID`, follow these steps:
Setting up a `DISCORD_GUILD_ID` environment variable is a neat trick for testing. It ensures that any new commands you create only get applied to the Discord server this ID belongs to. To learn more about setting up test Discord servers, check out our [previous documentation](./overview). To get the `DISCORD_GUILD_ID`, follow these steps:

1. Open Discord and navigate to the server you want to use.
2. Right-click the server icon and click "Copy ID."
Expand Down Expand Up @@ -64,7 +64,7 @@ Remember to replace `{your_debug_channel_id}` with the value you just obtained.

:::warning 🚨 Note

Using `DISCORD_DEBUG_CHANNEL_ID` is not strictly necessary, and we gently discourage its use. You shouldn't just shove errors away in a place where you can ignore them. Instead, check out the [Debugging Documentation](/docs/advanced/debugging.md) to learn how to handle errors effectively.
Using `DISCORD_DEBUG_CHANNEL_ID` is not strictly necessary, and we gently discourage its use. You shouldn't just shove errors away in a place where you can ignore them. Instead, check out the [Debugging Documentation](./debug) to learn how to handle errors effectively.

:::

Expand Down
2 changes: 1 addition & 1 deletion docs/docs/hosting/self-host.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ This will start your Robo.js server, making it accessible to the world.

## Extra tidbits

Unlike **[Hosting on RoboPlay](./roboplay.md)**, self-hosting your Robo.js project means you're responsible for keeping your server up and running. Make sure you have the necessary resources and knowledge to maintain your server before self-hosting your Robo.js project.
Unlike **[Hosting on RoboPlay](./roboplay)**, self-hosting your Robo.js project means you're responsible for keeping your server up and running. Make sure you have the necessary resources and knowledge to maintain your server before self-hosting your Robo.js project.

The following are things that are already set up for you when you host on RoboPlay, but good to know when self-hosting.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -147,10 +147,10 @@ export async function authenticateSdk(options) {

export function useDiscordSdkSetup(options) {
const { authenticate } = options ?? {}
const [accessToken, setAccessToken] = (useState < string) | (null > null)
const [session, setSession] = (useState < DiscordSession) | (null > null)
const [error, setError] = (useState < string) | (null > null)
const [status, setStatus] = (useState < 'authenticating') | 'error' | 'loading' | 'pending' | ('ready' > 'pending')
const [accessToken, setAccessToken] = useState(null)
const [session, setSession] = useState(null)
const [error, setError] = useState(null)
const [status, setStatus] = useState('pending')

const setupDiscordSdk = useCallback(async () => {
try {
Expand Down
186 changes: 109 additions & 77 deletions packages/plugin-ai/.robo/manifest.json
Original file line number Diff line number Diff line change
@@ -1,79 +1,111 @@
{
"__README": "This file was automatically generated by Robo.js - do not edit manually.",
"__robo": {
"config": {
"clientOptions": {
"intents": ["Guilds", "GuildMessages", "MessageContent"]
},
"plugins": []
},
"type": "plugin",
"updatedAt": "2023-11-25T07:04:32.229Z",
"version": "0.9.11"
},
"api": {
"ai": {
"subroutes": {
"chat": {
"__path": "/.robo/build/api/ai/chat.js"
}
}
}
},
"commands": {
"ai": {
"subcommands": {
"say": {
"__path": "/.robo/build/commands/ai/say.js",
"description": "What would you like me to say?",
"options": [
{
"name": "message",
"description": "What should I say?",
"required": true
},
{
"name": "exact",
"description": "Say exactly?",
"type": "boolean"
},
{
"name": "channel",
"description": "Where should I send the message to?",
"type": "channel"
},
{
"name": "mention",
"description": "Who should I mention?",
"type": "mention"
}
]
}
}
}
},
"context": {
"message": {},
"user": {}
},
"events": {
"_start": [
{
"__path": "/.robo/build/events/_start.js"
}
],
"messageCreate": [
{
"__path": "/.robo/build/events/messageCreate/chat.js"
}
],
"typingStart": [
{
"__path": "/.robo/build/events/typingStart/debounce.js"
}
]
},
"permissions": ["ReadMessageHistory", "SendMessages", "ViewChannel"],
"middleware": [],
"scopes": ["applications.commands", "bot"]
"__README": "This file was automatically generated by Robo.js - do not edit manually.",
"__robo": {
"config": {
"clientOptions": {
"intents": [
"Guilds",
"GuildMessages",
"MessageContent"
]
},
"plugins": []
},
"type": "plugin",
"updatedAt": "2024-05-10T05:05:03.941Z",
"version": "0.10.6"
},
"api": {
"ai": {
"subroutes": {
"chat": {
"__path": "/.robo/build/api/ai/chat.js"
}
}
}
},
"commands": {
"ai": {
"subcommands": {
"say": {
"__path": "/.robo/build/commands/ai/say.js",
"description": "What would you like me to say?",
"options": [
{
"name": "message",
"description": "What should I say?",
"required": true
},
{
"name": "exact",
"description": "Say exactly?",
"type": "boolean"
},
{
"name": "channel",
"description": "Where should I send the message to?",
"type": "channel"
},
{
"name": "mention",
"description": "Who should I mention?",
"type": "mention"
}
]
}
}
},
"chat": {
"__path": "/.robo/build/commands/chat.js",
"description": "Let's chat together!",
"options": [
{
"name": "message",
"required": true
}
]
},
"imagine": {
"__path": "/.robo/build/commands/imagine.js",
"description": "Bring your creative visions to life!",
"options": [
{
"name": "prompt",
"description": "Describe your imaginative scene or concept for artistic creation",
"required": true
}
]
}
},
"context": {
"message": {},
"user": {}
},
"events": {
"_start": [
{
"__path": "/.robo/build/events/_start.js"
}
],
"messageCreate": [
{
"__path": "/.robo/build/events/messageCreate/chat.js"
}
],
"typingStart": [
{
"__path": "/.robo/build/events/typingStart/debounce.js"
}
]
},
"permissions": [
"ReadMessageHistory",
"SendMessages",
"ViewChannel"
],
"middleware": [],
"scopes": [
"applications.commands",
"bot"
]
}
Loading

0 comments on commit d95f907

Please sign in to comment.