diff --git a/astro.config.mjs b/astro.config.mjs index 70d5152..958d5a0 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -9,7 +9,8 @@ export default defineConfig({ starlight({ title: 'Refact Documentation', components: { - Search: './src/components/Search.astro' + Search: './src/components/Search.astro', + Head: './src/components/Head.astro' }, logo: { light: '/src/assets/logo-light.svg', @@ -52,121 +53,321 @@ export default defineConfig({ sidebar: [ { label: 'Introduction', + collapsed: true, items: [ - { label: 'Quickstart', link: '/introduction/quickstart/' }, + { + label: 'Quickstart', + link: '/introduction/quickstart/', + attrs: { + 'aria-label': 'Get started with Refact' + } + }, { label: 'Installation', + collapsed: true, items: [ - { label: 'Installation Hub', link: '/installation/installation-hub/' }, - { label: 'VS Code', link: '/installation/vs-code/' }, - { label: 'JetBrains IDEs', link: '/installation/jetbrains/' }, + { + label: 'Installation Hub', + link: '/installation/installation-hub/', + attrs: { + 'aria-label': 'Browse Installation Options' + } + }, + { + label: 'VS Code', + link: '/installation/vs-code/', + attrs: { + 'aria-label': 'Install Refact for VS Code' + } + }, + { + label: 'JetBrains IDEs', + link: '/installation/jetbrains/', + attrs: { + 'aria-label': 'Install Refact for JetBrains IDEs' + } + }, ] }, { label: 'Features', + collapsed: true, items: [ - { label: 'AI Chat', link: '/features/ai-chat/' }, - { label: 'AI Toolbox', link: '/features/ai-toolbox/' }, - { label: 'Autonomous Agent', items: [ - { label: 'Getting Started', link: '/features/autonomous-agent/getting-started/' }, - { label: 'Overview', link: '/features/autonomous-agent/overview/' }, - { label: 'Integrations', items: [ - { label: 'Overview', link: '/features/autonomous-agent/integrations/' }, - // Development Tools - { label: 'Chrome', link: '/features/autonomous-agent/integrations/chrome/' }, - { label: 'Shell Commands', link: '/features/autonomous-agent/integrations/shell-commands/' }, - { label: 'Command Line Tool', link: '/features/autonomous-agent/integrations/command-line-tool/' }, - { label: 'Command Line Service', link: '/features/autonomous-agent/integrations/command-line-service/' }, - // Version Control - { label: 'GitHub', link: '/features/autonomous-agent/integrations/github/' }, - { label: 'GitLab', link: '/features/autonomous-agent/integrations/gitlab/' }, - // Container Management - { label: 'Docker', link: '/features/autonomous-agent/integrations/docker/' }, - // Databases - { label: 'PostgreSQL', link: '/features/autonomous-agent/integrations/postgresql/' }, - { label: 'MySQL', link: '/features/autonomous-agent/integrations/mysql/' }, - // Debugging - { label: 'PDB', link: '/features/autonomous-agent/integrations/pdb/' }, - ] }, - ] }, - { label: 'Code Completion', link: '/features/code-completion/' }, - { label: 'Context', link: '/features/context/' }, - { label: 'Fine-tuning', link: '/features/finetuning/' }, + { + label: 'AI Chat', + link: '/features/ai-chat/', + attrs: { + 'aria-label': 'Learn about AI Chat Feature' + } + }, + { + label: 'AI Toolbox', + link: '/features/ai-toolbox/', + attrs: { + 'aria-label': 'Explore AI Toolbox Features' + } + }, + { + label: 'Code Completion', + link: '/features/code-completion/', + attrs: { + 'aria-label': 'Learn about Code Completion' + } + }, + { + label: 'Context', + link: '/features/context/', + attrs: { + 'aria-label': 'Understanding Context Features' + } + }, + { + label: 'Fine-tuning', + link: '/features/finetuning/', + attrs: { + 'aria-label': 'Learn about Model Fine-tuning' + } + }, ] }, ], }, + { + label: 'Autonomous Agent', + collapsed: true, + items: [ + { label: 'Getting Started', link: '/features/autonomous-agent/getting-started/' }, + { label: 'Overview', link: '/features/autonomous-agent/overview/' }, + { + label: 'Tools', + link: '/features/autonomous-agent/tools/', + attrs: { + 'aria-label': 'Learn about Agent Tools' + } + }, + { + label: 'Rollback', + link: '/features/autonomous-agent/rollback/', + attrs: { + 'aria-label': 'Learn about Agent Rollback Feature' + } + }, + { + label: 'Integrations', + collapsed: true, + items: [ + { label: 'Overview', link: '/features/autonomous-agent/integrations/' }, + // Development Tools + { label: 'Chrome', link: '/features/autonomous-agent/integrations/chrome/' }, + { label: 'Shell Commands', link: '/features/autonomous-agent/integrations/shell-commands/' }, + { label: 'Command Line Tool', link: '/features/autonomous-agent/integrations/command-line-tool/' }, + { label: 'Command Line Service', link: '/features/autonomous-agent/integrations/command-line-service/' }, + { label: 'MCP Server', link: '/features/autonomous-agent/integrations/mcp/', attrs: { 'aria-label': 'Connect to Model Context Protocol servers' } }, + // Version Control + { label: 'GitHub', link: '/features/autonomous-agent/integrations/github/' }, + { label: 'GitLab', link: '/features/autonomous-agent/integrations/gitlab/' }, + // Container Management + { label: 'Docker', link: '/features/autonomous-agent/integrations/docker/' }, + // Databases + { label: 'PostgreSQL', link: '/features/autonomous-agent/integrations/postgresql/' }, + { label: 'MySQL', link: '/features/autonomous-agent/integrations/mysql/' }, + // Debugging + { label: 'PDB', link: '/features/autonomous-agent/integrations/pdb/' }, + ] + }, + ] + }, { label: 'Guides', + collapsed: true, items: [ - { label: 'Deployment', + { + label: 'Deployment', + collapsed: true, items: [ - { label: 'Runpod Deployment', link: '/guides/deployment/runpod/' }, - { label: 'AWS Deployment', items: [ - { label: 'Getting Started', link: '/guides/deployment/aws/getting-started/' }, - { label: 'Launch from EC2', link: '/guides/deployment/aws/ec2/' }, - { label: 'Launch from Website', link: '/guides/deployment/aws/marketplace/' }, - { label: 'Usage', link: '/guides/deployment/aws/usage/' }, - ] }, - ] + { + label: 'Runpod Deployment', + link: '/guides/deployment/runpod/', + attrs: { + 'aria-label': 'Learn about Runpod Deployment' + } + }, + { + label: 'AWS Deployment', + collapsed: true, + items: [ + { + label: 'Getting Started', + link: '/guides/deployment/aws/getting-started/', + attrs: { + 'aria-label': 'Getting Started with AWS Deployment' + } + }, + { + label: 'Launch from EC2', + link: '/guides/deployment/aws/ec2/', + attrs: { + 'aria-label': 'Launch Refact from EC2' + } + }, + { + label: 'Launch from Website', + link: '/guides/deployment/aws/marketplace/', + attrs: { + 'aria-label': 'Launch Refact from AWS Marketplace' + } + }, + { + label: 'Usage', + link: '/guides/deployment/aws/usage/', + attrs: { + 'aria-label': 'AWS Deployment Usage Guide' + } + }, + ] + }, + ] }, { label: 'Plugins', + collapsed: true, items: [ - { label: 'JetBrains IDEs', + { + label: 'JetBrains IDEs', + collapsed: true, items: [ - { label: 'Troubleshooting', link: '/guides/plugins/jetbrains/troubleshooting/' }, + { + label: 'Troubleshooting', + link: '/guides/plugins/jetbrains/troubleshooting/', + attrs: { + 'aria-label': 'JetBrains IDEs Troubleshooting Guide' + } + }, ] }, ] }, - { label: 'Authentication', + { + label: 'Authentication', + collapsed: true, items: [ - { label: 'Keycloak Integration', link: '/guides/authentication/keycloak/' }, + { + label: 'Keycloak Integration', + link: '/guides/authentication/keycloak/', + attrs: { + 'aria-label': 'Learn about Keycloak Integration' + } + }, ] }, - { label: 'Version-specific Usage', + { + label: 'Version-specific Usage', + collapsed: true, items: [ - { label: 'Self-hosted Refact', link: '/guides/version-specific/self-hosted/' }, - { label: 'Enterprise Refact', + { + label: 'Self-hosted Refact', + collapsed: true, + items: [ + { + label: 'Self-hosted Refact', + link: '/guides/version-specific/self-hosted/', + attrs: { + 'aria-label': 'Self-hosted Refact Guide' + } + } + ] + }, + { + label: 'Enterprise Refact', + collapsed: true, items: [ - { label: 'Getting Started', link: '/guides/version-specific/enterprise/getting-started/' }, - { label: 'License', link: '/guides/version-specific/enterprise/license/' }, - { label: 'Users', link: '/guides/version-specific/enterprise/users/' }, - { label: 'Model Hosting', link: '/guides/version-specific/enterprise/model-hosting/' }, - { label: 'Plugins', link: '/guides/version-specific/enterprise/plugins/' }, + { + label: 'Getting Started', + link: '/guides/version-specific/enterprise/getting-started/', + attrs: { + 'aria-label': 'Getting Started with Enterprise Refact' + } + }, + { + label: 'License', + link: '/guides/version-specific/enterprise/license/', + attrs: { + 'aria-label': 'Enterprise Refact License Information' + } + }, + { + label: 'Users', + link: '/guides/version-specific/enterprise/users/', + attrs: { + 'aria-label': 'Enterprise Refact User Management' + } + }, + { + label: 'Model Hosting', + link: '/guides/version-specific/enterprise/model-hosting/', + attrs: { + 'aria-label': 'Enterprise Refact Model Hosting Guide' + } + }, + { + label: 'Plugins', + link: '/guides/version-specific/enterprise/plugins/', + attrs: { + 'aria-label': 'Enterprise Refact Plugins Guide' + } + }, ] }, - { label: 'Refact Teams', link: '/guides/version-specific/teams/' }, + { + label: 'Refact Teams', + link: '/guides/version-specific/teams/', + attrs: { + 'aria-label': 'Learn about Refact Teams' + } + }, ] }, - { label: 'Reverse Proxy', link: '/guides/reverse-proxy/' }, + { + label: 'Reverse Proxy', + link: '/guides/reverse-proxy/', + attrs: { + 'aria-label': 'Learn about Reverse Proxy Setup' + } + }, ] }, { label: 'Supported Models', link: '/supported-models/', + attrs: { + 'aria-label': 'View Supported AI Models' + } }, { label: 'BYOK', link: '/byok/', + attrs: { + 'aria-label': 'Learn about Bring Your Own Key (BYOK)' + } }, { label: 'FAQ', link: '/faq/', + attrs: { + 'aria-label': 'Frequently Asked Questions' + } }, - // { - // label: 'Privacy', - // link: '/privacy/', - // }, { label: 'Contributing', link: '/contributing/', + attrs: { + 'aria-label': 'Learn how to contribute to Refact' + } }, ], customCss: [ - // Relative path to your custom CSS file - './src/styles/custom.css', + // Main CSS entry point that imports all other CSS files + './src/styles/index.css', ], editLink: { baseUrl: 'https://github.com/smallcloudai/web_docs_refact_ai/edit/main/', @@ -174,4 +375,4 @@ export default defineConfig({ lastUpdated: true, }), ], -}); \ No newline at end of file +}); diff --git a/public/videos/enable_rollback.mp4 b/public/videos/enable_rollback.mp4 new file mode 100644 index 0000000..9636da6 Binary files /dev/null and b/public/videos/enable_rollback.mp4 differ diff --git a/public/videos/use_rollback.mp4 b/public/videos/use_rollback.mp4 new file mode 100644 index 0000000..1aea9f8 Binary files /dev/null and b/public/videos/use_rollback.mp4 differ diff --git a/src/components/Head.astro b/src/components/Head.astro new file mode 100644 index 0000000..a3d3e2c --- /dev/null +++ b/src/components/Head.astro @@ -0,0 +1,8 @@ +--- +import type { Props } from '@astrojs/starlight/props'; +import Default from '@astrojs/starlight/components/Head.astro'; +import PageTransitions from './PageTransitions.astro'; +--- + + + \ No newline at end of file diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro new file mode 100644 index 0000000..40d1406 --- /dev/null +++ b/src/components/Navigation.astro @@ -0,0 +1,14 @@ +--- +--- + + \ No newline at end of file diff --git a/src/components/PageTransitions.astro b/src/components/PageTransitions.astro new file mode 100644 index 0000000..8312de8 --- /dev/null +++ b/src/components/PageTransitions.astro @@ -0,0 +1,24 @@ +--- +import { ViewTransitions } from 'astro:transitions'; +--- + + + + \ No newline at end of file diff --git a/src/components/Search.astro b/src/components/Search.astro index f1596cf..4bcf175 100644 --- a/src/components/Search.astro +++ b/src/components/Search.astro @@ -2,32 +2,24 @@ import "@docsearch/css"; --- -
+
- - + }; + + // Initialize on first load only + document.addEventListener('astro:page-load', initSearch, { once: true }); + \ No newline at end of file diff --git a/src/content/docs/features/autonomous-agent/integrations/index.md b/src/content/docs/features/autonomous-agent/integrations/index.md index 2c83f65..9c43569 100644 --- a/src/content/docs/features/autonomous-agent/integrations/index.md +++ b/src/content/docs/features/autonomous-agent/integrations/index.md @@ -3,13 +3,14 @@ title: Agent Integrations description: Overview of available integrations for the Refact.ai Agent --- -The Refact.ai Agent supports various integrations to enhance your development workflow. Here's a list of available integrations: +The Refact.ai Agent supports various integrations to enhance your development workflow. These integrations extend the Agent's [core tools](../tools) with external services and capabilities. ## Development Tools -- [Chrome](./chrome) - Control Chrome browser for testing and automation -- [Shell](./shell-commands) - Execute terminal commands +- [Chrome](./chrome) - Control Chrome browser for testing - [Command-line Tool](./command-line-tool) - Configure and use custom command-line tools - [Command-line Service](./command-line-service) - Run and manage background processes +- [MCP Server](./mcp) - Connect to Model Context Protocol servers +- [Shell Commands](./shell-commands) - Execute terminal commands with user confirmation ## Version Control - [GitHub](./github) - Interact with GitHub repositories through GitHub CLI @@ -23,6 +24,24 @@ The Refact.ai Agent supports various integrations to enhance your development wo - [MySQL](./mysql) - Work with MySQL databases ## Debugging -- [Pdb](./pdb) -Aallows interaction with the Python debugger +- [Pdb](./pdb) - Allows interaction with the Python debugger -Each integration can be configured and customized to suit your specific needs. Click on the links above to learn more about each integration's features and configuration options. \ No newline at end of file +Each integration can be configured and customized to suit your specific needs. Click on the links above to learn more about each integration's features and configuration options. + +## Configuring Integrations + +You can configure the integrations in two ways: + +### 1. Through Chat Interface + +Click on the integrations button in the chat interface to quickly enable or disable specific integrations. + +### 2. Through Settings + +Access integrations through the settings menu for more detailed configuration options. + +## Next Steps + +- Review our [security best practices](../security) when setting up integrations +- Learn about [authentication methods](../authentication) for different services +- Check the [troubleshooting guide](../troubleshooting) if you encounter any issues diff --git a/src/content/docs/features/autonomous-agent/integrations/mcp.md b/src/content/docs/features/autonomous-agent/integrations/mcp.md new file mode 100644 index 0000000..29c5158 --- /dev/null +++ b/src/content/docs/features/autonomous-agent/integrations/mcp.md @@ -0,0 +1,55 @@ +--- +title: MCP Server +description: Configure and use Model Context Protocol server integration +--- + +The MCP (Model Context Protocol) Server integration enables the Refact.ai Agent to connect to local or remote MCP servers, enhancing the agent's context understanding and capabilities. This integration supports various MCP server implementations and configurations. + +## What is MCP? + +MCP (Model Context Protocol) is a protocol designed to provide structured context to language models. It allows for standardized communication between applications and language models, enabling more effective context management and improved model responses. + +Learn more about MCP at [Anthropic's Model Context Protocol documentation](https://www.anthropic.com/news/model-context-protocol). + +## Basic Configurations + +### Command Settings +- **Command**: Specify the MCP command to execute + - Examples: + - `npx -y ` + - `/my/path/venv/python -m ` + - `docker run -i --rm ` + - On Windows, use `npx.cmd` or `npm.cmd` instead of `npx` or `npm` + +### Environment Variables +- Add environment variables required by the MCP server +- Define variable names and values to configure server behavior + +### Actions +- **Test**: Verifies the connection and functionality of the MCP server integration +- **Open mcp_test.yaml**: Opens the configuration file for editing + +## Advanced Configuration + +### Confirmation Rules +Define rules to control execution: +- **Ask User**: Commands matching these patterns will prompt the user for confirmation + - Use this for potentially sensitive operations +- **Deny**: Commands matching these patterns are automatically blocked + - Use this to prevent execution of potentially harmful commands + + + +## Security Considerations + +- Always verify the source and security of MCP servers before connecting +- Use confirmation rules to prevent execution of potentially harmful commands +- Consider using environment variables to pass sensitive configuration rather than command-line arguments +- For production environments, consider setting up access controls for your MCP servers + +## Troubleshooting + +- If the connection fails, verify that the MCP server is running and accessible +- Check that any required environment variables are correctly set +- Ensure that the command path is correct and executable +- For Docker-based servers, verify that Docker is running and the image is available \ No newline at end of file diff --git a/src/content/docs/features/autonomous-agent/rollback.md b/src/content/docs/features/autonomous-agent/rollback.md new file mode 100644 index 0000000..ff6a4ec --- /dev/null +++ b/src/content/docs/features/autonomous-agent/rollback.md @@ -0,0 +1,58 @@ +--- +title: Agent Rollback +description: Learn how to use Refact.ai Agent's rollback functionality to revert repository changes +--- + +The Refact.ai Agent provides a powerful rollback feature that allows you to revert your repository to the state it was in at any specific point in your chat conversation. This feature is particularly useful when experimenting with different solutions or when you need to undo a series of changes. + +## Overview + +The rollback functionality enables you to: +- Return to any previous state in your development session +- Review changes before applying the rollback +- Maintain a clear history of your development process + +## Enabling Rollback + +The rollback feature is enabled by default in Agent chat mode. However, you should verify that the toggle is properly set: + +
+ +
+ +## Using Rollback + +To rollback to a specific point in your conversation: + +1. Navigate to the message you want to rollback to in the chat history +2. Look for the rollback icon next to the message +3. Click the icon to initiate the rollback process +4. Review the summary of changes that will occur +5. Confirm the rollback if you agree with the changes + +Here's how to use the rollback feature: + +
+ +
+ +## Important Considerations + +:::caution[Warning] +Any changes made to your repository after the selected message point will be removed during rollback. This includes: +- Changes made by the Agent +- Manual changes you've made +- Any file modifications or additions +::: + +## Next Steps + +- Learn about [Agent Tools](../tools) to better understand how changes are made +- Explore [Agent Integrations](../integrations) for enhanced development workflow +- Check out the [FAQ](/faq) for common questions about Agent features \ No newline at end of file diff --git a/src/content/docs/features/autonomous-agent/tools.md b/src/content/docs/features/autonomous-agent/tools.md new file mode 100644 index 0000000..c80746a --- /dev/null +++ b/src/content/docs/features/autonomous-agent/tools.md @@ -0,0 +1,94 @@ +--- +title: Agent Tools +description: Overview of available tools and use cases for the autonomous Refact.ai Agent +--- + +The Refact.ai Agent is designed to operate autonomously, extending its capabilities beyond simple integrations. While integrations allow external services to be connected, Agent Tools empower the agent to perform key operations using built-in functionalities. Below is an overview of the available Agent Tools, typical use cases, and how they can enhance your development workflow. + +## Core Tools + +The Agent has access to several powerful tools that help it understand and modify your codebase: + +### Context and Search Tools + +- **search** + Find similar pieces of code or text using vector database. + *Use Case:* When you ask the Agent to modify code, it uses this tool to find similar patterns across your codebase to maintain consistency. + +- **definition** + Read definition of symbols in the project using AST. + *Use Case:* The Agent uses this to understand function signatures, class structures, and type definitions when working with your code. + +- **references** + Find usages of symbols within the project using AST. + *Use Case:* Before modifying a function or class, the Agent checks all its usages to ensure changes won't break existing code. + +- **tree** + Get a files tree with symbols for the project. + *Use Case:* The Agent uses this to understand project structure and locate relevant files. + +### File Operations + +- **cat** + Read multiple files and understand their content. + *Use Case:* The Agent can read and analyze multiple files at once, including images and skeletonized code views. + +- **locate** + Find relevant files for a specific task. + *Use Case:* When given a task, the Agent can quickly identify which files need to be modified. + +### Code Modification + +- **patch** + Apply changes to files in a controlled manner. + *Use Case:* The Agent uses this to make actual changes to your codebase, with your approval. + +### Planning and Analysis + +- **think** + Analyze complex problems and create execution plans using o3 mini reasoning model. + *Use Case:* Before making changes, the Agent plans out the steps needed to complete a task successfully. The o3 mini model helps break down complex problems into manageable steps and create a clear execution strategy. + +### Web Interaction + +- **web** + Fetch and read web pages in plain text format. + *Use Case:* The Agent can read documentation, specifications, or other web resources to help solve problems. + +## How Agent Tools Work Together + +The Agent combines these tools strategically to complete complex tasks. Here's a typical workflow: + +1. **Understanding Phase** + - Uses `tree` to understand project structure + - Uses `locate` to find relevant files + - Uses `search` to find similar patterns + - Uses `definition` and `references` to understand code context + +2. **Planning Phase** + - Uses `think` to create a detailed plan + - Uses `web` if external documentation is needed + +3. **Execution Phase** + - Uses `cat` to read necessary files + - Creates changes using `patch` tool + - Verifies changes using `search` and `references` + +## Best Practices + +When working with the Agent, consider these tips: + +- Let the Agent gather context before making changes +- Review proposed patches carefully before approving +- Use the Agent's planning capabilities for complex tasks +- Provide clear, specific instructions for best results + +## Next Steps + +Once you're familiar with the core tools, you might want to explore: + +- [Agent Overview](../overview) - Learn more about the Agent's capabilities +- [Getting Started](../getting-started) - Start using the Agent effectively +- [Integrations](../integrations) - Connect with external services and tools + +For specific integration guides and advanced usage scenarios, refer to our detailed documentation sections. \ No newline at end of file diff --git a/src/styles/components.css b/src/styles/components.css new file mode 100644 index 0000000..87be98e --- /dev/null +++ b/src/styles/components.css @@ -0,0 +1,55 @@ +/* Common component styles */ +a, +.icon, +button, +input, +.sidebar-content a, +.pagefind-ui__search-input, +.search-item, +.current-page { + border-radius: var(--border-radius-md); + transition: var(--transition-default); +} + +/* Video frame styles */ +.video-frame { + border: 2px solid var(--sl-color-accent); + border-radius: var(--border-radius-lg); + padding: var(--space-md); + background: var(--sl-color-accent-low); +} + +/* Sidebar navigation */ +/* Hover effect only for non-active sidebar links */ +.sidebar-content a:not([aria-current]):hover { + background-color: var(--sl-color-gray-6); +} + +/* Current page styling - no hover effects */ +.sidebar-content .current-page { + background-color: var(--sl-color-accent-high); + color: var(--sl-color-accent); + pointer-events: none; +} + +/* Ensure proper contrast for nested items */ +.sidebar-content li > a.current-page, +.sidebar-content li > a.current-page:hover, +.sidebar-content li > a.current-page:focus { + background-color: var(--sl-color-accent-high); + color: var(--sl-color-accent); +} + +/* Dialog styling */ +header.dialog { + background-color: #fff; + border-radius: var(--border-radius-lg); + margin: var(--space-md); +} + +/* Search input */ +.pagefind-ui__search-input { + border: 0; + border-radius: var(--border-radius-md); + padding: 0.75rem 1rem; +} \ No newline at end of file diff --git a/src/styles/custom.css b/src/styles/custom.css index a62a211..45c2d6d 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -12,6 +12,11 @@ --sl-color-gray-5: #383838; --sl-color-gray-6: #272727; --sl-color-black: #181818; + + /* Sidebar specific colors */ + --sl-sidebar-color-text-active: var(--sl-color-white); + --sl-sidebar-color-bg-active: var(--sl-color-accent); + --sl-sidebar-color-bg-hover: var(--sl-color-gray-6); } /* Light mode colors. */ @@ -28,56 +33,171 @@ --sl-color-gray-6: #eeeeee; --sl-color-gray-7: #f6f6f6; --sl-color-black: #ffffff; + + /* Sidebar specific colors */ + --sl-sidebar-color-text-active: var(--sl-color-white); + --sl-sidebar-color-bg-active: var(--sl-color-accent); + --sl-sidebar-color-bg-hover: var(--sl-color-gray-6); +} + +/* Main content layout */ +main { + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; +} + +/* Search container */ +.search-container { + display: flex; + justify-content: center; + width: 100%; + padding: 1rem 0; +} + +/* Rounded corners for various elements */ +a, +.icon, +button, +input, +.sidebar-content a, +.pagefind-ui__search-input, +.search-item, +.current-page { + border-radius: 6px !important; + transition: all 0.2s ease; +} + +/* Main sidebar items - first level */ +.sidebar-content > .sidebar-groups > li > details > summary, +.sidebar-content > .sidebar-groups > li > a { + font-size: 1.1rem; + font-weight: 600; +} + +/* Second level items - ensure all items at this level match */ +.sidebar-content > .sidebar-groups > li > details li > a, +.sidebar-content > .sidebar-groups > li > details li > details > summary { + font-size: 0.95rem; + font-weight: 500; +} + +/* Third level and deeper items */ +.sidebar-content > .sidebar-groups > li > details li > details li > a, +.sidebar-content > .sidebar-groups > li > details li > details li > details > summary { + font-size: 0.9rem; + font-weight: 400; + padding-left: 0.5rem; + color: var(--sl-color-gray-3); } + +/* Light mode colors. */ +:root[data-theme='light'] { + --sl-color-accent-low: #311514; + --sl-color-accent: #E7150D; + --sl-color-accent-high: #FEF4F4; + --sl-color-white: #181818; + --sl-color-gray-1: #272727; + --sl-color-gray-2: #383838; + --sl-color-gray-3: #585858; + --sl-color-gray-4: #8b8b8b; + --sl-color-gray-5: #c2c2c2; + --sl-color-gray-6: #eeeeee; + --sl-color-gray-7: #f6f6f6; + --sl-color-black: #ffffff; + + /* Sidebar specific colors */ + --sl-sidebar-color-text-active: var(--sl-color-white); + --sl-sidebar-color-bg-active: var(--sl-color-accent); + --sl-sidebar-color-bg-hover: var(--sl-color-gray-6); +} + body { font-family: "Manrope", sans-serif; font-optical-sizing: auto; font-size: 16px; } + /* theme overrides */ kbd { font-size: 10px !important; font-family: "Manrope", sans-serif !important; font-weight: 800 !important; } -a, -.icon, -button { - border-radius: 0 !important; -} + .site-title { max-width: 140px; } + header.dialog { - background-color: #fff !important; + background-color: #fff !important; + border-radius: 8px; + margin: 1rem; } + .pagefind-ui__search-input { - border: 0 !important; + border: 0 !important; + border-radius: 6px !important; + padding: 0.75rem 1rem !important; } + .full-table { width: 100% !important; table-layout:fixed; } + .full-table thead, .full-table tbody, .full-table tr { width: 100% !important; } + .full-table td, .full-table th { width: 100vw; } + .full-table td:nth-child(2) { text-align: center; } + code { font-family: "Azeret Mono", monospace !important; + border-radius: 4px; } /* Video frame styles */ .video-frame { border: 2px solid var(--sl-color-accent); - border-radius: 4px; + border-radius: 8px; + padding: 1rem; + background: var(--sl-color-accent-low); +} + +/* Hover effect only for non-active sidebar links */ +.sidebar-content a:not([aria-current]):hover { + background-color: var(--sl-color-gray-6); +} + +/* Current page styling - no hover effects */ +.sidebar-content .current-page { + background-color: var(--sl-color-accent-high); + color: var(--sl-color-accent); + pointer-events: none; +} + +/* Ensure proper contrast for nested items */ +.sidebar-content li > a.current-page, +.sidebar-content li > a.current-page:hover, +.sidebar-content li > a.current-page:focus { + background-color: var(--sl-color-accent-high) !important; + color: var(--sl-color-accent) !important; +} + +/* Video frame styles */ +.video-frame { + border: 2px solid var(--sl-color-accent); + border-radius: 8px; padding: 1rem; background: var(--sl-color-accent-low); } \ No newline at end of file diff --git a/src/styles/index.css b/src/styles/index.css new file mode 100644 index 0000000..70147e0 --- /dev/null +++ b/src/styles/index.css @@ -0,0 +1,12 @@ +/* Main CSS entry point */ + +/* Import design tokens and variables first */ +@import './variables.css'; + +/* Import base styles */ +@import './typography.css'; +@import './layout.css'; + +/* Import component styles */ +@import './components.css'; +@import './search.css'; \ No newline at end of file diff --git a/src/styles/layout.css b/src/styles/layout.css new file mode 100644 index 0000000..c02e325 --- /dev/null +++ b/src/styles/layout.css @@ -0,0 +1,57 @@ +/* Main content layout */ +main { + max-width: 1200px; + margin: 0 auto; + padding: 0 var(--space-lg); +} + +/* Search container */ +.search-container { + display: flex; + justify-content: center; + width: 100%; + padding: var(--space-md) 0; +} + +/* Site title */ +.site-title { + max-width: 140px; +} + +/* Full width tables */ +.full-table { + width: 100% !important; + table-layout: fixed; +} + +.full-table thead, +.full-table tbody, +.full-table tr { + width: 100% !important; +} + +.full-table td, +.full-table th { + width: 100vw; +} + +.full-table td:nth-child(2) { + text-align: center; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + main { + padding: 0 var(--space-md); + } + + .site-title { + max-width: 120px; + } +} + +@media (max-width: 480px) { + main { + padding: 0 var(--space-sm); + } +} \ No newline at end of file diff --git a/src/styles/search.css b/src/styles/search.css new file mode 100644 index 0000000..7d361dc --- /dev/null +++ b/src/styles/search.css @@ -0,0 +1,84 @@ +/* DocSearch specific styles */ +#docsearch { + width: 100%; + max-width: 32rem; +} + +.DocSearch-Button { + width: 100%; + border-radius: var(--border-radius-lg); + padding: var(--space-sm) var(--space-md); + background: var(--sl-color-black); + border: 1px solid var(--sl-color-gray-5); + height: 2.5rem; + margin: 0; +} + +.DocSearch-Button:hover, +.DocSearch-Button:focus { + border-color: var(--sl-color-accent); + box-shadow: none; + outline: none; + background: var(--sl-color-black); +} + +.DocSearch-Button-Keys { + display: flex; + min-width: auto; + padding: 0; + border: none; + gap: var(--space-xs); + background: none; +} + +.DocSearch-Button-Key { + background: none; + box-shadow: none; + color: var(--sl-color-gray-3); + position: relative; + top: 0; + padding: 0; + margin: 0; + width: auto; + height: auto; + font-size: var(--font-size-xs); +} + +.DocSearch-Search-Icon { + width: 1rem; + height: 1rem; + color: var(--sl-color-gray-3); +} + +.DocSearch-Button-Placeholder { + font-size: var(--font-size-sm); + padding: 0 var(--space-sm); +} + +.DocSearch-Modal { + border-radius: var(--border-radius-lg); + margin-top: var(--space-sm); +} + +.DocSearch-SearchBar { + padding: var(--space-md); +} + +.DocSearch-Form { + border-radius: var(--border-radius-lg); +} + +.DocSearch-Hit-source, +.DocSearch-Hit a { + background: none; + box-shadow: none; +} + +.DocSearch-Hit { + padding: var(--space-sm); + border-radius: var(--border-radius-md); +} + +.DocSearch-Hit[aria-selected=true] { + background: var(--sl-color-gray-6); +} \ No newline at end of file diff --git a/src/styles/typography.css b/src/styles/typography.css new file mode 100644 index 0000000..d493866 --- /dev/null +++ b/src/styles/typography.css @@ -0,0 +1,43 @@ +/* Base typography styles */ +body { + font-family: var(--font-family-base); + font-optical-sizing: auto; + font-size: var(--font-size-md); +} + +/* Code blocks */ +code { + font-family: var(--font-family-mono) !important; + border-radius: var(--border-radius-sm); +} + +/* Keyboard shortcuts */ +kbd { + font-size: var(--font-size-xs) !important; + font-family: var(--font-family-base) !important; + font-weight: 800 !important; +} + +/* Sidebar typography hierarchy */ +/* Main sidebar items - first level */ +.sidebar-content > .sidebar-groups > li > details > summary, +.sidebar-content > .sidebar-groups > li > a { + font-size: var(--font-size-lg); + font-weight: 600; +} + +/* Second level items */ +.sidebar-content > .sidebar-groups > li > details li > a, +.sidebar-content > .sidebar-groups > li > details li > details > summary { + font-size: var(--font-size-sm); + font-weight: 500; +} + +/* Third level and deeper items */ +.sidebar-content > .sidebar-groups > li > details li > details li > a, +.sidebar-content > .sidebar-groups > li > details li > details li > details > summary { + font-size: var(--font-size-xs); + font-weight: 400; + padding-left: var(--space-sm); + color: var(--sl-color-gray-3); +} \ No newline at end of file diff --git a/src/styles/variables.css b/src/styles/variables.css new file mode 100644 index 0000000..70c1491 --- /dev/null +++ b/src/styles/variables.css @@ -0,0 +1,68 @@ +@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=Manrope:wght@200..800&display=swap'); + +/* Design tokens */ +:root { + /* Border radius */ + --border-radius-sm: 4px; + --border-radius-md: 6px; + --border-radius-lg: 8px; + + /* Spacing */ + --space-xs: 0.25rem; + --space-sm: 0.5rem; + --space-md: 1rem; + --space-lg: 2rem; + + /* Typography */ + --font-family-base: "Manrope", sans-serif; + --font-family-mono: "Azeret Mono", monospace; + --font-size-xs: 0.75rem; + --font-size-sm: 0.875rem; + --font-size-md: 1rem; + --font-size-lg: 1.125rem; + --font-size-xl: 1.25rem; + + /* Transitions */ + --transition-default: all 0.2s ease; +} + +/* Dark mode colors. */ +:root { + --sl-color-accent-low: #311514; + --sl-color-accent: #E7150D; + --sl-color-accent-high: #FEF4F4; + --sl-color-white: #ffffff; + --sl-color-gray-1: #FAFAFA; + --sl-color-gray-2: #F3F3F3; + --sl-color-gray-3: #D8D8D9; + --sl-color-gray-4: #585858; + --sl-color-gray-5: #383838; + --sl-color-gray-6: #272727; + --sl-color-black: #181818; + + /* Sidebar specific colors */ + --sl-sidebar-color-text-active: var(--sl-color-white); + --sl-sidebar-color-bg-active: var(--sl-color-accent); + --sl-sidebar-color-bg-hover: var(--sl-color-gray-6); +} + +/* Light mode colors. */ +:root[data-theme='light'] { + --sl-color-accent-low: #311514; + --sl-color-accent: #E7150D; + --sl-color-accent-high: #FEF4F4; + --sl-color-white: #181818; + --sl-color-gray-1: #272727; + --sl-color-gray-2: #383838; + --sl-color-gray-3: #585858; + --sl-color-gray-4: #8b8b8b; + --sl-color-gray-5: #c2c2c2; + --sl-color-gray-6: #eeeeee; + --sl-color-gray-7: #f6f6f6; + --sl-color-black: #ffffff; + + /* Sidebar specific colors */ + --sl-sidebar-color-text-active: var(--sl-color-white); + --sl-sidebar-color-bg-active: var(--sl-color-accent); + --sl-sidebar-color-bg-hover: var(--sl-color-gray-6); +} \ No newline at end of file diff --git a/.github/workflows/build.yml b/workflows/build.yml similarity index 100% rename from .github/workflows/build.yml rename to workflows/build.yml