Filter entries by language type in onefetch.dev (#1227)

* init

* format

* improve styling

* add help text

* add break line

* fix help text

* review

* rename variable

* select all types by default

* styling

* show filter by default

* fix css

Author: o2sh

docs/vercel/src/Index.svelte

@@ -1,41 +1,51 @@
 <script lang="ts">
   import AsciiPreview from './lib/AsciiPreview.svelte';
   import data from '../../../languages.yaml';
-  import type { Languages } from '../../../languages.yaml';
+  import type { Languages, Language } from '../../../languages.yaml';
   import { onMount } from 'svelte';
+  import { writable, derived } from 'svelte/store';
 
-  let tag_name: string;
-  let html_url: string;
+  let tagName: string;
+  let htmlUrl: string;
 
-  const languages = Object.entries(data as Languages).map(
-    ([name, { ascii, colors }]) => ({
+  const languages: Language[] = Object.entries(data as Languages).map(
+    ([name, { type, ascii, colors }]) => ({
       name,
+      type,
       ascii,
-      ...colors,
+      colors,
     })
   );
 
+  const languageTypes: string[] = Array.from(
+    new Set<string>(Object.values(data as Languages).map(({ type }) => type))
+  );
+
+  const filter = writable({
+    checkboxes: languageTypes,
+  });
+
+  const filteredLanguages = derived(filter, ($filter) => {
+    return languages.filter(({ type }) => $filter.checkboxes.includes(type));
+  });
+
   onMount(async () => {
-    try {
-      const response = await fetch(
-        'https://api.github.com/repos/o2sh/onefetch/releases/latest'
-      );
-      const data = await response.json();
-
-      tag_name = data.tag_name;
-      html_url = data.html_url;
-    } catch (error) {
-      console.error('Error:', error);
-    }
+    const response = await fetch(
+      'https://api.github.com/repos/o2sh/onefetch/releases/latest'
+    );
+    const data = await response.json();
+
+    tagName = data.tag_name;
+    htmlUrl = data.html_url;
   });
 </script>
 
 <header>
-  {#if tag_name && html_url}
+  {#if tagName && htmlUrl}
     <div class="banner">
       <small
-        >Version {tag_name} is available 🎉 Check the
-        <a href={html_url}>release notes</a>!!</small>
+        >Version {tagName} is available 🎉 Check the
+        <a href={htmlUrl}>release notes</a>!!</small>
     </div>
   {/if}
   <h1>Onefetch</h1>
@@ -61,14 +71,36 @@
     Suggestions and PRs are welcome at <a
       href="https://github.com/o2sh/onefetch">github.com/o2sh/onefetch</a>
   </p>
-  <h3>Languages <small>({languages.length})</small></h3>
-  {#each languages as language}
+
+  <h3>Languages <small>({$filteredLanguages.length})</small></h3>
+
+  <strong>Filter by type</strong>
+
+  <div class="checkbox-group">
+    {#each languageTypes as type}
+      <label for={type}>
+        <input
+          id={type}
+          type="checkbox"
+          value={type}
+          bind:group={$filter.checkboxes} />
+        {type}
+      </label>
+    {/each}
+  </div>
+
+  <small
+    >Note: By default, onefetch will only recognize <strong>programming</strong>
+    and <strong>markup</strong> types. Use the
+    <code>--type</code> flag to configure.</small>
+
+  {#each $filteredLanguages as language}
     <AsciiPreview
       name={language.name}
-      ansi={language.ansi}
-      hex={language.hex}
+      ansi={language.colors.ansi}
+      hex={language.colors.hex}
       ascii={language.ascii}
-      chip={language.chip} />
+      chip={language.colors.chip} />
   {/each}
 </main>
 
@@ -82,4 +114,16 @@
     text-align: center;
     padding: 0.5rem 0;
   }
+
+  .checkbox-group {
+    margin-top: 1.5rem;
+  }
+
+  .checkbox-group label {
+    width: fit-content;
+  }
+
+  .checkbox-group label {
+    text-transform: capitalize;
+  }
 </style>

docs/vercel/typings/yaml.d.ts

@@ -6,10 +6,12 @@ declare module '*/languages.yaml' {
   }
 
   export interface Language {
+    name: string;
     type: string;
     ascii: string;
     colors: LanguageColors;
   }
 
   export type Languages = Record<string, Language>;
+  export type Language = Language;
 }