Merge branch 'main' into marbling-challenge

shiffman · web-flow · commit a1f21f5bdec7 · 2024-05-01T18:46:42.000-04:00
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -200,6 +200,15 @@
         "code",
         "doc"
       ]
+    },
+    {
+      "login": "aryanpingle",
+      "name": "Aryan Pingle",
+      "avatar_url": "https://avatars.githubusercontent.com/u/49340972?v=4",
+      "profile": "https://github.com/aryanpingle",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # Coding Train Website
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-21-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-22-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 This repo holds the website for [thecodingtrain.com](https://thecodingtrain.com/). The website is built with:
@@ -70,6 +70,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/kvashchuka"><img src="https://avatars.githubusercontent.com/u/12686827?v=4?s=100" width="100px;" alt="Anna Kvashchuk"/><br /><sub><b>Anna Kvashchuk</b></sub></a><br /><a href="https://github.com/CodingTrain/thecodingtrain.com/commits?author=kvashchuka" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://silvestristefano.github.io/"><img src="https://avatars.githubusercontent.com/u/18087952?v=4?s=100" width="100px;" alt="Stefano Silvestri"/><br /><sub><b>Stefano Silvestri</b></sub></a><br /><a href="#ideas-SilvestriStefano" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/CodingTrain/thecodingtrain.com/commits?author=SilvestriStefano" title="Code">💻</a> <a href="https://github.com/CodingTrain/thecodingtrain.com/commits?author=SilvestriStefano" title="Documentation">📖</a></td>
     </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/aryanpingle"><img src="https://avatars.githubusercontent.com/u/49340972?v=4?s=100" width="100px;" alt="Aryan Pingle"/><br /><sub><b>Aryan Pingle</b></sub></a><br /><a href="https://github.com/CodingTrain/thecodingtrain.com/commits?author=aryanpingle" title="Code">💻</a></td>
+    </tr>
   </tbody>
 </table>
 
diff --git a/content/videos/challenges/112-3d-rendering-with-rotation-and-projection/showcase/contribution-1713752638.json b/content/videos/challenges/112-3d-rendering-with-rotation-and-projection/showcase/contribution-1713752638.json
@@ -0,0 +1,10 @@
+{
+  "title": "3D rotation and projection in litecanvas()",
+  "author": {
+    "name": "Luiz Bills",
+    "url": "https://github.com/luizbills"
+  },
+  "url": "https://litecanvas.js.org/?c=eJyNVUtz2jAQvvMrtodO5KLwKqe2tJekhVtnmpk28fggg5IIjMzIohAy%2FPeuHsYWsZPOMFje%2Fb7Vp33ImdB8zuRfVpCo07nfyrkWuQQhhSYRPHcACnHgMIHfs6ubKXyF6fXsx%2FQGvpWLPozhk%2FfiGgkblS%2B5CzOBGA0A8ZDCAH8Jda%2B4HoavxmJfExMhF1IXFfvSaKBQfyQU%2Bn2I9xSeKBwSh2uC1T0Njsu3PDVAGKzV8dJ%2B2ehIqlzxhTmsMTD5kJl0D3CdCckL%2FZRxMo46x1p1tpsF05wstKuQ43SR1BsMO2i4zxWQjGsQJtJnfHzxOe1lXD7oRzR1u44MMM9lodFvEm5RozXTSuxJr9dzrFgkkYWamCrXzAlG2HqbEWtAWX%2BIFRJRE8vhW7G3J6yHvIG%2Fa8Z76WUSR1cVs%2BrCM84JjacyJ67I6D4GeV4otvNTMM8KMohsxTAjxHXs95%2B%2FKGBtjHlbPBLj14rJAguwJuVMjGg1K6OopTzj85JIFEUEBSKgC8MI3sOYVmKjEIYQ9JIaNnKmNgIF0QA42tnbkLDbShKjkFLfR06oaVDiW4Ql8cD8SoQxDANDeo5IT4iP4Y6%2BhGZDn31bZzbPM9OkDDm%2BkSufynfWd%2B5IPSltIKWelJYO9Ih7IG6jd5OJQ0SgH%2FEJku%2FgWqlckYsZ3piZWICbFF5c2CZwURUvymluqrRVGlQbCa4XY3ePnVhLx1oiyx4DlxXLTWOxXfvbImCuHHNl9nPMVZ0Jltc1qRRJvErgA%2BZnlcTLxAOO%2FumkoR3jIaVT%2Bo7muIrrrZIGE1Svug8UWwicBrevR7d%2BEOZ5cSLY21XWXuvA0BPSBv5mbdJz%2B5qeszDhLi2frXONoZhXlNz9v5K2PLydhBff1bqS4J73H9FQTLzHuYyfzN8hMeR%2FryFjCQ%3D%3D",
+  "submittedOn": "2024-04-22T02:23:58.468Z",
+  "socialPermission": true
+}
diff --git a/content/videos/challenges/112-3d-rendering-with-rotation-and-projection/showcase/contribution-1713752638.png b/content/videos/challenges/112-3d-rendering-with-rotation-and-projection/showcase/contribution-1713752638.png
diff --git a/content/videos/challenges/171-wave-function-collapse/showcase/contribution-1707512574.json b/content/videos/challenges/171-wave-function-collapse/showcase/contribution-1707512574.json
@@ -0,0 +1,8 @@
+{
+  "title": "Sudoku Solver",
+  "author": {
+    "name": "Nathan Rudasill"
+  },
+  "url": "https://editor.p5js.org/nrudasill/sketches/A0ANL-Q8U",
+  "submittedOn": "2024-02-09T21:02:54.373Z"
+}
diff --git a/content/videos/challenges/171-wave-function-collapse/showcase/contribution-1707512574.png b/content/videos/challenges/171-wave-function-collapse/showcase/contribution-1707512574.png
diff --git a/content/videos/code/1-intro/3-shapes-drawing/showcase/contribution-1713756411.json b/content/videos/code/1-intro/3-shapes-drawing/showcase/contribution-1713756411.json
@@ -0,0 +1,10 @@
+{
+  "title": "The Path",
+  "author": {
+    "name": "Joe DeNavas",
+    "url": "https://openprocessing.org/sketch/2246680"
+  },
+  "url": "https://openprocessing.org/sketch/2246680",
+  "submittedOn": "2024-04-22T03:26:52.115Z",
+  "socialPermission": false
+}
diff --git a/content/videos/code/1-intro/3-shapes-drawing/showcase/contribution-1713756411.png b/content/videos/code/1-intro/3-shapes-drawing/showcase/contribution-1713756411.png
diff --git a/content/videos/code/2-variables/4-random/showcase/contribution-1714202004.json b/content/videos/code/2-variables/4-random/showcase/contribution-1714202004.json
@@ -0,0 +1,9 @@
+{
+  "title": "Random triangle",
+  "author": {
+    "name": "Irina Hrubanova"
+  },
+  "url": "https://editor.p5js.org/Iri89/sketches/VY6PxLlgm",
+  "submittedOn": "2024-04-27T07:13:25.204Z",
+  "socialPermission": true
+}
diff --git a/content/videos/code/2-variables/4-random/showcase/contribution-1714202004.png b/content/videos/code/2-variables/4-random/showcase/contribution-1714202004.png
diff --git a/content/videos/code/3-conditionals/2-bouncing/showcase/contribution-1714249851.json b/content/videos/code/3-conditionals/2-bouncing/showcase/contribution-1714249851.json
@@ -0,0 +1,9 @@
+{
+  "title": "Bouncing Ball",
+  "author": {
+    "name": "Irina Hrubanova"
+  },
+  "url": "https://editor.p5js.org/Iri89/sketches/Ec9Jw2gQs",
+  "submittedOn": "2024-04-27T20:30:51.446Z",
+  "socialPermission": true
+}
diff --git a/content/videos/code/3-conditionals/2-bouncing/showcase/contribution-1714249851.png b/content/videos/code/3-conditionals/2-bouncing/showcase/contribution-1714249851.png
diff --git a/content/videos/noc/3-angles/4-polar-coordinates/showcase/contribution-1714368728.json b/content/videos/noc/3-angles/4-polar-coordinates/showcase/contribution-1714368728.json
@@ -0,0 +1,10 @@
+{
+  "title": "Birthday Cake",
+  "author": {
+    "name": "panna",
+    "instagram": "https://www.instagram.com/white_pomeranian_panna/"
+  },
+  "url": "https://editor.p5js.org/tamaki.komatsuzaki/sketches/e_1ULF303",
+  "submittedOn": "2024-04-29T05:32:08.936Z",
+  "socialPermission": true
+}
diff --git a/content/videos/noc/3-angles/4-polar-coordinates/showcase/contribution-1714368728.png b/content/videos/noc/3-angles/4-polar-coordinates/showcase/contribution-1714368728.png
diff --git a/content/videos/physics-libraries/box2d/3-coordinate-and-vectors/showcase/contribution-1714548437.json b/content/videos/physics-libraries/box2d/3-coordinate-and-vectors/showcase/contribution-1714548437.json
@@ -0,0 +1,9 @@
+{
+  "title": "Refraction of the beam",
+  "author": {
+    "name": "rboldyrev"
+  },
+  "url": "https://editor.p5js.org/rboldyrev/full/hA-Plefl9",
+  "submittedOn": "2024-05-01T07:27:18.110Z",
+  "socialPermission": true
+}
diff --git a/content/videos/physics-libraries/box2d/3-coordinate-and-vectors/showcase/contribution-1714548437.png b/content/videos/physics-libraries/box2d/3-coordinate-and-vectors/showcase/contribution-1714548437.png
diff --git a/content/videos/sound/8-microphone-input/showcase/contribution-1707305245.json b/content/videos/sound/8-microphone-input/showcase/contribution-1707305245.json
@@ -0,0 +1,10 @@
+{
+  "title": "Voice Pong! Pong game control via voice input",
+  "author": {
+    "name": "Peyman Majidi",
+    "url": "https://www.youtube.com/@peymanx/",
+    "instagram": "https://www.instagram.com/peymanmajidi.ir/"
+  },
+  "url": "https://editor.p5js.org/peymanx/sketches/vbKUCSozU",
+  "submittedOn": "2024-02-07T11:27:25.448Z"
+}
diff --git a/content/videos/sound/8-microphone-input/showcase/contribution-1707305245.png b/content/videos/sound/8-microphone-input/showcase/contribution-1707305245.png
diff --git a/content/videos/webgl/8-3d-custom-shapes/showcase/contribution-1714049003.jpg b/content/videos/webgl/8-3d-custom-shapes/showcase/contribution-1714049003.jpg
diff --git a/content/videos/webgl/8-3d-custom-shapes/showcase/contribution-1714049003.json b/content/videos/webgl/8-3d-custom-shapes/showcase/contribution-1714049003.json
@@ -0,0 +1,9 @@
+{
+  "title": "Sea Shell",
+  "author": {
+    "name": "Kathy McGuiness"
+  },
+  "url": "https://editor.p5js.org/kfahn/sketches/NPdma0VRe",
+  "submittedOn": "2024-04-25T12:43:23.896Z",
+  "socialPermission": true
+}
diff --git a/src/components/TimestampTimeline.module.css b/src/components/TimestampTimeline.module.css
@@ -11,6 +11,12 @@
   display: flex;
   padding: 0;
   cursor: pointer;
+  
+  &:first-child {
+    /* border-top will be set by the variant */
+    border-top: none !important;
+  }
+
   & span {
     display: flex;
     align-items: center;
@@ -66,6 +72,10 @@
   & .time {
     color: var(--red);
   }
+
+  & .timestamp {
+    border-top: var(--border-red-light);
+  }
 }
 
 .cyan {
@@ -81,6 +91,10 @@
   & .time {
     color: var(--cyan);
   }
+
+  & .timestamp {
+    border-top: var(--border-cyan-light);
+  }
 }
 
 @media (--reduced) {
diff --git a/src/components/challenges/VideoSection.module.css b/src/components/challenges/VideoSection.module.css
@@ -149,6 +149,8 @@
   color: var(--cyan);
   font-size: var(--maru-small);
   font-family: var(--maru-mono);
+
+  background-color: var(--red-lightest);
 }
 
 .partTimeline.hide,
diff --git a/src/components/tracks/OverviewTimeline.js b/src/components/tracks/OverviewTimeline.js
@@ -96,7 +96,7 @@ const ChapterSection = memo(
     return (
       <ul className={css.chapterList}>
         {chapter.title && (
-          <li>
+          <li className={css.chapterListItem}>
             <button
               className={cn(
                 css.chapterTitle,
@@ -129,7 +129,7 @@ const ChapterSection = memo(
                 return (
                   <li
                     key={`${video.slug}-${partIndex}`}
-                    className={cn(css.videoItem, {
+                    className={cn(css.videoItem, css.chapterListItem, {
                       [css.seen]: hasSeenPart,
                       [css.last]: isLastVideo && partIndex === currentPartIndex
                     })}>
@@ -146,7 +146,7 @@ const ChapterSection = memo(
             ) : (
               <li
                 key={video.slug}
-                className={cn(css.videoItem, {
+                className={cn(css.videoItem, css.chapterListItem, {
                   [css.seen]: hasSeenVideo,
                   [css.last]: isLastVideo
                 })}>
diff --git a/src/components/tracks/OverviewTimeline.module.css b/src/components/tracks/OverviewTimeline.module.css
@@ -36,6 +36,13 @@
   padding: 0;
 }
 
+.chapterListItem {
+  /*
+  CSS 'border' interferes with the track stop lines, so we use a box shadow that matches 'border-red-light'.
+  */
+  box-shadow: 0 -1px 0 rgba(255, 0, 0, 0.1);
+}
+
 .chapterTitle {
   position: relative;
   height: var(--baseline);
diff --git a/src/components/tracks/VideoSection.module.css b/src/components/tracks/VideoSection.module.css
@@ -150,6 +150,8 @@
   color: var(--red);
   font-size: var(--maru-small);
   font-family: var(--maru-mono);
+
+  background-color: var(--red-lightest);
 }
 
 .overviewTimeline.hide,
diff --git a/src/styles/variables.css b/src/styles/variables.css
@@ -111,6 +111,7 @@
   --border-red-light: 1px solid rgba(255, 0, 0, 0.1);
   --border-orange: 1px solid var(--orange);
   --border-cyan: 1px solid var(--cyan);
+  --border-cyan-light: 1px solid rgba(0, 128, 128, 0.1);
   --border-pink: 1px solid var(--pink);
 
   --box-padding: 25px;
diff --git a/static/_redirects b/static/_redirects
@@ -63,5 +63,6 @@
 /genuary1 https://editor.p5js.org/codingtrain/sketches/vN8EEr59I 302!
 /particles /challenges/78-simple-particle-system 302!
 /ca /challenges/179-wolfram-ca 302!
+/noise /tracks/noise 302!
 
 # challenges shortcuts will be appended to this file at build time as /{videoNumber} -> /challenges/{slug}
