punfetch 0.3.6

<script lang="ts">
  import AsciiPreview from './lib/AsciiPreview.svelte';
  import data from '../../../../../../distros.yaml';
  import type { Distros } from '../distros.yaml';

  const distros = Object.entries(data as Distros).map(
    ([name, { ascii, colors }]) => ({
      name,
      ascii,
      ...colors,
    })
  );
</script>

<header>
  <div class="banner">
    <small>
      Version 0.3.0 is available with color support, onefetch_ascii integration, and a generic library to implement your
      own fetch binaries! 🎉 Check the
      <a href="https://github.com/ozwaldorf/punfetch/releases/latest">latest release notes</a>
    </small>
  </div>
  <h1>Punfetch</h1>
  <p>
    <small>
      <a href="https://github.com/ozwaldorf/punfetch">github</a>
      | Binary built with ❤ by <a href="https://github.com/ozwaldorf">@ozwaldorf</a>
      | Website patched from <a href="https://github.com/o2sh/onefetch/tree/main/docs/vercel">onefetch/docs/vercel</a>
    </small>
  </p>
</header>
<main>
  <p>
    This page shows you an ASCII preview for all the distributions supported by
    punfetch. Like the binary, the data is taken from the <a
      href="https://raw.githubusercontent.com/ozwaldorf/punfetch/main/distros.yaml"
      ><code>Distros.yaml</code></a> file and the layout is meant to mimic the way
    the logo would look inside a terminal.
  </p>
  <p>
    Suggestions and PRs are welcome at <a
      href="https://github.com/ozwaldorf/punfetch"
      >github.com/ozwaldorf/punfetch</a>
  </p>
  <h3>Distributions <small>({distros.length})</small></h3>
  {#each distros as distro}
    <AsciiPreview
      name={distro.name}
      ansi={distro.ansi}
      hex={distro.hex}
      ascii={distro.ascii}
      chip={distro.chip} />
  {/each}
  <div class="footer">
    <p>

    </p>
  </div>
</main>

<style>
  .banner {
    background-color: #4c7e56;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 0.5rem 0;
  }
</style>