---
import Base from "/components/Base.astro";
import SinglePage from "/layouts/SinglePage.astro";
import SiteButton from "/components/SiteButton.astro";
import { buttonwall } from "/content/bookmarks/personalsites.ts";
import { Content as OtherBookmarks } from "/content/bookmarks/bookmarks.md";
---

<Base
  title="BOOKMARKS"
  graph={{
    description: "Links to other cool sites.",
  }}
>
  <SinglePage>
    <h1 slot="header">Bookmarks</h1>
    <img src="/sitebutton.gif" alt="site button animated" />
    <img src="/sitebutton.png" alt="site button static" class="hidebutton" />
    <p>Button above you can use to link to my website.</p>
    <p>
      If you are here and you don't want your site listed please let me know to
      remove it. Contact at
      <a href="mailto:entomoviscera@gmail.com">entomoviscera@gmail.com</a>.
    </p>
    <h2>Cool zone</h2>
    {
      buttonwall.map((x) => (
        <SiteButton name={x.name} url={x.url} filetype={x.filetype} />
      ))
    }
    <OtherBookmarks />
  </SinglePage>
</Base>

<style>
  @media (prefers-reduced-motion: reduce) {
    .hidebutton {
      display: none;
    }
  }
</style>