diff --git a/public/snippets/installation-define-actions.html b/public/snippets/installation-define-actions.html
new file mode 100644
index 0000000..37f1f6e
--- /dev/null
+++ b/public/snippets/installation-define-actions.html
@@ -0,0 +1,25 @@
+import { defineAction } from 'solid-command-palette';
+
+const minimalAction = defineAction({
+ id: 'minimal',
+ title: 'Minimal Action',
+ run: () => {
+ console.log('ran minimal action');
+ },
+});
+
+const incrementCounterAction = defineAction({
+ id: 'increment-counter',
+ title: 'Increment Counter by 1',
+ subtitle: 'Press CMD + E to trigger this.',
+ shortcut: '$mod+e', // $mod = Command on Mac & Control on Windows.
+ run: ({ rootContext }) => {
+ rootContext.increment();
+ },
+});
+
+export const actions = {
+ [minimalAction.id]: minimalAction,
+ [incrementCounterAction.id]: incrementCounterAction,
+};
+
\ No newline at end of file
diff --git a/public/snippets/installation-integrate-components.html b/public/snippets/installation-integrate-components.html
new file mode 100644
index 0000000..9ed75b0
--- /dev/null
+++ b/public/snippets/installation-integrate-components.html
@@ -0,0 +1,23 @@
+import { Root, CommandPalette } from 'solid-command-palette';
+import { actions } from './actions';
+import 'solid-command-palette/pkg-dist/style.css';
+
+const App = () => {
+ const actionsContext = {
+ increment() {
+ console.log('increment count state by 1');
+ },
+ };
+
+ return (
+ <div class="my-app">
+ <Root
+ actions={actions}
+ actionsContext={actionsContext}
+ >
+ <CommandPalette />
+ </Root>
+ </div>
+ );
+};
+
\ No newline at end of file
diff --git a/public/snippets/installation-packages.html b/public/snippets/installation-packages.html
new file mode 100644
index 0000000..15b6331
--- /dev/null
+++ b/public/snippets/installation-packages.html
@@ -0,0 +1,6 @@
+# Core Library
+npm install solid-command-palette
+
+# Peer Dependencies
+npm install solid-transition-group tinykeys fuse.js
+
\ No newline at end of file
diff --git a/snippets/installation-define-actions.snippet.tsx b/snippets/installation-define-actions.snippet.tsx
new file mode 100644
index 0000000..998aea9
--- /dev/null
+++ b/snippets/installation-define-actions.snippet.tsx
@@ -0,0 +1,24 @@
+import { defineAction } from 'solid-command-palette';
+
+const minimalAction = defineAction({
+ id: 'minimal',
+ title: 'Minimal Action',
+ run: () => {
+ console.log('ran minimal action');
+ },
+});
+
+const incrementCounterAction = defineAction({
+ id: 'increment-counter',
+ title: 'Increment Counter by 1',
+ subtitle: 'Press CMD + E to trigger this.',
+ shortcut: '$mod+e', // $mod = Command on Mac & Control on Windows.
+ run: ({ rootContext }) => {
+ rootContext.increment();
+ },
+});
+
+export const actions = {
+ [minimalAction.id]: minimalAction,
+ [incrementCounterAction.id]: incrementCounterAction,
+};
diff --git a/snippets/installation-integrate-components.snippet.tsx b/snippets/installation-integrate-components.snippet.tsx
new file mode 100644
index 0000000..8baf57a
--- /dev/null
+++ b/snippets/installation-integrate-components.snippet.tsx
@@ -0,0 +1,22 @@
+import { Root, CommandPalette } from 'solid-command-palette';
+import { actions } from './actions';
+import 'solid-command-palette/pkg-dist/style.css';
+
+const App = () => {
+ const actionsContext = {
+ increment() {
+ console.log('increment count state by 1');
+ },
+ };
+
+ return (
+
+
+
+
+
+ );
+};
diff --git a/snippets/installation-setup.snippet.sh b/snippets/installation-packages.snippet.sh
similarity index 100%
rename from snippets/installation-setup.snippet.sh
rename to snippets/installation-packages.snippet.sh
diff --git a/src/app/views/docs/introduction/Installation.view.tsx b/src/app/views/docs/introduction/Installation.view.tsx
index af4c71e..cfffb4e 100644
--- a/src/app/views/docs/introduction/Installation.view.tsx
+++ b/src/app/views/docs/introduction/Installation.view.tsx
@@ -4,10 +4,22 @@ import docsStyles from '../docsUtils.module.css';
const InstallationView: Component = () => {
return (
-
+
+
+
+
+
+
+ Integrate with Components
+
+
+
);
};
diff --git a/src/app/views/docs/introduction/Overview.view.tsx b/src/app/views/docs/introduction/Overview.view.tsx
index dca7c8c..688de67 100644
--- a/src/app/views/docs/introduction/Overview.view.tsx
+++ b/src/app/views/docs/introduction/Overview.view.tsx
@@ -1,15 +1,21 @@
import { Component, onMount } from 'solid-js';
import sdk from '@stackblitz/sdk';
+import utilStyles from '../../../utils.module.css';
import docsStyles from '../docsUtils.module.css';
+const embedExampleData = {
+ projectId: 'solid-command-palette-example-lite',
+ initialFile: 'src/App.tsx',
+};
+
const OverviewView: Component = () => {
let exampleElem: HTMLDivElement;
onMount(() => {
- sdk.embedProjectId(exampleElem, 'solid-command-palette-example-lite', {
+ sdk.embedProjectId(exampleElem, embedExampleData.projectId, {
view: 'editor',
forceEmbedLayout: true,
- openFile: 'src/App.tsx',
+ openFile: embedExampleData.initialFile,
clickToLoad: true,
height: 600,
});
@@ -23,6 +29,18 @@ const OverviewView: Component = () => {
mouse around. Users can fuzzy search to find the action. If the action has a keyboard
shortcut then they can trigger it from anywhere. This increases their productivity by 10x.
+
+ Live Example
+