chore(cms): add Open Robot Kit page

.eleventy.js

@@ -138,7 +138,9 @@ module.exports = function (config) {
 
     config.addCollection("projects", collection => {
         return [
-            ...collection.getFilteredByGlob("./src/projects/*.md")
+            ...collection
+                .getFilteredByGlob("./src/projects/*.md")
+                .sort((a, b) => a.data.title.localeCompare(b.data.title))
         ];
     });
 

src/_includes/layouts/open-robot-kit.njk

@@ -0,0 +1,93 @@
+{% extends "layouts/page.njk" %}
+
+{% block content %}
+<div class="[ bg bg--yellow-85 ]">
+  <svg class="[ wave wave--top ]" viewBox="0 0 1437 52" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M612.315 52C400.697 52 111.495 20.667-4 0h1440.92c-81.96 0-560.084 52-824.605 52z" fill="var(--color-orange-75)" /></svg>
+  <div class="[ wrapper ]">
+    <div class="[ two:three ]">
+        <div class="[ two:three__two ] [ flow ]">
+            <h2 class="h3">{{ aboutSection.title }}</h2>
+            {{ aboutSection.content | markdown | safe }}
+        </div>
+        <div class="[ two:three__three ] ">
+          <a class="[ linked-video ]" data-id="6tdjStCo3oM" rel="external" href="https://www.youtube.com/watch?v=6tdjStCo3oM">
+          {% include "svg/play.svg" %}
+          <span class="visually-hidden">Check out our accessible coding prototype</span>
+          {% image aboutSection.image, aboutSection.imageAlt, 640, 520 %}
+          </a>
+        </div>
+    </div>
+  </div>
+</div>
+<div>
+  <div class="[ wrapper flow flow-lg ]">
+    <div class="[ flow ]">
+      <h2 class="[ center ]">{{ outcomesSection.title }}</h2>
+      {{ outcomesSection.intro | markdown | safe }}
+    </div>
+    <div class="[ switcher ]">
+        <div>
+          {% for card in outcomesSection.cards %}
+            <div class="[ card card--small ]">
+                <div class="[ card__content ] [ flow ]">
+                    <h3><a class="[ card__link ]" href="{{ card.link }}"{% if card.download %} download{% endif %}>{{ card.title }}</a></h3>
+                </div>
+            </div>
+          {% endfor %}
+        </div>
+    </div>
+    <div class="[ flow ]">
+      {{ outcomesSection.content | markdown | safe }}
+    </div>
+  </div>
+</div>
+<div class="[ bg bg--purple-75 ]">
+  <div class="[ wrapper ]">
+    <div class="[ flow ]">
+      <h2 class="[ center ]">{{ nextStepsSection.title }}</h2>
+      <div class="[ switcher ]">
+        <div>
+          <div>
+            {{ nextStepsSection.columnA | markdown | safe }}
+          </div>
+          <div>
+            {{ nextStepsSection.columnB | markdown | safe }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="[ bg ]">
+  <div class="[ wrapper ]">
+    <div class="[ center flow ]">
+      <h2>{{ whoSection.title }}</h2>
+      {{ whoSection.intro | markdown | safe }}
+    </div>
+  </div>
+</div>
+<div class="[ bg bg--green-85 ]">
+  <div class="[ wrapper ]">
+    <div class="[ switcher ]">
+      <div>
+        {% for partner in whoSection.partners %}
+        <div class="[ flow ]">
+          <h3>{{ partner.name }}{% if partner.acronym %} ({{ partner.acronym }}){% endif %}</h3>
+          {{ partner.content | markdown | safe }}
+          <p><a rel="external" href="{{ partner.link }}">Visit {{ partner.acronym if partner.acronym else partner.name }} website</a></p>
+        </div>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+  <svg class="[ wave wave--bottom ]" viewBox="0 0 1437 52" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M824.685 0C1036.3 0 1325.5 31.333 1441 52H.078C82.042 52 560.164 0 824.685 0z" fill="var(--color-yellow-85)"/></svg>
+</div>
+<div class="[ bg bg--yellow-85 ]">
+  <div class="[ wrapper ]">
+    <div class="[ center flow ]">
+      <h2><a rel="external" href="{{ connectSection.titleLink }}">{{ connectSection.title }}</a></h2>
+      {{ connectSection.content | markdown | safe }}
+    </div>
+  </div>
+</div>
+{% endblock%}

src/admin/config.yml

@@ -216,7 +216,70 @@ collections:
           - {label: "Title", name: "title", widget: "string"}
           - {label: "Title Link", name: "titleLink", widget: "string"}
           - {label: "Content", name: "content", widget: "text"}
+      - label: Open Robot Kit
+        name: open-robot-kit
+        file: "src/open-robot-kit.md"
+        editor:
+          preview: false
+        fields:
+        - {label: "Title", name: "title", widget: "string"}
+        - {label: "Subtitle", name: "subtitle", widget: "text"}
+        - label: About Section
+          name: aboutSection
+          widget: object
+          fields:
+          - {label: "Title", name: "title", widget: "string"}
+          - {label: "Content", name: "content", widget: "text"}
+          - {label: "Image", name: "image", widget: "image"}
+          - {label: "Image Alt Text", name: "imageAlt", widget: "string"}
+          - {label: "Call to Action Text", name: "callToActionText", widget: "string"}
+          - {label: "Call to Action Link", name: "callToActionLink", widget: "string"}
+        - label: Outcomes Section
+          name: outcomesSection
+          widget: object
+          fields:
+          - {label: "Title", name: "title", widget: "string"}
+          - {label: "Intro", name: "intro", widget: "markdown"}
+          - label: Cards
+            name: cards
+            widget: list
+            fields:
+              - {label: "Title", name: "title", widget: "string"}
+              - {label: "Link", name: "link", widget: "string"}
+              - {label: "Download", name: "download", widget: "boolean", default: false}
+          - {label: "Content", name: "content", widget: "markdown"}
+        - label: Next Steps Section
+          name: nextStepsSection
+          widget: object
+          fields:
+          - {label: "Title", name: "title", widget: "string"}
+          - {label: "Column A", name: "columnA", widget: "markdown"}
+          - {label: "Column B", name: "columnB", widget: "markdown"}
+        - label: Who We Are Section
+          name: whoSection
+          widget: object
+          fields:
+          - {label: "Title", name: "title", widget: "string"}
+          - {label: "Intro", name: "intro", widget: "markdown"}
+          - label: Partners
+            name: partners
+            widget: list
+            fields:
+            - {label: "Name", name: "name", widget: "string"}
+            - {label: "Acronym", name: "acronym", widget: "string", required: false}
+            - {label: "Content", name: "content", widget: "text"}
+            - {label: "Link", name: "link", widget: "string"}
+            - {label: "Image", name: "image", widget: "image"}
+            - {label: "Image Alt Text", name: "imageAlt", widget: "string"}
+        - label: Connect Section
+          name: connectSection
+          widget: object
+          fields:
+          - {label: "Title", name: "title", widget: "string"}
+          - {label: "Title Link", name: "titleLink", widget: "string"}
+          - {label: "Content", name: "content", widget: "text"}
       - label: Share Learning Resources
+
         name: share-learning-resources
         file: "src/share-learning-resources.md"
         editor:

src/open-robot-kit.md

@@ -0,0 +1,70 @@
+---
+outcomesSection:
+  title: Initial Outcomes
+  intro: |
+    The Tetra TMU students worked in teams to prototype designs for three robots: a Sound Bot, a Theatre Bot, and an Art Bot.
+  content: |
+    After the initial design and prototype work by Tetra TMU students, the IDRC team continued to iterate on the Tetra TMU Art Bot, focusing on a dual motor design. During these iterations, two microcontroller platforms, multiple DC motors and multiple chassis were tested.
+  cards:
+    - title: "Team 1: Sound Bot"
+      link: /assets/media/sound-bot.pdf
+      download: true
+    - title: "Team 2: Theatre Bot"
+      link: /assets/media/theatre-bot.pdf
+      download: true
+    - title: "Team 3: Art Bot"
+      link: /assets/media/art-bot.pdf
+      download: true
+nextStepsSection:
+  title: Next Steps
+  columnA: |
+    ### We need a robot that moves reliably
+    * With the motors that we have worked with so far, we can move the robot in the general direction that we want, but it isn’t exact enough and currently causes too much confusion for students
+    * Most of the work so far has been with continuous servo motors and DC motors; we’ve started some exploration of stepper motors, but more work is needed here to understand the feasibility of using stepper motors
+  columnB: |
+    ### Outstanding challenges
+    * Getting feedback on the rotation that the robot has made and the distance that it has moved so that we can move precisely
+      * For example, commonly available “hobby” motors vary in their performance from motor instance to motor instance, and such variation must be managed if these parts are to be used
+    * Finding parts that are
+      * Easy to get and are affordable
+      * Easy to work with
+      * Ideally offer some amount of customization (“one-size-fits-one”)
+whoSection:
+  title: Who We Are
+  intro: The **Open Robot Kit** is a collaborative effort between the Inclusive
+    Design Research Centre and Tetra TMU. This project is funded by the
+    Innovation, Science and Economic Development Canada’s Accessible Technology
+    Program and the Hewlett Foundation.
+  partners:
+    - name: Inclusive Design Research Centre
+      acronym: IDRC
+      content: IDRC is an international community of open source developers,
+        designers, researchers, educators and co-designers who work together to
+        proactively ensure that emerging technology and practices are designed
+        inclusively.
+      link: https://idrc.ocadu.ca
+    - name: Tetra TMU
+      content: Tetra TMU is a student chapter under the Tetra Society of North America
+        operating at Toronto Metropolitan University. We focus on bridging students and
+        people with disabilities to create new innovative assistive devices that
+        can improve their quality of life. We strive to make our communities
+        more inclusive through initiatives that consist of hands-on learning,
+        community awareness events, and skill development workshops.
+      link: https://tetraryerson.ca
+layout: layouts/open-robot-kit
+permalink: /open-robot-kit/
+headerBg: orange-75
+title: Open Robot Kit
+subtitle: Off the shelf robots are often inaccessible for many learners. The Open Robot Kit seeks to enable educators to easily
+  create a ‘one-size-fits-one’ robot that works with Weavly.
+aboutSection:
+  content: The Open Robot Kit has been working to create a guide for building a robot that can be used with Weavly, moving under the control of the program in Weavly and in synch with the character on the Weavly display. The robot will incorporate components that are affordable and easy to acquire, and can be built without extensive specialist knowledge or skills; for example, using just a screwdriver instead of soldering. 
+  title: About
+  image: /assets/media/art-bot.jpg
+  imageAlt: "Image of a blue robot with four black wheels and a blue marker mounted on the front of the chassis. Next to it, a black laptop computer on an orange desk is running Weavly in a web browser."
+connectSection:
+  title: Connect
+  titleLink: mailto:idrc@ocadu.ca
+  content: Please email us or connect with us via social media if you'd like to be
+    part of this conversation.
+---

src/projects/open-robot-kit.md

@@ -0,0 +1,8 @@
+---
+title: Open Robot Kit
+category: Robotics
+link: /open-robot-kit/
+description: Off the shelf robots are often inaccessible for many learners. The Open Robot Kit seeks to enable educators to easily create a ‘one-size-fits-one’ robot that works with Weavly.
+metaImage: /assets/media/art-bot.jpg
+metaImageAlt: Image of a blue robot with four black wheels and a blue marker mounted on the front of the chassis. Next to it, a black laptop computer on an orange desk is running Weavly in a web browser.
+---

src/projects/project-tactic.md

@@ -1,5 +1,5 @@
 ---
-title: " Project TACTIC"
+title: "Project TACTIC"
 type: Research
 category: Computational Thinking
 link: http://ctrl.education.illinois.edu/TACTICal.html