diff --git a/docs/how-to-guides/save-a-snippet/index.mdx b/docs/how-to-guides/save-a-snippet/index.mdx index 5b443fd33..c641bb046 100644 --- a/docs/how-to-guides/save-a-snippet/index.mdx +++ b/docs/how-to-guides/save-a-snippet/index.mdx @@ -1,71 +1,412 @@ --- -title: Save a Code Snippet with AI Context Using Pieces Desktop +title: Save a Code Snippet and Have It Augmented With AI description: Learn how to save a code snippet in Pieces for Developers and add additional context using AI. --- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; Pieces allows you to save code snippets and automatically add context using AI. This helps you keep track of important code, make it easily searchable, and provide additional information like tags and relevant documentation links. +The generated context includes: + +- The programming language +- A title for the code snippet +- A set of generated tags +- A description for what the code is doing +- Suggestions for searches to learn more about the concepts in the snippet +- Any people related to this snippet. This is found from the Git history if the file is in a Git repository + ## Prerequisites + + + +Before you begin, ensure you have: + +- [Pieces installed](/installation-getting-started/what-am-i-installing) and running on your machine +- The [Visual Studio Code Pieces Extension](vscode:extension/MeshIntelligentTechnologiesInc.pieces-vscode) installed +- A code file, folder of code, or project open in VS Code + + + + +Before you begin, ensure you have: + +- [Pieces installed](/installation-getting-started/what-am-i-installing) and running on your machine +- A code snippet to save. This can be a code file, code on your clipboard, or a screenshot of code. + + Example code snippet: + + ```python + def say_hello(): + name = input("What is your name? ") + print("Hello, " + name + "!") + + say_hello() + ``` + + Or download as [a Python file](./resources/helloworld.py). + + If you want to try out an image, [download](./media/images/python-code.webp) this one: + +
+
+
+
+ ![A python code snippet](./media/images/python-code.webp) +
+
+
+ + + +Before you begin, ensure you have: + +- [Pieces installed](/installation-getting-started/what-am-i-installing) and running on your machine +- A supported browser. Currently the Pieces Web Extension is available for Chrome, Edge, Firefox, Brave, and Opera. +- The relevant Pieces Extension installed + - For Chrome, Brave, and Opera use the [Pieces Chrome Extension](https://chrome.google.com/webstore/detail/pieces-save-code-snippets/igbgibhbfonhmjlechmeefimncpekepm) + - For Edge use the [Pieces Edge Add-On](https://microsoftedge.microsoft.com/addons/detail/pieces-save-code-snippet/hglfimcdgonaeeobjckfdabcldfidmim) + - For Firefox use the [Pieces FireFox Add-On](https://addons.mozilla.org/en-US/firefox/addon/pieces-save-code-from-the-web/). +- A web page with code snippet to save. For example: + + ```python + def say_hello(): + name = input("What is your name? ") + print("Hello, " + name + "!") + + say_hello() + ``` + + + +Before you begin, ensure you have: + +- [Pieces installed](/installation-getting-started/what-am-i-installing) and running on your machine +- The [Pieces JetBrains Plugin](https://plugins.jetbrains.com/plugin/17328-pieces) installed in your JetBrains IDE of choice +- A code file, folder of code, or project open in your JetBrains IDE + + + + Before you begin, ensure you have: -- [Pieces installed](/installation-getting-started/what-am-i-installing) on your machine. -- A code snippet to save. This can be a code file, clipboard content, or an image of code. +- [Pieces installed](/installation-getting-started/what-am-i-installing) and running on your machine +- The [Pieces Obsidian Plugin](https://obsidian.md/plugins?id=pieces-for-developers) installed +- A note in Obsidian with a code block -Example code snippet: + + -```python -name = input("What is your name? ") -print("Hello, " + name + "!") -``` +Before you begin, ensure you have: + +- [Pieces installed](/installation-getting-started/what-am-i-installing) and running on your machine +- The [Visual Studio Pieces Extension](https://marketplace.visualstudio.com/items?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio) installed +- A code file, folder of code, or project open in Visual Studio -Or download as a Python file [here](./resources/helloworld.py). + + ## Steps -### 1. Open Pieces Desktop +### 1. Find the code to save + + + + +Inside an open file in Visual Studio Code, select the code block you want to save as a snippet. + +![A screenshot of VS Code with a Python function selected](./media/images/vscode-select-code-dark.webp#gh-dark-mode-only) +![A screenshot of VS Code with a Python function selected](./media/images/vscode-select-code-light.webp#gh-light-mode-only) + + + + +Locate the code you want to save as a snippet. + +- If you want to save a snippet from your clipboard, copy the code +- If you want to save a snippet from a code or image file, locate the relevant file + + + + +In your browser, locate the code block on a web page that you want to save as a snippet. + +When you hover your mouse over it, you should see Pieces options below the code block. + +![A screenshot of a web browser showing some Python code with the Pieces options below the code](./media/images/web-find-code-dark.webp#gh-dark-mode-only) +![A screenshot of a web browser showing some Python code with the Pieces options below the code](./media/images/web-find-code-light.webp#gh-light-mode-only) + + + + +Inside an open file in your JetBrains IDE, select the code block you want to save as a snippet. + +![A screenshot of PyCharm with a Python function selected](./media/images/pycharm-select-code-dark.webp#gh-dark-mode-only) +![A screenshot of PyCharm with a Python function selected](./media/images/pycharm-select-code-light.webp#gh-light-mode-only) + + + + +In Obsidian, locate the code block in a note that you want to save as a snippet. + +When you hover your mouse over it, you should a Pieces button on the bottom of the code block. + +![A screenshot of obsidian showing some Python code with the Pieces options below the code](./media/images/obsidian-find-code-dark.webp#gh-dark-mode-only) +![A screenshot of obsidian showing some Python code with the Pieces options below the code](./media/images/obsidian-find-code-light.webp#gh-light-mode-only) + + + + +Inside an open file in Visual Studio, select the code block you want to save as a snippet. + +![A screenshot of Visual Studio with a Python function selected](./media/images/vs-select-code-dark.webp#gh-dark-mode-only) +![A screenshot of Visual Studio with a Python function selected](./media/images/vs-select-code-light.webp#gh-light-mode-only) + + + + +### 2. Save the Code Snippet + + + + +Right-click on the selected code, and select _Pieces -> Save Current Selection to Pieces_. + +![A screenshot of VS Code with a Python function selected and the Pieces context menu showing](./media/images/vscode-context-menu-dark.webp#gh-dark-mode-only) +![A screenshot of VS Code with a Python function selected and the Pieces context menu showing](./media/images/vscode-context-menu-light.webp#gh-light-mode-only) + + + + +In Pieces Desktop, ensure the _Saved Materials_ tab is visible. + +
+
+
+![The saved materials tab in Pieces Desktop](./media/images/saved-materials-menu-dark.webp#gh-dark-mode-only) +![The saved materials tab in Pieces Desktop](./media/images/saved-materials-menu-light.webp#gh-light-mode-only) +
+
+
+ +- If you have copied code to the clipboard, use the _Save Clipboard Contents_ button on the bottom left to save the contents of your clipboard as a snippet. + +
+
+
+
+![The save clipboard contents button in Pieces Desktop](./media/images/save-from-clipboard-dark.webp#gh-dark-mode-only) +![The save clipboard contents button in Pieces Desktop](./media/images/save-from-clipboard-light.webp#gh-light-mode-only) +
+
+
+ +- If you have a code file, or a screenshot of code, drag and drop this into Pieces Desktop. + +
+
+
+
+![A code file dragged into Pieces Desktop](./media/images/drag-file-to-desktop-dark.webp#gh-dark-mode-only) +![A code file dragged into in Pieces Desktop](./media/images/drag-file-to-desktop-light.webp#gh-light-mode-only) +
+
+
+ + + + +Hover your mouse over the code snippet, and select the _Copy and Save_ button that will appear. + +![The copy and save button in the Pieces web extension](./media/images/web-save-button-dark.webp#gh-dark-mode-only) +![The copy and save button in the Pieces web extension](./media/images/web-save-button-light.webp#gh-light-mode-only) + + + + +Right-click on the selected code, and select _Save to Pieces_. + +![A screenshot of PyCharm with a Python function selected and the Pieces context menu showing](./media/images/pycharm-context-menu-dark.webp#gh-dark-mode-only) +![A screenshot of PyCharm with a Python function selected and the Pieces context menu showing](./media/images/pycharm-context-menu-light.webp#gh-light-mode-only) + + + + +Select the Pieces button on the bottom of the code block to see the various Pieces Options. Select _Save code to Pieces_. + +![A screenshot of Obsidian with the save code to pieces button showing on the bottom of a code block](./media/images/obsidian-save-button-dark.webp#gh-dark-mode-only) +![A screenshot of Obsidian with the save code to pieces button showing on the bottom of a code block](./media/images/obsidian-save-button-light.webp#gh-light-mode-only) + + + + +Right-click on the selected code, and select _Pieces -> Save to Pieces_. + +![A screenshot of visual studio with a Python function selected and the Pieces context menu showing](./media/images/vs-context-menu-dark.webp#gh-dark-mode-only) +![A screenshot of visual studio with a Python function selected and the Pieces context menu showing](./media/images/vs-context-menu-light.webp#gh-light-mode-only) + + + + +The snippet will be saved to Pieces. Pieces will automatically add context such as tags, links to documentation, information extracted from any Git history, and other relevant information. + +### 3. Review the Enriched Snippet + +After Pieces has had a few seconds to process the snippet, review the snippet and the added context. + + + + +Select the _Pieces Explorer_ from the Activity Bar. This will then show all the saved snippets, grouped by programming language. + +
+
+
+![A screenshot of the Pieces explorer in VS Code showing a python snippet](./media/images/vscode-pieces-explorer-dark.webp#gh-dark-mode-only) +![A screenshot of the Pieces explorer in VS Code showing a python snippet](./media/images/vscode-pieces-explorer-light.webp#gh-light-mode-only) +
+
+
+ +Select the new snippet to see the generated annotations. + +![A screenshot of a saved Python snippet with the code and associated context such as tags and a smart description](./media/images/vscode-saved-snippet-dark.webp#gh-dark-mode-only) +![A screenshot of a saved Python snippet with the code and associated context such as tags and a smart description](./media/images/vscode-saved-snippet-light.webp#gh-light-mode-only) + + + + +From the _Saved Materials_ tab, there is a list of the saved snippets on the left-hand side. When you select a snippet, the code and annotations are shown in the main pane. + +![Pieces desktop showing a list of snippets and the code of a snippet in the saved materials tab](./media/images/desktop-snippet-list-dark.webp#gh-dark-mode-only) +![Pieces desktop showing a list of snippets and the code of a snippet in the saved materials tab](./media/images/desktop-snippet-list-light.webp#gh-light-mode-only) + +To view all the annotations, select the _View All Context_ button. + +![The view all context button in Pieces desktop](./media/images/desktop-captured-context-button-dark.webp#gh-dark-mode-only) +![The view all context button in Pieces desktop](./media/images/desktop-captured-context-button-light.webp#gh-light-mode-only) + +This will expand a pane allowing you to see all the captured context. + +![The expanded context view in Pieces desktop](./media/images/desktop-captured-context-dark.webp#gh-dark-mode-only) +![The expanded context view in Pieces desktop](./media/images/desktop-captured-context-light.webp#gh-light-mode-only) + + + + +Select the _Pieces Web Extension_ from the browser toolbar. + +
+
+
+![A screenshot of the Pieces explorer in the browser toolbar](./media/images/web-pieces-extension-dark.webp#gh-dark-mode-only) +![A screenshot of the Pieces explorer in the browser toolbar](./media/images/web-pieces-extension-light.webp#gh-light-mode-only) +
+
+
+ +This will bring up the Pieces Web Extension pane. Select _Saved Snippets_ to show a list of all the saved snippets. + +
+
+
+![A snippet in the Pieces web extension](./media/images/web-snippet-list-dark.webp#gh-dark-mode-only) +![A snippet in the Pieces web extension](./media/images/web-snippet-list-light.webp#gh-light-mode-only) +
+
+
+ +Select the new snippet to see the generated annotations. + +
+
+
+![A screenshot of a saved Python snippet with the code and associated context such as tags and a smart description](./media/images/web-saved-snippet-dark.webp#gh-dark-mode-only) +![A screenshot of a saved Python snippet with the code and associated context such as tags and a smart description](./media/images/web-saved-snippet-light.webp#gh-light-mode-only) +
+
+
+ + + + +Select _Pieces_ from the Tool Bar. This will then show all the saved snippets, grouped by programming language. + +
+
+
+![A screenshot of the Pieces explorer in PyCharm a python snippet](./media/images/pycharm-pieces-explorer-dark.webp#gh-dark-mode-only) +![A screenshot of the Pieces explorer in PyCharm showing a python snippet](./media/images/pycharm-pieces-explorer-light.webp#gh-light-mode-only) +
+
+
+ +Double-click the new snippet to see the generated annotations. + +![A screenshot of a saved Python snippet with the code and associated context such as tags and a smart description](./media/images/pycharm-saved-snippet-dark.webp#gh-dark-mode-only) +![A screenshot of a saved Python snippet with the code and associated context such as tags and a smart description](./media/images/pycharm-saved-snippet-light.webp#gh-light-mode-only) -Launch Pieces Desktop using one of the following methods: -- Click on Pieces OS in your menu bar or system tray, and select **Launch Pieces for Developers**. -- Run Pieces from your Windows Start menu, macOS Applications folder, or Linux Applications menu. + + -Once open, select the **Saved Materials** tab from the left-hand menu. +Select _Pieces For Developers_ from the Ribbon. -![Saved Materials Tab](./media/images/saved-materials-tab.webp) +
+
+
+![A screenshot of the Pieces explorer in Obsidian](./media/images/obsidian-pieces-explorer-dark.webp#gh-dark-mode-only) +![A screenshot of the Pieces explorer in Obsidian](./media/images/obsidian-pieces-explorer-light.webp#gh-light-mode-only) +
+
+
-### 2. Add the Code Snippet +From the pane that appears, make sure _Saved Materials_ is selected. This will then show all the saved snippets. Select the newly added snippet to see the code. -Add your code snippet to Pieces in one of the following ways: -- **From a code file**: Drag and drop the file into the Pieces app. -- **From an image file**: Drag and drop the file into the Pieces app. Pieces will convert the text in the image to a code snippet. -- **From your clipboard**: Copy the code snippet and paste it into the Pieces app using _Ctrl+V_ (Windows/Linux) or _Cmd+V_ (macOS). +
+
+
+![A saved python snippet in the Obsidian snippets pane](./media/images/obsidian-saved-snippet-dark.webp#gh-dark-mode-only) +![A saved python snippet in the Obsidian snippets pane](./media/images/obsidian-saved-snippet-light.webp#gh-light-mode-only) +
+
+
-Pieces will automatically add context such as tags, links to documentation, and other relevant information. + + -### 3. Review the Context +Open the Pieces Explorer by selecting _View -> Other Windows -> Pieces -> Pieces Explorer_. -After processing, review the snippet and the added context: +![The Pieces Explorer menu option in the Visual Studio View Pieces menu](./media/images/vs-view-pieces-explorer-dark.webp#gh-dark-mode-only) +![The Pieces Explorer menu option in the Visual Studio View Pieces menu](./media/images/vs-view-pieces-explorer-light.webp#gh-light-mode-only) -- Select the snippet in the list of saved materials if it is not already selected. -- The top panel shows the code snippet, and the bottom panel shows a preview of the added context. +Now that the Pieces Explorer is open, it will then show all the saved snippets, grouped by programming language. -![Saved Snippet Panel](./media/images/saved-snippet-panel.webp) +
+
+
+![The Pieces Explorer in Visual Studio](./media/images/vs-pieces-explorer-dark.webp#gh-dark-mode-only) +![The Pieces Explorer in Visual Studio](./media/images/vs-pieces-explorer-light.webp#gh-light-mode-only) +
+
+
-In the _Context Preview_ pane, review the metadata automatically added by Pieces, including: -- A description of the code snippet -- Suggested searches for similar snippets -- Suggested links for more information -- Tags -- Related files and folders -- Relate people +Double-click the new snippet to see the generated annotations. -Use the **View all context** button to expand the _Context Preview_ to see more details. +![A screenshot of a saved Python snippet with the code and associated context such as tags and a smart description](./media/images/vs-saved-snippet-dark.webp#gh-dark-mode-only) +![A screenshot of a saved Python snippet with the code and associated context such as tags and a smart description](./media/images/vs-saved-snippet-dark.webp#gh-light-mode-only) -![View All Context Button](./media/images/view-all-context.webp) + + -This will open the _All Context_ pane, displaying more detailed information. +The generated enrichments include: -![All Context Pane](./media/images/all-context.webp) +- The programming language +- A title for the code snippet +- A set of generated tags +- A description for what the code is doing +- Suggestions for searches to learn more about the concepts in the snippet +- Any people related to this snippet. This is found from the Git history if the file is in a Git repository ## Next Steps diff --git a/docs/how-to-guides/save-a-snippet/media/images/all-context.webp b/docs/how-to-guides/save-a-snippet/media/images/all-context.webp deleted file mode 100644 index 20041acd9..000000000 Binary files a/docs/how-to-guides/save-a-snippet/media/images/all-context.webp and /dev/null differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/desktop-captured-context-button-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/desktop-captured-context-button-dark.webp new file mode 100644 index 000000000..f86ac5d77 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/desktop-captured-context-button-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/desktop-captured-context-button-light.webp b/docs/how-to-guides/save-a-snippet/media/images/desktop-captured-context-button-light.webp new file mode 100644 index 000000000..ecfb37b54 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/desktop-captured-context-button-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/desktop-captured-context-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/desktop-captured-context-dark.webp new file mode 100644 index 000000000..225eeaa5d Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/desktop-captured-context-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/desktop-captured-context-light.webp b/docs/how-to-guides/save-a-snippet/media/images/desktop-captured-context-light.webp new file mode 100644 index 000000000..e83ff5719 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/desktop-captured-context-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/desktop-snippet-list-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/desktop-snippet-list-dark.webp new file mode 100644 index 000000000..dccf17bab Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/desktop-snippet-list-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/desktop-snippet-list-light.webp b/docs/how-to-guides/save-a-snippet/media/images/desktop-snippet-list-light.webp new file mode 100644 index 000000000..431853e81 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/desktop-snippet-list-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/drag-file-to-desktop-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/drag-file-to-desktop-dark.webp new file mode 100644 index 000000000..3fbf8f430 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/drag-file-to-desktop-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/drag-file-to-desktop-light.webp b/docs/how-to-guides/save-a-snippet/media/images/drag-file-to-desktop-light.webp new file mode 100644 index 000000000..2ed2c2da6 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/drag-file-to-desktop-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/obsidian-find-code-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/obsidian-find-code-dark.webp new file mode 100644 index 000000000..46934dc79 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/obsidian-find-code-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/obsidian-find-code-light.webp b/docs/how-to-guides/save-a-snippet/media/images/obsidian-find-code-light.webp new file mode 100644 index 000000000..f5a6672e4 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/obsidian-find-code-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/obsidian-pieces-explorer-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/obsidian-pieces-explorer-dark.webp new file mode 100644 index 000000000..0e0f51129 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/obsidian-pieces-explorer-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/obsidian-pieces-explorer-light.webp b/docs/how-to-guides/save-a-snippet/media/images/obsidian-pieces-explorer-light.webp new file mode 100644 index 000000000..3789d3af1 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/obsidian-pieces-explorer-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/obsidian-save-button-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/obsidian-save-button-dark.webp new file mode 100644 index 000000000..53cbe544e Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/obsidian-save-button-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/obsidian-save-button-light.webp b/docs/how-to-guides/save-a-snippet/media/images/obsidian-save-button-light.webp new file mode 100644 index 000000000..dd16280d7 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/obsidian-save-button-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/obsidian-saved-snippet-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/obsidian-saved-snippet-dark.webp new file mode 100644 index 000000000..9c0305d5c Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/obsidian-saved-snippet-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/obsidian-saved-snippet-light.webp b/docs/how-to-guides/save-a-snippet/media/images/obsidian-saved-snippet-light.webp new file mode 100644 index 000000000..18631f65d Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/obsidian-saved-snippet-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/pycharm-context-menu-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/pycharm-context-menu-dark.webp new file mode 100644 index 000000000..02f99002f Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/pycharm-context-menu-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/pycharm-context-menu-light.webp b/docs/how-to-guides/save-a-snippet/media/images/pycharm-context-menu-light.webp new file mode 100644 index 000000000..4238124f1 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/pycharm-context-menu-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/pycharm-context-menu.webp b/docs/how-to-guides/save-a-snippet/media/images/pycharm-context-menu.webp new file mode 100644 index 000000000..20ad38e37 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/pycharm-context-menu.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/pycharm-pieces-explorer-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/pycharm-pieces-explorer-dark.webp new file mode 100644 index 000000000..d9b4a0f0d Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/pycharm-pieces-explorer-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/pycharm-pieces-explorer-light.webp b/docs/how-to-guides/save-a-snippet/media/images/pycharm-pieces-explorer-light.webp new file mode 100644 index 000000000..0d6f536f7 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/pycharm-pieces-explorer-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/pycharm-saved-snippet-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/pycharm-saved-snippet-dark.webp new file mode 100644 index 000000000..c76f48d9a Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/pycharm-saved-snippet-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/pycharm-saved-snippet-light.webp b/docs/how-to-guides/save-a-snippet/media/images/pycharm-saved-snippet-light.webp new file mode 100644 index 000000000..9299a2d9e Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/pycharm-saved-snippet-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/pycharm-select-code-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/pycharm-select-code-dark.webp new file mode 100644 index 000000000..f25041e24 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/pycharm-select-code-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/pycharm-select-code-light.webp b/docs/how-to-guides/save-a-snippet/media/images/pycharm-select-code-light.webp new file mode 100644 index 000000000..bb6c1f3cc Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/pycharm-select-code-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/python-code.webp b/docs/how-to-guides/save-a-snippet/media/images/python-code.webp new file mode 100644 index 000000000..588739008 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/python-code.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/save-from-clipboard-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/save-from-clipboard-dark.webp new file mode 100644 index 000000000..a20b7ee2b Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/save-from-clipboard-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/save-from-clipboard-light.webp b/docs/how-to-guides/save-a-snippet/media/images/save-from-clipboard-light.webp new file mode 100644 index 000000000..04da9fbc5 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/save-from-clipboard-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/saved-materials-menu-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/saved-materials-menu-dark.webp new file mode 100644 index 000000000..748b25f0d Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/saved-materials-menu-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/saved-materials-menu-light.webp b/docs/how-to-guides/save-a-snippet/media/images/saved-materials-menu-light.webp new file mode 100644 index 000000000..f2ae564f6 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/saved-materials-menu-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/saved-materials-tab.webp b/docs/how-to-guides/save-a-snippet/media/images/saved-materials-tab.webp deleted file mode 100644 index 397fd7538..000000000 Binary files a/docs/how-to-guides/save-a-snippet/media/images/saved-materials-tab.webp and /dev/null differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/saved-snippet-panel.webp b/docs/how-to-guides/save-a-snippet/media/images/saved-snippet-panel.webp deleted file mode 100644 index 9061788f4..000000000 Binary files a/docs/how-to-guides/save-a-snippet/media/images/saved-snippet-panel.webp and /dev/null differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/view-all-context.webp b/docs/how-to-guides/save-a-snippet/media/images/view-all-context.webp deleted file mode 100644 index 474b7ebdd..000000000 Binary files a/docs/how-to-guides/save-a-snippet/media/images/view-all-context.webp and /dev/null differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/vs-context-menu-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/vs-context-menu-dark.webp new file mode 100644 index 000000000..1f92cdc78 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/vs-context-menu-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/vs-context-menu-light.webp b/docs/how-to-guides/save-a-snippet/media/images/vs-context-menu-light.webp new file mode 100644 index 000000000..624144716 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/vs-context-menu-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/vs-pieces-explorer-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/vs-pieces-explorer-dark.webp new file mode 100644 index 000000000..ebb4bec31 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/vs-pieces-explorer-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/vs-pieces-explorer-light.webp b/docs/how-to-guides/save-a-snippet/media/images/vs-pieces-explorer-light.webp new file mode 100644 index 000000000..4748c164b Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/vs-pieces-explorer-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/vs-saved-snippet-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/vs-saved-snippet-dark.webp new file mode 100644 index 000000000..d38af3d93 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/vs-saved-snippet-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/vs-select-code-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/vs-select-code-dark.webp new file mode 100644 index 000000000..72d69236f Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/vs-select-code-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/vs-select-code-light.webp b/docs/how-to-guides/save-a-snippet/media/images/vs-select-code-light.webp new file mode 100644 index 000000000..394187614 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/vs-select-code-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/vs-view-pieces-explorer-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/vs-view-pieces-explorer-dark.webp new file mode 100644 index 000000000..2411007d7 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/vs-view-pieces-explorer-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/vs-view-pieces-explorer-light.webp b/docs/how-to-guides/save-a-snippet/media/images/vs-view-pieces-explorer-light.webp new file mode 100644 index 000000000..a648da938 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/vs-view-pieces-explorer-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/vscode-context-menu-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/vscode-context-menu-dark.webp new file mode 100644 index 000000000..5292f5a80 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/vscode-context-menu-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/vscode-context-menu-light.webp b/docs/how-to-guides/save-a-snippet/media/images/vscode-context-menu-light.webp new file mode 100644 index 000000000..83eb638ed Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/vscode-context-menu-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/vscode-pieces-explorer-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/vscode-pieces-explorer-dark.webp new file mode 100644 index 000000000..ca52038f9 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/vscode-pieces-explorer-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/vscode-pieces-explorer-light.webp b/docs/how-to-guides/save-a-snippet/media/images/vscode-pieces-explorer-light.webp new file mode 100644 index 000000000..7a042bed9 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/vscode-pieces-explorer-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/vscode-saved-snippet-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/vscode-saved-snippet-dark.webp new file mode 100644 index 000000000..6595f1a00 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/vscode-saved-snippet-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/vscode-saved-snippet-light.webp b/docs/how-to-guides/save-a-snippet/media/images/vscode-saved-snippet-light.webp new file mode 100644 index 000000000..690bfe96a Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/vscode-saved-snippet-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/vscode-select-code-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/vscode-select-code-dark.webp new file mode 100644 index 000000000..38fea3911 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/vscode-select-code-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/vscode-select-code-light.webp b/docs/how-to-guides/save-a-snippet/media/images/vscode-select-code-light.webp new file mode 100644 index 000000000..a4c14547b Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/vscode-select-code-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/web-find-code-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/web-find-code-dark.webp new file mode 100644 index 000000000..2ef9a2fbf Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/web-find-code-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/web-find-code-light.webp b/docs/how-to-guides/save-a-snippet/media/images/web-find-code-light.webp new file mode 100644 index 000000000..a5041fb34 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/web-find-code-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/web-pieces-extension-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/web-pieces-extension-dark.webp new file mode 100644 index 000000000..b0b0a79d9 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/web-pieces-extension-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/web-pieces-extension-light.webp b/docs/how-to-guides/save-a-snippet/media/images/web-pieces-extension-light.webp new file mode 100644 index 000000000..60e55f59a Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/web-pieces-extension-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/web-save-button-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/web-save-button-dark.webp new file mode 100644 index 000000000..47b11ca06 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/web-save-button-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/web-save-button-light.webp b/docs/how-to-guides/save-a-snippet/media/images/web-save-button-light.webp new file mode 100644 index 000000000..22cda9e05 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/web-save-button-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/web-saved-snippet-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/web-saved-snippet-dark.webp new file mode 100644 index 000000000..0c3fe00e8 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/web-saved-snippet-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/web-saved-snippet-light.webp b/docs/how-to-guides/save-a-snippet/media/images/web-saved-snippet-light.webp new file mode 100644 index 000000000..cedc195aa Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/web-saved-snippet-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/web-snippet-list-dark.webp b/docs/how-to-guides/save-a-snippet/media/images/web-snippet-list-dark.webp new file mode 100644 index 000000000..6f573f5c5 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/web-snippet-list-dark.webp differ diff --git a/docs/how-to-guides/save-a-snippet/media/images/web-snippet-list-light.webp b/docs/how-to-guides/save-a-snippet/media/images/web-snippet-list-light.webp new file mode 100644 index 000000000..870c2bdf5 Binary files /dev/null and b/docs/how-to-guides/save-a-snippet/media/images/web-snippet-list-light.webp differ diff --git a/docs/how-to-guides/save-a-snippet/resources/helloworld.py b/docs/how-to-guides/save-a-snippet/resources/helloworld.py index ac0887f65..dd55e4d1d 100644 --- a/docs/how-to-guides/save-a-snippet/resources/helloworld.py +++ b/docs/how-to-guides/save-a-snippet/resources/helloworld.py @@ -1,2 +1,5 @@ -name = input("What is your name? ") -print("Hello, " + name + "!") \ No newline at end of file +def say_hello(): + name = input("What is your name? ") + print("Hello, " + name + "!") + +say_hello() diff --git a/sidebars.ts b/sidebars.ts index e539a5d46..51188edf5 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -95,6 +95,28 @@ const sidebars: SidebarsConfig = { }, ] }, + { + // Guides + type: 'category', + label: '📚 How-To Guides', + items: [ + { + type: 'doc', + id: 'how-to-guides/save-a-snippet/index', + label: 'Save a Code Snippet Using Pieces' + }, + { + type: 'doc', + id: 'product-highlights-and-benefits/connecting-to-a-remote-pieces-os-instance', + label: 'Connecting VS Code to a Remote Pieces OS Instance', + }, + { + type: 'doc', + id: 'product-highlights-and-benefits/sync-across-multiple-devices-using-github', + label: 'Sync Data Across Devices with GitHub', + }, + ] + }, { type: 'category', label: '💾 Pieces OS', @@ -227,28 +249,6 @@ const sidebars: SidebarsConfig = { } ] }, - { - // Guides - type: 'category', - label: '📚 Guides', - items: [ - { - type: 'doc', - id: 'how-to-guides/save-a-snippet/index', - label: 'Save a Code Snippet Using Pieces Desktop App' - }, - { - type: 'doc', - id: 'product-highlights-and-benefits/connecting-to-a-remote-pieces-os-instance', - label: 'Connecting to a Remote Pieces OS Instance', - }, - { - type: 'doc', - id: 'product-highlights-and-benefits/sync-across-multiple-devices-using-github', - label: 'Sync Data Across Devices with GitHub', - }, - ] - }, { type: 'category', label: '🌱 Resources', diff --git a/src/css/custom.css b/src/css/custom.css index c6ee95fb1..958522261 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -446,3 +446,8 @@ html[data-theme='dark'] .header-github-link:before { margin-right: 5px; animation: pulse 2s infinite; } + +[data-theme='light'] img[src$='#gh-dark-mode-only'], +[data-theme='dark'] img[src$='#gh-light-mode-only'] { + display: none; +} \ No newline at end of file