diff --git a/docs/1001-install.md b/docs/1001-install.md index cfa0c21d..88ad7810 100644 --- a/docs/1001-install.md +++ b/docs/1001-install.md @@ -16,7 +16,8 @@ brew install dagger/tap/dagger If dagger is already installed, you can upgrade it using this command: ```shell -brew update; brew upgrade dagger +brew update +brew upgrade dagger ``` ## Option 2: Run a shell script diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 92290006..3e55821a 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -16,6 +16,7 @@ module.exports = { ], themeConfig: { sidebarCollapsible: true, + sidebarCollapsed: false, prism: { theme: require("prism-react-renderer/themes/okaidia"), }, @@ -23,8 +24,33 @@ module.exports = { logo: { alt: "Dagger Logo", src: "img/dagger-logo.png", - srcDark: "img/dagger_logo_dark.png", }, + items: [ + { + type: "search", + position: "right", + }, + { + position: "right", + label: "Discord", + href: "https://discord.gg/ufnyBtc8uY", + className: "header-discord-link", + "aria-label": "Discord community", + }, + { + position: "right", + label: "Github", + href: "https://github.com/dagger/dagger", + className: "header-github-link hide-target-icon", + "aria-label": "GitHub repository", + }, + { + position: "right", + label: "Schedule a demo", + href: "https://calendly.com/dagger-io/meet-the-dagger-team", + className: "button", + }, + ], }, algolia: { apiKey: "559dcddb4378b889baa48352394616ec", diff --git a/website/sidebars.js b/website/sidebars.js index 2a96878a..c07b2c8d 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -13,23 +13,6 @@ module.exports = { // By default, Docusaurus generates a sidebar from the docs folder structure tutorialSidebar: [ { type: 'autogenerated', dirName: '.' }, - { - type: 'category', - label: 'Community', - collapsed: false, - items: [ - { - type: 'link', - label: 'Github', - href: 'https://github.com/dagger/dagger' - }, - { - type: 'link', - label: 'Discord', - href: 'https://discord.gg/ufnyBtc8uY' - }, - ], - }, ], // But you can create a sidebar manually diff --git a/website/src/components/DocPageAuthentication.module.css b/website/src/components/DocPageAuthentication.module.css index 5fd0ada2..e0f16f4d 100644 --- a/website/src/components/DocPageAuthentication.module.css +++ b/website/src/components/DocPageAuthentication.module.css @@ -10,4 +10,9 @@ .btn__github { width: 240px !important; -} \ No newline at end of file + border-radius: 0 !important; +} + +.btn__github > div { + display: inline-flex !important; +} diff --git a/website/src/css/custom.scss b/website/src/css/custom.scss index bd962faa..6b2749f2 100644 --- a/website/src/css/custom.scss +++ b/website/src/css/custom.scss @@ -23,11 +23,12 @@ --ifm-color-primary-light: #fffef6; --ifm-color-primary-lighter: rgb(102, 212, 189); --ifm-color-primary-lightest: rgb(146, 224, 208); - --ifm-color-secondary: #f8fad8; + --ifm-color-secondary: #fefad8; --ifm-color-success: #fcc009; --ifm-color-info: #40b9bc; --ifm-color-warning: #ef7b1a; --ifm-color-danger: #be1d43; + --ifm-container-width-xl: 100%; --ifm-font-color-base: var(--ifm-color-primary-dark); --ifm-font-family-base: "Karla", sans-serif; --ifm-font-family-monospace: "Courier new", sans-serif; @@ -41,10 +42,9 @@ --ifm-menu-color-background-active: var(--ifm-menu-color-background-hover); --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,'); --ifm-navbar-height: 6rem; - --ifm-navbar-background-color: var(--ifm-color-primary-light); + --ifm-navbar-background-color: var(--ifm-color-primary-dark); --ifm-pagination-nav-border-radius: 0; --ifm-pre-padding: 2rem; - --doc-sidebar-width: 250px; --ifm-toc-border-color: transparent; --ifm-toc-link-color: var(--ifm-color-primary-dark); } @@ -110,7 +110,7 @@ code { &:hover { color: var(--ifm-color-primary); html[data-theme="dark"] & { - color: #fefad8; + color: var(--ifm-color-secondary); } } @@ -165,7 +165,7 @@ h1[class^="h1Heading"] { #__docusaurus { background-color: var(--ifm-color-primary-light); - padding-bottom: 3rem; + // padding-bottom: 3rem; html[data-theme="dark"] & { background: var(--ifm-color-primary-darker); @@ -179,52 +179,103 @@ h1[class^="h1Heading"] { padding: 0 var(--ifm-pre-padding); } +.button { + background: var(--ifm-color-secondary); + font-family: "Poppins", sans-serif; + font-size: 1rem; + font-style: normal; + font-weight: 700; + line-height: 1; + letter-spacing: 0em; + text-align: left; + padding: 1rem; + border: 0; + border-radius: 0; + + &:hover { + background: #ffffff; + cursor: pointer; + } + + &:active { + background: #131226; + color: var(--ifm-color-secondary); + } +} + /* navbar */ .navbar__brand { - height: 5rem; + height: 4rem; } .navbar { - max-width: 1366px; align-self: center; box-shadow: none; } -// sidebar +.navbar__item { + margin: 0 0.75rem; +} +.navbar__items--right > :last-child { + padding: 1rem; +} + +.react-toggle { + margin: 0 0.75rem; +} + +.header-discord-link, +.header-github-link { + width: 48px; + height: 48px; + padding: 0; + span { + display: none; + } +} + +.header-github-link { + background: url("/img/github-icon.svg"); +} + +.header-discord-link { + background: url("/img/discord-icon.svg"); +} + +.navbar .button svg { + display: none; +} + +/* sidebar */ @media (min-width: 997px) { aside[class^="docSidebarContainer"] { - width: 250px; - margin-right: 3rem; + width: 340px; div[class^="sidebar"] { - width: 250px; + width: 340px; } } } /* main */ .main-wrapper { - max-width: 1366px; align-self: center; width: 100%; } main[class^="docMainContainer"] { background: #ffffff; - box-shadow: 0px 4px 16px 4px #13122610; - border-radius: 2rem; - margin-top: 1rem; - padding-top: 2rem; - padding-left: 2rem; - padding-right: 2rem; + padding: 2rem; html[data-theme="dark"] & { - background: var(--ifm-color-primary); - box-shadow: 0px 4px 16px 4px #13122610; - border-radius: 2rem; - margin-top: 1rem; + background: var(--ifm-color-primary-dark); color: var(--ifm-color-primary-light); } + + .docItemContainer_node_modules-\@docusaurus-theme-classic-lib-next-theme-DocItem-styles-module { + max-width: 940px !important; + margin: auto; + } } /* table-of-contents */ @@ -299,28 +350,70 @@ button[class^="copyButton"] { /* menu */ .menu { - scrollbar-color: #f0efe7 transparent; -} + padding: 0 !important; -html[data-theme="dark"] .menu { - scrollbar-color: #3d6581 transparent; + & > ul > li:nth-child(1) > a:nth-child(1) { + padding-top: 2rem; + border-top: 0; + } + + & > ul > li > a:nth-child(1) { + background-color: var(--ifm-color-primary-light); + border-top: 1px solid; + border-bottom: 1px solid; + border-color: #f0efe7; + + html[data-theme="dark"] & { + background-color: var(--ifm-color-primary); + border-color: #65627b; + } + } + + & > ul > li + li > a:nth-child(1) { + border-top: 0; + } } .menu__list { - padding-top: 3.5rem; + background-color: var(--ifm-color-secondary); & > .menu__list-item > & { padding-top: 0; } + + .menu__list-item { + margin-top: 0; + } + html[data-theme="dark"] & { + background-color: var(--ifm-color-primary-dark); + } } .menu__link { border-radius: 0; + padding: 1rem; - &:focus, - &:active { - background-color: var(--ifm-color-primary-dark); - color: var(--ifm-color-primary-light); + & + .menu__list & { + padding-left: 2rem; + width: calc(100% - 1rem); + + &:hover, + &.active { + background-color: var(--ifm-color-primary-dark); + color: var(--ifm-color-primary-light); + font-weight: bold; + } + + html[data-theme="dark"] &:hover, + html[data-theme="dark"] &.active { + background-color: var(--ifm-color-secondary); + color: var(--ifm-color-primary-dark); + } + + &.menu__link--sublist:hover::after { + filter: invert(100%) sepia(94%) saturate(17%) hue-rotate(223deg) + brightness(104%) contrast(98%); + } } &--active:not(.menu__link--sublist) { @@ -350,14 +443,10 @@ html[data-theme="dark"] .menu { &.menu__link--sublist { color: var(--ifm-color-primary-dark); - - &:active, - &:focus { - background-color: var(--ifm-color-primary-light); - } + padding-right: 2rem; &:hover { - background-color: var(--ifm-menu-color-background-hover); + background-color: var(--ifm-color-primary-light); } html[data-theme="dark"] & { @@ -391,6 +480,19 @@ html[data-theme="dark"] .menu { } } +.DocSearch-Button { + margin-right: 2rem !important; + @media (min-width: 997px) { + width: 200px; + } + @media (min-width: 1160px) { + width: 350px; + } + html[data-theme="dark"] & { + background-color: white; + } +} + /* pagination */ .pagination-nav__label svg { vertical-align: middle; diff --git a/website/src/theme/Navbar/index.js b/website/src/theme/Navbar/index.js new file mode 100644 index 00000000..47808dd5 --- /dev/null +++ b/website/src/theme/Navbar/index.js @@ -0,0 +1,148 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ +import React, {useCallback, useState, useEffect} from 'react'; +import clsx from 'clsx'; +import SearchBar from '@theme/SearchBar'; +import Toggle from '@theme/Toggle'; +import useThemeContext from '@theme/hooks/useThemeContext'; +import {useThemeConfig} from '@docusaurus/theme-common'; +import useHideableNavbar from '@theme/hooks/useHideableNavbar'; +import useLockBodyScroll from '@theme/hooks/useLockBodyScroll'; +import useWindowSize, {windowSizes} from '@theme/hooks/useWindowSize'; +import NavbarItem from '@theme/NavbarItem'; +import Logo from '@theme/Logo'; +import IconMenu from '@theme/IconMenu'; +import styles from './styles.module.css'; // retrocompatible with v1 + +const DefaultNavItemPosition = 'right'; // If split links by left/right +// if position is unspecified, fallback to right (as v1) + +function splitNavItemsByPosition(items) { + const leftItems = items.filter( + (item) => (item.position ?? DefaultNavItemPosition) === 'left', + ); + const rightItems = items.filter( + (item) => (item.position ?? DefaultNavItemPosition) === 'right', + ); + return { + leftItems, + rightItems, + }; +} + +function Navbar() { + const { + navbar: {items, hideOnScroll, style}, + colorMode: {disableSwitch: disableColorModeSwitch}, + } = useThemeConfig(); + const [sidebarShown, setSidebarShown] = useState(false); + const {isDarkTheme, setLightTheme, setDarkTheme} = useThemeContext(); + const {navbarRef, isNavbarVisible} = useHideableNavbar(hideOnScroll); + useLockBodyScroll(sidebarShown); + const showSidebar = useCallback(() => { + setSidebarShown(true); + }, [setSidebarShown]); + const hideSidebar = useCallback(() => { + setSidebarShown(false); + }, [setSidebarShown]); + const onToggleChange = useCallback( + (e) => (e.target.checked ? setDarkTheme() : setLightTheme()), + [setLightTheme, setDarkTheme], + ); + const windowSize = useWindowSize(); + useEffect(() => { + if (windowSize === windowSizes.desktop) { + setSidebarShown(false); + } + }, [windowSize]); + const hasSearchNavbarItem = items.some((item) => item.type === 'search'); + const {leftItems, rightItems} = splitNavItemsByPosition(items); + const algoliaSearch = rightItems.shift() + return ( + + ); +} + +export default Navbar; diff --git a/website/src/theme/Navbar/styles.module.css b/website/src/theme/Navbar/styles.module.css new file mode 100644 index 00000000..9e4ab9b4 --- /dev/null +++ b/website/src/theme/Navbar/styles.module.css @@ -0,0 +1,20 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +@media screen and (max-width: 997px) { + .displayOnlyInLargeViewport { + display: none !important; + } +} + +.navbarHideable { + transition: transform var(--ifm-transition-fast) ease; +} + +.navbarHidden { + transform: translate3d(0, calc(-100% - 2px), 0); +} diff --git a/website/static/img/__dagger-logo.png b/website/static/img/__dagger-logo.png new file mode 100644 index 00000000..19723fb5 Binary files /dev/null and b/website/static/img/__dagger-logo.png differ diff --git a/website/static/img/dagger-logo.png b/website/static/img/dagger-logo.png index 19723fb5..4b09bb23 100644 Binary files a/website/static/img/dagger-logo.png and b/website/static/img/dagger-logo.png differ diff --git a/website/static/img/discord-icon.svg b/website/static/img/discord-icon.svg new file mode 100644 index 00000000..0085d6d1 --- /dev/null +++ b/website/static/img/discord-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/website/static/img/github-icon.svg b/website/static/img/github-icon.svg new file mode 100644 index 00000000..5f05d17d --- /dev/null +++ b/website/static/img/github-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/website/yarn.lock b/website/yarn.lock index b7c0b658..92cdf7d7 100644 --- a/website/yarn.lock +++ b/website/yarn.lock @@ -4862,6 +4862,18 @@ globby@^11.0.1, globby@^11.0.2, globby@^11.0.3, globby@^11.0.4: merge2 "^1.3.0" slash "^3.0.0" +globby@^11.0.4: + version "11.0.4" + resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.4.tgz#2cbaff77c2f2a62e71e9b2813a67b97a3a3001a5" + integrity sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg== + dependencies: + array-union "^2.1.0" + dir-glob "^3.0.1" + fast-glob "^3.1.1" + ignore "^5.1.4" + merge2 "^1.3.0" + slash "^3.0.0" + globby@^6.1.0: version "6.1.0" resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"