diff --git a/documentation/.goose/memory/prompt_library_conversion.txt b/documentation/.goose/memory/prompt_library_conversion.txt new file mode 100644 index 0000000000..d3914fe22d --- /dev/null +++ b/documentation/.goose/memory/prompt_library_conversion.txt @@ -0,0 +1,37 @@ +# prompt-library conversion format-update documentation +Converted prompt library files from old format to new format for the following directories: +1. data/ + - incident-analysis.json + - name-column-split.json +2. design/ + - figma-to-code.json +3. legal/ + - regulatory-comparison.json +4. marketing/ + - budget-review.json + - retail-market-monitor.json +5. operations/ + - delivery-tracking-automation.json + - form-review-automation.json + - make-phone-call.json +6. sales/ + - product-region-availability.json + - sales-performance-analysis.json +7. miscellaneous/ + - performance-review-prep.json + - system-control-research.json + +Key conversion rules: +- title → title (kept same) +- description → description (kept same) +- prompt → example_prompt (kept same) +- variables → environmentVariables (moved under relevant extension) +- extensions properly formatted with: + - name + - command + - is_builtin + - link (for external extensions) + - environmentVariables array + +All files converted and saved to: /Users/rizel/Desktop/LivestreamDemos/goose/documentation/src/pages/prompt-library/data/prompts/ + diff --git a/documentation/docusaurus.config.ts b/documentation/docusaurus.config.ts index 3cc97dd900..4ae7576306 100644 --- a/documentation/docusaurus.config.ts +++ b/documentation/docusaurus.config.ts @@ -143,6 +143,11 @@ const config: Config = { position: "left", label: "Tutorials", }, + { + to: "/prompt-library", + position: "left", + label: "Prompt Library", + }, { to: "/blog", label: "Blog", position: "left" }, { diff --git a/documentation/package.json b/documentation/package.json index 160db1aa3a..bdbd44661b 100644 --- a/documentation/package.json +++ b/documentation/package.json @@ -22,7 +22,7 @@ "@inkeep/docusaurus": "^2.0.16", "@mdx-js/react": "^3.0.0", "autoprefixer": "^10.4.17", - "clsx": "^2.0.0", + "clsx": "^2.1.1", "dotenv": "^16.4.7", "framer-motion": "^11.0.0", "lucide-react": "^0.475.0", @@ -31,6 +31,8 @@ "prism-react-renderer": "^2.3.0", "react": "^19.0.0", "react-dom": "^19.0.0", + "react-markdown": "^10.1.0", + "tailwind-merge": "^3.0.2", "tailwindcss": "^3.4.1" }, "devDependencies": { @@ -54,4 +56,4 @@ "engines": { "node": ">=18.0" } -} \ No newline at end of file +} diff --git a/documentation/src/components/prompt-card.tsx b/documentation/src/components/prompt-card.tsx new file mode 100644 index 0000000000..37c5099ba2 --- /dev/null +++ b/documentation/src/components/prompt-card.tsx @@ -0,0 +1,141 @@ +import { Download, Terminal, Info } from "lucide-react"; +import Link from "@docusaurus/Link"; +import { useState } from "react"; +import CodeBlock from '@theme/CodeBlock'; +import { motion, AnimatePresence } from "framer-motion"; +import { getGooseInstallLink } from "@site/src/utils/install-links"; +import type { MCPServer } from "@site/src/types/server"; +import type { Prompt, Extension } from "@site/src/types/prompt"; + +function extensionToMCPServer(extension: Extension): MCPServer { + return { + id: extension.command, + name: extension.name, + command: extension.command, + description: extension.name, + is_builtin: extension.is_builtin, + link: extension.link || '', + installation_notes: extension.installation_notes || '', + endorsed: false, + environmentVariables: extension.environmentVariables || [], + githubStars: 0 + }; +} + +export function PromptCard({ prompt }: { prompt: Prompt }) { + const [expandedExtension, setExpandedExtension] = useState(null); + + return ( + +
+
+
+
+
+
+ + {prompt.title} + +
+
+
+
+
+

{prompt.description}

+
+ +
+
+
+ {prompt.extensions.map((extension, index) => ( +
+
{ + e.preventDefault(); + e.stopPropagation(); + if (!extension.is_builtin) { + setExpandedExtension(expandedExtension === extension.command ? null : extension.command); + } + }} + title={extension.is_builtin ? "Built-in extension - can be enabled in settings" : "Click to see installation options"} + > + + {extension.name} + + {extension.is_builtin ? ( +
+ + Built-in + +
+ ) : ( + + + + )} +
+ + {/* Inline Expansion */} + + {!extension.is_builtin && expandedExtension === extension.command && ( + +
+ e.stopPropagation()} + > + + Install via Desktop + + +
+ + + + goose session --with-extension "{extension.command}" + +
+ + )} + +
+ ))} +
+
+
+
+
+
+
+
+ + ); +} \ No newline at end of file diff --git a/documentation/src/components/ui/pill-filter.tsx b/documentation/src/components/ui/pill-filter.tsx new file mode 100644 index 0000000000..71aa9cdf0e --- /dev/null +++ b/documentation/src/components/ui/pill-filter.tsx @@ -0,0 +1,34 @@ +import { cn } from "@site/src/utils/cn"; + +export type PillFilterOption = { + label: string; + value: string; +}; + +interface PillFilterProps { + options: PillFilterOption[]; + selectedValue: string; + onChange: (value: string) => void; +} + +export function PillFilter({ options, selectedValue, onChange }: PillFilterProps) { + return ( +
+ {options.map((option) => ( + + ))} +
+ ); +} \ No newline at end of file diff --git a/documentation/src/components/ui/sidebar-filter.tsx b/documentation/src/components/ui/sidebar-filter.tsx new file mode 100644 index 0000000000..5b58862453 --- /dev/null +++ b/documentation/src/components/ui/sidebar-filter.tsx @@ -0,0 +1,65 @@ +import { cn } from "@site/src/utils/cn"; + +export type SidebarFilterOption = { + label: string; + value: string; + count?: number; +}; + +export type SidebarFilterGroup = { + title: string; + options: SidebarFilterOption[]; +}; + +interface SidebarFilterProps { + groups: SidebarFilterGroup[]; + selectedValues: Record; + onChange: (groupTitle: string, values: string[]) => void; +} + +export function SidebarFilter({ groups, selectedValues, onChange }: SidebarFilterProps) { + const toggleValue = (groupTitle: string, value: string) => { + const currentValues = selectedValues[groupTitle] || []; + const newValues = currentValues.includes(value) + ? currentValues.filter((v) => v !== value) + : [...currentValues, value]; + onChange(groupTitle, newValues); + }; + + return ( +
+ {groups.map((group) => ( +
+

+ {group.title} +

+
+ {group.options.map((option) => ( + + ))} +
+
+ ))} +
+ ); +} \ No newline at end of file diff --git a/documentation/src/css/extensions.css b/documentation/src/css/extensions.css index b3617bf333..39274f91a0 100644 --- a/documentation/src/css/extensions.css +++ b/documentation/src/css/extensions.css @@ -64,10 +64,10 @@ position: absolute; opacity: 0; pointer-events: none; - width: 600px; - height: 600px; - top: -150px; - left: -50px; + width: 1000px; + height: 1000px; + top: -200px; + left: -200px; transform-origin: center; background: linear-gradient(45deg, #13bbaf, #ff4f00); animation: rotate 6s linear infinite; @@ -87,6 +87,25 @@ transition: all 0.3s ease; } +.prompt-card { + min-height: 200px; + display: flex; + flex-direction: column; + background-color: var(--background-app); + border-radius: 15px; + box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + border: 1px solid var(--border-subtle); + overflow: hidden; + transition: all 0.3s ease; +} +.prompt-card-content { + flex: 1; + display: flex; + flex-direction: column; + padding: 0 1.5rem 1.5rem 1.5rem; + min-height: 0; +} + /* Card header styles */ .card-header { padding: 1.5rem 1.5rem 0.75rem 1.5rem; diff --git a/documentation/src/pages/prompt-library/data/prompts/accessibility-audit.json b/documentation/src/pages/prompt-library/data/prompts/accessibility-audit.json new file mode 100644 index 0000000000..bd3134c8c7 --- /dev/null +++ b/documentation/src/pages/prompt-library/data/prompts/accessibility-audit.json @@ -0,0 +1,26 @@ +{ + "id": "accessibility-audit", + "title": "Website Accessibility Audit", + "description": "Conduct a comprehensive accessibility audit of a website, including keyboard navigation, color contrast, and ARIA compliance", + "category": "technical", + "job": "design", + "example_prompt": "Can you check if my website is accessible? Please conduct a full accessibility audit, focusing on the following:\n\n1. Keyboard Navigation: Test all interactive elements (links, buttons, dropdowns, etc.) to ensure they are accessible without a mouse.\n\n2. Color Contrast Analysis: Verify that all text and UI elements meet WCAG contrast ratio standards.\n\n3. Screen Reader Compatibility: Test whether a screen reader can properly interpret content and navigation.\n\n4. ARIA & Semantic HTML Validation: Identify any missing or misused ARIA attributes and ensure proper semantic structure.\n\n5. Error Identification & Screenshots: Provide a comprehensive report with identified issues, along with screenshots if necessary.\n\n6. Fixes & Code Recommendations: Suggest HTML, CSS, or JavaScript changes to resolve any compliance issues.\n\nHere is the website to test: [URL]. I want to ensure that our documentation meets accessibility standards. Please generate a detailed report with steps to fix any issues found.", + "example_result": "I've completed the accessibility audit of your website. Here are the findings:\n\n1. Keyboard Navigation:\n- All interactive elements are keyboard accessible\n- Focus indicators are visible\n- Tab order is logical\n\n2. Color Contrast:\n- Main text meets WCAG AA standards (ratio 4.5:1)\n- Warning: Header text #FF8C00 on white background fails contrast requirements\n\n3. Screen Reader Compatibility:\n- All images have appropriate alt text\n- Headings are properly structured (H1 → H2 → H3)\n- Form fields have associated labels\n\n4. ARIA & Semantic HTML:\n- Navigation uses