diff --git a/docs-website/docusaurus.config.js b/docs-website/docusaurus.config.js index 9bdba5f317..c1ecf0283c 100644 --- a/docs-website/docusaurus.config.js +++ b/docs-website/docusaurus.config.js @@ -12,13 +12,11 @@ module.exports = { organizationName: "datahub-project", // Usually your GitHub org/user name. projectName: "datahub", // Usually your repo name. staticDirectories: ["static", "genStatic"], - stylesheets: [ - "https://fonts.googleapis.com/css2?family=Manrope:wght@400;600&display=swap", - ], + stylesheets: ["https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&display=swap"], noIndex: isSaas, customFields: { isSaas: isSaas, - markpromptProjectKey: process.env.DOCUSAURUS_MARKPROMPT_PROJECT_KEY || 'IeF3CUFCUQWuouZ8MP5Np9nES52QAtaA', + markpromptProjectKey: process.env.DOCUSAURUS_MARKPROMPT_PROJECT_KEY || "IeF3CUFCUQWuouZ8MP5Np9nES52QAtaA", }, themeConfig: { ...(!isSaas && { @@ -35,12 +33,8 @@ module.exports = { title: null, logo: { alt: "DataHub Logo", - src: `img/${ - isSaas ? "acryl" : "datahub" - }-logo-color-light-horizontal.svg`, - srcDark: `img/${ - isSaas ? "acryl" : "datahub" - }-logo-color-dark-horizontal.svg`, + src: `img/${isSaas ? "acryl" : "datahub"}-logo-color-light-horizontal.svg`, + srcDark: `img/${isSaas ? "acryl" : "datahub"}-logo-color-dark-horizontal.svg`, }, items: [ { @@ -50,7 +44,8 @@ module.exports = { position: "right", }, { - href: "/integrations", + to: "/integrations", + activeBasePath: "integrations", label: "Integrations", position: "right", }, @@ -70,8 +65,8 @@ module.exports = { position: "right", }, { - type: 'docsVersionDropdown', - position: 'right', + type: "docsVersionDropdown", + position: "right", dropdownActiveClassDisabled: true, }, { @@ -201,9 +196,7 @@ module.exports = { blog: false, theme: { customCss: [ - isSaas - ? require.resolve("./src/styles/acryl.scss") - : require.resolve("./src/styles/datahub.scss"), + isSaas ? require.resolve("./src/styles/acryl.scss") : require.resolve("./src/styles/datahub.scss"), require.resolve("./src/styles/global.scss"), require.resolve("./src/styles/sphinx.scss"), require.resolve("./src/styles/config-table.scss"), @@ -217,10 +210,7 @@ module.exports = { ], ], plugins: [ - [ - "@docusaurus/plugin-ideal-image", - { quality: 100, sizes: [320, 640, 1280, 1440, 1600] }, - ], + ["@docusaurus/plugin-ideal-image", { quality: 100, sizes: [320, 640, 1280, 1440, 1600] }], "docusaurus-plugin-sass", [ "docusaurus-graphql-plugin", diff --git a/docs-website/src/components/Feedback/styles.module.scss b/docs-website/src/components/Feedback/styles.module.scss index b0fa3d7d1b..ee22f6b055 100644 --- a/docs-website/src/components/Feedback/styles.module.scss +++ b/docs-website/src/components/Feedback/styles.module.scss @@ -37,11 +37,11 @@ } .feedbackText { + font-family: var(--ifm-font-family-base); width: 100%; border: var(--ifm-hr-border-color) 1px solid; border-radius: 0.4rem; padding: 0.4rem; - font-family: "Manrope", sans-serif; } .feedbackButton { diff --git a/docs-website/src/components/MarkpromptHelp/markprompthelp.module.scss b/docs-website/src/components/MarkpromptHelp/markprompthelp.module.scss index 270877cd04..0d874cad11 100644 --- a/docs-website/src/components/MarkpromptHelp/markprompthelp.module.scss +++ b/docs-website/src/components/MarkpromptHelp/markprompthelp.module.scss @@ -325,7 +325,6 @@ button { padding-left: 1.5714286em; } .MarkpromptAnswer ol > li::marker { - font-weight: 400; color: var(--markprompt-foreground); } .MarkpromptAnswer ul > li::marker { @@ -454,7 +453,6 @@ button { background-color: var(--markprompt-muted); border: 1px solid var(--markprompt-border); overflow-x: auto; - font-weight: 400; font-size: 0.8571429em; line-height: 1.6666667; margin-top: 1.6666667em; diff --git a/docs-website/src/pages/_components/Hero/hero.module.scss b/docs-website/src/pages/_components/Hero/hero.module.scss index c2103bb078..6e4a623f46 100644 --- a/docs-website/src/pages/_components/Hero/hero.module.scss +++ b/docs-website/src/pages/_components/Hero/hero.module.scss @@ -74,3 +74,26 @@ margin-right: 0.5rem; } } + +.quickstartContent { + text-align: center; + padding: 2rem 0; + height: 100%; + margin: 2rem 0; + background: #34394d; + border-radius: var(--ifm-card-border-radius); +} + +.quickstartTitle { + color: #fafafa; +} + +.quickstartSubtitle { + font-size: 1.1rem; + color: gray; +} + +.quickstartCodeblock { + text-align: left; + padding: 0 20vh; +} diff --git a/docs-website/src/pages/_components/Hero/index.js b/docs-website/src/pages/_components/Hero/index.js index 22b406dce0..ffa298b27a 100644 --- a/docs-website/src/pages/_components/Hero/index.js +++ b/docs-website/src/pages/_components/Hero/index.js @@ -34,12 +34,11 @@ const Hero = ({}) => { complexity of your data ecosystem.

- Built with ❤️ by{" "} - {" "} + Built with ❤️ by {" "} Acryl Data {" "} - and LinkedIn. + and LinkedIn.

Get Started → @@ -51,10 +50,10 @@ const Hero = ({}) => { DataHub Flow Diagram -
-

Get Started Now

-

Run the following command to get started with DataHub.

-
+
+

Get Started Now

+

Run the following command to get started with DataHub.

+
python3 -m pip install --upgrade pip wheel setuptools
python3 -m pip install --upgrade acryl-datahub
diff --git a/docs-website/src/pages/_components/Section/section.module.scss b/docs-website/src/pages/_components/Section/section.module.scss index 4b68ce5533..7a39a60b6f 100644 --- a/docs-website/src/pages/_components/Section/section.module.scss +++ b/docs-website/src/pages/_components/Section/section.module.scss @@ -9,7 +9,6 @@ .sectionTitle { font-size: 2.5rem; margin-bottom: 3rem; - font-weight: normal; text-align: center; } diff --git a/docs-website/src/pages/docs/_components/DropDownFilter/search.module.scss b/docs-website/src/pages/docs/_components/DropDownFilter/search.module.scss index 17e5f22490..2ae0f5c849 100644 --- a/docs-website/src/pages/docs/_components/DropDownFilter/search.module.scss +++ b/docs-website/src/pages/docs/_components/DropDownFilter/search.module.scss @@ -74,7 +74,6 @@ } .searchResultItemHeading { - font-weight: 400; margin-bottom: 0; } diff --git a/docs-website/src/pages/docs/_components/GuideList/guidelist.module.scss b/docs-website/src/pages/docs/_components/GuideList/guidelist.module.scss index a8f279e74e..46b1b01408 100644 --- a/docs-website/src/pages/docs/_components/GuideList/guidelist.module.scss +++ b/docs-website/src/pages/docs/_components/GuideList/guidelist.module.scss @@ -16,6 +16,9 @@ display: block; margin-bottom: 0.25rem; } + strong { + font-weight: 600; + } span { font-size: 0.875rem; line-height: 1.25em; diff --git a/docs-website/src/pages/docs/_components/GuideList/index.jsx b/docs-website/src/pages/docs/_components/GuideList/index.jsx index 3a47e1691a..9d4b50b5f5 100644 --- a/docs-website/src/pages/docs/_components/GuideList/index.jsx +++ b/docs-website/src/pages/docs/_components/GuideList/index.jsx @@ -19,7 +19,7 @@ const GuideList = ({ title, content, seeMoreLink }) => content?.length > 0 ? (
-

{title}

+

{title}

{content.map((props, idx) => ( diff --git a/docs-website/src/pages/docs/_components/QuickLinkCard/quicklinkcard.module.scss b/docs-website/src/pages/docs/_components/QuickLinkCard/quicklinkcard.module.scss index cf239ff864..4fbbc4583d 100644 --- a/docs-website/src/pages/docs/_components/QuickLinkCard/quicklinkcard.module.scss +++ b/docs-website/src/pages/docs/_components/QuickLinkCard/quicklinkcard.module.scss @@ -20,6 +20,10 @@ display: block; margin-bottom: 0.25rem; } + strong { + font-weight: 600; + } + span { font-size: 0.875rem; line-height: 1.25em; diff --git a/docs-website/src/pages/docs/_components/SearchBar/search.module.scss b/docs-website/src/pages/docs/_components/SearchBar/search.module.scss index 6faaf19c7e..d85607b08e 100644 --- a/docs-website/src/pages/docs/_components/SearchBar/search.module.scss +++ b/docs-website/src/pages/docs/_components/SearchBar/search.module.scss @@ -91,7 +91,6 @@ } .searchResultItemHeading { - font-weight: 400; margin-bottom: 0; } diff --git a/docs-website/src/styles/acryl.scss b/docs-website/src/styles/acryl.scss index 8eb9b37583..8bb25ca28c 100644 --- a/docs-website/src/styles/acryl.scss +++ b/docs-website/src/styles/acryl.scss @@ -7,4 +7,7 @@ --ifm-color-primary-light: #13beb0; --ifm-color-primary-lighter: #14c7b8; --ifm-color-primary-lightest: #16e1d0; + + // Custom + --ifm-color-primary-opaque: rgba(17, 173, 160, 0.1); } diff --git a/docs-website/src/styles/datahub.scss b/docs-website/src/styles/datahub.scss index a41359c24b..8d8f0bdd6d 100644 --- a/docs-website/src/styles/datahub.scss +++ b/docs-website/src/styles/datahub.scss @@ -7,4 +7,6 @@ --ifm-color-primary-light: #349dff; --ifm-color-primary-lighter: #42a4ff; --ifm-color-primary-lightest: #6cb8ff; + + --ifm-color-primary-opaque: rgba(24, 144, 255, 0.1); } diff --git a/docs-website/src/styles/global.scss b/docs-website/src/styles/global.scss index 013e9fb9f0..55a54876b4 100644 --- a/docs-website/src/styles/global.scss +++ b/docs-website/src/styles/global.scss @@ -7,16 +7,23 @@ /* You can override the default Infima variables here. */ :root { - font-family: "Manrope", sans-serif; + // Global --ifm-background-color: #ffffff; + --ifm-global-spacing: 1rem; /* Typography */ - --ifm-heading-font-weight: 600; - --ifm-font-weight-semibold: 600; + --ifm-font-size-base: 95%; + --ifm-heading-font-weight: 700; --ifm-code-font-size: 0.9em; --ifm-heading-color: #000000; + --ifm-heading-font-family: "Manrope", sans-serif; + --ifm-font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", + "Segoe UI Emoji", "Segoe UI Symbol"; + --ifm-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* Buttons */ --ifm-button-border-radius: 1000em; + --ifm-button-font-weight: 600; /* Navbar */ --ifm-navbar-background-color: var(--ifm-background-color); @@ -30,6 +37,7 @@ --ifm-hr-border-width: 1px 0 0 0; --ifm-hr-border-color: #e3e3e3; --ifm-hr-background-color: #e3e3e3; + /* More Colors */ --ifm-hero-background-color: var(--ifm-background-color); --ifm-background-surface-color: #fafafa; @@ -37,6 +45,19 @@ /* Cards */ --ifm-card-background-color: --ifm-background-color; --ifm-card-border-radius: calc(var(--ifm-global-radius) * 1.5); + + /* Menu */ + --ifm-menu-link-padding-vertical: 0.6rem; + --ifm-menu-link-padding-horizontal: 1rem; + --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,'); + --ifm-menu-color-background-hover: var(--ifm-color-primary-opaque); + --ifm-menu-color-background-active: var(--ifm-color-primary-opaque); + + /* TOC */ + --ifm-toc-padding-vertical: 1.25rem; + + /* Breadcrumbs */ + --ifm-breadcrumb-item-background-active: var(--ifm-color-primary-opaque); } html[data-theme="dark"] { @@ -49,16 +70,29 @@ html[data-theme="dark"] { .button--primary { color: #fff; } + + .invert-on-dark { + filter: invert(1); + } } -h1 { - font-weight: 400; +/* Main Docs Content Area */ + +main { + padding-top: 1rem; } -html[data-theme="dark"] .invert-on-dark { - filter: invert(1); +.markdown, +main > h1 { + margin-top: 1rem; } +[class*="docItemCol"] { + padding: 0 2rem; +} + +/* Custom Utility */ + .row--centered { align-items: center; } @@ -67,6 +101,8 @@ html[data-theme="dark"] .invert-on-dark { padding: 5vh 0; } +/* Announcement Bar */ + div[class^="announcementBar"] { z-index: calc(var(--ifm-z-index-fixed) - 1); div { @@ -106,6 +142,8 @@ div[class^="announcementBar"] { } } +/** Navbar */ + @media only screen and (max-width: 1050px) { .navbar__toggle { display: inherit; @@ -158,16 +196,7 @@ div[class^="announcementBar"] { } } -.footer { - .footer__copyright { - text-align: left; - font-size: 0.8em; - opacity: 0.5; - } - &.footer--dark { - --ifm-footer-background-color: #000000; - } -} +/* Misc */ .button { white-space: initial; @@ -192,64 +221,93 @@ div[class^="announcementBar"] { } } -.hero { - padding: 5vh 0; -} - -.hero__subtitle { - font-size: 1.25em; - margin: 1rem auto 3rem; - max-width: 800px; -} -.hero__content { - text-align: center; - padding: 2rem 0; - height: 100%; -} - -.quickstart__content { - text-align: center; - padding: 2rem 0; - height: 100%; - margin: 2rem 0; - background: #34394d; - border-radius: var(--ifm-card-border-radius); -} - -.quickstart__title { - color: #fafafa; -} - -.quickstart__subtitle { - font-size: 1.1rem; - color: gray; -} - -.quickstart__codeblock { - text-align: left; - padding: 0 20vh; -} - -.theme-doc-sidebar-menu ul li.saasOnly a.menu__link { - &:after { - content: ""; - display: block; - width: 20px; - height: 20px; - flex-shrink: 0; - margin-right: auto; - margin-left: 10px; +.footer { + .footer__copyright { + text-align: left; + font-size: 0.8em; opacity: 0.5; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' focusable='false' data-icon='cloud' width='1em' height='1em' fill='currentColor' aria-hidden='true'%3E%3Cpath d='M811.4 418.7C765.6 297.9 648.9 212 512.2 212S258.8 297.8 213 418.6C127.3 441.1 64 519.1 64 612c0 110.5 89.5 200 199.9 200h496.2C870.5 812 960 722.5 960 612c0-92.7-63.1-170.7-148.6-193.3zm36.3 281a123.07 123.07 0 01-87.6 36.3H263.9c-33.1 0-64.2-12.9-87.6-36.3A123.3 123.3 0 01140 612c0-28 9.1-54.3 26.2-76.3a125.7 125.7 0 0166.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0152.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10c54.3 14.5 92.1 63.8 92.1 120 0 33.1-12.9 64.3-36.3 87.7z'%3E%3C/path%3E%3C/svg%3E"); - background-repeat: no-repeat; - background-position: 50% 50%; - background-size: 20px 20px; - [data-theme="dark"] & { - filter: invert(1); - } + } + &.footer--dark { + --ifm-footer-background-color: #000000; } } +/* Hero */ + +.hero { + padding: 5vh 0; + + .hero__subtitle { + font-size: 1.25em; + margin: 1rem auto 3rem; + max-width: 800px; + + img { + vertical-align: middle; + margin-top: -0.3em; + } + } + .hero__content { + text-align: center; + padding: 2rem 0; + height: 100%; + } +} + +/* Sidebar Menu */ + +.menu .theme-doc-sidebar-menu { + ul li.saasOnly a.menu__link { + &:after { + content: ""; + display: block; + width: 20px; + height: 20px; + flex-shrink: 0; + margin-right: auto; + margin-left: 10px; + opacity: 0.5; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' focusable='false' data-icon='cloud' width='1em' height='1em' fill='currentColor' aria-hidden='true'%3E%3Cpath d='M811.4 418.7C765.6 297.9 648.9 212 512.2 212S258.8 297.8 213 418.6C127.3 441.1 64 519.1 64 612c0 110.5 89.5 200 199.9 200h496.2C870.5 812 960 722.5 960 612c0-92.7-63.1-170.7-148.6-193.3zm36.3 281a123.07 123.07 0 01-87.6 36.3H263.9c-33.1 0-64.2-12.9-87.6-36.3A123.3 123.3 0 01140 612c0-28 9.1-54.3 26.2-76.3a125.7 125.7 0 0166.1-43.7l37.9-9.9 13.9-36.6c8.6-22.8 20.6-44.1 35.7-63.4a245.6 245.6 0 0152.4-49.9c41.1-28.9 89.5-44.2 140-44.2s98.9 15.3 140 44.2c19.9 14 37.5 30.8 52.4 49.9 15.1 19.3 27.1 40.7 35.7 63.4l13.8 36.5 37.8 10c54.3 14.5 92.1 63.8 92.1 120 0 33.1-12.9 64.3-36.3 87.7z'%3E%3C/path%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: 20px 20px; + [data-theme="dark"] & { + filter: invert(1); + } + } + } + + .theme-doc-sidebar-item-category-level-1 .menu__link { + font-weight: 400; + } + + .theme-doc-sidebar-item-category-level-1 .menu__link--active { + font-weight: 600; + } + + .theme-doc-sidebar-item-category-level-1 > div > a:first-child { + color: var(--ifm-navbar-link-color); + font-weight: 600; + padding: calc(var(--ifm-menu-link-padding-vertical) + 0.2rem) var(--ifm-menu-link-padding-horizontal); + } + .theme-doc-sidebar-item-category-level-1 > div > a.menu__link--active { + color: var(--ifm-navbar-link-color); + font-weight: 600; + } +} + +/* TOC */ +.table-of-contents { + padding-left: 1.5rem; + font-size: 0.9rem; + line-height: 1rem; + .table-of-contents__link--active { + font-weight: 600; + } +} + +/* Search */ + [data-theme="light"] .DocSearch { /* --docsearch-primary-color: var(--ifm-color-primary); */ /* --docsearch-text-color: var(--ifm-font-color-base); */ @@ -285,18 +343,3 @@ div[class^="announcementBar"] { --docsearch-footer-background: var(--ifm-background-surface-color); --docsearch-key-gradient: linear-gradient(-26.5deg, var(--ifm-color-emphasis-200) 0%, var(--ifm-color-emphasis-100) 100%); } - -.theme-doc-sidebar-item-category-level-1 > div > a:first-child { - color: var(--ifm-navbar-link-color); - font-size: 17px; -} - -.theme-doc-sidebar-item-category-level-1 > div > a.menu__link--active { - color: var(--ifm-menu-color-active); - font-size: 17px; -} - -/* Increase padding for levels greater than 1 */ -[class^="theme-doc-sidebar-item"][class*="-level-"]:not(.theme-doc-sidebar-item-category-level-1) { - padding-left: 8px; -} diff --git a/docs-website/static/img/acryl-logo-transparent-mark.svg b/docs-website/static/img/acryl-logo-transparent-mark.svg new file mode 100644 index 0000000000..87c9904baa --- /dev/null +++ b/docs-website/static/img/acryl-logo-transparent-mark.svg @@ -0,0 +1 @@ + \ No newline at end of file