Merge branch 'CodingTrain:main' into update-homepage-6-11-24

Author: kfahn22

CONTRIBUTING.md

@@ -23,7 +23,7 @@ Here are the types of contributions we are looking for:
 
 1. Share your creative work inspired by a coding challenge or tutorial in the showcase!
 
-   - You can submit your showcase with the [Passenger Showcase Form](http://thecodingtrain.com/submit)
+   - You can submit your showcase with the [Passenger Showcase Form](https://thecodingtrain.com/submit)
 
 2. Add a new track to the site! (https://github.com/CodingTrain/thecodingtrain.com/issues/279)
 

HACKTOBERFEST.md

@@ -4,7 +4,7 @@ This Hacktoberfest, here are the ways you can contribute to The Coding Train:
 
 1. **Share your creative work on the Passenger Showcase!**
 
-   - For your submission to count towards Hacktoberfest, you must manually create a Pull Request to the website repository. You can follow along with the [Passenger Showcase Guide](http://thecodingtrain.com/guides/passenger-showcase-guide) (scroll down below the form) to create your Pull Request.
+   - For your submission to count towards Hacktoberfest, you must manually create a Pull Request to the website repository. You can follow along with the [Passenger Showcase Guide](https://thecodingtrain.com/guides/passenger-showcase-guide) (scroll down below the form) to create your Pull Request.
 
 2. **Curate content for the website**
 
@@ -21,6 +21,7 @@ This Hacktoberfest, here are the ways you can contribute to The Coding Train:
    - You can contribute to other [Coding Train repositories](https://github.com/CodingTrain/) as well. You will need to ask for the Pull Request to be accepted for Hacktoberfest to count it towards your progress.
 
 ## Guide For Newer Contributors
+
 If you are new to open source contributions, here are some useful resources that can help you get started:
 
 - [Git and GitHub for Poets](https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZF9C0YMKuns9sLDzK6zoiV): A Coding Train video series for Git and GitHub beginners.

README.md

@@ -1,13 +1,15 @@
 # Coding Train Website
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+
 [![All Contributors](https://img.shields.io/badge/all_contributors-24-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:
 
 - [Gatsby](https://www.gatsbyjs.com/) to perform the static site rendering
-- [React](https://reactjs.org/) as the general JavaScript framework
+- [React](https://react.dev/) as the general JavaScript framework
 
 ## Table of Contents
 

content-testing/schemas.js

@@ -289,7 +289,7 @@ const socialGroup = strictObject({
   title: string().required(),
   links: array(
     strictObject({
-      url: string().url().required(),
+      url: urlOrRelativeLinkValidator.required(),
       site: string()
         .oneOf(['twitter', 'discord', 'instagram', 'youtube', 'github'])
         .required()

content-testing/validators.js

@@ -87,7 +87,7 @@ const dateRangeValidator = string().test(
   (value, context) => {
     if (!value) return true;
 
-    // yup is too leniant with `.date()` and allows broken string date formats
+    // yup is too lenient with `.date()` and allows broken string date formats
     // we only want to allow `yyyy-mm-dd` or a full ISO 8601 date in UTC
     // see https://github.com/jquense/yup/blob/master/src/util/isodate.js
 
@@ -319,7 +319,8 @@ const relativeLinks = {
   '/guides': slugs.guides,
   '/showcase': new Set(),
   '/faq': new Set(),
-  '/about': new Set()
+  '/about': new Set(),
+  '/discord': new Set()
 };
 
 const urlOrRelativeLinkValidator = string().test(

content/pages/about/index.json

@@ -36,7 +36,7 @@
           "url": "https://www.youtube.com/c/TheCodingTrain/",
           "site": "youtube"
         },
-        { "url": "https://thecodingtrain.com/discord", "site": "discord" },
+        { "url": "/discord", "site": "discord" },
         { "url": "https://github.com/CodingTrain", "site": "github" }
       ]
     }

content/pages/faqs/cafe-car.json

@@ -1,6 +1,6 @@
 {
   "question": "Cafe Car",
   "answer": {
-    "text": "The Cafe Car is the place to meet and chat with the Coding Train community! Your first stop is the [Discord](https://thecodingtrain.com/discord), but we’d also love for you to say hi on [Twitter](https://twitter.com/thecodingtrain) and [Instagram](https://www.instagram.com/the.coding.train)!"
+    "text": "The Cafe Car is the place to meet and chat with the Coding Train community! Your first stop is the [Discord](/discord), but we’d also love for you to say hi on [Twitter](https://twitter.com/thecodingtrain) and [Instagram](https://www.instagram.com/the.coding.train)!"
   }
 }

content/pages/faqs/find-help.json

@@ -1,10 +1,7 @@
 {
   "question": "Where can I find help with my code?",
   "answer": {
-    "text": "We have a friendly and helpful community in the [Coding Train Discord](https://thecodingtrain.com/discord), which has a number of help channels. You can also visit [The Processing Foundation's forum](https://discourse.processing.org/), a great place to ask specific questions related to Processing and p5.js.",
-    "list": [
-      "[The Coding Train's Discord](https://thecodingtrain.com/discord)",
-      "[The Processing Foundation's Forum](https://discourse.processing.org/)"
-    ]
+    "text": "We have a friendly and helpful community in the [Coding Train Discord](/discord), which has a number of help channels. You can also visit [The Processing Foundation's forum](https://discourse.processing.org/), a great place to ask specific questions related to Processing and p5.js.",
+    "list": ["[The Coding Train's Discord](/discord)", "[The Processing Foundation's Forum](https://discourse.processing.org/)"]
   }
 }

content/pages/faqs/livestream-notification.json

@@ -1,6 +1,6 @@
 {
   "question": "Where and when do you live stream? Can I get a notification?",
   "answer": {
-    "text": "The best way to stay up to date on my schedule is to [join the Coding Train discord](https://thecodingtrain.com/discord) and subscribe to the “notifications” role.\n Live streams occur on both [Twitch](https://www.twitch.tv/codingtrainchoochoo) and [YouTube](https://www.youtube.com/c/TheCodingTrain/featured). Each platform has various options for receiving notifications. On YouTube, for example you can [subscribe to The Coding Train](https://www.youtube.com/c/TheCodingTrain) and click the bell for all notifications. For streams scheduled in advance, they’ll be listed on the [homepage of this website](/)."
+    "text": "The best way to stay up to date on my schedule is to [join the Coding Train discord](/discord) and subscribe to the “notifications” role.\n Live streams occur on both [Twitch](https://www.twitch.tv/codingtrainchoochoo) and [YouTube](https://www.youtube.com/c/TheCodingTrain/featured). Each platform has various options for receiving notifications. On YouTube, for example you can [subscribe to The Coding Train](https://www.youtube.com/c/TheCodingTrain) and click the bell for all notifications. For streams scheduled in advance, they’ll be listed on the [homepage of this website](/)."
   }
 }

content/pages/faqs/suggest-topic.json

@@ -1,6 +1,6 @@
 {
   "question": "How do I suggest a topic for a Coding Challenge or Track?",
   "answer": {
-    "text": "You can share ideas by [opening an issue in the Coding Train Suggestion Box](https://github.com/CodingTrain/Suggestion-Box) or by [joining the Coding Train discord](https://thecodingtrain.com/discord)."
+    "text": "You can share ideas by [opening an issue in the Coding Train Suggestion Box](https://github.com/CodingTrain/Suggestion-Box) or by [joining the Coding Train discord](/discord)."
   }
 }

content/pages/guides/getting-started.md

@@ -36,7 +36,7 @@ If you are interested in learning web development, p5.js is a way to get started
 
 <Video videoId="46WOuOrMwTQ" />
 
-For a beginner, I recommend the [p5.js web editor](https://editor.p5js.org/), it’s probably the most used coding environment! If you are using Processing, it comes [with its own development environment](https://processing.org/download)! You can also explore a downloadable text editor like [Visual Studio Code](https://code.visualstudio.com/) for either! I cover tools beyond p5.js and Processing in [my 2023 workflow video](/tracks/2018-workflow/workflow/2023-update). There are many text editors out there – feel free to use whichever makes your coding experience comfortable!
+For a beginner, I recommend the [p5.js web editor](https://editor.p5js.org/), it’s probably the most used coding environment! If you are using Processing, it comes [with its own development environment](https://processing.org/download)! You can also explore a downloadable text editor like [Visual Studio Code](https://code.visualstudio.com/) for either! I cover tools beyond p5.js and Processing in [my 2023 workflow video](/tracks/2018-workflow/discord/2023-workflow). There are many text editors out there – feel free to use whichever makes your coding experience comfortable!
 
 ## Version Control
 

content/pages/guides/maintain-website-guide.md

@@ -153,7 +153,7 @@ git push --set-upstream origin branch-name
 
 7. Check the links to the references and videos to make sure are not broken and add additional metadata. Add a link (s) to any archived Live Streams associated with the challenge.
 
-   - For accessibilty and for general clarity, ensure that all "description" properties in the index.json file as well as the contribution JSON files are filled in with at least 1 sentence.
+   - For accessibility and for general clarity, ensure that all "description" properties in the index.json file as well as the contribution JSON files are filled in with at least 1 sentence.
    - Update the "languages" property in the "index.json" file. In this instance, "languages" refers to the programming language(s) used in the challenge. For example: "p5.js", "JavaScript", "Processing", or "node.js".
    - Update the "topics" property in the "index.json" file. If any tags were present on the YouTube page of the challenge, those would have been brought over by the web scraper and included as "topics". The tags from YouTube are pretty generic and overall too much information. Only a handful of topics are needed, so only include topics that are relevant to this specific video. If no tags were present on the YouTube page, then this may be blank - go ahead and add a couple of topics!
    - Use the Description on the YouTube video for additional links to add as "References" or "Videos" in the "groupLinks" property in the "index.json" file. Also, add in links to Uncyclopedia about whatever concept is being discussed, or links to p5.js or Processing documentation about any special functions that are used in the video, or links to whatever other resource may help to further explain a concept.
@@ -378,7 +378,7 @@ from GitHub.
 ## Troubleshooting
 
 Sometimes, things don't work like they should. If you get stuck, don't worry!
-Feel free to ask for help at any time, file an issue or come say hello in the [Coding Train Discord](https://thecodingtrain.com/discord).
+Feel free to ask for help at any time, file an issue or come say hello in the [Coding Train Discord](/discord).
 
 ## Adding a New Event
 

content/pages/guides/passenger-showcase-guide.md

@@ -15,7 +15,7 @@ There are currently two ways to submit your work:
 
 <PassengerShowcaseForm />
 
-If you have questions or need any help, come board the [Coding Train Discord](https://thecodingtrain.com/discord) or write to [email protected]. This guide is in progress, and will be updated as the showcase submission process changes.
+If you have questions or need any help, come board the [Coding Train Discord](/discord) or write to [email protected]. This guide is in progress, and will be updated as the showcase submission process changes.
 
 ## Finding the Video on GitHub
 

content/tracks/side-tracks/pi-day/index.json

@@ -1,6 +1,6 @@
 {
   "title": "Pi Day",
-  "description": "Pi, which is the ratio of a circle's circumference to its diameter, is one of the most important mathematical contants.  This track is a compilation of the many challenges I have completed to calculate Pi.",
+  "description": "Pi, which is the ratio of a circle's circumference to its diameter, is one of the most important mathematical constants. This track is a compilation of the many challenges I have completed to calculate Pi.",
   "videos": [
     "challenges/95-approximating-the-value-of-pi",
     "challenges/96-visualizing-digits-of-pi",

content/tracks/side-tracks/supershapes/index.json

@@ -1,6 +1,6 @@
 {
   "title": "Supershapes!",
-  "description": "This side track is a collection of videos related to supershapes that use spherical coordinates and superformulas.  While not techically a \u201csupershape\u201d, the mandelbulb is constructed in a similar manner and is a SUPER shape.",
+  "description": "This side track is a collection of videos related to supershapes that use spherical coordinates and superformulas. While not technically a \u201csupershape\u201d, the mandelbulb is constructed in a similar manner and is a SUPER shape.",
   "videos": [
     "noc/3-angles/4-polar-coordinates",
     "challenges/19-superellipse",

content/videos/challenges/10-dfs-maze-generator/showcase/contribution-1719932734.json

@@ -0,0 +1,9 @@
+{
+  "title": "Biforkation and depth indication",
+  "author": {
+    "name": "Tanner Roberts"
+  },
+  "url": "https://editor.p5js.org/tannerbroberts/sketches/WdyY1psa9",
+  "submittedOn": "2024-07-02T15:05:34.521Z",
+  "socialPermission": true
+}

content/videos/challenges/10-dfs-maze-generator/showcase/contribution-1719932734.png

@@ -19,7 +19,7 @@
         { "time": "4:11", "title": "Reinforcement Learning" },
         {
           "time": "6:45",
-          "title": "Make multiple birds that make random decisions and use a genetic alorithm"
+          "title": "Make multiple birds that make random decisions and use a genetic algorithm"
         },
         {
           "time": "7:40",

content/videos/challenges/100-neuroevolution-flappy-bird/index.json

@@ -1,5 +1,5 @@
 {
-  "title": "Flappy Bird AI wih moving pipes",
+  "title": "Flappy Bird AI with moving pipes",
   "author": {
     "name": "Suryansh Dey",
     "url": "https://www.facebook.com/progressor.coc"

content/videos/challenges/100-neuroevolution-flappy-bird/showcase/contribution-1670302720.json

@@ -38,7 +38,7 @@
   "codeExamples": [
     {
       "title": "Linear Regression",
-      "description": "This sketch creates an interactive simulation of linear regresssion.",
+      "description": "This sketch creates an interactive simulation of linear regression.",
       "image": "",
       "urls": { "p5": "https://editor.p5js.org/codingtrain/sketches/UtOWCSYYF" }
     }

content/videos/challenges/104-linear-regression-with-tensorflowjs/index.json

@@ -24,7 +24,7 @@
   "codeExamples": [
     {
       "title": "Polynomial Regression",
-      "description": "This sketch creates an interactive simulation of polynominal regresssion.",
+      "description": "This sketch creates an interactive simulation of polynominal regression.",
       "urls": { "p5": "https://editor.p5js.org/codingtrain/sketches/UdXRZxF7e" }
     }
   ],

content/videos/challenges/105-polynomial-regression-with-tensorflowjs/index.json

@@ -34,7 +34,7 @@
     },
     {
       "time": "11:12",
-      "title": "Pick a random number to choose the tranformation"
+      "title": "Pick a random number to choose the transformation"
     },
     { "time": "12:08", "title": "Add nextPoint, drawPoint functions" },
     { "time": "13:51", "title": "Add probabilities" },

content/videos/challenges/108-barnsley-fern/index.json

@@ -62,7 +62,7 @@
           "icon": "🚂",
           "title": "OOP with ES6",
           "url": "/tracks/code-programming-with-p5-js/code/6-objects/1-intro",
-          "description": "Tutorial on object oriented programmign in JavaScript with ES6"
+          "description": "Tutorial on object oriented programming in JavaScript with ES6"
         },
         {
           "icon": "🎥",

content/videos/challenges/115-snake-game-redux/index.json

@@ -31,7 +31,7 @@
   "codeExamples": [
     {
       "title": "Seven-Segment Display",
-      "description": "Implimentation of a seven-segment display",
+      "description": "Implementation of a seven-segment display",
       "image": "seven-segment-display.png",
       "urls": {
         "p5": "https://editor.p5js.org/codingtrain/sketches/O25p3JYxT",

content/videos/challenges/117-seven-segment-display/index.json

@@ -28,7 +28,7 @@
     },
     { "time": "17:52", "title": "Change to HSB mode and add color" },
     { "time": "19:07", "title": "Add an offset" },
-    { "time": "20:06", "title": "Conclusion and design possiblities" }
+    { "time": "20:06", "title": "Conclusion and design possibilities" }
   ],
   "codeExamples": [
     {

content/videos/challenges/12-lorenz-attractor/index.json

@@ -116,7 +116,7 @@
           "icon": "💾",
           "title": "Loop Templates",
           "url": "https://github.com/golanlevin/LoopTemplates",
-          "description": "Golan Levin's Github respository with templates for generating animated seamless loops in Processing, p5.js, and Processing.py."
+          "description": "Golan Levin's Github repository with templates for generating animated seamless loops in Processing, p5.js, and Processing.py."
         },
         {
           "icon": "💾",

content/videos/challenges/134-heart-curve/index.json

@@ -23,7 +23,7 @@
   "codeExamples": [
     {
       "title": "GIF Loop",
-      "description": "This sketch demonstates how to create a looping GIF.",
+      "description": "This sketch demonstrates how to create a looping GIF.",
       "urls": {
         "p5": "https://editor.p5js.org/codingtrain/sketches/Hk6RTHBCl",
         "processing": "https://github.com/CodingTrain/Coding-Challenges/tree/main/135_GIF_Loop/Processing/CC_135_GIF_Loop"
@@ -50,7 +50,7 @@
           "icon": "💾",
           "title": "Loop Templates",
           "url": "https://github.com/golanlevin/LoopTemplates",
-          "description": "Golan Levin's Github respository with templates for generating animated seamless loops in Processing, p5.js, and Processing.py."
+          "description": "Golan Levin's Github repository with templates for generating animated seamless loops in Processing, p5.js, and Processing.py."
         },
         {
           "icon": "🖌",

content/videos/challenges/135-making-a-gif-loop-in-processing/index.json

@@ -1,9 +1,9 @@
 {
-  "title": "Python3.6 implemetation using Pygame1.9",
+  "title": "Python 3.6 implementation using Pygame 1.9",
   "url": "https://repl.it/@chief141/making-GIF-loop",
   "author": {
     "name": "chief141",
     "url": "https://github.com/chief141"
   },
   "submittedOn": "2020-04-26T12:25:39.000Z"
-}
+}

content/videos/challenges/135-making-a-gif-loop-in-processing/showcase/contribution2.json

@@ -1,9 +1,9 @@
 {
-  "title": "Perlin noise caracters loop",
+  "title": "Perlin noise characters loop",
   "url": "https://codepen.io/alt-art/full/ywOZYj",
   "author": {
     "name": "Pedro Henrique Mendes",
     "url": "https://codepen.io/alt-art"
   },
   "submittedOn": "2019-03-04T15:08:25.000Z"
-}
+}

content/videos/challenges/136-polar-noise-loops/showcase/contribution4.json

@@ -0,0 +1,9 @@
+{
+  "title": "FNshot",
+  "author": {
+    "name": "EclipseMaster0"
+  },
+  "url": "https://editor.p5js.org/EclipseMaster0/full/RnPjrLlqK",
+  "submittedOn": "2024-07-02T17:21:21.423Z",
+  "socialPermission": true
+}

content/videos/challenges/138-angry-birds-with-matterjs/showcase/contribution-1719940881.jpg

@@ -1,9 +1,9 @@
 {
-  "title": "Sierpinski Trianlge using fractal tree.",
+  "title": "Sierpinski triangle using fractal tree.",
   "url": "https://editor.p5js.org/Amitabh_Kotha/full/PV89AGldr",
   "author": {
     "name": "Amitabh Kotha",
     "url": "https://github.com/AmitabhKotha/"
   },
   "submittedOn": "2020-04-25T23:16:11.000Z"
-}
+}

content/videos/challenges/138-angry-birds-with-matterjs/showcase/contribution-1719940881.json

@@ -1,8 +1,8 @@
 {
-  "title": "Relativistic Black Hole Sim with Highlited shadow (made in VB.net)",
+  "title": "Relativistic Black Hole Sim with Highlighted shadow (made in VB.net)",
   "url": "https://github.com/JosGielen/Coding_Train_VB.net/blob/master/CC144%20Black%20Hole%20Visualization/Example/RedShadow.jpg",
   "author": {
     "name": "Jos Gielen"
   },
   "submittedOn": "2019-05-09T13:14:32.000Z"
-}
+}

content/videos/challenges/14-fractal-trees-recursive/showcase/contribution6.json

@@ -1,8 +1,8 @@
 {
-  "title": "Tic-Tac-Pro with 2D array vizualization in Python Processing",
+  "title": "Tic-Tac-Pro with 2D array visualization in Python Processing",
   "url": "https://github.com/idea456/TicTacPro",
   "author": {
     "name": "idea456"
   },
   "submittedOn": "2020-10-03T05:02:39.000Z"
-}
+}

content/videos/challenges/144-2d-black-hole-visualization/showcase/contribution7.json

@@ -1,8 +1,8 @@
 {
-  "title": "Colourfull Tic Tac Toe",
+  "title": "Colourful Tic Tac Toe",
   "url": "https://amnindersingh12.github.io/Colourfull-tic-tac-toe/",
   "author": {
     "name": "Amninder Singh"
   },
   "submittedOn": "2020-10-12T02:23:49.000Z"
-}
+}

content/videos/challenges/149-tic-tac-toe/showcase/contribution28.json

@@ -70,7 +70,7 @@
           "icon": "💻",
           "title": "Quick, Draw!",
           "url": "https://quickdraw.withgoogle.com/#",
-          "description": "Google webage with Quick, Draw! game."
+          "description": "Google webpage with Quick, Draw! game."
         },
         {
           "icon": "💻",

content/videos/challenges/149-tic-tac-toe/showcase/contribution29.json

@@ -29,7 +29,7 @@
   ],
   "codeExamples": [
     {
-      "title": "Tic tac toe wth Minimax",
+      "title": "Tic tac toe with Minimax",
       "description": "A tic tac toe AI with the Minimax algorithm",
       "urls": {
         "p5": "https://editor.p5js.org/codingtrain/sketches/0zyUhZdJD",

content/videos/challenges/153-interactive-drawing-with-sketchrnn/index.json

@@ -27,7 +27,7 @@
     },
     {
       "time": "0:22:20",
-      "title": "Coding Holliday Song"
+      "title": "Coding Holiday Song"
     }
   ],
   "codeExamples": [