diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index 901eeb8..0000000 --- a/.eslintrc +++ /dev/null @@ -1,87 +0,0 @@ -{ - "extends": "eslint:recommended", - "env": { - "node": true - }, - "parserOptions": { - "ecmaVersion": 2020, - "sourceType": "module", - "ecmaFeatures": { - "jsx": true - } - }, - "rules": { - "accessor-pairs": "error", - "block-spacing": ["error", "never"], - "brace-style": ["error", "stroustrup", {"allowSingleLine": true}], - "curly": ["error", "multi-line", "consistent"], - "dot-location": ["error", "property"], - "dot-notation": "error", - "func-call-spacing": "error", - "handle-callback-err": "error", - "key-spacing": "error", - "keyword-spacing": "error", - "new-cap": ["error", {"newIsCap": true}], - "no-array-constructor": "error", - "no-caller": "error", - "no-console": "error", - "no-duplicate-imports": "error", - "no-else-return": "error", - "no-eval": "error", - "no-floating-decimal": "error", - "no-implied-eval": "error", - "no-iterator": "error", - "no-label-var": "error", - "no-labels": "error", - "no-lone-blocks": "error", - "no-mixed-spaces-and-tabs": "error", - "no-multi-spaces": "error", - "no-multi-str": "error", - "no-new": "error", - "no-new-func": "error", - "no-new-object": "error", - "no-new-wrappers": "error", - "no-octal-escape": "error", - "no-path-concat": "error", - "no-proto": "error", - "no-prototype-builtins": "off", - "no-redeclare": ["error", {"builtinGlobals": true}], - "no-self-compare": "error", - "no-sequences": "error", - "no-shadow": ["warn", {"builtinGlobals": false, "hoist": "functions"}], - "no-tabs": "error", - "no-template-curly-in-string": "error", - "no-throw-literal": "error", - "no-undef": "error", - "no-undef-init": "error", - "no-unmodified-loop-condition": "error", - "no-unneeded-ternary": "error", - "no-useless-call": "error", - "no-useless-computed-key": "error", - "no-useless-constructor": "error", - "no-useless-rename": "error", - "no-var": "error", - "no-whitespace-before-property": "error", - "object-curly-spacing": ["error", "never", {"objectsInObjects": false}], - "object-property-newline": ["error", {"allowAllPropertiesOnSameLine": true}], - "operator-linebreak": ["error", "none", {"overrides": {"?": "before", ":": "before"}}], - "prefer-const": "error", - "quote-props": ["error", "consistent-as-needed", {"keywords": true}], - "quotes": ["error", "double", {"allowTemplateLiterals": true}], - "rest-spread-spacing": "error", - "semi": "error", - "semi-spacing": "error", - "space-before-blocks": "error", - "space-in-parens": "error", - "space-infix-ops": "error", - "space-unary-ops": ["error", {"words": true, "nonwords": false, "overrides": {"typeof": false}}], - "spaced-comment": ["error", "always", {"exceptions": ["-", "*"]}], - "template-curly-spacing": "error", - "wrap-iife": ["error", "inside"], - "yield-star-spacing": "error", - "yoda": "error" - }, - "globals": { - "globalThis": "readonly" - } -} \ No newline at end of file diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml index c04a609..2e88b1f 100644 --- a/.github/workflows/build-and-deploy.yml +++ b/.github/workflows/build-and-deploy.yml @@ -1,36 +1,66 @@ -name: Deploy to GitHub Pages - -on: - push: - branches: - - main - -jobs: - build: - name: Deploy to GitHub Pages - runs-on: ubuntu-latest - steps: - - name: Checkout - uses: actions/checkout@v3 - - - name: Use Node.js 16 - uses: actions/setup-node@v3 - with: - node-version: 16 - cache: npm - - - name: Install Dependencies - run: npm ci - - - name: Build Documentation - run: npm run build - - - name: Deploy to GitHub Pages - uses: peaceiris/actions-gh-pages@v3 - with: - github_token: ${{ secrets.GITHUB_TOKEN }} - publish_dir: ./build - cname: docs.betterdiscord.app - commit_message: Deploying github pages @ - user_name: github-actions[bot] - user_email: 41898282+github-actions[bot]@users.noreply.github.com +name: Deploy to GitHub Pages + +# Auto generate on a push to main, also allow manually triggering +on: + push: + branches: + - main + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + + +# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. +# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. +concurrency: + group: pages + cancel-in-progress: false + + +jobs: + build: + name: Build + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + with: + fetch-depth: 0 # Not needed if lastUpdated is not enabled + + - name: Use Node.js 20 + uses: actions/setup-node@v4 + with: + node-version: 20 + cache: npm + + - name: Setup Pages + uses: actions/configure-pages@v4 + + - name: Install Dependencies + run: npm ci + + - name: Build Documentation + run: npm run build + + - name: Upload Artifact + uses: actions/upload-pages-artifact@v3 + with: + path: .vitepress/dist + + + # Deployment job + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + needs: build + runs-on: ubuntu-latest + name: Deploy + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/.gitignore b/.gitignore index b2d6de3..d556aac 100644 --- a/.gitignore +++ b/.gitignore @@ -2,11 +2,11 @@ /node_modules # Production -/build +.vitepress/dist # Generated files -.docusaurus .cache-loader +.vitepress/cache # Misc .DS_Store diff --git a/.vitepress/config.ts b/.vitepress/config.ts new file mode 100644 index 0000000..5fdda2e --- /dev/null +++ b/.vitepress/config.ts @@ -0,0 +1,246 @@ +import {DefaultTheme, defineConfig, UserConfig} from "vitepress"; +import {VitePressSidebarOptions, withSidebar} from "vitepress-sidebar"; +import {bundledLanguages, LanguageRegistration} from "shiki"; +import {groupIconMdPlugin, groupIconVitePlugin, localIconLoader} from "vitepress-plugin-group-icons"; + + +const bdIcon = localIconLoader(import.meta.url, "../docs/public/branding/logo_small.svg"); + +const VITEPRESS_CONFIG: UserConfig = { + srcDir: "./docs", + title: "BetterDiscord", + description: "User and developer documentation for using and creating addons for BetterDiscord.", + head: [ + ["meta", {property: "og:site_name", content: "BetterDiscord Docs"}], + ["meta", {property: "og:title", content: "BetterDiscord Documentation & Guides"}], + ["meta", {property: "og:description", content: "User and developer documentation for using and creating addons for BetterDiscord."}], + ["meta", {property: "og:image", content: "/branding/logo_solid.png"}], + ["meta", {property: "og:image:alt", content: "BetterDiscord Logo"}], + + ["meta", {property: "twitter:card", content: "summary"}], + ["meta", {property: "twitter:site", content: "BetterDiscord Logo"}], + ["meta", {property: "twitter:title", content: "BetterDiscord Documentation & Guides"}], + ["meta", {property: "twitter:description", content: "User and developer documentation for using and creating addons for BetterDiscord."}], + ["meta", {property: "twitter:image", content: "/branding/logo_solid.png"}], + ["meta", {property: "twitter:image:alt", content: "BetterDiscord Logo"}], + + ["meta", {name: "theme-color", content: "#3a71c1"}], + ["meta", {name: "description", content: "User and developer documentation for using and creating addons for BetterDiscord."}], + ["meta", {name: "keywords", content: "Discord, BetterDiscord, Better Discord, Discord Mod, Discord Themes, Discord Plugins, Discord Extensions, Discord Client Mod, Discord Hacks, Documentation, Docs, Guide, Tutorial"}], + ["meta", {name: "author", content: "BetterDiscord"}], + + ["link", {rel: "icon", href: "/favicon/favicon-96x96.png"}], + ], + // cleanUrls: true, + themeConfig: { + siteTitle: false, + logo: "/branding/logo_large.svg", + nav: [ + {text: "Home", link: "/"}, + {text: "User Guides", link: "/users/", activeMatch: "/users/"}, + { + text: "Developer Guides", + items: [ + {text: "General", link: "/developers/", activeMatch: "/developers/"}, + {text: "Plugins", link: "/plugins/", activeMatch: "/plugins/"}, + {text: "Themes", link: "/themes/", activeMatch: "/themes/"}, + ], + activeMatch: "/(?:developers|plugins|themes)/" + }, + { + text: "Reference", + items: [ + {text: "API", link: "/api/", activeMatch: "/api/"}, + {text: "Discord", link: "/discord/", activeMatch: "/discord/"}, + ], + activeMatch: "/(?:api|discord)/" + }, + ], + + socialLinks: [ + { + icon: { + svg: `` + }, + link: "https://betterdiscord.app" + }, + {icon: "discord", link: "https://betterdiscord.app/invite"}, + {icon: "twitter", link: "https://x.com/_BetterDiscord_"}, + {icon: "github", link: "https://github.com/BetterDiscord/BetterDiscord"} + ], + + editLink: { + pattern: "https://github.com/BetterDiscord/docs/edit/main/docs/:path", + text: "Edit this page on GitHub", + }, + + lastUpdated: { + text: "Updated at", + formatOptions: { + dateStyle: "full", + timeStyle: "medium" + } + }, + + search: { + provider: "local" + }, + + outline: "deep", + }, + + markdown: { + codeTransformers: [ + { + name: "highlight-bdapi", + preprocess(code, options) { + function findAllSubstringIndexes(str: string, substr: string): number[] { + const indexes: number[] = []; + let i = -1; + while ((i = str.indexOf(substr, i + 1)) !== -1) indexes.push(i); + return indexes; + } + + const words = ["BdApi"]; + options.decorations ||= []; + for (const word of words) { + const indexes = findAllSubstringIndexes(code, word); + for (const index of indexes) { + options.decorations.push({ + start: index, + end: index + word.length, + properties: { + "class": "global-bdapi", + }, + }); + } + } + }, + } + ], + shikiSetup: async (shiki) => { + const css = await bundledLanguages.css(); + const js = await bundledLanguages.js(); + + const bdcss: LanguageRegistration = { + ...css.default[0], + patterns: [ + {include: "#docblock"}, + {include: "#jsdoctype"}, + {include: "#inline-tags"}, + {include: "#comment"}, + ...css.default[0].patterns, + ], + repository: Object.assign({}, { + "brackets": js.default[0].repository.brackets, + "docblock": js.default[0].repository.docblock, + "comment": js.default[0].repository.comment, + "jsdoctype": js.default[0].repository.jsdoctype, + "inline-tags": js.default[0].repository["inline-tags"] + }, css.default[0].repository), + }; + + await shiki.loadLanguage(bdcss); + }, + theme: "dark-plus", + config: (md) => { + md.use(groupIconMdPlugin); + } + }, + vite: { + plugins: [ + groupIconVitePlugin({ + customIcon: { + ".babelrc": "vscode-icons:file-type-babel", + "js": "vscode-icons:file-type-js", + "jsx": "vscode-icons:file-type-js", + "json": "vscode-icons:file-type-json", + ".plugin.js": bdIcon, + ".theme.css": bdIcon, + // TODO: consider adding platform icons + }, + }) + ] + } +}; + + +const SIDEBARS: VitePressSidebarOptions[] = [ + { + documentRootPath: "docs", + scanStartPath: "api", + basePath: "/api/", + resolvePath: "/api/", + useTitleFromFileHeading: true, + includeRootIndexFile: true, + sortFolderTo: "bottom", + sortMenusByFrontmatterOrder: true, + frontmatterOrderDefaultValue: 1, + }, + { + documentRootPath: "docs", + scanStartPath: "discord", + basePath: "/discord/", + resolvePath: "/discord/", + useTitleFromFileHeading: true, + includeRootIndexFile: true, + sortFolderTo: "bottom", + sortMenusByFrontmatterOrder: true, + frontmatterOrderDefaultValue: 1, + }, + { + documentRootPath: "docs", + scanStartPath: "users", + basePath: "/users/", + resolvePath: "/users/", + useTitleFromFileHeading: true, + includeRootIndexFile: true, + capitalizeEachWords: true, + collapsed: false, + sortFolderTo: "bottom", + sortMenusByFrontmatterOrder: true, + frontmatterOrderDefaultValue: 1, + manualSortFileNameByPriority: ["getting-started", "guides"], + }, + { + documentRootPath: "docs", + scanStartPath: "developers", + basePath: "/developers/", + resolvePath: "/developers/", + useTitleFromFileHeading: true, + includeRootIndexFile: true, + sortFolderTo: "bottom", + sortMenusByFrontmatterOrder: true, + frontmatterOrderDefaultValue: 1, + }, + { + documentRootPath: "docs", + scanStartPath: "plugins", + basePath: "/plugins/", + resolvePath: "/plugins/", + useTitleFromFileHeading: true, + includeRootIndexFile: true, + capitalizeEachWords: true, + collapsed: false, + sortFolderTo: "bottom", + sortMenusByFrontmatterOrder: true, + frontmatterOrderDefaultValue: 1, + manualSortFileNameByPriority: ["introduction", "basics", "intermediate", "advanced"], + }, + { + documentRootPath: "docs", + scanStartPath: "themes", + basePath: "/themes/", + resolvePath: "/themes/", + useTitleFromFileHeading: true, + includeRootIndexFile: true, + capitalizeEachWords: true, + collapsed: false, + sortFolderTo: "bottom", + sortMenusByFrontmatterOrder: true, + frontmatterOrderDefaultValue: 1, + manualSortFileNameByPriority: ["introduction", "basics", "intermediate", "advanced"], + } +]; + +export default defineConfig(withSidebar(VITEPRESS_CONFIG, SIDEBARS)); \ No newline at end of file diff --git a/.vitepress/theme/custom.css b/.vitepress/theme/custom.css new file mode 100644 index 0000000..93f7048 --- /dev/null +++ b/.vitepress/theme/custom.css @@ -0,0 +1,566 @@ +span.line .global-bdapi { + color: #3e82e5; + background-color: var(--vp-c-bg-soft); + border: 1px solid var(--vp-c-border); + padding: 1px 3px; + margin: -1px -3px; + border-radius: 4px; +} + +:root { + --vp-home-hero-name-color: transparent; + --vp-home-hero-name-background: linear-gradient(120deg, #3e82e5 30%, #41d1ff); + + --vp-home-hero-image-background-image: linear-gradient(-45deg, #3e82e5 50%, #41d1ff 50%); + --vp-home-hero-image-filter: blur(44px); +} + +@media (min-width: 640px) { + :root { + --vp-home-hero-image-filter: blur(56px); + } +} + +@media (min-width: 960px) { + :root { + --vp-home-hero-image-filter: blur(68px); + } +} + + +/* TODO: poll this */ +/* .vp-doc a.header-anchor { + position: initial; + margin: 0 0 0 5px; + opacity: 1; +} + +.vp-doc a.header-anchor:hover { + color: var(--vp-c-brand-1); + text-decoration: underline; +} */ + + +/** + * Colors: Palette + * + * The primitive colors used for accent colors. These colors are referenced + * by functional colors such as "Text", "Background", or "Brand". + * + * Each colors have exact same color scale system with 3 levels of solid + * colors with different brightness, and 1 soft color. + * + * - `XXX-1`: The most solid color used mainly for colored text. It must + * satisfy the contrast ratio against when used on top of `XXX-soft`. + * + * - `XXX-2`: The color used mainly for hover state of the button. + * + * - `XXX-3`: The color for solid background, such as bg color of the button. + * It must satisfy the contrast ratio with pure white (#ffffff) text on + * top of it. + * + * - `XXX-soft`: The color used for subtle background such as custom container + * or badges. It must satisfy the contrast ratio when putting `XXX-1` colors + * on top of it. + * + * The soft color must be semi transparent alpha channel. This is crucial + * because it allows adding multiple "soft" colors on top of each other + * to create a accent, such as when having inline code block inside + * custom containers. + * --------------------------------------------------------------------------*/ + +/* :root { + --vp-c-gray-1: #dddde3; + --vp-c-gray-2: #e4e4e9; + --vp-c-gray-3: #ebebef; + --vp-c-gray-soft: rgba(142, 150, 170, 0.14); + + --vp-c-indigo-1: #3451b2; + --vp-c-indigo-2: #3a5ccc; + --vp-c-indigo-3: #5672cd; + --vp-c-indigo-soft: rgba(100, 108, 255, 0.14); + + --vp-c-purple-1: #6f42c1; + --vp-c-purple-2: #7e4cc9; + --vp-c-purple-3: #8e5cd9; + --vp-c-purple-soft: rgba(159, 122, 234, 0.14); + + --vp-c-green-1: #18794e; + --vp-c-green-2: #299764; + --vp-c-green-3: #30a46c; + --vp-c-green-soft: rgba(16, 185, 129, 0.14); + + --vp-c-yellow-1: #915930; + --vp-c-yellow-2: #946300; + --vp-c-yellow-3: #9f6a00; + --vp-c-yellow-soft: rgba(234, 179, 8, 0.14); + + --vp-c-red-1: #b8272c; + --vp-c-red-2: #d5393e; + --vp-c-red-3: #e0575b; + --vp-c-red-soft: rgba(244, 63, 94, 0.14); + + --vp-c-sponsor: #db2777; +} */ + +.dark { + /* --vp-c-gray-1: #515c67; */ + /* --vp-c-gray-2: #414853; */ + /* --vp-c-gray-3: #32363f; */ + /* --vp-c-gray-soft: rgba(101, 117, 133, 0.16); */ + + --vp-c-indigo-1: #5A88CE; + --vp-c-indigo-2: #3e82e5; + --vp-c-indigo-3: #195cbd; + --vp-c-indigo-soft: rgba(58, 113, 193, 0.1); + + /* --vp-c-purple-1: #c8abfa; */ + /* --vp-c-purple-2: #a879e6; */ + /* --vp-c-purple-3: #8e5cd9; */ + /* --vp-c-purple-soft: rgba(159, 122, 234, 0.16); */ + + --vp-c-green-1: #3ac172; + --vp-c-green-2: #30a46c; + --vp-c-green-3: #298459; + --vp-c-green-soft: rgba(58, 193, 114, 0.1); + + --vp-c-yellow-1: #fbbf24; + --vp-c-yellow-2: #da8b17; + --vp-c-yellow-3: #a46a0a; + --vp-c-yellow-soft: rgba(251, 191, 36, 0.1); + + --vp-c-red-1: #c13a3a; + --vp-c-red-2: #f14158; + --vp-c-red-3: #b62a3c; + --vp-c-red-soft: rgba(193, 58, 58, 0.1); +} + + + /** + * Colors: Background + * + * - `bg`: The bg color used for main screen. + * + * - `bg-alt`: The alternative bg color used in places such as "sidebar", + * or "code block". + * + * - `bg-elv`: The elevated bg color. This is used at parts where it "floats", + * such as "dialog". + * + * - `bg-soft`: The bg color to slightly distinguish some components from + * the page. Used for things like "carbon ads" or "table". + * -------------------------------------------------------------------------- */ + +:root { + /* --vp-c-bg: #ffffff; */ + /* --vp-c-bg-alt: #f6f6f7; */ + /* --vp-c-bg-elv: #ffffff; */ + /* --vp-c-bg-soft: #f6f6f7; */ +} + +.dark { + --vp-c-bg: #14151B; + --vp-c-bg-alt: #0C0D10; + --vp-c-bg-elv: #20212B; + --vp-c-bg-soft: #20212B; +} + + + +/** + * Colors: Borders + * + * - `divider`: This is used for separators. This is used to divide sections + * within the same components, such as having separator on "h2" heading. + * + * - `border`: This is designed for borders on interactive components. + * For example this should be used for a button outline. + * + * - `gutter`: This is used to divide components in the page. For example + * the header and the lest of the page. + * -------------------------------------------------------------------------- */ + +:root { + /* --vp-c-border: #c2c2c4; */ + /* --vp-c-divider: #e2e2e3; */ + /* --vp-c-gutter: #e2e2e3; */ +} + +.dark { + /* --vp-c-border: #3c3f44; */ + /* --vp-c-divider: #2e2e32; */ + --vp-c-gutter: transparent; +} + + + +/** + * Component: Custom Block + * -------------------------------------------------------------------------- */ + +:root { + /* --vp-custom-block-font-size: 14px; */ + /* --vp-custom-block-code-font-size: 13px; */ + + /* --vp-custom-block-info-border: var(--vp-c-default-1); */ + /* --vp-custom-block-info-text: var(--vp-c-text-1); */ + /* --vp-custom-block-info-bg: var(--vp-c-default-soft); */ + /* --vp-custom-block-info-code-bg: var(--vp-c-default-soft); */ + + --vp-custom-block-note-border: var(--vp-c-default-1); + /* --vp-custom-block-note-text: var(--vp-c-default-1); */ + /* --vp-custom-block-note-bg: var(--vp-c-default-soft); */ + /* --vp-custom-block-note-code-bg: var(--vp-c-default-soft); */ + + --vp-custom-block-tip-border: var(--vp-c-tip-1); + --vp-custom-block-tip-text: var(--vp-c-tip-1); + /* --vp-custom-block-tip-bg: var(--vp-c-tip-soft); */ + /* --vp-custom-block-tip-code-bg: var(--vp-c-tip-soft); */ + + --vp-custom-block-important-border: var(--vp-c-important-1); + --vp-custom-block-important-text: var(--vp-c-important-1); + /* --vp-custom-block-important-bg: var(--vp-c-important-soft); */ + /* --vp-custom-block-important-code-bg: var(--vp-c-important-soft); */ + + --vp-custom-block-warning-border: var(--vp-c-warning-1); + --vp-custom-block-warning-text: var(--vp-c-warning-1); + /* --vp-custom-block-warning-bg: var(--vp-c-warning-soft); */ + /* --vp-custom-block-warning-code-bg: var(--vp-c-warning-soft); */ + + --vp-custom-block-danger-border: var(--vp-c-danger-1); + --vp-custom-block-danger-text: var(--vp-c-danger-1); + /* --vp-custom-block-danger-bg: var(--vp-c-danger-soft); */ + /* --vp-custom-block-danger-code-bg: var(--vp-c-danger-soft); */ + + --vp-custom-block-caution-border: var(--vp-c-caution-1); + --vp-custom-block-caution-text: var(--vp-c-caution-1); + /* --vp-custom-block-caution-bg: var(--vp-c-caution-soft); */ + /* --vp-custom-block-caution-code-bg: var(--vp-c-caution-soft); */ + + /* --vp-custom-block-details-border: var(--vp-custom-block-info-border); + --vp-custom-block-details-text: var(--vp-custom-block-info-text); + --vp-custom-block-details-bg: var(--vp-custom-block-info-bg); + --vp-custom-block-details-code-bg: var(--vp-custom-block-info-code-bg); */ +} + +.custom-block { + border: 0; + border-left: 5px solid; +} + + +/* LEGACY DOCUSAURUS CSS BELOW FOR REFERENCING COLORS */ +/* :root { + --ifm-color-primary: #3e82e5; + --ifm-color-primary-dark: #2471e2; + --ifm-color-primary-darker: #1d6ada; + --ifm-color-primary-darkest: #1857b4; + --ifm-color-primary-light: #5893e8; + --ifm-color-primary-lighter: #649bea; + --ifm-color-primary-lightest: #8bb4ef; + --ifm-code-font-size: 95%; + --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); +} + +html[data-theme='dark'] { + --ifm-color-primary: #3e82e5; + --ifm-color-primary-dark: #2471e2; + --ifm-color-primary-darker: #1d6ada; + --ifm-color-primary-darkest: #1857b4; + --ifm-color-primary-light: #5893e8; + --ifm-color-primary-lighter: #649bea; + --ifm-color-primary-lightest: #8bb4ef; + --ifm-background-color: #0C0D10; + --ifm-footer-background-color: #040405; + --ifm-navbar-background-color: #040405; + --ifm-card-background-color: #20212B; + --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.05); + + --ifm-table-head-background: #191A21; + --ifm-table-border-color: #20212B; + --ifm-table-background: #14151B; + --ifm-table-stripe-background: #101116; + + --ifm-code-background: #20212b; + --ifm-navbar-search-input-background-color: #20212B; + + --ifm-code-padding-vertical: 3px; + --ifm-code-padding-horizontal: 3px; + --ifm-heading-font-family: inter, system-ui, sans-serif; + --ifm-h1-font-size: 2rem; + --ifm-h2-font-size: 1.5rem; +} + +.code-tabs { +background-color: #282A36; +border-radius: var(--ifm-code-border-radius) var(--ifm-code-border-radius) 0 0; +} + +.code-tabs + .margin-top--md { +margin-top: 0 !important; +} + +.code-tabs + .margin-top--md [class*="language-"] { +border-radius: 0 0 var(--ifm-code-border-radius) var(--ifm-code-border-radius); +} + +div[class*="codeBlockTitle"] { +background-color: #282A36; +border-radius: var(--ifm-code-border-radius) var(--ifm-code-border-radius) 0 0; +box-shadow: 0 2px 4px rgba(0,0,0,.2); +color: var(--ifm-tabs-color); +border: 0; +padding: var(--ifm-tabs-padding-vertical) var(--ifm-tabs-padding-horizontal); +} + + + +html[data-theme='dark'] .footer { +--ifm-footer-background-color: #040405; +} + +html[data-theme='dark'] [class*="cardContainer"] { +border-color: transparent; +box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); +transition: all var(--ifm-transition-fast) ease; +} + +html[data-theme='dark'] [class*="cardContainer"]:hover { +background-color: #282A36; +} + +html[data-theme='dark'] [class*="language-"] { +--prism-background-color: #20212B; +} + +.deprecated { +display: inline-flex; +justify-content: center; +align-items: center; +color: #C13A3A; +font-size: 10px; +text-transform: uppercase; +background: rgba(193, 58, 58, 0.1); +border-radius: 50px; +padding: 1px 8px; +font-weight: 600; +margin-left: 5px; +} + +h3 .deprecated { +font-size: 1rem; +padding: 2px 8px; +margin-left: 10px; +} + +h3[id*="deprecated"] { +display: flex; +align-items: center; +} + +.alert--secondary { +--ifm-alert-background-color: #20212B; +} + +.alert--info { +--ifm-alert-background-color: rgba(58, 113, 193, 0.1); +--ifm-alert-foreground-color: #5A88CE; +--ifm-alert-border-color: #5A88CE; +} + +.alert--warning { +--ifm-alert-background-color: rgba(251, 191, 36, 0.1); +--ifm-alert-foreground-color: #fbbf24; +--ifm-alert-border-color: #fbbf24; +} + +.alert--success { +--ifm-alert-background-color: rgba(58, 193, 114, 0.1); +--ifm-alert-foreground-color: #3ac172; +--ifm-alert-border-color: #3ac172; +} + +.alert--danger { +--ifm-alert-background-color: rgba(193, 58, 58, 0.1); +--ifm-alert-foreground-color: #c13a3a; +--ifm-alert-border-color: #c13a3a; +} + +.tabs__item { +text-transform: capitalize; +} + +.files .tabs__item { +text-transform: none; +} + + +[class*="docItemContainer"], +[class*="generatedIndexPage"], +[class*="tableOfContents"] { +background: #14151B; +padding: 30px; +border-radius: 5px; +box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); +} + +[class*="tableOfContents"] { +padding: 10px; +} + +body { +font-family: inter, sans-serif; +} + + + + +.theme-doc-sidebar-item-category { +margin-bottom: 20px +} + +.menu__link--sublist { +text-transform: uppercase; +color: #95989D; +opacity: .75; +font-size: 12px; +font-weight: 600; +padding: 10px 16px; +} + +.menu__list-item-collapsible--active { +background: rgba(58, 113, 193, .15); +} + +.menu__list-item-collapsible--active .menu__link--sublist { +color: #3a71c1; +} + +.theme-doc-sidebar-item-category-level-2 .menu__link--sublist, +.theme-doc-sidebar-item-link > .menu__link { +display: block; +margin: 2px 4px; +padding: 10px 16px; +color: #bfc4c9; +font-weight: 500; +font-size: 13px; +border-radius: 3px; +user-select: none; +cursor: pointer; +transition: 250ms ease; +text-decoration: none; +} + +.theme-doc-sidebar-item-category-level-2 .menu__link--sublist { +opacity: 1; +text-transform: none; +} + +.theme-doc-sidebar-item-link > .menu__link:hover { +color: #f1f1f1; +} + +.theme-doc-sidebar-item-link > .menu__link.menu__link--active, +.menu__list-item-collapsible--active > .menu__link.menu__link--active { +background: rgba(58, 113, 193, .15); +color: #3a71c1; +cursor: default +} + +.theme-doc-sidebar-container { +border-width: 0!important; +} + +.markdown h1, .markdown h2 { +padding-bottom: 0.3em; +border-bottom: 1px solid #20212B; +} + + +.theme-doc-breadcrumbs { +margin-bottom: 1.8rem!important; +} + + +@media (min-width: 997px) { +.theme-doc-sidebar-container { + display: flex!important; + justify-content: flex-end; +} +} + +.theme-doc-sidebar-container > div { +width: 300px; +} + +[class*="docMainContainer"] .container { +margin: 0; +} + +[class*="docMainContainerEnhanced"] .container { +margin: 0 auto; +} + + +.pagination-nav__link--prev { +justify-self: flex-start; +} +.pagination-nav__link--next { +justify-self: flex-end; +} +.pagination-nav__sublabel { +display: none; +} +.pagination-nav__label { +font-size: 14px; +font-weight: 500; +word-break: break-word; +} +.pagination-nav__link { +border-radius: 3px; +border: none; +display: flex; +align-items: center; +justify-content: center; +text-decoration: none; +transition: 150ms ease background, 150ms ease box-shadow, 150ms ease color, 150ms ease border; +cursor: pointer; +padding: 8px 12px; +user-select: none; +overflow: hidden; +white-space: nowrap; +text-overflow: ellipsis; + +background-color: transparent; +border: 2px solid rgba(255, 255, 255, 0.05); +color: #BFC4C9; +} + + + +html[data-theme="dark"] { +--doc-sidebar-width: 30%; +} + +@media (min-width: 997px) { +div[class*="sidebar_"] { + width: auto!important; +} +} + +.anchor .hash-link { +opacity: 1; +} + +pre.prism-code, +.code-tabs { +box-shadow: 0 2px 4px rgba(0,0,0,.2); +} + +.code-tabs pre.prism-code { +box-shadow: 0; +} + +iframe { +max-width: 100%; +} */ \ No newline at end of file diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts new file mode 100644 index 0000000..8035d9b --- /dev/null +++ b/.vitepress/theme/index.ts @@ -0,0 +1,6 @@ +import DefaultTheme from "vitepress/theme"; +import "./custom.css"; +import "virtual:group-icons.css"; + + +export default DefaultTheme; \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..d3d83dd --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,131 @@ +# Contributing to BetterDiscord + +Thanks for taking the time to contribute! + +The following is a set of guidelines for contributing to BetterDiscord. These are mostly guidelines, not rules. Use your best judgment, and feel free to propose changes to this document in a pull request. These guidelines have been adapted from [Atom](https://github.com/atom/atom/blob/master/CONTRIBUTING.md). + + +## Code of Conduct + +See our [Code of Conduct](https://github.com/BetterDiscord/BetterDiscord/blob/main/CODE_OF_CONDUCT.md) page for details. + +## What should I know before I get started? + +Review the project architecture found on the [README](./README.md) and familiarize yourself with the layout. Then check the [`package.json`](./package.json) to get familiar with the tech stack in use. + +## How Can I Contribute? + +### Reporting Bugs + +This section guides you through submitting a bug report for BetterDiscord. Following these guidelines helps maintainers and the community understand your report, reproduce the behavior, and find related reports. + +Before creating bug reports, please check [this list](#before-submitting-a-bug-report) as you might find out that you don't need to create one. + +#### Before Submitting A Bug Report + +* **Perform a [search](https://github.com/BetterDiscord/docs/issues)** to see if the problem has already been reported. If it has **and the issue is still open**, add a :+1: to the existing issue instead of opening a new one. + +#### How Do I Submit A (Good) Bug Report? + +Bugs are tracked as [GitHub issues](https://guides.github.com/features/issues/). After you've determined this is a new bug using the steps from above, create an issue and provide the following information. + +* **Use a clear and descriptive title** for the issue to identify the problem. +* **Describe the exact steps which reproduce the problem** in as many details as possible. For example, start by explaining how you started Discord, e.g. which addons exactly you used, and what actions were taken. When listing steps, **don't just say what you did, but explain how you did it**. For example, if you opened a menu, explain if you used the mouse, or a keyboard shortcut or something else entirely. +* **Provide specific examples to demonstrate the steps**. Include links to files or GitHub projects, or copy/pasteable snippets, which you use in those examples. If you're providing snippets in the issue, use [Markdown code blocks](https://help.github.com/articles/markdown-basics/#multiple-lines). +* **Describe the behavior you observed after following the steps** and point out what exactly is the problem with that behavior. +* **Explain which behavior you expected to see instead and why.** +* **Include screenshots and animated GIFs** which show you following the described steps and clearly demonstrate the problem. + + +### Suggesting Enhancements + +This section guides you through submitting an enhancement suggestion for BetterDiscord, including completely new features and minor improvements to existing functionality. Following these guidelines helps maintainers and the community understand your suggestion and find related suggestions. + +Before creating enhancement suggestions, please check [this list](#before-submitting-an-enhancement-suggestion) as you might find out that you don't need to create one. When you are creating an enhancement suggestion, please [include as many details as possible](#how-do-i-submit-a-good-enhancement-suggestion). Fill in the details including the steps that you imagine you would take if the feature you're requesting existed. + +#### Before Submitting An Enhancement Suggestion + +* **Check if there's already a plugin which provides that enhancement.** +* **Perform a [cursory search](https://guides.github.com/features/issues/)** to see if the enhancement has already been suggested. If it has, add a :+1: to the existing issue instead of opening a new one. + +#### How Do I Submit A (Good) Enhancement Suggestion? + +Enhancement suggestions are tracked as [GitHub issues](https://guides.github.com/features/issues/). After you've determined this is a new suggestion using the steps from above, create an issue and provide the following information: + +* **Use a clear and descriptive title** for the issue to identify the suggestion. +* **Provide a step-by-step description of the suggested enhancement** in as many details as possible. +* **Provide specific examples to demonstrate the steps**. Include copy/pasteable snippets which you use in those examples, as [Markdown code blocks](https://help.github.com/articles/markdown-basics/#multiple-lines). +* **Describe the current behavior** and **explain which behavior you expected to see instead** and why. +* **Include screenshots and animated GIFs** which help you demonstrate the steps or point out the part of BetterDiscord which the suggestion is related to. +* **Explain why this enhancement would be useful** to most BetterDiscord users and isn't something that can or should be implemented as a plugin. + +### Your First Code Contribution + +> [!IMPORTANT] +> If you've found typos, it's preferred to just open an issue rather than a single character pull request! + +Unsure where to begin contributing? You can start by looking through `help-wanted` issues or any issues labelled `can't reproduce`. + +### Pull Requests + +Please follow these steps to have your contribution considered by the maintainers: + +1. Use a pull request template, if one exists. +2. Follow the [styleguides](#styleguides) +3. After you submit your pull request, verify that all [status checks](https://help.github.com/articles/about-status-checks/) are passing
What if the status checks are failing?If a status check is failing, and you believe that the failure is unrelated to your change, please leave a comment on the pull request explaining why you believe the failure is unrelated. A maintainer will re-run the status check for you. If we conclude that the failure was a false positive, then we will open an issue to track that problem with our status check suite.
+ +While the prerequisites above must be satisfied prior to having your pull request reviewed, the reviewer(s) may ask you to complete additional design work, tests, or other changes before your pull request can be ultimately accepted. + +### Translations + +Currently, the documentation is only available in English. + +## Styleguides + +### Git Commit Messages + +* Use the present tense ("Add feature" not "Added feature") +* Use the imperative mood ("Move cursor to..." not "Moves cursor to...") +* Limit the first line to 72 characters or less +* Reference issues and pull requests liberally after the first line +* When only changing documentation, include `[ci skip]` in the commit title + +### TypeScript Styleguide + +All TypeScript must adhere to the [ESLint rules](https://github.com/BetterDiscord/docs/blob/main/eslint.config.js) of the repo. + +Some other style related points not covered by ESLint: + +* Use verbose variable names +* Prefer to use react patches over DOM manipulation when possible +* Prefer to use separate components from Discord when possible +* Inline `export`s with expressions whenever possible + ```js + // Use this: + export default class ClassName { + + } + + // Instead of: + class ClassName { + + } + export default ClassName + ``` +* Place class properties in the following order: + * Class methods and properties (methods starting with `static`) + * Instance methods and properties +* Place requires in the following order: + * Built in Node Modules (such as `path`) + * Repo level global imports (such as `modules`, `builtins`) + * Local Modules (using relative paths) +* Prefer to import whole modules instead of singular functions + * Keep modules namespaced and organized + * This includes Node Modules (such as `fs`) +```js +const fs = require("fs"); // Use this +const {readFile, writeFile} = require("fs"); // Avoid this + +import Utilities from "./utilities"; // Use this +import {deepclone, isEmpty} from "./utilties"; // Avoid this +``` diff --git a/README.md b/README.md index 369ea3e..a6a82ab 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,70 @@ +
+ +[build-badge]: https://img.shields.io/github/actions/workflow/status/BetterDiscord/docs/build-and-deploy.yml?branch=main&logo=Github&logoColor=3a71c1&labelColor=0c0d10&color=3a71c1&style=for-the-badge +[build-link]: https://github.com/BetterDiscord/docs/actions/workflows/build-and-deploy.yml + +[downloads-badge]: https://img.shields.io/github/downloads/BetterDiscord/Installer/total?labelColor=0c0d10&color=3a71c1&style=for-the-badge&logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyLjI1IDM4LjVIMzUuNzVDMzYuNzE2NSAzOC41IDM3LjUgMzkuMjgzNSAzNy41IDQwLjI1QzM3LjUgNDEuMTY4MiAzNi43OTI5IDQxLjkyMTIgMzUuODkzNSA0MS45OTQyTDM1Ljc1IDQySDEyLjI1QzExLjI4MzUgNDIgMTAuNSA0MS4yMTY1IDEwLjUgNDAuMjVDMTAuNSAzOS4zMzE4IDExLjIwNzEgMzguNTc4OCAxMi4xMDY1IDM4LjUwNThMMTIuMjUgMzguNUgzNS43NUgxMi4yNVpNMjMuNjA2NSA2LjI1NThMMjMuNzUgNi4yNUMyNC42NjgyIDYuMjUgMjUuNDIxMiA2Ljk1NzExIDI1LjQ5NDIgNy44NTY0N0wyNS41IDhWMjkuMzMzTDMwLjI5MzEgMjQuNTQwN0MzMC45NzY1IDIzLjg1NzMgMzIuMDg0NiAyMy44NTczIDMyLjc2OCAyNC41NDA3QzMzLjQ1MTQgMjUuMjI0MiAzMy40NTE0IDI2LjMzMjIgMzIuNzY4IDI3LjAxNTZMMjQuOTg5OCAzNC43OTM4QzI0LjMwNjQgMzUuNDc3MiAyMy4xOTg0IDM1LjQ3NzIgMjIuNTE1IDM0Ljc5MzhMMTQuNzM2OCAyNy4wMTU2QzE0LjA1MzQgMjYuMzMyMiAxNC4wNTM0IDI1LjIyNDIgMTQuNzM2OCAyNC41NDA3QzE1LjQyMDIgMjMuODU3MyAxNi41MjgyIDIzLjg1NzMgMTcuMjExNyAyNC41NDA3TDIyIDI5LjMyOVY4QzIyIDcuMDgxODMgMjIuNzA3MSA2LjMyODgxIDIzLjYwNjUgNi4yNTU4TDIzLjc1IDYuMjVMMjMuNjA2NSA2LjI1NThaIiBmaWxsPSIjM2E3MWMxIi8+Cjwvc3ZnPgo= +[downloads-link]: #auto-installers + +[discord-badge]: https://img.shields.io/badge/discord-green?labelColor=0c0d10&color=7289da&style=for-the-badge&logo=discord&logoColor=7289da +[discord-link]: https://discord.gg/bnSUxedypU + +[website-badge]: https://img.shields.io/badge/website-green?labelColor=0c0d10&color=3a71c1&style=for-the-badge&logo=firefoxbrowser&logoColor=3a71c1 +[website-link]: https://betterdiscord.app + +[docs-badge]: https://img.shields.io/badge/docs-green?labelColor=0c0d10&color=3a71c1&style=for-the-badge&logo=readthedocs&logoColor=3a71c1 +[docs-link]: https://docs.betterdiscord.app + + # BetterDiscord Docs -The docs website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator. \ No newline at end of file +[![CI Status][build-badge]][build-link] [![GitHub Releases][downloads-badge]][downloads-link] [![Discord][discord-badge]][discord-link] [![Website][website-badge]][website-link] [![Docs][docs-badge]][docs-link] + +[![Theme Split](https://betterdiscord.app/resources/branding/serverbanner.png)](https://docs.betterdiscord.app/) + +
+ + +# About + +The docs website is built using [VitePress](https://vitepress.dev/), a modern static website generator purpose built for documentation. The documentation itself is stored in markdown format using as little Vue components as possible in order to maximize the plaintext readability both for local viewing in an IDE as well as those that want to read the docs through GitHub rather than the website. + +# Docs Structure + +This is the current documentation structure for the markdown files. It covers a wide range of topics and each entry below has several subpages with detailed information. + +``` +. +├──User Guides // Basic walkthroughs for the average end-user +├──Developer Guides // General set of guides useful for all developers +| ├──Plugins // Walkthroughs and information for plugin developers +| └──Themes // Informational guide to create themes for BetterDiscord +└──API Reference // Non-walkthrough API reference + ├──BetterDiscord API // Detailed reference of everything available on BdApi + └──Discord // Advanced info on Discord's internals (subject to change) +``` + +The markdown pages under BetterDiscord API (aside from the overview/index) are automatically generated via a pair of scripts to extract the JSDoc from BetterDiscord and process it into markdown. + + +# Project Structure + +``` +. +├──.vitepress // VitePress folder for config and customization +| └──theme // Extension of the default theme +├──docs // All the markdown documentation +| ├──public // Static assets available at url root +| └── // See the structure above +└──scripts // Helper scripts to generate the api reference + +``` + +# Contributors + +For information on contributing to this project, please see [CONTRIBUTING.md](/CONTRIBUTING.md). + +[![Contributors][contributors-image]][contributors-link] + +[contributors-image]: https://contrib.rocks/image?repo=betterdiscord/docs +[contributors-link]: https://github.com/betterdiscord/docs/graphs/contributors \ No newline at end of file diff --git a/babel.config.js b/babel.config.js deleted file mode 100644 index bfd75db..0000000 --- a/babel.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - presets: [require.resolve("@docusaurus/core/lib/babel/preset")], -}; diff --git a/docs/api/bdapi.md b/docs/api/bdapi.md index 130135a..8bff2d6 100644 --- a/docs/api/bdapi.md +++ b/docs/api/bdapi.md @@ -82,13 +82,13 @@ An instance of [Webpack](./webpack) to search for modules. **Type:** `Webpack` ___ -### emotes Deprecated +### emotes deprecated A reference object for BD's emotes. **Type:** `object` ___ -### settings Deprecated +### settings deprecated A reference object to get BD's settings. **Type:** `object` @@ -103,7 +103,13 @@ ___ ## Methods -### alert Deprecated +::: danger + +All methods directly on the `BdApi` object have been deprecated for a long time and are slated for removal. Do not use these in new projects! + +::: + +### alert deprecated Shows a generic but very customizable modal. | Parameter | Type | Description | @@ -114,7 +120,7 @@ content|string\|ReactElement\|Array.<(string\|ReactElement)>|A string of t **Returns:** `void` ___ -### clearCSS Deprecated +### clearCSS deprecated Removes a `