LanguageSlot change SVG icons src repo to vscode-icons for more coverage

hide img if src url does not respond with 200
janosh · Mar 28, 2022 · 92390e9 · 92390e9
1 parent e5d3284
commit 92390e9
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 33 deletions.
diff --git a/readme.md b/readme.md
@@ -13,7 +13,7 @@
 
 </h4>
 
-**Keyboard-friendly, zero-dependency multi-select Svelte component.**
+**Keyboard-friendly, accessible multi-select Svelte component.**
 <strong class="hide-in-docs">
 <a href="https://svelte-multiselect.netlify.app">Docs</a> &bull;
 </strong>

diff --git a/src/app.html b/src/app.html
@@ -5,7 +5,7 @@
     <meta name="author" content="Janosh Riebesell" />
     <meta
       name="description"
-      content="Keyboard-friendly, zero-dependency Svelte MultiSelect component"
+      content="Keyboard-friendly, accessible Svelte MultiSelect component"
     />
 
     <meta charset="utf-8" />

diff --git a/src/components/Examples.svelte b/src/components/Examples.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
   import MultiSelect, { Option, Primitive } from '../lib'
   import Confetti from './Confetti.svelte'
-  import { colors, ml_libs, languages, web_ui_libs } from '../options'
+  import { colors, ml_libs, languages, frontend_libs } from '../options'
   import ColorSlot from './ColorSlot.svelte'
   import LanguageSlot from './LanguageSlot.svelte'
 
-  let selectedWeb: Primitive[]
-  let activeWeb: Option
+  let selectedLangs: Primitive[]
   let selectedML: Option[]
   let selectedFruit: Option[]
 
@@ -32,23 +31,16 @@
 <section>
   <h3>Multi Select</h3>
 
-  <label for="fav-web-tool">Favorite Web Frameworks?</label>
+  <pre>bind:selectedLabels = {JSON.stringify(selectedLangs)}</pre>
 
-  <pre><code>selectedLabels = {JSON.stringify(selectedWeb)}</code></pre>
+  <label for="languages">Favorite programming languages?</label>
 
   <MultiSelect
-    id="fav-web-tool"
-    options={web_ui_libs}
-    bind:selectedLabels={selectedWeb}
-    bind:activeOption={activeWeb}
-    maxSelect={6}
+    id="languages"
+    options={languages}
     {placeholder}
-    {filterFunc}
-  />
-
-  <label for="languages">Favorite programming languages?</label>
-
-  <MultiSelect id="languages" options={languages} {placeholder}>
+    bind:selectedLabels={selectedLangs}
+  >
     <LanguageSlot let:option {option} slot="selected" />
   </MultiSelect>
 </section>
@@ -58,7 +50,7 @@
 
   <label for="fav-ml-tool">Favorite Machine Learning Framework?</label>
 
-  <pre><code>selected = {JSON.stringify(selectedML)}</code></pre>
+  <pre>selected = {JSON.stringify(selectedML)}</pre>
 
   <MultiSelect
     id="fav-ml-tool"
@@ -73,22 +65,25 @@
 </section>
 
 <section>
-  <h3>50/50 Chance of Confetti</h3>
+  <h3>Chance of Confetti</h3>
 
   <label for="confetti-select">Favorite Web Framework?</label>
 
   <MultiSelect
     id="confetti-select"
-    options={[`React`, `Svelte`]}
+    options={frontend_libs}
     maxSelect={1}
     {placeholder}
+    {filterFunc}
     on:add={(e) => {
       if (e.detail.option.label === `Svelte`) {
         showConfetti = true
         setTimeout(() => (showConfetti = false), 3000)
       }
     }}
-  />
+  >
+    <LanguageSlot let:option {option} slot="selected" />
+  </MultiSelect>
   {#if showConfetti}
     <Confetti />
   {/if}
@@ -130,6 +125,8 @@
   }
   pre {
     white-space: pre-wrap;
-    background-color: transparent;
+    padding: 7pt 1em;
+    font-size: 1em;
+    word-break: break-word;
   }
 </style>
diff --git a/src/components/LanguageSlot.svelte b/src/components/LanguageSlot.svelte
@@ -2,14 +2,25 @@
   import { Option } from '../lib'
 
   export let option: Option
+  export let height = `20px`
 
-  const repo = `https://raw.githubusercontent.com/abranhe/programming-languages-logos/master/src`
+  const repo = `https://raw.githubusercontent.com/vscode-icons/vscode-icons/master/icons`
 
-  $: lang = `${option.label}`.toLowerCase().replaceAll(`+`, `p`).replace(`#`, `sharp`)
-  $: src = `${repo}/${lang}/${lang}.svg`
+  $: lang = `${option.label}`
+    .toLowerCase()
+    .replaceAll(`+`, `p`)
+    .replace(`#`, `sharp`)
+    .replace(`javascript`, `js`)
+    .replace(`dart`, `dartlang`)
+  $: src = `${repo}/file_type_${lang}.svg`
+
+  let hidden = false
+  $: fetch(src).then((resp) => {
+    hidden = resp.status !== 200
+  })
 </script>
 
 <span style="display: flex; gap: 3pt;">
   {option.label}
-  <img {src} width="20px" alt={lang} />
+  <img {src} {height} alt={lang} {hidden} />
 </span>
diff --git a/src/options.ts b/src/options.ts
@@ -1,6 +1,6 @@
 import { ProtoOption } from './lib'
 
-export const web_ui_libs = [
+export const frontend_libs = [
   [`Svelte`, `JavaScript`],
   [`React`, `JavaScript`],
   [`Vue`, `JavaScript`],
@@ -31,7 +31,7 @@ export const ml_libs = [
 
 // prettier-ignore
 export const languages = [
-  `JavaScript`, `TypeScript`, `CoffeeScript`, `Python`, `Ruby`, `C`, `C#`, `C++`, `Go`, `Swift`, `Java`, `Rust`, `Kotlin`, `Haskell`, `Scala`, `Clojure`, `Erlang`, `Elixir`, `F#`, `Dart`, `Elm`, `Julia`, `Lua`, `R`, `OCaml`, `Pascal`, `Perl`, `PHP`
+  `JavaScript`, `TypeScript`, `CoffeeScript`, `Python`, `Ruby`, `C`, `C#`, `C++`, `Go`, `Swift`, `Java`, `Rust`, `Kotlin`, `Haskell`, `Scala`, `Clojure`, `Erlang`, `Elixir`, `F#`, `Dart`, `Elm`, `Julia`, `Lua`, `R`, `OCaml`, `Perl`, `PHP`
 ].map(lang => ({label: lang, value: lang, preselected: [`Python`, `TypeScript`, `C`].includes(lang) }))
 
 // prettier-ignore

diff --git a/src/routes/demos/__layout.svelte b/src/routes/demos/__layout.svelte
@@ -48,14 +48,14 @@
     border-radius: 3pt;
     transition: 0.2s;
   }
+  a[href='/']:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
   nav > a {
     padding-bottom: 2pt;
   }
   nav > a[aria-current='page'] {
-    border-bottom: 1px solid lightgray;
-  }
-  a:hover {
-    background-color: rgba(255, 255, 255, 0.2);
+    font-weight: bold;
   }
   nav {
     display: flex;