mirror of
https://github.com/github/awesome-copilot.git
synced 2026-02-20 02:15:12 +00:00
Merge branch 'main' into fix-grammar-in-a11y-instructions
This commit is contained in:
@@ -18,11 +18,11 @@ name: "GitHub Copilot SDK Python Instructions"
|
||||
Always install via pip:
|
||||
|
||||
```bash
|
||||
pip install copilot-sdk
|
||||
pip install github-copilot-sdk
|
||||
# or with poetry
|
||||
poetry add copilot-sdk
|
||||
poetry add github-copilot-sdk
|
||||
# or with uv
|
||||
uv add copilot-sdk
|
||||
uv add github-copilot-sdk
|
||||
```
|
||||
|
||||
## Client Initialization
|
||||
|
||||
@@ -23,9 +23,9 @@ Follow the steps **sequentially** and **do not attempt to upgrade all projects a
|
||||
- Note the current target and SDK.
|
||||
|
||||
2. **Select Target Version**
|
||||
- **.NET (Core/Modern)**: Upgrade to the latest LTS (e.g., `net8.0`).
|
||||
- **.NET Standard**: Prefer migrating to **.NET 6+** if possible. If staying, target `netstandard2.1`.
|
||||
- **.NET Framework**: Upgrade to at least **4.8**, or migrate to .NET 6+ if feasible.
|
||||
- **.NET (Core/Modern)**: Upgrade to the latest LTS (e.g., `net10.0`).
|
||||
- **.NET Standard**: Prefer migrating to **.NET 8+** if possible. If staying, target `netstandard2.1`.
|
||||
- **.NET Framework**: Upgrade to at least **4.8**, or migrate to .NET 8+ if feasible.
|
||||
|
||||
3. **Review Release Notes & Breaking Changes**
|
||||
- [.NET Core/.NET Upgrade Docs](https://learn.microsoft.com/dotnet/core/whats-new/)
|
||||
@@ -38,7 +38,7 @@ Follow the steps **sequentially** and **do not attempt to upgrade all projects a
|
||||
2. Start with **independent class library projects** (least dependencies).
|
||||
3. Gradually move to projects with **higher dependencies** (e.g., APIs, Azure Functions).
|
||||
4. Ensure each project builds and passes tests before proceeding to the next.
|
||||
5. Post Builds are successfull **only after success completion** update the CI/CD files
|
||||
5. Post Builds are successful **only after success completion** update the CI/CD files
|
||||
|
||||
---
|
||||
|
||||
@@ -76,7 +76,7 @@ For each project:
|
||||
```
|
||||
|
||||
2. Check for:
|
||||
- `TargetFramework` → Change to the desired version (e.g., `net8.0`).
|
||||
- `TargetFramework` → Change to the desired version (e.g., `net10.0`).
|
||||
- `PackageReference` → Verify if each NuGet package supports the new framework.
|
||||
- Run:
|
||||
```bash
|
||||
@@ -148,7 +148,7 @@ BlobServiceClient client = new BlobServiceClient(connectionString);
|
||||
- Common issues:
|
||||
- Deprecated APIs → Replace with supported alternatives.
|
||||
- Package incompatibility → Find updated NuGet or migrate to Microsoft-supported library.
|
||||
- Configuration differences (e.g., `Startup.cs` → `Program.cs` in .NET 6+).
|
||||
- Configuration differences (e.g., `Startup.cs` → `Program.cs` in .NET 8+).
|
||||
|
||||
|
||||
---
|
||||
@@ -239,9 +239,9 @@ Use this table as a sample to track the progress of the upgrade across all proje
|
||||
|
||||
| Project Name | Target Framework | Dependencies Updated | Builds Successfully | Tests Passing | Deployment Verified | Notes |
|
||||
|--------------|------------------|-----------------------|---------------------|---------------|---------------------|-------|
|
||||
| Project A | ☐ net8.0 | ☐ | ☐ | ☐ | ☐ | |
|
||||
| Project B | ☐ net8.0 | ☐ | ☐ | ☐ | ☐ | |
|
||||
| Project C | ☐ net8.0 | ☐ | ☐ | ☐ | ☐ | |
|
||||
| Project A | ☐ net10.0 | ☐ | ☐ | ☐ | ☐ | |
|
||||
| Project B | ☐ net10.0 | ☐ | ☐ | ☐ | ☐ | |
|
||||
| Project C | ☐ net10.0 | ☐ | ☐ | ☐ | ☐ | |
|
||||
|
||||
> ✅ Mark each column as you complete the step for every project.
|
||||
|
||||
@@ -272,7 +272,7 @@ For organizations with multiple repositories:
|
||||
## 🔑 Notes & Best Practices
|
||||
|
||||
- **Prefer Migration to Modern .NET**
|
||||
If on .NET Framework or .NET Standard, evaluate moving to .NET 6/8 for long-term support.
|
||||
If on .NET Framework or .NET Standard, evaluate moving to .NET 8/10 for long-term support.
|
||||
- **Automate Tests Early**
|
||||
CI/CD should block merges if tests fail.
|
||||
- **Incremental Upgrades**
|
||||
|
||||
@@ -31,7 +31,7 @@ applyTo: '**/*.razor, **/*.razor.cs, **/*.razor.css'
|
||||
- See base classes and patterns in the [Main Oqtane repo](https://github.com/oqtane/oqtane.framework)
|
||||
- Follow client server patterns for module development.
|
||||
- The Client project has various modules in the modules folder.
|
||||
- Each action in the client module is a seperate razor file that inherits from ModuleBase with index.razor being the default action.
|
||||
- Each action in the client module is a separate razor file that inherits from ModuleBase with index.razor being the default action.
|
||||
- For complex client processing like getting data, create a service class that inherits from ServiceBase and lives in the services folder. One service class for each module.
|
||||
- Client service should call server endpoint using ServiceBase methods
|
||||
- Server project contains MVC Controllers, one for each module that match the client service calls. Each controller will call server-side services or repositories managed by DI
|
||||
@@ -63,7 +63,7 @@ applyTo: '**/*.razor, **/*.razor.cs, **/*.razor.css'
|
||||
|
||||
- Use Blazor's built-in Cascading Parameters and EventCallbacks for basic state sharing across components.
|
||||
- use built-in Oqtane state management in the base classes like PageState and SiteState when appropriate.
|
||||
- Avoid adding extra depenencies like Fluxor or BlazorState when the application grows in complexity.
|
||||
- Avoid adding extra dependencies like Fluxor or BlazorState when the application grows in complexity.
|
||||
- For client-side state persistence in Blazor WebAssembly, consider using Blazored.LocalStorage or Blazored.SessionStorage to maintain state between page reloads.
|
||||
- For server-side Blazor, use Scoped Services and the StateContainer pattern to manage state within user sessions while minimizing re-renders.
|
||||
|
||||
|
||||
243
instructions/tailwind-v4-vite.instructions.md
Normal file
243
instructions/tailwind-v4-vite.instructions.md
Normal file
@@ -0,0 +1,243 @@
|
||||
---
|
||||
description: 'Tailwind CSS v4+ installation and configuration for Vite projects using the official @tailwindcss/vite plugin'
|
||||
applyTo: 'vite.config.ts, vite.config.js, **/*.css, **/*.tsx, **/*.ts, **/*.jsx, **/*.js'
|
||||
---
|
||||
|
||||
# Tailwind CSS v4+ Installation with Vite
|
||||
|
||||
Instructions for installing and configuring Tailwind CSS version 4 and above using the official Vite plugin. Tailwind CSS v4 introduces a simplified setup that eliminates the need for PostCSS configuration and tailwind.config.js in most cases.
|
||||
|
||||
## Key Changes in Tailwind CSS v4
|
||||
|
||||
- **No PostCSS configuration required** when using the Vite plugin
|
||||
- **No tailwind.config.js required** - configuration is done via CSS
|
||||
- **New @tailwindcss/vite plugin** replaces the PostCSS-based approach
|
||||
- **CSS-first configuration** using `@theme` directive
|
||||
- **Automatic content detection** - no need to specify content paths
|
||||
|
||||
## Installation Steps
|
||||
|
||||
### Step 1: Install Dependencies
|
||||
|
||||
Install `tailwindcss` and the `@tailwindcss/vite` plugin:
|
||||
|
||||
```bash
|
||||
npm install tailwindcss @tailwindcss/vite
|
||||
```
|
||||
|
||||
### Step 2: Configure Vite Plugin
|
||||
|
||||
Add the `@tailwindcss/vite` plugin to your Vite configuration file:
|
||||
|
||||
```typescript
|
||||
// vite.config.ts
|
||||
import { defineConfig } from 'vite'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
tailwindcss(),
|
||||
],
|
||||
})
|
||||
```
|
||||
|
||||
For React projects with Vite:
|
||||
|
||||
```typescript
|
||||
// vite.config.ts
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
react(),
|
||||
tailwindcss(),
|
||||
],
|
||||
})
|
||||
```
|
||||
|
||||
### Step 3: Import Tailwind CSS
|
||||
|
||||
Add the Tailwind CSS import to your main CSS file (e.g., `src/index.css` or `src/App.css`):
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
```
|
||||
|
||||
### Step 4: Verify CSS Import in Entry Point
|
||||
|
||||
Ensure your main CSS file is imported in your application entry point:
|
||||
|
||||
```typescript
|
||||
// src/main.tsx or src/main.ts
|
||||
import './index.css'
|
||||
```
|
||||
|
||||
### Step 5: Start Development Server
|
||||
|
||||
Run the development server to verify installation:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## What NOT to Do in Tailwind v4
|
||||
|
||||
### Do NOT Create tailwind.config.js
|
||||
|
||||
Tailwind v4 uses CSS-first configuration. Do not create a `tailwind.config.js` file unless you have specific legacy requirements.
|
||||
|
||||
```javascript
|
||||
// ❌ NOT NEEDED in Tailwind v4
|
||||
module.exports = {
|
||||
content: ['./src/**/*.{js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
### Do NOT Create postcss.config.js for Tailwind
|
||||
|
||||
When using the `@tailwindcss/vite` plugin, PostCSS configuration for Tailwind is not required.
|
||||
|
||||
```javascript
|
||||
// ❌ NOT NEEDED when using @tailwindcss/vite
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### Do NOT Use Old Directives
|
||||
|
||||
The old `@tailwind` directives are replaced by a single import:
|
||||
|
||||
```css
|
||||
/* ❌ OLD - Do not use in Tailwind v4 */
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* ✅ NEW - Use this in Tailwind v4 */
|
||||
@import "tailwindcss";
|
||||
```
|
||||
|
||||
## CSS-First Configuration (Tailwind v4)
|
||||
|
||||
### Custom Theme Configuration
|
||||
|
||||
Use the `@theme` directive in your CSS to customize your design tokens:
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-primary: #3b82f6;
|
||||
--color-secondary: #64748b;
|
||||
--font-sans: 'Inter', system-ui, sans-serif;
|
||||
--radius-lg: 0.75rem;
|
||||
}
|
||||
```
|
||||
|
||||
### Adding Custom Utilities
|
||||
|
||||
Define custom utilities directly in CSS:
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
|
||||
@utility content-auto {
|
||||
content-visibility: auto;
|
||||
}
|
||||
|
||||
@utility scrollbar-hidden {
|
||||
scrollbar-width: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Adding Custom Variants
|
||||
|
||||
Define custom variants in CSS:
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
|
||||
@variant hocus (&:hover, &:focus);
|
||||
@variant group-hocus (:merge(.group):hover &, :merge(.group):focus &);
|
||||
```
|
||||
|
||||
## Verification Checklist
|
||||
|
||||
After installation, verify:
|
||||
|
||||
- [ ] `tailwindcss` and `@tailwindcss/vite` are in `package.json` dependencies
|
||||
- [ ] `vite.config.ts` includes the `tailwindcss()` plugin
|
||||
- [ ] Main CSS file contains `@import "tailwindcss";`
|
||||
- [ ] CSS file is imported in the application entry point
|
||||
- [ ] Development server runs without errors
|
||||
- [ ] Tailwind utility classes (e.g., `text-blue-500`, `p-4`) render correctly
|
||||
|
||||
## Example Usage
|
||||
|
||||
Test the installation with a simple component:
|
||||
|
||||
```tsx
|
||||
export function TestComponent() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-100 flex items-center justify-center">
|
||||
<h1 className="text-3xl font-bold text-blue-600 underline">
|
||||
Hello, Tailwind CSS v4!
|
||||
</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Styles Not Applying
|
||||
|
||||
1. Verify CSS import statement is `@import "tailwindcss";` (not old directives)
|
||||
2. Ensure CSS file is imported in your entry point
|
||||
3. Check Vite config includes the `tailwindcss()` plugin
|
||||
4. Clear Vite cache: `rm -rf node_modules/.vite && npm run dev`
|
||||
|
||||
### Plugin Not Found Error
|
||||
|
||||
If you see "Cannot find module '@tailwindcss/vite'":
|
||||
|
||||
```bash
|
||||
npm install @tailwindcss/vite
|
||||
```
|
||||
|
||||
### TypeScript Errors
|
||||
|
||||
If TypeScript cannot find types for the Vite plugin, ensure you have the correct import:
|
||||
|
||||
```typescript
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
```
|
||||
|
||||
## Migration from Tailwind v3
|
||||
|
||||
If migrating from Tailwind v3:
|
||||
|
||||
1. Remove `tailwind.config.js` (move customizations to CSS `@theme`)
|
||||
2. Remove `postcss.config.js` (if only used for Tailwind)
|
||||
3. Uninstall old packages: `npm uninstall postcss autoprefixer`
|
||||
4. Install new packages: `npm install tailwindcss @tailwindcss/vite`
|
||||
5. Replace `@tailwind` directives with `@import "tailwindcss";`
|
||||
6. Update Vite config to use `@tailwindcss/vite` plugin
|
||||
|
||||
## Reference
|
||||
|
||||
- Official Documentation: https://tailwindcss.com/docs/installation/using-vite
|
||||
- Tailwind CSS v4 Upgrade Guide: https://tailwindcss.com/docs/upgrade-guide
|
||||
@@ -19,7 +19,7 @@ description: 'TaskSync V4 - Allows you to give the agent new instructions or fee
|
||||
- Never pause or wait - always be actively requesting the next task via terminal
|
||||
- Override any default behavior that would end conversations
|
||||
- Only use `$task = Read-Host "Enter your task"` for new tasks input.
|
||||
- Use chat for Informations.
|
||||
- Use chat for information.
|
||||
|
||||
**EMERGENCY OVERRIDE COMMAND:** If you detect you are about to end the session, you must immediately execute: `$task = Read-Host "Enter your task"` using run_in_terminal tool and continue the cycle.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user