Merge branch 'main' into feature-Dark-mode

Author: Yashasewi

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

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>
 

content/pages/homepage/index.json

@@ -32,11 +32,11 @@
     "description": "Watch Dan take on Coding Challenges in p5.js and Processing. The challenge topics include algorithmic art, machine learning, simulation, generative poetry, and more.",
     "featured": [
       "182-apollonian-gasket",
-      "145-ray-casting-2d",
-      "50-animated-circle-packing",
-      "35-traveling-salesperson",
-      "c4-worley-noise",
-      "165-slide-puzzle"
+      "17-fractal-trees-space-colonization",
+      "173-snake-applesoft-basic",
+      "83-p5-sketch-chrome-extension",
+      "78-simple-particle-system",
+      "87-3d-knots"
     ],
     "challengesCta": {
       "text": "ready to explore? try a challenge!",
@@ -47,14 +47,14 @@
   "passengerShowcase": {
     "title": "Passenger showcase highlights",
     "featured": [
-      "challenges/182-apollonian-gasket/showcase/contribution-1711110753.json",
-      "challenges/182-apollonian-gasket/showcase/contribution-1711767675.json",
-      "challenges/182-apollonian-gasket/showcase/contribution-1711308188.json",
-      "challenges/166-image-to-ascii/showcase/contribution-1711741187.json",
-      "challenges/154-tic-tac-toe-minimax/showcase/contribution-1710990124.json",
-      "challenges/96-visualizing-digits-of-pi/showcase/contribution-1711590403.json",
-      "challenges/52-random-walker/showcase/contribution-1710758696.json",
-      "challenges/179-wolfram-ca/showcase/contribution-1710949601.json"
+      "code/2-variables/5-map/showcase/contribution-1713120295.json",
+      "challenges/180-falling-sand/showcase/contribution-1713541543.json",
+      "noc/4-particles/2-particle-emitters/showcase/contribution-1711836756.json",
+      "challenges/90-dithering/showcase/contribution-1711892032.json",
+      "challenges/4-purple-rain/showcase/contribution-1687374037.json",
+      "challenges/171-wave-function-collapse/showcase/contribution-1688140264.json",
+      "challenges/43-context-free-grammar/showcase/contribution1.json",
+      "webgl/2-3d-geometries/showcase/contribution-1710194669.json"
     ],
     "showcaseCta": {
       "text": "Want to see more?",

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"
+}

content/videos/challenges/171-wave-function-collapse/showcase/contribution-1707512574.png

@@ -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"
+}

content/videos/sound/8-microphone-input/showcase/contribution-1707305245.json

@@ -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) {

content/videos/sound/8-microphone-input/showcase/contribution-1707305245.png

@@ -150,6 +150,8 @@
   color: var(--cyan);
   font-size: var(--maru-small);
   font-family: var(--maru-mono);
+
+  background-color: var(--red-lightest);
 }
 
 .partTimeline.hide,

src/components/TimestampTimeline.module.css

@@ -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
                 })}>