diff --git a/astro.config.mjs b/astro.config.mjs index 831d15e07..887068747 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -12,6 +12,8 @@ const { VALIDATE_LINKS } = loadEnv(process.env.NODE_ENV, process.cwd(), ""); const validateLinks = VALIDATE_LINKS === "true"; export default defineConfig({ + // TODO: Change this whenever site is deployed to `sern.dev` + site: 'https:/deploy-preview-66--sern-docs.netlify.app', integrations: [ starlight({ title: "sern", diff --git a/bun.lockb b/bun.lockb index 5ad2c0896..e3b71c60a 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index e4f837aef..2d861659d 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,8 @@ "@lunariajs/core": "^0.0.32", "@lunariajs/starlight": "^0.0.6", "astro": "4.9.1", + "astro-og-canvas": "^0.5.0", + "canvaskit-wasm": "^0.39.1", "sharp": "^0.32.5", "starlight-blog": "^0.7.1", "starlight-links-validator": "^0.8.0", @@ -35,4 +37,4 @@ "prettier-plugin-astro": "^0.13.0", "prettier-plugin-tailwindcss": "^0.5.14" } -} \ No newline at end of file +} diff --git a/setup.mjs b/setup.mjs index fc3aca826..e1f058a44 100644 --- a/setup.mjs +++ b/setup.mjs @@ -1,3 +1,4 @@ +import { GITHUB_URL } from '~/utils/consts.ts'; import { $ } from "bun"; -await $`rm -rf sern-handler && git clone https://github.com/sern-handler/handler sern-handler && cd sern-handler && bun install`; \ No newline at end of file +await $`rm -rf sern-handler && git clone ${GITHUB_URL}/handler sern-handler && cd sern-handler && bun install`; diff --git a/src/content.ts b/src/content.ts new file mode 100644 index 000000000..1094e98b4 --- /dev/null +++ b/src/content.ts @@ -0,0 +1,3 @@ +import { getCollection } from "astro:content"; + +export const allPages = await getCollection("docs"); diff --git a/src/content/config.ts b/src/content/config.ts index 0f83f1ca6..e9b6be4a0 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -1,4 +1,4 @@ -import { defineCollection } from "astro:content"; +import { defineCollection, getCollection } from "astro:content"; import { docsSchema } from "@astrojs/starlight/schema"; import { blogSchema } from "starlight-blog/schema"; diff --git a/src/content/docs/cli/about.mdx b/src/content/docs/cli/about.mdx index ba35d017a..2a6ce41ee 100644 --- a/src/content/docs/cli/about.mdx +++ b/src/content/docs/cli/about.mdx @@ -1,5 +1,6 @@ --- title: About the CLI +description: The CLI is your pocketknife for discord bot development. It'll have all features necessary for developing and shipping to production. --- Publish commands to the API, install plugins, and use other tools provided by our cli. diff --git a/src/content/docs/cli/build.mdx b/src/content/docs/cli/build.mdx index 8c237d35f..69ae88987 100644 --- a/src/content/docs/cli/build.mdx +++ b/src/content/docs/cli/build.mdx @@ -1,5 +1,6 @@ --- title: Build +description: Build your bot using the sern CLI tool --- ```sh diff --git a/src/content/docs/cli/clear.mdx b/src/content/docs/cli/clear.mdx index f8a4e01f2..d2f82c1f9 100644 --- a/src/content/docs/cli/clear.mdx +++ b/src/content/docs/cli/clear.mdx @@ -1,5 +1,6 @@ --- title: Clear +description: Clear and reset your commands, both globally and per guild --- ```sh diff --git a/src/content/docs/cli/extra.mdx b/src/content/docs/cli/extra.mdx index 9747c2a2c..96fdc10e8 100644 --- a/src/content/docs/cli/extra.mdx +++ b/src/content/docs/cli/extra.mdx @@ -1,5 +1,6 @@ --- title: Extra +description: Add extra features to your sern project --- ```sh @@ -23,4 +24,4 @@ You can use this command to install things such as a `Dockerfile` ❯ sern extra # Choose which extra feature from the prompt, such as this: ✔ What extra feature do you want to add? › Dockerfile (TypeScript) -``` \ No newline at end of file +``` diff --git a/src/content/docs/cli/publish.mdx b/src/content/docs/cli/publish.mdx index ce0d58466..e19887d8e 100644 --- a/src/content/docs/cli/publish.mdx +++ b/src/content/docs/cli/publish.mdx @@ -1,5 +1,6 @@ --- title: Publish +description: Publish your commands to Discord --- ```sh diff --git a/src/content/docs/v3/guide/getting-started/choose-ide.mdx b/src/content/docs/v3/guide/getting-started/choose-ide.mdx index 91439c1af..a1f232994 100644 --- a/src/content/docs/v3/guide/getting-started/choose-ide.mdx +++ b/src/content/docs/v3/guide/getting-started/choose-ide.mdx @@ -1,9 +1,9 @@ --- title: Choosing an IDE +description: Choose an IDE for sern bot development --- -Choosing an IDE is a matter of personal preference. They make programming easier. The following are some -suggestions for choosing an IDE: +Choosing an IDE is a matter of personal preference. They make programming easier. The following are some suggestions for choosing an IDE: - [Visual Studio Code](https://code.visualstudio.com) - We have an [snippet extension](https://marketplace.visualstudio.com/items?itemName=SrIzan.sern-snippets) to help automate development :) diff --git a/src/content/docs/v3/guide/getting-started/preparing.mdx b/src/content/docs/v3/guide/getting-started/preparing.mdx index 1af518e1a..b9bf46360 100644 --- a/src/content/docs/v3/guide/getting-started/preparing.mdx +++ b/src/content/docs/v3/guide/getting-started/preparing.mdx @@ -1,5 +1,6 @@ --- title: Preparing to Code +description: Prepare your environment for sern bot development --- After installing an IDE, you need to install `node`. Node is necessary to use `sern`, as it's based on `Discord.js`. diff --git a/src/content/docs/v3/guide/walkthrough/autocomplete.mdx b/src/content/docs/v3/guide/walkthrough/autocomplete.mdx index e617aae88..628c4ed0c 100644 --- a/src/content/docs/v3/guide/walkthrough/autocomplete.mdx +++ b/src/content/docs/v3/guide/walkthrough/autocomplete.mdx @@ -1,5 +1,6 @@ --- title: Autocomplete +description: Implementing autocomplete in your commands sidebar: order: 9 --- diff --git a/src/content/docs/v3/guide/walkthrough/cli.mdx b/src/content/docs/v3/guide/walkthrough/cli.mdx index c5ff5f420..52a48e446 100644 --- a/src/content/docs/v3/guide/walkthrough/cli.mdx +++ b/src/content/docs/v3/guide/walkthrough/cli.mdx @@ -1,5 +1,6 @@ --- title: CLI +description: The CLI is your plug to the sern ecosystem — install plugins, extra utilities, and more. sidebar: order: 3 --- diff --git a/src/content/docs/v3/guide/walkthrough/conclusion.mdx b/src/content/docs/v3/guide/walkthrough/conclusion.mdx index 3f119a1a5..7c379dc5b 100644 --- a/src/content/docs/v3/guide/walkthrough/conclusion.mdx +++ b/src/content/docs/v3/guide/walkthrough/conclusion.mdx @@ -1,5 +1,6 @@ --- title: Conclusion +description: Thank you for reading the sern guide sidebar: order: 12 --- diff --git a/src/content/docs/v3/guide/walkthrough/dependency-injection.mdx b/src/content/docs/v3/guide/walkthrough/dependency-injection.mdx index 2596670cb..d402f221d 100644 --- a/src/content/docs/v3/guide/walkthrough/dependency-injection.mdx +++ b/src/content/docs/v3/guide/walkthrough/dependency-injection.mdx @@ -1,5 +1,6 @@ --- title: Dependency Injection +description: Customize your bot's utilities and structures sidebar: order: 10 --- diff --git a/src/content/docs/v3/guide/walkthrough/first-command.mdx b/src/content/docs/v3/guide/walkthrough/first-command.mdx index c6961ce43..9d3bd9704 100644 --- a/src/content/docs/v3/guide/walkthrough/first-command.mdx +++ b/src/content/docs/v3/guide/walkthrough/first-command.mdx @@ -1,5 +1,6 @@ --- title: First Command +description: How to create your first sern command module sidebar: order: 5 --- diff --git a/src/content/docs/v3/guide/walkthrough/first-event.mdx b/src/content/docs/v3/guide/walkthrough/first-event.mdx index a2f6be3e1..cfa9c7ad9 100644 --- a/src/content/docs/v3/guide/walkthrough/first-event.mdx +++ b/src/content/docs/v3/guide/walkthrough/first-event.mdx @@ -1,5 +1,6 @@ --- title: First Event +description: How to create your first sern event module sidebar: order: 6 --- @@ -71,4 +72,4 @@ export default eventModule({ :::note Make sure that the `emitter` property matches the name of the dependency you passed into `makeDependencies`. -::: \ No newline at end of file +::: diff --git a/src/content/docs/v3/guide/walkthrough/goal.mdx b/src/content/docs/v3/guide/walkthrough/goal.mdx index 6704eec59..7cb0d4043 100644 --- a/src/content/docs/v3/guide/walkthrough/goal.mdx +++ b/src/content/docs/v3/guide/walkthrough/goal.mdx @@ -1,5 +1,6 @@ --- title: Goal +description: sern's goal is to make bot development easier and more efficient sidebar: order: 1 --- diff --git a/src/content/docs/v3/guide/walkthrough/good-to-know.mdx b/src/content/docs/v3/guide/walkthrough/good-to-know.mdx index bbbdf431f..c7630530d 100644 --- a/src/content/docs/v3/guide/walkthrough/good-to-know.mdx +++ b/src/content/docs/v3/guide/walkthrough/good-to-know.mdx @@ -1,5 +1,6 @@ --- title: Good to Know +description: Helpful tips for sern bot development sidebar: order: 13 --- diff --git a/src/content/docs/v3/guide/walkthrough/new-project.mdx b/src/content/docs/v3/guide/walkthrough/new-project.mdx index e43ce7de5..b047b8fd2 100644 --- a/src/content/docs/v3/guide/walkthrough/new-project.mdx +++ b/src/content/docs/v3/guide/walkthrough/new-project.mdx @@ -1,5 +1,6 @@ --- title: New Project +description: Create a new project with @sern/bot sidebar: order: 2 --- diff --git a/src/content/docs/v3/guide/walkthrough/plugins.mdx b/src/content/docs/v3/guide/walkthrough/plugins.mdx index d2d2b5b61..83984baef 100644 --- a/src/content/docs/v3/guide/walkthrough/plugins.mdx +++ b/src/content/docs/v3/guide/walkthrough/plugins.mdx @@ -1,5 +1,6 @@ --- title: Plugins +description: Reduce code repetition with sern plugins sidebar: order: 7 --- @@ -115,4 +116,4 @@ Calling `controller.stop()` notifies sern that this command should not be run, a :::tip Event Plugins are good for filtering, preconditions, parsing. -::: \ No newline at end of file +::: diff --git a/src/content/docs/v3/guide/walkthrough/sern-emitter.mdx b/src/content/docs/v3/guide/walkthrough/sern-emitter.mdx index ad97b3743..048bf6c11 100644 --- a/src/content/docs/v3/guide/walkthrough/sern-emitter.mdx +++ b/src/content/docs/v3/guide/walkthrough/sern-emitter.mdx @@ -1,5 +1,6 @@ --- title: Sern Emitter +description: How to use the SernEmitter class for event handling sidebar: order: 11 --- @@ -18,4 +19,4 @@ import { Steps } from '@astrojs/starlight/components'; You can put these and other event listeners into [event modules](/v3/guide/walkthrough/first-event)! -You can view all events in the [`SernEventsMapping`](/v3/api/interfaces/serneventsmapping) interface. \ No newline at end of file +You can view all events in the [`SernEventsMapping`](/v3/api/interfaces/serneventsmapping) interface. diff --git a/src/content/docs/v3/guide/walkthrough/services.mdx b/src/content/docs/v3/guide/walkthrough/services.mdx index 17b4ff9be..660d7703a 100644 --- a/src/content/docs/v3/guide/walkthrough/services.mdx +++ b/src/content/docs/v3/guide/walkthrough/services.mdx @@ -1,5 +1,6 @@ --- title: Services +description: Using services in your project, and how to wire them together. sidebar: order: 8 --- diff --git a/src/content/docs/v3/guide/walkthrough/transition.mdx b/src/content/docs/v3/guide/walkthrough/transition.mdx index 262ecc8cc..c64b96d0a 100644 --- a/src/content/docs/v3/guide/walkthrough/transition.mdx +++ b/src/content/docs/v3/guide/walkthrough/transition.mdx @@ -1,5 +1,6 @@ --- title: Transition from v2 to v3 +description: Transitioning from v2 to v3 of sern sidebar: order: 4 --- diff --git a/src/content/docs/v4/reference/getting-started.mdx b/src/content/docs/v4/reference/getting-started.mdx index 3acaa90ef..c71110d3a 100644 --- a/src/content/docs/v4/reference/getting-started.mdx +++ b/src/content/docs/v4/reference/getting-started.mdx @@ -1,5 +1,6 @@ --- title: Getting Started +description: Get started with the sern framework sidebar: order: 2 --- @@ -7,6 +8,7 @@ sidebar: import PackageManagers from '~/components/PackageManagers.astro'; + Once you've used this command, follow the interactive prompts to create your new project. If you need help, feel free to ask on our [Discord](https://sern.dev/discord). diff --git a/src/content/docs/v4/reference/modules.mdx b/src/content/docs/v4/reference/modules.mdx index 00068d016..326538c3f 100644 --- a/src/content/docs/v4/reference/modules.mdx +++ b/src/content/docs/v4/reference/modules.mdx @@ -1,11 +1,15 @@ --- title: Modules +description: Learn how to create modules for your sern bot sidebar: order: 2 --- + ## Introduction + sern operates with modules. At its core, Modules contain a `type` field and `execute`, with some code to possibly run before executing. + ### Modules We'll walk you through creating your first command module. @@ -31,22 +35,22 @@ export default commandModule({ await ctx.reply("Pong 🏓"); }, }); + ``` :::tip Run `sern commands publish` so discord registers it to your application correctly. ::: - import { Tabs, TabItem } from '@astrojs/starlight/components'; ## Modal + So, lets say you want to make a command module that listens to modals. :::tip Keep in mind, you'll need to send a modal with a custom id of `dm-me`. This example below is the response to a modal being sent. ::: - ```js title="src/commands/ping.js" diff --git a/src/content/docs/v4/reference/project-layout.mdx b/src/content/docs/v4/reference/project-layout.mdx index 139e38d74..35e64d684 100644 --- a/src/content/docs/v4/reference/project-layout.mdx +++ b/src/content/docs/v4/reference/project-layout.mdx @@ -1,5 +1,6 @@ --- title: Project Layout +description: The layout of a sern project sidebar: order: 1 --- diff --git a/src/content/docs/v4/snippets/command.mdx b/src/content/docs/v4/snippets/command.mdx index 1ea57a32a..9b4abb232 100644 --- a/src/content/docs/v4/snippets/command.mdx +++ b/src/content/docs/v4/snippets/command.mdx @@ -1,5 +1,6 @@ --- -title: Command +title: Command +description: The command module in sern sidebar: order: 1 --- diff --git a/src/content/docs/v4/snippets/event.mdx b/src/content/docs/v4/snippets/event.mdx index 6f88799f1..beb7ba024 100644 --- a/src/content/docs/v4/snippets/event.mdx +++ b/src/content/docs/v4/snippets/event.mdx @@ -1,5 +1,6 @@ --- -title: Event +title: Event +description: The event module in sern sidebar: order: 2 --- diff --git a/src/content/docs/v4/snippets/plugin.mdx b/src/content/docs/v4/snippets/plugin.mdx index 3aace79cb..0eac7c288 100644 --- a/src/content/docs/v4/snippets/plugin.mdx +++ b/src/content/docs/v4/snippets/plugin.mdx @@ -1,5 +1,6 @@ --- -title: Plugins +title: Plugins +description: A plugin in sern sidebar: order: 3 --- diff --git a/src/content/docs/v4/snippets/presence.mdx b/src/content/docs/v4/snippets/presence.mdx index 344abd5ce..f7e8b746a 100644 --- a/src/content/docs/v4/snippets/presence.mdx +++ b/src/content/docs/v4/snippets/presence.mdx @@ -1,5 +1,6 @@ --- -title: Presence +title: Presence +description: Set the presence of your bot sidebar: order: 4 --- diff --git a/src/overrides/Head.astro b/src/overrides/Head.astro index 9a0d496e7..fb3072c6a 100644 --- a/src/overrides/Head.astro +++ b/src/overrides/Head.astro @@ -1,6 +1,10 @@ --- import type { Props } from "@astrojs/starlight/props"; import StarlightHead from "@astrojs/starlight/components/Head.astro"; +import { getOgImage } from "~/utils/ogImage"; + +const ogImageUrl = getOgImage(Astro.url.pathname, !!Astro.props.isFallback); +const imageSrc = new URL(ogImageUrl ?? "/sern-logo.png", Astro.site); --- @@ -12,7 +16,7 @@ import StarlightHead from "@astrojs/starlight/components/Head.astro"; - + @@ -25,6 +29,6 @@ import StarlightHead from "@astrojs/starlight/components/Head.astro"; name="twitter:description" content="A modular, customizable, fast Discord.js framework to streamline bot development" /> - + diff --git a/src/pages/open-graph/[...path].ts b/src/pages/open-graph/[...path].ts new file mode 100644 index 000000000..5b2aa3bb1 --- /dev/null +++ b/src/pages/open-graph/[...path].ts @@ -0,0 +1,52 @@ +import { OGImageRoute } from "astro-og-canvas"; +import { allPages } from "~/content"; + +const pages = Object.fromEntries( + allPages.map(({ id, slug, data }) => [id, { slug, data }]), +); + +export const { getStaticPaths, GET } = OGImageRoute({ + param: "path", + pages, + getSlug: (path) => + `${path.replace(/^\/src\/pages\//, "").replace(/\.[^.]*$/, "")}.webp`.replace( + /\/index\.webp$/, + ".webp", + ), + getImageOptions: async (_, { data }: (typeof pages)[string]) => ({ + format: "WEBP", + quality: 90, + title: data.title, + description: data.description, + logo: { + path: "./src/pages/open-graph/_assets/logo.png", + size: [450], + }, + border: { + color: [233, 186, 194], + width: 32, + }, + padding: 80, + bgGradient: [[23, 24, 28]], + font: { + title: { + size: 72, + lineHeight: 1.2, + families: ["Satoshi", "sans-serif"], + weight: "Medium", + color: [233, 186, 194], + }, + description: { + size: 42, + lineHeight: 1.2, + families: ["Inter", "sans-serif"], + weight: "Normal", + color: [255, 255, 255], + }, + }, + fonts: [ + "./src/pages/open-graph/_assets/fonts/satoshi-black.otf", + "./src/pages/open-graph/_assets/fonts/inter-400-normal.ttf", + ], + }), +}); diff --git a/src/pages/open-graph/_assets/fonts/inter-400-normal.ttf b/src/pages/open-graph/_assets/fonts/inter-400-normal.ttf new file mode 100644 index 000000000..5e4851f0a Binary files /dev/null and b/src/pages/open-graph/_assets/fonts/inter-400-normal.ttf differ diff --git a/src/pages/open-graph/_assets/fonts/satoshi-black.otf b/src/pages/open-graph/_assets/fonts/satoshi-black.otf new file mode 100644 index 000000000..4f5f852c7 Binary files /dev/null and b/src/pages/open-graph/_assets/fonts/satoshi-black.otf differ diff --git a/src/pages/open-graph/_assets/logo.png b/src/pages/open-graph/_assets/logo.png new file mode 100644 index 000000000..0ad8ad721 Binary files /dev/null and b/src/pages/open-graph/_assets/logo.png differ diff --git a/src/utils/ogImage.ts b/src/utils/ogImage.ts new file mode 100644 index 000000000..9c30fdf20 --- /dev/null +++ b/src/utils/ogImage.ts @@ -0,0 +1,15 @@ +import type { GetStaticPathsOptions, GetStaticPathsResult } from "astro"; +import { getStaticPaths } from "~/pages/open-graph/[...path]"; + +const routes = (await getStaticPaths( + {} as GetStaticPathsOptions, +)) as GetStaticPathsResult; + +const paths = new Set(routes.map(({ params }) => params.path)); + +export const getOgImage = (path: string, isFallback: boolean) => { + let imagePath = path.replace(/^\//, "").replace(/\/$/, "") + ".webp"; + if (isFallback) imagePath = "en" + imagePath.slice(imagePath.indexOf("/")); + + if (paths.has(imagePath)) return "/open-graph/" + imagePath; +}; diff --git a/src/utils/types.ts b/src/utils/types.ts index 12d986ea9..b26d713ba 100644 --- a/src/utils/types.ts +++ b/src/utils/types.ts @@ -3,8 +3,8 @@ import { z } from "astro/zod"; export type Result = | { ok: true; value: Ok } | { ok: false; error: Err }; -export const Ok = (value: Ok) => ({ ok: true, value } as const); -export const Err = (error: Err) => ({ ok: false, error } as const); +export const Ok = (value: Ok) => ({ ok: true, value }) as const; +export const Err = (error: Err) => ({ ok: false, error }) as const; export type Contributor = z.infer; export const ContributorSchema = z.object({