diff --git a/.md b/.md index 155bbf603..cdd0621b1 100644 --- 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 index db7c6f0e5..5f312cde1 100644 --- 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 new file mode 100644 index 000000000..71810ebc2 --- /dev/null +++ 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. + + \ No newline at end of file diff --git a/docs/Configure your output/_category_.json b/docs/Configure your output/_category_.json new file mode 100644 index 000000000..f3a4ba139 --- /dev/null +++ b/docs/Configure your output/_category_.json @@ -0,0 +1,4 @@ +{ + "position": 5, + "label": "Configure Your Output" +} \ No newline at end of file diff --git a/docs/Dev-Docs-Quickstart.md b/docs/Dev-Docs-Quickstart.md index d75d29a1e..bed36ec22 100644 --- 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 new file mode 100644 index 000000000..db138c170 --- /dev/null +++ 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. + + + + \ No newline at end of file diff --git a/docs/Generate High Level Context on a specific folder.md b/docs/Internal-Docs/Generate High Level Context on a specific folder.md similarity index 100% rename from docs/Generate High Level Context on a specific folder.md rename to docs/Internal-Docs/Generate High Level Context on a specific folder.md diff --git a/docs/generate context from the vscode extension.md b/docs/Internal-Docs/generate context from the vscode extension.md similarity index 80% rename from docs/generate context from the vscode extension.md rename to docs/Internal-Docs/generate context from the vscode extension.md index f4e2201af..110421a0c 100644 --- a/docs/generate context from the vscode extension.md +++ b/docs/Internal-Docs/generate 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 b/docs/Internal-Docs/generate context on a codefile.md similarity index 95% rename from docs/generate context on a codefile.md rename to docs/Internal-Docs/generate context on a codefile.md index 474c8672b..2d47ea36e 100644 --- a/docs/generate context on a codefile.md +++ b/docs/Internal-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 index 43cc529c5..3dbb0c73e 100644 --- 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/docs/Generate-Internal-Docs-at-Github-Commit.md b/docs/_Generate-Internal-Docs-at-Github-Commit.md similarity index 100% rename from docs/Generate-Internal-Docs-at-Github-Commit.md rename to docs/_Generate-Internal-Docs-at-Github-Commit.md diff --git a/docs/_Initial-Set-Up/Dev-Docs Quickstart.md b/docs/_Initial-Set-Up/_Dev-Docs Quickstart.md similarity index 100% rename from docs/_Initial-Set-Up/Dev-Docs Quickstart.md rename to docs/_Initial-Set-Up/_Dev-Docs Quickstart.md diff --git a/docs/Use the intro feature.md b/docs/_Use the intro feature.md similarity index 57% rename from docs/Use the intro feature.md rename to docs/_Use the intro feature.md index ef420f9a4..8b2402ef2 100644 --- a/docs/Use the intro feature.md +++ b/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) \ No newline at end of file diff --git a/docs/Using-the-Chrome-Extension.md b/docs/_Using-the-Chrome-Extension.md similarity index 100% rename from docs/Using-the-Chrome-Extension.md rename to 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 index 3c40b6894..a256cb0d7 100644 --- 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/docs/_VS Code Ext Commands/High-Level-Context-Generation-for-Code-Files-and-Folders.md b/docs/_VS Code Ext Commands/High-Level-Context-Generation-for-Code-Files-and-Folders.md index 73e3e9947..3db769bc7 100644 --- a/docs/_VS Code Ext Commands/High-Level-Context-Generation-for-Code-Files-and-Folders.md +++ b/docs/_VS 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 index 549c3a5bf..0c7ef7977 100644 --- 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. diff --git a/docs/external-docs/generate a changelog from your commits.md b/docs/external-docs/generate a changelog from your commits.md new file mode 100644 index 000000000..20533c652 --- /dev/null +++ b/docs/external-docs/generate a changelog from your commits.md @@ -0,0 +1,75 @@ + + +# Generate a Changelog from Your Commits + +## Step 1: Access the Dev-Docs Platform + +Navigate to the Dev-Docs website and locate the "Login with GitHub" button. + +![image for /img/generate_a_changelog_from_your_commits/step_1](/img/generate_a_changelog_from_your_commits/step_1.png) + +## Step 2: Navigate to User-Facing Docs + +After logging in, find and click on the "User-facing docs" option in the dashboard. + +![image for /img/generate_a_changelog_from_your_commits/step_2](/img/generate_a_changelog_from_your_commits/step_2.png) + +## Step 3: Access AI Features + +Locate and click on the "More with AI" button to access advanced features. + +![image for /img/generate_a_changelog_from_your_commits/step_3](/img/generate_a_changelog_from_your_commits/step_3.png) + +## Step 4: Initiate Changelog Generation + +Find and click on the "Generate a changelog" button to start the process. + +![image for /img/generate_a_changelog_from_your_commits/step_4](/img/generate_a_changelog_from_your_commits/step_4.png) + +## Step 5: Select Repository + +Click on the "Select Repos" dropdown to choose the repository for which you want to generate the changelog. + +![image for /img/generate_a_changelog_from_your_commits/step_5](/img/generate_a_changelog_from_your_commits/step_5.png) + +## Step 6: Choose Repository + +Select the checkbox next to the desired repository. + +![image for /img/generate_a_changelog_from_your_commits/step_6](/img/generate_a_changelog_from_your_commits/step_6.png) + +## Step 7: Configure Changelog Settings + +Adjust the settings for your changelog generation, including the commit selection method and the location for the new document. + +## Step 8: Select Commit Range + +Choose "By Number of Last Recent Commits" to specify the range of commits to include in the changelog. + +![image for /img/generate_a_changelog_from_your_commits/step_8](/img/generate_a_changelog_from_your_commits/step_8.png) + +## Step 9: Submit Changelog Request + +Review your settings and click the "Submit" button to generate the changelog. + +![image for /img/generate_a_changelog_from_your_commits/step_9](/img/generate_a_changelog_from_your_commits/step_9.png) + +## Step 10: Confirm Submission + +Click on the "Submit" button to finalize and process your changelog request. + +![image for /img/generate_a_changelog_from_your_commits/step_10](/img/generate_a_changelog_from_your_commits/step_10.png) + +## Step 11: Review Generated Changelog + +Examine the automatically generated changelog, which will be displayed in a formatted structure. + +![image for /img/generate_a_changelog_from_your_commits/step_11](/img/generate_a_changelog_from_your_commits/step_11.png) + +## Step 12: Copy or Edit Changelog + +You can now copy the generated changelog or make any necessary edits before finalizing it for your project. + +![image for /img/generate_a_changelog_from_your_commits/step_12](/img/generate_a_changelog_from_your_commits/step_12.png) + + \ No newline at end of file diff --git a/docs/generate new docs from your existing docs.md b/docs/external-docs/generate new docs from your existing docs.md similarity index 99% rename from docs/generate new docs from your existing docs.md rename to docs/external-docs/generate new docs from your existing docs.md index 65ab1c1e2..01a6f6c9a 100644 --- a/docs/generate new docs from your existing docs.md +++ b/docs/external-docs/generate new docs from your existing docs.md @@ -51,7 +51,6 @@ Review and adjust the settings for your new document or page creation, including Write your response in the text area, providing a prompt for the new document you want to generate. - ## Step 10: Submit Generation Request Click on the icon button to submit your document generation request. @@ -77,7 +76,7 @@ Navigate to your GitHub repository to view the newly published documentation. ## Step 14: Review Branch Information -Examine the branch information to ensure your new documentation has been properly integrated. +Examine the branch information to ensure your new documentation has been properly created. ![image for /img/generate_new_docs_from_your_existing_docs/step_14](/img/generate_new_docs_from_your_existing_docs/step_14.png) diff --git a/docs/use the dev-docs chrome extension.md b/docs/use the dev-docs chrome extension.md index 18400cb40..ca7cce14d 100644 --- a/docs/use the dev-docs chrome extension.md +++ b/docs/use the dev-docs chrome extension.md @@ -1,6 +1,6 @@ - # Guide: Using the Dev-Docs Chrome Extension + # Generate Step-by-Step Guides with the Chrome Extension ## Step 1: Open the Extension @@ -18,6 +18,6 @@ Navigate through the extension's user interface by clicking on various elements 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) + \ No newline at end of file