Merge pull request #1190 from slumbering/fix/docs-iframe

[Docs] fix iframe width + bump docusaurus to the latest version

docs/learn/1003-get-started.md

@@ -4,7 +4,7 @@ slug: /1003/get-started/
 
 # Get Started with Dagger
 
-<iframe width="800" height="450" style={{float: 'right', marginBottom: '2rem'}} src="https://www.youtube.com/embed/QvyB3m9Fti0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe width="800" height="450" style={{width: '100%', marginBottom: '2rem'}} src="https://www.youtube.com/embed/QvyB3m9Fti0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 In this tutorial, you will learn the basics of Dagger by building a Dagger project from scratch. This simple project deploys a [React](https://reactjs.org/) application to your local machine via Docker. In later tutorials, you will learn how to configure Dagger to deploy to remote infrastructure such as EKS and GKE.
 

website/netlify.toml

@@ -1,6 +1,7 @@
 [build]
   publish = "build/"
   command = "yarn build"
+  environment = { NODE_VERSION = "16.13.1" }
 
 [context.production]
   # Do not build the site if there's no site-related changes since the last

website/package.json

@@ -18,8 +18,8 @@
     "ci": "start-server-and-test 'yarn start-server' '3000|3001' 'yarn run cypress run'"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.0-beta.6",
+    "@docusaurus/core": "^2.0.0-beta.9",
-    "@docusaurus/preset-classic": "^2.0.0-beta.6",
+    "@docusaurus/preset-classic": "^2.0.0-beta.9",
     "@mdx-js/react": "^1.6.21",
     "@svgr/webpack": "^5.5.0",
     "amplitude-js": "^8.13.0",
@@ -28,6 +28,7 @@
     "docusaurus2-dotenv": "^1.4.0",
     "file-loader": "^6.2.0",
     "nprogress": "^0.2.0",
+    "querystringify": "^2.2.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-social-login-buttons": "^3.6.0",

website/src/css/custom.scss

@@ -241,8 +241,8 @@ h1[class^="h1Heading"] {
 }
 
 /* navbar */
-.navbar__brand {
+.navbar__brand .navbar__logo {
-  height: 3rem;
+  height: 5rem;
   @include desktop {
     height: var(--ifm-navbar-height);
   }
@@ -268,12 +268,6 @@ h1[class^="h1Heading"] {
   padding: 1rem;
 }
 
-.navbar__logo {
-  @include tablet {
-    height: auto;
-  }
-}
-
 .react-toggle {
   margin: 0 0.75rem;
 }
@@ -339,7 +333,7 @@ a[class^="sidebarLogo"] {
 
 main[class^="docMainContainer"] {
   background: #ffffff;
-  padding: 2rem 2rem 2rem 4rem;
+  padding: 2rem 2rem 2rem 5rem;
 
   @include tablet {
     padding: 2rem;
@@ -349,11 +343,6 @@ main[class^="docMainContainer"] {
     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 */
@@ -427,6 +416,9 @@ button[class^="copyButton"] {
   &:focus svg path + path {
     fill: var(--ifm-color-primary-dark);
   }
+  &::before {
+    display: none;
+  }
 }
 
 /* menu */
@@ -484,6 +476,7 @@ button[class^="copyButton"] {
     font-style: normal;
     font-weight: 700;
     line-height: 1;
+    position: relative;
   }
 
   & + .menu__list & {

website/src/theme/Heading/index.js

@@ -4,8 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-/* eslint-disable jsx-a11y/anchor-has-content, jsx-a11y/anchor-is-valid */
 import React from 'react';
 import clsx from 'clsx';
 import {translate} from '@docusaurus/Translate';
@@ -38,18 +36,16 @@ const createAnchorHeading = (Tag) =>
     }
 
     return (
-      <Tag {...props}>
+      <Tag
-        <a
+        {...props}
-          aria-hidden="true"
+        className={clsx('anchor', {
-          tabIndex={-1}
+          [styles.anchorWithHideOnScrollNavbar]: hideOnScroll,
-          className={clsx('anchor', `anchor__${Tag}`, {
+          [styles.anchorWithStickyNavbar]: !hideOnScroll,
-            [styles.anchorWithHideOnScrollNavbar]: hideOnScroll,
+        })}
-            [styles.anchorWithStickyNavbar]: !hideOnScroll,
+        id={id}>
-          })}
-          id={id}
-        />
         {props.children}
         <a
+          aria-hidden="true"
           className="hash-link"
           href={`#${id}`}
           title={translate({
@@ -57,7 +53,7 @@ const createAnchorHeading = (Tag) =>
             message: 'Direct link to heading',
             description: 'Title for link to heading',
           })}>
-            <AnchorIcon />  
+          <AnchorIcon />
         </a>
       </Tag>
     );

website/src/theme/Heading/styles.css

@@ -5,18 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.anchor {
-  display: block;
-  position: relative;
-  top: -0.5rem;
-}
-
 .hash-link {
   opacity: 0;
   padding-left: 0.5rem;
   transition: opacity var(--ifm-transition-fast);
 }
 
+.hash-link:before {
+  content: '#';
+}
+
 .hash-link:focus,
 *:hover > .hash-link {
   opacity: 1;

website/src/theme/Heading/styles.module.css

@@ -12,7 +12,6 @@ See https://twitter.com/JoshWComeau/status/1332015868725891076
  */
 .anchorWithStickyNavbar {
   scroll-margin-top: calc(var(--ifm-navbar-height) + 0.5rem);
-  /*   top: calc(var(--ifm-navbar-height) * -1 - 0.5rem); */
 }
 
 .anchorWithHideOnScrollNavbar {