add demo component

fastrepl · Jul 23, 2024 · 4ab5b81 · 4ab5b81
1 parent 6bdd94f
commit 4ab5b81
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 33 deletions.
diff --git a/js/apps/docs/components/Demo.vue b/js/apps/docs/components/Demo.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+
+onMounted(async () => {
+  import("@getcanary/web/components/canary-styles-default");
+  import("@getcanary/web/components/canary-provider-mock");
+  import("@getcanary/web/components/canary-trigger-searchbar");
+  import("@getcanary/web/components/canary-content");
+  import("@getcanary/web/components/canary-search");
+  import("@getcanary/web/components/canary-search-input");
+  import("@getcanary/web/components/canary-search-results");
+  import("@getcanary/web/components/canary-ask");
+  import("@getcanary/web/components/canary-ask-input");
+  import("@getcanary/web/components/canary-ask-results");
+  import("@getcanary/web/components/canary-modal");
+});
+
+import Slider from "./Slider.vue";
+import ThemeSwitch from "vitepress/dist/client/theme-default/components/VPSwitchAppearance.vue";
+
+const chroma = ref(0.1);
+const hue = ref(250);
+
+watch(
+  [chroma, hue],
+  ([c, h]) => {
+    document.documentElement.style.setProperty("--canary-color-primary-c", c);
+    document.documentElement.style.setProperty("--canary-color-primary-h", h);
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="flex flex-row gap-4 mb-6">
+    <Slider
+      :min="0"
+      :max="0.3"
+      :step="0.001"
+      :value="chroma"
+      @change="chroma = $event"
+    />
+    <Slider :min="0" :max="360" :step="1" :value="hue" @change="hue = $event" />
+    <ThemeSwitch />
+  </div>
+
+  <canary-provider-mock>
+    <div class="flex flex-col w-full items-center justify-center gap-4">
+      <canary-modal>
+        <canary-trigger-searchbar slot="trigger"></canary-trigger-searchbar>
+        <canary-content slot="content">
+          <canary-search slot="search">
+            <canary-search-input slot="input"></canary-search-input>
+            <canary-search-results slot="results"></canary-search-results>
+          </canary-search>
+          <canary-ask slot="ask">
+            <canary-ask-input slot="input"></canary-ask-input>
+            <canary-ask-results slot="results"></canary-ask-results>
+          </canary-ask>
+        </canary-content>
+      </canary-modal>
+
+      <canary-content query="why use Canary?">
+        <canary-search slot="search">
+          <canary-search-input slot="input"></canary-search-input>
+          <canary-search-results slot="results"></canary-search-results>
+        </canary-search>
+        <canary-ask slot="ask">
+          <canary-ask-input slot="input"></canary-ask-input>
+          <canary-ask-results slot="results"></canary-ask-results>
+        </canary-ask>
+      </canary-content>
+    </div>
+  </canary-provider-mock>
+</template>
diff --git a/js/apps/docs/components/Hero.vue b/js/apps/docs/components/Hero.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const CLOUD_URL = "https://cloud.getcanary.dev";
+const GITHUB_URL = "https://github.com/fastrepl/canary";
 </script>
 
 <template>
@@ -21,12 +21,14 @@ const CLOUD_URL = "https://cloud.getcanary.dev";
               </p>
               <div class="mt-10 flex items-center justify-center gap-x-6">
                 <a
-                  :href="CLOUD_URL"
+                  href="/docs/guide/what-is-canary"
                   class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                 >
                   Get started
                 </a>
-                <a href="/docs" class="hover:underline">Learn more →</a>
+                <a :href="GITHUB_URL" class="hover:underline"
+                  >⭐ Star us on GitHub →</a
+                >
               </div>
             </div>
 

diff --git a/js/apps/docs/components/Home.vue b/js/apps/docs/components/Home.vue
@@ -14,30 +14,16 @@ onMounted(async () => {
 });
 
 import Hero from "./Hero.vue";
+import Demo from "./Demo.vue";
 import Pricing from "./Pricing.vue";
 </script>
 
 <template>
-  <main class="flex flex-col items-center justify-center">
-    <Hero />
-
-    <div class="flex w-full justify-center">
-      <canary-styles-default framework="vitepress">
-        <canary-provider-mock>
-          <canary-content query="why use Canary?">
-            <canary-search slot="search">
-              <canary-search-input slot="input"></canary-search-input>
-              <canary-search-results slot="results"></canary-search-results>
-            </canary-search>
-            <canary-ask slot="ask">
-              <canary-ask-input slot="input"></canary-ask-input>
-              <canary-ask-results slot="results"></canary-ask-results>
-            </canary-ask>
-          </canary-content>
-        </canary-provider-mock>
-      </canary-styles-default>
-    </div>
-
-    <Pricing />
-  </main>
+  <canary-styles-default framework="vitepress">
+    <main class="flex flex-col items-center justify-center">
+      <Hero />
+      <Demo />
+      <Pricing />
+    </main>
+  </canary-styles-default>
 </template>
diff --git a/js/apps/docs/components/Pricing.vue b/js/apps/docs/components/Pricing.vue
@@ -94,10 +94,8 @@ const totalPrice = computed(
           </div>
         </div>
 
-        <div
-          class="w-full max-w-[400px] card border border-base-content/10 p-3 shadow-sm"
-        >
-          <div class="card px-6 py-2 text-base-content">
+        <div class="w-full max-w-[400px] border p-3 shadow-sm rounded-lg">
+          <div class="px-6 py-2 text-base-content">
             <h3 class="text-xl font-semibold text-primary">Hosted</h3>
             <p class="mt-4 flex items-baseline">
               <span class="text-5xl font-bold tracking-tight text-primary">
@@ -106,7 +104,11 @@ const totalPrice = computed(
               <span class="ml-1 text-xl font-semibold">/month</span>
             </p>
 
-            <button class="mt-6 btn btn-primary btn-block">Get Started</button>
+            <button
+              class="mt-6 rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            >
+              Get Started
+            </button>
           </div>
         </div>
       </div>

diff --git a/js/packages/web/src/canary-ask.ts b/js/packages/web/src/canary-ask.ts
@@ -16,7 +16,7 @@ export class CanaryAsk extends LitElement {
   mode!: ModeContext;
 
   render() {
-    return this.mode.current === "Ask"
+    return this.mode?.current === "Ask"
       ? html`
           <div class="container">
             <div class="input-wrapper">

diff --git a/js/packages/web/src/canary-content.ts b/js/packages/web/src/canary-content.ts
@@ -83,7 +83,6 @@ export class CanaryContent extends LitElement {
       return;
     }
 
-    // ? is added to prevent 'undefined' error we had in the past
     if (this.mode?.current === "Search") {
       this.mode = { ...this.mode, current: Mode.Ask };
     } else {

diff --git a/js/packages/web/src/canary-search.ts b/js/packages/web/src/canary-search.ts
@@ -16,7 +16,7 @@ export class CanarySearch extends LitElement {
   mode!: ModeContext;
 
   render() {
-    return this.mode.current === "Search"
+    return this.mode?.current === "Search"
       ? html`
           <div class="container">
             <div class="input-wrapper">