Merge pull request #251 from team-dev-docs/doc_review

Doc review

Author: avb-is-me

.md

@@ -1,14 +1,14 @@
 
 
-  # How to Use the "Populate External Docs" Command in VSCode Extension
+  # How to Use the "Populate External Docs" Command in VS Code Extension
 
 ## Step 1: Install and Set Up the Extension
 
-Ensure you have the Dev-Docs VSCode extension installed and properly configured.
+Ensure you have the Dev-Docs VS Code extension installed and properly configured.
 
 ## Step 2: Locate the Command
 
-1. Open the Command Palette in VSCode (Cmd+Shift+P on Mac or Ctrl+Shift+P on Windows/Linux).
+1. Open the Command Palette in VS Code (Cmd+Shift+P on Mac or Ctrl+Shift+P on Windows/Linux).
 2. Type "Dev-Docs: Generate External Docs" to find the command.
 
 ## Step 3: Run the Command

Generate codebase docs.md

@@ -1,6 +1,6 @@
 
 
-  # How to Use the "Generate Documentation" Command in Dev-Docs VSCode Extension
+  # How to Use the "Generate Documentation" Command in Dev-Docs VS Code Extension
 
 ## Using the Command
 

docs/Configure the Dev-Docs.json.md

@@ -0,0 +1,100 @@
+# Configuring Dev-Docs: Setting Up the Dev-Docs.JSON
+
+This guide will walk you through the configuration options available in the `dev-docs.json` file for the Dev-Docs extension.
+
+## Step 1: Locate the Configuration File
+
+Find or create the `dev-docs.json` file in your project's root directory.
+
+## Step 2: Understanding the Structure
+
+The `dev-docs.json` file has two main sections:
+
+1. `quickDoc`
+2. `ai`
+
+## Step 3: Configuring quickDoc
+
+The `quickDoc` section is used for quick documentation prompts. Here's an example:
+
+```json
+{
+  "quickDoc": {
+    "variablesAndFunctions": {
+      "prompts": [
+        {
+          "question": "Does this code use a third-party library?",
+          "title": "Third-Party Libraries"
+        }
+      ]
+    }
+  }
+}
+```
+
+## Step 4: Configuring AI
+
+The `ai` section contains various settings for AI-assisted documentation. Here's an example with common options:
+
+```json
+{
+  "ai": {
+    "docPath": "docs",
+    "codeSummaryPrompt": "Provide 3 bullet points on what this code does",
+    "defaultLength": "3-5 Sentences",
+    "branch": "main",
+    "internalTypeFilters": ["class", "method", "function"],
+    "codeFilters": ["async function", "export default"],
+    "nameFilters": ["handleSubmit", "render"],
+    "contextDirs": ["src/utils", "src/helpers"],
+    "openapi": {
+      "file": "src/api/openapi.yaml",
+      "x-codeSamples": {
+        "langs": ["javascript", "python", "ruby"]
+      }
+    }
+  }
+}
+```
+
+## Step 5: Configuration Options Table
+
+| Option | Type | Description | Default |
+|--------|------|-------------|---------|
+| `quickDoc.variablesAndFunctions.prompts` | Array | Quick documentation prompts | See example |
+| `ai.docPath` | String | Custom path for documentation | "some custom path" |
+| `ai.codeSummaryPrompt` | String | Prompt for code summaries | "3 Bullet points on what the code does" |
+| `ai.defaultLength` | String | Default response length | "3-5 Sentences" |
+| `ai.branch` | String | Git branch for documentation | "main" |
+| `ai.internalTypeFilters` | Array | Filters for code types | ["file", "module", "class", ...] |
+| `ai.codeFilters` | Array | Filters for code patterns | ["async function", "export default"] |
+| `ai.nameFilters` | Array | Filters for function names | ["handleSubmit", "render"] |
+| `ai.contextDirs` | Array | Directories for context generation | ["src/utils", "src/helpers"] |
+| `ai.openapi.file` | String | Path to OpenAPI specification | "src/api/openapi.yaml" |
+| `ai.openapi.x-codeSamples.langs` | Array | Languages for code samples | ["javascript", "python", "ruby"] |
+
+## Step 6: Advanced Configuration
+
+For more advanced use cases, you can configure folder-specific prompts:
+
+```json
+{
+  "ai": {
+    "variablesAndFunctions": {
+      "src/components": {
+        "prompts": [
+          {
+            "title": "Component Props",
+            "question": "What props does this component accept?",
+            "documentation": "List the props with their types and descriptions."
+          }
+        ]
+      }
+    }
+  }
+}
+```
+
+By following these steps and using the provided examples and table, you can effectively configure the Dev-Docs extension to suit your project's documentation needs.
+
+  

docs/Configure your output/_category_.json

@@ -0,0 +1,4 @@
+{
+    "position": 5,
+    "label": "Configure Your Output"
+}

docs/Dev-Docs-Quickstart.md

@@ -59,7 +59,7 @@ Wait for the documentation to generate, and then right click to open the context
 
 ### Step 1: Click on the 'dev-docs: Populate External Docs' option to generate user-facing content for your public docs
 
-Open the command palette with `shift cmd P`, and find/click on the 'dev-docs: Populate External Docs' option.
+Open the command palette with `shift cmd P`, and find/click on the 'dev-docs: Populate External Docs' option. You can navigate to the repo in GitHub to view the output. 
 
 ![This is the image for SPAN with the text: dev-docs: Populate External Docs and then clicked](/img/devdocs_quickstart/step_5.png)
 

docs/Internal-Docs/Create a custom doc using the vscode extension.md

@@ -0,0 +1,43 @@
+
+
+  ## Step 1: Navigate to Dev-Docs Panel
+
+Open the Dev-Docs panel in your VS Code extension.
+
+![image for /img/create_a_custom_doc_using_the_vscode_extension/step_1](/img/create_a_custom_doc_using_the_vscode_extension/step_1.png)
+
+## Step 2: Initiate Custom Doc Creation
+
+Click on the "Create Custom Doc" button to start the process.
+
+![image for /img/create_a_custom_doc_using_the_vscode_extension/step_2](/img/create_a_custom_doc_using_the_vscode_extension/step_2.png)
+
+## Step 3: Review Existing Code
+
+Examine the existing code in your project, which may include functions for image processing and sprite generation.
+
+![image for /img/create_a_custom_doc_using_the_vscode_extension/step_3](/img/create_a_custom_doc_using_the_vscode_extension/step_3.png)
+
+## Step 4: Analyze Code Structure
+
+Take a closer look at the structure of your code, including imports and function definitions.
+
+![image for /img/create_a_custom_doc_using_the_vscode_extension/step_4](/img/create_a_custom_doc_using_the_vscode_extension/step_4.png)
+
+
+## Step 6: Review Additional Functions
+
+Look at other functions in your code, like `getUniqueColors`.
+
+
+## Step 7: Select Documentation File
+
+Choose the "misc-cool-ways-to-use-this-sdk.md" file to document the SDK usage.
+
+## Step 8: Document SDK Features
+
+Write documentation outlining the cool ways to use the SDK, including creating custom character sprites, generating unique game environments, and automating spritesheet creation.
+
+
+
+  

docs/Generate High Level Context on a specific folder.md renamed to docs/Internal-Docs/Generate High Level Context on a specific folder.md

@@ -1,62 +1,62 @@
 
 
-  ## Generate Context from the VSCode Extension
+  # Generate Context from the VS Code Extension
 
-### Step 1: Access the Extension Menu
+## Step 1: Access the Extension Menu
 
-Click on the "Generate Context" button in the welcome view of the VSCode extension.
+Click on the "Generate Context" button in the Dev-Docs menu within VS Code.
 
 ![image for /img/generate_context_from_the_vscode_extension/step_1](/img/generate_context_from_the_vscode_extension/step_1.png)
 
-### Step 2: Initiate Context Generation
+## Step 2: Initiate Context Generation
 
 Click on the "Generate Context" button to start the process.
 
 ![image for /img/generate_context_from_the_vscode_extension/step_2](/img/generate_context_from_the_vscode_extension/step_2.png)
 
-### Step 3: Confirm Context Generation
+## Step 3: Confirm Context Generation
 
 Click on the "Generate Context" button again to confirm and proceed.
 
 ![image for /img/generate_context_from_the_vscode_extension/step_3](/img/generate_context_from_the_vscode_extension/step_3.png)
 
-### Step 4: View Project Structure
+## Step 4: View Project Structure
 
 Examine the project structure displayed in the file explorer.
 
 ![image for /img/generate_context_from_the_vscode_extension/step_4](/img/generate_context_from_the_vscode_extension/step_4.png)
 
-### Step 5: Select Context File
+## Step 5: Select Context File
 
 Click on the "dev-docs" folder to expand it and view its contents.
 
 ![image for /img/generate_context_from_the_vscode_extension/step_5](/img/generate_context_from_the_vscode_extension/step_5.png)
 
-### Step 6: Explore Generated Context
+## Step 6: Explore Generated Context
 
 Review the expanded file structure, including the context files within the "dev-docs" folder.
 
 ![image for /img/generate_context_from_the_vscode_extension/step_6](/img/generate_context_from_the_vscode_extension/step_6.png)
 
-### Step 7: Open Context File
+## Step 7: Open Context File
 
 Click on the "context-test.js.md" file to open it.
 
 ![image for /img/generate_context_from_the_vscode_extension/step_7](/img/generate_context_from_the_vscode_extension/step_7.png)
 
-### Step 8: Review Generated Context
+## Step 8: Review Generated Context
 
 Examine the content of the opened context file, which includes a high-level summary of the code.
 
 ![image for /img/generate_context_from_the_vscode_extension/step_8](/img/generate_context_from_the_vscode_extension/step_8.png)
 
-### Step 9: Analyze Context Details
+## Step 9: Analyze Context Details
 
 Study the detailed information provided in the context file, including methods and code examples.
 
 ![image for /img/generate_context_from_the_vscode_extension/step_9](/img/generate_context_from_the_vscode_extension/step_9.png)
 
-### Step 10: Utilize Generated Context
+## Step 10: Utilize Generated Context
 
 Use the generated context to better understand the code structure and functionality of the sprite generation module.
 

docs/generate context from the vscode extension.md renamed to docs/Internal-Docs/generate context from the vscode extension.md

@@ -1,40 +1,48 @@
 
+  # Generate Context on a Codefile 
 
-  ## Step 1: Locate the Code File
+## Step 1: Locate the Code File
 
 Find the code file you want to generate context for in your development environment.
 
 ![image for /img/generate_context_on_a_codefile/step_1](/img/generate_context_on_a_codefile/step_1.png)
+
 ## Step 2: Open the Context Menu
 
 Right-click on the code file to open the context menu.
 
 ![image for /img/generate_context_on_a_codefile/step_2](/img/generate_context_on_a_codefile/step_2.png)
+
 ## Step 3: Access the Dev-Docs Submenu
 
 In the context menu, find and hover over the "dev-docs" submenu.
 
 ![image for /img/generate_context_on_a_codefile/step_3](/img/generate_context_on_a_codefile/step_3.png)
+
 ## Step 4: Select Generate Context Option
 
 Click on the "Generate Context" option within the dev-docs submenu.
 
 ![image for /img/generate_context_on_a_codefile/step_4](/img/generate_context_on_a_codefile/step_4.png)
+
 ## Step 5: View Generated Context File
 
 A new file named "context-[filename].md" will appear in your file explorer.
 
 ![image for /img/generate_context_on_a_codefile/step_5](/img/generate_context_on_a_codefile/step_5.png)
+
 ## Step 6: Review the Generated Context
 
 Open the newly created markdown file to view the high-level overview of your code.
 
 ![image for /img/generate_context_on_a_codefile/step_6](/img/generate_context_on_a_codefile/step_6.png)
+
 ## Step 7: Open the Dev-Docs editor
 
 Right-click on the generated markdown file to open the markdown file in dev-docs editor.
 
 ![image for /img/generate_context_on_a_codefile/step_8](/img/generate_context_on_a_codefile/step_8.png)
+
 ## Step 8: Examine the Context Details
 
 Review the generated context, including the last update time, overview, main code object, and methods.

docs/generate context on a codefile.md renamed to docs/Internal-Docs/generate context on a codefile.md

@@ -4,7 +4,7 @@ slug: /VS-Code-Commands/Generate-Documentation-Command
 
 # Generate Documentation Command
 
-The `devdocs.generateDocumentation` command is a powerful feature of the Dev-Docs VSCode extension that allows you to automatically generate documentation for your codebase. This command leverages the power of artificial intelligence to analyze your code and generate comprehensive documentation, saving you valuable time and effort.
+The `devdocs.generateDocumentation` command is a powerful feature of the Dev-Docs VS Code extension that allows you to automatically generate documentation for your codebase. This command leverages the power of artificial intelligence to analyze your code and generate comprehensive documentation, saving you valuable time and effort.
 
 ## What Does This VS Code Extension Command Do?