Getting Started Page

.tool-versions

@@ -1 +1 @@
-ruby 2.7.2
+ruby 3.1.3

_includes/header.html

@@ -34,7 +34,7 @@
           <a {% if current[1] == 'blinka' %}class="active" aria-current="page"{% endif %} href="{{ "/blinka" | relative_url  }}">Blinka</a>
         </div>
         <div class="get-started">
-          <a href="https://learn.adafruit.com/welcome-to-circuitpython">Get Started</a>
+          <a href="{{ "/start" | relative_url }}">Get Started</a>
         </div>
       </nav>
     </div>

_includes/header_mobile.html

@@ -34,7 +34,7 @@
         <li><a {% if current[1] == 'awesome' %}class='active'{% endif %}
                                   href="{{ "/awesome" | relative_url  }}">Awesome</a></li>
         <li><a href="https://www.adafruitdaily.com/category/circuitpython">Newsletter</a></li>
-        <li><a href="https://learn.adafruit.com/welcome-to-circuitpython">Get Started</a></li>
+        <li><a href="{{ "/start" | relative_url }}">Get Started</a></li>
         <li><a href="https://forums.adafruit.com/viewforum.php?f=60">Forums</a></li>
         <li><a href="https://adafru.it/discord" aria-label="Discord"><i class="fab fa-discord"></i> Discord</a></li>
       </ul>

assets/css/main.scss

@@ -14,6 +14,7 @@
 @import 'layout/header_mobile';
 
 @import 'pages/home';
+@import 'pages/start';
 @import 'pages/common';
 @import 'pages/downloads';
 @import 'pages/download';

assets/javascript/start.js

@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded',function() {
+  document.querySelectorAll(".tab-links a").forEach(link => {
+    link.addEventListener('click', showContent);
+  });
+});
+
+function showContent(event) {
+  event.preventDefault();
+  var tabId = event.target.getAttribute('href').substring(1);
+  var startSection = event.target.closest('.start-section');
+  // toggle active class for links
+  startSection.querySelector(".tab-links a.active").classList.remove('active');
+  event.target.classList.add('active');
+  // toggle active class for content
+  startSection.querySelector(".tab-content.active").classList.remove('active');
+  document.getElementById(tabId).classList.add('active');
+}

assets/sass/pages/_start.scss

@@ -0,0 +1,110 @@
+#start-page {
+  @include readable-content;
+  grid-row-grap: 1em;
+  background-color: #fff;
+  font-size: 24px;
+
+  .content-block {
+    grid-column: full;
+    padding: 20px 20px 20px 50px;
+    margin-bottom: 5px;
+    font-weight: 500;
+
+    h2 {
+      font-size: 32px;
+    }
+  }
+
+  .start-section {
+    grid-column: full;
+
+    .banner {
+      padding: 20px 50px 20px 50px;
+      margin-bottom: 5px;
+
+      h3 {
+        font-size: 60px;
+        margin: 0;
+        color: #fff;
+      }
+
+      &.purple {
+        background-color: #63338f;
+      }
+    }
+
+    .tab-block {
+      display: grid;
+      grid-template-columns: 25% 75%;
+      padding: 0 50px 0 50px;
+
+      .tab-links {
+        list-style-type: none;
+        padding: 0;
+
+        a {
+          font-weight: 500;
+          color: #63338f;
+          padding-left: 15px;
+
+          &.active {
+            color: #000;
+            border-left: 5px solid #000;
+            padding-left: 10px;
+          }
+        }
+      }
+
+      .tab-content {
+        display: none;
+        grid-template-columns: 20% 80%;
+        column-gap: 20px;
+        padding-top: 20px;
+
+        &.active {
+          display: grid;
+        }
+
+        img {
+          display: block;
+          max-width: 100%;
+          max-height: 100%;
+          object-fit: contain;
+        }
+
+        .details {
+          h4 {
+            font-size: 24px;
+            margin: 0;
+          }
+          p, ol {
+            font-size: 18px;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: $screen-xs-max) {
+  #start-page {
+    .start-section {
+      .tab-block {
+        grid-template-columns: 1fr;
+        padding: 0 20px;
+        .tab-links {
+          display: none;
+        }
+
+        .tab-content {
+          display: grid;
+          grid-template-columns: 1fr;
+
+          img {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}

index.html

@@ -177,7 +177,7 @@ <h2>Just the beginning...</h2>
     </p>
     <p>
       <a href="https://learn.adafruit.com/welcome-to-circuitpython"
-         class="action-link include-gap">Get Started</a>
+               class="action-link include-gap">Get Started</a>
     </p>
     </div>
   </div>

start/_connecting.html

@@ -0,0 +1,104 @@
+<section class="start-section">
+  <div class="purple banner">
+    <h3>Connecting</h3>
+  </div>
+  <div class="tab-block">
+    <ul class="tab-links">
+      <li><a href="#usb-cable" class="active">USB Cable</a></li>
+      <li><a href="#pyleap-ios-app">PyLeap iOS App</a></li>
+      <li><a href="#file-glider-ios-app">File Glider iOS App</a></li>
+      <li><a href="#code-circuitpython-org">code.circuitpython.org</a></li>
+    </ul>
+    <div id="usb-cable" class="tab-content active">
+      <img src="/assets/images/start/feather.png" />
+      <div class="details">
+          <h4>USB Cable</h4>
+          <p>
+              Many CircuitPython-compatible boards use USB for connecting to your computer and
+              powering the board. Follow these steps to get your board connected.
+          </p>
+          <ol>
+              <li>
+                  Check your board to see what type of USB cable you need
+                  (USB Type C or USB Micro).
+              </li>
+              <li>
+                  Verify that you're using a USB cable capable of data
+                  sync and not a charge-only cable - this is a common mistake that can lead to
+                  frustration!
+              </li>
+              <li>
+                  Plug the USB cable into your board, and plug the opposite end into
+                  your computer. After a moment, you should see the CIRCUITPY drive.
+              </li>
+          </ol>
+          <p>
+              Remember, if you haven't installed CircuitPython, you will not see a CIRCUITPY
+              drive.
+          </p>
+          <p>
+              That's all there is to using a USB cable to connect your computer to your
+              CircuitPython board!
+          </p>
+      </div>
+    </div> <!-- end tab-content -->
+    <div id="pyleap-ios-app" class="tab-content">
+      <img src="/assets/images/start/stemma.png" />
+      <div class="details">
+          <h4>PyLeap iOS App</h4>
+          <p>
+              PyLeap is an iOS app by Adafruit designed to quickly get you started by loading
+              existing projects onto your device. These projects are available from
+              <a href="https://learn.adafruit.com">learn.adafruit.com</a>.
+          </p>
+          <p>
+              <a href="https://adafru.it/pyleap">Get PyLeap</a> through Apple's beta testing app,
+              TestFlight.
+          </p>
+          <p>
+              PyLeap is openly developed
+              <a href="https://github.com/adafruit/PyLeap-iOS">on GitHub</a>.
+          </p>
+      </div>
+    </div> <!-- end tab-content -->
+    <div id="file-glider-ios-app" class="tab-content">
+      <img src="/assets/images/start/feather.png" />
+      <div class="details">
+          <h4>File Glider iOS App</h4>
+          <p>
+              File Glider is an iOS app by Adafruit designed to interoperate with iOS's files API.
+              Files can be edited directly in File Glider or indirectly in other Files API
+              compatible apps. The app is not CircuitPython specific so it can be used with any
+              file transfer capable device.
+          </p>
+          <p>
+              <a href="https://adafru.it/file-glider">Get File Glider</a> through Apple's beta
+              testing app, TestFlight.
+          </p>
+          <p>
+              File Glider is openly developed
+              <a href="https://github.com/adafruit/Glider-for-iOS">on GitHub</a>.
+          </p>
+      </div>
+    </div> <!-- end tab-content -->
+    <div id="code-circuitpython-org" class="tab-content">
+      <img src="/assets/images/start/feather.png" />
+      <div class="details">
+          <h4>code.circuitpython.org</h4>
+          <p>
+              <a href="https://code.circuitpython.org">code.circuitpython.org</a> is a webapp
+              designed by Adafruit to edit files over WebBluetooth in Chrome. This works on the
+              latest Chrome on desktop and on Android.
+          </p>
+          <p>
+              Go to <a href="https://code.circuitpython.org">code.circuitpython.org</a> to get
+              started.
+          </p>
+          <p>
+              The web editor is openly developed
+              <a href="https://github.com/circuitpython/web-editor">on GitHub</a>.
+          </p>
+      </div>
+    </div> <!-- end tab-content -->
+  </div> <!-- end tab-block -->
+</section> <!-- end start-section -->

start/_installation.html

@@ -0,0 +1,59 @@
+<section class="start-section">
+  <div class="purple banner">
+    <h3>Installing CircuitPython</h3>
+  </div>
+  <div class="tab-block">
+    <ul class="tab-links">
+      <li><a href="#choose-a-board" class="active">Choose a board</a></li>
+      <li><a href="#installation">Installation</a></li>
+    </ul>
+    <div id="choose-a-board" class="tab-content active">
+      <img src="/assets/images/start/circuit_playground.png" />
+      <div class="details">
+          <h4>Choose a board</h4>
+          <p>
+              The first step to getting started with CircuitPython is choosing a microcontroller
+              board that works for you. If you need some help with that, we have a guide on
+              <a href="https://learn.adafruit.com/choose-your-circuitpython-board">choosing the CircuitPython board that's right for you</a>.
+              Once you have a board picked out, simply plug it into your computer using an
+              appropriate USB cable, and you're ready to get started!
+          </p>
+      </div>
+    </div> <!-- end tab-content -->
+    <div id="installation" class="tab-content">
+      <img src="/assets/images/start/feather.png" />
+      <div class="details">
+          <h4>Installation</h4>
+          <p>
+              Some of the CircuitPython-compatible boards come with CircuitPython installed.
+              Others are CircuitPython-ready, but require you to install it. Further, you may
+              want to update the version of CircuitPython that is already installed on your
+              board. The steps are the same for installing and updating.
+          </p>
+          <p>
+              To install CircuitPython, you must first put the microcontroller board into the
+              bootloader. The process is specific to each board, so always check out the board
+              guide in the <a href="https://learn.adafruit.com">Adafruit Learn System</a>. Once
+              the board is in the bootloader, you'll see a USB drive ending in BOOT. Now you're
+              ready for the next step.
+          </p>
+          <p>
+              Visit the <a href="https://circuitpython.org/downloads">Downloads page</a> and
+              search for your board. Click on your board and download the latest version of
+              CircuitPython for you board. Drag the fresh .uf2 file to the BOOT drive to copy it
+              over.
+          </p>
+          <p>
+              The board will reboot, and, if successful, a CIRCUITPY drive will appear. That's all
+              there is to installing CircuitPython! For a general look at the installation process,
+              visit the
+              <a href="https://learn.adafruit.com/welcome-to-circuitpython/installing-circuitpython">Installing CircuitPython</a>
+              page in the Welcome to CircuitPython guide. For help troubleshooting issues, visit the
+              <a href="https://learn.adafruit.com/welcome-to-circuitpython/troubleshooting">Troubleshooting page</a>
+              in the Welcome guide.
+          </p>
+      </div>
+    </div> <!-- end tab-content -->
+  </div> <!-- end tab-block -->
+</section> <!-- end start-section -->
+