add basic integration in install docs

itaditya · Apr 3, 2022 · 595a4a9 · 595a4a9
1 parent aa32946
commit 595a4a9
Show file tree

Hide file tree

Showing 8 changed files with 136 additions and 6 deletions.
diff --git a/public/snippets/installation-define-actions.html b/public/snippets/installation-define-actions.html
@@ -0,0 +1,25 @@
+<pre class="shiki" style="background-color: #0d1117"><code><span class="line"><span style="color: #FF7B72">import</span><span style="color: #C9D1D9"> { defineAction } </span><span style="color: #FF7B72">from</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">&#39;solid-command-palette&#39;</span><span style="color: #C9D1D9">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color: #FF7B72">const</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">minimalAction</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> </span><span style="color: #D2A8FF">defineAction</span><span style="color: #C9D1D9">({</span></span>
+<span class="line"><span style="color: #C9D1D9">  id: </span><span style="color: #A5D6FF">&#39;minimal&#39;</span><span style="color: #C9D1D9">,</span></span>
+<span class="line"><span style="color: #C9D1D9">  title: </span><span style="color: #A5D6FF">&#39;Minimal Action&#39;</span><span style="color: #C9D1D9">,</span></span>
+<span class="line"><span style="color: #C9D1D9">  </span><span style="color: #D2A8FF">run</span><span style="color: #C9D1D9">: () </span><span style="color: #FF7B72">=&gt;</span><span style="color: #C9D1D9"> {</span></span>
+<span class="line"><span style="color: #C9D1D9">    console.</span><span style="color: #D2A8FF">log</span><span style="color: #C9D1D9">(</span><span style="color: #A5D6FF">&#39;ran minimal action&#39;</span><span style="color: #C9D1D9">);</span></span>
+<span class="line"><span style="color: #C9D1D9">  },</span></span>
+<span class="line"><span style="color: #C9D1D9">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color: #FF7B72">const</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">incrementCounterAction</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> </span><span style="color: #D2A8FF">defineAction</span><span style="color: #C9D1D9">({</span></span>
+<span class="line"><span style="color: #C9D1D9">  id: </span><span style="color: #A5D6FF">&#39;increment-counter&#39;</span><span style="color: #C9D1D9">,</span></span>
+<span class="line"><span style="color: #C9D1D9">  title: </span><span style="color: #A5D6FF">&#39;Increment Counter by 1&#39;</span><span style="color: #C9D1D9">,</span></span>
+<span class="line"><span style="color: #C9D1D9">  subtitle: </span><span style="color: #A5D6FF">&#39;Press CMD + E to trigger this.&#39;</span><span style="color: #C9D1D9">,</span></span>
+<span class="line"><span style="color: #C9D1D9">  shortcut: </span><span style="color: #A5D6FF">&#39;$mod+e&#39;</span><span style="color: #C9D1D9">, </span><span style="color: #8B949E">// $mod = Command on Mac &amp; Control on Windows.</span></span>
+<span class="line"><span style="color: #C9D1D9">  </span><span style="color: #D2A8FF">run</span><span style="color: #C9D1D9">: ({ </span><span style="color: #FFA657">rootContext</span><span style="color: #C9D1D9"> }) </span><span style="color: #FF7B72">=&gt;</span><span style="color: #C9D1D9"> {</span></span>
+<span class="line"><span style="color: #C9D1D9">    rootContext.</span><span style="color: #D2A8FF">increment</span><span style="color: #C9D1D9">();</span></span>
+<span class="line"><span style="color: #C9D1D9">  },</span></span>
+<span class="line"><span style="color: #C9D1D9">});</span></span>
+<span class="line"></span>
+<span class="line"><span style="color: #FF7B72">export</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">const</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">actions</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> {</span></span>
+<span class="line"><span style="color: #C9D1D9">  [minimalAction.id]: minimalAction,</span></span>
+<span class="line"><span style="color: #C9D1D9">  [incrementCounterAction.id]: incrementCounterAction,</span></span>
+<span class="line"><span style="color: #C9D1D9">};</span></span>
+<span class="line"></span></code></pre>
diff --git a/public/snippets/installation-integrate-components.html b/public/snippets/installation-integrate-components.html
@@ -0,0 +1,23 @@
+<pre class="shiki" style="background-color: #0d1117"><code><span class="line"><span style="color: #FF7B72">import</span><span style="color: #C9D1D9"> { Root, CommandPalette } </span><span style="color: #FF7B72">from</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">&#39;solid-command-palette&#39;</span><span style="color: #C9D1D9">;</span></span>
+<span class="line"><span style="color: #FF7B72">import</span><span style="color: #C9D1D9"> { actions } </span><span style="color: #FF7B72">from</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">&#39;./actions&#39;</span><span style="color: #C9D1D9">;</span></span>
+<span class="line"><span style="color: #FF7B72">import</span><span style="color: #C9D1D9"> </span><span style="color: #A5D6FF">&#39;solid-command-palette/pkg-dist/style.css&#39;</span><span style="color: #C9D1D9">;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color: #FF7B72">const</span><span style="color: #C9D1D9"> </span><span style="color: #D2A8FF">App</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> () </span><span style="color: #FF7B72">=&gt;</span><span style="color: #C9D1D9"> {</span></span>
+<span class="line"><span style="color: #C9D1D9">  </span><span style="color: #FF7B72">const</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">actionsContext</span><span style="color: #C9D1D9"> </span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9"> {</span></span>
+<span class="line"><span style="color: #C9D1D9">    </span><span style="color: #D2A8FF">increment</span><span style="color: #C9D1D9">() {</span></span>
+<span class="line"><span style="color: #C9D1D9">      console.</span><span style="color: #D2A8FF">log</span><span style="color: #C9D1D9">(</span><span style="color: #A5D6FF">&#39;increment count state by 1&#39;</span><span style="color: #C9D1D9">);</span></span>
+<span class="line"><span style="color: #C9D1D9">    },</span></span>
+<span class="line"><span style="color: #C9D1D9">  };</span></span>
+<span class="line"></span>
+<span class="line"><span style="color: #C9D1D9">  </span><span style="color: #FF7B72">return</span><span style="color: #C9D1D9"> (</span></span>
+<span class="line"><span style="color: #C9D1D9">    &lt;</span><span style="color: #7EE787">div</span><span style="color: #C9D1D9"> </span><span style="color: #79C0FF">class</span><span style="color: #FF7B72">=</span><span style="color: #A5D6FF">&quot;my-app&quot;</span><span style="color: #C9D1D9">&gt;</span></span>
+<span class="line"><span style="color: #C9D1D9">      &lt;</span><span style="color: #7EE787">Root</span></span>
+<span class="line"><span style="color: #C9D1D9">        </span><span style="color: #79C0FF">actions</span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9">{actions}</span></span>
+<span class="line"><span style="color: #C9D1D9">        </span><span style="color: #79C0FF">actionsContext</span><span style="color: #FF7B72">=</span><span style="color: #C9D1D9">{actionsContext}</span></span>
+<span class="line"><span style="color: #C9D1D9">      &gt;</span></span>
+<span class="line"><span style="color: #C9D1D9">        &lt;</span><span style="color: #7EE787">CommandPalette</span><span style="color: #C9D1D9"> /&gt;</span></span>
+<span class="line"><span style="color: #C9D1D9">      &lt;/</span><span style="color: #7EE787">Root</span><span style="color: #C9D1D9">&gt;</span></span>
+<span class="line"><span style="color: #C9D1D9">    &lt;/</span><span style="color: #7EE787">div</span><span style="color: #C9D1D9">&gt;</span></span>
+<span class="line"><span style="color: #C9D1D9">  );</span></span>
+<span class="line"><span style="color: #C9D1D9">};</span></span>
+<span class="line"></span></code></pre>
diff --git a/public/snippets/installation-packages.html b/public/snippets/installation-packages.html
@@ -0,0 +1,6 @@
+<pre class="shiki" style="background-color: #0d1117"><code><span class="line"><span style="color: #8B949E"># Core Library</span></span>
+<span class="line"><span style="color: #C9D1D9">npm install solid-command-palette</span></span>
+<span class="line"></span>
+<span class="line"><span style="color: #8B949E"># Peer Dependencies</span></span>
+<span class="line"><span style="color: #C9D1D9">npm install solid-transition-group tinykeys fuse.js</span></span>
+<span class="line"></span></code></pre>
diff --git a/snippets/installation-define-actions.snippet.tsx 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
@@ -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 (
+    <div class="my-app">
+      <Root
+        actions={actions}
+        actionsContext={actionsContext}
+      >
+        <CommandPalette />
+      </Root>
+    </div>
+  );
+};
diff --git a/snippets/installation-setup.snippet.sh → snippets/installation-packages.snippet.sh b/snippets/installation-setup.snippet.sh → 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
@@ -4,10 +4,22 @@ import docsStyles from '../docsUtils.module.css';
 
 const InstallationView: Component = () => {
   return (
-    <section class={docsStyles.section}>
-      <h2>Installation</h2>
-      <Snippet snippetId="installation-setup" />
-    </section>
+    <div class={docsStyles.section}>
+      <section class={docsStyles.section}>
+        <h2>Install Packages</h2>
+        <Snippet snippetId="installation-packages" />
+      </section>
+      <br />
+      <section class={docsStyles.section}>
+        <h2>Define Actions</h2>
+        <Snippet snippetId="installation-define-actions" />
+      </section>
+      <br />
+      <section class={docsStyles.section}>
+        <h2>Integrate with Components</h2>
+        <Snippet snippetId="installation-integrate-components" />
+      </section>
+    </div>
   );
 };
 

diff --git 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.
       </p>
+
+      <h3>Live Example</h3>
+      <div>
+        <a
+          href={`https://stackblitz.com/edit/${embedExampleData.projectId}?file=${embedExampleData.initialFile}`}
+          class={utilStyles.demoAction}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Open in Stackblitz
+        </a>
+      </div>
       <div class={docsStyles.embedWrapper}>
         <div ref={exampleElem} />
       </div>