Merge branch 'main' into add-blog-section

.github/build-package-pages.sh

@@ -20,6 +20,8 @@ for row in $(jq -r '.[] | @base64' < "$1"); do
 type: page
 title: \"$(_jq '.name')\"
 maintainer: \"$(_jq '.maintainer')\"
+full_name: \"$(_jq '.full_name')\"
+og_image_url: \"$(_jq '.thumb_image_url')\"
 Description: \"$(_jq '.desc' | tr '\"' "'")\"
 layout: \"package-detail\"
 ---"

.github/workflows/cd.yml

@@ -27,7 +27,7 @@ jobs:
     - name: add packages data
       run: |
         rm ./src/data/packages.json
-        curl https://api.tea.xyz/v1/packages -H "Accept: application/json" >> ./src/data/packages.json
+        curl https://gui.tea.xyz/packages.json -H "Accept: application/json" >> ./src/data/packages.json
 
     - name: Create Package Detail Pages from packages.json
       uses: getneil/jq-action@v1

.github/workflows/staging.yml

@@ -38,7 +38,7 @@ jobs:
     - name: add packages data
       run: |
         rm ./src/data/packages.json
-        curl https://api.tea.xyz/v1/packages -H "Accept: application/json" >> ./src/data/packages.json
+        curl https://gui.tea.xyz/packages.json -H "Accept: application/json" >> ./src/data/packages.json
 
     - name: Create Package Detail Pages from packages.json
       uses: getneil/jq-action@v1

README.md

@@ -2,13 +2,11 @@
 
 Deploys to [tea.xyz].
 
-
 # Legal
 
 You may not publish this website in an attempt to masquerade as tea.inc.
 The tea logo and wordmark are registered trademarks of tea.inc.
 
-
 # Contributing
 
 * The site is built with [Hugo] and [Bootstrap].
@@ -42,12 +40,12 @@ just package-pages
 
 ## Dependencies
 
-| Project      | Version |
+| Project      |  Version   |
-|--------------|---------|
+|--------------|------------|
-| gohugo.io    |  >=0.99 |
+| gohugo.io    |  >=0.99    |
-| nodejs.org   |  =18.13.0 |
+| nodejs.org   |  =18.13.0  |
-| npmjs.com    |  *      |
+| npmjs.com    |  >=9<9.6.5 |
-| just.systems |  ~1     |
+| just.systems |  ~1        |
 
 # Build
 
@@ -60,7 +58,6 @@ hugo --source src --destination ../public --minify
 just build
 ```
 
-
 [tea.xyz]: https://tea.xyz
 [Bootstrap]: https://getbootstrap.com/docs/5.2/getting-started/introduction/
 [Hugo]: https://gohugo.io/documentation/

package.json

@@ -4,7 +4,7 @@
   "description": "basic react config for https://tea.xyz",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "npx babel src --out-dir lib --no-babelrc"
   },
   "repository": {
     "type": "git",

src/config.toml

@@ -12,6 +12,13 @@ title = 'Equitable Open-Source for Web3'
     url = 'https://docs.tea.xyz'
     weight = 3
 
+  [[menu.main]]
+    identifier = 'product hunt'
+    name = 'Product Hunt'
+    title = 'product hunt'
+    url = 'https://www.producthunt.com/posts/tea?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tea'
+    weight = 2
+
 [security]
   [security.exec]
     allow = ['^go$', '^postcss$', '^npx$', '^babel$']

src/content/gui.md

@@ -0,0 +1,7 @@
+---
+title: "tea/gui (beta)"
+Description: "The Open-Store for Open-Source"
+layout: "gui"
+menu: main
+weight: 1
+---

src/content/packages.md

@@ -1,7 +1,7 @@
 ---
 title: "Pantry"
-Description: "Browse our packages"
+Description: "install open-source software with tea"
 layout: "packages"
 menu: main
-weight: 1
+weight: 2
 ---

src/layouts/index.html

@@ -111,6 +111,10 @@
     .install-label{
       text-align: center;
     }
+    .teacli-col{
+      border-bottom: 1px solid #949494;
+      border-right: none;
+    }
   }
 
   @media only screen and (min-width: 768px) {
@@ -131,10 +135,66 @@
       margin-left:auto;
       margin-right:auto;
     }
+    .teacli-col{
+      border-bottom: none;
+      border-right: 1px solid #949494;
+    }
   }
 
 </style>
 
+<section id="gui-ribbon-section" class="gui-ribbon mt-xl-4 mt-lg-4 mt-md-4 md-sm-0 mt-0 fixed-section p-2">
+  <div class="container" style="border-radius:2px; background-color:#2675f5; border: 1px solid #135DD4;">
+    <div class="row border-bottom border-primary">
+      <div class="col">
+        <span class="close-btn text-right white" onclick="closeSection()"><i class="icon-tea-x-btn" style="font-size:8px;"></i></span>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col pt-2 pb-2 ps-3 pe-3 flex">
+        <p class="pe-3" style="position:relative;top:7px;font-size:14px;line-height: 20px;">We've just released the beta for our visual package manager, <span class="tea">tea/gui</span></p>
+        <a href="/gui/">
+          <button class="hbtn-light hb-light-fill-right github-click-secondary" style="width:125px;height:30px;font-size:14px;font-family:'inter';"><span style="position:relative; top:-4px;">Try it out</span></button>
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .close-btn{
+    position: relative;
+    float: right !important;
+    cursor: pointer;
+    transition: ease-in-out;
+    top:-2px;
+    right:-2px;
+  }
+  .close-btn:hover{
+    opacity:0.5;
+  }
+  .fixed-section {
+    position: fixed;
+    top: 50px;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+  }
+  .border-primary {
+    border-bottom: 1px solid #0052D6 !important;
+  }
+  body {
+    padding-top: 100px; /* adjust to the height of your fixed section */
+  }
+</style>
+
+<script>
+  function closeSection() {
+    document.getElementById("gui-ribbon-section").style.display = "none";
+    document.body.style.paddingTop = "0";
+  }
+</script>
+
 <section class="hero one-box">
   <div class="container">
     <div class="row gx-5 mb-5">
@@ -147,9 +207,9 @@
           <div class="mobile-ctas">
             {{- partial "mobile-ctas.html" -}}
           </div>
-
+          <!--
           {{- partial "desktop-ctas.html" -}}
-
+          -->
       </div>
       <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
         <div class="terminal-animation mb-3">
@@ -157,10 +217,20 @@
         </div>
       </div>
     </div>
+    <div class="row mb-5">
+      <div class="col">
+        <h2 class="text-center display-6" style="text-transform:none !important; font-size: 40px; line-height:48px;">two ways to install tea</h2>
+      </div>
+    </div>
+    {{ partial "tea-two-ways.html" . }}
+  </div>
+</section>
+
+<section>
+  <div class="container">
     <div class="row">
       <div class="col">
-        {{- partial "click-to-copy.html" . -}}
+        <hr>
-        <p class="no-installer grid-gray text-center"><span class="tea">tea</span> is a stand&#8208;alone binary, see <a class="install-link" href="https://docs.tea.xyz/getting-started/install-tea/without-installer">our docs</a> for more installation methods.</p>
       </div>
     </div>
   </div>
@@ -689,17 +759,21 @@
       <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
         <div class="twitter-card mb-4">
           <div class="top-bar flex p-1 ps-3">
-            <i class="icon-github black lead"></i>
+            <i class="icon-twitter black lead"></i>
           </div>
           <div class="twitter-content p-xl-5 p-lg-5 p-md-3 p-sm-4 p-4">
             <div class="">
 
             </div>
-            <p class="black">When I ran my script (yarnpkg.com), it was an amazing moment––I realized I have not setup deno yet but <span class="tea">tea magic</span> just did it for me. It was a 'wow' moment... just 'wow'.</p>
+            <p class="black">Have you struggled with @StableDiffusion Web UI?
+Don't understand terminal, Python, etc?
+On #macOS?
+@mxcl the innovative creator of @homebrew has launched - @teaxyz & it is great!
+A GUI & CLI for complex apps, incentives on chain, & much more.</p>
             <hr class="mb-3" style="border-bottom: 1px solid black !important;">
             <div class="flex-start">
-              <img class="avatar" src="/Images/neil-m.png" alt="">
+              <img class="avatar" src="https://pbs.twimg.com/profile_images/1597691964278849536/9Yq0xkyO_400x400.jpg" alt="">
-              <p class="small test-name black">Neil M</p>
+              <p class="small test-name black">Brad Nickel</p>
             </div>
           </div>
         </div>
@@ -744,14 +818,14 @@
       <div class="col">
         <h2 class="display-5 text-center">Ready to start building?<br>All you need is tea.</h2>
         <p class="lead text-center mb-5"><span class="tea">tea</span>’s +pkg syntax embodies our core belief that good tools should just get out of the way so that you can keep making the internet a better place. Access the entire open source ecosystem with one command, compose and combine everything, and enjoy an all-around more delightful dev experience.</p>
-        <div class="bottom-cta">{{- partial "desktop-ctas.html" -}}</div>
+        {{ partial "tea-two-ways.html" . }}
       </div>
     </div>
   </div>
 </section>
 
 <section>
-  <div class="container">
+  <div class="container one-box-down">
     <div class="row">
       <div class="col">
         <img src="/Images/lg-screen-grid.svg" alt="grid-element">
@@ -814,7 +888,7 @@
 </script>
 
 <section>
-  <div class="container two-boxes-down">
+  <div class="container">
     <div class="row">
       <div class="col">
         <h2 class="display-5">OSS wouldn't work without talented contributors like you.</h2>
@@ -831,8 +905,18 @@
   </div>
 </section>
 
+<section class="one-box">
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <img src="/Images/lg-screen-grid.svg" alt="grid-element">
+      </div>
+    </div>
+  </div>
+</section>
+
 <section>
-  <div class="container two-boxes-down">
+  <div class="container">
     <div class="row">
       <div class="col-xl-7 col-lg-7 col-md-6 col-sm-12 col-12 order-xl-2 order-lg-2 order-md-2 order-sm-2 order-2 my-auto ps-xl-4 ps-lg-4">
         <h2 class="display-5">A mission to fix open-source development</h2>
@@ -846,6 +930,65 @@
   </div>
 </section>
 
+<section class="one-box">
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <img src="/Images/lg-screen-grid.svg" alt="grid-element">
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="chai">
+  <div class="container">
+    <div class="row chai-bg one-box pe-xl-5 pe-lg-5" style="border-radius:5px;">
+      <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
+
+      </div>
+      <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 col-12">
+        <h2 class="display-6 white chai-header">And we can't fix OSS with just any tea&hellip; we need some <span style="color:#ff8e00;">CHAI</span></h2>
+        <p>The open source package registry can be thought of as a directed graph, with each package version representing node and dependency relationships as edges. An on-chain graph could align incentives between open source maintainers and users across different projects. It can evaluate the impact of these projects based on their dependencies, and even proportionately reward them. It is difficult to design & implement such a network -- one that knows about every open source package & their dependencies -- but we believe the aligned incentives will yield much better outcomes for our open source maintainers.
+        <p>Chai_v1 is the system that collects all the nodes & edges across all package managers, and verifies the maintainers for each one. It will be pre-populated with packages from tea (300 & counting), brew (6k), crates (104k), PyPI (300k), and npm (1.6M) as nodes, and all their dependencies as edges to ascertain the impact of each one to open source. It will eventually enable users to formalize their project maintainer status with an additional commit message to the main branch of their repo.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  @media only screen and (min-width: 768px) {
+    .chai-bg{
+      background-image: url("/Images/chai-background.jpg") !important;
+      background-attachment: scroll;
+      background-position: left;
+      background-repeat: repeat-y;
+      background-size: cover !important;
+    }
+  }
+  .chai-header{
+    text-transform: none !important;
+  }
+  #chai-btn{
+    height: 40px;
+    width: 290px;
+    text-transform: uppercase;
+  }
+  .chai-code{
+    background-color: #1a1a1a;
+  }
+
+</style>
+
+<section class="one-box">
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <img src="/Images/lg-screen-grid.svg" alt="grid-element">
+      </div>
+    </div>
+  </div>
+</section>
+
 
 <section class="purple-bg">
   <div class="container two-boxes">

src/layouts/page/careers.html

@@ -27,75 +27,94 @@
     </div>
 </section>
 
-    <script>
+<script>
-      // Fetch data from API
+  // Fetch data from API
-      fetch("https://tea.breezy.hr/json?verbose=true")
+  fetch("https://tea.breezy.hr/json?verbose=true")
-        .then(response => response.json())
+    .then(response => response.json())
-        .then(data => {
+    .then(data => {
-          // Loop through data and create card for each item
+      // Check if data is empty
-          data.forEach(item => {
+      if (data.length === 0) {
-            // Create card element
+        // Display message when no jobs are available
-            const card = document.createElement("div");
+        const container = document.getElementById("card-container");
-            card.classList.add("card", "mb-4");
+        const noJobsMessage = document.createElement("div");
 
-            // Create card body element
+        // Insert the custom message
-            const cardBody = document.createElement("div");
+        noJobsMessage.innerHTML = `
-            cardBody.classList.add("card-body", "p-4");
+        <div class="p-5" style="border:1px solid #949494; border-radius:5px;">
+          <h2 class="text-center" style="text-transform:none;font-size:28px;line-height:32px;">No open positions, but stay connected!</h2>
+          <p class="text-center mb-4">We encourage you to become a part of our vibrant community on Discord as we're keen to hire from within. Join our Discord server to engage with like-minded people, stay updated about future opportunities, and become a part of our growing group of OSS enthusiasts.</p>
+          <a href="https://discord.gg/tea-906608167901876256">
+            <button class="hbtn hb-fill-right gui-dl-click" style="width:200px;height:40px;display:block;margin-left:auto;margin-right:auto;">Join Discord</button>
+          </a>
+        </div>
+        `;
 
-            // Add name to card body as a link to the URL
+        container.appendChild(noJobsMessage);
-            const title = document.createElement("a");
+      } else {
-            title.classList.add("card-title", "display-6", "teal");
+        // Loop through data and create card for each item
-            title.href = item.url;
+        data.forEach(item => {
-            title.textContent = item.name;
+          // Create card element
-            cardBody.appendChild(title);
+          const card = document.createElement("div");
+          card.classList.add("card", "mb-4");
 
-            // Add description to card body
+          // Create card body element
-            const description = document.createElement("div");
+          const cardBody = document.createElement("div");
-            description.classList.add("card-text","mt-3","mb-5");
+          cardBody.classList.add("card-body", "p-4");
-            description.innerHTML = item.description.slice(0, 700);
-            cardBody.appendChild(description);
 
-            // Add show more link to card body
+          // Add name to card body as a link to the URL
-            const showMoreLink = document.createElement("a");
+          const title = document.createElement("a");
-            showMoreLink.classList.add("me-3", "teal");
+          title.classList.add("card-title", "display-6", "teal");
-            showMoreLink.href = "#";
+          title.href = item.url;
-            showMoreLink.textContent = "Show more";
+          title.textContent = item.name;
-            showMoreLink.addEventListener("click", event => {
+          cardBody.appendChild(title);
-              event.preventDefault();
-              if (description.innerHTML === item.description) {
-                description.innerHTML = item.description.slice(0, 700);
-                showMoreLink.textContent = "Show more";
-              } else {
-                description.innerHTML = item.description;
-                showMoreLink.textContent = "Show less";
-              }
-            });
-            cardBody.appendChild(showMoreLink);
 
-            // Add url link to card body
+          // Add description to card body
-            const urlLink = document.createElement("a");
+          const description = document.createElement("div");
-            urlLink.classList.add("teal");
+          description.classList.add("card-text","mt-3","mb-5");
-            urlLink.href = item.url;
+          description.innerHTML = item.description.slice(0, 700);
-            urlLink.textContent = "View on BreezyHR";
+          cardBody.appendChild(description);
-            cardBody.appendChild(urlLink);
 
-            // Add card body to card
+          // Add show more link to card body
-            card.appendChild(cardBody);
+          const showMoreLink = document.createElement("a");
-
+          showMoreLink.classList.add("me-3", "teal");
-            // Add card to container
+          showMoreLink.href = "#";
-            const container = document.getElementById("card-container");
+          showMoreLink.textContent = "Show more";
-            const row = document.createElement("div");
+          showMoreLink.addEventListener("click", event => {
-            row.classList.add("row");
+            event.preventDefault();
-            const col = document.createElement("div");
+            if (description.innerHTML === item.description) {
-            col.classList.add("col");
+              description.innerHTML = item.description.slice(0, 700);
-            col.appendChild(card);
+              showMoreLink.textContent = "Show more";
-            row.appendChild(col);
+            } else {
-            container.appendChild(row);
+              description.innerHTML = item.description;
+              showMoreLink.textContent = "Show less";
+            }
           });
-        })
+          cardBody.appendChild(showMoreLink);
-        .catch(error => console.log(error));
-    </script>
 
+          // Add url link to card body
+          const urlLink = document.createElement("a");
+          urlLink.classList.add("teal");
+          urlLink.href = item.url;
+          urlLink.textContent = "View on BreezyHR";
+          cardBody.appendChild(urlLink);
+
+          // Add card body to card
+          card.appendChild(cardBody);
+
+          // Add card to container
+          const container = document.getElementById("card-container");
+          const row = document.createElement("div");
+          row.classList.add("row");
+          const col = document.createElement("div");
+          col.classList.add("col");
+          col.appendChild(card);
+          row.appendChild(col);
+          container.appendChild(row);
+        });
+      }
+    })
+    .catch(error => console.log(error));
+</script>
 
 <style>
 

src/layouts/page/gui.html

@@ -0,0 +1,101 @@
+{{ define "main" }}
+
+<!-- Main container -->
+
+<section class="two-boxes">
+  <div class="container">
+    <div class="row">
+      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 my-auto">
+        <h1 class="display-4">The &#39;Open Store&#39; for Open Source</h1>
+        <p class="mb-4">Introduing the <span class="tea">tea/gui (beta)</span>&#8212; a visual package manager that lets you browse, install, and update open-source software in a snap. Say goodbye to manual updates and hello to streamlined development. Try it today!</p>
+        <p>Download the <span class="tea">tea/gui</span> (beta) for Mac</p>
+          <div style="display:flex;align-items:flex-start;">
+            <div class="">
+              <a href="https://dist.tea.xyz/tea.xyz/gui/tea-latest-arm64.dmg">
+                <button class="hbtn hb-fill-right gui-dl-click" style="width:180px;height:40px;font-size:14px;"><i class="icon-apple"></i>M1/M2 Chip</button>
+              </a>
+            </div>
+            <div class="ms-3">
+              <a href="https://dist.tea.xyz/tea.xyz/gui/tea-latest.dmg">
+                <button class="hbtn hb-fill-right gui-dl-click" style="width:180px;height:40px;font-size:14px;"><i class="icon-apple"></i>Intel Chip</button>
+              </a>
+            </div>
+          </div>
+        </div>
+      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 mt-xl-0 mt-lg-0 mt-md-0 mt-sm-4 mt-4">
+        <img style="width:100%;" src="/Images/gui-screenshot-hero.png" alt="tea/gui">
+      </div>
+      </div>
+    </div>
+</section>
+
+<style media="screen">
+
+  .icon-apple{
+    position: relative;
+    top:2px;
+  }
+
+  h1{
+    font-size:50px !important;
+  }
+
+  h3{
+    font-size:26px !important;
+    line-height: 1.5em;
+  }
+
+  p{
+    font-size: 16px;
+  }
+</style>
+
+<!-- Features -->
+
+<section class="two-boxes-down">
+  <div class="container">
+    <div class="row">
+      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
+        <h3>One-Click Installs</h3>
+        <p>Say goodbye to the days of scavenging through cluttered docs. <span class="tea">tea/gui (beta)</span> enables you to query our expansive pantry and install your desired version of any package with one click. Openai-python, jupyter, youtube-dl, and hundreds more&#8230; all available to you within seconds.</p>
+      </div>
+      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
+        <h3>Easy Updates</h3>
+        <p>Our aim is to enhance your workflow, not disrupt it. <span class="tea">tea/gui (beta)</span> will alert you via desktop notifcations when new updates are available for your installed packages. Your can bulk update everything, or update one-by-one in the event you'd like to exercise some more discretion. </p>
+      </div>
+      <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
+        <h3>Version Management</h3>
+        <p><span class="tea">tea/gui (beta)</span> makes managing your package versions a simply delightful experience. You can prune packages to remove all but the latest version, choose your desired version when installing, and install or add specific versions for previously installed packages.</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Bottom CTA -->
+
+<section class="teal-bg two-boxes">
+  <div class="container">
+    <div class="row">
+      <div class="col">
+        <h3 class="black text-center">Get started with visual package management today!</h3>
+        <p class="black text-center">Download the <span class="tea">tea/gui</span> (beta) for Mac</p>
+        <div class="mb-2" style="display:flex;justify-content:center;">
+          <div style="display:flex;align-items:flex-start;">
+            <div class="">
+              <a href="https://dist.tea.xyz/tea.xyz/gui/tea-latest-arm64.dmg">
+                <button class="hbtn hb-fill-right gui-dl-click" style="width:180px;height:40px;font-size:14px;"><i class="icon-apple"></i>M1/M2 Chip</button>
+              </a>
+            </div>
+            <div class="ms-3">
+              <a href="https://dist.tea.xyz/tea.xyz/gui/tea-latest.dmg">
+                <button class="hbtn hb-fill-right gui-dl-click" style="width:180px;height:40px;font-size:14px;"><i class="icon-apple"></i>Intel Chip</button>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+{{end}}

src/layouts/page/package-detail.html

@@ -15,22 +15,27 @@
         {{ range where $.Site.Data.packages "name" .Title }}
           <p class="mb-5">{{- .desc -}}</p>
           <div class="row">
-            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
+            <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 col-12">
-              {{ if not (eq .package_yml_url "#")}}
+              <!-- {{ if not (eq .package_yml_url "#")}}
                 <a target="_blank" href="{{- .package_yml_url -}}">
-                <button class="hbtn hb-fill-right mb-3" style="width:100% !important;">VIEW ON GITHUB</button>
+                  <button class="hbtn hb-fill-right mb-3" style="width:100% !important;">VIEW ON GITHUB</button>
+                </a>
+              {{end}} -->
+              <a target="_blank" href="tea://packages/{{- .full_name -}}">
+                <button class="hbtn hb-fill-right mb-3" style="width:100% !important;">INSTALL WITH GUI</button>
               </a>
-            {{end}}
             </div>
-            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
+            <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 col-12">
-              {{ if not (eq .homepage "") }}
+              <!-- {{ if not (eq .homepage "") }}
                 <a target="_blank" href="{{- .homepage -}}">
                 <button class="hbtn-light hb-light-fill-right" style="width:100% !important;">VISIT PACKAGE HOME</button>
               </a>
-              {{end}}
+              {{end}} -->
-            {{ end }}
+              <p style="line-height: 60px">don't have tea/gui yet? download <a style="color:aquamarine" href="/gui">here</a></p>
             </div>
           </div>
+
+        {{ end }}
           <div class="row">
             <div class="col">
               {{ range where $.Site.Data.packages "name" .Title }}
@@ -60,90 +65,289 @@
 </section>
 
 
+<script>
+  const browser = {
+    getUserAgent: function() {
+      return window.navigator.userAgent;
+    },
 
-<style>
+    userAgentContains: function(browserName) {
+      browserName = browserName.toLowerCase();
+      return (
+        this.getUserAgent()
+          .toLowerCase()
+          .indexOf(browserName) > -1
+      );
+    },
 
-  .package-thumbnail{
+    isOSX: function() {
-    width: 100%;
+      return this.userAgentContains("Macintosh");
-  }
+    },
 
-  a:hover{
+    isFirefox: function() {
-    text-decoration: none;
+      return this.userAgentContains("firefox");
-  }
+    },
 
-  #purple-bg-btn{
+    isInternetExplorer: function() {
-    background-color: #8000FF;
+      return this.userAgentContains("trident");
-    border: 2px solid #8000FF;
+    },
-  }
+    /**
+     * Detects IE 11 and older
+     * @return {Boolean} Returns true when IE 11 and older
+     */
+    isIE: function() {
+      var ua = this.getUserAgent().toLowerCase();
 
-  #standard-detail-btn:hover{
+      // Test values.
-    background-color: #212020 !important;
+      // Uncomment to check result
-    box-shadow: inset 0vw 0vw 0vw 0.335vw #1a1a1a !important;
-  }
 
-  table{
+      // IE 10
-    color: #fff;
+      // ua = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)';
-    width: 100%;
-  }
 
-  table, th, td {
+      // IE 11
-    border: 1px solid #949494;
+      // ua = 'Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko/20100101 Firefox/12.0';
-    font-family: "sono", sans-serif;
-    padding: 20px;
-  }
 
-  .expand{
+      var msie = ua.indexOf("msie");
-    cursor: pointer;
+      if (msie > 0) {
-  }
+        // IE 10 or older
+        return true;
+      }
 
-  .tea-icon{
+      var trident = ua.indexOf("trident/");
-    display:block;
+      if (trident > 0) {
-    text-align:center;
+        // IE 11
-    animation: pulse 1s infinite;
+        return true;
-  }
+      }
-  @keyframes pulse {
-    0% { opacity: 1; }
-    50% { opacity: 0.5; }
-    100% { opacity: 1; }
-  }
-  #bottle-preloader {
-    width: 100%;
-    height: 200px;
-    background: #1a1a1a;
-    border: 1px solid #949494;;
-  }
-  #bottle-status {
-    width: 100%;
-    height: 200px;
-    position: relative;
-    background-position: center;
-  }
-  #bottle-loading-text {
-    font-size: 20px;
-    text-align: center;
-    animation: pulse 1s infinite !important;
-  }
 
-  @media screen and (max-width: 576px) {
+      // other browser
+      return false;
+    },
 
-    .bottles-container{
+    isEdge: function() {
-      padding: 0px !important;
+      var ua = this.getUserAgent().toLowerCase();
+
+      // Test values.
+      // Uncomment to check result
+
+      // Edge
+      // ua = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10240';
+
+      var edge = ua.indexOf("edge");
+      if (edge > 0) {
+        return true;
+      }
+
+      return false;
+    },
+
+    isChrome: function() {
+      // IE11 returns undefined for window.chrome
+      // and new Opera 30 outputs true for window.chrome
+      // but needs to check if window.opr is not undefined
+      // and new IE Edge outputs to true for window.chrome
+      // and if not iOS Chrome check
+      const isChromium = window.chrome;
+      const winNav = window.navigator;
+      const vendorName = winNav.vendor;
+      const isOpera = typeof window.opr !== "undefined";
+      const isIEedge = winNav.userAgent.indexOf("Edge") > -1;
+      const isIOSChrome = winNav.userAgent.match("CriOS");
+      return (
+        (isChromium !== null &&
+          typeof isChromium !== "undefined" &&
+          vendorName === "Google Inc." &&
+          isOpera === false &&
+          isIEedge === false) ||
+        isIOSChrome
+      );
+    },
+
+    isOpera: function() {
+      return this.userAgentContains(" OPR/");
+    }
+  };
+
+  let DEFAULT_CUSTOM_PROTOCOL_FAIL_CALLBACK_TIMEOUT;
+
+  const registerEvent = (target, eventType, cb) => {
+    if (target.addEventListener) {
+      target.addEventListener(eventType, cb);
+      return {
+        remove: function() {
+          target.removeEventListener(eventType, cb);
+        }
+      };
+    } else {
+      target.attachEvent(eventType, cb);
+      return {
+        remove: function() {
+          target.detachEvent(eventType, cb);
+        }
+      };
+    }
+  };
+
+  const createHiddenIframe = (target, uri) => {
+    let iframe = document.createElement("iframe");
+    iframe.src = uri;
+    iframe.id = "hiddenIframe";
+    iframe.style.display = "none";
+    target.appendChild(iframe);
+
+    return iframe;
+  };
+
+  const openUriWithHiddenFrame = (uri, failCb, successCb) => {
+    const timeout = setTimeout(function() {
+      failCb();
+      handler.remove();
+    }, DEFAULT_CUSTOM_PROTOCOL_FAIL_CALLBACK_TIMEOUT);
+
+    let iframe = document.querySelector("#hiddenIframe");
+    if (!iframe) {
+      iframe = createHiddenIframe(document.body, "about:blank");
     }
 
-    table, th, td {
+    let onBlur = () => {
-      border: 1px solid #949494;
+      clearTimeout(timeout);
-      font-family: "sono", sans-serif;
+      handler.remove();
-      padding: 10px;
+      successCb();
-      font-size: 12px;
+    };
+    const handler = registerEvent(window, "blur", onBlur);
+
+    iframe.contentWindow.location.href = uri;
+  };
+
+  const openUriWithTimeoutHack = (uri, failCb, successCb) => {
+    const timeout = setTimeout(function() {
+      failCb();
+      handler.remove();
+    }, DEFAULT_CUSTOM_PROTOCOL_FAIL_CALLBACK_TIMEOUT);
+
+    //handle page running in an iframe (blur must be registered with top level window)
+    let target = window;
+    while (target.parent && target != target.parent) {
+      target = target.parent;
     }
 
-    .title-col{
+    let onBlur = () => {
-      padding: 4vw !important;
+      clearTimeout(timeout);
+      handler.remove();
+      successCb();
+    };
 
+    const handler = registerEvent(target, "blur", onBlur);
+
+    window.location.href = uri;
+  };
+
+  const openUriUsingFirefox = (uri, failCb, successCb) => {
+    let iframe = document.querySelector("#hiddenIframe");
+
+    if (!iframe) {
+      iframe = createHiddenIframe(document.body, "about:blank");
     }
 
-  }
+    try {
+      iframe.contentWindow.location.href = uri;
+      successCb();
+    } catch (e) {
+      if (e.name == "NS_ERROR_UNKNOWN_PROTOCOL") {
+        failCb();
+      }
+    }
+  };
 
+  const openUriWithMsLaunchUri = (uri, failCb, successCb) => {
+    navigator.msLaunchUri(uri, successCb, failCb);
+  };
+
+  const getBrowserVersion = () => {
+    const ua = window.navigator.userAgent;
+    let tem,
+      M =
+        ua.match(
+          /(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i
+        ) || [];
+    if (/trident/i.test(M[1])) {
+      tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
+      return parseFloat(tem[1]) || "";
+    }
+    if (M[1] === "Chrome") {
+      tem = ua.match(/\b(OPR|Edge)\/(\d+)/);
+      if (tem != null) {
+        return parseFloat(tem[2]);
+      }
+    }
+    M = M[2]
+      ? [M[1], M[2]]
+      : [window.navigator.appName, window.navigator.appVersion, "-?"];
+    if ((tem = ua.match(/version\/(\d+)/i)) != null) M.splice(1, 1, tem[1]);
+    return parseFloat(M[1]);
+  };
+
+  const protocolCheck = (uri, failCb, successCb, timeout = 2000, unsupportedCb) => {
+    const failCallback = () => {
+      failCb && failCb();
+    };
+
+    const successCallback = () => {
+      successCb && successCb();
+    };
+
+    const unsupportedCallback = () => {
+      unsupportedCb && unsupportedCb();
+    };
+
+    const openUri = () => {
+      if (browser.isFirefox()) {
+        const browserVersion = getBrowserVersion();
+        if (browserVersion >= 64) {
+          openUriWithHiddenFrame(uri, failCallback, successCallback);
+        } else {
+          openUriUsingFirefox(uri, failCallback, successCallback);
+        }
+      } else if (browser.isChrome()) {
+        openUriWithTimeoutHack(uri, failCallback, successCallback);
+      } else if (browser.isOSX()) {
+        openUriWithHiddenFrame(uri, failCallback, successCallback);
+      } else {
+        //not supported, implement please
+        unsupportedCallback();
+      }
+    };
+
+    if (timeout) {
+      DEFAULT_CUSTOM_PROTOCOL_FAIL_CALLBACK_TIMEOUT = timeout;
+    }
+
+    if (browser.isEdge() || browser.isIE()) {
+      //for IE and Edge in Win 8 and Win 10
+      openUriWithMsLaunchUri(uri, failCb, successCb);
+    } else {
+      if (document.hasFocus()) {
+        openUri();
+      } else {
+        let focusHandler = registerEvent(window, "focus", () => {
+          focusHandler.remove();
+          openUri();
+        });
+      }
+    }
+  };
+
+  const fullName = "{{.Params.full_name}}".trim();
+  console.log("fullName:"+fullName);
+
+  protocolCheck(
+    "tea://packages/"+fullName,
+    () => {
+      console.log("Custom protocol not found.");
+    },
+    () => {
+      console.log("Custom protocol found and opened the file successfully.");
+    }, 5000
+  );
+</script>
 
-</style>
 {{ end }}

src/layouts/page/packages.html

@@ -8,12 +8,6 @@
     {{- partial "package-grid.html" . -}}
   </span>
 
-<!-- Mobile Package Display -->
-
-  <span class="swiper-package-display">
-    {{- partial "swiper.html" . -}}
-  </span>
-
 <hr>
 
 <section>
@@ -48,6 +42,128 @@
     background-position: scroll;
     border-radius: 10px;
   }
+  .detail-btn{
+    width: 100px !important;
+    height: 30px;
+    padding:0px;
+  }
+
+  .package-title{
+    font-size: 1.5rem;
+  }
+
+  div.card.card-thumbnail{
+  background-color: #1a1a1a;
+  transition: all .3s;
+  }
+
+  .card-img-top {
+  position: relative;
+  }
+
+  .detail-btn{
+  position: relative;
+  float:right!important;
+  right: 0;
+  }
+
+  @media only screen and (min-width: 576px) {
+
+  .package-image{
+    box-shadow: 0px 0px 12px #0c0c0c !important;
+  }
+
+  figure{
+    transition: 0.2s ease-in-out;
+  }
+
+  figure:hover{
+    transform: scale(1.02);
+  }
+
+  }
+
+  .card-thumb-label i{
+
+  }
+
+  .card-thumb-label {
+    position: absolute;
+    background: rgba(255,255,255,0.9);
+    left: 0;
+    bottom: 0vw;
+    padding: 1.116vw;
+    text-align: left;
+    width: 90%;
+    height: 50%;
+  }
+
+  .card-thumb-label h3 {
+    color: black;
+    margin: 0px 0px 0.5vw 0vw;
+    padding: 0px;
+  }
+
+  .card-thumb-label h4 {
+    color: black;
+    margin: 0px;
+    padding: 0px;
+  }
+
+  .card-thumbnail{
+    background: none;
+    border-radius: 0px !important;
+    border: 1px solid #949494;
+  }
+
+  .thumbnail-body{
+    display: flex;
+    border-radius: 0px !important;
+    padding: 0vw;
+    justify-content: space-between;
+  }
+
+  .card-img-top{
+    border-radius: 0px;
+  }
+
+  .card-text{
+    float:left;
+    position: relative;
+    font-size: .8rem;
+    top:2px;
+  }
+
+  .card-text-container{
+    float:left;
+    position: relative;
+    width:48%;
+    display: flex;
+  }
+
+  .thumbnail-body-mobile{
+    display: none;
+  }
+
+  @media only screen and (max-width: 576px) {
+
+  .card-thumb-label i{
+    font-size: 28px;
+  }
+
+  .card-thumb-label h3 {
+    color: black;
+    font-size: 28px;
+    line-height: 36px;
+  }
+
+  .card-thumb-label h4 {
+    color: black;
+    font-size: 20px;
+    line-height: 26px;
+  }
+
+  }
 
 </style>
 

src/layouts/page/press.html

@@ -6,11 +6,8 @@
       <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
         <h1>Press</h1>
         <div class="one-box-down">
-          <p class="lead mb-5" style="margin-bottom: 0px;">Tea Inc. is a Puerto Rico-based corporation that is building the open-source toolkit that makes development possible and builds the internet. Developers can work on any platform, CI/CD on any platform, deploy on any platform; Tea abstracts this detail away so developers can get on with the work that matters. Those interested in joining the team fixing how open-source is funded should reach out through Telegram or Discord at https://linktr.ee/teaxyz.</p>
+          <p class="lead mb-5" style="margin-bottom: 0px;"><span class="tea">tea</span> is a revolutionary, cross&#8208;platform package manager with a mission to leverage the power of blockchain to remunerate open&#8208;source developers for their valuable contributions to the internet. We&#39;ve got a lot of exciting things coming over the horizon, so be sure to join our community and stay tuned for updates. For media and publications, you can find a collection of our brand assets and notable press pieces below. For inquiries, please contact us via <a class="press-link" href="mailto:press@tea.xyz?subject=press inquiry">press@tea.xyz</a>.</p>
         </div>
-        <a href="mailto:press@tea.xyz?subject=Press Inquiry">
-          <button class="detail-btn-large"><i class="icon-enter-arrow"></i>CONTACT US</button>
-        </a>
       </div>
       <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
 
@@ -19,6 +16,14 @@
   </div>
 </section>
 
+<style>
+
+  .press-link:hover{
+    color:#00ffd0 !important;
+  }
+
+</style>
+
 <hr>
 
 <section class="one-box">
@@ -28,7 +33,7 @@
         <h3>Assets</h3>
       </div>
     </div>
-
+<!--
     <div class="row one-box-down">
       <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12">
         <h5>Type</h5>
@@ -49,11 +54,10 @@
         </a>
       </div>
     </div>
-
+-->
     <div class="one-box-down">
       <hr>
     </div>
-
     <div class="row">
       <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-12">
         <h5>Type</h5>
@@ -74,7 +78,6 @@
         </a>
       </div>
     </div>
-
   </div>
 </section>
 
@@ -160,18 +163,14 @@
   <div class="container">
     <div class="row">
       <div class="col">
-        <h3>Founder Bios</h3>
+        <h3 class="mb-5">Founder Bio</h3>
       </div>
     </div>
     <div class="row gx-5">
-      <div class="col-xl-6 ">
+      <div class="col">
         <h5>Max Howell</h5>
         <p>Co-Founder and CEO Max Howell created the open-source software package management system Homebrew, also known as “brew,” which grew into the most contributed‐to open source software program in the world. Homebrew has been used by tens of millions of developers worldwide and has served as the backbone for the largest technology corporations to build their products without directly contributing to its development.</p>
       </div>
-      <div class="col">
-        <h5>Timothy Lewis</h5>
-        <p>Co-Founder Timothy Lewis began his career in 2002 at e-velocity technical consulting as a  Data Center Engineer for two years, after that he held any roles as a Consulting Engineer, worked at Oracle, Kaiser Permanente until he switched over to Blockchain Development in 2017 and has been involved in that area ever since. He now is the founder of a non-profit called DEVxDAO which supports DAO which provides grants to build cohesion and longevity in decentralized systems at large.</p>
-      </div>
     </div>
   </div>
 </section>

src/layouts/partials/click-to-copy.html

@@ -1,13 +1,15 @@
-<h3 class="install-label text-center display-6 mb-4">Install tea by running our one-liner:</h3>
+<div class="flex pt-1 pb-1 ps-4 pe-1 mb-3 black-bg copy-section" style="max-width: 800px; margin-left:auto; margin-right:auto; height:60px; border: 1px solid #949494;">
-<div class="flex pt-1 pb-1 ps-4 pe-1 mb-4 black-bg" style="max-width: 800px; margin-left:auto; margin-right:auto; height:80px; border: 1px solid #949494; border-radius: 5px;">
+  <code class="white copy-text" style="font-size:16px;">sh <(curl tea.xyz)</code>
-  <code id="copy-text" class="white lead">sh <(curl tea.xyz)</code>
+  <button class="hbtn hb-fill-right copy-button" style="height:100%; width:30%;">Copy</button>
-  <button class="hbtn hb-fill-right" id="copy-button" style="height:100%;">Copy</button>
 </div>
 
 <script>
 
-  $("#copy-button").on("click", function() {
+  $(".copy-button").on("click", function() {
-    var copyText = "sh <(curl https://tea.xyz)";
+    var copyText = $(this).siblings(".copy-text").text();
+    // Update the command to copy 'sh <(curl https://tea.xyz)'
+    copyText = copyText.replace("sh <(curl tea.xyz)", "sh <(curl https://tea.xyz)");
+
     var tempInput = document.createElement("input");
     tempInput.style = "position: absolute; left: -1000px; top: -1000px";
     tempInput.value = copyText;
@@ -17,11 +19,11 @@
     document.body.removeChild(tempInput);
 
     // Change the button text to 'Copied'
-    var button = $("#copy-button");
+    var button = $(this);
     var originalText = button.text();
     button.text("Copied!");
 
-    // Change the button text back to original after 5 seconds
+    // Change the button text back to original after 2 seconds
     setTimeout(function() {
       button.text(originalText);
     }, 2000);

src/layouts/partials/desktop-ctas.html

@@ -6,8 +6,8 @@
     </a>
   </div>
   <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
-    <a href="https://github.com/teaxyz/cli">
+    <a href="https://www.producthunt.com/posts/tea?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tea" class="product_hunt">
-      <button class="hbtn-light hb-light-fill-right github-click-secondary" style="width:100% !important;">GITHUB <span class="stargazers" style="text-transform:uppercase;"></span></button>
+      <button class="hbtn-light hb-light-fill-right github-click-secondary" style="width:100% !important;">PRODUCT HUNT</button>
     </a>
   </div>
 </div>

src/layouts/partials/footer-content.html

@@ -24,14 +24,14 @@
 
         </div>
       </div>
-      <div class="col-xl-2 col-lg-2 col-md-4 col-sm-12 col-12 mt-5 ps-xl-5">
+      <div class="col-xl-2 col-lg-2 col-md-4 col-sm-12 col-12 ps-xl-5 mt-3">
         <h6 class="white mt-2">Quick Links</h6>
         <a class="footer-link" href="/blog/">blog</a><br>
         <a class="footer-link" href="/careers/">careers</a><br>
         <a class="footer-link" href="/privacy-policy/">privacy policy</a><br>
         <a class="footer-link" href="/terms-of-use/">terms of use</a><br>
       </div>
-      <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 mt-5 ps-3" style="margin-left:auto;">
+      <div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 col-12 ps-3 mt-3" style="margin-left:auto;">
         <h6 class="white mb-3 mt-2">Enter your email to join our newsletter:</h6>
           <div class="klaviyo-form-RqTcUf mb-2"></div>
         <p class="small grid-gray">We will never share your information with anyone else; this is just for the occasional newsletter. You can learn more by reading our <a href="/privacy-policy/" style="color:#00ffd0 !important;">privacy policy</a>. </p>
@@ -46,9 +46,10 @@
 </section>
 
 <style>
-
   .footer-link:hover{
     color: #00ffd0;  
+  .small{
+    line-height: 22px;
   }
 
   #email_52020276{

src/layouts/partials/head.html

@@ -56,6 +56,7 @@
       integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <link rel="apple-touch-icon-precomposed" href="/favicon-180.png">
     <link rel="stylesheet" href="/css/homepage.css">
+    <link rel="stylesheet" href="/css/bottle-style.css">
     <link rel="stylesheet" href="/css/typography.css">
     <link rel="stylesheet" href="/css/navbar.css">
     <link rel="stylesheet" href="/css/generative-art.css">
@@ -79,23 +80,39 @@
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Prompt:wght@700&display=swap"
       rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap" rel="stylesheet">
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:image:alt" content="sh &lt;(curl tea.xyz)">
-    <meta name="twitter:title" content="tea.">
-    <meta name="twitter:site" content="@teaxyz_">
-    <meta name="twitter:image" content="http://www.tea.xyz.s3-website-us-east-1.amazonaws.com/cover.png">
-    <meta name="twitter:description" content="the next-generation, cross‐platform package manager">
-    <meta name="twitter:creator" content="@mxcl">
 
-    <meta property="og:url" content="http://tea.xyz" />
+    <meta name="twitter:creator" content="@mxcl">
-    <meta property="og:type" content="website" />
+    {{ if eq .Params.layout "package-detail" }}
-    <meta property="og:title" content="tea.xyz" />
+      <meta name="twitter:card" content="summary_large_image">
-    <meta property="og:description" content="the next-generation, cross‐platform package manager" />
+      <meta name="twitter:image:alt" content="sh &lt;(curl tea.xyz) +{{ .Params.full_name }}">
-    <meta property="og:image" content="http://www.tea.xyz.s3-website-us-east-1.amazonaws.com/cover.png" />
+      <meta name="twitter:title" content="tea | {{ .Params.title }}">
-    <meta property="og:image:alt" content="sh &lt;(curl tea.xyz)" />
+      <meta name="twitter:site" content="@teaxyz_">
-    <meta property="og:site_name" content="Tea, Inc.">
+      <meta name="twitter:image" content="{{- .Params.og_image_url -}}">
+      <meta name="twitter:description" content="{{ .Params.Description }}">
+      <meta property="og:url" content="https://tea.xyz/+{{ .Params.full_name }}" />
+      <meta property="og:type" content="website" />
+      <meta property="og:title" content="tea | {{ .Params.title }}" />
+      <meta property="og:description" content="{{ .Params.Description }}" />
+      <meta property="og:image" content="{{- .Params.og_image_url -}}" />
+      <meta property="og:image:alt" content="sh &lt;(curl tea.xyz) +{{ .Params.full_name }}" />
+      <meta property="og:site_name" content="tea.xyz">
+    {{ else }}
+      <meta name="twitter:card" content="summary_large_image">
+      <meta name="twitter:image:alt" content="sh &lt;(curl tea.xyz)">
+      <meta name="twitter:title" content="{{ .Params.title }}">
+      <meta name="twitter:site" content="@teaxyz_">
+      <meta name="twitter:image" content="http://www.tea.xyz.s3-website-us-east-1.amazonaws.com/cover.png">
+      <meta name="twitter:description" content="{{ .Params.Description }}">
+      <meta property="og:url" content="https://tea.xyz" />
+      <meta property="og:type" content="website" />
+      <meta property="og:title" content="{{ .Params.title }}" />
+      <meta property="og:description" content="{{ .Params.Description }}" />
+      <meta property="og:image" content="http://www.tea.xyz.s3-website-us-east-1.amazonaws.com/cover.png" />
+      <meta property="og:image:alt" content="sh &lt;(curl tea.xyz)" />
+      <meta property="og:site_name" content="tea.xyz">
+    {{ end }}
     <meta name="facebook-domain-verification" content="0fsbdl7joh0gha23zbhtovtpn0z0cl" />
-    <meta name="description" content="The tools that build the internet have steeped too long. For the past two decades, big tech has made trillions off the generosity of visionary developers and web pioneers… never thanking, never mentioning, and certainly never paying. At tea, we’re brewing something to change that by enabling developers (you) to continue doing what you love, while earning what you deserve.">
+    <meta name="description" content="tea is the next-generation, cross-platform package manager from the creator of brew.">
 
     <!-- Hotjar Tracking Code for https://tea.xyz -->
     <script>
@@ -130,6 +147,8 @@
       }
     </style>
 
+    <a href="https://www.producthunt.com/posts/tea?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tea" target="_blank" id="product_hunt"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=392097&theme=light" alt="tea - The&#0032;Homebrew&#0032;replacement&#0032;from&#0032;the&#0032;maker&#0032;of&#0032;Homebrew | Product Hunt" style="width: 250px; height: 54px; position: fixed; right:20px; bottom: 20px; z-index: 100;" width="250" height="54" /></a>
+
     <script>
       const q = window.location.search.match(/[\^\?&]store=[^&]*/)
       if (q) {

src/layouts/partials/package-grid.html

@@ -5,7 +5,6 @@
     <div class="row">
       <div class="col">
         {{- partial "search-menu.html" "searchTermDesktop" -}}
-        <hr>
 
         <div class="package-grid">
 
@@ -30,6 +29,11 @@
 </section>
 
 <style>
+
+  .grid-package-display{
+    display:block;
+  }
+
   .container.small {
     padding-top: 1em;
     padding-bottom: 1em;
@@ -63,7 +67,7 @@
   }
   @media only screen and (max-width: 576px) {
     #loadMoreSection {
-      display: none;
+      display: block;
     }
   }
 
@@ -89,8 +93,10 @@
     overflow: hidden;
   }
 </style>
-<script async src="https://unpkg.com/string-similarity@4.0.1/umd/string-similarity.min.js"></script>
+
-<script language="javascript" type="text/javascript">
+<script language="javascript" type="module">
+  import Fuse from 'https://cdn.jsdelivr.net/npm/fuse.js@6.6.2/dist/fuse.esm.js'
+
   const sortOptions = {
     popularity: 'popularity',
     last_modified: 'last_modified',
@@ -104,6 +110,15 @@
   const grid = document.getElementById('packageGrid');
   const packagesCache = Array.from(grid.children).filter((e) => e.dataset && e.dataset.name);
 
+  // get reference to search input and set its placeholder
+  const searchInput = document.getElementById('searchTermDesktop');
+  searchInput.placeholder = `Search ${packagesCache.length} packages`;
+
+  const packagesIndex = new Fuse(packagesCache.map((p) => p.dataset), {
+    keys: ["name", "maintainer", "description"],
+    minMatchCharLength: 3,
+    threshold: 0.3
+  });
   function debounce(fn, delay) {
     var timer = null;
     return function () {
@@ -120,20 +135,21 @@
     const noResult = document.getElementById('noResult');
     if (searchInput.value) {
       const term = searchInput.value;
+      const res = packagesIndex.search(term, { limit: 5 });
+
+      const matchedPackages = res.map((r) => r.item.name);
       const packages = getPackageThumbs();
-      for(let pkg of packages) {
+
-        pkg.match_score = getMatchScore(term, pkg.dataset);
+      const sortedPackages = [
-      }
+        ...matchedPackages.map((mp) => packages.find((p) => p.dataset.name === mp)),
-      const sortedPackages = packages.sort((a, b) => {
+        ...packages.filter((p) => !matchedPackages.includes(p.dataset.name)),
-        return b.match_score - (a ? a.match_score : 0);
+      ]
-      });
 
       const grid = document.getElementById('packageGrid');
       grid.textContent = '';
       let searchCount = 0;
       for(const sp of sortedPackages) {
-        const score = getMatchScore(term, sp.dataset);
+        if (matchedPackages.includes(sp.dataset.name)) {
-        if (score > 20) {
           sp.classList.remove('hidden');
           searchCount++;
         } else {
@@ -209,14 +225,6 @@
     }
   }
 
-  function getMatchScore(term, dataset) {
-    // provide higher value with name
-    const { name, maintainer, description } = dataset;
-    const exactMatch = [maintainer, name].join(" ").toLocaleLowerCase().includes(term.toLocaleLowerCase());
-    const nameScore = stringSimilarity.compareTwoStrings(name, term);
-    const descriptionScore = stringSimilarity.compareTwoStrings(description, term);
-    return (nameScore*80) + (descriptionScore*20) + (exactMatch ? 100 : 0);
-  }
 
   const loadMoreButton = document.getElementById('loadMorePackagesBtn');
   if (showAllPackages) {

src/layouts/partials/package-thumbnail.html

@@ -3,7 +3,7 @@
     <div class="p-3">
     <figure class="card-img-top" >
       <img class="package-image" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
-      <article class="card-thumb-label">
+      <article class="card-thumb-label p-3">
         <i class="icon-tea-logo-iconasset-1 lead" style="color:#1a1a1a;"></i>
         <h3 class="package-title mb-1">{{- .name -}}</h3>
         {{ if not (eq .maintainer "") }}
@@ -33,191 +33,3 @@
   </div>
   </div>
 </div>
-
-<style>
-
-.detail-btn{
-  width: 100px !important;
-  height: 30px;
-  padding:0px;
-}
-
-.package-title{
-  font-size: 1.5rem;
-}
-
-div.card.card-thumbnail{
-background-color: #1a1a1a;
-transition: all .3s;
-}
-
-.card-img-top {
-position: relative;
-}
-
-.detail-btn{
-position: relative;
-float:right!important;
-right: 0;
-}
-
-@media only screen and (min-width: 576px) {
-
-.package-image{
-  box-shadow: 0px 0px 12px #0c0c0c !important;
-}
-
-figure{
-  transition: 0.2s ease-in-out;
-}
-
-figure:hover{
-  transform: scale(1.02);
-}
-
-}
-
-.card-thumb-label i{
-
-}
-
-.card-thumb-label {
-  position: absolute;
-  background: rgba(255,255,255,0.9);
-  left: 0;
-  bottom: 0vw;
-  padding: 1.116vw;
-  text-align: left;
-  width: 90%;
-  height: 50%;
-}
-
-.card-thumb-label h3 {
-  color: black;
-  margin: 0px 0px 0.5vw 0vw;
-  padding: 0px;
-}
-
-.card-thumb-label h4 {
-  color: black;
-  margin: 0px;
-  padding: 0px;
-}
-
-.card-thumbnail{
-  background: none;
-  border-radius: 0px !important;
-  border: 1px solid #949494;
-}
-
-.thumbnail-body{
-  display: flex;
-  border-radius: 0px !important;
-  padding: 0vw;
-  justify-content: space-between;
-}
-
-.card-img-top{
-  border-radius: 0px;
-}
-
-.card-text{
-  float:left;
-  position: relative;
-  font-size: .8rem;
-  top:2px;
-}
-
-.card-text-container{
-  float:left;
-  position: relative;
-  width:48%;
-  display: flex;
-}
-
-.thumbnail-body-mobile{
-  display: none;
-}
-
-@media only screen and (max-width: 576px) {
-
-.card-thumb-label i{
-  font-size: 5vw;
-}
-
-.card-thumb-label {
-  position: absolute;
-  background: rgba(255,255,255,0.9);
-  left: 0;
-  bottom: 0;
-  padding: 3vw;
-  text-align: left;
-  width: 100%;
-  height: 50%;
-}
-
-.card-thumb-label h3 {
-  color: black;
-  font-size: 6.8vw;
-  line-height: 6.8vw;
-  margin: 0px 0px 1vw 0vw;
-  padding: 0px;
-}
-
-.card-thumb-label h4 {
-  color: black;
-  font-size: 3vw;
-  line-height: 3vw;
-  margin: 0px;
-  padding: 0px;
-}
-
-.card-thumbnail{
-  background: none;
-  border-radius: 0px !important;
-  border: none;
-}
-
-.thumbnail-body{
-  border-radius: 0px !important;
-  padding: 0vw;
-  display:none;
-}
-
-.thumbnail-body-mobile{
-  background-color: #8000ff;
-  padding: 1.25vw 0vw !important;
-}
-
-.card-img-top{
-  border-radius: 0px;
-  margin-bottom: 0vw;
-}
-
-.detail-btn-mobile{
-  background:none;
-  border:none;
-  color: white;
-  font-family: "pp-neue-machina", sans-serif;
-  font-size: 4vw;
-  width: 100%;
-  height: 100%;
-  text-transform: uppercase;
-  padding-top: 2vw !important;
-}
-
-.detail-btn-mobile .icon-enter-arrow{
-  display: inline-block;
-  position: relaitve;
-  margin-right: 2vw;
-  transition: 0.2s ease-in-out;
-}
-
-.detail-btn-mobile:hover .icon-enter-arrow{
-  display: inline-block;
-  transform: rotate(-45deg) !important;
-}
-
-}
-
-</style>

src/layouts/partials/search-menu.html

@@ -5,7 +5,8 @@
                 <div class="icon">
                 <i class="icon-search-icon"></i>
                 </div>
-                <input id="{{- . -}}" type="search" placeholder="search_" />
+                <!-- Save the input element to a variable to be able to refer to it later -->
+                <input id="{{- . -}}" type="search" placeholder="Search packages" />
             </div>
             {{- partial "sort-dropdown.html" -}}
         </div>
@@ -13,7 +14,6 @@
 </section>
 
 <style>
-
   .icon-search-icon{
     font-size: 30px;
     color: #949494;
@@ -38,7 +38,7 @@
     color:#00ffd0;
     text-transform:uppercase;
     margin-bottom: -5px;
-    min-width: 60%;
+    min-width: 100%;
     padding: 0px;
     background-color: #1a1a1a !important;
     border: none;

src/layouts/partials/tea-two-ways.html

@@ -0,0 +1,52 @@
+<div class="row">
+  <div class="col-xl-6 col-lg-6 col-mg-6 col-sm-12 col-12 ps-5 pe-5 mb-xl-0 mb-lg-0 mb-md-0 mb-sm-5 mb-5 teacli-col">
+    <h3 class="text-center" style="font-size:28px; line-height:32px;">Download tea/gui (beta) for macOS</h3>
+    <p class="text-center mb-4">A new visual package manager that everyone can use.</p>
+    <div class="row mb-3 gx-3">
+      <div class="col">
+        <a href="https://dist.tea.xyz/tea.xyz/gui/tea-latest-arm64.dmg">
+          <button class="hbtn hb-fill-right gui-dl-click" style="width:100%;"><i class="icon-apple"></i>M1/M2 Chip</button>
+        </a>
+      </div>
+      <div class="col">
+        <a href="https://dist.tea.xyz/tea.xyz/gui/tea-latest.dmg">
+          <button class="hbtn hb-fill-right gui-dl-click" style="width:100%;"><i class="icon-apple"></i>Intel Chip</button>
+        </a>
+      </div>
+    </div>
+    <p class="grid-gray text-center small twoway-boiler">And head over to <a class="install-link" href="https://www.producthunt.com/posts/tea">Product Hunt</a> for more info (and maybe give us an upvote, while you're at it).</p>
+  </div>
+  <div class="col-xl-6 col-lg-6 col-mg-6 col-sm-12 col-12 ps-5 pe-5">
+    <h3 class="text-center" style="font-size:28px; line-height:32px;">Copy our one-liner to your terminal</h3>
+    <p class="text-center mb-4">Best for developers who are used to working with CLIs.</p>
+    {{- partial "click-to-copy.html" . -}}
+    <p class="no-installer grid-gray text-center small twoway-boiler"><span class="tea">tea</span> is a stand&#8208;alone binary. See <a class="install-link" href="https://docs.tea.xyz/getting-started/install-tea/without-installer">our docs</a> for more installation methods, including&nbsp;<span class="tea brew-install no-break pe-2">brew install</span>&nbsp;.</p>
+  </div>
+</div>
+
+<style>
+
+  .twoway-boiler::selection,
+  .install-link::selection,
+  .tea::selection{
+    background-color: #00ffd0;
+    color: #1a1a1a;
+  }
+
+  .twoway-boiler{
+    font-size: 16px;
+    line-height: 26px;
+    color: #e1e1e1 !important;
+  }
+
+  .brew-install{
+    border: 1px solid gray;
+    border-radius: 4px;
+    background-color: #2B2A2A;
+  }
+
+  .no-break::before {
+    content: "\00a0"; /* non-breaking space character */
+  }
+
+</style>

src/static/css/bottle-style.css

@@ -0,0 +1,82 @@
+/* Styling for bottle table on package detail pages */
+
+.package-thumbnail{
+  width: 100%;
+}
+
+a:hover{
+  text-decoration: none;
+}
+
+#purple-bg-btn{
+  background-color: #8000FF;
+  border: 2px solid #8000FF;
+}
+
+#standard-detail-btn:hover{
+  background-color: #212020 !important;
+  box-shadow: inset 0vw 0vw 0vw 0.335vw #1a1a1a !important;
+}
+
+table{
+  color: #fff;
+  width: 100%;
+}
+
+table, th, td {
+  border: 1px solid #949494;
+  font-family: "sono", sans-serif;
+  padding: 20px;
+}
+
+.expand{
+  cursor: pointer;
+}
+
+.tea-icon{
+  display:block;
+  text-align:center;
+  animation: pulse 1s infinite;
+}
+@keyframes pulse {
+  0% { opacity: 1; }
+  50% { opacity: 0.5; }
+  100% { opacity: 1; }
+}
+#bottle-preloader {
+  width: 100%;
+  height: 200px;
+  background: #1a1a1a;
+  border: 1px solid #949494;;
+}
+#bottle-status {
+  width: 100%;
+  height: 200px;
+  position: relative;
+  background-position: center;
+}
+#bottle-loading-text {
+  font-size: 20px;
+  text-align: center;
+  animation: pulse 1s infinite !important;
+}
+
+@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;
+
+  }
+
+}

src/static/css/homepage.css

@@ -93,3 +93,55 @@ mark{
 .flex.column {
   flex-direction: column;
 }
+
+.subscribe-collapse{
+  display:none;
+}
+
+.klaviyo-form-WxjYGS{
+  border: none !important;
+  padding: 0px !important;
+}
+
+.form-container{
+  border: 1px solid #949494;
+  border-radius: 5px !important;
+  height: 50px;
+}
+
+#email{
+  width:100%;
+  height: 100% !important;
+  background-color: #1a1a1a;
+  border:none !important;
+  color: white;
+  font-family: "inter", sans-serif;
+  border-radius: 5px;
+}
+#email-btn{
+  text-transform: uppercase !important;
+}
+.email-send{
+  text-transform: uppercase !important;
+  width:20% !important;
+  border-radius: 3px;
+  height: 100% !important;
+}
+#email_62853377{
+  background-color: #1a1a1a !important;
+  border-radius: 0px !important;
+  text-align: center !important;
+  border-color: #949494 !important;
+  color: #ffffff !important;
+}
+#email_62853377:hover{
+  border-color: #949494 !important;
+}
+#email_62853377:focus{
+  box-shadow:none !important;
+}
+.go3894874857{
+  height: 50px !important;
+  border-radius: 0px !important;
+  font-family: "inter", sans-serif !important;
+}