Skip to content

Commit d197701

Browse files
slackapi[bot]zimeg
slackapi[bot]
and
zimeg
authored
Update config files (#1586)
Co-authored-by: slackapi[bot] <186980925+slackapi[bot]@users.noreply.github.com> Co-authored-by: @zimeg <[email protected]>
1 parent f48eb2a commit d197701

File tree

3 files changed

+180
-145
lines changed

3 files changed

+180
-145
lines changed

‎docs/footerConfig.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
const footer = {
2-
links: [
3-
{
4-
items: [
5-
{
6-
html: `
2+
links: [
3+
{
4+
items: [
5+
{
6+
html: `
77
<div style="display: flex; gap: 20px; max-width: 50%">
88
<a href="https://slack.com/terms-of-service/user">Terms of Service</a>
99
<a href="https://slack.com/trust/privacy/privacy-policy">Privacy Information</a>
1010
</div>
1111
©2024 Slack Technologies, LLC, a Salesforce company. All rights reserved. Various trademarks held by their respective owners.
1212
`,
13-
},
14-
],
15-
},
16-
],
13+
},
14+
],
15+
},
16+
],
1717
};
1818

1919
module.exports = footer;

‎docs/navbarConfig.js‎

Lines changed: 85 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,89 @@
11
const navbar = {
2-
title: "Slack Developer Tools",
3-
logo: {
4-
src: "img/slack-logo.svg",
5-
},
6-
items: [
7-
{
8-
type: "dropdown",
9-
label: "Bolt",
10-
position: "left",
11-
items: [
12-
{
13-
label: "Java",
14-
to: "https://tools.slack.dev/java-slack-sdk/guides/bolt-basics",
15-
target: "_self",
16-
},
17-
{
18-
label: "JavaScript",
19-
to: "https://tools.slack.dev/bolt-js",
20-
target: "_self",
21-
},
22-
{
23-
label: "Python",
24-
to: "https://tools.slack.dev/bolt-python",
25-
target: "_self",
26-
},
27-
],
28-
},
29-
{
30-
type: "dropdown",
31-
label: "SDKs",
32-
position: "left",
33-
items: [
34-
{
35-
label: "Java Slack SDK",
36-
to: "https://tools.slack.dev/java-slack-sdk/",
37-
target: "_self",
38-
},
39-
{
40-
label: "Node Slack SDK",
41-
to: "https://tools.slack.dev/node-slack-sdk/",
42-
target: "_self",
43-
},
44-
{
45-
label: "Python Slack SDK",
46-
to: "https://tools.slack.dev/python-slack-sdk/",
47-
target: "_self",
48-
},
49-
{
50-
label: "Deno Slack SDK",
51-
to: "https://api.slack.com/automation/quickstart",
52-
target: "_self",
53-
},
54-
],
55-
},
56-
{
57-
type: "dropdown",
58-
label: "Community",
59-
position: "left",
60-
items: [
61-
{
62-
label: "Community tools",
63-
to: "https://tools.slack.dev/community-tools",
64-
target: "_self",
65-
},
66-
{
67-
label: "Slack Community",
68-
to: "https://slackcommunity.com/",
69-
target: "_self",
70-
},
71-
],
72-
},
73-
{
74-
to: "https://api.slack.com/docs",
75-
label: "API Docs",
76-
target: "_self",
77-
},
78-
{
79-
"aria-label": "GitHub Repository",
80-
className: "navbar-github-link",
81-
href: "https://github.com/slackapi",
82-
position: "right",
83-
target: "_self",
84-
},
85-
],
2+
title: 'Slack Developer Tools',
3+
logo: {
4+
src: 'img/slack-logo.svg',
5+
href: 'https://tools.slack.dev',
6+
},
7+
items: [
8+
{
9+
type: 'dropdown',
10+
label: 'Bolt',
11+
position: 'left',
12+
items: [
13+
{
14+
label: 'Java',
15+
to: 'https://tools.slack.dev/java-slack-sdk/guides/bolt-basics',
16+
target: '_self',
17+
},
18+
{
19+
label: 'JavaScript',
20+
to: 'https://tools.slack.dev/bolt-js',
21+
target: '_self',
22+
},
23+
{
24+
label: 'Python',
25+
to: 'https://tools.slack.dev/bolt-python',
26+
target: '_self',
27+
},
28+
],
29+
},
30+
{
31+
type: 'dropdown',
32+
label: 'SDKs',
33+
position: 'left',
34+
items: [
35+
{
36+
label: 'Java Slack SDK',
37+
to: 'https://tools.slack.dev/java-slack-sdk/',
38+
target: '_self',
39+
},
40+
{
41+
label: 'Node Slack SDK',
42+
to: 'https://tools.slack.dev/node-slack-sdk/',
43+
target: '_self',
44+
},
45+
{
46+
label: 'Python Slack SDK',
47+
to: 'https://tools.slack.dev/python-slack-sdk/',
48+
target: '_self',
49+
},
50+
{
51+
label: 'Deno Slack SDK',
52+
to: 'https://api.slack.com/automation/quickstart',
53+
target: '_self',
54+
},
55+
],
56+
},
57+
{
58+
type: 'dropdown',
59+
label: 'Community',
60+
position: 'left',
61+
items: [
62+
{
63+
label: 'Community tools',
64+
to: 'https://tools.slack.dev/community-tools',
65+
target: '_self',
66+
},
67+
{
68+
label: 'Slack Community',
69+
to: 'https://slackcommunity.com/',
70+
target: '_self',
71+
},
72+
],
73+
},
74+
{
75+
to: 'https://api.slack.com/docs',
76+
label: 'API Docs',
77+
target: '_self',
78+
},
79+
{
80+
'aria-label': 'GitHub Repository',
81+
className: 'navbar-github-link',
82+
href: 'https://github.com/slackapi',
83+
position: 'right',
84+
target: '_self',
85+
},
86+
],
8687
};
8788

8889
module.exports = navbar;

‎docs/src/css/custom.css‎

Lines changed: 86 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,72 @@
1-
/**
2-
* Any CSS included here will be global. The classic template
3-
* bundles Infima by default. Infima is a CSS framework designed to
4-
* work well for content-centric websites.
5-
*/
6-
71
:root {
82
/* set hex colors here pls */
93
--aubergine: #4a154b;
10-
114
/* aubergine-active is used in light mode.
125
use something like #853c8c if you use as a link vs black text ( 3:1 contr) */
136
--aubergine-active: #7c3085;
14-
15-
/* aubergine-light is used in dark mode. #b681b5 is another one. i just made both up */
16-
--aubergine-light: #ce70cc;
17-
187
/* horchata is that beige color we use a lot */
198
--horchata: #f4ede4;
20-
21-
/* slack-blue is 36C5F0. used for dark-mode links */
22-
--slack-link: #36c5f0;
23-
--slack-blue: #36c5f0;
9+
/* cloud blue from slack.dev. used for dark-mode links */
10+
--slack-cloud-blue: #1ab9ff;
2411
/* slack marketing color for links 1264A3. used for light-mode links */
2512
--slack-dark-blue: #1264a3;
26-
27-
--grey: #868686;
28-
--white: #FFFFFF;
13+
--dim: #eef2f6;
2914
}
3015

3116
/* resets striped tables that hurt me eyes */
3217
table tr:nth-child(even) {
3318
background-color: inherit;
3419
}
3520

36-
p a {
37-
text-decoration: underline;
38-
color: var(--slack-link);
21+
/* changing the links to blue for accessibility */
22+
p a, .markdown a {
23+
color: var(--slack-cloud-blue);
3924
}
4025

41-
.markdown a {
42-
color: var(--slack-link);
43-
text-decoration: underline;
26+
a:hover {
27+
color: var(--slack-cloud-blue);
4428
}
4529

4630
/* adjusting for light and dark modes */
4731
[data-theme="light"] {
32+
--docusaurus-highlighted-code-line-bg: var(--dim);
4833
--ifm-color-primary: var(--aubergine-active);
4934
--ifm-footer-background-color: var(--horchata);
50-
--slack-link: var(--slack-dark-blue);
35+
--ifm-footer-color: black;
36+
--slack-cloud-blue: var(--slack-dark-blue);
37+
--ifm-table-stripe-background: var(--horchata);
5138
}
5239

5340
[data-theme="dark"] {
54-
--ifm-color-primary: var(--aubergine-light);
55-
--ifm-navbar-background-color: var(--aubergine);
56-
--ifm-footer-background-color: var(--aubergine);
57-
--slack-link: var(--slack-blue);
58-
}
59-
60-
html[data-theme="dark"] {
6141
--docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 30%);
42+
--ifm-color-primary: var(--slack-cloud-blue);
43+
--ifm-navbar-background-color: var(--aubergine) !important;
44+
--ifm-footer-background-color: var(--aubergine) !important;
45+
--ifm-footer-color: white;
6246
}
6347

64-
/* bolding Toc for contrast */
48+
/* bolding ToC for contrast */
6549
.table-of-contents__link--active {
6650
font-weight: bold;
6751
}
6852

69-
/* only uncomment for home page -- colors white space on v tall screens */
70-
/* .main-wrapper {
71-
background: var(--horchata);
72-
} */
53+
/* removing ToC line */
54+
.table-of-contents__left-border {
55+
border-left: none !important;
56+
}
57+
58+
/* increasing name of SDK in sidebar */
59+
.sidebar-title {
60+
font-size: 1.25em; /* Adjust the size as needed */
61+
font-weight: bold;
62+
color: #000;
63+
}
64+
65+
/* removing sidebar line and adding space to match ToC */
66+
.theme-doc-sidebar-container {
67+
border-right: none !important;
68+
margin-right: 2rem;
69+
}
7370

7471
/* announcement bar up top */
7572
div[class^="announcementBar_"] {
@@ -78,17 +75,7 @@ div[class^="announcementBar_"] {
7875
background: var(--horchata);
7976
}
8077

81-
/* navbar */
82-
83-
.sidebar-item-overview a {
84-
font-size: 1.2em; /* Adjust size as needed */
85-
font-weight: bold;
86-
}
87-
88-
html[data-theme='light'] .sidebar-item-overview a {
89-
--ifm-menu-color: #000;
90-
}
91-
78+
/* navbar github link */
9279
.navbar-github-link {
9380
width: 32px;
9481
height: 32px;
@@ -116,8 +103,55 @@ html[data-theme="dark"] .navbar-github-link::before {
116103
no-repeat;
117104
}
118105

119-
.sidebar-title {
120-
font-size: 1.25em; /* Adjust the size as needed */
121-
font-weight: bold;
122-
color: #000;
106+
/* Delineate tab blocks */
107+
.tabs-container {
108+
border: 1px solid var(--ifm-color-primary); /* Adjust the color and thickness as needed */
109+
border-radius: 5px; /* To give rounded corners */
110+
padding: 0.5em; /* To add spacing inside the tab */
111+
}
112+
113+
/* Docs code bubbles */
114+
[data-theme="light"] {
115+
--code-link-background: #CFE9FE;
116+
--code-link-text: rgb(21, 50, 59);
117+
118+
--method-link-background: #CDEFC4;
119+
--method-link-text: rgb(0, 41, 0);
120+
121+
--scope-link-background: #FBF3E0;
122+
--scope-link-text: rgb(63, 46, 0);
123+
124+
--event-link-background: #FDDDE3;
125+
--event-link-text: rgb(74, 21, 75);
126+
}
127+
128+
[data-theme="dark"] {
129+
--code-link-text: white;
130+
--method-link-text: white;
131+
--scope-link-text: white;
132+
--event-link-text: white;
133+
--code-link-background: #1AB9FF50;
134+
--method-link-background: #41B65850;
135+
--scope-link-background: #FCC00350;
136+
--event-link-background: #E3066A50;
137+
}
138+
139+
a code {
140+
background-color: var(--code-link-background);
141+
color: var(--code-link-text);
142+
}
143+
144+
a[href^="https://api.slack.com/methods"] > code {
145+
background-color: var(--method-link-background);
146+
color: var(--method-link-text);
147+
}
148+
149+
a[href^="https://api.slack.com/scopes"] > code {
150+
background-color: var(--scope-link-background);
151+
color: var(--scope-link-text);
152+
}
153+
154+
a[href^="https://api.slack.com/events"] > code {
155+
background-color: var(--event-link-background);
156+
color: var(--event-link-text);
123157
}

0 commit comments

Comments
 (0)