feat: branding details

.github/workflows/release.yml

@@ -35,7 +35,7 @@ jobs:
             build
           retention-days: 3
   unit-tests:
-    name: Unit Tests
+    name: UT's
     runs-on: ubuntu-latest
     needs: [ build ]
     env:
@@ -60,7 +60,7 @@ jobs:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           path-to-lcov: ./build/code-coverage/lcov.info
   e2e-tests:
-    name: E2E Tests
+    name: E2E
     runs-on: ubuntu-latest
     needs: [ build ]
     env:
@@ -96,7 +96,7 @@ jobs:
             build
           retention-days: 3
   release-github:
-    name: Release on Github
+    name: Github release
     runs-on: ubuntu-latest
     needs: [ unit-tests, e2e-tests ]
     steps:
@@ -118,7 +118,7 @@ jobs:
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
   release-npm:
-    name: Release on NPM registry
+    name: NPM release
     runs-on: ubuntu-latest
     needs: [ unit-tests, e2e-tests ]
     steps:
@@ -143,12 +143,12 @@ jobs:
         with:
           name: build-files
           path: dist
-      - name: Release on NPM
+      - name: Create NPM release
         run: npm ci & npm publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.KONFER_NPM_TOKEN }}
-  deploy-demo:
-    name: Deploy demo website
+  deploy:
+    name: Deploy
     runs-on: ubuntu-latest
     needs: [ release-github, release-npm ]
     steps:
@@ -168,36 +168,17 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
       - name: Build demo
         run: npm run demo
-      - name: Copy files using SCP
+      - name: Deploy demo using SCP
         uses: garygrossgarten/github-action-scp@release
         with:
           local: demo
           remote: ${{ vars.KONFER_SSH_TARGET }}
           host: ${{ secrets.KONFER_SSH_HOST }}
           username: ${{ secrets.KONFER_SSH_USER }}
           password: ${{ secrets.KONFER_SSH_PWD }}
-  deploy-docs:
-    name: Deploy documentation website
-    runs-on: ubuntu-latest
-    needs: [ deploy-demo ]
-    steps:
-      - name: Cache dependencies
-        uses: actions/cache@v2
-        with:
-          path: '**/node_modules'
-          key: node-modules-${{ hashfiles('**/package-lock.json') }}
-      - name: Github checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-      - name: Setup node.js environment
-        uses: actions/setup-node@v4
-        with:
-          node-version: '18.19.0'
-          registry-url: 'https://registry.npmjs.org'
       - name: Build documentation
         run: docs:build
-      - name: Copy files using SCP
+      - name: Deploy documentation using SCP
         uses: garygrossgarten/github-action-scp@release
         with:
           local: docs

.npmignore

@@ -8,11 +8,17 @@
 # Node modules, can be retrieved by npm
 node_modules
 
-# Retrieved by bower
-src
-
 # E2E tests
 cypress
 
 # Github workflows
-.github
+.github
+
+# Build files
+build
+
+# Demo files
+demo
+
+# Docs files
+docs

README.md

@@ -1,12 +1,12 @@
-# Kømpletr - Vanilla JS autocompletion library
+# Kømpletr - JS autocompletion
 
 ![Github action workflow status](https://github.com/steve-lebleu/kompletr/actions/workflows/build.yml/badge.svg?branch=master)
 [![Coverage Status](https://coveralls.io/repos/github/steve-lebleu/kompletr/badge.svg?branch=master)](https://coveralls.io/github/steve-lebleu/kompletr?branch=master)
 [![CodeFactor](https://www.codefactor.io/repository/github/steve-lebleu/kompletr/badge)](https://www.codefactor.io/repository/github/steve-lebleu/kompletr)
 ![GitHub Release](https://img.shields.io/github/v/release/steve-lebleu/kompletr?logo=Github)
 [![GPL Licence](https://badges.frapsoft.com/os/gpl/gpl.svg?v=103)](https://github.com/steve-lebleu/kompletr/blob/master/LICENSE)
 
-*10kb of lightweight vanilla to add simple & efficient autocomplete.*
+*10kb of vanilla lightweight for a simple & efficient autocomplete*
 
 ## Installation
 

demo/img/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

demo/img/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

demo/index.html

@@ -2,7 +2,7 @@
 <html>
 
   <head lang="en">
-    <title>Vanilla autocomplete module - Kømpletr.js</title>
+    <title>Kømpletr - JS autocomplete</title>
 
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -18,21 +18,28 @@
       <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">
+    <meta name="msapplication-TileColor" content="#da532c">
+    <meta name="theme-color" content="#ffffff">
+
     <script type="module" src="./js/kompletr.min.js"></script>
   </head>
 
   <body>
     <header>
-      <p style="text-align: center;"><a href="">Documentation</a></p>
-
-      <a href="https://github.com/steve-lebleu/kompleter.js" target="_blank" class="github-corner" aria-label="View source on Github">
+      <p><a href="https://kompletr.konfer.be/docs">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>
-      <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 Kømpletr" />
+      <cite>10kb of vanilla lightweight for a simple & efficient autocomplete</cite>
     </hgroup>
 
     <div id="searcher" class="form--search">

docs/.vitepress/config.js

@@ -4,13 +4,18 @@ import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: "Kømpletr",
-  description: "A vanilla JS autocomplete library",
+  description: "JS autocomplete library",
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
+    logo: {
+      light: 'https://cdn.konfer.be/images/kompletr/logo-kompletr-dark.png',
+      dark: 'https://cdn.konfer.be/images/kompletr/logo-kompletr-light.png'
+    },
+    siteTitle: false,
     nav: [
       { text: 'Home', link: '/' },
       { text: 'Guide', link: '/guide' },
-      { text: 'Demo', link: '/demo' },
+      { text: 'Demo', link: 'https://kompletr.konfer.be' },
     ],
 
     sidebar: {
@@ -48,13 +53,12 @@ export default defineConfig({
 
     socialLinks: [
       { icon: 'github', link: 'https://github.com/steve-lebleu/kompletr' },
-      { icon: 'npm', link: 'https://github.com/steve-lebleu/kompletr' },
-      { icon: 'slack', link: 'https://github.com/steve-lebleu/kompletr' },
+      { icon: 'npm', link: 'https://www.npmjs.com/package/kompletr' },
     ],
 
     footer: {
-      message: 'Released under the MIT License.',
-      copyright: 'Copyright © 2019-present Evan You'
+      message: 'Released under the GPL License.',
+      copyright: 'Copyright © 2024-present Konfer'
     }
   },
   markdown: {

docs/index.md

@@ -3,33 +3,34 @@
 layout: home
 
 hero:
-  name: "Kømpletr"
-  text: "JS auto-complete"
-  tagline: 10kb of vanilla lightweight to add highly featured autocompletion on your pages.
+  text: "JS autocomplete"
+  tagline: 10kb of vanilla lightweight for a simple & efficient autocomplete
+  image:
+    light: 'https://cdn.konfer.be/images/kompletr/logo-kompletr-dark.png'
+    dark: 'https://cdn.konfer.be/images/kompletr/logo-kompletr-light.png'
   actions:
     - theme: brand
       text: Demo
-      link: /demo
+      link: https://kompletr.konfer.be
     - theme: alt
       text: Getting started
       link: /guide
-
 features:
   - icon: ✨
     title: Light
     details: Less than 10kb of Vanilla
   - icon: 🚀
     title: Performant
-    details: Faster than the rabbit
+    details: Faster than the white rabbit
   - icon: 🍃
     title: Eco friendly
-    details: What else ?
+    details: What else ?!
   - icon: 🌍
     title: Accessible
     details: ARIA and WAG
   - icon: ⚡
     title: Highly featured
-    details: A lot of options
+    details: Options and so on
   - icon: 🤘
     title: Compatible
     details: ESM, CommonJS, UMD and AMD 

src/index.html

@@ -2,8 +2,7 @@
 <html lang="en">
 
 <head>
-
-    <title>Vanilla autocomplete module - Kømpletr.js</title>
+    <title>Kømpletr - JS autocomplete</title>
 
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -32,8 +31,8 @@
   </header>
 
   <hgroup>
-    <img src="https://cdn.konfer.be/images/kompletr/logo-kompletr-dark.png" alt="Logo Kompletr" />
-    <cite>10kb of vanilla lightweight to add a simple & efficient autocomplete.</cite>
+    <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>
   </hgroup>
 
   <div id="searcher" class="form--search">

src/sass/kompletr.demo.scss

@@ -11,6 +11,17 @@ html {
 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;
+      }
+    }
   }
 }
 
@@ -49,10 +60,14 @@ hgroup {
   text-align: center;
 
   img {
-    margin: 100px auto 20px;
+    margin: 100px auto 0;
     display: block;
     max-width: 500px;
   }
+
+  cite {
+    color: #444;
+  }
 }
 
 a {