Merge pull request #24 from thedemons/docs

Add images and documentation
Exafunction · Dec 14, 2023 · 48765f5 · 48765f5
2 parents 79bf850 + e7cfde4
commit 48765f5
Show file tree

Hide file tree

Showing 26 changed files with 205 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -17,9 +17,90 @@
 
 # Codeium for Visual Studio
 
-_Free, ultrafast Copilot alternative for Visual Studio_
+[Codeium](https://codeium.com/) is the modern coding superpower, a free code acceleration toolkit built on cutting edge AI technology. Currently, Codeium provides autocomplete, chat, and search capabilities in 70+ languages, with lightning fast speeds and state-of-the-art suggestion quality.
 
-Codeium autocompletes your code with AI in all major IDEs. Check out our [playground](https://www.codeium.com/playground) if you want to quickly try out Codeium online.
+There are many parts of the modern coding workflow that are boring, tedious, or frustrating, from regurgitating boilerplate to poring through StackOverflow. Recent advances in AI allow us to eliminate these parts, making it seamless to turn your ideas into code. With easy integration into Visual Studio and a less than 2 minute installation process, you can focus on being the best software developer, not the best code monkey.
 
-Contributions are welcome! Feel free to submit pull requests and issues related to the plugin.
+With Codeium, you get:
+- Unlimited single and multi-line code completions forever.
+- IDE-integrated chat: no need to leave Visual Studio to ChatGPT, and use convenient suggestions such as [Refactor](#refactor) and [Explain](#explain).
+- Support for 70+ programming languages: Javascript, Python, Typescript, PHP, Go, Java, C, C++, Rust, Ruby, and more.
+- Support through our [Discord Community](https://discord.gg/3XFf78nAx5).
 
+Join thousands of other developers who are using Codeium for free to accelerate their software iteration process, improve their code quality and consistency, reduce the number of code review iterations, accelerate developer onboarding, and keep them in their flow state. Want to learn more? Check out our [FAQ](https://codeium.com/faq).
+
+Check out our [playground](https://www.codeium.com/playground) if you want to quickly try out Codeium online.
+
+# Your New Autocomplete Superpowers
+## Use Natural Language
+
+Need to make changes in an unfamiliar language or codebase? Instead of spending hours learning all of the syntactical and stylistic details, type out comments in natural language and let Codeium get the job done.
+
+<p align="center">
+  <image src="docs/images/gen_random.gif" width="500"/>
+</p>
+
+## Minimize Boilerplate Coding
+
+Sometimes feel like a code monkey copy-pasting and modifying boilerplate code over and over again? Let Codeium handle writing the repetitive work so that you can stay in the coding flow state, generating code faster than you can type.
+
+<p align="center">
+  <image src="docs/images/auto_complete.gif" width="500"/>
+</p>
+
+# Your New Chat Superpowers
+## Generate
+
+Codeium Chat can generate whole functions and applications for you with simple natural language prompting and constraints.
+
+<p align="center">
+  <image src="docs/images/chat_generate_function.gif" width="800"/>
+</p>
+
+## Explain
+
+Diving into a foreign codebase? With the push of a button, our assistant will explain everything you need to know.
+
+<p align="center">
+  <image src="docs/images/chat_explain.gif" width="800"/>
+</p>
+
+## Refactor
+
+Want to rewrite your existing code to add a new feature? Fix a bug? Make it prettier? Click a button and tell your Codeium assistant what you want.
+
+<p align="center">
+  <image src="docs/images/chat_refactor.gif" width="800"/>
+</p>
+
+## Translate
+
+Leverage the power of AI to translate whole functions from one language to another within seconds.
+
+<p align="center">
+  <image src="docs/images/chat_convert.gif" width="800"/>
+</p>
+
+## Explain Problem
+
+Ever feels like warnings and errors are too verbose? Codeium can explain like you're five!
+<p align="center">
+  <image src="docs/images/chat_explain_problem.gif" width="800"/>
+</p>
+
+# Build Instructions
+- Open Visual Studio Installer and click the Modify button. Install the "Visual Studio extension development" in Other Toolsets.
+- Install the [Extensibility Essentials 2022](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ExtensibilityEssentials2022) extension.
+- Open `Codeium.sln` and press <kbd>CTRL+B</kbd> to build, if there were no errors, there should be a `Codeium.vsix` file in the `CodeiumVS/bin` folder.
+- You can press <kbd>F5</kbd> to debug the extension on a separate instance of Visual Studio. Consult the [official guide](https://learn.microsoft.com/en-us/visualstudio/extensibility/starting-to-develop-visual-studio-extensions?view=vs-2022) for more information.
+
+# How to help
+Feel free to [submit issues](https://github.com/Exafunction/CodeiumVisualStudio/issues/new) related to the extension so that we can better improve your experiences.
+
+We greatly value your input and invite you to contribute to our project. To do so, kindly [initiate a pull request](https://github.com/Exafunction/CodeiumVisualStudio/compare). Your expertise and insights are much appreciated.
+
+# Documentation
+For more information on how to install and use the extension, please see [the documentation](/docs/).
+
+# License
+Codeium Extension for Visual Studio is licensed under the MIT License, see [LICENSE.txt](/LICENSE.txt) for more information.
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,3 @@
+# Table of contents
+1. [Installing Codeium Extension for Visual Studio](installing.md)
+2. [Using the Extension](using.md)
diff --git a/docs/images/auto_complete.gif b/docs/images/auto_complete.gif
diff --git a/docs/images/chat_convert.gif b/docs/images/chat_convert.gif
diff --git a/docs/images/chat_explain.gif b/docs/images/chat_explain.gif
diff --git a/docs/images/chat_explain_problem.gif b/docs/images/chat_explain_problem.gif
diff --git a/docs/images/chat_generate_function.gif b/docs/images/chat_generate_function.gif
diff --git a/docs/images/chat_refactor.gif b/docs/images/chat_refactor.gif
diff --git a/docs/images/gen_random.gif b/docs/images/gen_random.gif
diff --git a/docs/images/installation_1.png b/docs/images/installation_1.png
diff --git a/docs/images/installation_2.png b/docs/images/installation_2.png
diff --git a/docs/images/installation_3.png b/docs/images/installation_3.png
diff --git a/docs/images/installation_4.png b/docs/images/installation_4.png
diff --git a/docs/images/installation_5.png b/docs/images/installation_5.png
diff --git a/docs/images/using_auto_completion.png b/docs/images/using_auto_completion.png
diff --git a/docs/images/using_chat_window.png b/docs/images/using_chat_window.png
diff --git a/docs/images/using_chat_window_ui.png b/docs/images/using_chat_window_ui.png
diff --git a/docs/images/using_explain_code_block.png b/docs/images/using_explain_code_block.png
diff --git a/docs/images/using_explain_function.png b/docs/images/using_explain_function.png
diff --git a/docs/images/using_explain_problem.png b/docs/images/using_explain_problem.png
diff --git a/docs/images/using_generate_docstring.png b/docs/images/using_generate_docstring.png
diff --git a/docs/images/using_generate_unit_test.png b/docs/images/using_generate_unit_test.png
diff --git a/docs/images/using_refactor_code_block.png b/docs/images/using_refactor_code_block.png
diff --git a/docs/images/using_refactor_code_block_1.png b/docs/images/using_refactor_code_block_1.png
diff --git a/docs/installing.md b/docs/installing.md
@@ -0,0 +1,43 @@
+# Installing Codeium Extension for Visual Studio
+
+## Open Extension Marketplace
+In the Visual Studio menu bar, click **Extensions**, then click **Manage Extensions**.
+<p align="center">
+  <image src="images/installation_1.png"/>
+</p>
+
+## Install Codeium
+In the **Manage Extensions** window, click **Visual Studio Marketplace**, search for **Codeium**, and then click **Download**.
+
+<p align="center">
+  <image src="images/installation_2.png" width="600"/>
+</p>
+
+Alternatively, download the VSIX package from [the marketplace](https://marketplace.visualstudio.com/items?itemName=Codeium.CodeiumVS) and double click to install.
+
+## Relaunch Visual Studio
+Close Visual Studio, the **VSIX Installer** should opens and asks for the confirmation to install, click **Modify**.
+
+<p align="center">
+  <image src="images/installation_3.png" width="300"/>
+</p>
+
+## Sign in to Codeium
+Open or create a new project in Visual Studio. You should see a notification with a button to **Sign in**, click on it.
+
+<p align="center">
+  <image src="images/installation_4.png"/>
+</p>
+
+If for some reasons this notification does not appear, please go to **Extensions > Codeium > Sign in** instead.
+
+<p align="center">
+  <image src="images/installation_5.png"/>
+</p>
+
+This will open the browser and ask you to sign into your Codeium account. If you do not have a Codeium account yet, you will be redirected to create an account.
+
+*Why do we require an account? In order to remove abuse of the product and make sure that we know you are an early user, we ask to authorize Codeium extensions with an account before use. We do not use, share, or sell any identifying information for any purpose.*
+
+## All Done!
+Once you sign in, you will automatically be signed in to the Codeium extension on Visual Studio.
diff --git a/docs/using.md b/docs/using.md
@@ -0,0 +1,75 @@
+# Using the Extension
+
+## Table of contents
+1. [Auto completion](#auto-completion)
+2. [Chat Window](#chat-window)
+3. [Explain Code block](#explain-code-block)
+4. [Refactor Code block](#refactor-code-block)
+5. [Generate Docstring for Function](#generate-docstring-for-function)
+6. [Generate Unit Test for Function](#generate-unit-test-for-function)
+7. [Explain Problem](#explain-problem)
+
+## Auto Completion
+Once started typing, you should see grey texts that show Codeium's suggestions. You can press <kbd>Tab</kbd> to accept, and <kbd>Alt+.</kbd> to cycle through the suggestions.
+
+<p align="center">
+  <image src="images/using_auto_completion.png"/>
+</p>
+
+## Chat Window
+In the Menu bar, click on **Extenions > Codeium > Open Chat Window**.
+<p align="center">
+  <image src="images/using_chat_window.png"/>
+</p>
+
+This will bring up the Chat Window, which will be docked to the Solution Explorer by default.
+<p align="center">
+  <image src="images/using_chat_window_ui.png" height="500"/>
+</p>
+
+## Explain Code block
+Right-click anywhere the code block you would like Codeium to explain, there will be a **Codeium: Explain Code block** in the context menu.
+
+<p align="center">
+  <image src="images/using_explain_code_block.png"/>
+</p>
+
+If you right-click on a function, you will see **Codeium: Explain Function** instead.
+
+<p align="center">
+  <image src="images/using_explain_function.png"/>
+</p>
+
+## Refactor Code block
+Much like the [Explain Code block](#explain-code-block) feature, right-click anywhere the code block you would like Codeium to refactor, there will be a **Codeium: Refactor Code block** in the context menu.
+
+<p align="center">
+  <image src="images/using_refactor_code_block.png"/>
+</p>
+
+Clicking on it will highlight the code block and open a dialog window asking how you would like to refactor it. You can select one of the preset or type in anything and hit <kbd>ENTER</kdb>.
+<p align="center">
+  <image src="images/using_refactor_code_block_1.png"/>
+</p>
+
+## Generate Docstring for Function
+Right-click on any function, there will be a **Codeium: Generate Docstring for Function** in the context menu.
+
+<p align="center">
+  <image src="images/using_generate_docstring.png"/>
+</p>
+
+## Generate Unit Test for Function
+Right-click on any function, there will be a **Codeium: Generate Unit Test for Function** in the context menu.
+
+<p align="center">
+  <image src="images/using_generate_unit_test.png"/>
+</p>
+
+## Explain Problem
+When you have a warning, error, or diagnostic message in your code, hovering on it will show a **Codeium: Explain Problem** button.
+
+<p align="center">
+  <image src="images/using_explain_problem.png"/>
+</p>
+