Merge pull request #4 from d2kole/claude/add-json-bash-support-LFNWq

Add JSON and Bash language support

Author: d2kole

src/content/day1.html

@@ -313,6 +313,30 @@ <h4>2. Complete CRUD Endpoints</h4>
         </div>
     </details>
 
+    <p><strong>Example API Response:</strong></p>
+    <div class="code-block">
+        <div class="code-header">
+            <span>JSON - GET /api/users Response</span>
+            <button class="copy-btn" onclick="copyCode(this, 'code-d1-2-response')">Copy</button>
+        </div>
+        <pre><code id="code-d1-2-response"
+                  class="language-json"
+                  data-type="response"
+                  data-description="Example JSON response from GET /api/users endpoint">[
+  {
+    "id": 1,
+    "name": "Alice Johnson",
+    "email": "[email protected]"
+  },
+  {
+    "id": 2,
+    "name": "Bob Smith",
+    "email": "[email protected]"
+  }
+]
+</code></pre>
+    </div>
+
     <h4>3. Building an Actual API with Node.js HTTP Module</h4>
     <p>Understanding Node.js core <code>http</code> module helps you appreciate what frameworks like Express abstract away. This example builds a complete server with routing, template rendering, and an API endpoint from scratch.</p>
 

src/content/day3.html

@@ -124,6 +124,40 @@ <h4>1. Consistent Error Response Format</h4>
         </div>
     </details>
 
+    <p><strong>Example Error Responses:</strong></p>
+    <div class="code-block">
+        <div class="code-header">
+            <span>JSON - Error Response Examples</span>
+            <button class="copy-btn" onclick="copyCode(this, 'code-d3-1-error-json')">Copy</button>
+        </div>
+        <pre><code id="code-d3-1-error-json"
+                  class="language-json"
+                  data-type="error-response"
+                  data-description="Example JSON error responses with consistent structure">// 404 Not Found Response
+{
+  "error": {
+    "status": 404,
+    "message": "User not found",
+    "details": null,
+    "timestamp": "2025-12-26T10:30:00.000Z"
+  }
+}
+
+// 422 Validation Error Response
+{
+  "error": {
+    "status": 422,
+    "message": "Validation failed",
+    "details": {
+      "email": "Invalid email format",
+      "age": "Must be at least 18"
+    },
+    "timestamp": "2025-12-26T10:30:00.000Z"
+  }
+}
+</code></pre>
+    </div>
+
     <h4>2. Centralized Error Handling Middleware</h4>
     <p class="code-description">
         <strong>Problem solved:</strong> Catches all errors from routes in one place, ensuring consistent error responses and proper logging without duplicating code.

src/content/day5.html

@@ -275,14 +275,27 @@ <h4>2. Header-Based Versioning</h4>
 app.use(checkDeprecation);
 
 app.listen(3000, () => console.log('Header-versioned API running'));
-
-// Example usage:
-// curl -H "Accept-Version: 1.0" http://localhost:3000/api/users
-// curl -H "Accept-Version: 2.0" http://localhost:3000/api/users
 </code></pre>
         </div>
     </details>
 
+    <p><strong>Testing with curl:</strong></p>
+    <div class="code-block">
+        <div class="code-header">
+            <span>Bash - Testing Header Versioning</span>
+            <button class="copy-btn" onclick="copyCode(this, 'code-d5-2-curl')">Copy</button>
+        </div>
+        <pre><code id="code-d5-2-curl"
+                  class="language-bash"
+                  data-type="testing"
+                  data-description="curl commands to test header-based API versioning"># Test with version 1.0
+curl -H "Accept-Version: 1.0" http://localhost:3000/api/users
+
+# Test with version 2.0
+curl -H "Accept-Version: 2.0" http://localhost:3000/api/users
+</code></pre>
+    </div>
+
     <h4>3. Content Negotiation Versioning</h4>
     <p>Use custom media types in the Accept header to specify API version. Follows REST principles by treating different versions as different resource representations.</p>
 
@@ -385,14 +398,27 @@ <h4>3. Content Negotiation Versioning</h4>
 });
 
 app.listen(3000, () => console.log('Content negotiation API running'));
-
-// Example usage:
-// curl -H "Accept: application/vnd.myapi.v1+json" http://localhost:3000/api/users
-// curl -H "Accept: application/vnd.myapi.v2+json" http://localhost:3000/api/users
 </code></pre>
         </div>
     </details>
 
+    <p><strong>Testing with curl:</strong></p>
+    <div class="code-block">
+        <div class="code-header">
+            <span>Bash - Testing Content Negotiation</span>
+            <button class="copy-btn" onclick="copyCode(this, 'code-d5-3-curl')">Copy</button>
+        </div>
+        <pre><code id="code-d5-3-curl"
+                  class="language-bash"
+                  data-type="testing"
+                  data-description="curl commands to test content negotiation versioning"># Test with version 1 using custom media type
+curl -H "Accept: application/vnd.myapi.v1+json" http://localhost:3000/api/users
+
+# Test with version 2 using custom media type
+curl -H "Accept: application/vnd.myapi.v2+json" http://localhost:3000/api/users
+</code></pre>
+    </div>
+
     <div class="storage-demo">
         <h4>💾 localStorage Practical: API Version Manager</h4>
         <p>Track and manage API version compatibility on the client side:</p>