Add getting started section

src/components/ContentFigure.astro

@@ -78,6 +78,11 @@ function isYouTubeUrl(source: string | ImageMetadata): boolean {
   return source.includes('youtube.com') || source.includes('youtu.be');
 }
 
+// Check if src is a local/remote video file URL
+function isVideoFile(url: string): boolean {
+  return /\.(webm|mp4|ogg)(\?|#|$)/i.test(url);
+}
+
 // Extract video ID from YouTube URL
 function extractVideoId(videoUrl: string): string {
   // YouTube watch URL
@@ -120,13 +125,14 @@ function getOptimizedImage(srcPath: string): ImageMetadata | null {
   return null;
 }
 
-const isVideo = isYouTubeUrl(src);
-const videoId = isVideo && typeof src === 'string' ? extractVideoId(src) : '';
-const embedUrl = isVideo ? `https://www.youtube.com/embed/${videoId}?rel=0&controls=1&showinfo=0&vq=hd1080` : '';
+const isYouTubeVideo = isYouTubeUrl(src);
+const isLocalVideo = !isYouTubeVideo && isVideoFile(src);
+const videoId = isYouTubeVideo ? extractVideoId(src) : '';
+const embedUrl = isYouTubeVideo ? `https://www.youtube.com/embed/${videoId}?rel=0&controls=1&showinfo=0&vq=hd1080` : '';
 
 // Determine the image source - either already ImageMetadata, or resolve from string path
 let optimizedImage: ImageMetadata | null = null;
-if (!isVideo) {
+if (!isYouTubeVideo && !isLocalVideo) {
   if (isImageMetadata) {
     // Already an ImageMetadata object from glob import
     optimizedImage = src as ImageMetadata;
@@ -140,7 +146,7 @@ const hasCaption = Astro.slots.has('default');
 ---
 
 <figure class:list={['content-figure', className]} style={`max-width: ${width}; margin: ${marginStyle};`}>
-  {isVideo ? (
+  {isYouTubeVideo ? (
     <div class:list={['content-figure-video']} style={hasBorder ? `border: ${borderStyle};` : undefined}>
       <iframe
         src={embedUrl}
@@ -151,6 +157,20 @@ const hasCaption = Astro.slots.has('default');
         loading="lazy"
       ></iframe>
     </div>
+  ) : isLocalVideo ? (
+    <div class:list={['content-figure-video']} style={hasBorder ? `border: ${borderStyle};` : undefined}>
+      <video
+        src={src}
+        controls
+        autoplay
+        loop
+        muted
+        playsinline
+        preload="metadata"
+      >
+        Your browser does not support the video tag.
+      </video>
+    </div>
   ) : (
     <div class:list={['content-figure-image']} style={hasBorder ? `border: ${borderStyle};` : undefined}>
       {optimizedImage ? (
@@ -215,6 +235,19 @@ const hasCaption = Astro.slots.has('default');
     border: none;
   }
 
+  .content-figure-video video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100% !important;
+    height: 100% !important;
+    max-width: none !important;
+    max-height: none !important;
+    display: block;
+    object-fit: contain;
+    object-position: center;
+  }
+
   /* Caption styles - matches Slides component */
   .content-figure-caption {
     font-family: 'Inter', system-ui, sans-serif;

src/config/sidebarConfig.ts

@@ -52,16 +52,29 @@ export const sidebarSections: Record<string, SidebarSection[]> = {
     },
   ],
 
-  // Resources section (content lives at /resources but navbar says "Other Resources")
-  '/resources': [
+  // Getting Started section
+  '/getting-started': [
     {
-      label: 'Resources',
+      label: 'Getting Started',
       items: [
-        { label: 'Overview', slug: 'resources' },
-        { label: 'Glossary', slug: 'resources/glossary' },
+        { label: 'Intro to Programmming', slug: 'getting-started/intro-to-prog' },
+        { label: 'Required Tools', slug: 'getting-started/required-tools' },
+        { label: 'VS Code Overview', slug: 'getting-started/vscode-overview' },
+        { label: 'Forking and Cloning', slug: 'getting-started/forking-and-cloning' },
       ],
     },
   ],
+
+  // Resources section (content lives at /resources but navbar says "Other Resources")
+  // '/resources': [
+  //   {
+  //     label: 'Resources',
+  //     items: [
+  //       { label: 'Overview', slug: 'resources' },
+  //       { label: 'Glossary', slug: 'resources/glossary' },
+  //     ],
+  //   },
+  // ],
 };
 
 /**

src/content/docs/contribution/contributors.mdx

@@ -1,6 +1,8 @@
 ---
 title: Website Contributors
 description: Contributor information for FRCSoftware.org
+prev: contribution/styleguide
+next: contribution/roadmap
 ---
 
 import Aside from '../../../components/Aside.astro';

src/content/docs/contribution/methodsOfContributing.mdx

@@ -1,6 +1,8 @@
 ---
 title: Methods of Contributing
 description: A guide to publicly contributing to the website, including setting up an IDE and local preview for editing.
+prev: false
+next: /contribution/styleguide
 ---
 
 import Aside from '../../../components/Aside.astro';

src/content/docs/contribution/roadmap.mdx

@@ -1,6 +1,8 @@
 ---
 title: Website Roadmap
 description: Roadmap information for FRCSoftware.org
+prev: contribution/contributors
+next: false
 ---
 
 ## Roadmap

src/content/docs/contribution/styleguide.mdx

@@ -1,6 +1,8 @@
 ---
 title: Contribution Style Guide
 description: The style guide for contribution according to the goals of the website.
+prev: contribution/methodsofcontributing
+next: contribution/contributors
 ---
 
 import Aside from '../../../components/Aside.astro';

src/content/docs/getting-started/forking-and-cloning.mdx

@@ -0,0 +1,18 @@
+---
+title: Forking and Cloning
+description: A guide to forking and cloning a GitHub repository for your work
+prev: getting-started/vscode-overview
+next: false
+---
+
+import ContentFigure from '../../../components/ContentFigure.astro';
+
+## Forking
+Before beginning, it's necessary to create your own fork of the exercises repository. Before doing so, you need to have followed the instructions in the "Required Tools" section. To do so, go to the [exercises repository](https://github.com/frcsoftware/exercises) and click the "Fork" button in the top right corner. This will create a copy of the repository under your own GitHub account, allowing you to make changes without affecting the original repository.
+
+<ContentFigure src="/getting-started/forking-and-cloning/forking.webm" />
+
+## Cloning
+To clone the repository you just created, open VS Code. Then, copy the URL of the repository you just forked. In VS Code, open the version control sidebar (top left), and select "Clone Repository". Paste the URL of your forked repository and select a local directory where you want it to be located. This will create a local copy of the repository on your machine, allowing you to work on the exercises.
+
+<ContentFigure src="/getting-started/forking-and-cloning/cloning.webm" />

src/content/docs/getting-started/intro-to-prog.mdx

@@ -0,0 +1,6 @@
+---
+title: Intro to Programming
+description: Coming soon!
+prev: false
+next: getting-started/required-tools
+---

src/content/docs/getting-started/required-tools.mdx

@@ -0,0 +1,23 @@
+---
+title: Required Tools for Development
+description: Installing all the necessary software for completing this course and programming in FRC
+prev: getting-started/intro-to-prog
+next: false
+---
+
+## WPILib tools
+
+The first tool that needs to be installed is the WPILib tool package. To do so, follow the 
+instructions linked [here](https://docs.wpilib.org/en/stable/docs/zero-to-robot/step-2/wpilib-setup.html).
+
+If you intend to control a physical robot, you may also need to install the game tools. Instructions can be found [here](https://docs.wpilib.org/en/stable/docs/zero-to-robot/step-2/frc-game-tools.html),
+but this is not necessary at this point in time.
+
+## git
+
+Git can be installed using the instructions located [here](https://git-scm.com/install/).
+
+## Creating a GitHub account
+
+For many of the lessons on this website, it will be necessary to have a GitHub account. One can be can be created [here](https://github.com/signup).
+It's also recommended to sign up for the [GitHub student developer pack](https://education.github.com/pack), this will give you access to a variety of resources. 

src/content/docs/getting-started/vscode-overview.mdx

@@ -0,0 +1,6 @@
+---
+title: VS Code Overview
+description: Coming soon!
+prev: getting-started/required-tools
+next: getting-started/forking-and-cloning
+---

src/content/docs/index.mdx

@@ -10,7 +10,7 @@ hero:
     html: '<img src="/favicon.svg" alt="FRCSoftware.org logo" />'
   actions:
     - text: Start Learning
-      link: /learning-course/
+      link: /getting-started/intro-to-prog
 
 ---
 
@@ -29,4 +29,10 @@ import HomeCard from '../../components/HomeCard.astro';
     icon="wrench"
     description="Help contribute! Since FRCSoftware.org is in such an early stage right now, we are in need of contributors."
   />
+  <HomeCard
+    title="Getting Started"
+    href="/getting-started/intro-to-prog"
+    icon="check"
+    description="Everything you need to know to get started coding."
+  />
 </div>

src/content/docs/resources/glossary.mdx

@@ -37,3 +37,6 @@ We know it can be hard learning each and every term thrown around in FRC program
 
 **Magnetic Encoder**
 : An encoder that uses magnetic fields to measure position or motion.
+
+**Repository**
+: A storage location for software packages, often used in version control systems like Git. Repositories are just folders that contain files and subfolders, and they can be hosted on platforms like GitHub to facilitate collaboration and version tracking.

src/starlightOverrides/Header.astro

@@ -10,14 +10,15 @@ const props = Astro.props;
 
 const navLinks = [
   { href: "/", label: "Home" },
-//   { href: "/feature-guide/", label: "Website Feature Guide" },
+  { href: "/feature-guide/", label: "Website Feature Guide" },
+  { href: "/getting-started/intro-to-prog/", label: "Getting Started" },
 //   { href: "/learning-course/", label: "Learning Course" },
 //   { href: "/educators-guide/introduction/", label: "Educator's Guide" },
 //   { href: "/design-handbook/", label: "Design Handbook" },
 //   { href: "/mechanism-examples/", label: "Mechanism Examples" },
 //   { href: "/best-practices/", label: "Best Practices" },
 //   { href: "/resources/", label: "Other Resources" },
-//   { href: "/contribution/methodsofcontributing/", label: "Contribution" },
+  { href: "/contribution/methodsofcontributing/", label: "Contribution" },
 ];
 
 const currentPath = Astro.url.pathname;