From 1b17f1ab9f0dfe3efebd1d6d5abdffbd8fdbb357 Mon Sep 17 00:00:00 2001 From: "slackapi[bot]" <186980925+slackapi[bot]@users.noreply.github.com> Date: Fri, 1 Nov 2024 22:52:48 +0000 Subject: [PATCH] Update config files --- docs/footerConfig.js | 18 ++--- docs/navbarConfig.js | 169 ++++++++++++++++++++-------------------- docs/src/css/custom.css | 143 +++++++++++++++++++++------------- 3 files changed, 185 insertions(+), 145 deletions(-) diff --git a/docs/footerConfig.js b/docs/footerConfig.js index 9f8af804..e3e10c57 100644 --- a/docs/footerConfig.js +++ b/docs/footerConfig.js @@ -1,19 +1,19 @@ const footer = { - links: [ - { - items: [ - { - html: ` + links: [ + { + items: [ + { + html: `
Terms of Service Privacy Information
©2024 Slack Technologies, LLC, a Salesforce company. All rights reserved. Various trademarks held by their respective owners. `, - }, - ], - }, - ], + }, + ], + }, + ], }; module.exports = footer; diff --git a/docs/navbarConfig.js b/docs/navbarConfig.js index c41016e3..e9deaab7 100644 --- a/docs/navbarConfig.js +++ b/docs/navbarConfig.js @@ -1,88 +1,89 @@ const navbar = { - title: "Slack Developer Tools", - logo: { - src: "img/slack-logo.svg", - }, - items: [ - { - type: "dropdown", - label: "Bolt", - position: "left", - items: [ - { - label: "Java", - to: "https://tools.slack.dev/java-slack-sdk/guides/bolt-basics", - target: "_self", - }, - { - label: "JavaScript", - to: "https://tools.slack.dev/bolt-js", - target: "_self", - }, - { - label: "Python", - to: "https://tools.slack.dev/bolt-python", - target: "_self", - }, - ], - }, - { - type: "dropdown", - label: "SDKs", - position: "left", - items: [ - { - label: "Java Slack SDK", - to: "https://tools.slack.dev/java-slack-sdk/", - target: "_self", - }, - { - label: "Node Slack SDK", - to: "https://tools.slack.dev/node-slack-sdk/", - target: "_self", - }, - { - label: "Python Slack SDK", - to: "https://tools.slack.dev/python-slack-sdk/", - target: "_self", - }, - { - label: "Deno Slack SDK", - to: "https://api.slack.com/automation/quickstart", - target: "_self", - }, - ], - }, - { - type: "dropdown", - label: "Community", - position: "left", - items: [ - { - label: "Community tools", - to: "https://tools.slack.dev/community-tools", - target: "_self", - }, - { - label: "Slack Community", - to: "https://slackcommunity.com/", - target: "_self", - }, - ], - }, - { - to: "https://api.slack.com/docs", - label: "API Docs", - target: "_self", - }, - { - "aria-label": "GitHub Repository", - className: "navbar-github-link", - href: "https://github.com/slackapi", - position: "right", - target: "_self", - }, - ], + title: 'Slack Developer Tools', + logo: { + src: 'img/slack-logo.svg', + href: 'https://tools.slack.dev', + }, + items: [ + { + type: 'dropdown', + label: 'Bolt', + position: 'left', + items: [ + { + label: 'Java', + to: 'https://tools.slack.dev/java-slack-sdk/guides/bolt-basics', + target: '_self', + }, + { + label: 'JavaScript', + to: 'https://tools.slack.dev/bolt-js', + target: '_self', + }, + { + label: 'Python', + to: 'https://tools.slack.dev/bolt-python', + target: '_self', + }, + ], + }, + { + type: 'dropdown', + label: 'SDKs', + position: 'left', + items: [ + { + label: 'Java Slack SDK', + to: 'https://tools.slack.dev/java-slack-sdk/', + target: '_self', + }, + { + label: 'Node Slack SDK', + to: 'https://tools.slack.dev/node-slack-sdk/', + target: '_self', + }, + { + label: 'Python Slack SDK', + to: 'https://tools.slack.dev/python-slack-sdk/', + target: '_self', + }, + { + label: 'Deno Slack SDK', + to: 'https://api.slack.com/automation/quickstart', + target: '_self', + }, + ], + }, + { + type: 'dropdown', + label: 'Community', + position: 'left', + items: [ + { + label: 'Community tools', + to: 'https://tools.slack.dev/community-tools', + target: '_self', + }, + { + label: 'Slack Community', + to: 'https://slackcommunity.com/', + target: '_self', + }, + ], + }, + { + to: 'https://api.slack.com/docs', + label: 'API Docs', + target: '_self', + }, + { + 'aria-label': 'GitHub Repository', + className: 'navbar-github-link', + href: 'https://github.com/slackapi', + position: 'right', + target: '_self', + }, + ], }; module.exports = navbar; diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index be9fbdc1..00a89c0c 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -1,31 +1,16 @@ -/** - * Any CSS included here will be global. The classic template - * bundles Infima by default. Infima is a CSS framework designed to - * work well for content-centric websites. - */ - :root { /* set hex colors here pls */ --aubergine: #4a154b; - /* aubergine-active is used in light mode. use something like #853c8c if you use as a link vs black text ( 3:1 contr) */ --aubergine-active: #7c3085; - - /* aubergine-light is used in dark mode. #b681b5 is another one. i just made both up */ - --aubergine-light: #ce70cc; - /* horchata is that beige color we use a lot */ --horchata: #f4ede4; - - /* slack-blue is 36C5F0. used for dark-mode links */ - --slack-link: #36c5f0; - --slack-blue: #36c5f0; + /* cloud blue from slack.dev. used for dark-mode links */ + --slack-cloud-blue: #1ab9ff; /* slack marketing color for links 1264A3. used for light-mode links */ --slack-dark-blue: #1264a3; - - --grey: #868686; - --white: #FFFFFF; + --dim: #eef2f6; } /* resets striped tables that hurt me eyes */ @@ -33,43 +18,60 @@ table tr:nth-child(even) { background-color: inherit; } -p a { - text-decoration: underline; - color: var(--slack-link); +/* changing the links to blue for accessibility */ +p a, .markdown a { + color: var(--slack-cloud-blue); } -.markdown a { - color: var(--slack-link); - text-decoration: underline; +a:hover { + color: var(--slack-cloud-blue); } /* adjusting for light and dark modes */ [data-theme="light"] { + --docusaurus-highlighted-code-line-bg: var(--dim); + --slack-cloud-blue: var(--slack-dark-blue); --ifm-color-primary: var(--aubergine-active); --ifm-footer-background-color: var(--horchata); - --slack-link: var(--slack-dark-blue); + --ifm-footer-color: black; + --ifm-table-stripe-background: var(--horchata); + footer a { + color: black; + } } [data-theme="dark"] { - --ifm-color-primary: var(--aubergine-light); - --ifm-navbar-background-color: var(--aubergine); - --ifm-footer-background-color: var(--aubergine); - --slack-link: var(--slack-blue); -} - -html[data-theme="dark"] { --docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 30%); + --ifm-color-primary: var(--slack-cloud-blue); + --ifm-navbar-background-color: var(--aubergine) !important; + --ifm-footer-background-color: var(--aubergine) !important; + footer a { + color: white; + } } -/* bolding Toc for contrast */ +/* bolding ToC for contrast */ .table-of-contents__link--active { font-weight: bold; } -/* only uncomment for home page -- colors white space on v tall screens */ -/* .main-wrapper { - background: var(--horchata); -} */ +/* removing ToC line */ +.table-of-contents__left-border { + border-left: none !important; +} + +/* increasing name of SDK in sidebar */ +.sidebar-title { + font-size: 1.25em; /* Adjust the size as needed */ + font-weight: bold; + color: #000; +} + +/* removing sidebar line and adding space to match ToC */ +.theme-doc-sidebar-container { + border-right: none !important; + margin-right: 2rem; +} /* announcement bar up top */ div[class^="announcementBar_"] { @@ -78,17 +80,7 @@ div[class^="announcementBar_"] { background: var(--horchata); } -/* navbar */ - -.sidebar-item-overview a { - font-size: 1.2em; /* Adjust size as needed */ - font-weight: bold; -} - -html[data-theme='light'] .sidebar-item-overview a { - --ifm-menu-color: #000; -} - +/* navbar github link */ .navbar-github-link { width: 32px; height: 32px; @@ -116,8 +108,55 @@ html[data-theme="dark"] .navbar-github-link::before { no-repeat; } -.sidebar-title { - font-size: 1.25em; /* Adjust the size as needed */ - font-weight: bold; - color: #000; +/* Delineate tab blocks */ +.tabs-container { + border: 1px solid var(--ifm-color-primary); /* Adjust the color and thickness as needed */ + border-radius: 5px; /* To give rounded corners */ + padding: 0.5em; /* To add spacing inside the tab */ +} + +/* Docs code bubbles */ +[data-theme="light"] { + --code-link-background: #CFE9FE; + --code-link-text: rgb(21, 50, 59); + + --method-link-background: #CDEFC4; + --method-link-text: rgb(0, 41, 0); + + --scope-link-background: #FBF3E0; + --scope-link-text: rgb(63, 46, 0); + + --event-link-background: #FDDDE3; + --event-link-text: rgb(74, 21, 75); +} + +[data-theme="dark"] { + --code-link-text: white; + --method-link-text: white; + --scope-link-text: white; + --event-link-text: white; + --code-link-background: #1AB9FF50; + --method-link-background: #41B65850; + --scope-link-background: #FCC00350; + --event-link-background: #E3066A50; +} + +a code { + background-color: var(--code-link-background); + color: var(--code-link-text); +} + +a[href^="https://api.slack.com/methods"] > code { + background-color: var(--method-link-background); + color: var(--method-link-text); +} + +a[href^="https://api.slack.com/scopes"] > code { + background-color: var(--scope-link-background); + color: var(--scope-link-text); +} + +a[href^="https://api.slack.com/events"] > code { + background-color: var(--event-link-background); + color: var(--event-link-text); } \ No newline at end of file