Skip to content

Commit fb7afc7

Browse files
New-dev0New-dev0
committed
docs: update docs theme
1 parent 06da88b commit fb7afc7

5 files changed

Lines changed: 370 additions & 97 deletions

File tree

‎docs/docusaurus.config.js‎

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// Note: type annotations allow type checking and IDEs autocompletion
33

44
const lightCodeTheme = require('prism-react-renderer/themes/github');
5-
const darkCodeTheme = require('prism-react-renderer/themes/vsDark');
5+
const darkCodeTheme = require('prism-react-renderer/themes/dracula');
66

77
const organizationName = "switchcollab";
88
const projectName = "Switch-Bots-Python-Library";
@@ -50,7 +50,9 @@ const config = {
5050
// // 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
5151
// },
5252
theme: {
53-
customCss: require.resolve('./src/css/custom.css'),
53+
customCss: [
54+
require.resolve('./src/css/custom.css'),
55+
],
5456
},
5557
}),
5658
],
@@ -59,6 +61,11 @@ const config = {
5961
themeConfig:
6062
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
6163
({
64+
colorMode: {
65+
defaultMode: 'dark',
66+
disableSwitch: false,
67+
respectPrefersColorScheme: true,
68+
},
6269
navbar: {
6370
title: 'SwiBots',
6471
logo: {
@@ -97,30 +104,22 @@ const config = {
97104
},
98105
],
99106
},
100-
// {
101-
// title: 'Community',
102-
// items: [
103-
// {
104-
// label: 'Stack Overflow',
105-
// href: 'https://stackoverflow.com/questions/tagged/docusaurus',
106-
// },
107-
// {
108-
// label: 'Discord',
109-
// href: 'https://discordapp.com/invite/docusaurus',
110-
// },
111-
// {
112-
// label: 'Twitter',
113-
// href: 'https://twitter.com/docusaurus',
114-
// },
115-
// ],
116-
// },
107+
{
108+
title: 'Community',
109+
items: [
110+
{
111+
label: 'Switch',
112+
href: 'https://switch.click/c/support',
113+
},
114+
{
115+
label: 'Twitter',
116+
href: 'https:/x.com/switch_pe',
117+
},
118+
],
119+
},
117120
{
118121
title: 'More',
119122
items: [
120-
// {
121-
// label: 'Blog',
122-
// to: '/blog',
123-
// },
124123
{
125124
label: 'GitHub',
126125
href: 'https://github.com/switchcollab/Switch-Bots-Python-Library',
@@ -132,7 +131,7 @@ const config = {
132131
],
133132
},
134133
],
135-
copyright: `Copyright © ${new Date().getFullYear()} Switch. Built with Docusaurus.`,
134+
// copyright: `Copyright © ${new Date().getFullYear()} Switch. Built with Docusaurus.`,
136135
},
137136
prism: {
138137
theme: lightCodeTheme,

‎docs/examples/echo-bot.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Creating Your First Bot: Echo Bot
2+
3+
In this example, we'll create a simple echo bot using SwiBots. This bot will respond to any message it receives by sending the same message back to the user.
4+
5+
## Prerequisites
6+
7+
Before you begin, make sure you have:
8+
9+
1. Installed SwiBots (`pip install swibots`)
10+
2. Obtained a bot token from the Switch platform
11+
12+
## The Code
13+
14+
Here's the complete code for our echo bot:
15+
16+
```python
17+
from swibots import Client, BotContext, MessageEvent
18+
19+
app = Client("YOUR_BOT_TOKEN")
20+
21+
@app.on_message()
22+
async def message_handler(ctx: BotContext[MessageEvent]):
23+
message = ctx.event.message
24+
await message.respond(f"Received: {message.message}")
25+
26+
27+
app.run()
28+
```
29+
30+
## Running the Bot
31+
32+
To run the bot, simply execute the script:
33+
34+
```bash
35+
python echo_bot.py
36+
```
37+
38+
## Testing the Bot

‎docs/src/css/custom.css‎

Lines changed: 44 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,53 @@
66

77
/* You can override the default Infima variables here. */
88
:root {
9-
--ifm-color-primary: #2e8555;
10-
--ifm-color-primary-dark: #29784c;
11-
--ifm-color-primary-darker: #277148;
12-
--ifm-color-primary-darkest: #205d3b;
13-
--ifm-color-primary-light: #33925d;
14-
--ifm-color-primary-lighter: #359962;
15-
--ifm-color-primary-lightest: #3cad6e;
9+
--ifm-color-primary: #6a4c93;
10+
--ifm-color-primary-dark: #5f4484;
11+
--ifm-color-primary-darker: #5a407d;
12+
--ifm-color-primary-darkest: #4a3567;
13+
--ifm-color-primary-light: #7554a2;
14+
--ifm-color-primary-lighter: #7a58a7;
15+
--ifm-color-primary-lightest: #8a6bb4;
1616
--ifm-code-font-size: 95%;
17-
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
17+
--docusaurus-highlighted-code-line-bg: rgba(106, 76, 147, 0.1);
1818
}
1919

2020
/* For readability concerns, you should choose a lighter palette in dark mode. */
2121
[data-theme='dark'] {
22-
--ifm-color-primary: #25c2a0;
23-
--ifm-color-primary-dark: #21af90;
24-
--ifm-color-primary-darker: #1fa588;
25-
--ifm-color-primary-darkest: #1a8870;
26-
--ifm-color-primary-light: #29d5b0;
27-
--ifm-color-primary-lighter: #32d8b4;
28-
--ifm-color-primary-lightest: #4fddbf;
29-
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
22+
--ifm-color-primary: #b39ddb;
23+
--ifm-color-primary-dark: #9f82d1;
24+
--ifm-color-primary-darker: #9574cc;
25+
--ifm-color-primary-darkest: #774ebb;
26+
--ifm-color-primary-light: #c7b8e5;
27+
--ifm-color-primary-lighter: #d1c6ea;
28+
--ifm-color-primary-lightest: #efe9f7;
29+
--docusaurus-highlighted-code-line-bg: rgba(179, 157, 219, 0.3);
30+
}
31+
32+
/* Additional cool styles */
33+
body {
34+
background-color: #f5f5f5;
35+
font-family: 'Roboto', sans-serif;
36+
}
37+
38+
[data-theme='dark'] body {
39+
background-color: #1a1a1a;
40+
}
41+
42+
.navbar {
43+
background: linear-gradient(90deg, var(--ifm-color-primary-dark), var(--ifm-color-primary-light));
44+
}
45+
46+
.footer {
47+
background-color: var(--ifm-color-primary-darkest);
48+
}
49+
50+
.button {
51+
border-radius: 25px;
52+
transition: all 0.3s ease;
53+
}
54+
55+
.button:hover {
56+
transform: translateY(-3px);
57+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
3058
}

‎docs/src/pages/custom.css‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
:root {
2+
--ifm-color-primary: #2e8555;
3+
--ifm-color-primary-dark: #29784c;
4+
--ifm-color-primary-darker: #277148;
5+
--ifm-color-primary-darkest: #205d3b;
6+
--ifm-color-primary-light: #33925d;
7+
--ifm-color-primary-lighter: #359962;
8+
--ifm-color-primary-lightest: #3cad6e;
9+
}
10+
11+
.margin-bottom--lg {
12+
margin-bottom: 2rem !important;
13+
}
14+
15+
.row {
16+
margin-bottom: -2rem;
17+
}
18+
19+
/* Improve typography */
20+
h1, h2, h3 {
21+
letter-spacing: -0.5px;
22+
}
23+
24+
/* Add margin to top columns */
25+
.features .row > div {
26+
margin-top: 2rem;
27+
transition: transform 0.3s ease-in-out;
28+
}
29+
30+
.features .row > div:hover {
31+
transform: translateY(-5px);
32+
}
33+
34+
/* Add margin to bottom buttons */
35+
.gettingStarted .buttons {
36+
margin-top: 2rem;
37+
}
38+
39+
/* Add space between buttons and margin to left and right */
40+
.gettingStarted .buttons .button:not(:last-child) {
41+
margin-right: 1rem;
42+
}
43+
44+
.gettingStarted .buttons .button {
45+
margin: 0.5rem;
46+
transition: transform 0.3s ease-in-out;
47+
}
48+
49+
.gettingStarted .buttons .button:hover {
50+
transform: translateY(-2px);
51+
}
52+
53+
/* Add margin bottom to the "Ready to dive in" section */
54+
.gettingStarted {
55+
margin-top: 4rem;
56+
margin-bottom: 6rem; /* Increased margin-bottom */
57+
background-color: var(--ifm-color-primary-lightest);
58+
padding: 4rem 0;
59+
}
60+
61+
/* Add margin top to the "SwiBots in Action" section */
62+
.examples {
63+
margin-top: 4rem;
64+
}
65+
66+
/* Add margin to header buttons */
67+
.heroBanner .buttons .button {
68+
margin: 0.5rem;
69+
transition: transform 0.3s ease-in-out;
70+
}
71+
72+
.heroBanner .buttons .button:hover {
73+
transform: translateY(-2px);
74+
}
75+
76+
/* Enhance code blocks */
77+
.codeExample {
78+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
79+
border-radius: 8px;
80+
overflow: hidden;
81+
transition: box-shadow 0.3s ease-in-out;
82+
}
83+
84+
.codeExample:hover {
85+
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
86+
}
87+
88+
.codeExample h3 {
89+
background-color: var(--ifm-color-primary);
90+
color: white;
91+
padding: 1rem;
92+
margin: 0;
93+
}
94+
95+
.codeExample pre {
96+
margin: 0;
97+
border-radius: 0;
98+
}
99+
100+
.main-wrapper {
101+
margin-bottom: 3rem;
102+
}
103+
104+
/* Fix footer overlap */
105+
.footer {
106+
padding-bottom: 2rem;
107+
}
108+
109+
.footer__links {
110+
margin-bottom: 2rem;
111+
}
112+
113+
.footer__col {
114+
margin-bottom: 1rem;
115+
}

0 commit comments

Comments
 (0)