- Comment out the "contributing/testing" entry in the sidebars configuration.

Author: hawkeyexl

docs/contributing/templates/feature.mdx

@@ -11,12 +11,14 @@ Use this template to document new features or significant changes to existing fe
 ## When to use this template
 
 Use feature documentation when:
+
 - A new feature has been added
 - An existing feature has changed significantly
 - Users need to understand what changed and how to use it
 - Migration from old to new behavior is needed
 
 **Examples:**
+
 - New action type added to Doc Detective
 - Configuration options changed
 - New integration or plugin
@@ -26,7 +28,7 @@ Use feature documentation when:
 
 Copy and adapt this template for your feature documentation:
 
-````markdown
+```markdown
 ---
 title: [Feature name]
 description: [One-sentence description of what this feature does]
@@ -58,41 +60,30 @@ description: [One-sentence description of what this feature does]
 
 ### Basic example
 
-\`\`\`[language] title="[filename]"
-[Code showing simplest usage]
-\`\`\`
+\`\`\`[language] title="[filename]" [Code showing simplest usage] \`\`\`
 
 [Explain what this code does and what to expect.]
 
 ### Advanced example
 
 [Optional: Show a more complex or real-world usage.]
 
-\`\`\`[language] title="[filename]"
-[More complex example]
-\`\`\`
+\`\`\`[language] title="[filename]" [More complex example] \`\`\`
 
 [Explain the additional capabilities demonstrated.]
 
 ## Configuration options
 
 [If the feature has configuration, document each option.]
 
-| Option | Type | Required | Default | Description |
-|--------|------|----------|---------|-------------|
-| option1 | string | Yes | - | What this option does |
-| option2 | number | No | 10 | What this option does |
+| Option  | Type   | Required | Default | Description           |
+| ------- | ------ | -------- | ------- | --------------------- |
+| option1 | string | Yes      | -       | What this option does |
+| option2 | number | No       | 10      | What this option does |
 
 ### Example configuration
 
-\`\`\`json title=".doc-detective.json"
-{
-  "featureName": {
-    "option1": "value",
-    "option2": 20
-  }
-}
-\`\`\`
+\`\`\`json title=".doc-detective.json" { "featureName": { "option1": "value", "option2": 20 } } \`\`\`
 
 ## Migration guide
 
@@ -102,17 +93,13 @@ description: [One-sentence description of what this feature does]
 
 [Show how users currently do this.]
 
-\`\`\`[language]
-[Old way]
-\`\`\`
+\`\`\`[language] [Old way] \`\`\`
 
 ### To new behavior
 
 [Show how users should do this now.]
 
-\`\`\`[language]
-[New way]
-\`\`\`
+\`\`\`[language] [New way] \`\`\`
 
 ### Breaking changes
 
@@ -141,6 +128,7 @@ description: [One-sentence description of what this feature does]
 **Cause:** [Why this happens]
 
 **Solution:**
+
 1. [Step 1]
 2. [Step 2]
 
@@ -151,7 +139,7 @@ description: [One-sentence description of what this feature does]
 - [Related feature or action](link)
 - [Configuration reference](link)
 - [Tutorial using this feature](link)
-````
+```
 
 ## Writing tips
 
@@ -160,22 +148,27 @@ description: [One-sentence description of what this feature does]
 Start with why users should care:
 
 ✅ Good:
+
 > The `parallel` option lets you run tests simultaneously, reducing execution time by up to 70% for large test suites.
 
 ⛔ Too technical:
+
 > The `parallel` option implements concurrent test execution using worker threads.
 
 ### Show before and after
 
 For changes, show both the old and new way:
 
 ✅ Good:
+
 > **Before:** You had to manually specify each test file
+>
 > ```bash
 > doc-detective test1.spec.json test2.spec.json test3.spec.json
 > ```
 >
 > **Now:** Use glob patterns to match multiple files
+>
 > ```bash
 > doc-detective "tests/**/*.spec.json"
 > ```
@@ -185,6 +178,7 @@ For changes, show both the old and new way:
 Examples should be copy-pasteable and work as-is:
 
 ✅ Complete:
+
 ```json
 {
   "tests": [
@@ -199,47 +193,45 @@ Examples should be copy-pasteable and work as-is:
     }
   ]
 }
-````
+```
 
 ⛔ Incomplete:
+
 ```json
 {
   "screenshot": {
     "fullPage": true
   }
 }
-````
+```
 
 ### Document breaking changes clearly
 
 Be explicit about what breaks:
 
 ✅ Clear:
+
 > **Breaking change:** The `timeout` option now accepts milliseconds instead of seconds.
-> 
-> **Before:** `"timeout": 30` (30 seconds)
-> **After:** `"timeout": 30000` (30 seconds in milliseconds)
-> 
+>
+> **Before:** `"timeout": 30` (30 seconds) **After:** `"timeout": 30000` (30 seconds in milliseconds)
+>
 > **To update:** Multiply all timeout values by 1000.
 
 ### Version your examples
 
 If behavior varies by version:
 
-````markdown
-:::info Version differences
-This feature works differently depending on your Doc Detective version:
+```markdown
+:::info Version differences This feature works differently depending on your Doc Detective version:
 
-**v2.x:** Uses `oldOption`
-**v3.x and later:** Uses `newOption`
-:::
-````
+**v2.x:** Uses `oldOption` **v3.x and later:** Uses `newOption` :::
+```
 
 ## Example feature documentation
 
 Here's a complete example:
 
-````markdown
+```markdown
 ---
 title: Screenshot cropping
 description: Capture screenshots of specific elements instead of the entire page.
@@ -271,117 +263,45 @@ When documenting specific features, you often want screenshots that focus on a p
 
 Capture just a specific button:
 
-\`\`\`json title="screenshot-button.spec.json"
-{
-  "tests": [
-    {
-      "steps": [
-        {
-          "action": "goTo",
-          "url": "https://doc-detective.com"
-        },
-        {
-          "action": "screenshot",
-          "path": "get-started-button.png",
-          "cropTo": {
-            "selector": "a[href='/docs/get-started']"
-          }
-        }
-      ]
-    }
-  ]
-}
-\`\`\`
+\`\`\`json title="screenshot-button.spec.json" { "tests": [ { "steps": [ { "action": "goTo", "url": "https://doc-detective.com" }, { "action": "screenshot", "path": "get-started-button.png", "cropTo": { "selector": "a[href='/docs/get-started']" } } ] } ] } \`\`\`
 
 This captures only the "Get Started" link, not the entire page.
 
 ### Advanced example
 
 Crop to an element with padding:
 
-\`\`\`json title="screenshot-with-padding.spec.json"
-{
-  "tests": [
-    {
-      "steps": [
-        {
-          "action": "goTo",
-          "url": "https://doc-detective.com"
-        },
-        {
-          "action": "screenshot",
-          "path": "navigation-menu.png",
-          "cropTo": {
-            "selector": "nav.navbar",
-            "padding": 20
-          }
-        }
-      ]
-    }
-  ]
-}
-\`\`\`
+\`\`\`json title="screenshot-with-padding.spec.json" { "tests": [ { "steps": [ { "action": "goTo", "url": "https://doc-detective.com" }, { "action": "screenshot", "path": "navigation-menu.png", "cropTo": { "selector": "nav.navbar", "padding": 20 } } ] } ] } \`\`\`
 
 Adds 20 pixels of padding around the navigation element for context.
 
 ## Configuration options
 
 | Option | Type | Required | Default | Description |
-|--------|------|----------|---------|-------------|
+| --- | --- | --- | --- | --- |
 | path | string | Yes | - | Where to save the screenshot |
 | cropTo | object | No | - | Element to crop to (see below) |
-| cropTo.selector | string | Yes* | - | CSS selector or XPath of element |
+| cropTo.selector | string | Yes\* | - | CSS selector or XPath of element |
 | cropTo.padding | number | No | 0 | Pixels of padding around element |
 | fullPage | boolean | No | false | Ignored if cropTo is specified |
 
-*Required if `cropTo` is used
+\*Required if `cropTo` is used
 
 ### Example configuration
 
-\`\`\`json title=".doc-detective.json"
-{
-  "tests": [
-    {
-      "steps": [
-        {
-          "action": "screenshot",
-          "path": "feature.png",
-          "cropTo": {
-            "selector": "#feature-section",
-            "padding": 15
-          }
-        }
-      ]
-    }
-  ]
-}
-\`\`\`
+\`\`\`json title=".doc-detective.json" { "tests": [ { "steps": [ { "action": "screenshot", "path": "feature.png", "cropTo": { "selector": "#feature-section", "padding": 15 } } ] } ] } \`\`\`
 
 ## Migration guide
 
 If you were using full-page screenshots and want to crop:
 
 ### From full-page screenshots
 
-\`\`\`json
-{
-  "action": "screenshot",
-  "path": "page.png",
-  "fullPage": true
-}
-\`\`\`
+\`\`\`json { "action": "screenshot", "path": "page.png", "fullPage": true } \`\`\`
 
 ### To element-based cropping
 
-\`\`\`json
-{
-  "action": "screenshot",
-  "path": "element.png",
-  "cropTo": {
-    "selector": "#target-element"
-  }
-}
-\`\`\`
+\`\`\`json { "action": "screenshot", "path": "element.png", "cropTo": { "selector": "#target-element" } } \`\`\`
 
 ### Breaking changes
 
@@ -402,6 +322,7 @@ None. This is a backward-compatible addition. Existing screenshots continue to w
 **Cause:** The selector doesn't match any element on the page
 
 **Solution:**
+
 1. Verify the element exists on the page
 2. Use browser dev tools to test your selector
 3. Add a `wait` action before screenshot if element loads slowly
@@ -414,6 +335,7 @@ None. This is a backward-compatible addition. Existing screenshots continue to w
 **Cause:** Element is smaller than expected or padding is insufficient
 
 **Solution:**
+
 1. Increase the `padding` value
 2. Select a parent element that includes more context
 3. Verify you're selecting the correct element
@@ -423,7 +345,7 @@ None. This is a backward-compatible addition. Existing screenshots continue to w
 - [screenshot action reference](/docs/get-started/actions/screenshot)
 - [CSS selectors guide](/docs/get-started/selectors/css)
 - [Tutorial: Capture screenshots](/docs/get-started/tutorials/capture-screenshot)
-````
+```
 
 ## Checklist before submitting