Merge pull request #6 from sommersoft/initial_site

Initial Site - Final
physaCI · May 30, 2020 · 1a464eb · 1a464eb
2 parents 8df669d + 45604b5
commit 1a464eb
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 39 deletions.
diff --git a/.github/workflows/master_physaci.yml b/.github/workflows/master_physaci.yml
@@ -4,15 +4,21 @@
 name: Build and deploy Python app to Azure Web App - physaci
 
 on:
+  release:
+    types: [published]
   push:
-    branches:
-      - master
+  pull_request:
 
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
 
     steps:
+    - name: Dump GitHub context
+      env:
+        GITHUB_CONTEXT: ${{ toJson(github) }}
+      run: echo "$GITHUB_CONTEXT"
+
     - uses: actions/checkout@master
 
     - name: Set up Python version
@@ -30,4 +36,5 @@ jobs:
       with:
         app-name: 'physaci'
         slot-name: 'production'
-        publish-profile: ${{ secrets.AzureAppService_PublishProfile_4e92bde43d604530a3bf366d0fc7e028 }}
+        publish-profile: ${{ secrets.AzureAppService_PublishProfile_4e92bde43d604530a3bf366d0fc7e028 }}
+      if: ${{ github.event_name == 'release' }}
diff --git a/static/images/physaci_rosiepi_event_sequence.png b/static/images/physaci_rosiepi_event_sequence.png
diff --git a/static/index.css b/static/index.css
@@ -5,7 +5,7 @@ body {
 .index-page {
     display: grid;
     grid-template-columns: 2fr;
-    grid-template-rows: 1fr 3fr;
+    grid-template-rows: 1fr 6fr;
     justify-items: center;
 }
 
@@ -47,31 +47,49 @@ body {
 .div-content {
     display: grid;
     grid-template-columns: 1fr 2fr 1fr;
-    grid-row-gap: 20px;
+    grid-row-gap: 2rem;
     grid-template-areas:
-        " about about about "
-        " . features . "
-        " snail snail snail"
+        " about-physaci  about-physaci  about-physaci "
+        " about-rosiepi  about-rosiepi  about-rosiepi "
+        " event_seq      event_seq      event_seq"
+        " snail          snail          snail"
 }
 
 .div-about-physaci {
-    grid-area: about;
+    grid-area: about-physaci;
     display: flex;
     justify-content: center;
+    border-bottom: 2px solid #D0BB98;
+    padding-bottom: 1rem;
+}
+
+.div-about-rosiepi {
+    grid-area: about-rosiepi;
+    display: flex;
+    justify-content: center;
+    border-bottom: 2px solid #D0BB98;
+    padding-bottom: 1rem;
 }
 
-.about-physaci {
+article {
     width: 90%;
     text-align: justify;
-    font-size: 3rem;
+    font-size: 2.5rem;
     font-family: Arial, Helvetica, sans-serif;
 }
 
-.feature-list {
-    grid-area: features;
-    text-align: start;
-    font-size: 2.7rem;
-    font-family: monospace;
+
+.div-event-seq {
+    grid-area: event_seq;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-bottom: 2px solid #D0BB98;
+    padding-bottom: 1rem;
+}
+
+.event-seq {
+    align-self: center;
 }
 
 .div-about-snail {

diff --git a/static/job_results.css b/static/job_results.css
@@ -25,7 +25,7 @@
     font-size: large;
     font-weight: 600;
     padding: .5em;
-    color: #313131;
+    color: #8E98A5;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
 }
@@ -37,4 +37,5 @@
     font-size: large;
     font-weight: 400;
     padding: 3px;
+    border-top: 2px solid #D0BB98;
 }
diff --git a/templates/header.html b/templates/header.html
@@ -0,0 +1,4 @@
+<img class="header-logo" src="../static/images/physa_silhouette_two_color.png" alt="physaCI Logo - Two Color">
+<span class="div-header-span-1-text">
+    <span class="color-complement-2">physa</span><span class="color-primary-1">CI</span>
+</span>
diff --git a/templates/index.html b/templates/index.html
@@ -9,34 +9,45 @@
     <body class="bg-color-secondary-1-1">
         <div class="index-page">
             <div class="upper bg-color-secondary-1-3">
-                <img class="header-logo" src="../static/images/physa_silhouette_two_color.png" alt="physaCI Logo - Two Color">
-                <span class="div-header-span-1-text">
-                    <span class="color-complement-2">physa</span><span class="color-primary-1">CI</span>
-                </span>
+                {% include 'header.html' -%}
             </div>
             <div class="div-message bg-color-secondary-1-1">
                 <div class="div-content">
                     <div class="div-about-physaci">
                         <article class="about-physaci">
-                            physaCI is a Continuous Integration (CI) platform designed to enable
-                            automated, physical testing of <a href="https://circuitpython.org" target="_blank">CircuitPython</a> firmware updates.
-                            The key components are a REST API framework, physical testing nodes hosted on Raspberry Pi single-board computers, and
-                            integration with GitHub.
+                            <i class="fas fa-angle-right fa-lg"></i>
+                            <b>physaCI</b>, combined with <i>RosiePi</i>, is a Continuous Integration (CI) platform designed to enable automated,
+                            physical testing of <a href="https://circuitpython.org" target="_blank">CircuitPython</a> firmware changes.
+                            The goal, as with all CI, is to help find code changes that break functionality before they reach the user.
+                            <i>physaCI</i> is the integration layer that links GitHub events with RosiPi test nodes. <i>physaCI</i> runs on 
+                            Microsoft Azure, as an Azure Functions serverless application.
                         </article>
                     </div>
-                    <div class="feature-list">
-                        Features Include:
-                        <ul class="fa-ul">
-                            <li><span class="fa-li"><i class="fas fa-angle-right fa-sm"></i></span>GitHub integration via a GitHub App</li>
-                            <li><span class="fa-li"><i class="fas fa-angle-right fa-sm"></i></span>Standardized, self-updating Raspberry Pi Ansible configuration</li>
-                            <li><span class="fa-li"><i class="fas fa-angle-right fa-sm"></i></span>Microsoft Azure hosted backend</li>
-                            <li><span class="fa-li"><i class="fas fa-angle-right fa-sm"></i></span>100% Open Source & MIT Licensed</li>
-                        </ul>
+                    <div class="div-about-rosiepi">
+                        <article class="about-rosiepi">
+                            <i class="fas fa-angle-right fa-lg"></i>
+                            <b>RosiePi</b>, is the workhorse of this combination. It is a collection of programs and services configured
+                            to integrate <i>physaCI</i> events with running the actual physical tests. <i>RosiePi</i> test nodes are run on
+                            <a href="https://www.raspberrypi.org/" target="_blank">Raspberry Pi</a> single-board computers. Nodes register
+                            themselves with <i>physaCI</i> on a scheduled basis, allowing <i>physaCI</i> to send push notification-style messages and
+                            queue jobs in a balanced manner. Once a node has queued a test job, it will compile the firmware for each connected
+                            CircuitPython board, using the code in the affected GitHub pull request. The test node will then run tests,
+                            which live in the CircuitPython repository, on the connected board(s). These tests are also pulled from the
+                            affected pull request, allowing tests to be updated with code changes. After tests are completed, the test node
+                            sends the results to <i>physaCI</i>.
+                        </article>
+                    </div>
+                    <div class="div-event-seq">
+                        <article class="event-seq">
+                            <i class="fas fa-angle-right fa-lg"></i>
+                            Here is an example of the workflow of a single instance:
+                        </article>
+                        <img src="../static/images/physaci_rosiepi_event_sequence.png" alt="physaCI & RosiePi Event Sequence">
                     </div>
                     <div class="div-about-snail">
                         <article class="about-snail">
                             What's up with the snail? Well, while brainstorming ideas for the backend of the service,
-                            "physical CI" came to mind. Then, it was widdled down to "physaCI" [fizza-see-eye]. You know, cool internet
+                            "physical CI" came to mind. Then, it was whittled down to "physaCI" [fizza-see-eye]. You know, cool internet
                             word play. Then the time came for a logo. Coincidentally, <i>Physa</i> is the genus of a group of small...SNAILS!
                             Couldn't have planned that...
                         </article>

diff --git a/templates/job_results_page.html b/templates/job_results_page.html
@@ -2,7 +2,7 @@
 <div class="board-results-wrapper">
     {%- for result in node_results -%}
     <div id="{{ 'board-result-' ~ loop.index }}" class="board-result">
-        <div class="board-results-summary board-result-child bg-color-complement-2">
+        <div class="board-results-summary board-result-child bg-color-secondary-1-3">
             <div class="board-result-child">
                 <p class="board-result-grandchild"><b>Tests Passed:</b> {{ result['tests_passed'] }}</p>
                 <p class="board-result-grandchild"><b>Tests Failed:</b> {{ result['tests_failed'] }}</p>

diff --git a/templates/physaci_results_page.html b/templates/physaci_results_page.html
@@ -13,10 +13,7 @@
         <div class="page-wrapper">
             <div class="div-header bg-color-secondary-1-3">
                 <div class="div-header-span-1">
-                    <img class="header-logo" src="../static/images/physa_silhouette_two_color.png" alt="physaCI Logo - Two Color">
-                    <span class="div-header-span-1-text">
-                        <span class="color-complement-2">physa</span><span class="color-primary-1">CI</span>
-                    </span>
+                    {% include 'header.html' -%}
                 </div>
             </div>
             <div class="vert-divider"></div>