Merge branch 'bottle-browser' of https://github.com/teaxyz/www into bottle-browser

.github/build-package-pages.sh

@@ -1,12 +1,21 @@
 #!/bin/bash
 # cmd: $ ./build-package-pages.sh srcJson targetPath
-# sample:  $ .github/build-package-pages.sh src/data/packages.json src/content/packages'
+# sample:  $ .github/build-package-pages.sh src/data/packages.json src/content/'
 
 for row in $(jq -r '.[] | @base64' < "$1"); do
     _jq() {
      echo "${row}" | base64 --decode | jq -r "${1}"
     }
-   touch "$2"/"$(_jq '.slug')".md
+   full_name=$(_jq '.full_name' | sed 'y/ABCDEFGHIJKLMNOPQRSTUVWXYZ/abcdefghijklmnopqrstuvwxyz/')
+
+   if [[ "$full_name" == *\/* ]] || [[ "$full_name" == *\\* ]]
+   then
+      mkdir -p "$2/+$full_name"
+      # remove last folder
+      rm -rf "$2/+$full_name"
+   fi
+
+   touch "$2"/"+$full_name".md
    content="---
 type: page
 title: \"$(_jq '.name')\"
@@ -14,5 +23,5 @@ maintainer: \"$(_jq '.maintainer')\"
 Description: \"$(_jq '.desc' | tr '\"' "'")\"
 layout: \"package-detail\"
 ---"
-   echo "$content" > "$2"/"$(_jq '.slug')".md
+   echo "$content" > "$2"/"+$full_name".md
 done

.github/sync-thumb-images.sh

@@ -1,9 +1,12 @@
 #!/bin/bash
+# update packages.json data with relative thumb image url path
+# rebuild pages
+# download images from www.tea.xyz/Images/packages to 
+
 # cmd: $ ./prepare-thumb-images.sh srcJson targetPath
 # sample:  $ .github/prepare-thumb-images.sh src/data/packages.json src/static/Images/packages/
 
 # create packages folder: where airtable images will be DLd
-mkdir -p ./packages_thumbs_images
 packages="cat $1"
 temp_packages="./src/data/temp.json"
 cp $1 $temp_packages
@@ -11,16 +14,15 @@ for row in $($packages | jq -r '.[] | @base64'); do
     _jq() {
       echo ${row} | base64 --decode | jq -r ${1}
     }
-
     dl_url=$(_jq '.thumb_image_url')
-    if [[ $dl_url == *"https://dl.airtable.com/.attachments"* ]]; then
+    if [[ $dl_url == *"tea.xyz"* ]]; then
         filename=$(basename -- "$dl_url")
         extension="${filename##*.}"
         filename="${filename%.*}"
         slug=$(_jq '.slug')
-        outputPath=$2/$(_jq '.slug').$extension
-        new_thumb_image_url="https://tea.xyz/Images/packages/$slug.$extension"
-        curl $dl_url -o ./packages_thumbs_images/$slug.$extension
+
+        new_thumb_image_url="/Images/packages/$filename.$extension"
+
         updated_packages=$(jq '(.[] | select(.slug == "'$slug'") | .thumb_image_url) |= "'$new_thumb_image_url'"' ./src/data/temp.json)
         echo $updated_packages > $temp_packages
         echo "update $slug"

.github/workflows/cd.yml

@@ -37,22 +37,7 @@ jobs:
       uses: getneil/jq-action@v1
       id: version
       with:
-        cmd: '.github/build-package-pages.sh src/data/packages.json src/content/packages'
-
-    - name: Download package thumbnails from Airtable
-      uses: getneil/jq-action@v1
-      with:
-        cmd: '.github/prepare-thumb-images.sh src/data/packages.json'
-
-    - name: Upload package thumbnails to AWS S3
-      uses: jakejarvis/s3-sync-action@master
-      env:
-        AWS_S3_BUCKET: www.tea.xyz
-        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
-        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-        AWS_REGION: 'us-east-1'
-        SOURCE_DIR: 'packages_thumbs_images'
-        DEST_DIR: 'Images/packages'
+        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
@@ -76,8 +61,6 @@ jobs:
         aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
         aws-region: us-east-1
 
-    - run: cp -R packages_thumbs_images public/Images/packages
-  
     # cache-control of 10 mins because we *need* to be able to update
     # this and have people see the results can be fixed well with a static site builder
     - run: |
@@ -85,9 +68,11 @@ jobs:
           --metadata-directive REPLACE \
           --cache-control max-age=600 \
           --exclude '.git/*' --exclude '.github/*' \
+          --exclude 'Images/packages/*' \
           --exclude 'pour.sh' \
           --exclude 'tea.white-paper*.pdf' \
           --exclude '*.md' \
+          --exclude 'tea-*+*' \
           --delete
 
     #TODO create a github-action that can be used to parse the

.github/workflows/staging.yml

@@ -45,22 +45,7 @@ jobs:
     - name: Create Package Detail Pages from packages.json
       uses: getneil/jq-action@v1
       with:
-        cmd: '.github/build-package-pages.sh src/data/packages.json src/content/packages'
-
-    - name: Download package thumbnails from Airtable
-      uses: getneil/jq-action@v1
-      with:
-        cmd: '.github/prepare-thumb-images.sh src/data/packages.json'
-
-    - name: Upload package thumbnails to AWS S3
-      uses: jakejarvis/s3-sync-action@master
-      env:
-        AWS_S3_BUCKET: www.tea.xyz
-        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
-        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-        AWS_REGION: 'us-east-1'
-        SOURCE_DIR: 'packages_thumbs_images'
-        DEST_DIR: 'Images/packages'
+        cmd: '.github/build-package-pages.sh src/data/packages.json src/content'
 
     - run: .github/mk-pantry-accessible.sh ${{ secrets.TEMP_JACOBS_GITHUB_PAT }}
 
@@ -76,6 +61,18 @@ jobs:
       env:
         GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
 
+    # update packages json data and rebuild again
+    - name: make images relative path to preview site
+      uses: getneil/jq-action@v1
+      with:
+        cmd: '.github/sync-thumb-images.sh src/data/packages.json'
+
+    # intentional to rebuild packages again with relative image data
+    # the first one to test it against prod resources via lychee
+    - uses: teaxyz/setup@v0
+      with:
+        target: build    
+
     - uses: actions/setup-node@v3
       with:
         node-version: 14
@@ -94,6 +91,20 @@ jobs:
       run: yarn deploy
       working-directory: .cdk
 
+    - name: get cdk bucket
+      id: DEPLOY_BUCKET
+      run: |
+        BUCKET=$(aws s3 ls | grep $(echo teaxyz-pr-$GITHUB_REF_SLUG_URL | sed "s/-merge//") | grep -o '[^ ]*$')
+        echo "bucket=$BUCKET" >> $GITHUB_OUTPUT
+
+    - name: cp package images from prod to preview bucket
+      run: |
+        aws s3 cp s3://www.tea.xyz/Images/packages \
+          s3://$NEW_BUCKET/Images/packages \
+          --recursive
+      env:
+        NEW_BUCKET: ${{ steps.DEPLOY_BUCKET.outputs.bucket }}
+
     - name: Seal Deployment
       uses: bobheadxi/deployments@v1
       if: always()

.gitignore

@@ -28,3 +28,5 @@ cdk.out
 # initially committed _sample.md only the rest will be ignored
 src/content/packages/*
 src/static/Images/packages/*
+
+src/content/+*

README.md

@@ -29,10 +29,11 @@ The detail pages of each package are not committed to the repository for the
 simple reason of that would be too much repeating data.
 Execute the following command just once per version of
 `/src/data/packages.json`. This will create the package detail pages in
-`/src/content/packages/[package_slug].md`.
+`/src/content/+[package.full_name].md`.
+Which resembles the installation tag in tea cli
 
 ```sh
-.github/build-package-pages.sh src/data/packages.json src/content/packages
+.github/build-package-pages.sh src/data/packages.json src/content
 ```
 
 

lychee.toml

@@ -5,6 +5,8 @@ base = "./public"
 exclude-mail = true
 include = ["./public/**/*.md", "./public/**/*.html"]
 exclude = [
+  "https://github.com/",
+  "https://twitter.com/",
   "https://fonts.gstatic.com/",
   "https://fonts.googleapis.com/",
   "https://www.clarity.ms/tag/",
@@ -23,5 +25,7 @@ exclude = [
   "file:///home/runner/work/www/www/public/www.klaviyo.com/media/js/public/klaviyo_subscribe.js",
   "https://openssl.org/",
   "https://twitter.com/teaxyz_",
+  "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",
 ]

src/content/+.md

@@ -0,0 +1,5 @@
+---
+type: page
+title: "packages"
+layout: "packages"
+---

src/content/_index.md

@@ -1,6 +1,6 @@
 ---
 title: "Home"
-Description: "Equitable Open-Source for web3"
+Description: "tea.xyz is a feature-rich, delightful unified package manager that will revolutionize open-source development"
 layout: "index"
 menu: main
 weight: 1

src/content/packages/_sample.md

@@ -1,15 +0,0 @@
-<!--
-this page will be automatically duplicated/populated
-    by .github/build-package-pages.sh
-    before build & deploy probably in Github Actions
-    values to be replaced are title and Description
-
-WARN: anything else added to this folder will be git ignored
- -->
----
-type: page
-title: "mpdecimal"
-Description: "mpdecimal"
-layout: "package-detail"
----
-

src/layouts/index.html

@@ -8,14 +8,15 @@
   <div class="container hero-container">
     <div class="row">
       <div class="col">
-        <h1 class="impact" style="z-index:3; position: relative;">Keep <span class="white">what</span><br><span class="hero-float" style="float:right;"><span class="white">is</span> yours.</span></h1>
+        <h1 class="impact" style="z-index:3; position: relative;">TEA <span class="white">CLI</span><br><span class="hero-float" style="float:right;"><span class="white">is</span> HERE.</span></h1>
       </div>
     </div>
     <div class="row">
       <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
         <div class="lead-text-container animated-25 animatedFadeInUp fadeInUp black-bg p-4" style="z-index:3; position: relative;">
-          <p class="lead" style="margin-bottom: 0px;">The open-source revolution is here. We’re calling on all devs to build with our powerful, new unified package manager.</p>
+          <p class="lead" style="margin-bottom: 0px;"><a href="https://github.com/teaxyz/cli">Visit GitHub</a> to check out our README, and &#11088; the repository. You can install tea by running the one&#8208;liner in your terminal.</p>
         </div>
+        {{- partial "purple-btn-large.html" -}}
         <img class="mobile-grid-element mt-5" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
       </div>
     </div>
@@ -94,7 +95,12 @@
 <!-- Style for Swiper -->
 
 <style>
-
+  .swiper-package-display{
+    display:block;
+  }
+  .grid-package-display{
+    display:none;
+  }
   @media only screen and (min-width: 576px) {
 
       .grid-package-display{
@@ -105,51 +111,6 @@
         display:none;
       }
   }
-
-@media only screen and (max-width: 576px) {
-
-    .grid-package-display{
-      display:none;
-    }
-
-    .swiper-package-display{
-      display:block;
-    }
-}
-
-  .swiper {
-    width: 100%;
-    height: 100%;
-    margin-bottom: 1vw !important;
-    margin-top: 1vw;
-  }
-
-  .swiper-slide {
-    text-align: center;
-    font-size: 18px;
-
-    /* Center slide text vertically */
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    -webkit-justify-content: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    -webkit-align-items: center;
-    align-items: center;
-  }
-
-  .swiper-slide figure > img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
 </style>
 
 <!-- Bottle CTA -->
@@ -250,7 +211,7 @@
         <div class="metric-block" style="float:right; margin-top:-300px;">
           <p class="stat-head">NUMBER OF REPOS</p>
           <p class="stat-number teal" id="stat-one"></p>
-          <p class="small gray stat-small-text">Number of repos above 0 stars and forks, owned by tea authenticated developers.</p>
+          <p class="small gray stat-small-text">Number of rated repos owned by tea&#8208;authenticated developers.</p>
         </div>
         <div class="gen-art-mobile" id="m-gen-art-3"></div>
         <div class="gen-art-mobile" id="m-gen-art-4"></div>
@@ -264,9 +225,9 @@
         <div class="gen-art-mobile" id="m-gen-art-6"></div>
         <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
         <div class="metric-block" style="float:right;">
-          <p class="stat-head">OS CONTRIBUTIONS</p>
+          <p class="stat-head">TEA MAINTAINERS</p>
           <p class="stat-number teal" id="stat-two"></p>
-          <p class="small gray stat-small-text">Number of maintainers for those 2042 packages.</p>
+          <p class="small gray stat-small-text">Number of tea-maintainers for those 2042 packages.</p>
         </div>
         <div class="gen-art-mobile" id="m-gen-art-7"></div>
         <div class="gen-art-mobile" id="m-gen-art-8"></div>

src/layouts/page/package-detail.html

@@ -13,9 +13,16 @@
       <div class="col-xl-8 col-lg-8 col-md-6 col-sm-12 col-12">
         <h3>{{- .Title -}}</h3>
         {{ range where $.Site.Data.packages "name" .Title }}
-          <p>{{- .desc -}}</p>
+          <p class="one-box-down">{{- .desc -}}</p>
+          {{ if not (eq .package_yml_url "#")}}
+            <a target="_blank" href="{{- .package_yml_url -}}">
+              <button class="detail-btn-large me-3" id="purple-bg-btn"><i class="icon-enter-arrow"></i>View on GitHub</button>
+            </a>
+          {{end}}
           {{ if not (eq .homepage "") }}
-            {{- partial "detail-btn-large.html" .homepage -}}
+            <a target="_blank" href="{{- .homepage -}}">
+                <button class="detail-btn-large" id="standard-detail-btn"><i class="icon-enter-arrow"></i>Visit package home</button>
+            </a>
           {{end}}
         {{ end }}
       </div>
@@ -29,18 +36,15 @@
   <div class="container">
     <div class="row">
       <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 &#160;{{- .Title -}}. tea will interpret the documentation and take care of any dependencies.
       </div>
     </div>
   </div>
 </section>
 
 {{ range where $.Site.Data.packages "name" .Title }}
-  {{- partial "clipboard-copy.html"  -}}
+  {{- partial "clipboard-copy-package-detail.html" .  -}}
 
-  <script type="text/javascript">
-    document.getElementById("shortcodeCopy").value = "sh <(curl tea.xyz) +{{- .full_name -}}";
-  </script>
 {{ end }}
 
 
@@ -53,6 +57,20 @@
     background-color: gray;
   }
 
+  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;
+  }
+
 </style>
 
 {{ end }}

src/layouts/page/packages.html

@@ -0,0 +1,33 @@
+{{ define "main" }}
+
+
+
+<!-- Package Grid -->
+
+<!-- Desktop/Tablet Package Display -->
+
+  <span>
+    {{- partial "package-grid.html" . -}}
+  </span>
+
+<!-- Mobile Package Display -->
+  <!-- dont remove, it is not completely useless there is a ui bug i couldnt figure out 
+    the only solution is to keep it here. sorry - neil
+    -->
+  <span class="swiper-package-display">
+    {{- partial "swiper.html" . -}}
+  </span>
+
+<!-- Style for Swiper -->
+
+<style>
+  .grid-package-display{
+    display:block;
+  }
+  .swiper-package-display {
+    /* dont remove refer to comment above */
+    display: none;
+  }
+</style>
+
+{{ end }}

src/layouts/page/tea-qr.html

@@ -2,6 +2,7 @@
 
 <img id="tea-steam-dark-1" src="/Images/tea-steam-dark-1.svg" alt="">
 <img id="tea-steam-dark-2" src="/Images/tea-steam-dark-2.svg" alt="">
+
 <div class="container mb-lg-5 mb-md-5 mb-sm-0 mb-0 mt-lg-5 mt-md-5 mt-sm-0 mt-0">
   <div class="row hero my-auto">
     <div style="z-index:100; display:flex; flex-direction:column;" class="col-lg-6 col-sm-12 order-lg-1 order-sm-2 order-2">

src/layouts/page/white-paper.html

@@ -19,8 +19,8 @@
 
 <hr>
   <div class="row button-container">
-    <a href="/tea.white-paper.pdf" role="button" class="btn btn-primary auth-btn split-btn" id="nav-cta"><i class="icon-enter-arrow"></i>DOWNLOAD WHITEPAPER</a>
-    <a href="https://github.com/teaxyz/white-paper" role="button" class="btn btn-primary auth-btn split-btn split-right" id="nav-cta"><i class="icon-enter-arrow"></i>CONTRIBUTE ON GITHUB</a>
+    <a href="/tea.white-paper.pdf" role="button" class="btn btn-primary split-btn" id="nav-cta"><i class="icon-enter-arrow"></i>DOWNLOAD WHITEPAPER</a>
+    <a href="https://github.com/teaxyz/white-paper" role="button" class="btn btn-primary split-btn split-right" id="nav-cta"><i class="icon-enter-arrow"></i>CONTRIBUTE ON GITHUB</a>
   </div>
 <hr>
 
@@ -70,7 +70,7 @@
             ['Deutsch', '_de'],
             ['Русский', '_ru'],
             ['українська', '_uk'],
-            ['官话', '_zh']
+            ['简体中文', '_zh']
           ];
 
           let adobeDcView;
@@ -97,23 +97,21 @@
               }
               const adobeDCView = getAdobeDcView();
 
-              adobeDCView.previewFile({
-                content:{
-                  location: {
-                    url: getWhitePaperUrl(),
-                  }
-                },
-                metaData:{
-                  fileName: "tea.white-paper.pdf"
-                }
-              }, { embedMode: "IN_LINE" });
+              const hash = window.location.hash.replace(/^#/, '_')
+              const suffix = versions.find(v => v[1] === hash) || ''
+              viewWhitepaper(suffix)
             } catch (error) {
               console.error('test:', error);
             }
           });
 
-
           function viewWhitepaper(suffix) {
+            if (suffix.length) {
+              window.location.hash = '#' + suffix.substr(1)
+            } else{
+              // https://stackoverflow.com/questions/1397329/how-to-remove-the-hash-from-window-location-url-with-javascript-without-page-r/5298684#5298684
+              history.pushState("", document.title, window.location.pathname + window.location.search)
+            }
             const adobeDCView = getAdobeDcView();
             const url = getWhitePaperUrl(suffix);
             adobeDCView.previewFile({

src/layouts/partials/clipboard-copy-package-detail.html

@@ -0,0 +1,197 @@
+<hr>
+  <div class="row button-container" onclick="myFunction()" style="display:flex; justify-content:space-between;">
+    <input class="one-liner" type="text" value="sh <(curl tea.xyz) +{{- .full_name -}}" id="shortcodeCopy" readonly>
+
+    <!-- The button used to copy the text -->
+
+    <button type="button" class="clipboard-copy" id="liveToastBtn" onclick="changeCopied()">copy</button>
+  </div>
+<hr>
+
+<style>
+
+  .button-container{
+    background-color: #1a1a1a;
+  }
+
+  @media only screen and (min-width: 992px) {
+
+    .one-liner{
+      width: 80%;
+      padding: 2.455vw 4.185vw;
+      border-radius: 0px;
+      border: none;
+      background-color: #1a1a1a !important;
+      font-family: "pp-neue-machina";
+      color:#ffffff;
+      font-size: 2vw;
+      border-left: 2px solid #949494;
+    }
+
+    .one-liner:focus{
+      border:none;
+      outline: none;
+      border-left: 2px solid #949494;
+    }
+
+    .clipboard-copy{
+      height: 8.371vw;
+      width: 18%;
+      font-family: "pp-neue-machina";
+      color:#ffffff;
+      font-size: 2.1vw;
+      float:right !important;
+      background-color: #1a1a1a !important;
+      border: none;
+      border-right: 2px solid #949494;
+      transition: 0.2s linear;
+    }
+
+    .clipboard-copy:hover{
+      background-color: #00ffd0 !important;
+      color: #1a1a1a !important;
+      box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
+    }
+
+  }
+
+  @media only screen and (min-width: 768px) and (max-width: 992px) {
+
+    .button-container{
+      padding:0px 6.1vw !important;
+    }
+
+    .one-liner{
+      width: 80%;
+      padding: 2.455vw 5.040vw !important;
+      border-radius: 0px;
+      border: none;
+      background-color: #1a1a1a !important;
+      font-family: "pp-neue-machina";
+      color:#ffffff;
+      font-size: 2vw;
+      border-left: 2px solid #949494;
+    }
+
+    .one-liner:focus{
+      border:none;
+      outline: none;
+      border-left: 2px solid #949494;
+    }
+
+    .clipboard-copy{
+      height: 8.371vw;
+      width: 18%;
+      font-family: "pp-neue-machina";
+      color:#ffffff;
+      font-size: 2.1vw;
+      float:right !important;
+      background-color: #1a1a1a !important;
+      border: none;
+      border-right: 2px solid #949494;
+      transition: 0.2s linear;
+    }
+
+    .clipboard-copy:hover{
+      background-color: #00ffd0 !important;
+      color: #1a1a1a !important;
+      box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
+    }
+
+  }
+
+  @media only screen and (min-width: 576px) and (max-width: 768px) {
+
+    .button-container{
+      padding: 0vw 8vw !important;
+    }
+
+    .one-liner{
+      width: 77%;
+      padding: 5vw 4vw;
+      border-radius: 0px;
+      border: none;
+      background-color: #1a1a1a !important;
+      font-family: "pp-neue-machina";
+      color:#ffffff;
+      font-size: 3.5vw;
+      border-left: 2px solid #949494;
+    }
+
+    .one-liner:focus{
+      border:none;
+      outline: none;
+      border-left: 2px solid #949494;
+    }
+
+    .clipboard-copy{
+      padding: 5vw 4vw;
+      width: 20%;
+      font-family: "pp-neue-machina";
+      color:#ffffff;
+      font-size: 3.5vw;
+      float:right;
+      background-color: #1a1a1a !important;
+      border: none;
+      border-right: 2px solid #949494;
+      transition: 0.2s linear;
+    }
+
+    .clipboard-copy:hover{
+      background-color: #00ffd0 !important;
+      color: #1a1a1a !important;
+      box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important;
+    }
+
+  }
+
+  @media only screen and (max-width: 576px) {
+
+    .one-liner{
+      width: 100%;
+      padding: 7.5vw 7.5vw !important;
+      border-radius: 0px;
+      border: none;
+      background-color: #1a1a1a !important;
+      font-family: "pp-neue-machina";
+      color:#ffffff;
+      text-align: center !important;
+      font-size: 4vw;
+      border-left: 2px solid #949494;
+      border-right: 2px solid #949494;
+    }
+
+    .one-liner:focus{
+      border:none;
+      outline: none;
+      border-left: 2px solid #949494;
+      border-right: 2px solid #949494;
+    }
+
+    .clipboard-copy{
+      display: none;
+    }
+
+  }
+
+</style>
+
+<script>
+
+  function changeCopied() {
+    // Get the text field
+    var copyText = document.getElementById("shortcodeCopy");
+    var copiedValue = "sh <(curl https://tea.xyz)";
+
+    // Select the text field
+    copyText.select();
+    copyText.setSelectionRange(0, 99999); // For mobile devices
+
+     // Copy the text inside the text field
+    navigator.clipboard.writeText(copiedValue + " +{{- .full_name -}}");
+
+    document.getElementById("liveToastBtn").innerHTML = "copied!";
+
+  }
+
+</script>

src/layouts/partials/clipboard-copy.html

@@ -181,14 +181,14 @@
     function changeCopied() {
     // Get the text field
     var copyText = document.getElementById("shortcodeCopy");
+    var copiedValue = "sh <(curl https://tea.xyz)";
 
     // Select the text field
     copyText.select();
     copyText.setSelectionRange(0, 99999); // For mobile devices
 
      // Copy the text inside the text field
-    navigator.clipboard.writeText(copyText.value);
-
+    navigator.clipboard.writeText(copiedValue);
 
     document.getElementById("liveToastBtn").innerHTML = "copied!";
 

src/layouts/partials/detail-btn-large.html

@@ -1,3 +1,3 @@
 <a target="_blank" href="{{- . -}}">
-    <button class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>
+    <button class="detail-btn-large" id="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>
 </a>

src/layouts/partials/footer.html

@@ -13,7 +13,7 @@
         <div class="col-lg-4">
           <div class="card social-box" style="width: 100%; float:right;">
             <ul class="list-group list-group-flush">
-              <a class="list-group-item" role="button" href="https://twitter.com/teaxyz_"><i class="icon-twitter social-icon"></i>Twitter</a>
+              <a class="list-group-item" role="button" href="https://twitter.com/teaxyz"><i class="icon-twitter social-icon"></i>Twitter</a>
               <a class="list-group-item" role="button" href="https://discord.gg/KCZsXfJphn"><i class="icon-discord social-icon"></i>Discord</a>
               <a class="list-group-item" role="button" href="https://github.com/teaxyz"><i class="icon-github social-icon"></i>GitHub</a>
               <a class="list-group-item" role="button" href="https://reddit.com/r/teaxyz"><i class="icon-reddit social-icon"></i>Reddit</a>
@@ -39,7 +39,6 @@
   </div>
 </section>
 
-<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
 
 <!-- JavaScript Bundle with Popper -->
 
@@ -146,19 +145,6 @@ integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+
     rdt('track', 'ViewContent');
   </script>
 
-  <script>
-    var swiper = new Swiper(".mySwiper", {
-      slidesPerView: 1.5,
-      spaceBetween: 10,
-      freeMode: true,
-      loop: true,
-      pagination: {
-        el: ".swiper-pagination",
-        clickable: true,
-      },
-    });
-  </script>
-
   <script>
 
     const url = 'https://tea.breezy.hr/json?verbose=true';

src/layouts/partials/mobile-art-home.html

@@ -5,7 +5,7 @@
     width:57vw;
     height: 19.3vw;
     left: 6.8vw;
-    margin-top:164vw;
+    margin-top:173vw;
     z-index: 1;
     background-image: url("/Images/gen-art/orange-pattern.jpg");
     background-position: center;
@@ -18,7 +18,7 @@
     width:36vw;
     height: 19.3vw;
     right: 6.8vw;
-    margin-top:154vw;
+    margin-top:183vw;
     z-index: 3;
     background-image: url("/Images/gen-art/gen-art-_0010_DALL·E 2022-09-01 10.48.33 - bright blue and green _It’s time we stop robbing Peter to pay Mark and Jeff._.jpg");
     background-position: center;
@@ -32,7 +32,7 @@
     height: 18vw;
     border-radius:200px;
     right: 40vw;
-    margin-top:167vw;
+    margin-top:170vw;
     z-index: 3;
     background-image: url("/Images/gen-art/gen-art-_0002_DALL·E 2022-09-01 09.50.45 - rainbow oil spill on pavement.png.jpg");
     background-position: center;
@@ -46,7 +46,7 @@
     width:36vw;
     height: 12vw;
     right: 50vw;
-    margin-top:180vw;
+    margin-top:190vw;
     z-index: 2;
     background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
     background-position: center;
@@ -100,6 +100,7 @@
 
 </style>
 
+
 <div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-home-gen-art-1"></div>
 <div class="gen-art-mobile animated-5 animatedFadeInUp fadeInUp" id="m-home-gen-art-2"></div>
 <div class="gen-art-mobile" id="m-home-gen-art-3"></div>

src/layouts/partials/package-grid.html

@@ -1,17 +1,19 @@
 <!-- Package Grid -->
 
 <section>
-
   <!-- Package Grid Header -->
   <hr>
-    <div class="container package-grid-header">
-      <section class="flex">
+    <div class="container package-grid-header two-boxes">
+      <section class="flex flex-column flex-md-row">
         <h3>packages</h3>
-        {{- partial "sort-dropdown.html" -}}
       </section>
       <p style="width:60%;">There are already plenty of packages available through tea. As the communi’tea builds the library, contributions will live here. We use <a href="https://stability.ai/blog/stable-diffusion-public-release">Stable Diffusion</a> to generate the artwork for each package using their title and code for input. That’s the power of Open Source.</p>
     </div>
   <hr>
+
+  {{- partial "search-menu.html" "searchTermDesktop" -}}
+  <hr>
+
   <div class="package-grid">
 
     <!-- Start Package Grid -->
@@ -37,7 +39,7 @@
   }
   .package-grid {
     display: grid;
-    grid-template-columns: auto auto;
+    grid-template-columns: auto;
   }
   #loadMorePackagesBtn {
     cursor: pointer;
@@ -90,26 +92,72 @@
     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">
   const sortOptions = {
     popularity: 'popularity',
     last_modified: 'last_modified',
   }
+  const showAllPackages = window.location.pathname.includes("/+/");
+
   let sortBy = sortOptions.popularity; // last_modified
   let sortDirection = 'desc'; // asc
   let limit = 16;
 
-  function getPackageThumbs() {
   const grid = document.getElementById('packageGrid');
-    return Array.from(grid.children).filter((e) => e.dataset && e.dataset.name);
+  const packagesCache = Array.from(grid.children).filter((e) => e.dataset && e.dataset.name);
+
+  function debounce(fn, delay) {
+    var timer = null;
+    return function () {
+      var context = this, args = arguments;
+      clearTimeout(timer);
+      timer = setTimeout(function () {
+        fn.apply(context, args);
+      }, delay);
+    };
+  }
+
+  const onSearch = debounce(() => {
+    const searchInput = document.getElementById('searchTermDesktop');
+    if (searchInput.value) {
+      const term = searchInput.value;
+      const packages = getPackageThumbs();
+      const sortedPackages = packages.sort((a, b) => {
+        const aScore = getMatchScore(term, a.dataset);
+        const bScore = getMatchScore(term, b.dataset);
+        return bScore - aScore;
+      });
+      const grid = document.getElementById('packageGrid');
+      grid.textContent = '';
+      for(const sp of sortedPackages) {
+        const score = getMatchScore(term, sp.dataset);
+        if (score > 20) {
+          sp.classList.remove('hidden');
+        } else {
+          sp.classList.add('hidden');
+        }
+        grid.appendChild(sp);
+      }
+    } else {
+      sortPackages();
+    }
+  }, 300);
+
+  const searchInputDesktop = document.getElementById('searchTermDesktop');
+  searchInputDesktop.addEventListener("search", onSearch);
+  searchInputDesktop.addEventListener("change", onSearch);
+  searchInputDesktop.addEventListener("keyup", onSearch);
+
+  function getPackageThumbs() {
+    // const grid = document.getElementById('packageGrid');
+    return packagesCache;
   }
 
   const packagesCount = getPackageThumbs().length;
 
   function sortPackages() {
     const packages = getPackageThumbs();
-
     const sortedPackages = packages.sort((a, b) => {
       if (sortBy === sortOptions.popularity) {
         const aPop = +a.dataset.popularity;
@@ -140,7 +188,7 @@
     const packages = getPackageThumbs();
     let i = 0;
     for(const sp of packages) {
-      if (i >= limit) {
+      if (i >= limit && !showAllPackages) {
         sp.classList.add('hidden');
       } else {
         sp.classList.remove('hidden');
@@ -149,7 +197,20 @@
     }
   }
 
+  function getMatchScore(term, dataset) {
+    // provide higher value with name
+    const { name, description } = dataset;
+    const nameScore = stringSimilarity.compareTwoStrings(name, term);
+    const descriptionScore = stringSimilarity.compareTwoStrings(description, term);
+    return (nameScore*80) + (descriptionScore*20)
+  }
+
   const loadMoreButton = document.getElementById('loadMorePackagesBtn');
+  if (showAllPackages) {
+    loadMoreSection.classList.add('hidden');
+  } else {
+    loadMoreSection.classList.remove('hidden');
+  }
   loadMoreButton.addEventListener('click',() => {
     limit += 16;
     refreshDisplayedPackages();

src/layouts/partials/package-thumbnail.html

@@ -1,4 +1,4 @@
-<div class="card card-thumbnail" style="width: 100%" data-name="{{- .name -}}" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}">
+<div class="card card-thumbnail" style="width: 100%" data-name="{{- .name -}}" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}" data-description="{{- .desc -}}">
   <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">
@@ -19,12 +19,12 @@
         <span class="package-install-no">>{{- .installs -}}&nbsp;installs</span> -->
       </p>
     </div>
-    <a href="/packages/{{- .slug -}}/">
+    <a href="/+{{- lower .full_name -}}/">
       {{- partial "detail-btn.html" . -}}
     </a>
   </div>
   <div class="card-body thumbnail-body-mobile">
-    <a href="/packages/{{- .slug -}}/">
+    <a href="/+{{- lower .full_name -}}/">
       <button class="detail-btn-mobile"><i class="icon-enter-arrow"></i>details</button>
     </a>
   </div>

src/layouts/partials/purple-btn-large.html

@@ -0,0 +1,198 @@
+<a href="https://github.com/teaxyz/cli">
+    <button class="purple-btn-large"><i class="icon-enter-arrow"></i>VISIT GITHUB</button>
+</a>
+
+<style>
+
+  /* Detail Button - Large */
+
+  @media only screen and (min-width: 1200px) {
+
+    .purple-btn-large{
+      font-family: "pp-neue-machina", sans-serif;
+      font-size: 16px;
+      background-color: #8000ff;
+      border: none;
+      color: #fff;
+      padding-top: 0.279vw;
+      text-decoration: none;
+      text-transform: uppercase;
+      width: 20.925vw;
+      height: 4.185vw;
+      transition: 0.2s ease-in-out;
+    }
+
+    .purple-btn-large:hover{
+      background-color: #8000ff;
+      box-shadow: inset 0vw 0vw 0vw 0.335vw #1a1a1a !important;
+    }
+
+     /* Icon Styling */
+
+    .purple-btn-large .icon-enter-arrow{
+      display: inline-block;
+      position: relative;
+      margin-right: 0.558vw;
+      transition: 0.2s ease-in-out;
+    }
+
+    .purple-btn-large:hover .icon-enter-arrow{
+      display: inline-block;
+      transform: rotate(-45deg) !important;
+    }
+
+  }
+
+  @media only screen and (min-width: 992px) and (max-width: 1200px) {
+
+    .purple-btn-large{
+      font-family: "pp-neue-machina", sans-serif;
+      font-size: 16px;
+      background-color: #8000ff;
+      border: none;
+      color: #fff;
+      padding-top: 0.279vw;
+      text-decoration: none;
+      text-transform: uppercase;
+      width: 30vw;
+      height: 5vw;
+      transition: 0.2s ease-in-out;
+      margin-bottom: 1vw;
+    }
+
+    .purple-btn-large:hover{
+      background-color: #8000ff;
+      box-shadow: inset 0vw 0vw 0vw 0.335vw #1a1a1a !important;
+    }
+
+     /* Icon Styling */
+
+    .purple-btn-large .icon-enter-arrow{
+      display: inline-block;
+      position: relative;
+      margin-right: 0.558vw;
+      transition: 0.2s ease-in-out;
+    }
+
+    .purple-btn-large:hover .icon-enter-arrow{
+      display: inline-block;
+      transform: rotate(-45deg) !important;
+    }
+
+  }
+
+  @media only screen and (min-width: 768px) and (max-width: 992px) {
+
+    .purple-btn-large{
+      font-family: "pp-neue-machina", sans-serif;
+      font-size: 14px;
+      background-color: #8000ff;
+      border: none;
+      color: #fff;
+      padding-top: 0.279vw;
+      text-decoration: none;
+      text-transform: uppercase;
+      width: 30vw;
+      height: 5.141vw;
+      margin-bottom: 1vw;
+      transition: 0.2s ease-in-out;
+    }
+
+    .purple-btn-large:hover{
+      box-shadow: inset 0vw 0vw 0vw 0.335vw #1a1a1a !important;
+    }
+
+     /* Icon Styling */
+
+    .purple-btn-large .icon-enter-arrow{
+      display: inline-block;
+      position: relative;
+      margin-right: 0.558vw;
+      transition: 0.2s ease-in-out;
+    }
+
+    .purple-btn-large:hover .icon-enter-arrow{
+      display: inline-block;
+      transform: rotate(-45deg) !important;
+    }
+
+  }
+
+  @media only screen and (min-width: 576px) and (max-width: 768px) {
+
+    .purple-btn-large{
+      font-family: "pp-neue-machina", sans-serif;
+      font-size: 14px;
+      background-color: #8000ff;
+      border: none;
+      color: #fff;
+      padding-top: 0.279vw;
+      text-decoration: none;
+      text-transform: uppercase;
+      width: 33.85vw;
+      height: 6.77vw;
+      margin-bottom: 2.5vw;
+      transition: 0.2s ease-in-out;
+    }
+
+    .purple-btn-large:hover{
+      background-color: #8000ff;
+      box-shadow: inset 0vw 0vw 0vw 0.335vw #1a1a1a !important;
+    }
+
+     /* Icon Styling */
+
+    .purple-btn-large .icon-enter-arrow{
+      display: inline-block;
+      position: relative;
+      margin-right: 0.558vw;
+      transition: 0.2s ease-in-out;
+    }
+
+    .purple-btn-large:hover .icon-enter-arrow{
+      display: inline-block;
+      transform: rotate(-45deg) !important;
+    }
+
+  }
+
+  @media only screen and (max-width: 576px) {
+
+    .purple-btn-large{
+      display:inline-block;
+      font-family: "pp-neue-machina", sans-serif;
+      font-size: 3vw;
+      background-color: #8000ff;
+      border: none;
+      color: #fff;
+      padding-top: 0.279vw;
+      text-decoration: none;
+      text-transform: uppercase;
+      width: 100%;
+      height: 14vw;
+      margin-top: 5vw;
+      transition: 0.2s ease-in-out;
+    }
+
+    .purple-btn-large:hover{
+      background-color: #8000ff;
+      box-shadow: inset 0vw 0vw 0vw 1.25vw #1a1a1a !important;
+    }
+
+     /* Icon Styling */
+
+    .purple-btn-large .icon-enter-arrow{
+      display: inline-block;
+      position: relative;
+      margin-right: 2vw;
+      transition: 0.2s ease-in-out;
+    }
+
+    .purple-btn-large:hover .icon-enter-arrow{
+      display: inline-block;
+      transform: rotate(-45deg) !important;
+    }
+
+  }
+
+</style>

src/layouts/partials/search-menu.html

@@ -0,0 +1,53 @@
+<section>
+    <div class="button-container">
+        <div class="searchBar">
+            <div style="display:flex; align-items:center;">
+                <div class="icon">
+                <i class="icon-search-icon"></i>
+                </div>
+                <input id="{{- . -}}" type="search" placeholder="search_" />
+            </div>
+            {{- partial "sort-dropdown.html" -}}
+        </div>
+    </div>
+</section>
+
+<style>
+
+  .icon-search-icon{
+    font-size: 30px;
+    color: #949494;
+    margin-right: 20px;
+    position: relative;
+    top: 2px;
+  }
+
+  .searchBar {
+    padding: 0px;
+    height: 150px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .searchBar .sorting-container {
+    min-width: 260px;
+  }
+  .searchBar input {
+    font-size: 32px;
+    font-family: "pp-neue-machina", sans-serif;
+    color:#00ffd0;
+    text-transform:uppercase;
+    margin-bottom: -5px;
+    min-width: 60%;
+    padding: 0px;
+    background-color: #1a1a1a !important;
+    border: none;
+    color: #00ffd0;
+    outline: none;
+    border-radius: 0px;
+  }
+  .searchBar input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+    color: #949494;
+    opacity: 1; /* Firefox */
+  }
+</style>

src/layouts/partials/sort-dropdown.html

@@ -1,6 +1,13 @@
 <style>
+    .sorting-container{
+        display:none;
+    }
+    @media only screen and (min-width: 576px) {
         .sorting-container{
             display: inline-block;
+        }
+    }
+    .sorting-container{
       font-family: "pp-neue-machina", sans-serif;
       background-color: #1a1a1a;
       border: 1px solid #ffffff;

src/layouts/partials/swiper.html

@@ -5,12 +5,14 @@
   </div>
 <hr>
 
+{{- partial "search-menu.html" "searchTermMobile" -}}
+<hr>
 <!-- Slider main container -->
 
 <div class="row" style="margin-bottom: 2vw !important;">
   <div class="col">
     <div class="swiper mySwiper">
-        <div class="swiper-wrapper">
+      <div id="parentSwiper" class="swiper-wrapper">
         {{ range $.Site.Data.packages }}
           <div class="swiper-slide">
             {{- partial "package-thumbnail.html" .}}
@@ -21,3 +23,92 @@
     </div>
   </div>
 </div>
+<style>
+  .swiper {
+    width: 100%;
+    height: 100%;
+    margin-bottom: 1vw !important;
+    margin-top: 1vw;
+  }
+
+  .swiper-slide {
+    text-align: center;
+    font-size: 18px;
+
+    /* Center slide text vertically */
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+  }
+
+  .swiper-slide figure > img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+</style>
+<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
+<script>
+  let swipeyPackagesCache;
+  const swiper = new Swiper(".mySwiper", {
+    slidesPerView: 1.5,
+    spaceBetween: 10,
+    freeMode: true,
+    loop: false,
+    pagination: {
+      el: ".swiper-pagination",
+      clickable: true,
+    },
+    on: {
+      afterInit: () => {
+        const swiperParent = document.getElementById('parentSwiper');
+        swipeyPackagesCache = Array.from(swiperParent.children)
+          .filter((e) => e.childNodes[0].dataset.popularity)
+          .map((e) => {
+            e.classList = ['swiper-slide'];
+            return e;
+          });
+      }
+    }
+  });
+
+
+  const onSearchMobile = debounce(async () => {
+    const searchInput = document.getElementById('searchTermMobile');
+    if (searchInput.value) {
+      const term = searchInput.value;
+      const packages = [...swipeyPackagesCache];
+      const sortedPackages = packages.sort((a, b) => {
+        const aScore = getMatchScore(term, a.childNodes[0].dataset);
+        const bScore = getMatchScore(term, b.childNodes[0].dataset);
+        return bScore - aScore;
+      });
+      swiper.removeAllSlides();
+      for(const sp of sortedPackages) {
+        const score = getMatchScore(term, sp.childNodes[0].dataset);
+        if (score > 20) {
+          swiper.addSlide(1, sp);
+        }
+      }
+    } else {
+      const recache = [...swipeyPackagesCache];
+      await swiper.removeAllSlides();
+      swiper.appendSlide(recache);
+    }
+  }, 300);
+
+  const searchInputMobile = document.getElementById('searchTermMobile');
+  searchInputMobile.addEventListener("search", onSearchMobile);
+  searchInputMobile.addEventListener("change", onSearchMobile);
+  searchInputMobile.addEventListener("keyup", onSearchMobile);
+</script>

src/static/css/homepage.css

@@ -247,7 +247,7 @@ mark{
     align-items: center;
     height: 15vw;
     margin-top: 0.4vw;
-    margin-bottom: 1vw;
+    margin-bottom: 0px;
   }
 
   .package_before{
@@ -303,7 +303,7 @@ mark{
     align-items: center;
     height: 15vw;
     margin-top: 1.1vw;
-    margin-bottom: 1vw;
+    margin-bottom: 0px;
   }
 
   .package_before{
@@ -358,8 +358,8 @@ mark{
     justify-content: center;
     align-items: center;
     height: 20.2vw;
-    margin-top: 1.3vw;
-    margin-bottom: 2.5vw;
+    margin-top: .5vw;
+    margin-bottom: 0;
   }
 
   .metric-block{