Fullscreen guides on desktop

_sass/theme.scss

@@ -90,6 +90,10 @@ $enable-shadows: true;
   border-radius: 2px;
 }
 
+.setup-guide > div:nth-child(2n) {
+  background: lighten(theme-color("primary"), 15%);
+}
+
 main blockquote:not(.blockquote) {
   background: theme-color("light");
   &:before {
@@ -123,9 +127,6 @@ main div.guide {
     }
   }
 
-  @include media-breakpoint-up("lg") {
-    padding: 0 $spacer * 8;
-  }
   h1:not(:first-child):not(.display-1) {
     margin-top: $spacer * 4;
   }

_setup_steps/windows-git.md

@@ -13,17 +13,15 @@ resources:
   - type: shell
     command: git --global config user.email "[email protected]"
     description: Command to set your email in git
+video:
+  - poster: /getting-started/guides/windows-git.mp4.thumb.jpg
+    src: /getting-started/guides/windows-git.mp4
+    description: A screencast of setting up git on Windows (1.2MB)
+  - poster: /getting-started/guides/windows-git-setup-user.mp4.thumb.jpg
+    src: /getting-started/guides/windows-git-setup-user.mp4
+    description: A screencast of configuring git on Windows (1.2MB)
 ---
 
-<video 
-  width="100%" 
-  controls 
-  class="my-2 drop-shadow-small" 
-  preload="none"
-  poster="{% link getting-started/guides/windows-git.mp4.thumb.jpg %}"
-  src="{% link getting-started/guides/windows-git.mp4 %}"></video>
-<span class="text-center d-block small">A screencast of setting up git on Windows (1.2MB)</span>
-
 `git` is a version control system, that means it is used to archive and share files in a way that makes it easy for collaborators to work in their changes. It is similar to _Dropbox_ or _Google Drive_, but it's not realtime/instant, as they are. 
 
 Instead, it records only the changes you did (e.g. removing a line, changing a word etc.) locally. When you're ready, you can _pull_ the latest version from a remote repository (a lot of which are hosted on _GitHub_ or _GitLab_). Git will try to work in your changes into whatever happened remotely. If everything went smoothly, you can _push_ your changes back up. If not, you have to resolve a _merge-conflict_.
@@ -47,11 +45,3 @@ git --global config user.name "YOUR NAME"
 git --global config user.email "[email protected]"
 ```
 
-<video 
-  width="100%" 
-  controls 
-  class="my-2 drop-shadow-small" 
-  preload="none"
-  poster="{% link getting-started/guides/windows-git-setup-user.mp4.thumb.jpg %}"
-  src="{% link getting-started/guides/windows-git-setup-user.mp4 %}"></video>
-<span class="text-center d-block small">A screencast of configuring git on Windows (1.2MB)</span>

_setup_steps/windows-intellij-kotlin-0-new-project.md

@@ -1,16 +1,11 @@
 ---
 title: Creating a new Kotlin project
+video:
+  poster: /getting-started/guides/windows-intellij-kotlin-0-new-project.mp4.thumb.jpg
+  src: /getting-started/guides/windows-intellij-kotlin-0-new-project.mp4
+  description: "A screencast of setting up a new Kotlin project with gradle (1.2MB)"
 ---
 
-<video 
-  width="100%" 
-  controls 
-  class="my-2 drop-shadow-small" 
-  preload="none"
-  poster="{% link getting-started/guides/windows-intellij-kotlin-0-new-project.mp4.thumb.jpg %}"
-  src="{% link getting-started/guides/windows-intellij-kotlin-0-new-project.mp4 %}"></video>
-<span class="text-center d-block small">A screencast of setting up a new Kotlin project with gradle (1.2MB)</span>
-
 We'll continue with creating a new project. Start *IntelliJ* and proceed through the configuration wizard (again, the defaults are usually fine). Once prompted, click *Create new project* to open the project creation wizard.
 
 Select *Gradle* on the left. If you don't have a recent *JDK* (**J**ava **D**evelopment **K**it, compilers and tools needed to develop on the *JVM*) installed, install OpenJDK 14 from Oracle through the select-box on the top.

_setup_steps/windows-intellij-kotlin-1-fix-gradle.md

@@ -4,17 +4,12 @@ resources:
   - type: url
     url: https://github.com/gradle/gradle/issues/10248
     description: Link to the issue on GitHub that's not fixed in the default version of gradle shipped with IntelliJ
+video:
+  src: /getting-started/guides/windows-intellij-kotlin-1-fix-gradle.mp4
+  poster: /getting-started/guides/windows-intellij-kotlin-1-fix-gradle.mp4.thumb.jpg
+  description: "A screencast of manually upgrading gradle (1.5MB)"
 ---
 
-<video 
-  width="100%" 
-  controls 
-  class="my-2 drop-shadow-small" 
-  preload="none"
-  poster="{% link getting-started/guides/windows-intellij-kotlin-1-fix-gradle.mp4.thumb.jpg %}"
-  src="{% link getting-started/guides/windows-intellij-kotlin-1-fix-gradle.mp4 %}"></video>
-<span class="text-center d-block small">A screencast of manually upgrading gradle (1.5MB)</span>
-
 At the time of writing this tutorial, IntelliJ ships with an old version of *gradle* that is broken with the latest (and recommended) *OpenJDK* version (version 14). Once you're past the wizard, IntelliJ will report an "Invalid Gradle JDK configuration found" and no build tasks will work.
 
 To fix this, we have to manually intervene and upgrade *gradle* to a recent version (at the time of writing, this is version 6.5.1). Open the *Project* sidebar on the left and create a new file `gradle-wrapper.properties` in `gradle/wrapper/` to tell IntelliJ which gradle version you want to use as follows:

_setup_steps/windows-intellij-kotlin-2-gradle-add-junit5.md

@@ -1,16 +1,11 @@
 ---
 title: Setting up JUnit5 in the project
+video:
+    src: /getting-started/guides/windows-intellij-kotlin-2-gradle-add-junit5.mp4
+    poster: /getting-started/guides/windows-intellij-kotlin-2-gradle-add-junit5.mp4.thumb.jpg
+    description: "A screencast of configuring gradle for JUnit5 (0.8MB)"
 ---
 
-<video 
-  width="100%" 
-  controls 
-  class="my-2 drop-shadow-small" 
-  preload="none"
-  poster="{% link getting-started/guides/windows-intellij-kotlin-2-gradle-add-junit5.mp4.thumb.jpg %}"
-  src="{% link getting-started/guides/windows-intellij-kotlin-2-gradle-add-junit5.mp4 %}"></video>
-<span class="text-center d-block small">A screencast of configuring gradle for JUnit5 (0.8MB)</span>
-
 Another slight annoyance is the fact that by default, a new *gradle* project ships with *JUnit4*, an old version. Upgrade it by changing the *junit* dependency declaration to use `kotlin.test` with the junit5 adapter, and to use the *JUnit5*-platform to run tests.
 
 Your `build.gradle` should looks as follows:

_setup_steps/windows-intellij-kotlin-3-create-tests.md

@@ -1,16 +1,11 @@
 ---
 title: Creating and running tests
+video:
+    src: /getting-started/guides/windows-intellij-kotlin-3-create-tests.mp4
+    poster: /getting-started/guides/windows-intellij-kotlin-3-create-tests.mp4.thumb.jpg
+    description: A screencast of creating and running tests in Kotlin (1.9MB)
 ---
 
-<video 
-  width="100%" 
-  controls 
-  class="my-2 drop-shadow-small" 
-  preload="none"
-  poster="{% link getting-started/guides/windows-intellij-kotlin-3-create-tests.mp4.thumb.jpg %}"
-  src="{% link getting-started/guides/windows-intellij-kotlin-3-create-tests.mp4 %}"></video>
-<span class="text-center d-block small">A screencast of creating and running tests in Kotlin (1.9MB)</span>
-
 Finally, we can create our tests to make sure that everything is working correctly. Create the folder `src/main/kotlin` and place a new Kotlin class `HelloWorld.kt` in there with a simple method that returns `"Hello World"` when called:
 
 ```kotlin

_setup_steps/windows-intellij-kotlin-4-git-commit.md

@@ -1,16 +1,11 @@
 ---
 title: Committing the boilerplate
+video:
+  poster: /getting-started/guides/windows-intellij-kotlin-4-git-commit.mp4.thumb.jpg
+  src: /getting-started/guides/windows-intellij-kotlin-4-git-commit.mp4
+  description: "A screencast of initializing the repo and committing to git (0.9MB)"
 ---
 
-<video 
-  width="100%" 
-  controls 
-  class="my-2 drop-shadow-small" 
-  preload="none"
-  poster="{% link getting-started/guides/windows-intellij-kotlin-4-git-commit.mp4.thumb.jpg %}"
-  src="{% link getting-started/guides/windows-intellij-kotlin-4-git-commit.mp4 %}"></video>
-<span class="text-center d-block small">A screencast of initializing the repo and committing to git (0.9MB)</span>
-
 Now that we have the project in a good shape, it's time to add it to `git`. Open a new terminal and `cd` to the project folder. Run `git init .` to initialize a new repository in the folder we're developing our application in.
 
 ```shell

_setup_steps/windows-intellij.md

@@ -4,17 +4,12 @@ resources:
   - type: url
     url: https://www.jetbrains.com/idea/download/
     description: Download link for JetBrains IntelliJ Community Edition
+video:
+  src: /getting-started/guides/windows-intellij.mp4
+  poster: /getting-started/guides/windows-intellij.mp4.thumb.jpg
+  description: "A screencast of installing IntelliJ (1.6MB)"
 ---
 
-<video 
-  width="100%" 
-  controls 
-  class="my-2 drop-shadow-small" 
-  preload="none"
-  poster="{% link getting-started/guides/windows-intellij.mp4.thumb.jpg %}"
-  src="{% link getting-started/guides/windows-intellij.mp4 %}"></video>
-<span class="text-center d-block small">A screencast of installing IntelliJ (1.6MB)</span>
+We'll continue with installing _IntelliJ_, a free IDE (**I**ntegrated **D**evelopment **E**nvironment) with support for a lot of different languages. It has excellent suppport for Kotlin and other JVM-based languages languages.
 
-We'll continue with installing *IntelliJ*, a free IDE (**I**ntegrated **D**evelopment **E**nvironment) with support for a lot of different languages. It has excellent suppport for Kotlin and other JVM-based languages languages.
-
-Download the installer for Windows and proceed to install it as you would any other Windows Application. The default settings are fine as they are.
+Download the installer for Windows and proceed to install it as you would any other Windows Application. The default settings are fine as they are.

getting-started/guides.html

@@ -4,12 +4,14 @@
 title: Setup Guides
 ---
 
-<div class="container my-5 guide">
+<div class="container-fluid px-0 my-5 guide">
+  <div class="guide px-5">
   <h1 class="display-1 display-4-md">Setup Guides</h1>
   <p class="lead">
     Setting up a modern development environment is difficult. Check out our
     guides on how to get your device ready for a coderetreat!
   </p>
+</div>
   <div id="guides"></div>
 </div>
 

js/guides.jsx

@@ -64,8 +64,8 @@ const GuideSelector = ({
   }, [selectedLanguage, selectedOperatingSystem]);
 
   return (
-    <div className="row">
-      <div class="col-12 col-md-4">
+    <div className="">
+      <div class="d-block">
         <h4>Operating System</h4>
         {Object.entries(OPERATING_SYSTEMS).map(([key, os]) => (
           <SelectionButton
@@ -81,7 +81,7 @@ const GuideSelector = ({
           />
         ))}
       </div>
-      <div class="col-12 col-md-8">
+      <div class="mt-3">
         <h4>Programming Language</h4>
         {Object.entries(LANGUAGES).map(([key, language]) => (
           <SelectionButton
@@ -125,7 +125,7 @@ const updateUrlFromOperatingSystemAndLanguage = (selectedGuideId) => {
 };
 
 const Resources = ({ resources }) => (
-  <div className="tldr">
+  <div className="tldr mt-0">
     <ul className="">
       {resources.map((resource) => {
         if (resource.type === "url") {
@@ -153,9 +153,24 @@ const Resources = ({ resources }) => (
   </div>
 );
 
+const Video = ({ video }) => (
+  <Fragment>
+    <video
+      style={{ width: "100%" }}
+      controls
+      class="mb-2 drop-shadow-small"
+      preload="none"
+      poster={video.poster}
+      src={video.src}
+    ></video>
+    <span class="text-center d-block small">{video.description}</span>
+  </Fragment>
+);
+
 const Guide = ({ guide, steps, containerRef }) => {
   return (
-    <div ref={containerRef}>
+    <div ref={containerRef} className="mt-5">
+      <div className="p-5">
       <h1>{guide.name}</h1>
       <div className="toc d-inline-block p-md-3 my-3">
         <h4 class="h4">Table of Contents</h4>
@@ -167,15 +182,29 @@ const Guide = ({ guide, steps, containerRef }) => {
           ))}
         </ol>
       </div>
-      <section class="content">
+      </div>
+      <section class="content px-0 container-fluid setup-guide">
         {steps.map((s) => (
-          <Fragment>
-            <h2 className="h2">
+          <div className="p-5">
+            <h2 className="h1 mt-0 mb-5">
               <a name={s.slug}>{s.title}</a>
             </h2>
-            {s.resources && <Resources resources={s.resources} />}
-            <div dangerouslySetInnerHTML={{ __html: s?.output }}></div>
-          </Fragment>
+
+            <div className="row">
+              <div className="col-12 order-2 order-lg-1 col-lg-6">
+                {s.resources && <Resources resources={s.resources} />}
+                <div dangerouslySetInnerHTML={{ __html: s?.output }}></div>
+              </div>
+              <div className="col-12 order-1 order-lg-2 col-lg-6 mb-5 mb-lg-0">
+                {s.video &&
+                  (Array.isArray(s.video) ? (
+                    s.video.map((video) => <Video video={video} />)
+                  ) : (
+                    <Video video={s.video} />
+                  ))}
+              </div>
+            </div>
+          </div>
         ))}
       </section>
     </div>
@@ -222,7 +251,8 @@ const Guides = ({ setupSteps, availableGuides }) => {
   };
 
   return (
-    <div>
+    <Fragment>
+      <div className="container-fluid px-5">
       <GuideSelector
         selectedGuideId={selectedGuideId}
         availableGuides={availableGuides}
@@ -243,15 +273,15 @@ const Guides = ({ setupSteps, availableGuides }) => {
         following these guides. The guides are provided "AS IS" and free of
         charge.
       </p>
-      <hr className="my-5" />
+      </div>
       {selectedGuide && (
         <Guide
           containerRef={guideRef}
           guide={selectedGuide}
           steps={stepsForSelectedGuide}
         />
       )}
-    </div>
+    </Fragment>
   );
 };