Merge pull request #189 from teaxyz/bottle-browser

bottle listing

.cdk/lib/tea.xyz.ts

@@ -64,6 +64,7 @@ export default class TeaXYZ extends Stack {
       destinationBucket: bucket,
       distribution,
       distributionPaths: ["/*"],
+      memoryLimit: 512,
       sources: [s3Deployment.Source.asset('../public')],
     });
   }

.github/mk-pantry-accessible.sh

@@ -1,3 +0,0 @@
-#!/bin/sh
-
-git config --global url."https://teaxyz:$1@github.com/teaxyz/pantry".insteadOf "https://github.com/teaxyz/pantry"

.github/workflows/cd.yml

@@ -39,7 +39,6 @@ jobs:
       with:
         cmd: '.github/build-package-pages.sh src/data/packages.json src/content'
 
-    - run: .github/mk-pantry-accessible.sh ${{ secrets.TEMP_JACOBS_GITHUB_PAT }}
     - uses: teaxyz/setup@v0
       with:
         target: build

.github/workflows/staging.yml

@@ -47,8 +47,6 @@ jobs:
       with:
         cmd: '.github/build-package-pages.sh src/data/packages.json src/content'
 
-    - run: .github/mk-pantry-accessible.sh ${{ secrets.TEMP_JACOBS_GITHUB_PAT }}
-
     - uses: teaxyz/setup@v0
       with:
         target: build
@@ -71,7 +69,7 @@ jobs:
     # the first one to test it against prod resources via lychee
     - uses: teaxyz/setup@v0
       with:
-        target: build    
+        target: build
 
     - uses: actions/setup-node@v3
       with:

README.md

@@ -42,6 +42,8 @@ Which resembles the installation tag in tea cli
 | Project    | Version |
 |------------|---------|
 | gohugo.io  |  >=0.99 |
+| nodejs.org |  >=14   |
+| npmjs.com  |  *      |
 
 Install them yourself or use tea:
 
@@ -57,6 +59,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,74 @@
+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>Showing {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 className="expand" onClick={() => toggleExpanded(!expanded)}>
+        <div className="expand-text one-box-down">
+          <h3 className="display-3">{name}</h3>
+          <h4 className="display-6">
+            {versions.length} version{versions.length === 1 ? "" : "s"} bottled
+          </h4>
+        </div>
+        {expanded && (
+          <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 className="one-box-down">
+          <hr />
+        </div>
+      </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/content/bottles.md

@@ -0,0 +1,5 @@
+---
+title: "Bottles"
+Description: "bottles"
+layout: "bottles"
+---

src/layouts/index.html

@@ -113,6 +113,38 @@
   }
 </style>
 
+<!-- Bottle CTA -->
+
+<hr>
+
+<section>
+  <div class="container">
+    <div class="row">
+      <div class="col">
+
+        <div class="one-box-down">
+          <h4 class="text-center">Check our which versions we have bottled</h4>
+          <p class="text-center">We&#39;ve compiled a list of every package that&#39;s been bottled, along with their corresponding versions.</p>
+        </div>
+        <a href="/bottles/">
+            <button class="detail-btn-large bottle-cta"><i class="icon-enter-arrow"></i>VIEW ALL BOTTLES</button>
+        </a>
+
+        <style>
+
+          .bottle-cta{
+            display: block;
+            margin-left: auto;
+            margin-right: auto;
+          }
+
+        </style>
+
+      </div>
+    </div>
+  </div>
+</section>
+
 <!-- Package CTA Section -->
 
 <hr>

src/layouts/page/bottles.html

@@ -0,0 +1,67 @@
+{{ define "main" }}
+
+<section>
+  <div class="container">
+    <div class="row">
+      <div class="col title-col" style="padding:1.4vw;">
+        <h1 class="display-1">Bottles</h1>
+      </div>
+    </div>
+  </div>
+</section>
+
+<hr>
+
+<section>
+  <div class="container">
+    <div class="row">
+      <div class="col bottles-container">
+
+        {{- partial "bottle-grid.html" -}}
+
+      </div>
+    </div>
+  </div>
+</section>
+
+<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 }}

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>

src/layouts/partials/tea-icon.html

@@ -0,0 +1 @@
+<i class="icon-tea-logo-iconasset-1">