mirror of
https://github.com/discordeno/discordeno.git
synced 2026-06-02 17:00:08 +00:00
Better Docs 🎉 (#205)
* docs: rename docs to _docs * docs: initialize a vuepress app * docs: customize vuepress config * docs: remove unnecessary files from archived docs * ci: add deployment workflow * docs: use vuepress instead uh-idk-template-ig * ci(deploy): cd into docs dir * ci(deploy): cd into docs * ci(deploy): change setup-node version to v2 * revert: "ci(deploy): change setup-node version to v1" * ci(deploy): run workflow on push * chore: add dist/ to .gitignore * docs: remove dist from the docs dir * ci(deploy): correct publish_dir path * ci(deploy): run the deploy workflow only on push to master * docs: correct repo url
This commit is contained in:
ayntee
26
.github/workflows/deploy.yml
vendored
Normal file
26
.github/workflows/deploy.yml
vendored
Normal file
@@ -0,0 +1,26 @@
|
||||
name: Deployment
|
||||
on:
|
||||
push:
|
||||
branches: master
|
||||
jobs:
|
||||
publish:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: '14.x'
|
||||
- name: Install dependencies
|
||||
run: cd docs && yarn install
|
||||
- name: Build the documentation
|
||||
run: cd docs && yarn docs:build
|
||||
- name: Deploy the documentation
|
||||
if: success()
|
||||
uses: peaceiris/actions-gh-pages@v3
|
||||
with:
|
||||
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||
publish_dir: ./docs/src/.vuepress/dist
|
||||
commit_message: ${{ github.event.head_commit.message }}
|
||||
cname: discordeno.mod.land
|
||||
keep_files: true
|
||||
enable_jekyll: false
|
||||
3
.gitignore
vendored
3
.gitignore
vendored
@@ -7,3 +7,6 @@ node_modules
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
|
||||
# Docs
|
||||
dist/
|
||||
@@ -1,3 +0,0 @@
|
||||
node_modules
|
||||
public
|
||||
.cache
|
||||
@@ -1,8 +0,0 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
@@ -1,48 +0,0 @@
|
||||
{
|
||||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:import/errors",
|
||||
"plugin:react/recommended",
|
||||
"plugin:jsx-a11y/recommended",
|
||||
"prettier",
|
||||
"prettier/react"
|
||||
],
|
||||
"plugins": ["react", "import", "jsx-a11y"],
|
||||
"settings": {
|
||||
"react": {
|
||||
"version": "detect"
|
||||
}
|
||||
},
|
||||
"rules": {
|
||||
"react/prop-types": 0,
|
||||
"react/react-in-jsx-scope": "off",
|
||||
"lines-between-class-members": ["error", "always"],
|
||||
"padding-line-between-statements": [
|
||||
"error",
|
||||
{ "blankLine": "always", "prev": ["const", "let", "var"], "next": "*" },
|
||||
{
|
||||
"blankLine": "always",
|
||||
"prev": ["const", "let", "var"],
|
||||
"next": ["const", "let", "var"]
|
||||
},
|
||||
{ "blankLine": "always", "prev": "directive", "next": "*" },
|
||||
{ "blankLine": "any", "prev": "directive", "next": "directive" }
|
||||
]
|
||||
},
|
||||
"parser": "babel-eslint",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 10,
|
||||
"sourceType": "module",
|
||||
"ecmaFeatures": {
|
||||
"jsx": true
|
||||
}
|
||||
},
|
||||
"env": {
|
||||
"es6": true,
|
||||
"browser": true,
|
||||
"node": true
|
||||
},
|
||||
"globals": {
|
||||
"graphql": false
|
||||
}
|
||||
}
|
||||
7
docs/.gitignore
vendored
7
docs/.gitignore
vendored
@@ -1,7 +0,0 @@
|
||||
public
|
||||
.cache
|
||||
node_modules
|
||||
*DS_Store
|
||||
*.env
|
||||
|
||||
.idea/
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"printWidth": 100,
|
||||
"jsxBracketSameLine": false,
|
||||
"singleQuote": true,
|
||||
"tabWidth": 2,
|
||||
"trailingComma": "es5"
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
discordeno.js.org
|
||||
@@ -1,22 +0,0 @@
|
||||
FROM node:buster
|
||||
|
||||
# Create app directory
|
||||
WORKDIR /app
|
||||
|
||||
# Install app dependencies
|
||||
# RUN npm -g install serve
|
||||
RUN npm -g install gatsby-cli
|
||||
|
||||
COPY package*.json ./
|
||||
|
||||
RUN npm ci
|
||||
|
||||
# Bundle app source
|
||||
COPY . .
|
||||
|
||||
# Build static files
|
||||
RUN npm run build
|
||||
|
||||
# serve on port 8080
|
||||
# CMD ["serve", "-l", "tcp://0.0.0.0:8080", "public"]
|
||||
CMD ["gatsby", "serve", "--verbose", "--prefix-paths", "-p", "8080", "--host", "0.0.0.0"]
|
||||
21
docs/LICENSE
21
docs/LICENSE
@@ -1,21 +0,0 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2019 Hasura
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
146
docs/README.md
146
docs/README.md
@@ -1,146 +0,0 @@
|
||||
# gatsby-gitbook-starter
|
||||
|
||||
Kick off your project with this starter to create a powerful/flexible docs/tutorial web apps.
|
||||
|
||||
|
||||
|
||||
## Motivation
|
||||
|
||||
We wanted to create a [GraphQL tutorial](https://learn.hasura.io) series. The content would be written by developers for various languages/frameworks and what better than writing it in Markdown! And since this is a tutorial series we also needed rich embeds, syntax highlighting and more customisations.
|
||||
|
||||
We also wanted to serve these tutorials in sub paths of [learn.hasura.io](https://learn.hasura.io). To serve all these requirements, we decided to use Gatsby + MDX (Markdown + JSX) to extend markdown and used a neat consistent theme like the one at [GitBook](https://www.gitbook.com) and deployed as docker containers.
|
||||
|
||||
## 🔥 Features
|
||||
- Write using Markdown / [MDX](https://github.com/mdx-js/mdx)
|
||||
- GitBook style theme
|
||||
- Syntax Highlighting using Prism [`Bonus`: Code diff highlighting]
|
||||
- Search Integration with Algolia
|
||||
- Progressive Web App, Works Offline
|
||||
- Google Analytics Integration
|
||||
- Automatically generated sidebar navigation, table of contents, previous/next
|
||||
- Dark Mode toggle
|
||||
- Edit on Github
|
||||
- Fully customisable
|
||||
- Rich embeds and live code editor using MDX
|
||||
- Easy deployment: Deploy on Netlify / Now.sh / Docker
|
||||
|
||||
## 🔗 Live Demo
|
||||
|
||||
Here's a [live demo](https://learn.hasura.io/graphql/react)
|
||||
|
||||
## 🚀 Quickstart
|
||||
|
||||
Get started by running the following commands:
|
||||
|
||||
```
|
||||
$ git clone git@github.com:hasura/gatsby-gitbook-starter.git
|
||||
$ cd gatsby-gitbook-starter
|
||||
$ npm install
|
||||
$ npm start
|
||||
```
|
||||
|
||||
Visit `http://localhost:8000/` to view the app.
|
||||
|
||||
## 🔧 Configure
|
||||
|
||||
Write markdown files in `content` folder.
|
||||
|
||||
Open `config.js` for templating variables. Broadly configuration is available for `gatsby`, `header`, `sidebar` and `siteMetadata`.
|
||||
|
||||
- `gatsby` config for global configuration like
|
||||
- `pathPrefix` - Gatsby Path Prefix
|
||||
- `siteUrl` - Gatsby Site URL
|
||||
- `gaTrackingId` - Google Analytics Tracking ID
|
||||
|
||||
- `header` config for site header configuration like
|
||||
- `title` - The title that appears on the top left
|
||||
- `githubUrl` - The Github URL for the docs website
|
||||
- `helpUrl` - Help URL for pointing to resources
|
||||
- `tweetText` - Tweet text
|
||||
- `links` - Links on the top right
|
||||
- `search` - Enable search and [configure Algolia](https://www.gatsbyjs.org/docs/adding-search-with-algolia/)
|
||||
|
||||
- `sidebar` config for navigation links configuration
|
||||
- `forcedNavOrder` for left sidebar navigation order. It should be in the format "/<filename>"
|
||||
- `frontLine` - whether to show a front line at the beginning of a nested menu.(Collapsing capability would be turned of if this option is set to true)
|
||||
- `links` - Links on the bottom left of the sidebar
|
||||
- `ignoreIndex` - Set this to true if the index.md file shouldn't appear on the left sidebar navigation. Typically this can be used for landing pages.
|
||||
|
||||
- `siteMetadata` config for website related configuration
|
||||
- `title` - Title of the website
|
||||
- `description` - Description of the website
|
||||
- `ogImage` - Social Media share og:image tag
|
||||
- `docsLocation` - The Github URL for Edit on Github
|
||||
|
||||
- For sub nesting in left sidebar, create a folder with the same name as the top level `.md` filename and the sub navigation is auto-generated. The sub navigation is alphabetically ordered.
|
||||
|
||||
### Algolia Configuration
|
||||
|
||||
To setup Algolia, go to `config.js` and update the `search` object to look like the one below:
|
||||
|
||||
```...,
|
||||
"search": {
|
||||
"enabled": true,
|
||||
"indexName": "MY_INDEX_NAME",
|
||||
"algoliaAppId": process.env.GATSBY_ALGOLIA_APP_ID,
|
||||
"algoliaSearchKey": process.env.GATSBY_ALGOLIA_SEARCH_KEY,
|
||||
"algoliaAdminKey": process.env.ALGOLIA_ADMIN_KEY
|
||||
},
|
||||
```
|
||||
|
||||
Values for Algolia App ID, Search Key, and Admin Key can be obtained from Algolia Dashboard with the right set of permissions. Replace `MY_INDEX_NAME` with the Algolia Index name of your choice. To build the Algolia index, you need to run `npm run build` which will do a gatsby build along with content indexing in Algolia.
|
||||
|
||||
### Progressive Web App, Offline
|
||||
|
||||
To enable PWA, go to `config.js` and update the `pwa` object to look like the one below:
|
||||
|
||||
```
|
||||
"pwa": {
|
||||
"enabled": false, // disabling this will also remove the existing service worker.
|
||||
"manifest": {
|
||||
"name": "Gatsby Gitbook Starter",
|
||||
"short_name": "GitbookStarter",
|
||||
"start_url": "/",
|
||||
"background_color": "#6b37bf",
|
||||
"theme_color": "#6b37bf",
|
||||
"display": "standalone",
|
||||
"crossOrigin": "use-credentials",
|
||||
icons: [
|
||||
{
|
||||
src: "src/pwa-512.png",
|
||||
sizes: `512x512`,
|
||||
type: `image/png`,
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
## Live Code Editor
|
||||
|
||||
To render react components for live editing, add the `react-live=true` to the code section. For example:
|
||||
|
||||
```javascript react-live=true
|
||||
<button>Edit my text</button>
|
||||
```
|
||||
|
||||
In the above code, just add `javascript react-live=true` after the triple quote ``` to start rendering react components that can be edited by users.
|
||||
|
||||
## 🤖 SEO friendly
|
||||
|
||||
This is a static site and comes with all the SEO benefits. Configure meta tags like title and description for each markdown file using MDX Frontmatter
|
||||
|
||||
```markdown
|
||||
---
|
||||
title: "Title of the page"
|
||||
metaTitle: "Meta Title Tag for this page"
|
||||
metaDescription: "Meta Description Tag for this page"
|
||||
---
|
||||
```
|
||||
|
||||
Canonical URLs are generated automatically.
|
||||
|
||||
## ☁️ Deploy
|
||||
|
||||
[](https://app.netlify.com/start/deploy?repository=https://github.com/hasura/gatsby-gitbook-starter)
|
||||
|
||||
@@ -1,93 +0,0 @@
|
||||
const config = {
|
||||
gatsby: {
|
||||
pathPrefix: "/",
|
||||
siteUrl: "https://discordeno.js.org",
|
||||
gaTrackingId: null,
|
||||
trailingSlash: false,
|
||||
},
|
||||
header: {
|
||||
logo: "https://i.imgur.com/ZSTr4J6.png",
|
||||
logoLink: "/",
|
||||
title: "",
|
||||
githubUrl: "https://github.com/Skillz4Killz/Discordeno",
|
||||
helpUrl: "",
|
||||
tweetText: "",
|
||||
social: `<li>
|
||||
<a href="https://discord.gg/J4NqJ72" target="_blank" rel="noopener">
|
||||
<div class="discordBtn">
|
||||
<img src='https://graphql-engine-cdn.hasura.io/learn-hasura/assets/homepage/discord-brands-block.svg' alt={'Discord'}/>
|
||||
</div>
|
||||
</a>
|
||||
</li>`,
|
||||
links: [{ text: "", link: "" }],
|
||||
search: {
|
||||
enabled: false,
|
||||
indexName: "",
|
||||
algoliaAppId: process.env.GATSBY_ALGOLIA_APP_ID,
|
||||
algoliaSearchKey: process.env.GATSBY_ALGOLIA_SEARCH_KEY,
|
||||
algoliaAdminKey: process.env.ALGOLIA_ADMIN_KEY,
|
||||
},
|
||||
},
|
||||
sidebar: {
|
||||
forcedNavOrder: [
|
||||
"/introduction",
|
||||
"/faq",
|
||||
"/gettingstarted",
|
||||
"/stepbystep",
|
||||
"/createbot",
|
||||
"/createcommand",
|
||||
"/permlevels",
|
||||
"/djs",
|
||||
],
|
||||
collapsedNav: [
|
||||
"/createbot",
|
||||
"/createcommand",
|
||||
],
|
||||
links: [
|
||||
{
|
||||
text: "Documentation",
|
||||
link: "https://doc.deno.land/https/deno.land/x/discordeno/mod.ts",
|
||||
},
|
||||
{
|
||||
text: "Bugs/Issues",
|
||||
link: "https://github.com/Skillz4Killz/Discordeno/issues",
|
||||
},
|
||||
{
|
||||
text: "Contribute",
|
||||
link: "https://github.com/Skillz4Killz/Discordeno/pulls",
|
||||
},
|
||||
],
|
||||
frontline: false,
|
||||
ignoreIndex: true,
|
||||
title:
|
||||
"<a href='https://discord.gg/J4NqJ72'>Discord </a><div class='greenCircle'></div><a href='https://discord.gg/J4NqJ72'>Support</a>",
|
||||
},
|
||||
siteMetadata: {
|
||||
title: "Discordeno",
|
||||
description: "Easy Deno module for Discord API interactions..",
|
||||
ogImage: "https://i.imgur.com/7O5E6hI.png",
|
||||
docsLocation: "https://github.com/Skillz4Killz/Discordeno/tree/master/docs/content",
|
||||
favicon: "",
|
||||
},
|
||||
pwa: {
|
||||
enabled: false, // disabling this will also remove the existing service worker.
|
||||
manifest: {
|
||||
name: "Gatsby Gitbook Starter",
|
||||
short_name: "GitbookStarter",
|
||||
start_url: "/",
|
||||
background_color: "#6b37bf",
|
||||
theme_color: "#6b37bf",
|
||||
display: "standalone",
|
||||
crossOrigin: "use-credentials",
|
||||
icons: [
|
||||
{
|
||||
src: "src/pwa-512.png",
|
||||
sizes: `512x512`,
|
||||
type: `image/png`,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = config;
|
||||
@@ -1,9 +0,0 @@
|
||||
---
|
||||
title: "Advanced Guide"
|
||||
metaTitle: "Advanced Guide | Discordeno"
|
||||
metaDescription: "This guide will help you learn every part of Discordeno, Advanced to create your own bot as you wish."
|
||||
---
|
||||
|
||||
## Understanding The Goals of This Guide
|
||||
|
||||
This guide is for advanced Discordeno features.
|
||||
@@ -1,121 +0,0 @@
|
||||
---
|
||||
title: "Getting Started"
|
||||
metaTitle: "Getting Started | Discordeno"
|
||||
metaDescription: "Discordeno aims for a simple, easy and stress-free interaction with the Discord API. Always supporting the latest version to ensure stability, consistency and the best developer experience."
|
||||
---
|
||||
|
||||
## Getting Started
|
||||
|
||||
Discordeno aims for a simple, easy and stress-free interaction with the Discord API. Always supporting the latest version to ensure stability, consistency and the best developer experience.
|
||||
|
||||
This website serves as the purpose for introducing Discordeno to developers. The full documentation for all the functions and methods can be visited by clicking the link below:
|
||||
|
||||
[View Documentation on Deno](https://doc.deno.land/https/deno.land/x/discordeno/mod.ts)
|
||||
|
||||
## Useful Links
|
||||
- [GitHub Repository](https://github.com/Skillz4Killz/Discordeno)
|
||||
- [Deno Page](https://deno.land/x/discordeno)
|
||||
- [Website](https://discordeno.js.org/)
|
||||
|
||||
## Requirements
|
||||
|
||||
- **Deno 1.0** or higher
|
||||
|
||||
## Creating your First Discord Bot Application
|
||||
|
||||
Plenty of guides are available on how to create a Discord Bot Application.
|
||||
|
||||
1. [Creating an Application](https://discord.com/developers/applications) on the Developer Portal, name something cool and pick a sweet icon!
|
||||
2. After creating an application. Save the **Client ID.** Thats the unique identifier for a Discord Bot.
|
||||
3. Now, go and create a bot by clicking the **Bot** tab. You will see a **Token** section and thats the Discord Bot's token. **Make sure you don't share that token with anyone!!!**
|
||||
4. Invite the bot to the server, you can use the **[Discord Permissions Calculator](https://discordapi.com/permissions.html#0)** for creating the invite link with custom permissions. By default, `0` means no permissions and `8` means Administrator.
|
||||
|
||||
Now you've created an Application but it will need some code in order for it to be online. Thats when Discordeno comes in handy!
|
||||
|
||||
> Make sure you store your tokens in a file that is NOT deployed by adding it to the .gitignore file. **Don't share your bot token with anybody.**
|
||||
|
||||
## Installation
|
||||
|
||||
You can install Discordeno by importing:
|
||||
```ts
|
||||
import Client from "https://x.nest.land/Discordeno@9.0.1/src/module/client.ts";
|
||||
```
|
||||
|
||||
## Example Usage
|
||||
|
||||
Starting with Discordeno is very simple, you can start from scratch without any boilerplates/frameworks: Add this snippet of code into a new TypeScript file:
|
||||
|
||||
```ts
|
||||
import StartBot from "https://x.nest.land/Discordeno@9.0.1/src/module/client.ts";
|
||||
import { sendMessage } from "https://x.nest.land/Discordeno@9.0.1/src/handlers/channel.ts";
|
||||
import { Intents } from "https://x.nest.land/Discordeno@9.0.1/src/types/options.ts";
|
||||
import config from "./config.ts";
|
||||
|
||||
StartBot({
|
||||
token: config.token,
|
||||
intents: [Intents.GUILD_MESSAGES, Intents.GUILDS],
|
||||
eventHandlers: {
|
||||
ready: () => {
|
||||
console.log(`Logged!`);
|
||||
},
|
||||
messageCreate: (message) => {
|
||||
if (message.content === "!ping") {
|
||||
sendMessage(message.channelID, "Pong");
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Alternatively, you can use boilerplate template repositories that were created by wonderful developers. This will get the base of your bot pre-built for you. Overtime, developers create other command frameworks for this library and they will be listed here:
|
||||
|
||||
| Bot Name | Developer | Links | Description |
|
||||
| -------------------- | ----------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
|
||||
| Official Boilerplate | Skillz4Killz#4500 | [GitHub](https://github.com/Skillz4Killz/Discordeno-bot-template), [Support Server](https://discord.gg/J4NqJ72) | This is a very minimalistic design for a boilerplate for your bot to get you started. |
|
||||
| DenoBot | NTM Nathan#0001 | [GitHub](https://github.com/ntm-development/DenoBot), [Support Server](https://discord.com/invite/G2rb53z) | Another boilerplate example of the first one, with more commands and improvements. |
|
||||
| Discordeno Helper | Suyashtnt | [Github](https://github.com/Suyashtnt/discordeno-helper-template/) | A reimplementation of DenoBot using the [discordeno-helper](https://github.com/Suyashtnt/discordeno-helper) framework
|
||||
|
||||
**Open Sourced Bots:**
|
||||
|
||||
| Bot Name | Developer | Links |
|
||||
| ----------------- | ---------- | ---------------------------------------------------------- |
|
||||
| discordeno-mattis | Mattis6666 | [Github](https://github.com/Mattis6666/discordeno-mattis/) |
|
||||
|
||||
|
||||
## Tutorials
|
||||
Below you will find youtube playlists that display channels using Discordeno for their tutorials.
|
||||
|
||||
Web-Mystery Tutorials:
|
||||
- <a href="https://web-mystery.com/articles/making-discord-bot-deno-and-discordeno" target="_blank">Making a Discord bot with Deno and Discordeno</a>
|
||||
- <a href="https://web-mystery.com/articles/running-discord-bot-written-deno-docker" target="_blank">Running a Discord bot written in Deno in Docker</a>
|
||||
|
||||
YouTube Tutorials:
|
||||
- [Discordeno Bot Tutorials YouTube series](https://youtu.be/rIph9-BGsuQ)
|
||||
|
||||
---
|
||||
|
||||
## Development Team
|
||||
|
||||
**Skillz4Killz** (Creator and Developer)
|
||||
|
||||
- GitHub: [@Skillz4Killz](https://github.com/skillz4killz)
|
||||
|
||||
## Contributors
|
||||
|
||||
**NTM Nathan** (Documentation Developer)
|
||||
|
||||
- Website: https://dev.ntmnathan.com/
|
||||
- GitHub: [@NTMNathan](https://github.com/NTMNathan)
|
||||
|
||||
**EternallLight**
|
||||
|
||||
- Website: https://web-mystery.com/
|
||||
- GitHub: [@EternallLight](https://github.com/EternallLight)
|
||||
|
||||
**Androz2091**
|
||||
|
||||
- GitHub: [@Androz2091](https://github.com/Androz2091)
|
||||
|
||||
---
|
||||
If you would like to join everyone else on the contribution list, feel free to join the [Support Server](https://discord.gg/J4NqJ72) for **Discordeno!**
|
||||
|
||||
@@ -1,42 +0,0 @@
|
||||
---
|
||||
title: "Introduction"
|
||||
metaTitle: "Introduction | Discordeno"
|
||||
metaDescription: "Discordeno is a Third Party Deno Library for interacting with the Discord API."
|
||||
---
|
||||
|
||||
Discordeno is a Third Party Deno Library for interacting with the Discord API.
|
||||
|
||||
|
||||
|
||||
## Why should you use Discordeno?
|
||||
- Best TypeScript Support
|
||||
- Stable Library
|
||||
- Easy to use Boilerplates
|
||||
- Security
|
||||
- Built in Documentation
|
||||
- Minimalistic
|
||||
- Functional API
|
||||
- Latest and Greatest JavaScript
|
||||
- Actively Maintained!
|
||||
|
||||
### User Reviews
|
||||
|
||||
If you wish to leave a review for other users, please send a PR adding your review to this section!
|
||||
|
||||
Using the Discord API with types but such a simple language like TypeScript is so easy now. Discordeno is A W E S O M E! -[LukasDoesDev](https://github.com/LukasDoesDev)
|
||||
|
||||
## Read me first...
|
||||
Discordeno is cool right? You could make the next big bot! Who knows, but before we get right into developing our Bot. We want to get started with learning the basics...
|
||||
|
||||
You've seen how amazing Discord Bots are built and functioned! So beginning with Discordeno always starts with learning the TypeScript and/or JavaScript programming languages first. Making a Discord bot with very little knowledge is possible, it can be a challenge! You may end up dealing with Console errors or just syntax typographical errors...
|
||||
|
||||
If you are new to Discordeno, TypeScript or JavaScript, here are some great resources:
|
||||
|
||||
- [Official TypeScript Documentation](https://www.typescriptlang.org/docs/home.html)
|
||||
- [JavaScript Documentation from Devdocs](https://devdocs.io/javascript/)
|
||||
- [Codecademy](https://www.codecademy.com/)
|
||||
- [TypeScript Deep Dive](https://basarat.gitbook.io/typescript/)
|
||||
- [Deno Crash Course by Traversy Media](https://www.youtube.com/watch?v=NHHhiqwcfRM)
|
||||
- [TypeScript Crash Course by Traversy Media](https://www.youtube.com/watch?v=rAy_3SIqT-E)
|
||||
|
||||
There is always more resources... Take your time and don't fret! Come back when you are ready, we can't wait to see what your Discordeno created bot does!
|
||||
@@ -1,9 +0,0 @@
|
||||
export const onServiceWorkerUpdateReady = () => {
|
||||
const answer = window.confirm(
|
||||
`This tutorial has been updated. ` +
|
||||
`Reload to display the latest version?`
|
||||
)
|
||||
if (answer === true) {
|
||||
window.location.reload()
|
||||
}
|
||||
}
|
||||
@@ -1,102 +0,0 @@
|
||||
require("dotenv").config();
|
||||
const queries = require("./src/utils/algolia");
|
||||
const config = require("./config");
|
||||
const plugins = [
|
||||
'gatsby-plugin-sitemap',
|
||||
'gatsby-plugin-sharp',
|
||||
{
|
||||
resolve: `gatsby-plugin-layout`,
|
||||
options: {
|
||||
component: require.resolve(`./src/templates/docs.js`)
|
||||
}
|
||||
},
|
||||
'gatsby-plugin-emotion',
|
||||
'gatsby-plugin-react-helmet',
|
||||
{
|
||||
resolve: "gatsby-source-filesystem",
|
||||
options: {
|
||||
name: "docs",
|
||||
path: `${__dirname}/content/`
|
||||
}
|
||||
},
|
||||
{
|
||||
resolve: 'gatsby-plugin-mdx',
|
||||
options: {
|
||||
gatsbyRemarkPlugins: [
|
||||
{
|
||||
resolve: "gatsby-remark-images",
|
||||
options: {
|
||||
maxWidth: 1035,
|
||||
sizeByPixelDensity: true
|
||||
}
|
||||
},
|
||||
{
|
||||
resolve: 'gatsby-remark-copy-linked-files'
|
||||
}
|
||||
],
|
||||
extensions: [".mdx", ".md"]
|
||||
}
|
||||
},
|
||||
{
|
||||
resolve: `gatsby-plugin-gtag`,
|
||||
options: {
|
||||
// your google analytics tracking id
|
||||
trackingId: config.gatsby.gaTrackingId,
|
||||
// Puts tracking script in the head instead of the body
|
||||
head: true,
|
||||
// enable ip anonymization
|
||||
anonymize: false,
|
||||
},
|
||||
},
|
||||
];
|
||||
// check and add algolia
|
||||
if (config.header.search && config.header.search.enabled && config.header.search.algoliaAppId && config.header.search.algoliaAdminKey) {
|
||||
plugins.push({
|
||||
resolve: `gatsby-plugin-algolia`,
|
||||
options: {
|
||||
appId: config.header.search.algoliaAppId, // algolia application id
|
||||
apiKey: config.header.search.algoliaAdminKey, // algolia admin key to index
|
||||
queries,
|
||||
chunkSize: 10000, // default: 1000
|
||||
}}
|
||||
)
|
||||
}
|
||||
// check and add pwa functionality
|
||||
if (config.pwa && config.pwa.enabled && config.pwa.manifest) {
|
||||
plugins.push({
|
||||
resolve: `gatsby-plugin-manifest`,
|
||||
options: {...config.pwa.manifest},
|
||||
});
|
||||
plugins.push({
|
||||
resolve: 'gatsby-plugin-offline',
|
||||
options: {
|
||||
appendScript: require.resolve(`./src/custom-sw-code.js`),
|
||||
},
|
||||
});
|
||||
} else {
|
||||
plugins.push('gatsby-plugin-remove-serviceworker');
|
||||
}
|
||||
|
||||
// check and remove trailing slash
|
||||
if (config.gatsby && !config.gatsby.trailingSlash) {
|
||||
plugins.push('gatsby-plugin-remove-trailing-slashes');
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
pathPrefix: config.gatsby.pathPrefix,
|
||||
siteMetadata: {
|
||||
title: config.siteMetadata.title,
|
||||
description: config.siteMetadata.description,
|
||||
docsLocation: config.siteMetadata.docsLocation,
|
||||
ogImage: config.siteMetadata.ogImage,
|
||||
favicon: config.siteMetadata.favicon,
|
||||
logo: { link: config.header.logoLink ? config.header.logoLink : '/', image: config.header.logo }, // backwards compatible
|
||||
headerTitle: config.header.title,
|
||||
githubUrl: config.header.githubUrl,
|
||||
helpUrl: config.header.helpUrl,
|
||||
tweetText: config.header.tweetText,
|
||||
headerLinks: config.header.links,
|
||||
siteUrl: config.gatsby.siteUrl,
|
||||
},
|
||||
plugins: plugins
|
||||
};
|
||||
@@ -1,109 +0,0 @@
|
||||
const componentWithMDXScope = require('gatsby-plugin-mdx/component-with-mdx-scope');
|
||||
|
||||
const path = require('path');
|
||||
|
||||
const startCase = require('lodash.startcase');
|
||||
|
||||
const config = require('./config');
|
||||
|
||||
exports.createPages = ({ graphql, actions }) => {
|
||||
const { createPage } = actions;
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve(
|
||||
graphql(
|
||||
`
|
||||
{
|
||||
allMdx {
|
||||
edges {
|
||||
node {
|
||||
fields {
|
||||
id
|
||||
}
|
||||
tableOfContents
|
||||
fields {
|
||||
slug
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
).then(result => {
|
||||
if (result.errors) {
|
||||
console.log(result.errors); // eslint-disable-line no-console
|
||||
reject(result.errors);
|
||||
}
|
||||
|
||||
// Create blog posts pages.
|
||||
result.data.allMdx.edges.forEach(({ node }) => {
|
||||
createPage({
|
||||
path: node.fields.slug ? node.fields.slug : '/',
|
||||
component: path.resolve('./src/templates/docs.js'),
|
||||
context: {
|
||||
id: node.fields.id,
|
||||
},
|
||||
});
|
||||
});
|
||||
})
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
exports.onCreateWebpackConfig = ({ actions }) => {
|
||||
actions.setWebpackConfig({
|
||||
resolve: {
|
||||
modules: [path.resolve(__dirname, 'src'), 'node_modules'],
|
||||
alias: {
|
||||
$components: path.resolve(__dirname, 'src/components'),
|
||||
buble: '@philpl/buble', // to reduce bundle size
|
||||
},
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
exports.onCreateBabelConfig = ({ actions }) => {
|
||||
actions.setBabelPlugin({
|
||||
name: '@babel/plugin-proposal-export-default-from',
|
||||
});
|
||||
};
|
||||
|
||||
exports.onCreateNode = ({ node, getNode, actions }) => {
|
||||
const { createNodeField } = actions;
|
||||
|
||||
if (node.internal.type === `Mdx`) {
|
||||
const parent = getNode(node.parent);
|
||||
|
||||
let value = parent.relativePath.replace(parent.ext, '');
|
||||
|
||||
if (value === 'index') {
|
||||
value = '';
|
||||
}
|
||||
|
||||
if (config.gatsby && config.gatsby.trailingSlash) {
|
||||
createNodeField({
|
||||
name: `slug`,
|
||||
node,
|
||||
value: value === '' ? `/` : `/${value}/`,
|
||||
});
|
||||
} else {
|
||||
createNodeField({
|
||||
name: `slug`,
|
||||
node,
|
||||
value: `/${value}`,
|
||||
});
|
||||
}
|
||||
|
||||
createNodeField({
|
||||
name: 'id',
|
||||
node,
|
||||
value: node.id,
|
||||
});
|
||||
|
||||
createNodeField({
|
||||
name: 'title',
|
||||
node,
|
||||
value: node.frontmatter.title || startCase(parent.name),
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -1,3 +0,0 @@
|
||||
[build]
|
||||
publish = "public"
|
||||
command = "npm run build"
|
||||
27031
docs/package-lock.json
generated
27031
docs/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,75 +1,19 @@
|
||||
{
|
||||
"name": "gatsby-gitbook-boilerplate",
|
||||
"private": true,
|
||||
"description": "Documentation, built with mdx",
|
||||
"author": "Praveen <praveen@hasura.io> (@praveenweb)",
|
||||
"name": "docs",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@babel/plugin-proposal-export-default-from": "^7.10.4",
|
||||
"@emotion/core": "^10.0.35",
|
||||
"@emotion/styled": "^10.0.27",
|
||||
"@emotion/styled-base": "^10.0.31",
|
||||
"@mdx-js/loader": "^1.6.18",
|
||||
"@mdx-js/mdx": "^1.6.18",
|
||||
"@mdx-js/react": "^1.6.18",
|
||||
"@philpl/buble": "^0.19.7",
|
||||
"@playlyfe/gql": "^2.6.2",
|
||||
"algoliasearch": "^3.35.1",
|
||||
"dotenv": "^8.2.0",
|
||||
"emotion": "^10.0.27",
|
||||
"emotion-server": "^10.0.27",
|
||||
"emotion-theming": "^10.0.27",
|
||||
"gatsby": "^2.24.65",
|
||||
"gatsby-link": "^2.4.14",
|
||||
"gatsby-plugin-algolia": "^0.5.0",
|
||||
"gatsby-plugin-emotion": "^4.3.11",
|
||||
"gatsby-plugin-gtag": "^1.0.13",
|
||||
"gatsby-plugin-layout": "^1.3.11",
|
||||
"gatsby-plugin-manifest": "^2.4.31",
|
||||
"gatsby-plugin-mdx": "^1.2.41",
|
||||
"gatsby-plugin-offline": "^3.2.28",
|
||||
"gatsby-plugin-react-helmet": "^3.3.11",
|
||||
"gatsby-plugin-remove-serviceworker": "^1.0.0",
|
||||
"gatsby-plugin-sharp": "^2.6.36",
|
||||
"gatsby-plugin-sitemap": "^2.4.13",
|
||||
"gatsby-remark-copy-linked-files": "^2.3.16",
|
||||
"gatsby-remark-images": "^3.3.30",
|
||||
"gatsby-source-filesystem": "^2.3.30",
|
||||
"gatsby-transformer-remark": "^2.8.35",
|
||||
"graphql": "^14.7.0",
|
||||
"is-absolute-url": "^3.0.3",
|
||||
"lodash.flatten": "^4.4.0",
|
||||
"lodash.startcase": "^4.4.0",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-feather": "^2.0.8",
|
||||
"react-github-btn": "^1.2.0",
|
||||
"react-helmet": "^5.2.1",
|
||||
"react-id-generator": "^3.0.1",
|
||||
"react-instantsearch-dom": "^6.7.0",
|
||||
"react-live": "^2.2.2",
|
||||
"react-loadable": "^5.5.0",
|
||||
"styled-components": "^4.4.1",
|
||||
"styled-icons": "^9.5.0"
|
||||
"description": "Docs for Discordeno",
|
||||
"repository": "https://github.com/Skillz4Killz/Discordeno",
|
||||
"scripts": {
|
||||
"docs:dev": "vuepress dev src --host localhost",
|
||||
"docs:build": "vuepress build src"
|
||||
},
|
||||
"license": "MIT",
|
||||
"main": "n/a",
|
||||
"scripts": {
|
||||
"start": "gatsby develop",
|
||||
"build": "gatsby build --prefix-paths",
|
||||
"format": "prettier --write \"src/**/*.{js,jsx,css,json}\"",
|
||||
"lint": "eslint --fix \"src/**/*.{js,jsx}\""
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^6.8.0",
|
||||
"eslint-config-prettier": "^6.12.0",
|
||||
"eslint-plugin-import": "^2.22.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.3.1",
|
||||
"eslint-plugin-prettier": "^3.1.4",
|
||||
"eslint-plugin-react": "^7.21.2",
|
||||
"gatsby-plugin-remove-trailing-slashes": "^2.3.12",
|
||||
"prettier": "^1.19.1",
|
||||
"prism-react-renderer": "^1.1.1"
|
||||
"vuepress": "^1.5.3",
|
||||
"vuepress-theme-yuu": "^2.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vuepress/plugin-back-to-top": "^1.7.1",
|
||||
"@vuepress/plugin-medium-zoom": "^1.7.1"
|
||||
}
|
||||
}
|
||||
|
||||
94
docs/src/.vuepress/config.js
Executable file
94
docs/src/.vuepress/config.js
Executable file
@@ -0,0 +1,94 @@
|
||||
const { description, repository } = require("../../package");
|
||||
|
||||
const title = "Discordeno";
|
||||
const discordLink = "https://discord.com/invite/J4NqJ72";
|
||||
|
||||
module.exports = {
|
||||
base: `/${title}/`,
|
||||
title,
|
||||
description,
|
||||
head: [
|
||||
["meta", { name: "theme-color", content: "#3eaf7c" }],
|
||||
["meta", { name: "apple-mobile-web-app-capable", content: "yes" }],
|
||||
[
|
||||
"meta",
|
||||
{ name: "apple-mobile-web-app-status-bar-style", content: "black" },
|
||||
],
|
||||
["meta", { name: "og:title", content: title }],
|
||||
[
|
||||
"meta",
|
||||
{
|
||||
name: "og:description",
|
||||
content: description,
|
||||
},
|
||||
],
|
||||
["meta", { name: "og:type", content: "website" }],
|
||||
["meta", { name: "og:url", content: "https://discordeno.mod.land" }],
|
||||
],
|
||||
theme: "yuu",
|
||||
themeConfig: {
|
||||
repo: repository,
|
||||
docsDir: "src",
|
||||
editLinks: true,
|
||||
lastUpdated: true,
|
||||
sidebarDepth: 0,
|
||||
nav: [
|
||||
{
|
||||
text: "Home",
|
||||
link: "/",
|
||||
},
|
||||
{
|
||||
text: "Docs",
|
||||
link: "https://doc.deno.land/https/deno.land/x/discordeno/mod.ts",
|
||||
},
|
||||
{
|
||||
text: "Discord",
|
||||
link: discordLink,
|
||||
target: "_blank",
|
||||
},
|
||||
],
|
||||
sidebar: {
|
||||
"/": [
|
||||
{
|
||||
title: "Home",
|
||||
children: [
|
||||
"/",
|
||||
"faq",
|
||||
"gettingstarted",
|
||||
"djs",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Step By Step Guide",
|
||||
children: [
|
||||
"/stepbystep/",
|
||||
"/stepbystep/createbot",
|
||||
"/stepbystep/createcommand",
|
||||
"/stepbystep/createevent",
|
||||
"/stepbystep/createinhibitor",
|
||||
"/stepbystep/createlanguage",
|
||||
"/stepbystep/createmonitor",
|
||||
"/stepbystep/createtask",
|
||||
"/stepbystep/hostingbot",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Advanced Guide",
|
||||
children: [
|
||||
"/advanced/",
|
||||
"/advanced/arguments",
|
||||
"/advanced/customizations",
|
||||
"/advanced/dockerhosting",
|
||||
"/advanced/dynamiccommands",
|
||||
"/advanced/permlevels",
|
||||
"/advanced/subcommands",
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
"@vuepress/plugin-back-to-top",
|
||||
"@vuepress/plugin-medium-zoom",
|
||||
],
|
||||
};
|
||||
@@ -1,40 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const CommunityAuthor = ({ name, imageUrl, twitterUrl, githubUrl, description }) => {
|
||||
return (
|
||||
<>
|
||||
<h2 className="communitySection">About the community author</h2>
|
||||
<div className="authorSection">
|
||||
<div className="authorImg">
|
||||
<img src={imageUrl} alt={name} />
|
||||
</div>
|
||||
<div className="authorDetails">
|
||||
<div className="authorName">
|
||||
<strong>{name}</strong>
|
||||
{twitterUrl ? (
|
||||
<a href={twitterUrl} target="_blank" rel="noopener noreferrer">
|
||||
<img
|
||||
src="https://storage.googleapis.com/graphql-engine-cdn.hasura.io/learn-hasura/assets/social-media/twitter-icon.svg"
|
||||
alt="Twitter Icon"
|
||||
aria-label="Twitter"
|
||||
/>
|
||||
</a>
|
||||
) : null}
|
||||
{githubUrl ? (
|
||||
<a href={githubUrl} target="_blank" rel="noopener noreferrer">
|
||||
<img
|
||||
src="https://storage.googleapis.com/graphql-engine-cdn.hasura.io/learn-hasura/assets/social-media/github-icon.svg"
|
||||
alt="Github Icon"
|
||||
aria-label="Github"
|
||||
/>
|
||||
</a>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="authorDesc">{description}</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CommunityAuthor;
|
||||
@@ -1,13 +0,0 @@
|
||||
import React from 'react';
|
||||
const githubIcon = require('./components/images/github.svg');
|
||||
|
||||
const GithubLink = ({ link, text }) => {
|
||||
return (
|
||||
<a href={link} className="githubSection">
|
||||
<img className="githubIcon" src={githubIcon} alt="github" />
|
||||
{text}
|
||||
</a>
|
||||
);
|
||||
};
|
||||
|
||||
export default GithubLink;
|
||||
@@ -1,34 +1,70 @@
|
||||
---
|
||||
title: "Discordeno"
|
||||
metaTitle: "Home | Discordeno"
|
||||
metaDescription: "Discordeno is a Third Party Deno Library for interacting with the Discord API."
|
||||
---
|
||||
# Introduction
|
||||
|
||||
|
||||
|
||||
A Third Party Deno library for interacting with the Discord API.
|
||||
|
||||
## Best TypeScript Support!
|
||||
## Features
|
||||
|
||||
- Best TypeScript Support
|
||||
- Stable Library
|
||||
- Easy to use Boilerplates
|
||||
- Security
|
||||
- Built in Documentation
|
||||
- Minimalistic
|
||||
- Functional API
|
||||
- Latest and Greatest JavaScript
|
||||
- Actively Maintained!
|
||||
|
||||
### Best TypeScript Support!
|
||||
|
||||
First class support for Typescript! Never compile your code again in order to run it. Automated typings so they are never inaccurate or out of date.
|
||||
|
||||
## Stable Library
|
||||
### Stable Library
|
||||
|
||||
Discordeno is one of the most stable libraries ever. One of the biggest issues with almost every library(I have used) is stability. None of the libraries gave much love and attention to Typescript developers the way it deserves which caused TypeScript bots to break.
|
||||
|
||||
## Easy To Use Boilerplates
|
||||
### Easy To Use Boilerplates
|
||||
|
||||
Several bot boilerplates are available to get up and running very quickly. The Official boilerplate provides the most necessary features for almost any bot to make coding bots extremely easy. You focus on building features and not on building the base for a bot.
|
||||
|
||||
# Security
|
||||
### Security
|
||||
|
||||
Checks all missing permissions necessary before sending a request to the API so that your bot's token do not get globally banned by Discord. Discordeno does not support self-bot functionality like other libraries either.
|
||||
|
||||
# Documentation
|
||||
### Documentation
|
||||
|
||||
All of Discord API Documentation available inside your VSC while you code. The entire libraries documentation is automatically available to you through intellisense.
|
||||
|
||||
# Minimalistic
|
||||
### Minimalistic
|
||||
|
||||
Discordeno will always prefer defaults that Discord recommends or in the cases where Discord does not care we choose the best option for the majority of developers.
|
||||
|
||||
# Functional API
|
||||
### Functional API
|
||||
|
||||
This will overall make a cleaner and more performant API, while removing the headaches of extending built-in classes, and inheritance. Avoid potential of memory leaks or bot crashes because of too many listeners or other silly issues.
|
||||
|
||||
# Latest & Greatest JavaScript
|
||||
### Latest & Greatest JavaScript
|
||||
|
||||
Discordeno uses the latest and greatest JavaScript/TypeScript available. A lot of libraries still use JavaScript standards from 4-6 years ago because of backwards compatibility. Backwards compatibility is the death of code. It causes clutter and uglyness to pile up and makes developers lazier.
|
||||
|
||||
# Actively Maintained
|
||||
### Actively Maintained
|
||||
|
||||
Discordeno is actively being maintained. Some of the other libraries original developers have quit or no longer actively maintain it and leave it to the community to maintain the library.
|
||||
|
||||
## Read me first...
|
||||
|
||||
Discordeno is cool right? You could make the next big bot! Who knows, but before we get right into developing our Bot. We want to get started with learning the basics...
|
||||
|
||||
You've seen how amazing Discord Bots are built and functioned! So beginning with Discordeno always starts with learning the TypeScript and/or JavaScript programming languages first. Making a Discord bot with very little knowledge is possible, it can be a challenge! You may end up dealing with Console errors or just syntax typographical errors...
|
||||
|
||||
If you are new to Discordeno, TypeScript or JavaScript, here are some great resources:
|
||||
|
||||
- [Official TypeScript Documentation](https://www.typescriptlang.org/docs/home.html)
|
||||
- [JavaScript Documentation from Devdocs](https://devdocs.io/javascript/)
|
||||
- [Codecademy](https://www.codecademy.com/)
|
||||
- [TypeScript Deep Dive](https://basarat.gitbook.io/typescript/)
|
||||
- [Deno Crash Course by Traversy Media](https://www.youtube.com/watch?v=NHHhiqwcfRM)
|
||||
- [TypeScript Crash Course by Traversy Media](https://www.youtube.com/watch?v=rAy_3SIqT-E)
|
||||
|
||||
There is always more resources... Take your time and don't fret! Come back when you are ready, we can't wait to see what your Discordeno created bot does!
|
||||
@@ -1,19 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const YoutubeEmbed = ({ link }) => {
|
||||
return (
|
||||
<div className="video-responsive">
|
||||
<iframe
|
||||
width="750"
|
||||
title="Youtube"
|
||||
height="422"
|
||||
src={link}
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
></iframe>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default YoutubeEmbed;
|
||||
5
docs/src/advanced/README.md
Normal file
5
docs/src/advanced/README.md
Normal file
@@ -0,0 +1,5 @@
|
||||
# Advanced Guide
|
||||
|
||||
## Understanding The Goals of This Guide
|
||||
|
||||
This guide is for advanced Discordeno features.
|
||||
@@ -1,8 +1,4 @@
|
||||
---
|
||||
title: "Command Arguments"
|
||||
metaTitle: "Command Arguments | Discordeno"
|
||||
metaDescription: "Understanding and creating custom Discordeno permission levels!"
|
||||
---
|
||||
# Command Arguments
|
||||
|
||||
Command Arguments is a really cool and powerful feature that will parse, validate and handle arguments for your commands. Sometimes, you want certain commands to have arguments provided. For example, in a `ban` command, you will need a `member` and an optional reason to ban them. Discordeno will handle this for you even before the code reaches your commands execution.
|
||||
|
||||
@@ -1,8 +1,4 @@
|
||||
---
|
||||
title: "Customizing Discordeno"
|
||||
metaTitle: "Customize Cache/Gateway/Structures | Discordeno"
|
||||
metaDescription: "A guide to customize the cache, gateway, structures for your specific needs."
|
||||
---
|
||||
# Customizing Discordeno
|
||||
|
||||
This guide is only for extremely advanced developers. This feature is extremely powerful but comes with huge risks. When I was building Discordeno, there was always one goal I had in my mind that I wanted because when I used other libraries I always felt this was missing. I hated forking a library just to customize it as then it made staying up to date a much larger hassle. Discordeno was designed with customizability in mind. A vast majority of the library can be overridden allowing you to make it work however you would like for your bot.
|
||||
|
||||
@@ -1,8 +1,4 @@
|
||||
---
|
||||
title: "Docker Hosting"
|
||||
metaTitle: "Docker Hosting | Discordeno"
|
||||
metaDescription: "Setting up and hosting a bot with Docker!"
|
||||
---
|
||||
# Docker Hosting
|
||||
|
||||
Docker is an open platform for developing, shipping, and running applications. Docker enables you to separate your applications from your infrastructure so you can deliver software quickly. With Docker, you can manage your infrastructure in the same ways you manage your applications. By taking advantage of Docker’s methodologies for shipping, testing, and deploying code quickly, you can significantly reduce the delay between writing code and running it in production.
|
||||
|
||||
@@ -1,8 +1,4 @@
|
||||
---
|
||||
title: "Dynamic Command Creation!"
|
||||
metaTitle: "Dynamic Command Creation | Discordeno"
|
||||
metaDescription: "Understanding and creating commands dynamically. One of the most powerful ways of making commands in Discordeno!"
|
||||
---
|
||||
# Dynamic Command Creation!
|
||||
|
||||
Discordeno has one of the coolest ways to create commands for advanced level developers. I call it Dynamic command creation. This allows you to basically create a bunch of commands that are similar instantly.
|
||||
|
||||
@@ -1,8 +1,4 @@
|
||||
---
|
||||
title: "Permission Levels!"
|
||||
metaTitle: "Permission Levels | Discordeno"
|
||||
metaDescription: "Understanding and creating custom Discordeno permission levels!"
|
||||
---
|
||||
# Permission Levels!
|
||||
|
||||
Permission levels is a really cool concept that will let you easily control which users can use your commands. For example, if you have commands like `warn` or `ban`, you only want users that are Moderators or Admins of a server to be able to use these commands. By default, a command is set so any member can use the command. To raise the requirement, you can use Permission Levels.
|
||||
|
||||
@@ -1,8 +1,4 @@
|
||||
---
|
||||
title: "Subcommands Inside Subcommands!"
|
||||
metaTitle: "Creating Subcommands | Discordeno"
|
||||
metaDescription: "Let's create our very own bot with Discordeno!"
|
||||
---
|
||||
# Subcommands Inside Subcommands!
|
||||
|
||||
One of the most powerful things about Discordeno is it's ability to have infinite subcommands. A command can have a subcommand which can have it's own subcommands... Mind not blown yet? Wait for it.... A `subcommand` is a full `command`! What that means is, every subcommand has the full power and flexibility of any command. BOOM! Mind blown!
|
||||
|
||||
@@ -1,94 +0,0 @@
|
||||
import React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import NightImage from './images/night.png';
|
||||
import DayImage from './images/day.png';
|
||||
|
||||
const StyledSwitch = styled('div')`
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
padding: 0 20px 0 25px;
|
||||
|
||||
/* The switch - the box around the slider */
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* Hide default HTML checkbox */
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* The slider */
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
left: 0px;
|
||||
bottom: 4px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto 0;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
box-shadow: 0 0px 15px #2020203d;
|
||||
background: white url(${NightImage});
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background: linear-gradient(to right, #fefb72, #f0bb31);
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translateX(24px);
|
||||
-ms-transform: translateX(24px);
|
||||
transform: translateX(24px);
|
||||
background: white url(${DayImage});
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
/* Rounded sliders */
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
`;
|
||||
|
||||
export const DarkModeSwitch = ({ isDarkThemeActive, toggleActiveTheme }) => (
|
||||
<StyledSwitch>
|
||||
<label id="switch" className="switch">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="slider"
|
||||
onChange={toggleActiveTheme}
|
||||
checked={isDarkThemeActive ? false : true}
|
||||
/>
|
||||
<span className="slider round"></span>
|
||||
</label>
|
||||
</StyledSwitch>
|
||||
);
|
||||
@@ -1,219 +0,0 @@
|
||||
import React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import { StaticQuery, graphql } from 'gatsby';
|
||||
import GitHubButton from 'react-github-btn';
|
||||
import Link from './link';
|
||||
import Loadable from 'react-loadable';
|
||||
|
||||
import config from '../../config.js';
|
||||
import LoadingProvider from './mdxComponents/loading';
|
||||
import { DarkModeSwitch } from './DarkModeSwitch';
|
||||
|
||||
const help = require('./images/help.svg');
|
||||
|
||||
const isSearchEnabled = config.header.search && config.header.search.enabled ? true : false;
|
||||
|
||||
let searchIndices = [];
|
||||
|
||||
if (isSearchEnabled && config.header.search.indexName) {
|
||||
searchIndices.push({
|
||||
name: `${config.header.search.indexName}`,
|
||||
title: `Results`,
|
||||
hitComp: `PageHit`,
|
||||
});
|
||||
}
|
||||
|
||||
import Sidebar from './sidebar';
|
||||
|
||||
const LoadableComponent = Loadable({
|
||||
loader: () => import('./search/index'),
|
||||
loading: LoadingProvider,
|
||||
});
|
||||
|
||||
function myFunction() {
|
||||
var x = document.getElementById('navbar');
|
||||
|
||||
if (x.className === 'topnav') {
|
||||
x.className += ' responsive';
|
||||
} else {
|
||||
x.className = 'topnav';
|
||||
}
|
||||
}
|
||||
|
||||
const StyledBgDiv = styled('div')`
|
||||
height: 60px;
|
||||
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
|
||||
background-color: #f8f8f8;
|
||||
position: relative;
|
||||
display: none;
|
||||
background: ${props => (props.isDarkThemeActive ? '#001932' : undefined)};
|
||||
|
||||
@media (max-width: 767px) {
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
||||
const Header = ({ location, isDarkThemeActive, toggleActiveTheme }) => (
|
||||
<StaticQuery
|
||||
query={graphql`
|
||||
query headerTitleQuery {
|
||||
site {
|
||||
siteMetadata {
|
||||
headerTitle
|
||||
githubUrl
|
||||
helpUrl
|
||||
tweetText
|
||||
logo {
|
||||
link
|
||||
image
|
||||
}
|
||||
headerLinks {
|
||||
link
|
||||
text
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`}
|
||||
render={data => {
|
||||
const logoImg = require('./images/logo.svg');
|
||||
|
||||
const twitter = require('./images/twitter.svg');
|
||||
|
||||
const discordBrandsBlock = require('./images/discord-brands-block.svg');
|
||||
|
||||
const twitterBrandsBlock = require('./images/twitter-brands-block.svg');
|
||||
|
||||
const {
|
||||
site: {
|
||||
siteMetadata: { headerTitle, githubUrl, helpUrl, tweetText, logo, headerLinks },
|
||||
},
|
||||
} = data;
|
||||
|
||||
const finalLogoLink = logo.link !== '' ? logo.link : 'https://hasura.io/';
|
||||
|
||||
return (
|
||||
<div className={'navBarWrapper'}>
|
||||
<nav className={'navBarDefault'}>
|
||||
<div className={'navBarHeader'}>
|
||||
<Link to={finalLogoLink} className={'navBarBrand'}>
|
||||
<img
|
||||
className={'img-responsive displayInline'}
|
||||
src={logo.image !== '' ? logo.image : logoImg}
|
||||
alt={'logo'}
|
||||
/>
|
||||
</Link>
|
||||
<div
|
||||
className={'headerTitle displayInline'}
|
||||
dangerouslySetInnerHTML={{ __html: headerTitle }}
|
||||
/>
|
||||
</div>
|
||||
{config.header.social ? (
|
||||
<ul
|
||||
className="socialWrapper visibleMobileView"
|
||||
dangerouslySetInnerHTML={{ __html: config.header.social }}
|
||||
></ul>
|
||||
) : null}
|
||||
{isSearchEnabled ? (
|
||||
<div className={'searchWrapper hiddenMobile navBarUL'}>
|
||||
<LoadableComponent collapse={true} indices={searchIndices} />
|
||||
</div>
|
||||
) : null}
|
||||
<div id="navbar" className={'topnav'}>
|
||||
<div className={'visibleMobile'}>
|
||||
<Sidebar location={location} />
|
||||
<hr />
|
||||
</div>
|
||||
<ul className={'navBarUL navBarNav navBarULRight'}>
|
||||
{headerLinks.map((link, key) => {
|
||||
if (link.link !== '' && link.text !== '') {
|
||||
return (
|
||||
<li key={key}>
|
||||
<a
|
||||
className="sidebarLink"
|
||||
href={link.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
dangerouslySetInnerHTML={{ __html: link.text }}
|
||||
/>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
})}
|
||||
{helpUrl !== '' ? (
|
||||
<li>
|
||||
<a href={helpUrl}>
|
||||
<img src={help} alt={'Help icon'} />
|
||||
</a>
|
||||
</li>
|
||||
) : null}
|
||||
|
||||
{tweetText !== '' ? (
|
||||
<li>
|
||||
<a
|
||||
href={'https://twitter.com/intent/tweet?&text=' + tweetText}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img className={'shareIcon'} src={twitter} alt={'Twitter'} />
|
||||
</a>
|
||||
</li>
|
||||
) : null}
|
||||
{tweetText !== '' || githubUrl !== '' ? (
|
||||
<li className="divider hiddenMobile"></li>
|
||||
) : null}
|
||||
{config.header.social ? (
|
||||
<li className={'hiddenMobile'}>
|
||||
<ul
|
||||
className="socialWrapper"
|
||||
dangerouslySetInnerHTML={{ __html: config.header.social }}
|
||||
></ul>
|
||||
</li>
|
||||
) : null}
|
||||
{githubUrl !== '' ? (
|
||||
<li className={'githubBtn'}>
|
||||
<GitHubButton
|
||||
href={githubUrl}
|
||||
data-show-count="true"
|
||||
aria-label="Star on GitHub"
|
||||
>
|
||||
Star
|
||||
</GitHubButton>
|
||||
</li>
|
||||
) : null}
|
||||
<li>
|
||||
<DarkModeSwitch
|
||||
isDarkThemeActive={isDarkThemeActive}
|
||||
toggleActiveTheme={toggleActiveTheme}
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<StyledBgDiv isDarkThemeActive={isDarkThemeActive}>
|
||||
<div className={'navBarDefault removePadd'}>
|
||||
<span
|
||||
onClick={myFunction}
|
||||
className={'navBarToggle'}
|
||||
onKeyDown={myFunction}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
<span className={'iconBar'}></span>
|
||||
<span className={'iconBar'}></span>
|
||||
<span className={'iconBar'}></span>
|
||||
</span>
|
||||
</div>
|
||||
{isSearchEnabled ? (
|
||||
<div className={'searchWrapper'}>
|
||||
<LoadableComponent collapse={true} indices={searchIndices} />
|
||||
</div>
|
||||
) : null}
|
||||
</StyledBgDiv>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
export default Header;
|
||||
@@ -1,128 +0,0 @@
|
||||
import React from "react";
|
||||
import Link from "./link";
|
||||
|
||||
import { StyledNextPrevious } from "./styles/PageNavigationButtons";
|
||||
|
||||
const NextPrevious = ({ mdx, nav }) => {
|
||||
let currentIndex;
|
||||
|
||||
const currentPaginationInfo = nav.map((el, index) => {
|
||||
if (el && el.url === mdx.fields.slug) {
|
||||
currentIndex = index;
|
||||
}
|
||||
});
|
||||
|
||||
const nextInfo = {};
|
||||
|
||||
const previousInfo = {};
|
||||
|
||||
if (currentIndex === undefined) {
|
||||
// index
|
||||
if (nav[0]) {
|
||||
nextInfo.url = nav[0].url;
|
||||
nextInfo.title = nav[0].title;
|
||||
}
|
||||
previousInfo.url = null;
|
||||
previousInfo.title = null;
|
||||
currentIndex = -1;
|
||||
} else if (currentIndex === 0) {
|
||||
// first page
|
||||
nextInfo.url = nav[currentIndex + 1] ? nav[currentIndex + 1].url : null;
|
||||
nextInfo.title = nav[currentIndex + 1] ? nav[currentIndex + 1].title : null;
|
||||
previousInfo.url = null;
|
||||
previousInfo.title = null;
|
||||
} else if (currentIndex === nav.length - 1) {
|
||||
// last page
|
||||
nextInfo.url = null;
|
||||
nextInfo.title = null;
|
||||
previousInfo.url = nav[currentIndex - 1] ? nav[currentIndex - 1].url : null;
|
||||
previousInfo.title = nav[currentIndex - 1]
|
||||
? nav[currentIndex - 1].title
|
||||
: null;
|
||||
} else if (currentIndex) {
|
||||
// any other page
|
||||
nextInfo.url = nav[currentIndex + 1]?.url;
|
||||
nextInfo.title = nav[currentIndex + 1]?.title;
|
||||
if (nav[currentIndex - 1]) {
|
||||
previousInfo.url = nav[currentIndex - 1].url;
|
||||
previousInfo.title = nav[currentIndex - 1].title;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<StyledNextPrevious>
|
||||
{previousInfo.url && currentIndex >= 0
|
||||
? (
|
||||
<Link to={nav[currentIndex - 1].url} className={"previousBtn"}>
|
||||
<div className={"leftArrow"}>
|
||||
<svg
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
height="1em"
|
||||
width="1em"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
stroke="currentColor"
|
||||
className="_13gjrqj"
|
||||
>
|
||||
<g>
|
||||
<line x1="19" y1="12" x2="5" y2="12" />
|
||||
<polyline points="12 19 5 12 12 5" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div className={"preRightWrapper"}>
|
||||
<div className={"smallContent"}>
|
||||
<span>Previous</span>
|
||||
</div>
|
||||
<div className={"nextPreviousTitle"}>
|
||||
<span>{nav[currentIndex - 1].title}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
: null}
|
||||
{nextInfo.url && currentIndex >= 0
|
||||
? (
|
||||
<Link to={nav[currentIndex + 1].url} className={"nextBtn"}>
|
||||
<div className={"nextRightWrapper"}>
|
||||
<div className={"smallContent"}>
|
||||
<span>Next</span>
|
||||
</div>
|
||||
<div className={"nextPreviousTitle"}>
|
||||
<span>
|
||||
{nav[currentIndex + 1] && nav[currentIndex + 1].title}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={"rightArrow"}>
|
||||
<svg
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
height="1em"
|
||||
width="1em"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
stroke="currentColor"
|
||||
className="_13gjrqj"
|
||||
>
|
||||
<g>
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
<polyline points="12 5 19 12 12 19" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
: null}
|
||||
</StyledNextPrevious>
|
||||
);
|
||||
};
|
||||
|
||||
export default NextPrevious;
|
||||
@@ -1,9 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const ClosedSvg = () => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24">
|
||||
<path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default ClosedSvg;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 969 B |
@@ -1,8 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="11.559" height="13.211" viewBox="0 0 11.559 13.211">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1{fill:#24292e}
|
||||
</style>
|
||||
</defs>
|
||||
<path id="discord-brands" d="M7.669 6.275A.676.676 0 1 1 7 5.542a.7.7 0 0 1 .669.733zm-3.085-.733a.736.736 0 0 0 0 1.466.7.7 0 0 0 .674-.733.7.7 0 0 0-.674-.733zm6.975-4.181v11.85c-1.659-1.471-1.132-.984-3.065-2.781l.35 1.222h-7.49A1.357 1.357 0 0 1 0 10.291v-8.93A1.357 1.357 0 0 1 1.354 0h8.851a1.357 1.357 0 0 1 1.354 1.361zM9.677 7.623a8.846 8.846 0 0 0-.951-3.851 3.266 3.266 0 0 0-1.856-.694l-.092.106a4.4 4.4 0 0 1 1.645.839 5.612 5.612 0 0 0-4.934-.192c-.244.112-.39.192-.39.192a4.456 4.456 0 0 1 1.737-.865l-.066-.079a3.266 3.266 0 0 0-1.856.694 8.846 8.846 0 0 0-.951 3.851 2.4 2.4 0 0 0 2.015 1s.244-.3.443-.548A2.054 2.054 0 0 1 3.263 7.3c.1.068.257.156.271.165a4.815 4.815 0 0 0 4.122.235 3.78 3.78 0 0 0 .76-.39 2.084 2.084 0 0 1-1.2.786c.2.251.436.535.436.535a2.415 2.415 0 0 0 2.021-1z" class="cls-1"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1019 B |
@@ -1,12 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px" y="0px" viewBox="0 0 2350 2314.8" xml:space="preserve">
|
||||
<path d="M1175,0C525.8,0,0,525.8,0,1175c0,552.2,378.9,1010.5,890.1,1139.7c-5.9-14.7-8.8-35.3-8.8-55.8v-199.8H734.4
|
||||
c-79.3,0-152.8-35.2-185.1-99.9c-38.2-70.5-44.1-179.2-141-246.8c-29.4-23.5-5.9-47,26.4-44.1c61.7,17.6,111.6,58.8,158.6,120.4
|
||||
c47,61.7,67.6,76.4,155.7,76.4c41.1,0,105.7-2.9,164.5-11.8c32.3-82.3,88.1-155.7,155.7-190.9c-393.6-47-581.6-240.9-581.6-505.3
|
||||
c0-114.6,49.9-223.3,132.2-317.3c-26.4-91.1-61.7-279.1,11.8-352.5c176.3,0,282,114.6,308.4,143.9c88.1-29.4,185.1-47,284.9-47
|
||||
c102.8,0,196.8,17.6,284.9,47c26.4-29.4,132.2-143.9,308.4-143.9c70.5,70.5,38.2,261.4,8.8,352.5c82.3,91.1,129.3,202.7,129.3,317.3
|
||||
c0,264.4-185.1,458.3-575.7,499.4c108.7,55.8,185.1,214.4,185.1,331.9V2256c0,8.8-2.9,17.6-2.9,26.4
|
||||
C2021,2123.8,2350,1689.1,2350,1175C2350,525.8,1824.2,0,1175,0L1175,0z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,9 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="baseline-help-24px" width="24" height="24" viewBox="0 0 24 24">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1{fill:none}.cls-2{fill:#fff}
|
||||
</style>
|
||||
</defs>
|
||||
<path id="Path_196" d="M0 0h24v24H0z" class="cls-1" data-name="Path 196"/>
|
||||
<path id="Path_197" d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm1 17h-2v-2h2zm2.07-7.75l-.9.92A3.4 3.4 0 0 0 13 15h-2v-.5a4.025 4.025 0 0 1 1.17-2.83l1.24-1.26A1.955 1.955 0 0 0 14 9a2 2 0 0 0-4 0H8a4 4 0 0 1 8 0 3.182 3.182 0 0 1-.93 2.25z" class="cls-2" data-name="Path 197"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 581 B |
@@ -1,23 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 85 95" style="enable-background:new 0 0 85 95;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;}
|
||||
</style>
|
||||
<g id="Layer_2">
|
||||
</g>
|
||||
<g id="Layer_1">
|
||||
<g>
|
||||
<path class="st0" d="M79.9,31.8c2.6-6.3,2.6-19.1-0.8-28.9l0,0c-0.9-1.8-3.6-1.2-3.7,0.7v0.7c-0.6,9.4-4,14.5-9.1,17
|
||||
c-0.8,0.4-2.1,0.4-3-0.2c-6-3.8-13.2-6-20.9-6s-14.8,2.3-20.9,6c-0.8,0.5-1.8,0.6-2.6,0.2c-5.2-1.9-8.8-7.6-9.4-17.1V3.5
|
||||
C9.5,1.6,6.7,1,5.9,2.8c-3.4,10-3.3,22.8-0.8,29c1.3,3.1,1.3,6.6,0.2,9.8c-1.4,4-2.1,8.5-2,13c0.5,20.6,18,38.2,38.7,38.5
|
||||
C63.8,93.5,81.5,76,81.5,54.1c0-4.4-0.7-8.5-2-12.4C78.5,38.5,78.6,34.9,79.9,31.8z M41.9,83.9C26.1,83.5,13,70.6,12.8,54.7
|
||||
C12.4,37.8,26.2,24,43,24.4c15.9,0.2,28.9,13.3,29.2,29.2C72.5,70.4,58.8,84.1,41.9,83.9z"/>
|
||||
<path class="st0" d="M47,50.9l-7-10.8c-1.1-1.8-3.4-2.3-5.2-1.2c-1.1,0.7-1.8,1.9-1.8,3.2c0,0.7,0.2,1.4,0.6,2l4.7,7.4
|
||||
c0.4,0.6,0.2,1.3-0.1,1.8l-7.4,8.1c-1.4,1.5-1.3,3.9,0.2,5.3c0.7,0.6,1.7,0.9,2.6,0.9c1.1,0,2-0.5,2.7-1.2l5.5-6.4
|
||||
c0.5-0.5,1.2-0.5,1.5,0.1l3.9,5.6c0.2,0.5,0.6,0.8,1.1,1.1c1.3,0.9,3,0.9,4.3,0.1l0,0c1.1-0.7,1.8-1.9,1.8-3.2
|
||||
c0-0.7-0.2-1.4-0.6-2L47,50.9z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1,9 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const OpenedSvg = () => (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24">
|
||||
<path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default OpenedSvg;
|
||||
@@ -1,8 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="12.517" height="10.166" viewBox="0 0 12.517 10.166">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1{fill:#24292e}
|
||||
</style>
|
||||
</defs>
|
||||
<path id="twitter-brands" d="M11.23 50.616c.008.111.008.222.008.334a7.249 7.249 0 0 1-7.3 7.3A7.249 7.249 0 0 1 0 57.1a5.307 5.307 0 0 0 .619.032 5.138 5.138 0 0 0 3.185-1.1 2.57 2.57 0 0 1-2.4-1.779 3.235 3.235 0 0 0 .484.04 2.713 2.713 0 0 0 .675-.087 2.566 2.566 0 0 1-2.055-2.518v-.032a2.584 2.584 0 0 0 1.16.326 2.569 2.569 0 0 1-.794-3.431 7.292 7.292 0 0 0 5.29 2.684 2.9 2.9 0 0 1-.064-.588 2.568 2.568 0 0 1 4.44-1.755 5.051 5.051 0 0 0 1.628-.619 2.558 2.558 0 0 1-1.128 1.414 5.143 5.143 0 0 0 1.477-.4 5.515 5.515 0 0 1-1.287 1.326z" class="cls-1" transform="translate(0 -48.082)"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 795 B |
@@ -1,14 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 35 27" style="enable-background:new 0 0 35 27;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
|
||||
</style>
|
||||
<path class="st0" d="M17,7.2l0.1,1.2l-1.3-0.1c-4.6-0.5-8.6-2.4-12-5.5L2.1,1.1L1.7,2.3C0.8,4.8,1.3,7.5,3.2,9.3c1,1,0.8,1.1-1,0.5
|
||||
C1.7,9.7,1.1,9.5,1.1,9.6C0.9,9.8,1.5,11.9,2,12.8c0.7,1.2,2,2.4,3.5,3.1l1.2,0.5l-1.5,0c-1.4,0-1.5,0-1.3,0.5
|
||||
c0.5,1.5,2.5,3.2,4.7,3.9l1.6,0.5l-1.4,0.8c-2,1.1-4.4,1.7-6.8,1.8C0.9,23.9,0,24,0,24.1c0,0.2,3.1,1.6,4.9,2.1
|
||||
c5.4,1.5,11.8,0.9,16.6-1.8c3.4-1.9,6.8-5.6,8.4-9.2c0.9-1.9,1.7-5.5,1.7-7.1c0-1.1,0.1-1.2,1.5-2.6c0.8-0.8,1.6-1.6,1.8-1.8
|
||||
c0.3-0.5,0.2-0.5-1.1,0c-2.1,0.7-2.5,0.6-1.4-0.5c0.8-0.8,1.7-2.1,1.7-2.5c0-0.1-0.4,0-0.8,0.3c-0.5,0.2-1.5,0.6-2.2,0.8l-1.4,0.4
|
||||
l-1.2-0.8c-0.7-0.4-1.6-0.9-2.1-1c-1.3-0.3-3.3-0.3-4.4,0.1C18.8,1.4,16.8,4.2,17,7.2z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
@@ -1,5 +0,0 @@
|
||||
export * from './theme';
|
||||
export mdxComponents from './mdxComponents';
|
||||
export ThemeProvider from './theme/themeProvider';
|
||||
export Layout from './layout';
|
||||
export Link from './link';
|
||||
@@ -1,89 +0,0 @@
|
||||
import React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
|
||||
import ThemeProvider from './theme/themeProvider';
|
||||
import mdxComponents from './mdxComponents';
|
||||
import Sidebar from './sidebar';
|
||||
import RightSidebar from './rightSidebar';
|
||||
import config from '../../config.js';
|
||||
|
||||
const Wrapper = styled('div')`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background: ${({ theme }) => theme.colors.background};
|
||||
|
||||
.sideBarUL li a {
|
||||
color: ${({ theme }) => theme.colors.text};
|
||||
}
|
||||
|
||||
.sideBarUL .item > a:hover {
|
||||
background-color: #1ed3c6;
|
||||
color: #fff !important;
|
||||
|
||||
/* background: #F8F8F8 */
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
|
||||
const Content = styled('main')`
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
margin: 0px 88px;
|
||||
padding-top: 3rem;
|
||||
background: ${({ theme }) => theme.colors.background};
|
||||
|
||||
table tr {
|
||||
background: ${({ theme }) => theme.colors.background};
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1023px) {
|
||||
padding-left: 0;
|
||||
margin: 0 10px;
|
||||
padding-top: 3rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const MaxWidth = styled('div')`
|
||||
@media only screen and (max-width: 50rem) {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
`;
|
||||
|
||||
const LeftSideBarWidth = styled('div')`
|
||||
width: 298px;
|
||||
`;
|
||||
|
||||
const RightSideBarWidth = styled('div')`
|
||||
width: 224px;
|
||||
`;
|
||||
|
||||
const Layout = ({ children, location }) => (
|
||||
<ThemeProvider location={location}>
|
||||
<MDXProvider components={mdxComponents}>
|
||||
<Wrapper>
|
||||
<LeftSideBarWidth className={'hiddenMobile'}>
|
||||
<Sidebar location={location} />
|
||||
</LeftSideBarWidth>
|
||||
{config.sidebar.title ? (
|
||||
<div
|
||||
className={'sidebarTitle sideBarShow'}
|
||||
dangerouslySetInnerHTML={{ __html: config.sidebar.title }}
|
||||
/>
|
||||
) : null}
|
||||
<Content>
|
||||
<MaxWidth>{children}</MaxWidth>
|
||||
</Content>
|
||||
<RightSideBarWidth className={'hiddenMobile'}>
|
||||
<RightSidebar location={location} />
|
||||
</RightSideBarWidth>
|
||||
</Wrapper>
|
||||
</MDXProvider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
export default Layout;
|
||||
@@ -1,14 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Link as GatsbyLink } from 'gatsby';
|
||||
import isAbsoluteUrl from 'is-absolute-url';
|
||||
|
||||
const Link = ({ to, ...props }) =>
|
||||
isAbsoluteUrl(to) ? (
|
||||
<a href={to} {...props}>
|
||||
{props.children}
|
||||
</a>
|
||||
) : (
|
||||
<GatsbyLink to={to} {...props} />
|
||||
);
|
||||
|
||||
export default Link;
|
||||
@@ -1,14 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
|
||||
|
||||
const ReactLiveProvider = ({ code }) => {
|
||||
return (
|
||||
<LiveProvider code={code}>
|
||||
<LiveEditor />
|
||||
<LiveError />
|
||||
<LivePreview />
|
||||
</LiveProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReactLiveProvider;
|
||||
@@ -1,15 +0,0 @@
|
||||
import * as React from 'react';
|
||||
|
||||
const AnchorTag = ({ children: link, ...props }) => {
|
||||
if (link) {
|
||||
return (
|
||||
<a href={props.href} target="_blank" rel="noopener noreferrer">
|
||||
{link}
|
||||
</a>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
export default AnchorTag;
|
||||
@@ -1,109 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import Highlight, { defaultProps } from 'prism-react-renderer';
|
||||
import prismTheme from 'prism-react-renderer/themes/vsDark';
|
||||
import Loadable from 'react-loadable';
|
||||
import LoadingProvider from './loading';
|
||||
|
||||
/** Removes the last token from a code example if it's empty. */
|
||||
function cleanTokens(tokens) {
|
||||
const tokensLength = tokens.length;
|
||||
|
||||
if (tokensLength === 0) {
|
||||
return tokens;
|
||||
}
|
||||
const lastToken = tokens[tokensLength - 1];
|
||||
|
||||
if (lastToken.length === 1 && lastToken[0].empty) {
|
||||
return tokens.slice(0, tokensLength - 1);
|
||||
}
|
||||
return tokens;
|
||||
}
|
||||
|
||||
const LoadableComponent = Loadable({
|
||||
loader: () => import('./LiveProvider'),
|
||||
loading: LoadingProvider,
|
||||
});
|
||||
|
||||
/* eslint-disable react/jsx-key */
|
||||
const CodeBlock = ({ children: exampleCode, ...props }) => {
|
||||
if (props['react-live']) {
|
||||
return <LoadableComponent code={exampleCode} />;
|
||||
} else {
|
||||
return (
|
||||
<Highlight {...defaultProps} code={exampleCode} language="javascript" theme={prismTheme}>
|
||||
{({ className, style, tokens, getLineProps, getTokenProps }) => (
|
||||
<pre className={className + ' pre'} style={style} p={3}>
|
||||
{cleanTokens(tokens).map((line, i) => {
|
||||
let lineClass = {};
|
||||
|
||||
let isDiff = false;
|
||||
|
||||
if (line[0] && line[0].content.length && line[0].content[0] === '+') {
|
||||
lineClass = { backgroundColor: 'rgba(76, 175, 80, 0.2)' };
|
||||
isDiff = true;
|
||||
} else if (line[0] && line[0].content.length && line[0].content[0] === '-') {
|
||||
lineClass = { backgroundColor: 'rgba(244, 67, 54, 0.2)' };
|
||||
isDiff = true;
|
||||
} else if (line[0] && line[0].content === '' && line[1] && line[1].content === '+') {
|
||||
lineClass = { backgroundColor: 'rgba(76, 175, 80, 0.2)' };
|
||||
isDiff = true;
|
||||
} else if (line[0] && line[0].content === '' && line[1] && line[1].content === '-') {
|
||||
lineClass = { backgroundColor: 'rgba(244, 67, 54, 0.2)' };
|
||||
isDiff = true;
|
||||
}
|
||||
const lineProps = getLineProps({ line, key: i });
|
||||
|
||||
lineProps.style = lineClass;
|
||||
const diffStyle = {
|
||||
userSelect: 'none',
|
||||
MozUserSelect: '-moz-none',
|
||||
WebkitUserSelect: 'none',
|
||||
};
|
||||
|
||||
let splitToken;
|
||||
|
||||
return (
|
||||
<div {...lineProps} key={line + i}>
|
||||
{line.map((token, key) => {
|
||||
if (isDiff) {
|
||||
if (
|
||||
(key === 0 || key === 1) &
|
||||
(token.content.charAt(0) === '+' || token.content.charAt(0) === '-')
|
||||
) {
|
||||
if (token.content.length > 1) {
|
||||
splitToken = {
|
||||
types: ['template-string', 'string'],
|
||||
content: token.content.slice(1),
|
||||
};
|
||||
const firstChar = {
|
||||
types: ['operator'],
|
||||
content: token.content.charAt(0),
|
||||
};
|
||||
|
||||
return (
|
||||
<React.Fragment key={token + key}>
|
||||
<span
|
||||
{...getTokenProps({ token: firstChar, key })}
|
||||
style={diffStyle}
|
||||
/>
|
||||
<span {...getTokenProps({ token: splitToken, key })} />
|
||||
</React.Fragment>
|
||||
);
|
||||
} else {
|
||||
return <span {...getTokenProps({ token, key })} style={diffStyle} />;
|
||||
}
|
||||
}
|
||||
}
|
||||
return <span {...getTokenProps({ token, key })} />;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</pre>
|
||||
)}
|
||||
</Highlight>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default CodeBlock;
|
||||
@@ -1,44 +0,0 @@
|
||||
import React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import CodeBlock from './codeBlock';
|
||||
import AnchorTag from './anchor';
|
||||
|
||||
const StyledPre = styled('pre')`
|
||||
padding: 16px;
|
||||
background: ${props => props.theme.colors.preFormattedText};
|
||||
`;
|
||||
|
||||
export default {
|
||||
h1: props => (
|
||||
<h1 className="heading1" id={props.children.replace(/\s+/g, '').toLowerCase()} {...props} />
|
||||
),
|
||||
h2: props => (
|
||||
<h2 className="heading2" id={props.children.replace(/\s+/g, '').toLowerCase()} {...props} />
|
||||
),
|
||||
h3: props => (
|
||||
<h3 className="heading3" id={props.children.replace(/\s+/g, '').toLowerCase()} {...props} />
|
||||
),
|
||||
h4: props => (
|
||||
<h4 className="heading4" id={props.children.replace(/\s+/g, '').toLowerCase()} {...props} />
|
||||
),
|
||||
h5: props => (
|
||||
<h5 className="heading5" id={props.children.replace(/\s+/g, '').toLowerCase()} {...props} />
|
||||
),
|
||||
h6: props => (
|
||||
<h6 className="heading6" id={props.children.replace(/\s+/g, '').toLowerCase()} {...props} />
|
||||
),
|
||||
p: props => <p className="paragraph" {...props} />,
|
||||
pre: props => (
|
||||
<StyledPre>
|
||||
<pre {...props} />
|
||||
</StyledPre>
|
||||
),
|
||||
code: CodeBlock,
|
||||
a: AnchorTag,
|
||||
// TODO add `img`
|
||||
// TODO add `blockquote`
|
||||
// TODO add `ul`
|
||||
// TODO add `li`
|
||||
// TODO add `table`
|
||||
};
|
||||
@@ -1,7 +0,0 @@
|
||||
import * as React from 'react';
|
||||
|
||||
const LoadingProvider = ({ ...props }) => {
|
||||
return <div></div>;
|
||||
};
|
||||
|
||||
export default LoadingProvider;
|
||||
@@ -1,79 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StaticQuery, graphql } from 'gatsby';
|
||||
|
||||
// import Link from './link';
|
||||
import config from '../../config';
|
||||
import { Sidebar, ListItem } from './styles/Sidebar';
|
||||
|
||||
const SidebarLayout = ({ location }) => (
|
||||
<StaticQuery
|
||||
query={graphql`
|
||||
query {
|
||||
allMdx {
|
||||
edges {
|
||||
node {
|
||||
fields {
|
||||
slug
|
||||
}
|
||||
tableOfContents
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`}
|
||||
render={({ allMdx }) => {
|
||||
let navItems = [];
|
||||
|
||||
let finalNavItems;
|
||||
|
||||
if (allMdx.edges !== undefined && allMdx.edges.length > 0) {
|
||||
const navItems = allMdx.edges.map((item, index) => {
|
||||
let innerItems;
|
||||
|
||||
if (item !== undefined) {
|
||||
if (
|
||||
item.node.fields.slug === location.pathname ||
|
||||
config.gatsby.pathPrefix + item.node.fields.slug === location.pathname
|
||||
) {
|
||||
if (item.node.tableOfContents.items) {
|
||||
innerItems = item.node.tableOfContents.items.map((innerItem, index) => {
|
||||
const itemId = innerItem.title
|
||||
? innerItem.title.replace(/\s+/g, '').toLowerCase()
|
||||
: '#';
|
||||
|
||||
return (
|
||||
<ListItem key={index} to={`#${itemId}`} level={1}>
|
||||
{innerItem.title}
|
||||
</ListItem>
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
if (innerItems) {
|
||||
finalNavItems = innerItems;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (finalNavItems && finalNavItems.length) {
|
||||
return (
|
||||
<Sidebar>
|
||||
<ul className={'rightSideBarUL'}>
|
||||
<li className={'rightSideTitle'}>CONTENTS</li>
|
||||
{finalNavItems}
|
||||
</ul>
|
||||
</Sidebar>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Sidebar>
|
||||
<ul></ul>
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
export default SidebarLayout;
|
||||
@@ -1,14 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Highlight, Snippet } from 'react-instantsearch-dom';
|
||||
import { Link } from 'gatsby';
|
||||
|
||||
export const PageHit = clickHandler => ({ hit }) => (
|
||||
<div>
|
||||
<Link to={hit.slug} onClick={clickHandler}>
|
||||
<div>
|
||||
<Highlight attribute="title" hit={hit} tagName="mark" />
|
||||
</div>
|
||||
</Link>
|
||||
<Snippet attribute="excerpt" hit={hit} tagName="mark" />
|
||||
</div>
|
||||
);
|
||||
@@ -1,158 +0,0 @@
|
||||
import React, { useState, useEffect, createRef } from 'react';
|
||||
import {
|
||||
InstantSearch,
|
||||
Index,
|
||||
Hits,
|
||||
Configure,
|
||||
Pagination,
|
||||
connectStateResults,
|
||||
} from 'react-instantsearch-dom';
|
||||
import algoliasearch from 'algoliasearch/lite';
|
||||
import config from '../../../config.js';
|
||||
|
||||
import styled from '@emotion/styled';
|
||||
import { css } from '@emotion/core';
|
||||
import { PoweredBy } from './styles';
|
||||
import { Search } from 'styled-icons/fa-solid/Search';
|
||||
import Input from './input';
|
||||
import * as hitComps from './hitComps';
|
||||
|
||||
const SearchIcon = styled(Search)`
|
||||
width: 1em;
|
||||
pointer-events: none;
|
||||
`;
|
||||
|
||||
const HitsWrapper = styled.div`
|
||||
display: ${props => (props.show ? `grid` : `none`)};
|
||||
max-height: 80vh;
|
||||
overflow: scroll;
|
||||
z-index: 2;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(100% + 0.5em);
|
||||
width: 80vw;
|
||||
max-width: 30em;
|
||||
box-shadow: 0 0 5px 0;
|
||||
padding: 0.7em 1em 0.4em;
|
||||
background: white;
|
||||
@media only screen and (max-width: 991px) {
|
||||
width: 400px;
|
||||
max-width: 400px;
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
border-radius: ${props => props.theme.smallBorderRadius};
|
||||
> * + * {
|
||||
padding-top: 1em !important;
|
||||
border-top: 2px solid ${props => props.theme.darkGray};
|
||||
}
|
||||
li + li {
|
||||
margin-top: 0.7em;
|
||||
padding-top: 0.7em;
|
||||
border-top: 1px solid ${props => props.theme.lightGray};
|
||||
}
|
||||
* {
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
color: black !important;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
mark {
|
||||
color: ${props => props.theme.lightBlue};
|
||||
background: ${props => props.theme.darkBlue};
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.3em;
|
||||
h3 {
|
||||
color: black;
|
||||
background: ${props => props.theme.gray};
|
||||
padding: 0.1em 0.4em;
|
||||
border-radius: ${props => props.theme.smallBorderRadius};
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
color: black;
|
||||
margin: 0 0 0.5em;
|
||||
}
|
||||
h4 {
|
||||
color: black;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
`;
|
||||
|
||||
const Root = styled.div`
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-gap: 1em;
|
||||
@media only screen and (max-width: 767px) {
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
const Results = connectStateResults(
|
||||
({ searching, searchState: state, searchResults: res }) =>
|
||||
(searching && `Searching...`) || (res && res.nbHits === 0 && `No results for '${state.query}'`)
|
||||
);
|
||||
|
||||
const useClickOutside = (ref, handler, events) => {
|
||||
if (!events) events = [`mousedown`, `touchstart`];
|
||||
const detectClickOutside = event =>
|
||||
ref && ref.current && !ref.current.contains(event.target) && handler();
|
||||
|
||||
useEffect(() => {
|
||||
for (const event of events) document.addEventListener(event, detectClickOutside);
|
||||
return () => {
|
||||
for (const event of events) document.removeEventListener(event, detectClickOutside);
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
export default function SearchComponent({ indices, collapse, hitsAsGrid }) {
|
||||
const ref = createRef();
|
||||
|
||||
const [query, setQuery] = useState(``);
|
||||
|
||||
const [focus, setFocus] = useState(false);
|
||||
|
||||
const searchClient = algoliasearch(
|
||||
config.header.search.algoliaAppId,
|
||||
config.header.search.algoliaSearchKey
|
||||
);
|
||||
|
||||
useClickOutside(ref, () => setFocus(false));
|
||||
const displayResult = query.length > 0 && focus ? 'showResults' : 'hideResults';
|
||||
|
||||
return (
|
||||
<InstantSearch
|
||||
searchClient={searchClient}
|
||||
indexName={indices[0].name}
|
||||
onSearchStateChange={({ query }) => setQuery(query)}
|
||||
root={{ Root, props: { ref } }}
|
||||
>
|
||||
<Input onFocus={() => setFocus(true)} {...{ collapse, focus }} />
|
||||
<HitsWrapper
|
||||
className={'hitWrapper ' + displayResult}
|
||||
show={query.length > 0 && focus}
|
||||
asGrid={hitsAsGrid}
|
||||
>
|
||||
{indices.map(({ name, title, hitComp, type }) => {
|
||||
return (
|
||||
<Index key={name} indexName={name}>
|
||||
<Results />
|
||||
<Hits hitComponent={hitComps[hitComp](() => setFocus(false))} />
|
||||
</Index>
|
||||
);
|
||||
})}
|
||||
<PoweredBy />
|
||||
</HitsWrapper>
|
||||
<Configure hitsPerPage={5} />
|
||||
</InstantSearch>
|
||||
);
|
||||
}
|
||||
@@ -1,94 +0,0 @@
|
||||
import React from 'react';
|
||||
import { connectSearchBox } from 'react-instantsearch-dom';
|
||||
|
||||
import styled from '@emotion/styled';
|
||||
import { css } from '@emotion/core';
|
||||
import { Search } from 'styled-icons/fa-solid/Search';
|
||||
|
||||
const SearchIcon = styled(Search)`
|
||||
width: 1em;
|
||||
pointer-events: none;
|
||||
margin-right: 10px;
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
color: #2fd2c5;
|
||||
`;
|
||||
|
||||
const focus = props => css`
|
||||
background: white;
|
||||
color: ${props => props.theme.darkBlue};
|
||||
cursor: text;
|
||||
width: 5em;
|
||||
+ ${SearchIcon} {
|
||||
color: ${props => props.theme.darkBlue};
|
||||
margin: 0.3em;
|
||||
}
|
||||
`;
|
||||
|
||||
const collapse = props => css`
|
||||
width: 0;
|
||||
cursor: pointer;
|
||||
color: ${props => props.theme.lightBlue};
|
||||
+ ${SearchIcon} {
|
||||
color: white;
|
||||
}
|
||||
${props => props.focus && focus()}
|
||||
margin-left: ${props => (props.focus ? `-1.6em` : `-1em`)};
|
||||
padding-left: ${props => (props.focus ? `1.6em` : `1em`)};
|
||||
::placeholder {
|
||||
color: ${props => props.theme.gray};
|
||||
}
|
||||
`;
|
||||
|
||||
const expand = props => css`
|
||||
background: ${props => props.theme.veryLightGray};
|
||||
width: 6em;
|
||||
margin-left: -1.6em;
|
||||
padding-left: 1.6em;
|
||||
+ ${SearchIcon} {
|
||||
margin: 0.3em;
|
||||
}
|
||||
`;
|
||||
|
||||
const collapseExpand = props => css`
|
||||
${props => (props.collapse ? collapse() : expand())}
|
||||
`;
|
||||
|
||||
const Input = styled.input`
|
||||
outline: none;
|
||||
border: none;
|
||||
font-size: 1em;
|
||||
background: white;
|
||||
transition: ${props => props.theme.shortTrans};
|
||||
border-radius: ${props => props.theme.smallBorderRadius};
|
||||
{collapseExpand}
|
||||
`;
|
||||
|
||||
const Form = styled.form`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@media only screen and (max-width: 767px) {
|
||||
width: 100%;
|
||||
margin-left: 15px;
|
||||
}
|
||||
`;
|
||||
|
||||
export default connectSearchBox(({ refine, ...rest }) => {
|
||||
const preventSubmit = e => {
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
return (
|
||||
<Form className={'formElement'} onSubmit={preventSubmit}>
|
||||
<SearchIcon />
|
||||
<Input
|
||||
className={'searchInput '}
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
onChange={e => refine(e.target.value)}
|
||||
{...rest}
|
||||
/>
|
||||
</Form>
|
||||
);
|
||||
});
|
||||
@@ -1,11 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Algolia } from 'styled-icons/fa-brands/Algolia';
|
||||
|
||||
export const PoweredBy = () => (
|
||||
<span className="poweredBy">
|
||||
Powered by{` `}
|
||||
<a href="https://algolia.com">
|
||||
<Algolia size="1em" /> Algolia
|
||||
</a>
|
||||
</span>
|
||||
);
|
||||
@@ -1,138 +0,0 @@
|
||||
import React from 'react';
|
||||
import Tree from './tree';
|
||||
import { StaticQuery, graphql } from 'gatsby';
|
||||
import styled from '@emotion/styled';
|
||||
import { ExternalLink } from 'react-feather';
|
||||
import config from '../../../config';
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const ListItem = styled(({ className, active, level, ...props }) => {
|
||||
return (
|
||||
<li className={className}>
|
||||
<a href={props.to} {...props} target="_blank" rel="noopener noreferrer">
|
||||
{props.children}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
})`
|
||||
list-style: none;
|
||||
|
||||
a {
|
||||
color: #5c6975;
|
||||
text-decoration: none;
|
||||
font-weight: ${({ level }) => (level === 0 ? 700 : 400)};
|
||||
padding: 0.45rem 0 0.45rem ${props => 2 + (props.level || 0) * 1}rem;
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
color: #1ed3c6 !important;
|
||||
}
|
||||
|
||||
${props =>
|
||||
props.active &&
|
||||
`
|
||||
// color: #663399;
|
||||
border-color: rgb(230,236,241) !important;
|
||||
border-style: solid none solid solid;
|
||||
border-width: 1px 0px 1px 1px;
|
||||
background-color: #fff;
|
||||
`} // external link icon
|
||||
svg {
|
||||
float: right;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const Sidebar = styled('aside')`
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
position: fixed;
|
||||
padding-left: 0px;
|
||||
position: -webkit-sticky;
|
||||
position: -moz-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding-right: 0;
|
||||
-webkit-box-shadow: -1px 0px 4px 1px rgba(175, 158, 232, 0.4);
|
||||
|
||||
@media only screen and (max-width: 1023px) {
|
||||
width: 100%;
|
||||
/* position: relative; */
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
@media (min-width: 767px) and (max-width: 1023px) {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
padding-left: 0px;
|
||||
height: auto;
|
||||
}
|
||||
`;
|
||||
|
||||
const Divider = styled(props => (
|
||||
<li {...props}>
|
||||
<hr />
|
||||
</li>
|
||||
))`
|
||||
list-style: none;
|
||||
padding: 0.5rem 0;
|
||||
|
||||
hr {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #ede7f3;
|
||||
}
|
||||
`;
|
||||
|
||||
const SidebarLayout = ({ location }) => (
|
||||
<StaticQuery
|
||||
query={graphql`
|
||||
query {
|
||||
allMdx {
|
||||
edges {
|
||||
node {
|
||||
fields {
|
||||
slug
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`}
|
||||
render={({ allMdx }) => {
|
||||
return (
|
||||
<Sidebar>
|
||||
{config.sidebar.title ? (
|
||||
<div
|
||||
className={'sidebarTitle hiddenMobile'}
|
||||
dangerouslySetInnerHTML={{ __html: config.sidebar.title }}
|
||||
/>
|
||||
) : null}
|
||||
<ul className={'sideBarUL'}>
|
||||
<Tree edges={allMdx.edges} />
|
||||
{config.sidebar.links && config.sidebar.links.length > 0 && <Divider />}
|
||||
{config.sidebar.links.map((link, key) => {
|
||||
if (link.link !== '' && link.text !== '') {
|
||||
return (
|
||||
<ListItem key={key} to={link.link}>
|
||||
{link.text}
|
||||
<ExternalLink size={14} />
|
||||
</ListItem>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</ul>
|
||||
</Sidebar>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
export default SidebarLayout;
|
||||
@@ -1,151 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import config from '../../../config';
|
||||
import TreeNode from './treeNode';
|
||||
|
||||
const calculateTreeData = edges => {
|
||||
const originalData = config.sidebar.ignoreIndex
|
||||
? edges.filter(
|
||||
({
|
||||
node: {
|
||||
fields: { slug },
|
||||
},
|
||||
}) => slug !== '/'
|
||||
)
|
||||
: edges;
|
||||
|
||||
const tree = originalData.reduce(
|
||||
(
|
||||
accu,
|
||||
{
|
||||
node: {
|
||||
fields: { slug, title },
|
||||
},
|
||||
}
|
||||
) => {
|
||||
const parts = slug.split('/');
|
||||
|
||||
let { items: prevItems } = accu;
|
||||
|
||||
const slicedParts =
|
||||
config.gatsby && config.gatsby.trailingSlash ? parts.slice(1, -2) : parts.slice(1, -1);
|
||||
|
||||
for (const part of slicedParts) {
|
||||
let tmp = prevItems && prevItems.find(({ label }) => label == part);
|
||||
|
||||
if (tmp) {
|
||||
if (!tmp.items) {
|
||||
tmp.items = [];
|
||||
}
|
||||
} else {
|
||||
tmp = { label: part, items: [] };
|
||||
prevItems.push(tmp);
|
||||
}
|
||||
prevItems = tmp.items;
|
||||
}
|
||||
const slicedLength =
|
||||
config.gatsby && config.gatsby.trailingSlash ? parts.length - 2 : parts.length - 1;
|
||||
|
||||
const existingItem = prevItems.find(({ label }) => label === parts[slicedLength]);
|
||||
|
||||
if (existingItem) {
|
||||
existingItem.url = slug;
|
||||
existingItem.title = title;
|
||||
} else {
|
||||
prevItems.push({
|
||||
label: parts[slicedLength],
|
||||
url: slug,
|
||||
items: [],
|
||||
title,
|
||||
});
|
||||
}
|
||||
return accu;
|
||||
},
|
||||
{ items: [] }
|
||||
);
|
||||
|
||||
const {
|
||||
sidebar: { forcedNavOrder = [] },
|
||||
} = config;
|
||||
|
||||
const tmp = [...forcedNavOrder];
|
||||
|
||||
if (config.gatsby && config.gatsby.trailingSlash) {
|
||||
}
|
||||
tmp.reverse();
|
||||
return tmp.reduce((accu, slug) => {
|
||||
const parts = slug.split('/');
|
||||
|
||||
let { items: prevItems } = accu;
|
||||
|
||||
const slicedParts =
|
||||
config.gatsby && config.gatsby.trailingSlash ? parts.slice(1, -2) : parts.slice(1, -1);
|
||||
|
||||
for (const part of slicedParts) {
|
||||
let tmp = prevItems.find(item => item && item.label == part);
|
||||
|
||||
if (tmp) {
|
||||
if (!tmp.items) {
|
||||
tmp.items = [];
|
||||
}
|
||||
} else {
|
||||
tmp = { label: part, items: [] };
|
||||
prevItems.push(tmp);
|
||||
}
|
||||
if (tmp && tmp.items) {
|
||||
prevItems = tmp.items;
|
||||
}
|
||||
}
|
||||
// sort items alphabetically.
|
||||
prevItems.map(item => {
|
||||
item.items = item.items.sort(function(a, b) {
|
||||
if (a.label < b.label) return -1;
|
||||
if (a.label > b.label) return 1;
|
||||
return 0;
|
||||
});
|
||||
});
|
||||
const slicedLength =
|
||||
config.gatsby && config.gatsby.trailingSlash ? parts.length - 2 : parts.length - 1;
|
||||
|
||||
const index = prevItems.findIndex(({ label }) => label === parts[slicedLength]);
|
||||
|
||||
if (prevItems.length) {
|
||||
accu.items.unshift(prevItems.splice(index, 1)[0]);
|
||||
}
|
||||
return accu;
|
||||
}, tree);
|
||||
};
|
||||
|
||||
const Tree = ({ edges }) => {
|
||||
let [treeData] = useState(() => {
|
||||
return calculateTreeData(edges);
|
||||
});
|
||||
|
||||
const defaultCollapsed = {};
|
||||
|
||||
treeData.items.forEach(item => {
|
||||
if (config.sidebar.collapsedNav && config.sidebar.collapsedNav.includes(item.url)) {
|
||||
defaultCollapsed[item.url] = true;
|
||||
} else {
|
||||
defaultCollapsed[item.url] = false;
|
||||
}
|
||||
});
|
||||
const [collapsed, setCollapsed] = useState(defaultCollapsed);
|
||||
|
||||
const toggle = url => {
|
||||
setCollapsed({
|
||||
...collapsed,
|
||||
[url]: !collapsed[url],
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<TreeNode
|
||||
className={`${config.sidebar.frontLine ? 'showFrontLine' : 'hideFrontLine'} firstLevel`}
|
||||
setCollapsed={toggle}
|
||||
collapsed={collapsed}
|
||||
{...treeData}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default Tree;
|
||||
@@ -1,55 +0,0 @@
|
||||
import React from 'react';
|
||||
import OpenedSvg from '../images/opened';
|
||||
import ClosedSvg from '../images/closed';
|
||||
import config from '../../../config';
|
||||
import Link from '../link';
|
||||
|
||||
const TreeNode = ({ className = '', setCollapsed, collapsed, url, title, items, ...rest }) => {
|
||||
const isCollapsed = collapsed[url];
|
||||
|
||||
const collapse = () => {
|
||||
setCollapsed(url);
|
||||
};
|
||||
|
||||
const hasChildren = items.length !== 0;
|
||||
|
||||
let location;
|
||||
|
||||
if (typeof document != 'undefined') {
|
||||
location = document.location;
|
||||
}
|
||||
const active =
|
||||
location && (location.pathname === url || location.pathname === config.gatsby.pathPrefix + url);
|
||||
|
||||
const calculatedClassName = `${className} item ${active ? 'active' : ''}`;
|
||||
|
||||
return (
|
||||
<li className={calculatedClassName}>
|
||||
{title && (
|
||||
<Link to={url}>
|
||||
{title}
|
||||
{!config.sidebar.frontLine && title && hasChildren ? (
|
||||
<button onClick={collapse} aria-label="collapse" className="collapser">
|
||||
{!isCollapsed ? <OpenedSvg /> : <ClosedSvg />}
|
||||
</button>
|
||||
) : null}
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{!isCollapsed && hasChildren ? (
|
||||
<ul>
|
||||
{items.map((item, index) => (
|
||||
<TreeNode
|
||||
key={item.url + index.toString()}
|
||||
setCollapsed={setCollapsed}
|
||||
collapsed={collapsed}
|
||||
{...item}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
export default TreeNode;
|
||||
@@ -1,77 +0,0 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
export const StyledHeading = styled('h1')`
|
||||
font-size: 32px;
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
border-left: 2px solid #1ed3c6;
|
||||
padding: 0 16px;
|
||||
flex: 1;
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
color: ${props => props.theme.colors.heading};
|
||||
`;
|
||||
|
||||
export const Edit = styled('div')`
|
||||
padding: 1rem 1.5rem;
|
||||
text-align: right;
|
||||
|
||||
a {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1em;
|
||||
text-decoration: none;
|
||||
color: #555;
|
||||
border: 1px solid rgb(211, 220, 228);
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
transition: all 0.2s ease-out 0s;
|
||||
text-decoration: none;
|
||||
color: rgb(36, 42, 49);
|
||||
background-color: rgb(255, 255, 255);
|
||||
box-shadow: rgba(116, 129, 141, 0.1) 0px 1px 1px 0px;
|
||||
height: 30px;
|
||||
padding: 5px 16px;
|
||||
&:hover {
|
||||
background-color: rgb(245, 247, 249);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const StyledMainWrapper = styled.div`
|
||||
max-width: 750px;
|
||||
color: ${props => props.theme.colors.text};
|
||||
|
||||
ul,
|
||||
ol {
|
||||
-webkit-padding-start: 40px;
|
||||
-moz-padding-start: 40px;
|
||||
-o-padding-start: 40px;
|
||||
margin: 24px 0px;
|
||||
padding: 0px 0px 0px 2em;
|
||||
|
||||
li {
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
transition: color 0.15s;
|
||||
color: ${props => props.theme.colors.link};
|
||||
}
|
||||
|
||||
code {
|
||||
border: 1px solid #ede7f3;
|
||||
border-radius: 4px;
|
||||
padding: 2px 6px;
|
||||
font-size: 0.9375em;
|
||||
|
||||
background: ${props => props.theme.colors.background};
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
padding: 0 15px;
|
||||
}
|
||||
`;
|
||||
@@ -1,896 +0,0 @@
|
||||
import { injectGlobal } from 'emotion';
|
||||
|
||||
export const baseStyles = injectGlobal`
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap');
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-display: swap;
|
||||
}
|
||||
::-webkit-input-placeholder {
|
||||
/* Edge */
|
||||
color: #c2c2c2;
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
/* Internet Explorer */
|
||||
color: #c2c2c2;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: #c2c2c2;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Roboto Light', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
|
||||
font-size: 16px;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
a {
|
||||
transition: color 0.15s;
|
||||
/* color: #663399; */
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto';
|
||||
}
|
||||
.visibleMobile {
|
||||
display: none;
|
||||
}
|
||||
.visibleMobileView {
|
||||
display: none !important;
|
||||
}
|
||||
.video-responsive {
|
||||
position: relative;
|
||||
padding-bottom: 56.2%;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.displayInline {
|
||||
display: inline-block;
|
||||
}
|
||||
.navBarToggle {
|
||||
border: 0px solid #fff;
|
||||
border-radius: 4px;
|
||||
width: 36px;
|
||||
height: 33px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
padding: 8px 5px;
|
||||
display: none;
|
||||
}
|
||||
.navBarToggle .iconBar {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
border-radius: 1px;
|
||||
margin: 0 auto;
|
||||
margin-top: 4px;
|
||||
background-color: #001934;
|
||||
}
|
||||
.navBarToggle .iconBar:first-child {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.video-responsive iframe {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.diffNewLine {
|
||||
color: #22863a;
|
||||
background-color: #f0fff4;
|
||||
}
|
||||
|
||||
.diffRemoveLine {
|
||||
color: red;
|
||||
background-color: #ffcccc;
|
||||
}
|
||||
.navBarParent {
|
||||
width: 100%;
|
||||
float: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.divider {
|
||||
height: 30px;
|
||||
margin: 0 15px;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
.navBarULRight {
|
||||
/* position: absolute;
|
||||
right: 30px; */
|
||||
}
|
||||
.githubIcon {
|
||||
width: 15px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.githubSection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #000;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.githubSection:hover {
|
||||
text-decoration: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-toggle .icon-bar {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-toggle:focus,
|
||||
.navbar-default .navbar-toggle:hover {
|
||||
background-color: #001933;
|
||||
}
|
||||
|
||||
.headerWrapper {
|
||||
border-bottom: 1px solid rgb(212, 218, 223);
|
||||
box-shadow: rgba(116, 129, 141, 0.1) 0px 1px 1px 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.formElement {
|
||||
background-color: transparent;
|
||||
padding: 4px;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
}
|
||||
.formElement:focus {
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
.formElement svg path {
|
||||
fill: #2fd2c5;
|
||||
}
|
||||
.searchInput {
|
||||
width: 100%;
|
||||
background-color: rgba(28,211,198,.12) !important;
|
||||
border-width: 0 !important;
|
||||
color: #C2C2C2;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
color: #fff;
|
||||
opacity: .6;
|
||||
padding-left: 38px;
|
||||
max-width: 600px;
|
||||
}
|
||||
.searchInput:focus,
|
||||
.searchInput:visited,
|
||||
.searchInput:hover,
|
||||
.searchInput:focus-within {
|
||||
outline: none;
|
||||
border: 0;
|
||||
}
|
||||
.searchWrapper {
|
||||
padding-left: 0px;
|
||||
padding-right: 20px;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
.searchWrapper a {
|
||||
font-weight: 500;
|
||||
}
|
||||
.hitWrapper {
|
||||
background-color: #fff;
|
||||
padding: 0.7em 1em 0.4em;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
width: 80vw;
|
||||
max-width: 30em;
|
||||
top: 40px;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.16);
|
||||
height: auto;
|
||||
max-height: 80vh;
|
||||
overflow: scroll;
|
||||
left: 0;
|
||||
}
|
||||
.hitWrapper ul li {
|
||||
margin-top: 0.7em;
|
||||
padding-top: 0.7em;
|
||||
border-top: 1px solid;
|
||||
list-style-type: none;
|
||||
}
|
||||
.hitWrapper ul li:first-child {
|
||||
border-top: 0px;
|
||||
margin-top: 0px;
|
||||
color: black !important;
|
||||
padding: 0px;
|
||||
}
|
||||
.showResults {
|
||||
display: block;
|
||||
}
|
||||
.hideResults {
|
||||
display: none;
|
||||
}
|
||||
.hitWrapper span {
|
||||
color: black;
|
||||
font-size: 14px;
|
||||
}
|
||||
.headerTitle {
|
||||
height: auto;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
font-weight: 300;
|
||||
color: #fff !important;
|
||||
margin-top: 16px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.headerTitle a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.headerTitle a:hover {
|
||||
text-decoration: none;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.logoWrapper {
|
||||
padding: 21px 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.logoContent {
|
||||
font-family: 'Roboto';
|
||||
margin-left: 16px;
|
||||
font-size: 28px;
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
/* Header section starts here */
|
||||
.removePadd {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.navBarDefault {
|
||||
background-color: #001934;
|
||||
border-radius: 0;
|
||||
border-top: 0;
|
||||
margin-bottom: 0;
|
||||
border: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: -1px 0px 4px 1px rgba(175, 158, 232, 0.4);
|
||||
-webkit-box-shadow: -1px 0px 4px 1px rgba(175, 158, 232, 0.4);
|
||||
-moz-box-shadow: -1px 0px 4px 1px rgba(175, 158, 232, 0.8);
|
||||
-o-box-shadow: -1px 0px 4px 1px rgba(175, 158, 232, 0.4);
|
||||
z-index: 1;
|
||||
padding: 15px;
|
||||
position: relative;
|
||||
height: 80px;
|
||||
}
|
||||
.navBarHeader {
|
||||
min-width: 335px;
|
||||
padding-right: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.navBarBrand {
|
||||
padding: 0px 0px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navBarBrand img {
|
||||
width: 120px;
|
||||
margin-right: 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
.navBarUL li {
|
||||
list-style-type: none;
|
||||
}
|
||||
.navBarUL {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
.navBarUL li a {
|
||||
font-family: 'Roboto';
|
||||
color: #fff !important;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 1em;
|
||||
opacity: 1;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
.navBarNav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.navBarUL li a img,
|
||||
.navBarUL li a .shareIcon {
|
||||
width: 20px;
|
||||
}
|
||||
.navBarUL li a:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
pre {
|
||||
border: 0 !important;
|
||||
background-color: rgb(245, 247, 249); /* !important; */
|
||||
}
|
||||
|
||||
blockquote {
|
||||
color: rgb(116, 129, 141);
|
||||
margin: 0px 0px 24px;
|
||||
padding: 0px 0px 0px 12px;
|
||||
border-left: 4px solid rgb(230, 236, 241);
|
||||
border-color: rgb(230, 236, 241);
|
||||
}
|
||||
.socialWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.socialWrapper li {
|
||||
display: inline-block;
|
||||
}
|
||||
.socialWrapper li a {
|
||||
display: contents;
|
||||
}
|
||||
.discordBtn, .twitterBtn {
|
||||
border-radius: 4px;
|
||||
border: solid 1px #d1d2d3;
|
||||
background-color: #f1f5f8;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding-top: 2px;
|
||||
margin-left: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: .8;
|
||||
cursor: pointer;
|
||||
}
|
||||
.twitterBtn img {
|
||||
width: 12px !important;
|
||||
}
|
||||
.discordBtn img {
|
||||
width: 10px !important;
|
||||
}
|
||||
.discordBtn:hover, .twitterBtn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.discordBtn {
|
||||
img {
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
/* Header section ends here */
|
||||
.sidebarTitle {
|
||||
/* box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); */
|
||||
background-color: #f8f8f8;
|
||||
padding: 18px 16px;
|
||||
font-family: 'Poppins';
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #001934;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sideBarShow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebarTitle a {
|
||||
color: #001934;
|
||||
}
|
||||
|
||||
.greenCircle {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #1cd3c6;
|
||||
border-radius: 50%;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.headerNav {
|
||||
font-family: 'Roboto';
|
||||
padding: 0px 24px;
|
||||
color: #001933;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.headerNav a {
|
||||
color: #001933;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.headerNav a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logoWrapper img {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.sideBarUL {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.sideBarUL li {
|
||||
list-style-type: none;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.sideBarUL li a {
|
||||
/* color: #fff; */
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
padding: 7px 24px 7px 16px;
|
||||
padding-left: 10px;
|
||||
padding-right: 25px;
|
||||
border-style: solid none solid solid;
|
||||
border-width: 1px 0px 1px 1px;
|
||||
border-color: transparent currentcolor transparent transparent;
|
||||
}
|
||||
|
||||
.hideFrontLine .collapser {
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hideFrontLine .active > a {
|
||||
background-color: #1ed3c6;
|
||||
color: #fff !important;
|
||||
}
|
||||
.firstLevel ul li .collapser svg path {
|
||||
fill: #fff !important;
|
||||
}
|
||||
.active .collapser > svg > path {
|
||||
fill: #001933 !important;
|
||||
}
|
||||
|
||||
.firstLevel ul .item ul .item {
|
||||
border-left: 1px solid #e6ecf1;
|
||||
}
|
||||
|
||||
.sideBarUL .item {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sideBarUL .item > a {
|
||||
color: #1ED3C6;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: 35px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.showFrontLine .item > a:hover {
|
||||
background-color: #001933;
|
||||
}
|
||||
|
||||
.showFrontLine .active > a {
|
||||
/* color: #fff; */
|
||||
background-color: #001933;
|
||||
}
|
||||
|
||||
.sideBarUL .item .item {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.firstLevel > ul > .item {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.showFrontLine .item .item {
|
||||
border-left: 1px solid #e6ecf1;
|
||||
border-left-color: rgb(230, 236, 241);
|
||||
padding: 0;
|
||||
width: calc(100% - 16px) !important;
|
||||
}
|
||||
|
||||
.showFrontLine .item .active > a {
|
||||
border-color: rgb(230, 236, 241) !important;
|
||||
border-style: solid none solid solid;
|
||||
border-width: 1px 0px 1px 1px;
|
||||
background-color: #1ed3c6 !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.titleWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 40px;
|
||||
border-bottom: 1px solid rgb(230, 236, 241);
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.gitBtn {
|
||||
height: 30px;
|
||||
min-height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gitBtn img {
|
||||
width: 15px;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.addPaddTopBottom {
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
.preRightWrapper {
|
||||
display: block;
|
||||
margin: 0px;
|
||||
flex: 1 1 0%;
|
||||
padding: 16px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.smallContent {
|
||||
display: block;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
color: #6e6e6e;
|
||||
}
|
||||
|
||||
.smallContent span {
|
||||
font-size: 12px;
|
||||
line-height: 1.625;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* **************************** */
|
||||
|
||||
.nextRightWrapper {
|
||||
display: block;
|
||||
margin: 0px;
|
||||
padding: 16px;
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
/* tables.css */
|
||||
table {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table tr {
|
||||
border-top: 1px solid #cccccc;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
table tr:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
table tr th {
|
||||
font-weight: bold;
|
||||
border: 1px solid #cccccc;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
table tr td {
|
||||
border: 1px solid #cccccc;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
table tr th :first-child,
|
||||
table tr td :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
table tr th :last-child,
|
||||
table tr td :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
/* end - tables.css */
|
||||
|
||||
/* Image styling */
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
/* end image */
|
||||
.githubBtn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
padding: 10px 0px;
|
||||
padding-left: 15px;
|
||||
max-height: 40px;
|
||||
}
|
||||
.githubBtn span span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.communitySection {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.authorSection {
|
||||
padding: 20px 0;
|
||||
}
|
||||
.authorSection,
|
||||
.authorName {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.authorImg img {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
border-radius: 50%;
|
||||
min-width: 75px;
|
||||
max-width: 75px;
|
||||
min-height: 75px;
|
||||
max-height: 75px;
|
||||
}
|
||||
.authorDetails {
|
||||
padding-left: 10px;
|
||||
}
|
||||
.authorDesc {
|
||||
padding-top: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.authorName img {
|
||||
margin-left: 10px;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
}
|
||||
.authorName img:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.heading1 {
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.heading2 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.heading3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.heading4 {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.heading5 {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.heading6 {
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 16px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
margin: 16px 0px 32px;
|
||||
line-height: 1.625;
|
||||
}
|
||||
|
||||
.pre {
|
||||
font-size: 14px;
|
||||
margin: 0px;
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.poweredBy {
|
||||
font-size: 0.6em;
|
||||
text-align: end;
|
||||
padding: 0;
|
||||
}
|
||||
.topnav {
|
||||
-webkit-transition: top 0.5s, bottom 0.5s;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.formElement svg path {
|
||||
fill: #001934;
|
||||
}
|
||||
.visibleMobileView {
|
||||
display: block !important;
|
||||
}
|
||||
.searchInput {
|
||||
color: #001934;
|
||||
}
|
||||
.socialWrapper {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 29px;
|
||||
}
|
||||
.responsive {
|
||||
margin-top: 15px;
|
||||
position: relative;
|
||||
padding-bottom: 20px;
|
||||
border-top: 1px solid #fff;
|
||||
}
|
||||
.headerTitle {
|
||||
padding-right: 50px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.navBarBrand {
|
||||
min-height: 40px;
|
||||
}
|
||||
.navBarBrand img {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.topnav.responsive .visibleMobile {
|
||||
display: block;
|
||||
}
|
||||
.topnav .navBarUL {
|
||||
display: none;
|
||||
}
|
||||
.topnav.responsive .navBarUL {
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
.hiddenMobile {
|
||||
display: none !important;
|
||||
}
|
||||
hr {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.navBarParent {
|
||||
display: block;
|
||||
}
|
||||
.separator {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.navBarULRight {
|
||||
position: static;
|
||||
}
|
||||
.navBarUL {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 7.5px 0px;
|
||||
}
|
||||
.navBarUL li {
|
||||
height: 37px;
|
||||
}
|
||||
.navBarUL li a {
|
||||
font-size: 14px;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.navBarDefault {
|
||||
display: block;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.navBarToggle {
|
||||
margin-right: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 11px;
|
||||
top: 15px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.navBarHeader {
|
||||
display: flex;
|
||||
min-width: auto;
|
||||
padding-right: 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navBarBrand {
|
||||
font-size: 20px;
|
||||
padding: 0 0;
|
||||
padding-left: 0;
|
||||
flex: initial;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.titleWrapper {
|
||||
padding: 0 15px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.gitBtn {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mobileView {
|
||||
text-align: left !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.searchWrapper {
|
||||
padding: 0px 0;
|
||||
padding-top: 0px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: calc(100% - 70px);
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 8px;
|
||||
}
|
||||
.hitWrapper {
|
||||
width: 100%;
|
||||
right: 0;
|
||||
top: 35px;
|
||||
max-height: fit-content;
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
.navBarDefault {
|
||||
padding: 10px;
|
||||
}
|
||||
.navBarBrand {
|
||||
font-size: 22px;
|
||||
}
|
||||
.navBarHeader {
|
||||
min-width: 240px;
|
||||
flex: initial;
|
||||
}
|
||||
.githubBtn {
|
||||
padding: 10px 10px;
|
||||
}
|
||||
.divider {
|
||||
margin: 0 5px;
|
||||
height: 20px;
|
||||
}
|
||||
.hitWrapper {
|
||||
max-width: 500px;
|
||||
}
|
||||
.navBarUL li a {
|
||||
padding: 10px 5px;
|
||||
}
|
||||
.searchWrapper {
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -1,110 +0,0 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
export const StyledNextPrevious = styled('div')`
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
width: auto;
|
||||
display: grid;
|
||||
grid-template-rows: auto;
|
||||
column-gap: 24px;
|
||||
grid-template-columns: calc(50% - 8px) calc(50% - 8px);
|
||||
|
||||
.previousBtn {
|
||||
cursor: pointer;
|
||||
-moz-box-align: center;
|
||||
-moz-box-direction: normal;
|
||||
-moz-box-orient: horizontal;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
place-self: stretch;
|
||||
border-radius: 3px;
|
||||
border: 1px solid rgb(230, 236, 241);
|
||||
transition: border 200ms ease 0s;
|
||||
box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
|
||||
text-decoration: none;
|
||||
|
||||
background-color: ${props => props.theme.colors.background};
|
||||
color: ${props => props.theme.colors.text};
|
||||
}
|
||||
|
||||
.nextBtn {
|
||||
cursor: pointer;
|
||||
-moz-box-align: center;
|
||||
-moz-box-direction: normal;
|
||||
-moz-box-orient: horizontal;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
place-self: stretch;
|
||||
border-radius: 3px;
|
||||
border: 1px solid rgb(230, 236, 241);
|
||||
transition: border 200ms ease 0s;
|
||||
box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px;
|
||||
text-decoration: none;
|
||||
|
||||
background-color: ${props => props.theme.colors.background};
|
||||
color: ${props => props.theme.colors.text};
|
||||
}
|
||||
|
||||
.nextBtn:hover,
|
||||
.previousBtn:hover {
|
||||
text-decoration: none;
|
||||
border: 1px solid #1ed3c6;
|
||||
}
|
||||
|
||||
.nextBtn:hover .rightArrow,
|
||||
.previousBtn:hover .leftArrow {
|
||||
color: #1ed3c6;
|
||||
}
|
||||
|
||||
.leftArrow {
|
||||
display: block;
|
||||
margin: 0px;
|
||||
color: rgb(157, 170, 182);
|
||||
flex: 0 0 auto;
|
||||
font-size: 24px;
|
||||
transition: color 200ms ease 0s;
|
||||
padding: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.rightArrow {
|
||||
flex: 0 0 auto;
|
||||
font-size: 24px;
|
||||
transition: color 200ms ease 0s;
|
||||
padding: 16px;
|
||||
padding-left: 16px;
|
||||
display: block;
|
||||
margin: 0px;
|
||||
color: rgb(157, 170, 182);
|
||||
}
|
||||
|
||||
.nextPreviousTitle {
|
||||
display: block;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
transition: color 200ms ease 0s;
|
||||
}
|
||||
|
||||
.nextPreviousTitle span {
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
display: block;
|
||||
padding: 0 15px;
|
||||
|
||||
.previousBtn {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -1,92 +0,0 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
export const Sidebar = styled('aside')`
|
||||
width: 100%;
|
||||
border-right: 1px solid #ede7f3;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
position: fixed;
|
||||
padding-left: 24px;
|
||||
position: -webkit-sticky;
|
||||
position: -moz-sticky;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
background: ${props => props.theme.colors.background};
|
||||
|
||||
.rightSideTitle {
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.2px;
|
||||
padding: 7px 24px 7px 16px;
|
||||
border-left: 1px solid #e6ecf1;
|
||||
border-left-color: rgb(230, 236, 241);
|
||||
|
||||
color: ${props => props.theme.colors.text};
|
||||
}
|
||||
|
||||
.rightSideBarUL {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.rightSideBarUL li {
|
||||
list-style-type: none;
|
||||
border-left: 1px solid #e6ecf1;
|
||||
border-left-color: rgb(230, 236, 241);
|
||||
}
|
||||
|
||||
.rightSideBarUL li a {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
padding: 7px 24px 7px 16px;
|
||||
|
||||
color: ${props => props.theme.colors.text};
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 50rem) {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
`;
|
||||
|
||||
export const ListItem = styled(({ className, active, level, ...props }) => {
|
||||
return (
|
||||
<li className={className}>
|
||||
<a href={props.to} {...props}>
|
||||
{props.children}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
})`
|
||||
list-style: none;
|
||||
|
||||
a {
|
||||
color: #5c6975;
|
||||
text-decoration: none;
|
||||
font-weight: ${({ level }) => (level === 0 ? 700 : 400)};
|
||||
padding: 0.45rem 0 0.45rem ${props => 2 + (props.level || 0) * 1}rem;
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
color: #1ed3c6 !important;
|
||||
}
|
||||
|
||||
${props =>
|
||||
props.active &&
|
||||
`
|
||||
color: #1ED3C6;
|
||||
border-color: rgb(230,236,241) !important;
|
||||
border-style: solid none solid solid;
|
||||
border-width: 1px 0px 1px 1px;
|
||||
background-color: #fff;
|
||||
`} // external link icon
|
||||
svg {
|
||||
float: right;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -1,5 +0,0 @@
|
||||
export default {
|
||||
fonts: {
|
||||
mono: '"SF Mono", "Roboto Mono", Menlo, monospace',
|
||||
},
|
||||
};
|
||||
@@ -1,29 +0,0 @@
|
||||
const baseTheme = {
|
||||
fonts: {
|
||||
mono: '"SF Mono", "Roboto Mono", Menlo, monospace',
|
||||
},
|
||||
};
|
||||
|
||||
const lightTheme = {
|
||||
...baseTheme,
|
||||
colors: {
|
||||
background: '#fff',
|
||||
heading: '#000',
|
||||
text: '#3B454E',
|
||||
preFormattedText: 'rgb(245, 247, 249)',
|
||||
link: '#1000EE',
|
||||
},
|
||||
};
|
||||
|
||||
const darkTheme = {
|
||||
...baseTheme,
|
||||
colors: {
|
||||
background: '#001933',
|
||||
heading: '#fff',
|
||||
text: '#fff',
|
||||
preFormattedText: '#000',
|
||||
link: '#1ED3C6',
|
||||
},
|
||||
};
|
||||
|
||||
export { lightTheme, darkTheme };
|
||||
@@ -1,51 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
|
||||
import { Global } from '@emotion/core';
|
||||
|
||||
import { lightTheme, darkTheme } from './index';
|
||||
import Header from '../Header';
|
||||
import { baseStyles } from '../styles/GlobalStyles';
|
||||
|
||||
class ThemeProvider extends React.Component {
|
||||
state = {
|
||||
isDarkThemeActive: false,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.retrieveActiveTheme();
|
||||
}
|
||||
|
||||
retrieveActiveTheme = () => {
|
||||
const isDarkThemeActive = JSON.parse(window.localStorage.getItem('isDarkThemeActive'));
|
||||
|
||||
this.setState({ isDarkThemeActive });
|
||||
};
|
||||
|
||||
toggleActiveTheme = () => {
|
||||
this.setState(prevState => ({ isDarkThemeActive: !prevState.isDarkThemeActive }));
|
||||
|
||||
window.localStorage.setItem('isDarkThemeActive', JSON.stringify(!this.state.isDarkThemeActive));
|
||||
};
|
||||
|
||||
render() {
|
||||
const { children, location } = this.props;
|
||||
|
||||
const { isDarkThemeActive } = this.state;
|
||||
|
||||
const currentActiveTheme = isDarkThemeActive ? darkTheme : lightTheme;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Global styles={baseStyles} />
|
||||
<Header
|
||||
location={location}
|
||||
isDarkThemeActive={isDarkThemeActive}
|
||||
toggleActiveTheme={this.toggleActiveTheme}
|
||||
/>
|
||||
<EmotionThemeProvider theme={currentActiveTheme}>{children}</EmotionThemeProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ThemeProvider;
|
||||
@@ -1,13 +0,0 @@
|
||||
import * as React from 'react';
|
||||
import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
|
||||
import { default as defaultTheme } from './theme';
|
||||
import Header from './Header';
|
||||
|
||||
export default function ThemeProvider({ children, theme = {}, location }) {
|
||||
return (
|
||||
<div>
|
||||
<Header location={location} />
|
||||
<EmotionThemeProvider theme={{ ...defaultTheme, ...theme }}>{children}</EmotionThemeProvider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
workbox.routing.registerRoute(
|
||||
new RegExp('https:.*min.(css|js)'),
|
||||
workbox.strategies.staleWhileRevalidate({
|
||||
cacheName: 'cdn-cache',
|
||||
})
|
||||
);
|
||||
@@ -1,8 +1,4 @@
|
||||
---
|
||||
title: "Discord.JS to Discordeno Guide"
|
||||
metaTitle: "Discord.JS to Discordeno | Discordeno"
|
||||
metaDescription: "This guide will help should you how to convert a Discord.JS bot over to Discordeno."
|
||||
---
|
||||
# Discord.js to Discordeno Guide
|
||||
|
||||
## Understanding The Goals of This Guide
|
||||
|
||||
@@ -1,10 +1,4 @@
|
||||
---
|
||||
title: "FAQ"
|
||||
metaTitle: "FAQ | Discordeno"
|
||||
metaDescription: "Discordeno is a Third Party Deno Library for interacting with the Discord API."
|
||||
---
|
||||
|
||||
## Frequently Asked Questions
|
||||
# Frequently Asked Questions
|
||||
|
||||
## Does Discordeno Support TypeScript?
|
||||
|
||||
@@ -28,11 +22,15 @@ This is why I made it one of my foundational goals of this library to have the b
|
||||
|
||||
Discordeno will have releases that comply with SemVer. To use this system you will simply use the `v2.0.0` system in your version.
|
||||
|
||||
> Note: This means for every tiny bug fix/change you need to manually update the code every time. So if a new feature is added, you would need to bump the version in your code.
|
||||
::: tip
|
||||
This means for every tiny bug fix/change you need to manually update the code every time. So if a new feature is added, you would need to bump the version in your code.
|
||||
:::
|
||||
|
||||
Each version is also available through a specific branch. For example v2 branch holds all the version 2 code. This branch is always updated whenever a MINOR or PATCH update is made that will NOT break your bots.
|
||||
|
||||
> Note: This means you never have to update your code EXCEPT when you are ready to bump to next MAJOR version. So if a new feature is added, it will be added automatically. If a small bug is fixed it will be automatic.
|
||||
::: tip
|
||||
This means you never have to update your code EXCEPT when you are ready to bump to next MAJOR version. So if a new feature is added, it will be added automatically. If a small bug is fixed it will be automatic.
|
||||
:::
|
||||
|
||||
SemVer means more manual work for you to update code but a more secure module. Automated means almost no manual work for you to update code but a less secure module.
|
||||
|
||||
70
docs/src/gettingstarted.md
Normal file
70
docs/src/gettingstarted.md
Normal file
@@ -0,0 +1,70 @@
|
||||
# Getting Started
|
||||
|
||||
Discordeno aims for a simple, easy and stress-free interaction with the Discord API. Always supporting the latest version to ensure stability, consistency and the best developer experience.
|
||||
|
||||
This website serves as the purpose for introducing Discordeno to developers. The full documentation for all the functions and methods can be visited by clicking the link below:
|
||||
|
||||
[View Documentation on Deno](https://doc.deno.land/https/deno.land/x/discordeno/mod.ts)
|
||||
|
||||
## Useful Links
|
||||
- [GitHub Repository](https://github.com/Skillz4Killz/Discordeno)
|
||||
- [Deno Page](https://deno.land/x/discordeno)
|
||||
- [Website](https://discordeno.js.org/)
|
||||
|
||||
## Requirements
|
||||
|
||||
- **Deno 1.0** or higher
|
||||
|
||||
## Creating your First Discord Bot Application
|
||||
|
||||
Plenty of guides are available on how to create a Discord Bot Application.
|
||||
|
||||
1. [Creating an Application](https://discord.com/developers/applications) on the Developer Portal, name something cool and pick a sweet icon!
|
||||
2. After creating an application. Save the **Client ID.** Thats the unique identifier for a Discord Bot.
|
||||
3. Now, go and create a bot by clicking the **Bot** tab. You will see a **Token** section and thats the Discord Bot's token. **Make sure you don't share that token with anyone!!!**
|
||||
4. Invite the bot to the server, you can use the **[Discord Permissions Calculator](https://discordapi.com/permissions.html#0)** for creating the invite link with custom permissions. By default, `0` means no permissions and `8` means Administrator.
|
||||
|
||||
Now you've created an Application but it will need some code in order for it to be online. Thats when Discordeno comes in handy!
|
||||
|
||||
> Make sure you store your tokens in a file that is NOT deployed by adding it to the .gitignore file. **Don't share your bot token with anybody.**
|
||||
|
||||
## Installation
|
||||
|
||||
You can install Discordeno by importing:
|
||||
```ts
|
||||
import Client from "https://x.nest.land/Discordeno@9.0.1/src/module/client.ts";
|
||||
```
|
||||
|
||||
## Example Usage
|
||||
|
||||
Starting with Discordeno is very simple, you can start from scratch without any boilerplates/frameworks: Add this snippet of code into a new TypeScript file:
|
||||
|
||||
```ts
|
||||
import StartBot, { sendMessage, Intents } from "https://x.nest.land/Discordeno@9.0.1/src/module/client.ts";
|
||||
import config from "./config.ts";
|
||||
|
||||
StartBot({
|
||||
token: config.token,
|
||||
intents: [Intents.GUILD_MESSAGES, Intents.GUILDS],
|
||||
eventHandlers: {
|
||||
ready: () => {
|
||||
console.log(`Logged!`);
|
||||
},
|
||||
messageCreate: (message) => {
|
||||
if (message.content === "!ping") {
|
||||
sendMessage(message.channelID, "Pong");
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Tutorials
|
||||
|
||||
Below you will find youtube playlists that display channels using Discordeno for their tutorials.
|
||||
|
||||
Web-Mystery Tutorials:
|
||||
- [Making a Discord bot with Deno and Discordeno](https://web-mystery.com/articles/making-discord-bot-deno-and-discordeno)
|
||||
- [Running a Discord bot written in Deno in Docker](https://web-mystery.com/articles/running-discord-bot-written-deno-docker)
|
||||
- YouTube Tutorials:
|
||||
- [Discordeno Bot Tutorials YouTube series](https://youtu.be/rIph9-BGsuQ)
|
||||
@@ -1,58 +0,0 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import config from '../config';
|
||||
|
||||
export default class HTML extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<html {...this.props.htmlAttributes} lang="en">
|
||||
<head>
|
||||
<meta charSet="utf-8" />
|
||||
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||||
{config.siteMetadata.ogImage ? (
|
||||
<meta property="og:image" content={config.siteMetadata.ogImage} />
|
||||
) : null}
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
{config.siteMetadata.ogImage ? (
|
||||
<meta property="twitter:image" content={config.siteMetadata.ogImage} />
|
||||
) : null}
|
||||
{config.siteMetadata.favicon ? (
|
||||
<link rel="shortcut icon" type="image/svg" href={config.siteMetadata.favicon} />
|
||||
) : null}
|
||||
<noscript key="noscript"></noscript>
|
||||
{this.props.headComponents}
|
||||
</head>
|
||||
<body {...this.props.bodyAttributes}>
|
||||
{this.props.preBodyComponents}
|
||||
<div key={`body`} id="___gatsby" dangerouslySetInnerHTML={{ __html: this.props.body }} />
|
||||
{this.props.postBodyComponents}
|
||||
<script
|
||||
defer
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
function navBarClose() {
|
||||
document.getElementById("navbar").classList.toggle("responsive");
|
||||
}
|
||||
document.addEventListener('click',function(e){
|
||||
if(e.target && e.target.tagName.toLowerCase() === 'a'){
|
||||
navBarClose();
|
||||
}
|
||||
});
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
HTML.propTypes = {
|
||||
htmlAttributes: PropTypes.object,
|
||||
headComponents: PropTypes.array,
|
||||
bodyAttributes: PropTypes.object,
|
||||
preBodyComponents: PropTypes.array,
|
||||
body: PropTypes.string,
|
||||
postBodyComponents: PropTypes.array,
|
||||
};
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
@@ -1,8 +1,4 @@
|
||||
---
|
||||
title: "Step By Step Guide"
|
||||
metaTitle: "Step By Step Guide | Discordeno"
|
||||
metaDescription: "This guide will help you learn every part of Discordeno, step by step to create your own bot as you wish."
|
||||
---
|
||||
# Step By Step Guide
|
||||
|
||||
## Understanding The Goals of This Guide
|
||||
|
||||
@@ -1,8 +1,4 @@
|
||||
---
|
||||
title: "Creating The Bot!"
|
||||
metaTitle: "Creating A Bot | Discordeno"
|
||||
metaDescription: "Let's create our very own bot with Discordeno!"
|
||||
---
|
||||
# Creating The Bot!
|
||||
|
||||
Discordeno will help make Discord bot development much easier. Don't worry, as you go through this guide it will make a lot more sense.
|
||||
|
||||
@@ -1,8 +1,4 @@
|
||||
---
|
||||
title: "Creating A Command"
|
||||
metaTitle: "Creating A Command | Discordeno"
|
||||
metaDescription: "Let's create our very first command with Discordeno!"
|
||||
---
|
||||
# Creating A Command
|
||||
|
||||
Really great job. Now, lets dive into trying to use some of the commands and try to make our very own command.
|
||||
|
||||
@@ -1,8 +1,4 @@
|
||||
---
|
||||
title: "Creating Events!"
|
||||
metaTitle: "Creating An Event | Discordeno"
|
||||
metaDescription: "Let's create our very own bot with Discordeno!"
|
||||
---
|
||||
# Creating Events!
|
||||
|
||||
Woah! You are almost half way done with understanding all of Discordeno. Amazing isn't it? Something you may have noticed in the last section was when the bot started up you could see a bunch of messages like `Loaded X Commands` and such. Let's jump into this part now and understand how event handling works in Discordeno.
|
||||
|
||||
@@ -1,8 +1,4 @@
|
||||
---
|
||||
title: "Creating Inhibitors!"
|
||||
metaTitle: "Creating An Inhibitor | Discordeno"
|
||||
metaDescription: "Let's create our very own bot with Discordeno!"
|
||||
---
|
||||
# Creating Inhibitors!
|
||||
|
||||
Woah! You are almost half way done with understanding all of Discordeno. Amazing isn't it? Something you may have noticed in the last section was there were some options that prevented some commands from running like `dmOnly` or the permission options. we created a setting to prevent the monitor from running in certain channels. What if we wanted to do prevent commands from happening? How would we prevent commands from running?
|
||||
|
||||
@@ -1,8 +1,4 @@
|
||||
---
|
||||
title: "Creating Languages!"
|
||||
metaTitle: "Creating A Language | Discordeno"
|
||||
metaDescription: "Let's create our very own bot with Discordeno!"
|
||||
---
|
||||
# Creating Languages!
|
||||
|
||||
Woot! You have mastered Discordeno inhibitors already. Now it's time to finally make our bot multi-lingual. Vàmanos!
|
||||
|
||||
@@ -1,8 +1,4 @@
|
||||
---
|
||||
title: "Creating Monitors!"
|
||||
metaTitle: "Creating A Monitor | Discordeno"
|
||||
metaDescription: "Let's create our very own bot with Discordeno!"
|
||||
---
|
||||
# Creating Monitors!
|
||||
|
||||
Holy bananza! You even got the entire languages complete. You are well on your way to mastering 23 different languages. Now we are going to down and dirty with monitors.
|
||||
|
||||
@@ -1,8 +1,4 @@
|
||||
---
|
||||
title: "Creating Tasks!"
|
||||
metaTitle: "Creating A Task | Discordeno"
|
||||
metaDescription: "Let's create our very own bot with Discordeno!"
|
||||
---
|
||||
# Creating Tasks
|
||||
|
||||
Phenomenal! Now that you have mastered monitors, let's move on to one of the final parts, Tasks. A lot of times, you will want to do something over and over again. To do this, you can use tasks. You could technically just do this with `setInterval` but, with tasks you gain a little more advantage like having reloadability. The functions that are run can be easily reloaded meaning, you don't need to restart your whole bot just for little change.
|
||||
|
||||
@@ -1,8 +1,4 @@
|
||||
---
|
||||
title: "Hosting Your Bot Online 24/7!"
|
||||
metaTitle: "Hosting Your Bot | Discordeno"
|
||||
metaDescription: "Let's create our very own bot with Discordeno!"
|
||||
---
|
||||
# Hosting Your Bot Online 24/7!
|
||||
|
||||
Once you feel that you are ready to get your bot to stay online 24/7, follow the guide below. This guide, is going to use [Hyper Expert](https://p.hyper.expert/aff.php?aff=125) as our hosting provider. You can use any you wish, but I recommend using [Hyper Expert](https://p.hyper.expert/aff.php?aff=125) for the following reasons.
|
||||
|
||||
@@ -1,151 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import Helmet from 'react-helmet';
|
||||
import { graphql } from 'gatsby';
|
||||
import MDXRenderer from 'gatsby-plugin-mdx/mdx-renderer';
|
||||
|
||||
import { Layout, Link } from '$components';
|
||||
import NextPrevious from '../components/NextPrevious';
|
||||
import config from '../../config';
|
||||
import { Edit, StyledHeading, StyledMainWrapper } from '../components/styles/Docs';
|
||||
|
||||
const forcedNavOrder = config.sidebar.forcedNavOrder;
|
||||
|
||||
export default class MDXRuntimeTest extends Component {
|
||||
render() {
|
||||
const { data } = this.props;
|
||||
|
||||
if (!data) {
|
||||
return null;
|
||||
}
|
||||
const {
|
||||
allMdx,
|
||||
mdx,
|
||||
site: {
|
||||
siteMetadata: { docsLocation, title },
|
||||
},
|
||||
} = data;
|
||||
|
||||
const gitHub = require('../components/images/github.svg');
|
||||
|
||||
const navItems = allMdx.edges
|
||||
.map(({ node }) => node.fields.slug)
|
||||
.filter(slug => slug !== '/')
|
||||
.sort()
|
||||
.reduce(
|
||||
(acc, cur) => {
|
||||
if (forcedNavOrder.find(url => url === cur)) {
|
||||
return { ...acc, [cur]: [cur] };
|
||||
}
|
||||
|
||||
let prefix = cur.split('/')[1];
|
||||
|
||||
if (config.gatsby && config.gatsby.trailingSlash) {
|
||||
prefix = prefix + '/';
|
||||
}
|
||||
|
||||
if (prefix && forcedNavOrder.find(url => url === `/${prefix}`)) {
|
||||
return { ...acc, [`/${prefix}`]: [...acc[`/${prefix}`], cur] };
|
||||
} else {
|
||||
return { ...acc, items: [...acc.items, cur] };
|
||||
}
|
||||
},
|
||||
{ items: [] }
|
||||
);
|
||||
|
||||
const nav = forcedNavOrder
|
||||
.reduce((acc, cur) => {
|
||||
return acc.concat(navItems[cur]);
|
||||
}, [])
|
||||
.concat(navItems.items)
|
||||
.map(slug => {
|
||||
if (slug) {
|
||||
const { node } = allMdx.edges.find(({ node }) => node.fields.slug === slug);
|
||||
|
||||
return { title: node.fields.title, url: node.fields.slug };
|
||||
}
|
||||
});
|
||||
|
||||
// meta tags
|
||||
const metaTitle = mdx.frontmatter.metaTitle;
|
||||
|
||||
const metaDescription = mdx.frontmatter.metaDescription;
|
||||
|
||||
let canonicalUrl = config.gatsby.siteUrl;
|
||||
|
||||
canonicalUrl =
|
||||
config.gatsby.pathPrefix !== '/' ? canonicalUrl + config.gatsby.pathPrefix : canonicalUrl;
|
||||
canonicalUrl = canonicalUrl + mdx.fields.slug;
|
||||
|
||||
return (
|
||||
<Layout {...this.props}>
|
||||
<Helmet>
|
||||
{metaTitle ? <title>{metaTitle}</title> : null}
|
||||
{metaTitle ? <meta name="title" content={metaTitle} /> : null}
|
||||
{metaDescription ? <meta name="description" content={metaDescription} /> : null}
|
||||
{metaTitle ? <meta property="og:title" content={metaTitle} /> : null}
|
||||
{metaDescription ? <meta property="og:description" content={metaDescription} /> : null}
|
||||
{metaTitle ? <meta property="twitter:title" content={metaTitle} /> : null}
|
||||
{metaDescription ? (
|
||||
<meta property="twitter:description" content={metaDescription} />
|
||||
) : null}
|
||||
<link rel="canonical" href={canonicalUrl} />
|
||||
</Helmet>
|
||||
<div className={'titleWrapper'}>
|
||||
<StyledHeading>{mdx.fields.title}</StyledHeading>
|
||||
<Edit className={'mobileView'}>
|
||||
{docsLocation && (
|
||||
<Link className={'gitBtn'} to={`${docsLocation}/${mdx.parent.relativePath}`}>
|
||||
<img src={gitHub} alt={'Github logo'} /> Edit on GitHub
|
||||
</Link>
|
||||
)}
|
||||
</Edit>
|
||||
</div>
|
||||
<StyledMainWrapper>
|
||||
<MDXRenderer>{mdx.body}</MDXRenderer>
|
||||
</StyledMainWrapper>
|
||||
<div className={'addPaddTopBottom'}>
|
||||
<NextPrevious mdx={mdx} nav={nav} />
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export const pageQuery = graphql`
|
||||
query($id: String!) {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
docsLocation
|
||||
}
|
||||
}
|
||||
mdx(fields: { id: { eq: $id } }) {
|
||||
fields {
|
||||
id
|
||||
title
|
||||
slug
|
||||
}
|
||||
body
|
||||
tableOfContents
|
||||
parent {
|
||||
... on File {
|
||||
relativePath
|
||||
}
|
||||
}
|
||||
frontmatter {
|
||||
metaTitle
|
||||
metaDescription
|
||||
}
|
||||
}
|
||||
allMdx {
|
||||
edges {
|
||||
node {
|
||||
fields {
|
||||
slug
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -1,44 +0,0 @@
|
||||
const config = require('../../config.js');
|
||||
|
||||
const pageQuery = `{
|
||||
pages: allMdx {
|
||||
edges {
|
||||
node {
|
||||
objectID: id
|
||||
fields {
|
||||
slug
|
||||
}
|
||||
headings {
|
||||
value
|
||||
}
|
||||
frontmatter {
|
||||
title
|
||||
metaDescription
|
||||
}
|
||||
excerpt(pruneLength: 50000)
|
||||
}
|
||||
}
|
||||
}
|
||||
}`;
|
||||
|
||||
const flatten = arr =>
|
||||
arr.map(({ node: { frontmatter, fields, ...rest } }) => ({
|
||||
...frontmatter,
|
||||
...fields,
|
||||
...rest,
|
||||
}));
|
||||
|
||||
const settings = { attributesToSnippet: [`excerpt:20`] };
|
||||
|
||||
const indexName = config.header.search ? config.header.search.indexName : '';
|
||||
|
||||
const queries = [
|
||||
{
|
||||
query: pageQuery,
|
||||
transformer: ({ data }) => flatten(data.pages.edges),
|
||||
indexName: `${indexName}`,
|
||||
settings,
|
||||
},
|
||||
];
|
||||
|
||||
module.exports = queries;
|
||||
3
package-lock.json
generated
Normal file
3
package-lock.json
generated
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"lockfileVersion": 1
|
||||
}
|
||||
Reference in New Issue
Block a user