guardian-engineering-site/src/pages/open-source.astro at main · guardian/guardian-engineering-site · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
---
import PageLayout from "../layouts/page.astro";
import { Content } from "../../content/open-source.md";

import { border } from "../styles/shared.js";

const reposUrl = `https://api.github.com/orgs/guardian/repos?per_page=100&sort=updated&direction=desc`;
const reposRaw: Array<{
  name: string;
  description: string;
  html_url: string;
  stargazers_count: number;
  archived: boolean;
  pushed_at: string;
}> = await fetch(reposUrl).then((r) => r.json());

/**
 * A mix of recently updated and most stargazed repos
 */
const repos = reposRaw
  .filter((repo) => !repo.archived)
  .sort(
    (a, b) => new Date(b.pushed_at).getTime() - new Date(a.pushed_at).getTime(),
  )
  .slice(0, 21)
  .sort((a, b) => b.stargazers_count - a.stargazers_count)
  .slice(0, 10);

const timeAgo = (date: Date) =>
  `${
    [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec",
    ][date.getMonth()]
  } ${date.getDate()}, ${date.getFullYear()}`;
---

<PageLayout title="Open Source" edit="open-source.astro">
  <section id="source">
    <Content />

    <ol>
      {
        repos.map((repo) => {
          return (
            <li>
              <a href={repo.html_url}>
                <h4>{repo.name}</h4>
                <h5>
                  ({repo.stargazers_count} stars - updated{" "}
                  {timeAgo(new Date(repo.pushed_at))})
                </h5>
                <p>{repo.description}</p>
              </a>
            </li>
          );
        })
      }
    </ol>
  </section>
</PageLayout>

<style lang="scss" define:vars={{ border }}>
  section {
    padding: 0 1rem;

    // All but the first section
    &:nth-of-type(n + 2) {
      border-top: var(--border);
    }

    p,
    ul {
      max-width: 36rem;
    }
  }

  hr {
    border: none;
    border-top: var(--border);
  }

  #source {
    ol {
      li {
        padding-bottom: 1rem;

        a {
          display: block;
          max-width: 36rem;
          padding: 0.5rem;
          background-color: #333;

          color: inherit;
          text-decoration: none;

          h4 {
            color: gold;
          }

          h4,
          h5 {
            display: inline;
          }

          p {
            flex-basis: 100%;
            padding-top: 0.5rem;
            margin: 0;
          }
        }
      }
    }
  }
</style>