├── .eslintrc.json
├── .github
├── FUNDING.yml
└── assets
│ ├── logo-dark.svg
│ ├── logo-light.svg
│ ├── showcase-dark.png
│ ├── showcase-light.png
│ └── showcase.png
├── .gitignore
├── .nvmrc
├── .prettierignore
├── .prettierrc.json
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── example
├── astro.config.ts
├── public
│ └── favicon.svg
├── src
│ ├── env.d.ts
│ └── pages
│ │ └── index.astro
└── tsconfig.json
├── package.json
├── pnpm-lock.yaml
├── src
├── components
│ ├── Backdrop.astro
│ ├── Component.astro
│ ├── Footer.astro
│ ├── Header.astro
│ └── List.astro
├── env.d.ts
├── index.ts
├── scripts
│ ├── command-palette.ts
│ ├── hooks
│ │ ├── createCommandPalette.ts
│ │ └── index.ts
│ ├── index.ts
│ ├── internals
│ │ ├── elements.ts
│ │ ├── index.ts
│ │ ├── list.ts
│ │ ├── render.ts
│ │ └── store.ts
│ ├── keyboard.ts
│ └── mouse.ts
├── styles
│ └── themes
│ │ └── default.css
└── types.ts
└── tsconfig.json
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "node": true,
4 | "es2022": true,
5 | "browser": true
6 | },
7 | "extends": ["eslint:recommended", "plugin:astro/recommended"],
8 | "parserOptions": {
9 | "ecmaVersion": "latest",
10 | "sourceType": "module"
11 | },
12 | "overrides": [
13 | {
14 | "files": ["*.astro"],
15 | "parser": "astro-eslint-parser",
16 | "parserOptions": {
17 | "parser": "@typescript-eslint/parser",
18 | "extraFileExtensions": [".astro"]
19 | },
20 | "rules": {
21 | "astro/no-unused-define-vars-in-style": "error",
22 | "astro/no-conflict-set-directives": "error",
23 | "astro/no-unused-css-selector": "error",
24 | "astro/no-set-html-directive": "error"
25 | }
26 | },
27 | {
28 | "files": ["*.ts"],
29 | "parser": "@typescript-eslint/parser",
30 | "extends": ["plugin:@typescript-eslint/recommended"],
31 | "rules": {
32 | "@typescript-eslint/no-unused-vars": [
33 | "error",
34 | {
35 | "argsIgnorePattern": "^_",
36 | "destructuredArrayIgnorePattern": "^_"
37 | }
38 | ],
39 | "@typescript-eslint/no-non-null-assertion": "off"
40 | }
41 | },
42 | {
43 | "files": ["*.d.ts"],
44 | "rules": {
45 | "@typescript-eslint/triple-slash-reference": "off"
46 | }
47 | },
48 | {
49 | "files": ["**/*.astro/*.js", "*.astro/*.js"],
50 | "parser": "@typescript-eslint/parser"
51 | }
52 | ]
53 | }
54 |
--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: [pauchiner]
2 |
--------------------------------------------------------------------------------
/.github/assets/logo-dark.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/.github/assets/logo-light.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/.github/assets/showcase-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pauchiner/astro-command-palette/c8e292815e0c62ea6e9eaa05b0f133801a0d4868/.github/assets/showcase-dark.png
--------------------------------------------------------------------------------
/.github/assets/showcase-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pauchiner/astro-command-palette/c8e292815e0c62ea6e9eaa05b0f133801a0d4868/.github/assets/showcase-light.png
--------------------------------------------------------------------------------
/.github/assets/showcase.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pauchiner/astro-command-palette/c8e292815e0c62ea6e9eaa05b0f133801a0d4868/.github/assets/showcase.png
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | node_modules
5 | /.pnp
6 | .pnp.js
7 | .yarn/install-state.gz
8 |
9 | # testing
10 | coverage
11 |
12 | # next.js
13 | .next/
14 | out/
15 |
16 | # astro
17 | .astro
18 | coverage
19 |
20 | # production
21 | build
22 | dist
23 |
24 | # misc
25 | .DS_Store
26 | *.pem
27 |
28 | # debug
29 | npm-debug.log*
30 | yarn-debug.log*
31 | yarn-error.log*
32 |
33 | # local env files
34 | .env*.local
35 |
36 | # vercel
37 | .vercel
38 | .turbo
39 |
40 | # typescript
41 | *.tsbuildinfo
42 | next-env.d.ts
43 |
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | 20
2 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | pnpm-lock.yaml
2 |
--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": ["prettier-plugin-astro"],
3 | "bracketSameLine": true,
4 | "bracketSpacing": false,
5 | "trailingComma": "none",
6 | "arrowParens": "avoid",
7 | "singleQuote": true,
8 | "tabWidth": 2,
9 | "semi": true
10 | }
11 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | ## Code of Conduct
2 |
3 | ### Our Pledge
4 |
5 | In the interest of fostering an open and welcoming environment, we as
6 | contributors and maintainers pledge to making participation in our project and
7 | our community a harassment-free experience for everyone, regardless of age, body
8 | size, disability, ethnicity, gender identity and expression, level of experience,
9 | nationality, personal appearance, race, religion, or sexual identity and
10 | orientation.
11 |
12 | ### Our Standards
13 |
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 |
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 |
23 | Examples of unacceptable behavior by participants include:
24 |
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 | advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 | address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 | professional setting
33 |
34 | ### Our Responsibilities
35 |
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 |
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 |
46 | ### Scope
47 |
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 |
55 | ### Enforcement
56 |
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at pauchiner@icloud.com. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 |
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 |
68 | ### Attribution
69 |
70 | This Code of Conduct is adapted from the [Contributor Covenant - Code of Conduct v1.4](http://contributor-covenant.org/version/1/4).
71 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to astro-command-palette
2 |
3 | When contributing to this repository, please first discuss the change you wish to make via issue,
4 | email, or any other method with the owners of this repository before making a change.
5 |
6 | Please note we have a code of conduct, please follow it in all your interactions with the project.
7 |
8 | ## Pull Request Process
9 |
10 | 1. Ensure any install or build dependencies are removed before the end of the layer when doing a
11 | build.
12 |
13 | 2. Update the README.md with details of changes to the interface, this includes new environment
14 | variables, new packages, useful file locations and container parameters.
15 |
16 | 3. You may merge the Pull Request in once you have the sign-off of two other developers, or if you
17 | do not have permission to do that, you may request the second reviewer to merge it for you.
18 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 Pau García Chiner
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | A minimal command palette for Astro with 0 dependencies.
7 |
8 |
9 |
10 |
11 | # Getting Started
12 |
13 | ## 🛠️ Installation
14 | ```bash
15 | npm install astro-command-palette
16 | ```
17 |
18 | ## 🚀 Usage
19 | Just by importing the component and putting inside the body, your command palette is already working.
20 |
21 | ```astro
22 | ---
23 | import CommandPalette from 'astro-command-palette';
24 | ---
25 |
26 |
27 |
28 |
29 | ```
30 |
31 | ### 💨 Creating Actions
32 | ```html
33 |
51 | ```
52 |
53 | ### 📄 Creating Pages
54 | You can also define nested pages with more actions:
55 |
56 | ```html
57 |
69 | ```
70 |
71 |
72 | ### 🎨 Styling
73 | At the moment the only way to customize the command palette is with css variables:
74 |
75 | | CSS Variable | Description |
76 | | ----------------------------------------- | ------------------------------------------------------- |
77 | | `--command-palette-bg-color` | Background color of the command palette modal |
78 | | `--command-palette-border-radius` | Border radius of the command palette |
79 | | `--command-palette-border-color` | Border color of the command palette |
80 | | `--command-palette-backdrop-color` | Background color of the backdrop overlay |
81 | | `--command-palette-header-font-size` | Font size of the command palette header |
82 | | `--command-palette-header-bg-color` | Background color of the header |
83 | | `--command-palette-header-text-color` | Text color of the header |
84 | | `--command-palette-header-font-family` | Font family of the header |
85 | | `--command-palette-header-placeholder-color` | Text color of the placeholder text in the input field |
86 | | `--command-palette-icons-color` | Color of the icons in command items |
87 | | `--command-palette-items-selected` | Background color of selected items |
88 | | `--command-palette-items-font-size` | Font size of the command items |
89 | | `--command-palette-items-text-color` | Text color of the command items |
90 | | `--command-palette-items-font-family` | Font family of the command items |
91 | | `--command-palette-footer-bg-color` | Background color of the footer |
92 | | `--command-palette-keybinds-bg-color` | Background color of the keybinds section |
93 | | `--command-palette-footer-text-color` | Text color of the footer |
94 | | `--command-palette-footer-font-family` | Font family of the footer |
95 | | `--command-palette-keybinds-text-color` | Text color of the keybinds |
96 | | `--command-palette-keybinds-font-family` | Font family of the keybinds |
97 | | `--command-palette-keybinds-border-radius` | Border radius of the keybinds |
98 |
99 | ## 🤝 Contributing
100 |
101 | All contributions are welcome:
102 |
103 | [CONTRIBUTING.md](CONTRIBUTING.md)
104 |
105 | [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md)
106 |
107 |
108 |
3 | 
4 | 
8 | 
9 |