Merge branch 'main' into bottle-browser

This commit is contained in:
Thomas Smith 2022-12-15 13:54:04 -05:00 committed by GitHub
commit f379976ee5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 795 additions and 186 deletions

View file

@ -1,12 +1,21 @@
#!/bin/bash #!/bin/bash
# cmd: $ ./build-package-pages.sh srcJson targetPath # 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 for row in $(jq -r '.[] | @base64' < "$1"); do
_jq() { _jq() {
echo "${row}" | base64 --decode | jq -r "${1}" 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="--- content="---
type: page type: page
title: \"$(_jq '.name')\" title: \"$(_jq '.name')\"
@ -14,5 +23,5 @@ maintainer: \"$(_jq '.maintainer')\"
Description: \"$(_jq '.desc' | tr '\"' "'")\" Description: \"$(_jq '.desc' | tr '\"' "'")\"
layout: \"package-detail\" layout: \"package-detail\"
---" ---"
echo "$content" > "$2"/"$(_jq '.slug')".md echo "$content" > "$2"/"+$full_name".md
done done

View file

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

View file

@ -37,22 +37,7 @@ jobs:
uses: getneil/jq-action@v1 uses: getneil/jq-action@v1
id: version id: version
with: with:
cmd: '.github/build-package-pages.sh src/data/packages.json src/content/packages' cmd: '.github/build-package-pages.sh src/data/packages.json src/content'
- 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'
- run: .github/mk-pantry-accessible.sh ${{ secrets.TEMP_JACOBS_GITHUB_PAT }} - run: .github/mk-pantry-accessible.sh ${{ secrets.TEMP_JACOBS_GITHUB_PAT }}
- uses: teaxyz/setup@v0 - uses: teaxyz/setup@v0
@ -76,8 +61,6 @@ jobs:
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: us-east-1 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 # 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 # this and have people see the results can be fixed well with a static site builder
- run: | - run: |
@ -85,9 +68,11 @@ jobs:
--metadata-directive REPLACE \ --metadata-directive REPLACE \
--cache-control max-age=600 \ --cache-control max-age=600 \
--exclude '.git/*' --exclude '.github/*' \ --exclude '.git/*' --exclude '.github/*' \
--exclude 'Images/packages/*' \
--exclude 'pour.sh' \ --exclude 'pour.sh' \
--exclude 'tea.white-paper*.pdf' \ --exclude 'tea.white-paper*.pdf' \
--exclude '*.md' \ --exclude '*.md' \
--exclude 'tea-*+*' \
--delete --delete
#TODO create a github-action that can be used to parse the #TODO create a github-action that can be used to parse the

View file

@ -45,22 +45,7 @@ jobs:
- name: Create Package Detail Pages from packages.json - name: Create Package Detail Pages from packages.json
uses: getneil/jq-action@v1 uses: getneil/jq-action@v1
with: with:
cmd: '.github/build-package-pages.sh src/data/packages.json src/content/packages' cmd: '.github/build-package-pages.sh src/data/packages.json src/content'
- 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'
- run: .github/mk-pantry-accessible.sh ${{ secrets.TEMP_JACOBS_GITHUB_PAT }} - run: .github/mk-pantry-accessible.sh ${{ secrets.TEMP_JACOBS_GITHUB_PAT }}
@ -76,6 +61,18 @@ jobs:
env: env:
GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}} 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 - uses: actions/setup-node@v3
with: with:
node-version: 14 node-version: 14
@ -93,7 +90,21 @@ jobs:
id: cdk_deploy id: cdk_deploy
run: yarn deploy run: yarn deploy
working-directory: .cdk 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 - name: Seal Deployment
uses: bobheadxi/deployments@v1 uses: bobheadxi/deployments@v1
if: always() if: always()

4
.gitignore vendored
View file

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

View file

@ -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. simple reason of that would be too much repeating data.
Execute the following command just once per version of Execute the following command just once per version of
`/src/data/packages.json`. This will create the package detail pages in `/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 ```sh
.github/build-package-pages.sh src/data/packages.json src/content/packages .github/build-package-pages.sh src/data/packages.json src/content
``` ```

View file

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

5
src/content/+.md Normal file
View file

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

View file

@ -1,6 +1,6 @@
--- ---
title: "Home" 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" layout: "index"
menu: main menu: main
weight: 1 weight: 1

View file

@ -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"
---

View file

@ -8,14 +8,15 @@
<div class="container hero-container"> <div class="container hero-container">
<div class="row"> <div class="row">
<div class="col"> <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> </div>
<div class="row"> <div class="row">
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12"> <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;"> <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. Were 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> </div>
{{- partial "purple-btn-large.html" -}}
<img class="mobile-grid-element mt-5" src="/Images/mobile-grid-element-3-rows.svg" alt="grid"> <img class="mobile-grid-element mt-5" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
</div> </div>
</div> </div>
@ -94,7 +95,12 @@
<!-- Style for Swiper --> <!-- Style for Swiper -->
<style> <style>
.swiper-package-display{
display:block;
}
.grid-package-display{
display:none;
}
@media only screen and (min-width: 576px) { @media only screen and (min-width: 576px) {
.grid-package-display{ .grid-package-display{
@ -105,51 +111,6 @@
display:none; 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> </style>
<span class="grid-bottle-display"> <span class="grid-bottle-display">
@ -222,7 +183,7 @@
<div class="metric-block" style="float:right; margin-top:-300px;"> <div class="metric-block" style="float:right; margin-top:-300px;">
<p class="stat-head">NUMBER OF REPOS</p> <p class="stat-head">NUMBER OF REPOS</p>
<p class="stat-number teal" id="stat-one"></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>
<div class="gen-art-mobile" id="m-gen-art-3"></div> <div class="gen-art-mobile" id="m-gen-art-3"></div>
<div class="gen-art-mobile" id="m-gen-art-4"></div> <div class="gen-art-mobile" id="m-gen-art-4"></div>
@ -236,9 +197,9 @@
<div class="gen-art-mobile" id="m-gen-art-6"></div> <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"> <img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
<div class="metric-block" style="float:right;"> <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="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>
<div class="gen-art-mobile" id="m-gen-art-7"></div> <div class="gen-art-mobile" id="m-gen-art-7"></div>
<div class="gen-art-mobile" id="m-gen-art-8"></div> <div class="gen-art-mobile" id="m-gen-art-8"></div>

View file

@ -13,9 +13,16 @@
<div class="col-xl-8 col-lg-8 col-md-6 col-sm-12 col-12"> <div class="col-xl-8 col-lg-8 col-md-6 col-sm-12 col-12">
<h3>{{- .Title -}}</h3> <h3>{{- .Title -}}</h3>
{{ range where $.Site.Data.packages "name" .Title }} {{ 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 "") }} {{ 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}}
{{ end }} {{ end }}
</div> </div>
@ -29,18 +36,15 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col grid-gray"> <div class="col grid-gray">
Copy the tea one-liner below into your terminal to install {{- .Title -}}. tea will interpret the documentation and take care of any dependencies. Copy the tea one-liner below into your terminal to install &#160;{{- .Title -}}. tea will interpret the documentation and take care of any dependencies.
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{{ range where $.Site.Data.packages "name" .Title }} {{ 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 }} {{ end }}
@ -53,6 +57,20 @@
background-color: gray; 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> </style>
{{ end }} {{ end }}

View file

@ -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 }}

View file

@ -2,6 +2,7 @@
<img id="tea-steam-dark-1" src="/Images/tea-steam-dark-1.svg" alt=""> <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=""> <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="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 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"> <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">

View file

@ -19,8 +19,8 @@
<hr> <hr>
<div class="row button-container"> <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="/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 auth-btn split-btn split-right" id="nav-cta"><i class="icon-enter-arrow"></i>CONTRIBUTE ON GITHUB</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> </div>
<hr> <hr>
@ -70,7 +70,7 @@
['Deutsch', '_de'], ['Deutsch', '_de'],
['Русский', '_ru'], ['Русский', '_ru'],
['українська', '_uk'], ['українська', '_uk'],
['官话', '_zh'] ['简体中文', '_zh']
]; ];
let adobeDcView; let adobeDcView;
@ -97,23 +97,21 @@
} }
const adobeDCView = getAdobeDcView(); const adobeDCView = getAdobeDcView();
adobeDCView.previewFile({ const hash = window.location.hash.replace(/^#/, '_')
content:{ const suffix = versions.find(v => v[1] === hash) || ''
location: { viewWhitepaper(suffix)
url: getWhitePaperUrl(),
}
},
metaData:{
fileName: "tea.white-paper.pdf"
}
}, { embedMode: "IN_LINE" });
} catch (error) { } catch (error) {
console.error('test:', error); console.error('test:', error);
} }
}); });
function viewWhitepaper(suffix) { 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 adobeDCView = getAdobeDcView();
const url = getWhitePaperUrl(suffix); const url = getWhitePaperUrl(suffix);
adobeDCView.previewFile({ adobeDCView.previewFile({

View file

@ -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>

View file

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

View file

@ -1,3 +1,3 @@
<a target="_blank" href="{{- . -}}"> <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> </a>

View file

@ -13,7 +13,7 @@
<div class="col-lg-4"> <div class="col-lg-4">
<div class="card social-box" style="width: 100%; float:right;"> <div class="card social-box" style="width: 100%; float:right;">
<ul class="list-group list-group-flush"> <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://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://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> <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> </div>
</section> </section>
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- JavaScript Bundle with Popper --> <!-- JavaScript Bundle with Popper -->
@ -146,19 +145,6 @@ integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+
rdt('track', 'ViewContent'); rdt('track', 'ViewContent');
</script> </script>
<script>
var swiper = new Swiper(".mySwiper", {
slidesPerView: 1.5,
spaceBetween: 10,
freeMode: true,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
</script>
<script> <script>
const url = 'https://tea.breezy.hr/json?verbose=true'; const url = 'https://tea.breezy.hr/json?verbose=true';

View file

@ -5,7 +5,7 @@
width:57vw; width:57vw;
height: 19.3vw; height: 19.3vw;
left: 6.8vw; left: 6.8vw;
margin-top:164vw; margin-top:173vw;
z-index: 1; z-index: 1;
background-image: url("/Images/gen-art/orange-pattern.jpg"); background-image: url("/Images/gen-art/orange-pattern.jpg");
background-position: center; background-position: center;
@ -18,7 +18,7 @@
width:36vw; width:36vw;
height: 19.3vw; height: 19.3vw;
right: 6.8vw; right: 6.8vw;
margin-top:154vw; margin-top:183vw;
z-index: 3; z-index: 3;
background-image: url("/Images/gen-art/gen-art-_0010_DALL·E 2022-09-01 10.48.33 - bright blue and green _Its time we stop robbing Peter to pay Mark and Jeff._.jpg"); background-image: url("/Images/gen-art/gen-art-_0010_DALL·E 2022-09-01 10.48.33 - bright blue and green _Its time we stop robbing Peter to pay Mark and Jeff._.jpg");
background-position: center; background-position: center;
@ -32,7 +32,7 @@
height: 18vw; height: 18vw;
border-radius:200px; border-radius:200px;
right: 40vw; right: 40vw;
margin-top:167vw; margin-top:170vw;
z-index: 3; 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-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; background-position: center;
@ -46,7 +46,7 @@
width:36vw; width:36vw;
height: 12vw; height: 12vw;
right: 50vw; right: 50vw;
margin-top:180vw; margin-top:190vw;
z-index: 2; 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-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; background-position: center;
@ -100,6 +100,7 @@
</style> </style>
<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-home-gen-art-1"></div> <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 animated-5 animatedFadeInUp fadeInUp" id="m-home-gen-art-2"></div>
<div class="gen-art-mobile" id="m-home-gen-art-3"></div> <div class="gen-art-mobile" id="m-home-gen-art-3"></div>

View file

@ -1,17 +1,19 @@
<!-- Package Grid --> <!-- Package Grid -->
<section> <section>
<!-- Package Grid Header --> <!-- Package Grid Header -->
<hr> <hr>
<div class="container package-grid-header"> <div class="container package-grid-header two-boxes">
<section class="flex"> <section class="flex flex-column flex-md-row">
<h3>packages</h3> <h3>packages</h3>
{{- partial "sort-dropdown.html" -}}
</section> </section>
<p style="width:60%;">There are already plenty of packages available through tea. As the communitea 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. Thats the power of Open Source.</p> <p style="width:60%;">There are already plenty of packages available through tea. As the communitea 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. Thats the power of Open Source.</p>
</div> </div>
<hr> <hr>
{{- partial "search-menu.html" "searchTermDesktop" -}}
<hr>
<div class="package-grid"> <div class="package-grid">
<!-- Start Package Grid --> <!-- Start Package Grid -->
@ -37,7 +39,7 @@
} }
.package-grid { .package-grid {
display: grid; display: grid;
grid-template-columns: auto auto; grid-template-columns: auto;
} }
#loadMorePackagesBtn { #loadMorePackagesBtn {
cursor: pointer; cursor: pointer;
@ -90,26 +92,72 @@
overflow: hidden; overflow: hidden;
} }
</style> </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="text/javascript">
const sortOptions = { const sortOptions = {
popularity: 'popularity', popularity: 'popularity',
last_modified: 'last_modified', last_modified: 'last_modified',
} }
const showAllPackages = window.location.pathname.includes("/+/");
let sortBy = sortOptions.popularity; // last_modified let sortBy = sortOptions.popularity; // last_modified
let sortDirection = 'desc'; // asc let sortDirection = 'desc'; // asc
let limit = 16; let limit = 16;
const grid = document.getElementById('packageGrid');
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() { function getPackageThumbs() {
const grid = document.getElementById('packageGrid'); // const grid = document.getElementById('packageGrid');
return Array.from(grid.children).filter((e) => e.dataset && e.dataset.name); return packagesCache;
} }
const packagesCount = getPackageThumbs().length; const packagesCount = getPackageThumbs().length;
function sortPackages() { function sortPackages() {
const packages = getPackageThumbs(); const packages = getPackageThumbs();
const sortedPackages = packages.sort((a, b) => { const sortedPackages = packages.sort((a, b) => {
if (sortBy === sortOptions.popularity) { if (sortBy === sortOptions.popularity) {
const aPop = +a.dataset.popularity; const aPop = +a.dataset.popularity;
@ -140,7 +188,7 @@
const packages = getPackageThumbs(); const packages = getPackageThumbs();
let i = 0; let i = 0;
for(const sp of packages) { for(const sp of packages) {
if (i >= limit) { if (i >= limit && !showAllPackages) {
sp.classList.add('hidden'); sp.classList.add('hidden');
} else { } else {
sp.classList.remove('hidden'); 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'); const loadMoreButton = document.getElementById('loadMorePackagesBtn');
if (showAllPackages) {
loadMoreSection.classList.add('hidden');
} else {
loadMoreSection.classList.remove('hidden');
}
loadMoreButton.addEventListener('click',() => { loadMoreButton.addEventListener('click',() => {
limit += 16; limit += 16;
refreshDisplayedPackages(); refreshDisplayedPackages();

View file

@ -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" > <figure class="card-img-top" >
<img class="package-image" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;"> <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">
@ -19,12 +19,12 @@
<span class="package-install-no">>{{- .installs -}}&nbsp;installs</span> --> <span class="package-install-no">>{{- .installs -}}&nbsp;installs</span> -->
</p> </p>
</div> </div>
<a href="/packages/{{- .slug -}}/"> <a href="/+{{- lower .full_name -}}/">
{{- partial "detail-btn.html" . -}} {{- partial "detail-btn.html" . -}}
</a> </a>
</div> </div>
<div class="card-body thumbnail-body-mobile"> <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> <button class="detail-btn-mobile"><i class="icon-enter-arrow"></i>details</button>
</a> </a>
</div> </div>

View file

@ -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>

View file

@ -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>

View file

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

View file

@ -5,19 +5,110 @@
</div> </div>
<hr> <hr>
{{- partial "search-menu.html" "searchTermMobile" -}}
<hr>
<!-- Slider main container --> <!-- Slider main container -->
<div class="row" style="margin-bottom: 2vw !important;"> <div class="row" style="margin-bottom: 2vw !important;">
<div class="col"> <div class="col">
<div class="swiper mySwiper"> <div class="swiper mySwiper">
<div class="swiper-wrapper"> <div id="parentSwiper" class="swiper-wrapper">
{{ range $.Site.Data.packages }} {{ range $.Site.Data.packages }}
<div class="swiper-slide"> <div class="swiper-slide">
{{- partial "package-thumbnail.html" .}} {{- partial "package-thumbnail.html" .}}
</div> </div>
{{ end }} {{ end }}
</div>
<!--<div class="swiper-pagination"></div>-->
</div> </div>
<!--<div class="swiper-pagination"></div>-->
</div> </div>
</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>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 128 KiB

After

Width:  |  Height:  |  Size: 407 KiB

View file

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