Add programming section

astro.config.mjs

@@ -9,6 +9,9 @@ import { imagetools } from 'vite-imagetools';
 import { defineConfig } from 'astro/config';
 import preact from '@astrojs/preact';
 import tailwind from '@astrojs/tailwind';
+import mdx from '@astrojs/mdx';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeExternalLinks from 'rehype-external-links';
 
 // https://astro.build/config
 export default defineConfig(
@@ -22,13 +25,13 @@ export default defineConfig(
 			},
 			rehypePlugins: [
 				[
-					'rehype-autolink-headings',
+					rehypeAutolinkHeadings,
 					{
 						behavior: 'prepend',
 					},
 				],
 				[
-					'rehype-external-links',
+					rehypeExternalLinks,
 					{
 						target: '_blank',
 						rel: ['nofollow', 'noopener', 'noreferrer'],
@@ -43,6 +46,23 @@ export default defineConfig(
 				},
 			}),
 			preact(),
+			mdx({
+				rehypePlugins: [
+					[
+						rehypeAutolinkHeadings,
+						{
+							behavior: 'prepend',
+						},
+					],
+					[
+						rehypeExternalLinks,
+						{
+							target: '_blank',
+							rel: ['nofollow', 'noopener', 'noreferrer'],
+						},
+					],
+				],
+			}),
 		],
 		vite: {
 			plugins: [imagetools()],

package.json

@@ -10,6 +10,7 @@
 		"format": "yarn prettier -w ."
 	},
 	"devDependencies": {
+		"@astrojs/mdx": "^0.10.0",
 		"@astrojs/preact": "^1.0.2",
 		"@astrojs/tailwind": "^1.0.0",
 		"astro": "^1.0.5",

src/components/MDX/YouTubeVideo.tsx

@@ -0,0 +1,22 @@
+interface Props {
+	className: string;
+	title: string;
+	videoUrl: string;
+}
+
+function YoutTubeVideo({ className, title, videoUrl }: Props) {
+	return (
+		<iframe
+			className={className}
+			width="560"
+			height="315"
+			src={videoUrl}
+			title={title}
+			frameborder="0"
+			allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+			allowfullscreen
+		></iframe>
+	);
+}
+
+export default YoutTubeVideo;

src/navData/programming-fundamentals.json

@@ -15,10 +15,6 @@
 					"title": "The Command Line",
 					"path": "/learn/programming-fundamentals/introduction/the-command-line"
 				},
-				{
-					"title": "How programs work",
-					"path": "/learn/programming-fundamentals/introduction/how-programs-work"
-				},
 				{
 					"title": "Compiled v Interpretted",
 					"path": "/learn/programming-fundamentals/introduction/compiled-v-interpretted"

src/pages/learn/programming-fundamentals/introduction/programming.mdx

@@ -0,0 +1,29 @@
+---
+title: Programming
+layout: '@/layouts/learn.astro'
+---
+
+import YouTubeVideo from '@/components/MDX/YouTubeVideo';
+
+Imagine you're explaining how to make a peanut butter and jelly sandwich to a robot. Your first inclination might be to say, "Go get the bread, peanut butter, and jelly from the cupboard. Get a knife. Take 2 pieces of bread and spread the peanut butter and jelly. Now, put the pieces of bread together and serve." What you would end up with is probably not what you're imagining. To better demonstrate this, I've enlisted the help of YouTube with a video that demonstrates what might happen:
+
+<YouTubeVideo
+  className="mx-auto mb-4"
+  title="Exact Instruction Challenge"
+  videoUrl="https://www.youtube.com/embed/Ct-lOOUqmyY"
+  client:load
+/>
+
+As you can see, the kids got really frustrated because the dad didn't infer their _implications_ from the instructions. Welcome to programming! Computers will **only** do exactly as you instruct it.
+
+## What is a program?
+
+The dictionary defines a **program** as ["a plan or system under which action may be taken toward a goal"](https://www.merriam-webster.com/dictionary/program). This is what programming is. We create a set of **instructions** that, when used in a certain sequence, solve a problem. Like in our video above, the children wrote out steps (instructions) that the father (robot) needed to do (execute) in a particular order to make a peanut butter and jelly sandwich (goal).
+
+A great way to visualize or plan the program you're writing is a flow chart. Flow charts have a clear starting point that you can follow to make decisions that get you to the end decision. When writing your first programs, I strongly recommend you design flow charts to help you understand the flow of your work. Eventually, you'll find you may not need flow charts for most of your daily programming needs, but it's a great tool to utilize when trying to solve more complex problems.
+
+![Flow chart with a branching decision](/learn-assets/flow-chart-example.jpeg)
+
+## How do programs work?
+
+The exact mechanisms that allow programs to function is a topic beyond the scope of this resource. However, I want to provide you with a brief, yet incomplete, high-level understanding of how programs work.