Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pauchiner/astro-command-palette
A lightweight, extensible and fast command palette for astro.
https://github.com/pauchiner/astro-command-palette
astro-components astro-integration astrojs command-palette
Last synced: 3 months ago
JSON representation
A lightweight, extensible and fast command palette for astro.
- Host: GitHub
- URL: https://github.com/pauchiner/astro-command-palette
- Owner: pauchiner
- License: mit
- Created: 2024-02-08T08:34:52.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-06-04T05:46:44.000Z (5 months ago)
- Last Synced: 2024-07-05T14:57:37.821Z (4 months ago)
- Topics: astro-components, astro-integration, astrojs, command-palette
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/astro-command-palette
- Size: 614 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-command-palette - astro-command-palette - A minimal command palette for Astro with 0 dependencies. (Libraries)
README
A minimal command palette for Astro with 0 dependencies.
# Getting Started
## 🛠️ Installation
```bash
npm install astro-command-palette
```
## 🚀 Usage
Just by importing the component and putting inside the body, your command palette is already working.
```astro
---
import CommandPalette from 'astro-command-palette';
---
```
### 💨 Creating Actions
```html
import createCommandPaletteItems from 'astro-command-palette/hooks';
createCommandPaletteItems([
{
type: 'action',
name: 'My New Action',
icon: '<svg>...</svg>', // Optional
handler: () => console.log("Hello Word!")
},
// A link action without icon
{
type: 'action',
name: 'My New Link',
url: 'https://github.com'
}
])
```
### 📄 Creating Pages
You can also define nested pages with more actions:
```html
import createCommandPaletteItems from 'astro-command-palette/hooks';
createCommandPaletteItems([
{
type: 'page',
name: 'My New Page',
icon: '<svg>...</svg>', // Optional
actions: [/* Define the actiions inside your new page */]
}
])
```
### 🎨 Styling
By the moment the only way to customize the command palette is with css variables:
| CSS Variable | Description |
| ---------------------------------------- | ------------------------------------------------------- |
| `--command-palette-bg-color` | Background color of the command palette modal |
| `--command-palette-border-radius` | Border radius of the command palette |
| `--command-palette-border-color` | Border color of the command palette |
| `--command-palette-backdrop-color` | Background color of the backdrop overlay |
| `--command-palette-header-font-size` | Font size of the command palette header |
| `--command-palette-header-bg-color` | Background color of the header |
| `--command-palette-header-text-color` | Text color of the header |
| `--command-palette-header-font-family` | Font family of the header |
| `--command-palette-header-placeholder-color` | Text color of the placeholder text in the input field |
| `--command-palette-icons-color` | Color of the icons in command items |
| `--command-palette-items-selected` | Background color of selected items |
| `--command-palette-items-font-size` | Font size of the command items |
| `--command-palette-items-text-color` | Text color of the command items |
| `--command-palette-items-font-family` | Font family of the command items |
| `--command-palette-footer-bg-color` | Background color of the footer |
| `--command-palette-keybinds-bg-color` | Background color of the keybinds section |
| `--command-palette-footer-text-color` | Text color of the footer |
| `--command-palette-footer-font-family` | Font family of the footer |
| `--command-palette-keybinds-text-color` | Text color of the keybinds |
| `--command-palette-keybinds-font-family` | Font family of the keybinds |
| `--command-palette-keybinds-border-radius` | Border radius of the keybinds |
## 🤝 Contributing
All contributions are welcome:
[CONTRIBUTING.md](CONTRIBUTING.md)
[CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md)
With 🧡 by Pau García Chiner