team-dev-docs · avb-is-me · Oct 31, 2024 · Oct 23, 2024 · Oct 23, 2024 · Oct 23, 2024
diff --git a/.md b/.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

diff --git a/Generate codebase docs.md b/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
 

diff --git a/docs/Configure the Dev-Docs.json.md b/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.
+
+
diff --git a/docs/Configure your output/_category_.json b/docs/Configure your output/_category_.json
@@ -0,0 +1,4 @@
+{
+    "position": 5,
+    "label": "Configure Your Output"
+}
diff --git a/docs/Dev-Docs-Quickstart.md b/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)
 

diff --git a/docs/Internal-Docs/Create a custom doc using the vscode extension.md b/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.
+
+
+
+
diff --git a/...igh Level Context on a specific folder.md → ...igh Level Context on a specific folder.md b/...igh Level Context on a specific folder.md → ...igh Level Context on a specific folder.md
diff --git a/...rate context from the vscode extension.md → ...rate context from the vscode extension.md b/...rate context from the vscode extension.md → ...rate context from the vscode extension.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.
 

diff --git a/docs/generate context on a codefile.md → ...al-Docs/generate context on a codefile.md b/docs/generate context on a codefile.md → ...al-Docs/generate context on a codefile.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.

diff --git a/docs/VS Code Commands/_Generate-Documentation-Command.md b/docs/VS Code Commands/_Generate-Documentation-Command.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?
 

diff --git a/...enerate-Internal-Docs-at-Github-Commit.md → ...enerate-Internal-Docs-at-Github-Commit.md b/...enerate-Internal-Docs-at-Github-Commit.md → ...enerate-Internal-Docs-at-Github-Commit.md
diff --git a/docs/_Initial-Set-Up/Dev-Docs Quickstart.md → docs/_Initial-Set-Up/_Dev-Docs Quickstart.md b/docs/_Initial-Set-Up/Dev-Docs Quickstart.md → docs/_Initial-Set-Up/_Dev-Docs Quickstart.md
diff --git a/docs/Use the intro feature.md → docs/_Use the intro feature.md b/docs/Use the intro feature.md → docs/_Use the intro feature.md
@@ -24,22 +24,6 @@ Study the main JavaScript file, which contains important functions and logic for
 
 ![image for /img/use_the_intro_feature/step_4](/img/use_the_intro_feature/step_4.png)
 
-## Step 5: Understand the Sprite Generation Function
 
-Examine the `generateSprite` function, which is responsible for creating sprite animations.
-
-![image for /img/use_the_intro_feature/step_5](/img/use_the_intro_feature/step_5.png)
-
-## Step 6: Review the DALL-E Integration
-
-Look at how the DALL-E API is integrated into the sprite generation process.
-
-![image for /img/use_the_intro_feature/step_6](/img/use_the_intro_feature/step_6.png)
-
-## Step 7: Explore Additional Functionality
-
-Investigate other functions and features within the project, such as file saving and image processing.
-
-![image for /img/use_the_intro_feature/step_7](/img/use_the_intro_feature/step_7.png)
 
 
diff --git a/docs/Using-the-Chrome-Extension.md → docs/_Using-the-Chrome-Extension.md b/docs/Using-the-Chrome-Extension.md → docs/_Using-the-Chrome-Extension.md
diff --git a/docs/_VS Code Ext Commands/Create-External-Documentation-Command.md b/docs/_VS Code Ext Commands/Create-External-Documentation-Command.md
@@ -50,7 +50,7 @@ json
 - Visual Studio Code
 - The DevDocs extension installed and configured
 
-## How do I use this VSCode Extension Command?
+## How do I use this VS Code Extension Command?
 
 1. Open your project in Visual Studio Code.
 2. In the editor, select the code snippet or file you want to generate documentation for.

diff --git a/...S Code Ext Commands/High-Level-Context-Generation-for-Code-Files-and-Folders.md b/...S Code Ext Commands/High-Level-Context-Generation-for-Code-Files-and-Folders.md
@@ -38,7 +38,7 @@ Before using this command, ensure that you have the following:
 
 To generate high-level context documentation for a code file or folder, follow these steps:
 
-1. Open the command palette in VSCode (`Ctrl+Shift+P` or `Cmd+Shift+P`).
+1. Open the command palette in VS Code (`Ctrl+Shift+P` or `Cmd+Shift+P`).
 2. Search for and select the "Generate Folder Context" or "Generate High-Level Context" command.
 3. If prompted, select the code file or folder for which you want to generate the documentation.
 4. Wait for the command to complete. The generated documentation will be displayed in the output panel or a new file will be created with the documentation content.

diff --git a/docs/ai.branch.md b/docs/ai.branch.md
@@ -1,4 +1,9 @@
-# Dev-Docs.JSON Configuration
+---
+slug: /ai.branch
+---
+
+
+# Further Dev-Docs.JSON Configurations
 
 The `dev-docs.json` file is a configuration file used by the Dev-Docs extension to customize various aspects of its behavior, such as documentation generation, AI integration, and code analysis. It follows the JSON format and adheres to a predefined schema.  For most commands configuration is optional but recommended.