Update config files

slackapi · Nov 1, 2024 · 9cb4610 · 9cb4610
1 parent 2bebf5b
commit 9cb4610
Show file tree

Hide file tree

Showing 3 changed files with 178 additions and 128 deletions.
diff --git a/docs/footerConfig.js b/docs/footerConfig.js
@@ -16,4 +16,4 @@ const footer = {
   ],
 };
 
-module.exports = footer;
+module.exports = footer;
diff --git 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;
+module.exports = navbar;
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
@@ -1,74 +1,77 @@
-/**
- * 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 {
+: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 */
 table tr:nth-child(even) {
   background-color: inherit;
 }
 
-p a {
-  text-decoration: underline;
+/* 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);
+  --docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 30%);
+  --ifm-color-primary: var(--slack-cloud-blue);
   --ifm-navbar-background-color: var(--aubergine);
-  --ifm-footer-background-color: var(--aubergine);
-  --slack-link: var(--slack-blue)
+  --ifm-footer-background-color: var(--aubergine) !important;
+  footer a {
+    color: white;
+  }
 }
 
-html[data-theme="dark"] {
-  --docusaurus-highlighted-code-line-bg: rgb(0 0 0 / 30%);
+/* bolding ToC for contrast */
+.table-of-contents__link--active {
+  font-weight: bold;
 }
 
-/* bolding Toc for contrast */
-.table-of-contents__link--active {
+/* 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;
 }
 
-/* only uncomment for home page -- colors white space on v tall screens */
-/* .main-wrapper {
-  background: var(--horchata);
-} */
+/* 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_"] {
@@ -77,8 +80,7 @@ div[class^="announcementBar_"] {
   background: var(--horchata);
 }
 
-/* navbar */
-
+/* navbar github link */
 .navbar-github-link {
   width: 32px;
   height: 32px;
@@ -106,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);
 }