Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Syncing config files with Deno Slack SDK and Slack CLI docs #2373

Merged
merged 1 commit into from
Dec 18, 2024
Merged

Docs: Syncing config files with Deno Slack SDK and Slack CLI docs #2373

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions docs/navbarConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,15 +49,20 @@ const navbar = {
},
{
label: 'Deno Slack SDK',
to: 'https://api.slack.com/automation/quickstart',
to: 'https://tools.slack.dev/deno-slack-sdk/',
target: '_self',
},
],
},
{
to: 'https://tools.slack.dev/slack-cli',
label: 'Slack CLI',
target: '_self',
},
{
type: 'dropdown',
label: 'Community',
position: 'left',
position: 'right',
items: [
{
label: 'Community tools',
Expand Down
278 changes: 254 additions & 24 deletions docs/src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,85 @@
:root {
--ifm-font-size-base: 15px;

/* set hex colors here pls */
--dim: #eef2f6;

--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-background: #552555;
--aubergine-dark: #2c0134;

--aubergine-active: #7c3085;
/* horchata is that beige color we use a lot */
--aubergine-active-70: #7c308570;
--aubergine-active-50: #7c308550;
--aubergine-active-30: #7c308530;

--horchata: #f4ede4;
/* cloud blue from slack.dev. used for dark-mode links */

--slack-red: #e3066a;
--slack-red-70: #e3066a70;
--slack-red-50: #e3066a50;
--slack-red-30: #e3066a30;
--slack-red-20: #e3066a20;

--slack-yellow: #fcc003;
--slack-yellow-70: #fcc00370;
--slack-yellow-50: #fcc00350;
--slack-yellow-30: #fcc00330;
--slack-yellow-20: #fcc00320;

--slack-green: #41b658;
--slack-green-70: #41b65870;
--slack-green-50: #41b65850;
--slack-green-30: #41b65830;
--slack-green-20: #41b65820;

--slack-blue: #1ab9ff;
--slack-blue-70: #1ab9ff70;
--slack-blue-50: #1ab9ff70;
--slack-blue-30: #1ab9ff30;
--slack-blue-20: #1ab9ff20;

/* used for dark-mode links */
--slack-cloud-blue: #1ab9ff;
/* slack marketing color for links 1264A3. used for light-mode links */
/* slack marketing color used for light-mode links */
--slack-dark-blue: #1264a3;
--dim: #eef2f6;

/* used for functions */
--unofficial-orange: #e36606;
--unofficial-orange-70: #e3660670;
--unofficial-orange-50: #e3660650;
--unofficial-orange-30: #e3660630;

/* turns opacity into flat colors for bubbles on top of things */
--slack-yellow-70-flat: #fcc00370;

--slack-yellow-30-on-white: #feecb3;
--slack-green-30-on-white: #c6e9cc;
--slack-red-30-on-white: #f6b4d2;
--slack-blue-30-on-white: #baeaff;
--unofficial-orange-30-on-white: #f6d1b4;
--aubergine-active-30-on-white: #d7c0da;
}

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

h1 {
font-size: 2.5rem;
}

/* changing the links to blue for accessibility */
p a,
.markdown a {
color: var(--slack-cloud-blue);
text-decoration: none;
}

p a,
.markdown a:hover {
text-decoration: underline;
}

a:hover {
Expand All @@ -32,10 +90,9 @@ a:hover {
[data-theme="light"] {
--docusaurus-highlighted-code-line-bg: var(--dim);
--ifm-color-primary: var(--aubergine-active);
--ifm-footer-background-color: var(--horchata);
--ifm-footer-color: black;
--ifm-footer-background-color: white;
--slack-cloud-blue: var(--slack-dark-blue);
--ifm-table-stripe-background: var(--horchata);
--reference-section-color: var(--horchata);
}

[data-theme="dark"] {
Expand All @@ -46,6 +103,46 @@ a:hover {
--ifm-footer-color: white;
}

.alert--warning {
--ifm-alert-background-color: var(--slack-yellow-30);
--ifm-alert-border-color: var(--slack-yellow);
--ifm-alert-background-color-highlight: var(--slack-yellow-30);
}

.alert--info {
--ifm-alert-background-color: var(--slack-blue-30);
--ifm-alert-border-color: var(--slack-blue);
/* --ifm-alert-background-color-highlight: var(--slack-blue-30); */
}

.alert--danger {
--ifm-alert-background-color: var(--slack-red-30);
--ifm-alert-border-color: var(--slack-red);
}

.alert--success {
--ifm-alert-background-color: var(--slack-green-30);
--ifm-alert-border-color: var(--slack-green);
}

.footer {
font-size: 80%;
padding-bottom: 0rem;
}

.footer__items a {
color: inherit;
}

.footer .container {
margin: 0;
}

/* adjusting size */
.table-of-contents__link {
font-size: 1rem;
}

/* bolding ToC for contrast */
.table-of-contents__link--active {
font-weight: bold;
Expand All @@ -56,11 +153,30 @@ a:hover {
border-left: none !important;
}

/* increasing name of SDK in sidebar */
/* increasing name of site in sidebar */
.sidebar-title {
font-size: 1.25em; /* Adjust the size as needed */
/* padding-bottom: 0.5rem;
font-size: 1.25em; */
font-weight: bold;
color: #000;
}

.theme-doc-sidebar-item-link hr {
margin: 1rem;
}

.sidebar-sdk-title {
/* margin: 0.5rem 0; */
padding: 0.5rem;
/* border-radius: 4px; */
border-bottom: .5px solid grey;
}

.theme-doc-sidebar-item-category-level-1 .menu__link {
font-weight: bold;
}

.theme-doc-sidebar-item-category-level-1 .menu__list-item .menu__link {
font-weight: normal;
}

/* removing sidebar line and adding space to match ToC */
Expand Down Expand Up @@ -106,35 +222,48 @@ html[data-theme="dark"] .navbar-github-link::before {

/* 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 */
border: 1px solid var(--ifm-color-primary);
border-radius: 5px;
padding: 0.5em;
}

/* Docs code bubbles */
[data-theme="light"] {
--code-link-background: #cfe9fe;
--contrast-color: black;
--code-link-background: var(--slack-blue-30);
--code-link-text: rgb(21, 50, 59);

--method-link-background: #cdefc4;
--method-link-background: var(--slack-green-30-on-white);
--method-link-text: rgb(0, 41, 0);

--scope-link-background: #fbf3e0;
--scope-link-background: var(--slack-yellow-30-on-white);
--scope-link-text: rgb(63, 46, 0);

--event-link-background: #fddde3;
--event-link-text: rgb(74, 21, 75);
--event-link-background: var(--slack-red-30-on-white);
--event-link-text: rgb(63, 0, 24);

--function-link-background: var(--unofficial-orange-30-on-white);
--function-link-text: rgb(75, 35, 0);

--command-link-background: var(--aubergine-active-30-on-white);
--command-link-text: rgb(75, 0, 75);
}

[data-theme="dark"] {
--contrast-color: white;
--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;
--function-link-text: white;
--command-link-text: white;

--code-link-background: var(--slack-blue-70);
--method-link-background: var(--slack-green-70);
--scope-link-background: var(--slack-yellow-70);
--event-link-background: var(--slack-red-70);
--command-link-background: var(--aubergine-active);
--function-link-background: var(--unofficial-orange-70);
}

a code {
Expand All @@ -156,3 +285,104 @@ a[href^="https://api.slack.com/events"] > code {
background-color: var(--event-link-background);
color: var(--event-link-text);
}

a[href^="/deno-slack-sdk/reference/slack-functions/"] > code {
background-color: var(--function-link-background);
color: var(--function-link-text);
}

a[href^="/deno-slack-sdk/reference/connector-functions/"] > code {
background-color: var(--function-link-background);
color: var(--function-link-text);
}

a[href^="/slack-cli/reference/commands"] > code {
background-color: var(--command-link-background);
color: var(--command-link-text);
}

.facts-section {
background-color: var(--slack-green-20) !important;
}

.auth-section {
background-color: var(--slack-red-20) !important;
}

.inputs-section {
background-color: var(--slack-blue-20) !important;
}

.functions-section {
border-radius: 6px;
padding: 1rem;
margin-bottom: 2rem;
}

.scope-list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

.scope-item {
display: inline-block;
}

.functions-section .type {
text-align: right;
}

.param-required-section {
padding-top: 1rem;
margin-bottom: 1rem;
}

.param-container {
border-top: 0.5px solid;
padding-top: 1rem;
padding-bottom: 1rem;
}

.param-container:last-child {
padding-bottom: 0;
}

.param-top-row {
display: flex;
align-items: center;
margin-bottom: 1rem;
}

/* left-align param name */
.param-top-row .name {
flex: 1;
}

/* right-align Required and Type */
.param-top-row .required,
.param-top-row .type {
margin-left: auto;
text-align: right;
}

/* add space between Required and Type */
.param-top-row .required {
margin-left: 10px;
}

.info-row {
display: flex;
align-items: center;
margin-bottom: 1rem;
}

.info-key {
flex: 0 0 10rem;
align-items: center;
}

/* hides next and previous */
.pagination-nav__link {
display: none;
}
Loading