Skip to content

Commit 17f33a5

Browse files
johnmhoranjohnmhoran
committed
Add initial releases table and polling structure
Signed-off-by: johnmhoran <johnmhoran@gmail.com>
1 parent 05e95e1 commit 17f33a5

5 files changed

Lines changed: 792 additions & 13 deletions

File tree

‎website/docs/about/about-releases.md‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎website/docs/about/about-releases.mdx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: Releases
3+
---
4+
5+
import ReleasesTable from '@site/src/components/ReleasesTable';
6+
7+
# Latest Releases
8+
9+
Find information here about the latest releases for ScanCode, VulnerableCode,
10+
and other AboutCode projects.
11+
12+
<ReleasesTable />

‎website/src/components/ReleasesTable/index.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React, { useEffect, useState } from 'react';
2+
import Layout from '@theme/Layout';
3+
import styles from './styles.module.css';
4+
5+
export default function Releases() {
6+
const [data, setData] = useState([]);
7+
useEffect(() => {
8+
fetch('/releases.json')
9+
.then(res => res.json())
10+
.then(setData)
11+
.catch(() => setData([]));
12+
}, []);
13+
14+
const repos = data.sort(
15+
(a, b) => new Date(b.published_at) - new Date(a.published_at)
16+
);
17+
18+
if (repos.length === 0) return <Layout><p>Loading releases...</p></Layout>;
19+
20+
return (
21+
<Layout title="Latest Releases">
22+
<div className={styles.container}>
23+
<h1>Latest Releases</h1>
24+
<table className={styles.table}>
25+
<thead>
26+
<tr>
27+
<th>Repo</th>
28+
<th>Tag</th>
29+
<th>Published</th>
30+
<th>Releases Page</th>
31+
</tr>
32+
</thead>
33+
<tbody>
34+
{repos.map((info, idx) => (
35+
<tr key={idx}>
36+
<td>
37+
<a href={info.repo_url} target='_blank' rel='noreferrer'>
38+
{info.repo_url.replace("https://github.com/", "")}
39+
</a>
40+
</td>
41+
<td>{info.tag}</td>
42+
{/* <td>{new Date(info.published_at).toLocaleDateString()}</td> */}
43+
{/* <td>{new Date(info.published_at).toISOString().replace('T', ' ').replace('.000Z', ' UTC')}</td> */}
44+
<td>{info.published_at ? new Date(info.published_at).toISOString().replace('T', ' ').replace('.000Z', ' UTC') : 'N/A'}</td>
45+
<td>
46+
<a href={info.releases_page_url} target='_blank' rel='noreferrer'>
47+
Releases
48+
</a>
49+
</td>
50+
</tr>
51+
))}
52+
</tbody>
53+
</table>
54+
</div>
55+
</Layout>
56+
);
57+
}

‎website/src/components/ReleasesTable/styles.module.css‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
.container {
2+
max-width: 900px;
3+
margin: 0 auto;
4+
padding: 2rem;
5+
}
6+
7+
.card {
8+
border: 1px solid var(--ifm-color-emphasis-300);
9+
border-radius: 8px;
10+
padding: 1.5rem;
11+
margin-bottom: 1.5rem;
12+
background-color: var(--ifm-background-surface-color);
13+
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
14+
}
15+
16+
.header {
17+
display: flex;
18+
justify-content: space-between;
19+
align-items: center;
20+
}
21+
22+
.tag {
23+
font-size: 1.2rem;
24+
font-weight: 600;
25+
text-decoration: none;
26+
}
27+
28+
.date {
29+
color: var(--ifm-color-emphasis-600);
30+
color: #000000;
31+
font-size: 0.9rem;
32+
}
33+
34+
.badge {
35+
background-color: #f39c12;
36+
color: white;
37+
padding: 0.25rem 0.6rem;
38+
border-radius: 4px;
39+
font-size: 0.75rem;
40+
}
41+
42+
/* 2026-02-16 Monday 18:58:36. For the updated .json. */
43+
.container {
44+
margin-top: 2rem;
45+
}
46+
47+
.generated {
48+
font-size: 0.9rem;
49+
color: var(--ifm-color-emphasis-700);
50+
color: #000000;
51+
margin-bottom: 1rem;
52+
}
53+
54+
/* .table {
55+
width: 100%;
56+
border-collapse: collapse;
57+
} */
58+
59+
.table {
60+
width: 100%;
61+
border-collapse: collapse;
62+
table-layout: fixed;
63+
}
64+
65+
/* .th {
66+
text-align: left;
67+
padding: 8px;
68+
border-bottom: 2px solid var(--ifm-color-emphasis-300);
69+
font-weight: 600;
70+
}
71+
72+
.td {
73+
padding: 8px;
74+
border-bottom: 1px solid var(--ifm-color-emphasis-200);
75+
vertical-align: top;
76+
} */
77+
78+
.th {
79+
text-align: left;
80+
padding: 6px 8px;
81+
border-bottom: 2px solid var(--ifm-color-emphasis-300);
82+
font-weight: 600;
83+
font-size: 0.9rem;
84+
}
85+
86+
.td {
87+
padding: 6px 8px;
88+
border-bottom: 1px solid var(--ifm-color-emphasis-200);
89+
vertical-align: top;
90+
font-size: 0.88rem;
91+
line-height: 1.2;
92+
}
93+
94+
/* .repo {
95+
font-weight: 500;
96+
} */
97+
98+
.tag {
99+
font-family: var(--ifm-font-family-monospace);
100+
}
101+
102+
/* .body {
103+
max-width: 420px;
104+
white-space: nowrap;
105+
overflow: hidden;
106+
text-overflow: ellipsis;
107+
color: var(--ifm-color-emphasis-700);
108+
} */
109+
110+
/* .body {
111+
max-width: 480px;
112+
white-space: normal;
113+
overflow-wrap: anywhere;
114+
word-break: break-word;
115+
line-height: 1.4;
116+
color: var(--ifm-color-emphasis-700);
117+
118+
max-height: 4.2em;
119+
overflow: hidden;
120+
} */
121+
122+
.body {
123+
display: -webkit-box;
124+
-webkit-line-clamp: 3; /* number of lines */
125+
line-clamp: 3;
126+
-webkit-box-orient: vertical;
127+
overflow: hidden;
128+
129+
font-size: 0.9rem;
130+
line-height: 1.2;
131+
color: var(--ifm-color-emphasis-700);
132+
color: #000000;
133+
}
134+
135+
.links a {
136+
margin-right: 0.75rem;
137+
}
138+
139+
.notesColumn {
140+
width: 40%;
141+
}
142+
143+
/* 2026-02-16 Monday 19:14:52.Zebra striping? */
144+
/* tbody tr:nth-child(even) {
145+
background-color: var(--ifm-color-emphasis-100);
146+
} */
147+
148+
/* 2026-02-17 Tuesday 09:21:06. */
149+
table td {
150+
color: var(--ifm-table-cell-color);
151+
color: #000000;
152+
}
153+
154+
/* ========================================== */
155+
/* 2026-02-19 Thursday 08:42:41. cl */
156+
.container {
157+
max-width: 900px;
158+
margin: 2rem auto;
159+
padding: 0 1rem;
160+
}
161+
162+
.table {
163+
width: 100%;
164+
border-collapse: collapse;
165+
font-size: 0.95rem;
166+
}
167+
168+
.table th,
169+
.table td {
170+
padding: 0.75rem 1rem;
171+
text-align: left;
172+
border-bottom: 1px solid var(--ifm-color-emphasis-300);
173+
white-space: nowrap;
174+
}
175+
176+
.table th {
177+
font-weight: 600;
178+
background-color: var(--ifm-color-emphasis-100);
179+
}
180+
181+
.table tr:hover {
182+
background-color: var(--ifm-color-emphasis-50);
183+
}
184+
185+
.table td:first-child {
186+
font-family: monospace;
187+
font-size: 0.9rem;
188+
}

0 commit comments

Comments
 (0)