diff --git a/.tool-versions b/.tool-versions index 9eb38ed717..520a1687df 100644 --- a/.tool-versions +++ b/.tool-versions @@ -1 +1 @@ -ruby 2.7.2 +ruby 3.1.3 diff --git a/_includes/header.html b/_includes/header.html index 0b8f285760..ce14e323f3 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -34,7 +34,7 @@ Blinka
- Get Started + Get Started
diff --git a/_includes/header_mobile.html b/_includes/header_mobile.html index ee71d7adba..6b04e87437 100644 --- a/_includes/header_mobile.html +++ b/_includes/header_mobile.html @@ -34,7 +34,7 @@
  • Awesome
  • Newsletter
    • -
  • Get Started
    • +
  • Get Started
  • Forums
  • Discord
    • diff --git a/assets/css/main.scss b/assets/css/main.scss index 2e27786ec6..ea9b4a7cb0 100644 --- a/assets/css/main.scss +++ b/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'; diff --git a/assets/images/start/circuit_playground.png b/assets/images/start/circuit_playground.png new file mode 100644 index 0000000000..6b7157df21 Binary files /dev/null and b/assets/images/start/circuit_playground.png differ diff --git a/assets/images/start/feather.png b/assets/images/start/feather.png new file mode 100644 index 0000000000..34687c2658 Binary files /dev/null and b/assets/images/start/feather.png differ diff --git a/assets/images/start/stemma.png b/assets/images/start/stemma.png new file mode 100644 index 0000000000..8e2818210d Binary files /dev/null and b/assets/images/start/stemma.png differ diff --git a/assets/javascript/start.js b/assets/javascript/start.js new file mode 100644 index 0000000000..c4c615dd1d --- /dev/null +++ b/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'); +} diff --git a/assets/sass/pages/_start.scss b/assets/sass/pages/_start.scss new file mode 100644 index 0000000000..cc5a49df91 --- /dev/null +++ b/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; + } + } + } + } + } +} diff --git a/index.html b/index.html index 0cd3e0b677..2c69db5ef9 100644 --- a/index.html +++ b/index.html @@ -177,7 +177,7 @@

    Just the beginning...

    Get Started + class="action-link include-gap">Get Started

    diff --git a/start/_connecting.html b/start/_connecting.html new file mode 100644 index 0000000000..0c49df1913 --- /dev/null +++ b/start/_connecting.html @@ -0,0 +1,104 @@ +
    + +
    + +
    + +
    +

    USB Cable

    +

    + Many CircuitPython-compatible boards use USB for connecting to your computer and + powering the board. Follow these steps to get your board connected. +

    +
      +
    1. + Check your board to see what type of USB cable you need + (USB Type C or USB Micro). +
      2. +
    2. + 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! +
      3. +
    3. + Plug the USB cable into your board, and plug the opposite end into + your computer. After a moment, you should see the CIRCUITPY drive. +
      4. +
    +

    + Remember, if you haven't installed CircuitPython, you will not see a CIRCUITPY + drive. +

    +

    + That's all there is to using a USB cable to connect your computer to your + CircuitPython board! +

    +
    +
    +
    + +
    +

    PyLeap iOS App

    +

    + 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 + learn.adafruit.com. +

    +

    + Get PyLeap through Apple's beta testing app, + TestFlight. +

    +

    + PyLeap is openly developed + on GitHub. +

    +
    +
    +
    + +
    +

    File Glider iOS App

    +

    + 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. +

    +

    + Get File Glider through Apple's beta + testing app, TestFlight. +

    +

    + File Glider is openly developed + on GitHub. +

    +
    +
    +
    + +
    +

    code.circuitpython.org

    +

    + code.circuitpython.org is a webapp + designed by Adafruit to edit files over WebBluetooth in Chrome. This works on the + latest Chrome on desktop and on Android. +

    +

    + Go to code.circuitpython.org to get + started. +

    +

    + The web editor is openly developed + on GitHub. +

    +
    +
    +
    +
    diff --git a/start/_installation.html b/start/_installation.html new file mode 100644 index 0000000000..9ad8615abb --- /dev/null +++ b/start/_installation.html @@ -0,0 +1,59 @@ +
    + +
    + +
    + +
    +

    Choose a board

    +

    + 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 + choosing the CircuitPython board that's right for you. + 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! +

    +
    +
    +
    + +
    +

    Installation

    +

    + 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. +

    +

    + 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 Adafruit Learn System. Once + the board is in the bootloader, you'll see a USB drive ending in BOOT. Now you're + ready for the next step. +

    +

    + Visit the Downloads page 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. +

    +

    + 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 + Installing CircuitPython + page in the Welcome to CircuitPython guide. For help troubleshooting issues, visit the + Troubleshooting page + in the Welcome guide. +

    +
    +
    +
    +
    + diff --git a/start/_libraries.html b/start/_libraries.html new file mode 100644 index 0000000000..d7b6fdf7b5 --- /dev/null +++ b/start/_libraries.html @@ -0,0 +1,99 @@ +
    + +
    + +
    + +
    +

    Download & Installation

    +

    + Many CircuitPython programs require you to load external libraries on your CIRCUITPY + drive in the lib/ folder. To do so, you download the libraries in the appropriate + library bundle, and copy the necessary files and folders to CIRCUITPY/lib. You can + also download a Project Bundle for a specific project in the Adafruit Learn System + and copy the files and folders within to your CIRCUITPY drive. +

    +

    + Visit the Libraries page to + download the latest bundle. You should download the version that matches the version + of CircuitPython you installed on your board. +

    +

    + To learn how to load individual libraries onto your CircuitPython board, visit the + CircuitPython Libraries page + in the Welcome to CircuitPython guide. +

    +

    + To use a Project Bundle, simply click the "Download Project Bundle" button above + the code in the Adafruit Learn System. +

    +
    +
    +
    + +
    +

    Library Bundles

    +

    + CircuitPython libraries are made available in library bundles. There are currently + two: the Adafruit CircuitPython Bundle, the Community Bundle. The Adafruit + CircuitPython library bundle is made up of Adafruit-sponsored drivers and helper + libraries. The Community library bundle is made up of libraries submitted by + individual community members. + +

    +

    + Visit the Libraries page to + download the latest bundle. +

    +
    +
    +
    + +
    +

    Project Bundles

    +

    + There are many CircuitPython libraries available. Each CircuitPython program uses a + subset of these. Some use more than others. When a program uses a significant + number of libraries, it can be frustrating to load them all manually. This is where + the Project Bundles come in. The + Adafruit Learn System has many + CircuitPython projects available. Many of the programs within these projects have a + "Download Project Bundle" button available at the top. This button downloads a zip + file containing a code.py and all the files and libraries you need to use it. We + have made it super simple to get started with a project. Simply download the Project + Bundle, copy everything over to your CIRCUITPY drive, and you're ready to go! +

    +

    + Click the "Download Project Bundle" button above the code in any Adafruit Learn + Guide to get started. +

    +
    +
    +
    + +
    +

    Blinka

    +

    + Blinka is a CircuitPython compatibility layer that brings CircuitPython + libraries to single board computers like Raspberry Pi. It is a + pip installable Python + library that runs in normal "desktop" Python. The CircuitPython + runtime isn't used. For use with Blinka, + CircuitPython libraries + can also be installed via pip. Blinka is automatically installed when you pip install + a CircuitPython library that requires it. Visit + the guide + for further details. +

    +
    +
    +
    +
    diff --git a/start/index.html b/start/index.html new file mode 100644 index 0000000000..a99f0d98ab --- /dev/null +++ b/start/index.html @@ -0,0 +1,26 @@ +--- +layout: default +title: Getting Started +permalink: /start +--- + +
    +
    +

    Getting started with CircuitPython is quick and easy!

    +

    + CircuitPython is a programming language designed to simplify experimenting + and learning to program on low-cost microcontroller boards. It makes + getting started easier than ever with no upfront desktop downloads needed. + Once you get your board set up, open any text editor, and get started + editing code. It's that simple. +

    + Visit the + Welcome to CircuitPython + guide for everything you need to get started with CircuitPython. +
    + {% include_relative _installation.html %} + {% include_relative _connecting.html %} + {% include_relative _libraries.html %} +
    + +