~repos /website

---
import { format } from "timeago.js";
import type { Commit } from "../utils/files";

type Props = {
  repoId: string;
  commit: Commit;
};

const { repoId, commit } = Astro.props;
const { author_name, hash, date, message, branches, tags } = commit;
---

<div class="event">
  <div>
    <a href={`/repos/${repoId}/commits/${hash}`} title={hash} rel="nofollow">
      {hash.substring(0, 8)}
    </a>
    —
    <strong>{author_name}</strong>
    <small class="pull-right">
      <h3>{branches}</h3>
      <h3>{tags}</h3>
      <a href={`/repos/${repoId}/logs?from=??`} rel="nofollow">
        <span title={date}>
          {format(date)}
        </span>
      </a>
    </small>
  </div>
  <pre class="commit">{message}</pre>
</div>

<style>
  .event {
    background-color: var(--color-box-bg);
    color: var(--color-text);
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0.5rem;
    margin: 0.5rem 0;
    font-size: 11pt;

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

    strong {
      font-weight: 500;
    }

    small {
      font-size: 85%;
      font-weight: 400;
      float: right;
    }
  }
</style>