Merge branch 'main' of github.com:block/goose into zane/ui-update

* 'main' of github.com:block/goose:
  fix: resolve hamburger menu breakpoint bug in docs (#3318)
  Recipe library doc (#3329)
This commit is contained in:
Zane Staggs
2025-07-09 19:45:23 -07:00
3 changed files with 158 additions and 6 deletions
@@ -47,6 +47,11 @@ import styles from '@site/src/components/Card/styles.module.css';
description="Learn how a recipe can use sub-recipes to do specific tasks."
link="/docs/guides/recipes/sub-recipes"
/>
<Card
title="Saving Recipes"
description="Learn how to save, organize, and find your Goose recipes for easy access and reuse."
link="/docs/guides/recipes/storing-recipes"
/>
</div>
</div>
@@ -0,0 +1,126 @@
---
title: Saving Recipes
sidebar_position: 4
sidebar_label: Saving Recipes
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
This guide covers storing, organizing, and finding Goose recipes when you need to access them again later.
:::info Desktop UI vs CLI
- **Goose Desktop** has a visual Recipe Library for browsing and managing saved recipes
- **Goose CLI** stores recipes as files that you find using file paths or environment variables
:::
## Understanding Recipe Storage
Before saving recipes, it's important to understand where they can be stored and how this affects their availability.
### Recipe Storage Locations
| Type | Location | Availability | Best For |
|------|----------|-------------|----------|
| **Global** | `~/.config/goose/recipes/` | All projects and sessions | Personal workflows, general-purpose recipes |
| **Local** | `YOUR_WORKING_DIRECTORY/.goose/recipes/` | Only when working in that project | Project-specific workflows, team recipes |
**Choose Global Storage When:**
- You want the recipe available across all projects
- It's a personal workflow or general-purpose recipe
- You're the primary user of the recipe
**Choose Local Storage When:**
- The recipe is specific to a particular project
- You're working with a team and want to share the recipe
- The recipe depends on project-specific files or configurations
## Storing Recipes
<Tabs groupId="interface">
<TabItem value="desktop" label="Goose Desktop" default>
**Save New Recipe:**
1. To create a recipe from your chat session, see: [Create Recipe](/docs/guides/recipes/session-recipes#create-recipe)
2. Once in the Recipe Editor, click **Save Recipe** to save it to your Recipe Library
**Save Modified Recipe:**
If you're already using a recipe and want to save a modified version:
1. Click the gear icon ⚙️ in the top right corner
2. Click **Save recipe**
3. Enter a name for the recipe
4. [Choose to save globally or locally](#recipe-storage-locations) to your current project
5. Click **Save Recipe**
</TabItem>
<TabItem value="cli" label="Goose CLI">
When you [create a recipe](/docs/guides/recipes/recipe-reference), it gets saved to:
* Your working directory by default: `./recipe.yaml`
* Any path you specify: `/recipe /path/to/my-recipe.yaml`
* Local project recipes: `/recipe .goose/recipes/my-recipe.yaml`
</TabItem>
</Tabs>
## Finding Your Recipes
<Tabs groupId="interface">
<TabItem value="desktop" label="Goose Desktop" default>
**Access Recipe Library:**
1. Click the gear icon ⚙️ in the top right corner
2. Click **Recipe Library**
3. Browse your saved recipes in a list view
4. Each recipe shows its title, description, and whether it's global or local
</TabItem>
<TabItem value="cli" label="Goose CLI">
To find and configure your saved recipes:
**Browse recipe directories:**
```bash
# List recipes in default global location
ls ~/.config/goose/recipes/
# List recipes in current project
ls .goose/recipes/
# Search for all recipe files
find . -name "*.md" -path "*/recipes/*"
```
:::tip
Set up [custom recipe paths](/docs/guides/recipes/session-recipes#configure-recipe-location) to organize recipes in specific directories or access recipes from a shared GitHub repository.
:::
</TabItem>
</Tabs>
## Using Saved Recipes
<Tabs groupId="interface">
<TabItem value="desktop" label="Goose Desktop" default>
1. Click the gear icon ⚙️ in the top right corner
2. Click **Recipe Library**
3. Find your recipe in the Recipe Library
4. Choose one of the following:
- Click **Use Recipe** to run it immediately
- Click **Preview** to see details first, then click **Load Recipe** to run it
</TabItem>
<TabItem value="cli" label="Goose CLI">
Once you've located your recipe file, [run the recipe](/docs/guides/recipes/session-recipes#run-a-recipe).
</TabItem>
</Tabs>
+27 -6
View File
@@ -306,6 +306,8 @@ html[data-theme="light"] .hide-in-light {
display: flex;
align-items: center;
transition: opacity 0.3s ease, transform 0.3s ease;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.navbar__toggle {
@@ -314,6 +316,19 @@ html[data-theme="light"] .hide-in-light {
transform: scale(0.8);
}
/*
* No margin is needed for the branding right now,
* since there is padding on the items and no brand text.
* If those things change, you may want to revert this.
*/
.navbar__brand {
margin-right: 0px;
}
.navbar__logo {
margin-right: 0px;
}
/* Dropdown styles */
.navbar__link--active {
color: var(--text-prominent);
@@ -338,7 +353,7 @@ html[data-theme="light"] .hide-in-light {
}
/* Force hamburger menu to appear earlier to prevent navbar overlap with smooth transitions */
@media (max-width: 1450px) {
@media (max-width: 996px) {
.navbar__item {
opacity: 0;
transform: translateX(-10px);
@@ -346,27 +361,34 @@ html[data-theme="light"] .hide-in-light {
/* Use visibility instead of display for smoother transitions */
visibility: hidden;
}
.navbar__toggle {
opacity: 1 !important;
transform: scale(1) !important;
display: inherit !important;
}
.navbar-sidebar {
display: block;
}
}
/* Shrink inkeep search box some on smaller screens */
@media (max-width: 1450px) {
#inkeep {
max-width: 180px;
}
}
/* Ensure navbar items are visible above the breakpoint */
@media (min-width: 1451px) {
@media (min-width: 997px) {
.navbar__item {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
visibility: visible;
}
.navbar__toggle {
opacity: 0;
transform: scale(0.8);
@@ -378,4 +400,3 @@ html[data-theme="light"] .hide-in-light {
object-fit: cover; /* Ensure the image covers the area while maintaining aspect ratio */
border-radius: 8px; /* Optional: rounded corners */
}