~repos /website

---
import { type CollectionEntry } from "astro:content";
import { Icon } from "astro-icon/components";
import Layout from "@/layouts/BaseLayout.astro";

type Props = {
  repo: CollectionEntry<"repos">;
};

const { repo } = Astro.props;
const {
  data: { title, description, tags },
} = repo;
const { pathname } = Astro.url;
---

<Layout title={title} description={description}>
  <div class="repo">
    <div class="header">
      <h1>
        <a href="/">~repos</a>
        /{title}
      </h1>
      <div class="tags">
        {tags.map((tag) => <span class="tag">#{tag}</span>)}
      </div>
    </div>
    <h3>
      git clone <a>
        https://pyrossh.dev/repos/{title}.git
      </a>
      <span
        data-tooltip="For contributions, please use git patches and send them over by email"
      >
        <Icon
          name="mdi:information-outline"
          size="18px"
          color="var(--color-text)"
        />
      </span>
    </h3>
    <div class="headerExtension">
      <h2>{description}</h2>
    </div>
    <hr />
    <div class="nav">
      <div>
        <a
          aria-current={pathname == `/repos/${title}` ? "true" : "false"}
          href={`/repos/${title}`}
        >
          Readme
        </a>
      </div>
      <div>|</div>
      <div>
        <a
          aria-current={pathname.includes("/commits") ? "true" : "false"}
          href={`/repos/${title}/commits`}
        >
          Commits
        </a>
      </div>
      <div>|</div>
      <div>
        <a
          aria-current={pathname.includes("/files") ? "true" : "false"}
          class="nav-link"
          href={`/repos/${title}/files`}
        >
          Files
        </a>
      </div>
    </div>
  </div>
  <slot />
</Layout>
<style>
  .repo {
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0.5rem;
    background: var(--color-box-bg);
    color: var(--color-text);
    font-size: 0.95rem;

    a {
      color: var(--color-link);
    }
  }

  .header {
    display: flex;
    flex-direction: row;
    align-items: baseline;

    @media (max-width: 720px) {
      flex-direction: column;
      align-items: start;
    }
  }

  h4 {
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.2;
    border-bottom: 1px solid #495057;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 0;
    padding: 0;
  }

  .tags {
    margin-top: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .tag {
    color: var(--color-tag);
    padding: 0.15rem 0.5rem 0.5rem 0rem;
    border-radius: 0.25rem;
    font-size: 0.95rem;
    font-weight: 500;
  }

  h1 {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 0.1rem;
    flex: 1;

    a {
      color: var(--color-link);
    }
  }

  h2 {
    display: flex;
    flex: 1;
    padding-top: 0.3rem;
    font-size: 0.95rem;
  }

  h3 {
    font-size: 1rem;
    font-weight: 500;

    a {
      /* color: var(--color-tag) !important; */
    }

    svg {
      display: inline;
      /* color: var(--color-code-fg); */
      /* vertical-align: sub; */
      margin-bottom: 4px;
    }
  }

  hr {
    margin-top: 0.5rem;
    border-color: var(--color-text);
  }

  .nav {
    display: flex;
    align-items: center;
    margin-top: 0.5rem;

    @media (max-width: 720px) {
      margin-top: 0.5rem;
    }

    div {
      padding-right: 0.5rem;
    }

    a {
      font-size: 1rem;
      font-weight: 500;
      padding-right: 0.5rem;
      cursor: pointer;
      color: var(--color-link);

      &[aria-current="true"] {
        text-underline-offset: 4px;
        text-decoration: underline;
      }
    }
  }
</style>