Updated readme with npm install, updated cdn links and demo

Yohn · Nov 3, 2024 · d0f2aef · d0f2aef
1 parent bac6571
commit d0f2aef
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 66 deletions.
diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
 # dselect
 
-Dropdown select box for bootstrap 5
+Dropdown select box for bootstrap 5.3.3
 
-[Demo](https://dselect.vercel.app)
+[Demo](https://yohn.github.io/dselect/)
 
 ## Features
 
@@ -22,13 +22,13 @@ Dropdown select box for bootstrap 5
 Install dselect with npm
 
 ```bash
-npm install @yohn/dselect
+npm i @skem9/dselect
 ```
 
 Install from cdn
 ```html
-<link rel="stylesheet" href="https://unpkg.com/@yohn/dselect/dist/css/dselect.css">
-<script src="https://unpkg.com/@yohn/dselect/dist/js/dselect.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Yohn/dselect@1.1.0/dist/css/dselect.min.css">
+<script src="https://cdn.jsdelivr.net/gh/Yohn/dselect@1.1.0/dist/js/dselect.min.js"></script>
 ```
 ## Usage/Examples
 

diff --git a/example/favicon.ico → favicon.ico b/example/favicon.ico → favicon.ico
diff --git a/example/index.html → index.html b/example/index.html → index.html
@@ -7,7 +7,8 @@
   <link rel="icon" href="favicon.ico">
   <!-- Bootstrap 5.3.3 is compiled via gulpfile.js so no need to include the cdn for that -->
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">  <link rel="stylesheet" href="../dist/css/dselect.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css">
+  <link rel="stylesheet" href="dist/css/dselect.css">
   <title>dselect - Dropdown select box for bootstrap 5</title>
 </head>
 
@@ -28,17 +29,17 @@ <h1>dselect</h1>
             <li class="list-group-item">Dropdown select box for bootstrap 5</li>
           </ul>
           <div class="list-group list-group-flush list-group-horizontal">
-            <div class="col-4 list-group-item list-group-item-primary border-bottom border-top-0" style="white-space: nowrap;">Updated By:</div>
+            <div class="rounded-0 col-4 list-group-item list-group-item-primary border-bottom border-top-0" style="white-space: nowrap;">Updated By:</div>
             <a href="https://github.com/Yohn/dselect" target="_blank"
-              class="list-group-item list-group-item-action list-group-item-secondary border-top-0 border-bottom">
+              class="rounded-0 list-group-item list-group-item-action list-group-item-secondary border-top-0 border-bottom">
               <svg viewBox="0 0 24 24" width="21" height="21" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
               Yohn
             </a>
           </div>
           <div class="list-group list-group-flush list-group-horizontal border-top-0">
-            <div class="col-4 list-group-item list-group-item-primary border-top-0 border-bottom" style="white-space: nowrap;">Originally By:</div>
+            <div class="rounded-0 col-4 list-group-item list-group-item-primary border-top-0 border-bottom" style="white-space: nowrap;">Originally By:</div>
             <a href="https://github.com/jarstone/dselect" target="_blank"
-              class="list-group-item list-group-item-action list-group-item-secondary border-top-0 border-bottom">
+              class="rounded-0 list-group-item list-group-item-action list-group-item-secondary border-top-0 border-bottom">
               <svg viewBox="0 0 24 24" width="21" height="21" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
               Jarstone
             </a>
@@ -100,12 +101,12 @@ <h6>Search</h6>
               <div>
                 <h6>With Images</h6>
                 <select class="form-select" id="example-imgs">
-                  <option data-dselect-img="imgs/chrome.svg" value="chrome">Chrome</option>
-                  <option data-dselect-img="imgs/firefox.svg" value="firefox">Firefox</option>
-                  <option data-dselect-img="imgs/safari.svg" value="safari">Safari</option>
-                  <option data-dselect-img="imgs/edge.svg" value="edge">Edge</option>
-                  <option data-dselect-img="imgs/opera.svg" value="opera">Opera</option>
-                  <option data-dselect-img="imgs/brave.svg" value="brave">Brave</option>
+                  <option data-dselect-img="example/imgs/chrome.svg" value="chrome">Chrome</option>
+                  <option data-dselect-img="example/imgs/firefox.svg" value="firefox">Firefox</option>
+                  <option data-dselect-img="example/imgs/safari.svg" value="safari">Safari</option>
+                  <option data-dselect-img="example/imgs/edge.svg" value="edge">Edge</option>
+                  <option data-dselect-img="example/imgs/opera.svg" value="opera">Opera</option>
+                  <option data-dselect-img="example/imgs/brave.svg" value="brave">Brave</option>
                 </select>
               </div>
 
@@ -155,30 +156,30 @@ <h6>Clearable</h6>
                 <h6>Sizing</h6>
                 <select class="form-select" id="example-sizing-sm">
                   <option value="">Choose browser</option>
-                  <option data-dselect-img="imgs/chrome.svg" value="chrome">Chrome</option>
-                  <option data-dselect-img="imgs/firefox.svg" value="firefox">Firefox</option>
-                  <option data-dselect-img="imgs/safari.svg" value="safari">Safari</option>
-                  <option data-dselect-img="imgs/edge.svg" value="edge">Edge</option>
-                  <option data-dselect-img="imgs/opera.svg" value="opera">Opera</option>
-                  <option data-dselect-img="imgs/brave.svg" value="brave">Brave</option>
+                  <option data-dselect-img="example/imgs/chrome.svg" value="chrome">Chrome</option>
+                  <option data-dselect-img="example/imgs/firefox.svg" value="firefox">Firefox</option>
+                  <option data-dselect-img="example/imgs/safari.svg" value="safari">Safari</option>
+                  <option data-dselect-img="example/imgs/edge.svg" value="edge">Edge</option>
+                  <option data-dselect-img="example/imgs/opera.svg" value="opera">Opera</option>
+                  <option data-dselect-img="example/imgs/brave.svg" value="brave">Brave</option>
                 </select>
                 <select class="form-select" id="example-sizing-default">
                   <option value="">Choose browser</option>
-                  <option data-dselect-img="imgs/chrome.svg" value="chrome">Chrome</option>
-                  <option data-dselect-img="imgs/firefox.svg" value="firefox">Firefox</option>
-                  <option data-dselect-img="imgs/safari.svg" value="safari">Safari</option>
-                  <option data-dselect-img="imgs/edge.svg" value="edge">Edge</option>
-                  <option data-dselect-img="imgs/opera.svg" value="opera">Opera</option>
-                  <option data-dselect-img="imgs/brave.svg" value="brave">Brave</option>
+                  <option data-dselect-img="example/imgs/chrome.svg" value="chrome">Chrome</option>
+                  <option data-dselect-img="example/imgs/firefox.svg" value="firefox">Firefox</option>
+                  <option data-dselect-img="example/imgs/safari.svg" value="safari">Safari</option>
+                  <option data-dselect-img="example/imgs/edge.svg" value="edge">Edge</option>
+                  <option data-dselect-img="example/imgs/opera.svg" value="opera">Opera</option>
+                  <option data-dselect-img="example/imgs/brave.svg" value="brave">Brave</option>
                 </select>
                 <select class="form-select" id="example-sizing-lg">
                   <option value="">Choose browser</option>
-                  <option data-dselect-img="imgs/chrome.svg" value="chrome">Chrome</option>
-                  <option data-dselect-img="imgs/firefox.svg" value="firefox">Firefox</option>
-                  <option data-dselect-img="imgs/safari.svg" value="safari">Safari</option>
-                  <option data-dselect-img="imgs/edge.svg" value="edge">Edge</option>
-                  <option data-dselect-img="imgs/opera.svg" value="opera">Opera</option>
-                  <option data-dselect-img="imgs/brave.svg" value="brave">Brave</option>
+                  <option data-dselect-img="example/imgs/chrome.svg" value="chrome">Chrome</option>
+                  <option data-dselect-img="example/imgs/firefox.svg" value="firefox">Firefox</option>
+                  <option data-dselect-img="example/imgs/safari.svg" value="safari">Safari</option>
+                  <option data-dselect-img="example/imgs/edge.svg" value="edge">Edge</option>
+                  <option data-dselect-img="example/imgs/opera.svg" value="opera">Opera</option>
+                  <option data-dselect-img="example/imgs/brave.svg" value="brave">Brave</option>
                 </select>
               </div>
 
@@ -251,12 +252,12 @@ <h2 class="border-bottom border-1 border-primary-subtle">
           <pre><code class="language-html">
 &lt;select class="form-select" id="example-sizing-default"&gt;
   &lt;option value="">Choose browser&lt;/option&gt;
-  &lt;option data-dselect-img="imgs/chrome.svg" value="chrome">Chrome&lt;/option&gt;
-  &lt;option data-dselect-img="imgs/firefox.svg" value="firefox">Firefox&lt;/option&gt;
-  &lt;option data-dselect-img="imgs/safari.svg" value="safari">Safari&lt;/option&gt;
-  &lt;option data-dselect-img="imgs/edge.svg" value="edge">Edge&lt;/option&gt;
-  &lt;option data-dselect-img="imgs/opera.svg" value="opera">Opera&lt;/option&gt;
-  &lt;option data-dselect-img="imgs/brave.svg" value="brave">Brave&lt;/option&gt;
+  &lt;option data-dselect-img="example/imgs/chrome.svg" value="chrome">Chrome&lt;/option&gt;
+  &lt;option data-dselect-img="example/imgs/firefox.svg" value="firefox">Firefox&lt;/option&gt;
+  &lt;option data-dselect-img="example/imgs/safari.svg" value="safari">Safari&lt;/option&gt;
+  &lt;option data-dselect-img="example/imgs/edge.svg" value="edge">Edge&lt;/option&gt;
+  &lt;option data-dselect-img="example/imgs/opera.svg" value="opera">Opera&lt;/option&gt;
+  &lt;option data-dselect-img="example/imgs/brave.svg" value="brave">Brave&lt;/option&gt;
 &lt;/select&gt;
         </div>
       </div>
@@ -265,7 +266,7 @@ <h2 class="border-bottom border-1 border-primary-subtle">
 
 	<script src="//cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
   <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js" crossorigin="anonymous"></script>
-  <script src="../dist/js/dselect.js"></script>
+  <script src="dist/js/dselect.js"></script>
   <script>
     // basic
     dselect(document.querySelector('#example-basic'))

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@yohns/dselect",
+  "name": "@skem9/dselect",
   "version": "1.1.0",
   "description": "Dropdown select box for bootstrap 5 with search, multiple, tag and image support",
   "repository": {