feat: branding

steve-lebleu · Mar 29, 2024 · 6ee9717 · 6ee9717
1 parent 64f23c7
commit 6ee9717
Show file tree

Hide file tree

Showing 18 changed files with 71 additions and 94 deletions.
diff --git a/demo/img/android-chrome-192x192.png b/demo/img/android-chrome-192x192.png
diff --git a/demo/img/android-chrome-256x256.png b/demo/img/android-chrome-256x256.png
diff --git a/demo/img/apple-touch-icon.png b/demo/img/apple-touch-icon.png
diff --git a/demo/img/browserconfig.xml b/demo/img/browserconfig.xml
diff --git a/demo/img/favicon-16x16.png b/demo/img/favicon-16x16.png
diff --git a/demo/img/favicon-32x32.png b/demo/img/favicon-32x32.png
diff --git a/demo/img/favicon.ico b/demo/img/favicon.ico
diff --git a/demo/img/mstile-150x150.png b/demo/img/mstile-150x150.png
diff --git a/demo/img/site.webmanifest b/demo/img/site.webmanifest
diff --git a/demo/index.html b/demo/index.html
@@ -18,10 +18,10 @@
       <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
     <![endif]-->
 
-    <link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
-    <link rel="manifest" href="/img/site.webmanifest">
+    <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.konfer.be/images/kompletr/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="https://cdn.konfer.be/images/kompletr/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="https://cdn.konfer.be/images/kompletr/favicon-16x16.png">
+    <link rel="manifest" href="https://cdn.konfer.be/images/kompletr/site.webmanifest">
     <meta name="msapplication-TileColor" content="#da532c">
     <meta name="theme-color" content="#ffffff">
 
@@ -30,16 +30,14 @@
 
   <body>
     <header>
-      <p><a href="https://kompletr.konfer.be/">Documentation</a></p>
-
       <a href="https://github.com/steve-lebleu/kompletr" rel="noopener" target="_blank" class="github-corner" aria-label="View source on Github">
         <svg viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg>
       </a>
     </header>
 
     <hgroup>
-      <img src="https://cdn.konfer.be/images/kompletr/logo-kompletr-dark.png" alt="Logo Kømpletr" />
-      <cite>10kb of vanilla lightweight for a simple & efficient autocomplete</cite>
+      <img src="https://cdn.konfer.be/images/kompletr/logo-kompletr-light.png" alt="Logo Kømpletr" />
+      <cite>10kb of vanilla lightweight for an efficient autocomplete</cite>
     </hgroup>
 
     <div id="searcher" class="form--search">

diff --git a/dist/main.js b/dist/main.js
diff --git a/dist/main.js.map b/dist/main.js.map
diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
@@ -4,9 +4,12 @@ import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
 // https://vitepress.dev/reference/site-config
 // https://vitepress.dev/reference/default-theme-config
 export default defineConfig({
-  title: "Kømpletr",
+  title: "Kømpletr - JS autocomplete library",
   description: "JS autocomplete library",
   themeConfig: {
+    head: [
+      ['link', { rel: 'icon', href: 'https://cdn.konfer.be/images/kompletr/favicon.ico' }],
+    ],
     logo: {
       light: 'https://cdn.konfer.be/images/kompletr/logo-kompletr-dark.png',
       dark: 'https://cdn.konfer.be/images/kompletr/logo-kompletr-light.png'

diff --git a/docs/index.md b/docs/index.md
@@ -3,8 +3,8 @@
 layout: home
 
 hero:
-  text: "JS autocomplete"
-  tagline: 10kb of vanilla lightweight for a simple & efficient autocomplete
+  text: "JS Autocompletion"
+  tagline: 10kb of vanilla lightweight for autocomplete
   image:
     light: 'https://cdn.konfer.be/images/kompletr/logo-kompletr-dark.png'
     dark: 'https://cdn.konfer.be/images/kompletr/logo-kompletr-light.png'
@@ -19,7 +19,7 @@ features:
   - icon: ✨
     title: Light
     details: Less than 10kb of Vanilla
-  - icon: 🚀
+  - icon: 🐰
     title: Performant
     details: Faster than the white rabbit
   - icon: 🍃

diff --git a/src/index.html b/src/index.html
@@ -23,16 +23,14 @@
 <body>
 
   <header>
-    <p><a href="https://kompletr.konfer.be/">Documentation</a></p>
-
     <a href="https://github.com/steve-lebleu/kompletr" rel="noopener" target="_blank" class="github-corner" aria-label="View source on Github">
       <svg viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg>
     </a>
   </header>
 
   <hgroup>
-    <img src="https://cdn.konfer.be/images/kompletr/logo-kompletr-dark.png" alt="Logo Kømpletr" />
-    <cite>10kb of vanilla lightweight for a simple & efficient autocomplete</cite>
+    <img src="https://cdn.konfer.be/images/kompletr/logo-kompletr-light.png" alt="Logo Kømpletr" />
+    <cite>10kb of vanilla lightweight for an efficient autocomplete</cite>
   </hgroup>
 
   <div id="searcher" class="form--search">

diff --git a/src/js/kompletr.js b/src/js/kompletr.js
@@ -57,7 +57,7 @@ export default class Kompletr {
       this.broadcaster.subscribe(event.selectDone, this.closeTheShop);
 
       this.broadcaster.listen(this.dom.input, 'keyup', this.suggest);
-      this.broadcaster.listen(this.dom.body, 'click', this.closeTheShop); // TODO: validate this because it can be called many times if many kompletr instances
+      this.broadcaster.listen(this.dom.body, 'click', this.closeTheShop);
 
       if(onKeyup || onSelect || onError) {
         this.callbacks = Object.assign(this.callbacks, { onKeyup, onSelect, onError });
@@ -103,7 +103,7 @@ export default class Kompletr {
   showResults = async ({ from, data }) => {
     this.props.data = data;
 
-    data = this.props.data.map((record, idx) => ({ idx, data: record }) ); // TODO: Check if we can avoid this shit
+    data = this.props.data.map((record, idx) => ({ idx, data: record }) ); // TODO: Check to avoid this
 
     if (!this.callbacks.onKeyup) {
       data = this.filter(data, this.dom.input.value);
@@ -197,21 +197,29 @@ export default class Kompletr {
    * @returns {Void}
    */
   navigate = (keyCode) => {
-    if (keyCode != 38 && keyCode != 40) {
-      return false;
-    }
+    try {
+      if (keyCode != 38 && keyCode != 40) {
+        return false;
+      }
+
+      if(this.props.pointer < -1 || this.props.pointer > this.dom.result.children.length - 1) {
+        return false;
+      }
+
+      if ((keyCode === 38 && this.props.pointer === 0) || (keyCode === 40 && this.props.pointer === this.dom.result.children.length - 1)) {
+        return false;
+      }
 
-    if(this.props.pointer < -1 || this.props.pointer > this.dom.result.children.length - 1) {
-      return false;
+      if (keyCode === 38 && this.props.pointer >= -1) {
+        this.props.pointer--;
+      } else if (keyCode === 40 && this.props.pointer < this.dom.result.children.length - 1) {
+        this.props.pointer++;
+      } 
+
+      this.dom.focus(this.props.pointer);
+    } catch(e) {
+      this.broadcaster.trigger(event.error, e);
     }
-
-    if (keyCode === 38 && this.props.pointer >= -1) {
-      this.props.pointer--;
-    } else if (keyCode === 40 && this.props.pointer < this.dom.result.children.length - 1) {
-      this.props.pointer++;
-    } 
-
-    this.dom.focus(this.props.pointer);
   };
 
   /**
@@ -223,9 +231,13 @@ export default class Kompletr {
    * 
    * @returns {Void}
    */
-  select = (idx = 0) => {  
-    this.dom.input.value = typeof this.props.data[idx] === 'object' ? this.props.data[idx][this.configuration.propToMapAsValue] : this.props.data[idx];
-    this.callbacks.onSelect && this.callbacks.onSelect(this.props.data[idx]);
-    this.broadcaster.trigger(event.selectDone);
+  select = (idx = 0) => {
+    try {
+      this.dom.input.value = typeof this.props.data[idx] === 'object' ? this.props.data[idx][this.configuration.propToMapAsValue] : this.props.data[idx];
+      this.callbacks.onSelect && this.callbacks.onSelect(this.props.data[idx]);
+      this.broadcaster.trigger(event.selectDone);
+    } catch(e) {
+      this.broadcaster.trigger(event.error, e);
+    }
   };
 }
diff --git a/src/sass/kompletr.demo.scss b/src/sass/kompletr.demo.scss
@@ -8,23 +8,6 @@ html {
   font-size: $font-size-base;
 }
 
-header {
-  p:first-child {
-    text-align: center;
-
-    a {
-      color: #333;
-      text-decoration: underline;
-      font-size: 0.9rem;
-      transition: all 0.4s ease-in-out;
-      &:hover {
-        color: #444;
-        text-decoration: none;
-      }
-    }
-  }
-}
-
 .github-corner {
   position: fixed;
   right: 0;
@@ -35,9 +18,9 @@ header {
   & svg {
     height: 80px;
     width: 80px;
-    color: #fff;
-    fill: #333;
-    fill: var(--theme-color, #333);
+    color: #333;
+    fill: #fff;
+    fill: var(--theme-color, #fff);
   }
   &:hover {
     transform: scale(1.1);
@@ -51,33 +34,35 @@ body {
   margin: 0;
   min-height: 100vh;
   font-family: $font-base;
-  background: rgb(2,0,36);
-  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(133,255,189,1) 50%, rgba(255,251,125,1) 100%);
+  background: #333;
 }
 
 hgroup {
-  margin: 0 auto 40px;
+  margin: 0 auto 60px;
   text-align: center;
 
   img {
-    margin: 100px auto 0;
+    margin: 90px auto 0;
     display: block;
     max-width: 500px;
   }
 
   cite {
-    color: #444;
+    color: #fff;
+    z-index: 999999999;
+    position: relative;
   }
 }
 
 a {
-  color: #333;
+  color: #2cc1fb;
 }
 
 footer {
   margin-top: auto;
-  color: #333;
+  color: #fff;
   text-align: center;
+  font-size: 0.9em;
 }
 
 ////
@@ -91,6 +76,11 @@ footer {
     max-width: 400px;
     position: relative;
     margin: 0 auto;
+
+    -webkit-box-shadow:0px 0px 105px 45px rgba(44,193,251,0.9);
+    -moz-box-shadow: 0px 0px 105px 45px rgba(44,193,251,0.9);
+    box-shadow: 0px 0px 105px 45px rgba(44,193,251,0.9);
+
     @media (max-width: 480px) {
       width: 90%;
     }
@@ -137,7 +127,7 @@ footer {
     border-right: none;
 
     &:last-child {
-      border-bottom: none;
+      border-bottom: none !important;
     }
 
     &:hover, &.focus {

diff --git a/src/sass/kompletr.scss b/src/sass/kompletr.scss
@@ -57,7 +57,7 @@
     border-right: none;
 
     &:last-child {
-      border-bottom: none;
+      border-bottom: none !important;
     }
 
     &:hover, &.focus {