chore: look & feel demo website

steve-lebleu · Mar 27, 2024 · 0141c63 · 0141c63
1 parent 75fe917
commit 0141c63
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 75 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -23,6 +23,8 @@ jobs:
         run:  npm i
       - name: Build local project
         run:  npm run build
+      - name: Build production
+        run:  npm run prod
       - name: Lint
         run:  npm run lint:js
       - name: Upload artifact

diff --git a/demo/css/kompletr.demo.min.css b/demo/css/kompletr.demo.min.css
diff --git a/demo/js/kompletr.min.js b/demo/js/kompletr.min.js
diff --git a/dist/js/kompletr.min.js b/dist/js/kompletr.min.js
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/src/index.html b/src/index.html
@@ -24,16 +24,16 @@
 <body>
 
   <header>
-    <p><a href="">Documentation</a></p>
+    <p><a href="https://kompletr.konfer.be/docs">Documentation</a></p>
 
-    <a href="https://github.com/steve-lebleu/kompletr.js" rel="noopener" target="_blank" class="github-corner" aria-label="View source on Github">
+    <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>
-    <h1>Kømpletr</h1>
-    <cite>10kb of vanilla lightweight to add highly featured and eco friendly autocomplete on your pages.</cite>
+    <img src="https://cdn.konfer.be/images/kompletr/logo-kompletr-dark.png" alt="Logo Kompletr" />
+    <cite>10kb of vanilla lightweight to add simple & efficient autocomplete on your pages.</cite>
   </hgroup>
 
   <div id="searcher" class="form--search">
@@ -61,65 +61,57 @@ <h1>Kømpletr</h1>
       }
       document.addEventListener('DOMContentLoaded', fn);
     };
+
     ready(() => {
       const input = document.getElementById('auto-complete');
 
-      // --- Way 1
-
       const headers = new Headers();
-        headers.append('content-type', 'application/x-www-form-urlencoded');
-        headers.append('method', 'GET');
+      headers.append('content-type', 'application/x-www-form-urlencoded');
+      headers.append('method', 'GET');
 
-        fetch(`./data.json`, headers)
-          .then(result => result.json())
-          .then(data => {
-            kompletr({
-              input,
-              data,
-              options: {
-                animation: {
-                  type: 'slideDown',
-                  duration: 1000
-                },
-                theme: 'dark',  
-                fieldsToDisplay: [
-                  'Name',
-                  'CountryCode',
-                  'Population'
-                ],
-                maxResults: 5,
-                propToMapAsValue: 'Name',
-                startQueriyngFromChar: 2,
-                filterOn: 'prefix',
-                // cache: 50000
-              },
-              /*onKeyup: async function (value, done) {
-                console.log('cb.onKeyup ', value);
-                console.log('I\'m doing scrappy stuffs with the data!');
-                const result = await fetch(`http://localhost:3000/api?q=${value}`, headers);
-                const d = await result.json();
-                console.log('DATA', d)
-                // data = ['string', 'string', 'string'];
-                done(d);
-              },*/
-              onSelect: (selected) => {
-                console.log('cb.onSelect', selected);
+      fetch(`./data.json`, headers)
+        .then(result => result.json())
+        .then(data => {
+          kompletr({
+            input,
+            data,
+            options: {
+              animation: {
+                type: 'slideDown',
+                duration: 1000
               },
-              onError: (error) => {
-                console.log('cb.onError ', error);
-              },
-            });
-          })
-          .catch(e => {
-            console.log(e);
+              theme: 'dark',  
+              fieldsToDisplay: [
+                'Name',
+                'CountryCode',
+                'Population'
+              ],
+              maxResults: 5,
+              propToMapAsValue: 'Name',
+              startQueriyngFromChar: 2,
+              filterOn: 'prefix',
+              // cache: 50000
+            },
+            /*onKeyup: async function (value, done) {
+              console.log('cb.onKeyup ', value);
+              console.log('I\'m doing scrappy stuffs with the data!');
+              const result = await fetch(`http://localhost:3000/api?q=${value}`, headers);
+              const d = await result.json();
+              console.log('DATA', d)
+              // data = ['string', 'string', 'string'];
+              done(d);
+            },*/
+            onSelect: (selected) => {
+              console.log('cb.onSelect', selected);
+            },
+            onError: (error) => {
+              console.log('cb.onError ', error);
+            },
           });
-
-      // --- Way 2.1
-      // kompletr(input, d, cbs, options);
-
-      // --- Way 2.2
-      // kompletr('auto-complete', d, cbs, options);
-
+        })
+        .catch(e => {
+          console.log(e);
+        });
     });
   </script>
 

diff --git a/src/sass/kompletr.demo.scss b/src/sass/kompletr.demo.scss
@@ -8,6 +8,12 @@ html {
   font-size: $font-size-base;
 }
 
+header {
+  p:first-child {
+    text-align: center;
+  }
+}
+
 .github-corner {
   position: fixed;
   right: 0;
@@ -22,6 +28,10 @@ html {
     fill: #333;
     fill: var(--theme-color, #333);
   }
+  &:hover {
+    transform: scale(1.1);
+    cursor: pointer;
+  }
 }
 
 body {
@@ -37,12 +47,12 @@ body {
 hgroup {
   margin: 0 auto 40px auto;
   text-align: center;
-}
 
-h1 {
-  margin: 3rem auto 0 auto;
-  font-family: $font-title;
-  font-size: 7rem;
+  img {
+    margin: 100px auto 20px auto;
+    display: block;
+    max-width: 500px;
+  }
 }
 
 a {

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,18 +1,18 @@
 import path from 'path';
 import * as url from 'url';
-import DashboardPlugin from "webpack-dashboard/plugin/index.js";
+import DashboardPlugin from 'webpack-dashboard/plugin/index.js';
 
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 
 export default {
-  mode: "development",
-  devtool: "source-map",
+  mode: 'development',
+  devtool: 'source-map',
   entry: './src/js/index.js',
   module: {
     rules: [
       {
         test: /\.html$/i,
-        loader: "html-loader",
+        loader: 'html-loader',
       },
     ],
   },

diff --git a/webpack.config.prod.js b/webpack.config.prod.js
@@ -5,7 +5,7 @@ const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 
 export default [
   {
-    mode: "production",
+    mode: 'production',
     entry: './src/js/index.js',
     experiments: {
       outputModule: true,
@@ -14,12 +14,12 @@ export default [
       path: path.resolve(__dirname, 'dist/js'),
       filename: 'kompletr.min.js',
       library: {
-        type: "module",
+        type: 'module',
       },
     },
   },
   {
-    mode: "production",
+    mode: 'production',
     entry: './src/js/index.js',
     experiments: {
       outputModule: true,
@@ -28,7 +28,7 @@ export default [
       path: path.resolve(__dirname, 'demo/js'),
       filename: 'kompletr.min.js',
       library: {
-        type: "module",
+        type: 'module',
       },
     },
   }