Add docs Screenshot component

docs/app/screenshot.tsx

@@ -0,0 +1,22 @@
+import Image, { ImageProps } from 'next/image';
+import SwitchImg from '@/public/switch.png';
+
+export function Screenshot(props: ImageProps) {
+	return (
+		<div className='relative inline-block'>
+			<Image
+				src={SwitchImg}
+				alt='Screenshot'
+				width={1280}
+				height={720}
+				className='drop-shadow-md m-0'
+			/>
+			<Image
+				width={1280}
+				height={720}
+				{...props}
+				className='absolute top-[8.2%] left-[17.8%] m-0 w-[64.4%]'
+			/>
+		</div>
+	);
+}

docs/content/runtime/rendering/canvas.mdx

@@ -3,6 +3,8 @@ title: Canvas
 description: Drawing to the screen using the Canvas API
 ---
 
+import CanvasHouseScreenshot from '@/public/screenshots/canvas-house.jpg';
+
 nx.js does not implement a full DOM for rendering content to the screen.
 Instead, it offers the more low-level Canvas API which allows your application
 to draw to the screen.
@@ -17,9 +19,11 @@ be in __canvas rendering__ mode.
 
 ## Example
 
-Let's draw a simple house with the Canvas API:
+> This example was adapted from the [MDN Canvas tutorial](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#basic_example).
+
+Let's draw a simple house to the screen by using the Canvas API:
 
-```js
+```typescript title="src/main.ts"
 // Creating the canvas context enters "canvas rendering" mode
 const ctx = screen.getContext('2d');
 
@@ -45,7 +49,7 @@ ctx.closePath();
 ctx.stroke();
 ```
 
-> This example was adapted from the [MDN Canvas tutorial](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#basic_example).
+<Screenshot src={CanvasHouseScreenshot} />
 
 ## Using React
 

docs/content/runtime/rendering/console.mdx

@@ -3,6 +3,8 @@ title: Console
 description: Logging to the Console for text based applications
 ---
 
+import HelloWorldScreenshot from '@/public/screenshots/hello-world.jpg';
+
 If your application is purely text-based, you can use the familiar
 global [`console`](/runtime/api/variables/console) object to write textual data to the screen of the application
 in the terminal-like interface that [`libnx`](https://github.com/switchbrew/libnx) provides.
@@ -12,10 +14,15 @@ in the terminal-like interface that [`libnx`](https://github.com/switchbrew/libn
 
 ## Example
 
-```js
-console.log('Hello World');
+```typescript title="src/main.ts"
+console.log('Hello World!');
+console.log(' - <3 nx.js');
+console.log('');
+console.log('Press the + button to exit...');
 ```
 
+<Screenshot src={HelloWorldScreenshot} />
+
 ## ANSI Escape Codes
 
 Listed below is a (non-exhaustive) list of npm modules known to work well with nx.js when using console rendering mode:

docs/mdx-components.tsx

@@ -14,6 +14,7 @@ import {
 	TbHandStop,
 	TbAlertOctagon,
 } from 'react-icons/tb';
+import { Screenshot } from '@/app/screenshot';
 import type { MDXComponents } from 'mdx/types';
 
 type CalloutProps = React.ComponentProps<typeof Callout>;
@@ -38,6 +39,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
 				{children}
 			</Tabs>
 		),
+		Screenshot,
 		blockquote: (props) => {
 			let icon: CalloutProps['icon'] = undefined;
 			let title: CalloutProps['title'] = undefined;