backporting some of the fixes from web dev v3

Author: btholt

Diff for: components/github.js

@@ -23,14 +23,14 @@ export default function GitHub() {
             data-name="Subtraction 33"
             d="M-24967.5,8041a15.9,15.9,0,0,1-11.312-4.688A15.893,15.893,0,0,1-24983.5,8025a15.893,15.893,0,0,1,4.689-11.315A15.894,15.894,0,0,1-24967.5,8009a15.894,15.894,0,0,1,11.313,4.686A15.893,15.893,0,0,1-24951.5,8025a15.893,15.893,0,0,1-4.689,11.313A15.9,15.9,0,0,1-24967.5,8041Zm-3.781-4.571h0v3.918h7.895v-6.665a1.836,1.836,0,0,0-1.2-1.718c5.1-.617,7.467-2.975,7.467-7.424a7.176,7.176,0,0,0-1.637-4.728,6.74,6.74,0,0,0,.275-1.812,4.34,4.34,0,0,0-.52-2.452.574.574,0,0,0-.359-.1c-1.061,0-3.465,1.411-3.936,1.694a16.644,16.644,0,0,0-4.2-.489,16.379,16.379,0,0,0-3.969.445c-.846-.5-2.91-1.649-3.859-1.649a.566.566,0,0,0-.354.095,4.3,4.3,0,0,0-.521,2.452,6.7,6.7,0,0,0,.244,1.718,7.346,7.346,0,0,0-1.6,4.822,7.263,7.263,0,0,0,1.533,4.985c1.193,1.359,3.115,2.165,5.871,2.464a1.826,1.826,0,0,0-1.129,1.693v.5h0l-.006,0a7.121,7.121,0,0,1-2.033.363,2.608,2.608,0,0,1-.965-.158,4.438,4.438,0,0,1-1.836-1.881,2.361,2.361,0,0,0-1.248-1.091,3.472,3.472,0,0,0-1.217-.3.584.584,0,0,0-.545.224.282.282,0,0,0,.027.367,1.875,1.875,0,0,0,.447.307,4.732,4.732,0,0,1,.561.355,10.726,10.726,0,0,1,1.682,2.755c.043.092.078.163.105.217a3.876,3.876,0,0,0,2.42,1.185,6.036,6.036,0,0,0,.607.025c.875,0,1.988-.124,2-.125Z"
             transform="translate(11461 -1015)"
-            fill="var(--icons)"
+            fill="var(--footer-icons)"
           />
           <g
             id="Ellipse_670"
             data-name="Ellipse 670"
             transform="translate(-13522.5 6994)"
             fill="none"
-            stroke="var(--icons)"
+            stroke="var(--footer-icons)"
             strokeWidth="1"
           >
             <circle cx="16" cy="16" r="16" stroke="none" />

Diff for: components/layout.js

@@ -23,6 +23,14 @@ function Layout({ children }) {
             linkedin={courseInfo.social.linkedin}
           />
         </div>
+        <script async defer src="https://a.holt.courses/latest.js"></script>
+        <noscript>
+          <img
+            src="https://a.holt.courses/noscript.gif"
+            alt=""
+            referrerPolicy="no-referrer-when-downgrade"
+          />
+        </noscript>
       </HeaderProvider>
     </CourseInfoProvider>
   );

Diff for: components/linkedin.js

@@ -22,7 +22,7 @@ export default function LinkedIn() {
             id="Path_375"
             data-name="Path 375"
             d="M115.789,633.073a2.324,2.324,0,0,1,1.682.676,2.194,2.194,0,0,1,.695,1.627V662.8a2.131,2.131,0,0,1-.695,1.609,2.314,2.314,0,0,1-1.646.659H88.69a2.307,2.307,0,0,1-1.646-.659,2.128,2.128,0,0,1-.695-1.609V635.376a2.19,2.19,0,0,1,.695-1.627,2.322,2.322,0,0,1,1.682-.676h27.063Zm-20.224,9.672a2.561,2.561,0,0,0,0-3.584,2.658,2.658,0,0,0-1.938-.712,2.724,2.724,0,0,0-1.957.712,2.371,2.371,0,0,0-.75,1.792,2.4,2.4,0,0,0,.731,1.792,2.605,2.605,0,0,0,1.9.713h.037A2.7,2.7,0,0,0,95.565,642.745ZM96,645.434H91.213V659.88H96Zm17.3,6.144a7.007,7.007,0,0,0-1.573-4.9,5.68,5.68,0,0,0-6.839-.769,5.663,5.663,0,0,0-1.426,1.573v-2.048H98.674q.036.841,0,7.717v6.728h4.791V651.8a3.592,3.592,0,0,1,.146-1.17,2.913,2.913,0,0,1,.878-1.206,2.429,2.429,0,0,1,1.609-.549,2.108,2.108,0,0,1,1.865.914,4.265,4.265,0,0,1,.549,2.341v7.752H113.3Z"
-            fill="var(--icons)"
+            fill="var(--footer-icons)"
           />
         </g>
       </g>

Diff for: components/twitter.js

@@ -22,7 +22,7 @@ export default function Twitter() {
             id="Path_419"
             data-name="Path 419"
             d="M266.12,1148.861v1.035a23.092,23.092,0,0,1-1.507,8.1,24.08,24.08,0,0,1-4.475,7.381,22.175,22.175,0,0,1-7.306,5.4,24.129,24.129,0,0,1-10,2.07,23.7,23.7,0,0,1-6.667-.945,22.83,22.83,0,0,1-5.936-2.655q.959.091,1.963.09a16.518,16.518,0,0,0,5.434-.9,17.111,17.111,0,0,0,4.749-2.52,8.275,8.275,0,0,1-4.749-1.643,7.8,7.8,0,0,1-2.877-3.983,8.268,8.268,0,0,0,1.507.135,8.58,8.58,0,0,0,2.146-.27,8.16,8.16,0,0,1-5.685-4.344,8.326,8.326,0,0,1-.89-3.578v-.135a7.775,7.775,0,0,0,3.744,1.035,8.183,8.183,0,0,1-2.671-2.9,7.817,7.817,0,0,1-.982-3.848,7.948,7.948,0,0,1,1.1-4.05,23.53,23.53,0,0,0,16.895,8.46,9.221,9.221,0,0,1-.183-1.845,7.787,7.787,0,0,1,1.1-4.05,8.216,8.216,0,0,1,2.991-2.948,7.991,7.991,0,0,1,4.087-1.1,8.184,8.184,0,0,1,5.982,2.566,16.087,16.087,0,0,0,5.205-1.98,7.784,7.784,0,0,1-1.393,2.588,8.4,8.4,0,0,1-2.215,1.913,16.856,16.856,0,0,0,4.749-1.305A17.032,17.032,0,0,1,266.12,1148.861Z"
-            fill="var(--icons)"
+            fill="var(--footer-icons)"
           />
         </g>
       </g>

Diff for: package-lock.json

@@ -1,5 +1,5 @@
 import Head from "next/head";
-import "@fortawesome/fontawesome-free/js/all.js";
+import "@fortawesome/fontawesome-free/css/all.css";
 
 import "highlight.js/styles/a11y-light.css";
 import "../styles/variables.css";

Diff for: pages/_app.js

@@ -5,13 +5,6 @@ import getCourseConfig from "../../../data/course";
 import Corner from "../../../components/corner";
 import { Context } from "../../../context/headerContext";
 
-// export const meta = (routeData) => {
-//   return {
-//     title: `${routeData.data.section} – ${routeData.data.title}`,
-//     description: routeData.data.attributes.description,
-//   };
-// };
-
 export default function LessonSlug({ post }) {
   const courseInfo = getCourseConfig();
   const [_, setHeader] = useContext(Context);

Diff for: pages/lessons/[section]/[slug].js

@@ -387,14 +387,13 @@ ol.sections-name > li {
   border-top-right-radius: 5px;
 }
 ol.sections-name .lesson-preface {
-  /* content: counter(my-awesome-counter); */
+  font-size: 100px;
   color: var(--icons);
-  display: flex;
   position: relative;
   align-items: center;
   justify-content: center;
   background: #93aca7;
-  font-size: 30px;
+  display: flex;
   padding: 25px;
   width: 30%;
 }
@@ -465,6 +464,10 @@ ol.sections-name .lesson-details {
   .lesson-container {
     padding: 2px;
   }
+
+  ol.sections-name .lesson-preface {
+    font-size:60px
+   }
 }
 
 .lesson-details h3 {

Diff for: styles/courses.css

@@ -18,6 +18,7 @@
   --corner-active: var(--highlight);
   --corner-inactive: #f4f4f4;
   --icons: var(--highlight);
+  --footer-icons: var(--highlight);
 
   --emphasized-bg: #dce8ff;
   --emphasized-border: #aab6d2;