mirror of
https://github.com/ivabus/www
synced 2024-11-10 07:25:14 +03:00
Merge pull request #241 from teaxyz/package-bottle-info
#232 package bottle info in the /+packagePage
This commit is contained in:
commit
d4f44991b9
|
@ -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/"
|
||||||
]
|
]
|
||||||
|
|
68
src/assets/scripts/package-bottles.jsx
Normal file
68
src/assets/scripts/package-bottles.jsx
Normal 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"));
|
|
@ -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  {{- .Title -}}. tea will interpret the documentation and take care of any dependencies.
|
Copy the tea one-liner below into your terminal to install  {{- .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 }}
|
||||||
|
|
7
src/layouts/partials/package-bottle.html
Normal file
7
src/layouts/partials/package-bottle.html
Normal 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>
|
Loading…
Reference in a new issue