Merge branch 'main' of github.com:team-dev-docs/devdocsprod-dev-docs

Author: [email protected]

.md

@@ -0,0 +1,55 @@
+
+
+  # How to Use the "Populate External Docs" Command in VSCode Extension
+
+## Step 1: Install and Set Up the Extension
+
+Ensure you have the Dev-Docs VSCode 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).
+2. Type "Dev-Docs: Generate External Docs" to find the command.
+
+## Step 3: Run the Command
+
+Execute the command by selecting it from the Command Palette.
+
+## Step 4: Customize Generation with dev-docs.json
+
+To customize the generation process, you need to modify the `dev-docs.json` file in your project root.
+
+1. Open `dev-docs.json` in your project.
+2. Look for the `ai` section, which controls the AI-based documentation generation.
+
+Example structure:
+
+```json
+{
+  "ai": {
+    "externalDocPrompt": "Custom prompt for external documentation",
+    "docPath": "docs",
+    "branch": "main",
+    "merge": true,
+    "components": {
+      "template": "path/to/component/template.md"
+    }
+  }
+}
+```
+
+## Key Customization Options
+
+1. `externalDocPrompt`: Customize the AI prompt for generating external docs.
+2. `docPath`: Specify the directory where external docs will be saved.
+3. `branch`: Set the Git branch for committing generated docs.
+4. `merge`: Enable/disable merging of documentation for multiple symbols in a file.
+5. `components`: Define custom MDX components for documentation.
+
+## Step 5: Generate Documentation
+
+After customizing `dev-docs.json`, run the "Populate External Docs" command again. The extension will use your settings to generate and save the documentation to a branch of your documentation repo tied to Dev-Docs.
+
+
+
+  

Create user-facing docs from your codebase.md

@@ -0,0 +1,53 @@
+
+
+  # How to Use and Customize the "Populate External Docs" Command in the VS Code Extension
+
+## Step 1: Access the Command
+
+1. Open your VS Code workspace
+2. Press `Cmd+Shift+P` (Mac) or `Ctrl+Shift+P` (Windows/Linux) to open the command palette
+3. Type "Populate External Docs" and select the command
+
+
+## Step 2: Customizing Generation with dev-docs.json
+
+To customize the documentation generation, modify the `dev-docs.json` file in your project root:
+
+1. Create or open `dev-docs.json`
+2. Add an `ai` object with customization options
+
+Example `dev-docs.json`:
+
+```json
+{
+  "ai": {
+    "internalTypeFilters": ["class", "method", "function"],
+    "codeFilters": [],
+    "nameFilters": [],
+    "docSubFolder": "api/",
+    "merge": true,
+    "externalDocPrompt": "Generate comprehensive API documentation"
+  }
+}
+```
+
+Key customization options:
+
+- `internalTypeFilters`: Specify which code elements to document
+- `docSubFolder`: Set the output folder for generated docs
+- `merge`: Combine multiple elements into a single document
+- `externalDocPrompt`: Customize the AI prompt for doc generation
+
+The `generateBySymbols` function in `src/AiServices.ts` uses these settings to generate documentation.
+
+## Step 3: Review and Edit
+
+After running the command:
+
+1. Check the `docs` folder (or your specified `docSubFolder`) for generated files
+2. Review and edit the generated content as needed
+3. Commit changes to your repository
+
+By following these steps and customizing the `dev-docs.json`, you can efficiently generate and manage external documentation for your project using the VS Code extension.
+
+  

Generate an Openapi file from your server code.md

@@ -0,0 +1,22 @@
+
+
+  # How generate an OpenAPI file from your server code
+
+This guide will walk you through using generating an OpenAPI file from your server code using a keyboard shortcut.
+
+## Step 1: Locate the Relevant Code
+
+Find a codefile that owns your server logic, for example a `server.js`.
+
+## Step 2: Using the Command
+
+1. Open your server file containing API routes.
+2. Press Shift+Cmd+A (Mac) or Shift+Ctrl+A (Windows/Linux).
+3. The extension will automatically:
+   - Parse your code for API routes
+   - Generate a Postman collection
+   - Convert it to an OpenAPI specification
+
+
+
+  

Generate codebase docs.md

@@ -0,0 +1,47 @@
+
+
+  # How to Use the "Generate Documentation" Command in Dev-Docs VSCode Extension
+
+## Using the Command
+
+### From the Context Menu
+
+1. Right-click in your code file.
+2. Select "Generate Documentation" from the context menu.
+
+### Using the Shortcut
+
+- On Mac: Press `Shift + Command + D`
+- On Windows/Linux: Press `Shift + Ctrl + D`
+
+## Customizing AI Generation
+
+To customize the AI generation of the "Generate Documentation" command, you can modify the `dev-docs.json` file in your project root.
+
+1. Open `dev-docs.json` in your project root.
+2. Locate the `ai` section in the JSON.
+3. Customize the following properties:
+
+```json
+{
+  "ai": {
+    "internalTypeFilters": ["class", "method", "function"],
+    "codeFilters": ["async function", "export default"],
+    "nameFilters": ["handleSubmit", "render"],
+    "contextPrompt": "your custom prompt or path to prompt template",
+    "defaultLength": "3-5 Sentences"
+  }
+}
+```
+
+### Key Properties:
+
+- `internalTypeFilters`: Array of symbol types to include in documentation.
+- `codeFilters`: Array of code patterns to filter for documentation.
+- `nameFilters`: Array of function or method names to specifically target.
+- `contextPrompt`: Custom prompt for AI generation or path to a prompt template file.
+- `defaultLength`: Desired length of generated documentation.
+
+By adjusting these properties, you can fine-tune the AI-generated documentation to better suit your project's needs.
+
+  

docs/Generate High Level Context on a specific folder.md

@@ -0,0 +1,27 @@
+
+
+  ## Generate High Level Context on a Specific Folder
+
+## Step 1: Access Folder Context Menu
+
+Right-click on the desired folder and select the "Generate context for folder" option.
+
+![image for /img/generate_high_level_context_on_a_specific_folder/step_1](/img/generate_high_level_context_on_a_specific_folder/step_1.png)
+
+## Step 2: Review Generated Context
+
+Navigate to the generated high-level context for the selected folder. You will find a summary of the folder's purpose and functionality.
+
+![image for /img/generate_high_level_context_on_a_specific_folder/step_2](/img/generate_high_level_context_on_a_specific_folder/step_2.png)
+
+The generated context will include:
+
+- Last updated timestamp
+- Purpose of the folder
+- High-level overview of the folder's contents and functionality
+- Specific features or components present in the folder (e.g., Image Background Removal, Sprite Generation)
+- Details about test files and their purposes
+
+This high-level context provides a quick understanding of the folder's contents and helps in navigating complex project structures.
+
+  

docs/Use the intro feature.md

@@ -0,0 +1,45 @@
+
+
+  ## Step 1: Locate the Command Palette
+
+Find the relevant command from the command palette to begin using the intro feature.
+
+![image for /img/use_the_intro_feature/step_1](/img/use_the_intro_feature/step_1.png)
+
+## Step 2: Explore the File Structure
+
+Navigate through the file structure in the Explorer view to familiarize yourself with the project layout.
+
+![image for /img/use_the_intro_feature/step_2](/img/use_the_intro_feature/step_2.png)
+
+## Step 3: Examine the Project Files
+
+Review the contents of the project files, including JavaScript, Markdown, and configuration files.
+
+![image for /img/use_the_intro_feature/step_3](/img/use_the_intro_feature/step_3.png)
+
+## Step 4: Analyze the Main JavaScript File
+
+Study the main JavaScript file, which contains important functions and logic for the project.
+
+![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)
+
+  

docs/generate context on a codefile.md

@@ -0,0 +1,44 @@
+
+
+  ## 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.
+
+![image for /img/generate_context_on_a_codefile/step_7](/img/generate_context_on_a_codefile/step_7.png)
+
+  

docs/use the dev-docs chrome extension.md

@@ -0,0 +1,23 @@
+
+
+  # Guide: Using the Dev-Docs Chrome Extension
+
+## Step 1: Open the Extension
+
+Open the dev-docs chrome extension by using the keyboard shortcut Shift + Command + U or by clicking on the extension icon in your browser. For Windows users, try clicking on the icon.
+
+![image for /img/use_the_dev-docs_chrome_extension/step_3](/img/use_the_dev-docs_chrome_extension/step_3.png)
+
+## Step 2: Interact with the UI
+
+Navigate through the extension's user interface by clicking on various elements and exploring its features.
+
+![image for /img/use_the_dev-docs_chrome_extension/step_1](/img/use_the_dev-docs_chrome_extension/step_1.png)
+
+## Step 3: Complete the Capture
+
+When you're finished interacting with the extension, open the Chrome extension menu and select the "Complete Capture" option to finalize your session.
+
+![image for /img/use_the_dev-docs_chrome_extension/step_4](/img/use_the_dev-docs_chrome_extension/step_4.png)
+
+