Add WebP-only linting rule

lint-staged.config.mjs

@@ -1,6 +1,8 @@
 /** @type {import('lint-staged').Configuration} */
 export default {
     '**/*': (files) => `prettier --write --ignore-unknown ${files.join(' ')}`,
+    '{src,public}/**/*.{png,jpg,jpeg}': (images) =>
+        `node scripts/images.lint.js ${images.join(' ')}`,
     '**/*.{astro,ts,mjs,js}': (files) => `eslint --fix ${files.join(' ')}`,
     'src/content/**/*.{md,mdx}': (files) => [
         `pnpm remark ${files.join(' ')} --ext mdx --frail --no-stdout --quiet`,

scripts/images.lint.js

@@ -0,0 +1,7 @@
+import { styleText } from 'node:util';
+
+const [, , ...images] = process.argv;
+process.stderr.write(
+    `${styleText('red', '✖')} All images should be in WebP format. See contribution guidelines for more info. Offending files: \n - ${images.map((img) => img.replace(process.cwd() + '/', '')).join('\n - ')}\n`,
+);
+process.exit(1);

src/content/docs/learning-course/getting-started/website-feature-guide.mdx

@@ -55,9 +55,9 @@ Examples for different concepts are shown in an "Example" box like this one.
 ### Slideshows
 
 <Slides>
-![Slide 1](/learning-course/getting-started/website-feature-guide/slide1.png) Navigate the slideshows by pressing the arrows on the sides.
+![Slide 1](/learning-course/getting-started/website-feature-guide/slide1.webp) Navigate the slideshows by pressing the arrows on the sides.
 
-![Slide 2](/learning-course/getting-started/website-feature-guide/slide2.png) The dots below the caption indicate the slide you're on.
+![Slide 2](/learning-course/getting-started/website-feature-guide/slide2.webp) The dots below the caption indicate the slide you're on.
 They can also be clicked to navigate to slides.
 
 </Slides>

src/content/docs/learning-course/stage0/conditionals.mdx

@@ -64,7 +64,7 @@ If `condition` is false, the code inside the `if` block will be skipped.
 This is also described in the flowchart below
 
 <ContentFigure
-    src="/learning-course/stage0/conditionals/ifstatement.png"
+    src="/learning-course/stage0/conditionals/ifstatement.webp"
     width="400px"
     height="800px"
 />
@@ -104,7 +104,7 @@ If the `if` statement's condition is `false`, the `if` block will be skipped, an
 This is also described in the flowchart below
 
 <ContentFigure
-    src="/learning-course/stage0/conditionals/else.png"
+    src="/learning-course/stage0/conditionals/else.webp"
     width="600px"
     height="800px"
 />

src/content/docs/learning-course/stage0/java-fundamentals.mdx

@@ -22,9 +22,9 @@ Error messages will not tell you exactly what's wrong with your code.
 If you’re unsure on what the error message means, you can look it up to get additional context.
 
 <Slides>
-![Slide 1](/learning-course/stage0/java-fundamentals/ErrorExample1.png) An example of a syntax error (note the squiggly line)
+![Slide 1](/learning-course/stage0/java-fundamentals/ErrorExample1.webp) An example of a syntax error (note the squiggly line)
 
-![Slide 2](/learning-course/stage0/java-fundamentals/ErrorExample2.png) An example of a syntax error popup
+![Slide 2](/learning-course/stage0/java-fundamentals/ErrorExample2.webp) An example of a syntax error popup
 
 </Slides>
 

src/content/docs/learning-course/stage0/operators.mdx

@@ -7,7 +7,7 @@ codeRegionSources:
     default: stage0/snippets/Operators.java
 ---
 
-In Java, we use operators to change or compare the values of variables.
+In Java, we use operators to change, or compare the values of variables.
 There four different types of operators are:
 
 - Arithmetic Operators

src/content/docs/learning-course/stage1/stage1b/command-based-overview.mdx

@@ -15,12 +15,12 @@ set of instructions (execute this task, then this, and finally this).
 However, robots (and humans!) don't just execute a set of tasks and shut down.
 
 Imagine your daily routine.
-When an alarm clock rings, you turn it off and tumble out of bed.
-When your belly rumbles, you walk to the fridge and get a snack.
+When an alarm clock rings, you turn it off and tumble, out of bed.
+When your belly rumbles, you walk to the fridge, and get a snack.
 When the clock strikes 8 AM,
 you open the front door to leave for school.
 
-<ContentImage src="/learning-course/stage1/stage1b/human-flow-diagram.png" />
+<ContentImage src="/learning-course/stage1/stage1b/human-flow-diagram.webp" />
 
 Notice how none of these actions had a predefined order; rather, they were a reaction to
 certain kinds of stimuli.
@@ -32,7 +32,7 @@ Command-based programming models robot behavior in a similar way.
 
 For instance, a command-based robot might have the following structure:
 
-<ContentImage src="/learning-course/stage1/stage1b/robot-flow-diagram.png" />
+<ContentImage src="/learning-course/stage1/stage1b/robot-flow-diagram.webp" />
 
 Here, everything on the left is a `Trigger`, while everything on the right is a `Command`.
 
@@ -48,7 +48,7 @@ However, the structure of using `Command`s to represent behaviors misses an impo
 
 Think back to the human example: you’re walking to the fridge, but the clock hits 8 AM before you get there.
 You can't do both at once, since both actions require your arms and legs.
-So, you stop and leave for school.
+So, you stop, and leave for school.
 
 Next, the robot.
 If the X and Y buttons are held, the shooter and intake motors should both run.