Merge pull request #886 from slumbering/website-ui

Website UI

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

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",

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

website/src/components/DocPageAuthentication.module.css

@@ -10,4 +10,9 @@
 
 .btn__github {
   width: 240px !important;
-}
+  border-radius: 0 !important;
+}
+
+.btn__github > div {
+  display: inline-flex !important;
+}

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,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M3.318 9.128a24.776 24.776 0 004.224-3.993.842.842 0 011.32.026c1.227 1.618 2.107 3.387 3.831 4.556.889.6-.159 1.9-1.044 1.3A14.369 14.369 0 018.14 7a30.457 30.457 0 01-3.829 3.463c-.845.671-1.834-.67-.993-1.335z" fill="%23131226" /></svg>');
   --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;

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 (
+    <nav
+      ref={navbarRef}
+      className={clsx('navbar', 'navbar--fixed-top', {
+        'navbar--dark': style === 'dark',
+        'navbar--primary': style === 'primary',
+        'navbar-sidebar--show': sidebarShown,
+        [styles.navbarHideable]: hideOnScroll,
+        [styles.navbarHidden]: hideOnScroll && !isNavbarVisible,
+      })}>
+      <div className="navbar__inner">
+        <div className="navbar__items">
+          {items != null && items.length !== 0 && (
+            <button
+              aria-label="Navigation bar toggle"
+              className="navbar__toggle clean-btn"
+              type="button"
+              tabIndex={0}
+              onClick={showSidebar}
+              onKeyDown={showSidebar}>
+              <IconMenu />
+            </button>
+          )}
+          <Logo
+            className="navbar__brand"
+            imageClassName="navbar__logo"
+            titleClassName="navbar__title"
+          />
+          {leftItems.map((item, i) => (
+            <NavbarItem {...item} key={i} />
+          ))}
+        </div>
+        <div className="navbar__items navbar__items--right">
+          <NavbarItem {...algoliaSearch} key={999} />
+          {!disableColorModeSwitch && (
+            <Toggle
+              className={styles.displayOnlyInLargeViewport}
+              checked={isDarkTheme}
+              onChange={onToggleChange}
+            />
+          )}
+          {rightItems.map((item, i) => (
+            <NavbarItem {...item} key={i} />
+          ))}
+          {!hasSearchNavbarItem && <SearchBar />}
+        </div>
+      </div>
+      <div
+        role="presentation"
+        className="navbar-sidebar__backdrop"
+        onClick={hideSidebar}
+      />
+      <div className="navbar-sidebar">
+        <div className="navbar-sidebar__brand">
+          <Logo
+            className="navbar__brand"
+            imageClassName="navbar__logo"
+            titleClassName="navbar__title"
+            onClick={hideSidebar}
+          />
+          {!disableColorModeSwitch && sidebarShown && (
+            <Toggle checked={isDarkTheme} onChange={onToggleChange} />
+          )}
+        </div>
+        <div className="navbar-sidebar__items">
+          <div className="menu">
+            <ul className="menu__list">
+              {items.map((item, i) => (
+                <NavbarItem
+                  mobile
+                  {...item} // TODO fix typing
+                  onClick={hideSidebar}
+                  key={i}
+                />
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+export default Navbar;

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);
+}

website/static/img/discord-icon.svg

@@ -0,0 +1,10 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M35.0894 13.2264C33.0498 12.2826 30.8626 11.5872 28.5759 11.1889C28.5342 11.1812 28.4926 11.2004 28.4712 11.2389C28.1899 11.7434 27.8783 12.4016 27.6601 12.919C25.2005 12.5476 22.7536 12.5476 20.3444 12.919C20.1262 12.3901 19.8033 11.7434 19.5208 11.2389C19.4993 11.2017 19.4577 11.1825 19.4161 11.1889C17.1305 11.5859 14.9434 12.2813 12.9026 13.2264C12.8849 13.2341 12.8698 13.2469 12.8597 13.2635C8.71119 19.5141 7.57473 25.6111 8.13224 31.6326C8.13476 31.662 8.15116 31.6902 8.17386 31.7081C10.9109 33.7353 13.5623 34.966 16.1644 35.7817C16.206 35.7945 16.2501 35.7791 16.2766 35.7446C16.8922 34.8968 17.4409 34.003 17.9113 33.063C17.9391 33.0079 17.9126 32.9426 17.8558 32.9208C16.9855 32.5879 16.1568 32.1819 15.3596 31.7209C15.2966 31.6838 15.2915 31.5928 15.3495 31.5493C15.5173 31.4225 15.6851 31.2906 15.8453 31.1574C15.8743 31.1331 15.9146 31.128 15.9487 31.1433C21.1857 33.5547 26.8554 33.5547 32.0306 31.1433C32.0647 31.1267 32.1051 31.1318 32.1353 31.1561C32.2955 31.2893 32.4633 31.4225 32.6323 31.5493C32.6903 31.5928 32.6865 31.6838 32.6235 31.7209C31.8263 32.1909 30.9976 32.5879 30.126 32.9196C30.0693 32.9413 30.044 33.0079 30.0718 33.063C30.5523 34.0016 31.101 34.8955 31.7052 35.7433C31.7304 35.7791 31.7758 35.7945 31.8175 35.7817C34.4322 34.966 37.0835 33.7353 39.8206 31.7081C39.8446 31.6902 39.8597 31.6633 39.8622 31.6338C40.5294 24.6724 38.7447 18.6254 35.131 13.2648C35.1221 13.2469 35.107 13.2341 35.0894 13.2264ZM18.6934 27.9661C17.1167 27.9661 15.8175 26.5063 15.8175 24.7134C15.8175 22.9206 17.0915 21.4607 18.6934 21.4607C20.3078 21.4607 21.5944 22.9334 21.5692 24.7134C21.5692 26.5063 20.2952 27.9661 18.6934 27.9661ZM29.3263 27.9661C27.7497 27.9661 26.4505 26.5063 26.4505 24.7134C26.4505 22.9206 27.7244 21.4607 29.3263 21.4607C30.9408 21.4607 32.2274 22.9334 32.2022 24.7134C32.2022 26.5063 30.9408 27.9661 29.3263 27.9661Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="32" height="25" fill="white" transform="translate(8 11)"/>
+</clipPath>
+</defs>
+</svg>

website/static/img/github-icon.svg

@@ -0,0 +1,10 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 8.99995C20.1978 8.99611 16.5185 10.3376 13.6215 12.7839C10.7244 15.2302 8.79893 18.6216 8.19016 22.3501C7.58138 26.0787 8.32907 29.9007 10.2992 33.1314C12.2694 36.362 15.3332 38.7901 18.9417 39.9804C19.7373 40.1268 20.0319 39.6292 20.0319 39.2096C20.0319 38.79 20.0319 37.8338 20.0319 36.5067C15.5826 37.4825 14.6397 34.3796 14.6397 34.3796C14.3432 33.4179 13.7133 32.5916 12.8619 32.0475C11.4181 31.0717 12.9797 31.0717 12.9797 31.0717C13.4859 31.1427 13.9691 31.3272 14.3928 31.6113C14.8165 31.8953 15.1697 32.2713 15.4254 32.711C15.6427 33.1025 15.9357 33.4475 16.2876 33.7262C16.6394 34.0049 17.0432 34.2118 17.4758 34.3351C17.9084 34.4584 18.3612 34.4956 18.8082 34.4447C19.2553 34.3937 19.6878 34.2555 20.081 34.038C20.1427 33.2353 20.491 32.4809 21.0632 31.9109C17.5077 31.5108 13.7753 30.1447 13.7753 24.056C13.7509 22.4781 14.3382 20.9514 15.4156 19.7919C14.9348 18.4201 14.9909 16.9189 15.5727 15.5864C15.5727 15.5864 16.9184 15.157 19.973 17.2159C22.596 16.5004 25.3647 16.5004 27.9877 17.2159C31.0424 15.157 32.3782 15.5864 32.3782 15.5864C32.9661 16.917 33.0258 18.4194 32.5451 19.7919C33.6225 20.9514 34.2098 22.4781 34.1854 24.056C34.1854 30.1642 30.4432 31.501 26.8778 31.8621C27.2601 32.2439 27.5554 32.7029 27.7435 33.2079C27.9316 33.713 28.0082 34.2523 27.9681 34.7894C27.9681 36.9165 27.9681 38.6339 27.9681 39.151C27.9681 39.6682 28.2529 40.0683 29.0682 39.9219C32.6653 38.7203 35.7158 36.2884 37.6756 33.0599C39.6354 29.8314 40.3771 26.0162 39.7683 22.2949C39.1595 18.5736 37.2399 15.1881 34.3518 12.7423C31.4637 10.2965 27.795 8.94946 24 8.94141V8.99995Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="32" height="31" fill="white" transform="translate(8 9)"/>
+</clipPath>
+</defs>
+</svg>

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"