add nerdfont iconts to the preview (#1411)

Co-authored-by: o2sh <[email protected]>

docs/vercel/src/Index.svelte

@@ -10,11 +10,12 @@
   let showMenu: boolean;
 
   const languages: Language[] = Object.entries(data as Languages).map(
-    ([name, { type, ascii, colors }]) => ({
+    ([name, { type, ascii, colors, icon }]) => ({
       name,
       type,
       ascii,
       colors,
+      icon,
     })
   );
 
@@ -30,6 +31,15 @@
     return languages.filter(({ type }) => $filter.checkboxes.includes(type));
   });
 
+  function escapeToUnicode(unicodeEscape: string): string {
+    if (unicodeEscape) {
+      let codePoint = parseInt(unicodeEscape.slice(3, -1), 16); // extract the relevent portion of the escape
+      return String.fromCodePoint(codePoint);
+    } else {
+      return '\u{25CF}';
+    }
+  }
+
   onMount(async () => {
     const response = await fetch(
       'https://api.github.com/repos/o2sh/onefetch/releases/latest'
@@ -102,7 +112,8 @@
       ansi={language.colors.ansi}
       hex={language.colors.hex}
       ascii={language.ascii}
-      chip={language.colors.chip} />
+      chipColor={language.colors.chip}
+      chipIcon={escapeToUnicode(language.icon)} />
   {/each}
 </main>
 

docs/vercel/src/components/AsciiPreview.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
   import { mapToDefaultTerminalFgColor } from '../lib/utils';
-  import Chip from './Chip.svelte';
   import TitleLink from './TitleLink.svelte';
 
   export let name: string;
   export let ansi: string[];
   export let hex: string[] | null = null;
-  export let chip: string;
+  export let chipColor: string;
   export let ascii: string = '';
+  export let chipIcon: string;
 
   let dark = true;
   let trueColor = hex != null;
@@ -32,7 +32,7 @@
 
 <div class="title-row">
   <div class="language-name">
-    <Chip id={name} color={chip} width={24} height={24} />
+    <h3 class="nerd-font" style="color: {chipColor}">{chipIcon}</h3>
     <TitleLink {name} />
   </div>
   <div class="checkbox">
@@ -54,6 +54,8 @@
 </div>
 
 <style>
+  @import url('https://www.nerdfonts.com/assets/css/webfont.css');
+
   .logo-container {
     display: flex;
     justify-content: center;

docs/vercel/src/yaml.d.ts

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