step 1: build something

README.md

@@ -41,6 +41,8 @@ Execute the following command just once per version of
 | Project    | Version |
 |------------|---------|
 | gohugo.io  |  >=0.99 |
+| nodejs.org |  >=14   |
+| npmjs.com  |  *      |
 
 Install them yourself or use tea:
 
@@ -56,6 +58,7 @@ $ tea .
 Builds a static, deployable version of the website.
 
 ```sh
+npm ci
 hugo --source src --destination ../public --minify
 ```
 

babel.config.js

@@ -0,0 +1,11 @@
+module.exports = function (api) {
+  api.cache(true);
+  const presets = [
+    ["@babel/preset-react"]
+    ]
+  const plugins = [];
+  return {
+    presets,
+    plugins
+  };
+}

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "tea-www",
+  "version": "0.1.0",
+  "description": "basic react config for https://tea.xyz",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/teaxyz/www.git"
+  },
+  "author": "Jacob Heider <jacob@tea.xyz>",
+  "license": "CC-BY-NC-4.0",
+  "bugs": {
+    "url": "https://github.com/teaxyz/www/issues"
+  },
+  "homepage": "https://github.com/teaxyz/www#readme",
+  "dependencies": {
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.20.2",
+    "@babel/preset-react": "^7.18.6"
+  }
+}

src/assets/scripts/bottles.jsx

@@ -0,0 +1,69 @@
+function Bottles() {
+  const [bottles, setBottles] = React.useState();
+
+  React.useEffect(() => {
+    fetch("https://app.tea.xyz/api/bottles")
+      .then((res) => res.json())
+      .then((res) => setBottles(res));
+  }, []);
+
+  if (!bottles) return null;
+
+  const names = [...new Set(bottles.map((b) => b.name))];
+
+  return (
+    <div>
+      <p>{names.length} packages</p>
+      {names.map((name) => (
+        <Bottle key={name} name={name} />
+      ))}
+    </div>
+  );
+
+  function Bottle({ name }) {
+    const [expanded, toggleExpanded] = React.useState(false);
+    const versions = [
+      ...new Set(bottles.filter((b) => b.name === name).map((b) => b.version)),
+    ];
+    return (
+      <div onClick={() => toggleExpanded(!expanded)}>
+        <h3>{name}</h3>
+        <h4>
+          {versions.length} version{versions.length === 1 ? "" : "s"} bottled
+        </h4>
+        {expanded && (
+          <table>
+            <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(Bottles), document.getElementById("app"));

src/config.toml

@@ -23,3 +23,7 @@ title = 'Equitable Open-Source for Web3'
     title = 'github'
     url = 'https://github.com/teaxyz'
     weight = 6
+
+[security]
+  [security.exec]
+    allow = ['^go$', '^postcss$', '^npx$', '^babel$']

src/layouts/index.html

@@ -152,6 +152,10 @@
 
 </style>
 
+<span class="grid-bottle-display">
+  {{- partial "bottle-grid.html" . -}}
+</span>
+
 <!-- Package CTA Section -->
 
 <hr>

src/layouts/partials/bottle-grid.html

@@ -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="app"></div>
+  {{ $app := resources.Get "scripts/bottles.jsx" | babel -}}
+  <script src="{{ $app.RelPermalink }}"></script>
+</section>