mirror of
https://github.com/ivabus/www
synced 2024-11-10 05:15:15 +03:00
Merge branch 'main' into bottle-browser
This commit is contained in:
commit
f379976ee5
15
.github/build-package-pages.sh
vendored
15
.github/build-package-pages.sh
vendored
|
@ -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
|
|
@ -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"
|
21
.github/workflows/cd.yml
vendored
21
.github/workflows/cd.yml
vendored
|
@ -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
|
||||||
|
|
45
.github/workflows/staging.yml
vendored
45
.github/workflows/staging.yml
vendored
|
@ -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
4
.gitignore
vendored
|
@ -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/+*
|
|
@ -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
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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
5
src/content/+.md
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
type: page
|
||||||
|
title: "packages"
|
||||||
|
layout: "packages"
|
||||||
|
---
|
|
@ -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
|
||||||
|
|
|
@ -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"
|
|
||||||
---
|
|
||||||
|
|
|
@ -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. 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 ⭐ the repository. You can install tea by running the one‐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‐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>
|
||||||
|
|
|
@ -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  {{- .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 }}
|
||||||
|
|
33
src/layouts/page/packages.html
Normal file
33
src/layouts/page/packages.html
Normal 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 }}
|
|
@ -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">
|
||||||
|
|
|
@ -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({
|
||||||
|
|
197
src/layouts/partials/clipboard-copy-package-detail.html
Normal file
197
src/layouts/partials/clipboard-copy-package-detail.html
Normal 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>
|
|
@ -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!";
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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 _It’s 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 _It’s 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>
|
||||||
|
|
|
@ -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 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>
|
<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>
|
</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();
|
||||||
|
|
|
@ -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 -}} installs</span> -->
|
<span class="package-install-no">>{{- .installs -}} 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>
|
||||||
|
|
198
src/layouts/partials/purple-btn-large.html
Normal file
198
src/layouts/partials/purple-btn-large.html
Normal 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>
|
53
src/layouts/partials/search-menu.html
Normal file
53
src/layouts/partials/search-menu.html
Normal 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>
|
|
@ -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;
|
||||||
|
|
|
@ -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 |
|
@ -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{
|
||||||
|
|
Loading…
Reference in a new issue