Merge pull request #241 from teaxyz/package-bottle-info

#232 package bottle info in the /+packagePage
This commit is contained in:
Thomas Smith 2022-12-28 08:19:54 -05:00 committed by GitHub
commit d4f44991b9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 121 additions and 2 deletions

View file

@ -29,5 +29,6 @@ exclude = [
"file:///home/runner/work/www/www/public/+github.com/rhash/RHash", "file:///home/runner/work/www/www/public/+github.com/rhash/RHash",
"https://app.tea.xyz/api/signups", # can take a little too long, and no reason to hammer here. "https://app.tea.xyz/api/signups", # can take a little too long, and no reason to hammer here.
"https://unicode.org/", "https://unicode.org/",
"https://gnome.org/" "https://gnome.org/",
"https://libuv.org/"
] ]

View file

@ -0,0 +1,68 @@
function PackageBottles() {
const [bottles, setBottles] = React.useState();
React.useEffect(() => {
const url = window.location.pathname.replace('/+', 'https://app.tea.xyz/api/bottles/');
fetch(url)
.then((res) => res.json())
.then((res) => setBottles(res));
}, []);
if (!bottles) return null;
const names = [...new Set(bottles.map((b) => b.name))];
return (
<div>
{names.map((name) => (
<Bottle key={name} name={name} />
))}
</div>
);
function Bottle({ name }) {
const [expanded, toggleExpanded] = React.useState(false);
const versions = [
...new Set(bottles.map((b) => b.version)),
];
return (
<div className="expand" onClick={() => toggleExpanded(!expanded)}>
<div className="expand-text one-box-down">
<h4 className="display-6">
{versions.length} version{versions.length === 1 ? "" : "s"} bottled
</h4>
</div>
<table className="one-box-down">
<thead>
<tr>
<th>version</th>
<th>darwin-aarch64</th>
<th>darwin-x86-64</th>
<th>linux-aarch64</th>
<th>linux-x86-64</th>
</tr>
</thead>
<tbody>
{versions.map((v) => {
const available = new Set(
bottles
.filter((b) => b.name === name && b.version == v)
.map((b) => `${b.platform}-${b.arch}`)
);
return (
<tr key={v}>
<th>{v}</th>
<td>{available.has("darwin-aarch64") ? "✅" : "❌"}</td>
<td>{available.has("darwin-x86-64") ? "✅" : "❌"}</td>
<td>{available.has("linux-aarch64") ? "✅" : "❌"}</td>
<td>{available.has("linux-x86-64") ? "✅" : "❌"}</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
}
}
ReactDOM.render(React.createElement(PackageBottles), document.getElementById("packageApp"));

View file

@ -30,10 +30,18 @@
</div> </div>
</section> </section>
<!-- Copy to clipboard field --> <!-- Copy to clipboard field -->
<section> <section>
<div class="container"> <div class="container">
<div class="row">
<div class="col bottles-container">
{{- partial "package-bottle.html" .Title -}}
</div>
</div>
<div class="row"> <div class="row">
<div class="col grid-gray"> <div class="col grid-gray">
Copy the tea one-liner below into your terminal to install &#160;{{- .Title -}}. tea will interpret the documentation and take care of any dependencies. Copy the tea one-liner below into your terminal to install &#160;{{- .Title -}}. tea will interpret the documentation and take care of any dependencies.
@ -71,6 +79,41 @@
box-shadow: inset 0vw 0vw 0vw 0.335vw #1a1a1a !important; box-shadow: inset 0vw 0vw 0vw 0.335vw #1a1a1a !important;
} }
</style> table{
color: #fff;
width: 100%;
}
table, th, td {
border: 1px solid #949494;
font-family: "sono", sans-serif;
padding: 20px;
}
.expand{
cursor: pointer;
}
@media screen and (max-width: 576px) {
.bottles-container{
padding: 0px !important;
}
table, th, td {
border: 1px solid #949494;
font-family: "sono", sans-serif;
padding: 10px;
font-size: 12px;
}
.title-col{
padding: 4vw !important;
}
}
</style>
{{ end }} {{ end }}

View file

@ -0,0 +1,7 @@
<section>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="packageApp"></div>
{{ $packageApp := resources.Get "scripts/package-bottles.jsx" | babel -}}
<script src="{{ $packageApp.RelPermalink }}"></script>
</section>