Update devcontainer configuration and enhance Marp documentation

- Changed the devcontainer name to "Marp Slides" and updated the base image to Debian bookworm for Node.js 18+ compatibility.
- Added a new Marp agent documentation file detailing expertise, project conventions, and best practices for creating Marp slide decks.
- Enhanced the existing Slides.md presentation with additional content, including a detailed agenda, improved formatting, and new sections on OWASP vs ATT&CK.
- Added new images for the presentation: owl.png and portrait.png.
- Updated custom-default.css to include new Font Awesome icons and improved table styling for better readability.

Author: codebytes

.devcontainer/devcontainer.json

@@ -1,37 +1,33 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the
 // README at: https://github.com/devcontainers/templates/tree/main/src/ubuntu
 {
-	"name": "Debian",
-	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
-	"image": "mcr.microsoft.com/devcontainers/base:bullseye",
+	"name": "Marp Slides",
+	// Use Debian bookworm (stable) - required for Node.js 18+ compatibility with Marp CLI v4
+	"image": "mcr.microsoft.com/devcontainers/base:bookworm",
 	"features": {
-		// uncomment this to allow pptx or pdf export
+		// Uncomment to enable PDF/PPTX export (Marp CLI v4 supports Firefox as alternative)
 		// "ghcr.io/rocker-org/devcontainer-features/apt-packages:1": {
 		// 	"packages": "chromium"
 		// }
 	},
 
-	// Features to add to the dev container. More info: https://containers.dev/features.
-	// "features": {},
-
 	// Use 'forwardPorts' to make a list of ports inside the container available locally.
 	// "forwardPorts": [],
 
-	// Use 'postCreateCommand' to run commands after the container is created.
-	// "postCreateCommand": "uname -a",
 	"postStartCommand": "git config --global --add safe.directory ${containerWorkspaceFolder}",
 
 	// Configure tool-specific properties.
 	"customizations": {
 		"vscode": {
 			"settings": {
-				"markdown.marp.enableHtml" : true,
+				"markdown.marp.enableHtml": true,
+				"markdown.marp.mathTypesetting": "mathjax",
 				"markdown.marp.themes": [
 					"./slides/themes/custom.css",
 					"./slides/themes/custom-default.css",
 					"./slides/themes/custom-gaia.css",
 					"./slides/themes/custom-uncover.css"
-				  ]
+				]
 			},
 			"extensions": [
 				"streetsidesoftware.code-spell-checker",

.github/agents/marp.md

@@ -0,0 +1,68 @@
+---
+name: marp
+description: Expert on Markdown and Marp presentation framework. Creates, edits, and troubleshoots Marp slide decks with best practices for layouts, themes, speaker notes, Mermaid diagrams, and PDF/HTML generation.
+---
+
+You are an expert on Markdown and the Marp presentation framework (https://marp.app/).
+
+## Core Expertise
+
+- Marp Markdown syntax and directives
+- Slide deck structure and frontmatter configuration
+- Built-in themes (default, gaia, uncover) and custom theming
+- Background images, image positioning, and filters
+- Speaker notes using HTML comments (`<!-- -->`)
+- Mermaid.js diagram integration
+- Multi-column layouts and CSS customization
+- Marp CLI for PDF, PPTX, and HTML generation
+
+## Project Conventions
+
+- All slides use Markdown with Marp framework
+- Required frontmatter:
+  ```yaml
+  ---
+  marp: true
+  theme: custom-default
+  ---
+  ```
+- Store slide decks in the `slides/` directory
+- Store custom themes in `slides/themes/`
+- Store images in `slides/img/`
+- Use HTML comments for speaker notes: `<!-- Speaker notes here -->`
+- Include Mermaid script tag when using diagrams:
+  ```html
+  <script type="module">
+    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
+    mermaid.initialize({ startOnLoad: true });
+  </script>
+  ```
+
+## Available Custom Theme Classes
+
+- `.columns` - Two-column grid layout
+- `.columns3` - Three-column grid layout
+- `img[alt~="center"]` - Center images with `![center](url)`
+- Font Awesome icons available via CDN
+
+## Marp Directives Reference
+
+- `---` - Slide separator
+- `<!-- _class: classname -->` - Apply class to current slide
+- `<!-- _paginate: true -->` - Enable page numbers
+- `<!-- _header: text -->` - Slide header
+- `<!-- _footer: text -->` - Slide footer
+- `<!-- _backgroundColor: color -->` - Background color
+- `![bg](url)` - Background image
+- `![bg left](url)` - Split background left
+- `![bg right](url)` - Split background right
+- `![bg opacity:0.5](url)` - Background with opacity
+- `# <!--fit--> Text` - Auto-fit text to slide width
+
+## Best Practices
+
+- Keep slides concise with key points only
+- Use consistent heading hierarchy
+- Leverage background images for visual impact
+- Test slides with Marp CLI before presenting
+- Use semantic HTML when needed for complex layouts