mirror of
https://github.com/ivabus/www
synced 2024-11-22 13:45:05 +03:00
Merge branch 'bottle-browser' of https://github.com/teaxyz/www into bottle-browser
This commit is contained in:
Thomas Smith
commit
d07f1804db
28 changed files with 795 additions and 186 deletions
15
.github/build-package-pages.sh
vendored
15
.github/build-package-pages.sh
vendored
|
|
@ -1,12 +1,21 @@
|
|||
#!/bin/bash
|
||||
# cmd: $ ./build-package-pages.sh srcJson targetPath
|
||||
# sample: $ .github/build-package-pages.sh src/data/packages.json src/content/packages'
|
||||
# sample: $ .github/build-package-pages.sh src/data/packages.json src/content/'
|
||||
|
||||
for row in $(jq -r '.[] | @base64' < "$1"); do
|
||||
_jq() {
|
||||
echo "${row}" | base64 --decode | jq -r "${1}"
|
||||
}
|
||||
touch "$2"/"$(_jq '.slug')".md
|
||||
full_name=$(_jq '.full_name' | sed 'y/ABCDEFGHIJKLMNOPQRSTUVWXYZ/abcdefghijklmnopqrstuvwxyz/')
|
||||
|
||||
if [[ "$full_name" == *\/* ]] || [[ "$full_name" == *\\* ]]
|
||||
then
|
||||
mkdir -p "$2/+$full_name"
|
||||
# remove last folder
|
||||
rm -rf "$2/+$full_name"
|
||||
fi
|
||||
|
||||
touch "$2"/"+$full_name".md
|
||||
content="---
|
||||
type: page
|
||||
title: \"$(_jq '.name')\"
|
||||
|
|
@ -14,5 +23,5 @@ maintainer: \"$(_jq '.maintainer')\"
|
|||
Description: \"$(_jq '.desc' | tr '\"' "'")\"
|
||||
layout: \"package-detail\"
|
||||
---"
|
||||
echo "$content" > "$2"/"$(_jq '.slug')".md
|
||||
echo "$content" > "$2"/"+$full_name".md
|
||||
done
|
||||
|
|
@ -1,9 +1,12 @@
|
|||
#!/bin/bash
|
||||
# update packages.json data with relative thumb image url path
|
||||
# rebuild pages
|
||||
# download images from www.tea.xyz/Images/packages to
|
||||
|
||||
# cmd: $ ./prepare-thumb-images.sh srcJson targetPath
|
||||
# sample: $ .github/prepare-thumb-images.sh src/data/packages.json src/static/Images/packages/
|
||||
|
||||
# create packages folder: where airtable images will be DLd
|
||||
mkdir -p ./packages_thumbs_images
|
||||
packages="cat $1"
|
||||
temp_packages="./src/data/temp.json"
|
||||
cp $1 $temp_packages
|
||||
|
|
@ -11,16 +14,15 @@ for row in $($packages | jq -r '.[] | @base64'); do
|
|||
_jq() {
|
||||
echo ${row} | base64 --decode | jq -r ${1}
|
||||
}
|
||||
|
||||
dl_url=$(_jq '.thumb_image_url')
|
||||
if [[ $dl_url == *"https://dl.airtable.com/.attachments"* ]]; then
|
||||
if [[ $dl_url == *"tea.xyz"* ]]; then
|
||||
filename=$(basename -- "$dl_url")
|
||||
extension="${filename##*.}"
|
||||
filename="${filename%.*}"
|
||||
slug=$(_jq '.slug')
|
||||
outputPath=$2/$(_jq '.slug').$extension
|
||||
new_thumb_image_url="https://tea.xyz/Images/packages/$slug.$extension"
|
||||
curl $dl_url -o ./packages_thumbs_images/$slug.$extension
|
||||
|
||||
new_thumb_image_url="/Images/packages/$filename.$extension"
|
||||
|
||||
updated_packages=$(jq '(.[] | select(.slug == "'$slug'") | .thumb_image_url) |= "'$new_thumb_image_url'"' ./src/data/temp.json)
|
||||
echo $updated_packages > $temp_packages
|
||||
echo "update $slug"
|
||||
21
.github/workflows/cd.yml
vendored
21
.github/workflows/cd.yml
vendored
|
|
@ -37,22 +37,7 @@ jobs:
|
|||
uses: getneil/jq-action@v1
|
||||
id: version
|
||||
with:
|
||||
cmd: '.github/build-package-pages.sh src/data/packages.json src/content/packages'
|
||||
|
||||
- name: Download package thumbnails from Airtable
|
||||
uses: getneil/jq-action@v1
|
||||
with:
|
||||
cmd: '.github/prepare-thumb-images.sh src/data/packages.json'
|
||||
|
||||
- name: Upload package thumbnails to AWS S3
|
||||
uses: jakejarvis/s3-sync-action@master
|
||||
env:
|
||||
AWS_S3_BUCKET: www.tea.xyz
|
||||
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
|
||||
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
|
||||
AWS_REGION: 'us-east-1'
|
||||
SOURCE_DIR: 'packages_thumbs_images'
|
||||
DEST_DIR: 'Images/packages'
|
||||
cmd: '.github/build-package-pages.sh src/data/packages.json src/content'
|
||||
|
||||
- run: .github/mk-pantry-accessible.sh ${{ secrets.TEMP_JACOBS_GITHUB_PAT }}
|
||||
- uses: teaxyz/setup@v0
|
||||
|
|
@ -76,8 +61,6 @@ jobs:
|
|||
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
|
||||
aws-region: us-east-1
|
||||
|
||||
- run: cp -R packages_thumbs_images public/Images/packages
|
||||
|
||||
# cache-control of 10 mins because we *need* to be able to update
|
||||
# this and have people see the results can be fixed well with a static site builder
|
||||
- run: |
|
||||
|
|
@ -85,9 +68,11 @@ jobs:
|
|||
--metadata-directive REPLACE \
|
||||
--cache-control max-age=600 \
|
||||
--exclude '.git/*' --exclude '.github/*' \
|
||||
--exclude 'Images/packages/*' \
|
||||
--exclude 'pour.sh' \
|
||||
--exclude 'tea.white-paper*.pdf' \
|
||||
--exclude '*.md' \
|
||||
--exclude 'tea-*+*' \
|
||||
--delete
|
||||
|
||||
#TODO create a github-action that can be used to parse the
|
||||
|
|
|
|||
43
.github/workflows/staging.yml
vendored
43
.github/workflows/staging.yml
vendored
|
|
@ -45,22 +45,7 @@ jobs:
|
|||
- name: Create Package Detail Pages from packages.json
|
||||
uses: getneil/jq-action@v1
|
||||
with:
|
||||
cmd: '.github/build-package-pages.sh src/data/packages.json src/content/packages'
|
||||
|
||||
- name: Download package thumbnails from Airtable
|
||||
uses: getneil/jq-action@v1
|
||||
with:
|
||||
cmd: '.github/prepare-thumb-images.sh src/data/packages.json'
|
||||
|
||||
- name: Upload package thumbnails to AWS S3
|
||||
uses: jakejarvis/s3-sync-action@master
|
||||
env:
|
||||
AWS_S3_BUCKET: www.tea.xyz
|
||||
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
|
||||
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
|
||||
AWS_REGION: 'us-east-1'
|
||||
SOURCE_DIR: 'packages_thumbs_images'
|
||||
DEST_DIR: 'Images/packages'
|
||||
cmd: '.github/build-package-pages.sh src/data/packages.json src/content'
|
||||
|
||||
- run: .github/mk-pantry-accessible.sh ${{ secrets.TEMP_JACOBS_GITHUB_PAT }}
|
||||
|
||||
|
|
@ -76,6 +61,18 @@ jobs:
|
|||
env:
|
||||
GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
|
||||
|
||||
# update packages json data and rebuild again
|
||||
- name: make images relative path to preview site
|
||||
uses: getneil/jq-action@v1
|
||||
with:
|
||||
cmd: '.github/sync-thumb-images.sh src/data/packages.json'
|
||||
|
||||
# intentional to rebuild packages again with relative image data
|
||||
# the first one to test it against prod resources via lychee
|
||||
- uses: teaxyz/setup@v0
|
||||
with:
|
||||
target: build
|
||||
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 14
|
||||
|
|
@ -94,6 +91,20 @@ jobs:
|
|||
run: yarn deploy
|
||||
working-directory: .cdk
|
||||
|
||||
- name: get cdk bucket
|
||||
id: DEPLOY_BUCKET
|
||||
run: |
|
||||
BUCKET=$(aws s3 ls | grep $(echo teaxyz-pr-$GITHUB_REF_SLUG_URL | sed "s/-merge//") | grep -o '[^ ]*$')
|
||||
echo "bucket=$BUCKET" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: cp package images from prod to preview bucket
|
||||
run: |
|
||||
aws s3 cp s3://www.tea.xyz/Images/packages \
|
||||
s3://$NEW_BUCKET/Images/packages \
|
||||
--recursive
|
||||
env:
|
||||
NEW_BUCKET: ${{ steps.DEPLOY_BUCKET.outputs.bucket }}
|
||||
|
||||
- name: Seal Deployment
|
||||
uses: bobheadxi/deployments@v1
|
||||
if: always()
|
||||
|
|
|
|||
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -28,3 +28,5 @@ cdk.out
|
|||
# initially committed _sample.md only the rest will be ignored
|
||||
src/content/packages/*
|
||||
src/static/Images/packages/*
|
||||
|
||||
src/content/+*
|
||||
|
|
@ -29,10 +29,11 @@ The detail pages of each package are not committed to the repository for the
|
|||
simple reason of that would be too much repeating data.
|
||||
Execute the following command just once per version of
|
||||
`/src/data/packages.json`. This will create the package detail pages in
|
||||
`/src/content/packages/[package_slug].md`.
|
||||
`/src/content/+[package.full_name].md`.
|
||||
Which resembles the installation tag in tea cli
|
||||
|
||||
```sh
|
||||
.github/build-package-pages.sh src/data/packages.json src/content/packages
|
||||
.github/build-package-pages.sh src/data/packages.json src/content
|
||||
```
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ base = "./public"
|
|||
exclude-mail = true
|
||||
include = ["./public/**/*.md", "./public/**/*.html"]
|
||||
exclude = [
|
||||
"https://github.com/",
|
||||
"https://twitter.com/",
|
||||
"https://fonts.gstatic.com/",
|
||||
"https://fonts.googleapis.com/",
|
||||
"https://www.clarity.ms/tag/",
|
||||
|
|
@ -23,5 +25,7 @@ exclude = [
|
|||
"file:///home/runner/work/www/www/public/www.klaviyo.com/media/js/public/klaviyo_subscribe.js",
|
||||
"https://openssl.org/",
|
||||
"https://twitter.com/teaxyz_",
|
||||
"file:///home/runner/work/www/www/public/+github.com/rhash/RHash",
|
||||
"file:///home/runner/work/www/www/public/+github.com/rhash/RHash",
|
||||
"https://app.tea.xyz/api/signups",
|
||||
]
|
||||
|
|
|
|||
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"
|
||||
Description: "Equitable Open-Source for web3"
|
||||
Description: "tea.xyz is a feature-rich, delightful unified package manager that will revolutionize open-source development"
|
||||
layout: "index"
|
||||
menu: main
|
||||
weight: 1
|
||||
|
|
|
|||
|
|
@ -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="row">
|
||||
<div class="col">
|
||||
<h1 class="impact" style="z-index:3; position: relative;">Keep <span class="white">what</span><br><span class="hero-float" style="float:right;"><span class="white">is</span> yours.</span></h1>
|
||||
<h1 class="impact" style="z-index:3; position: relative;">TEA <span class="white">CLI</span><br><span class="hero-float" style="float:right;"><span class="white">is</span> HERE.</span></h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
|
||||
<div class="lead-text-container animated-25 animatedFadeInUp fadeInUp black-bg p-4" style="z-index:3; position: relative;">
|
||||
<p class="lead" style="margin-bottom: 0px;">The open-source revolution is here. We’re calling on all devs to build with our powerful, new unified package manager.</p>
|
||||
<p class="lead" style="margin-bottom: 0px;"><a href="https://github.com/teaxyz/cli">Visit GitHub</a> to check out our README, and ⭐ the repository. You can install tea by running the one‐liner in your terminal.</p>
|
||||
</div>
|
||||
{{- partial "purple-btn-large.html" -}}
|
||||
<img class="mobile-grid-element mt-5" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -94,7 +95,12 @@
|
|||
<!-- Style for Swiper -->
|
||||
|
||||
<style>
|
||||
|
||||
.swiper-package-display{
|
||||
display:block;
|
||||
}
|
||||
.grid-package-display{
|
||||
display:none;
|
||||
}
|
||||
@media only screen and (min-width: 576px) {
|
||||
|
||||
.grid-package-display{
|
||||
|
|
@ -105,51 +111,6 @@
|
|||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
|
||||
.grid-package-display{
|
||||
display:none;
|
||||
}
|
||||
|
||||
.swiper-package-display{
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 1vw !important;
|
||||
margin-top: 1vw;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.swiper-slide figure > img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- Bottle CTA -->
|
||||
|
|
@ -250,7 +211,7 @@
|
|||
<div class="metric-block" style="float:right; margin-top:-300px;">
|
||||
<p class="stat-head">NUMBER OF REPOS</p>
|
||||
<p class="stat-number teal" id="stat-one"></p>
|
||||
<p class="small gray stat-small-text">Number of repos above 0 stars and forks, owned by tea authenticated developers.</p>
|
||||
<p class="small gray stat-small-text">Number of rated repos owned by tea‐authenticated developers.</p>
|
||||
</div>
|
||||
<div class="gen-art-mobile" id="m-gen-art-3"></div>
|
||||
<div class="gen-art-mobile" id="m-gen-art-4"></div>
|
||||
|
|
@ -264,9 +225,9 @@
|
|||
<div class="gen-art-mobile" id="m-gen-art-6"></div>
|
||||
<img class="mobile-grid-element" src="/Images/mobile-grid-element-3-rows.svg" alt="grid">
|
||||
<div class="metric-block" style="float:right;">
|
||||
<p class="stat-head">OS CONTRIBUTIONS</p>
|
||||
<p class="stat-head">TEA MAINTAINERS</p>
|
||||
<p class="stat-number teal" id="stat-two"></p>
|
||||
<p class="small gray stat-small-text">Number of maintainers for those 2042 packages.</p>
|
||||
<p class="small gray stat-small-text">Number of tea-maintainers for those 2042 packages.</p>
|
||||
</div>
|
||||
<div class="gen-art-mobile" id="m-gen-art-7"></div>
|
||||
<div class="gen-art-mobile" id="m-gen-art-8"></div>
|
||||
|
|
|
|||
|
|
@ -13,9 +13,16 @@
|
|||
<div class="col-xl-8 col-lg-8 col-md-6 col-sm-12 col-12">
|
||||
<h3>{{- .Title -}}</h3>
|
||||
{{ range where $.Site.Data.packages "name" .Title }}
|
||||
<p>{{- .desc -}}</p>
|
||||
<p class="one-box-down">{{- .desc -}}</p>
|
||||
{{ if not (eq .package_yml_url "#")}}
|
||||
<a target="_blank" href="{{- .package_yml_url -}}">
|
||||
<button class="detail-btn-large me-3" id="purple-bg-btn"><i class="icon-enter-arrow"></i>View on GitHub</button>
|
||||
</a>
|
||||
{{end}}
|
||||
{{ if not (eq .homepage "") }}
|
||||
{{- partial "detail-btn-large.html" .homepage -}}
|
||||
<a target="_blank" href="{{- .homepage -}}">
|
||||
<button class="detail-btn-large" id="standard-detail-btn"><i class="icon-enter-arrow"></i>Visit package home</button>
|
||||
</a>
|
||||
{{end}}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
|
@ -29,18 +36,15 @@
|
|||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col grid-gray">
|
||||
Copy the tea one-liner below into your terminal to install {{- .Title -}}. tea will interpret the documentation and take care of any dependencies.
|
||||
Copy the tea one-liner below into your terminal to install  {{- .Title -}}. tea will interpret the documentation and take care of any dependencies.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{ range where $.Site.Data.packages "name" .Title }}
|
||||
{{- partial "clipboard-copy.html" -}}
|
||||
{{- partial "clipboard-copy-package-detail.html" . -}}
|
||||
|
||||
<script type="text/javascript">
|
||||
document.getElementById("shortcodeCopy").value = "sh <(curl tea.xyz) +{{- .full_name -}}";
|
||||
</script>
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
|
@ -53,6 +57,20 @@
|
|||
background-color: gray;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#purple-bg-btn{
|
||||
background-color: #8000FF;
|
||||
border: 2px solid #8000FF;
|
||||
}
|
||||
|
||||
#standard-detail-btn:hover{
|
||||
background-color: #212020 !important;
|
||||
box-shadow: inset 0vw 0vw 0vw 0.335vw #1a1a1a !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
{{ end }}
|
||||
|
|
|
|||
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-2" src="/Images/tea-steam-dark-2.svg" alt="">
|
||||
|
||||
<div class="container mb-lg-5 mb-md-5 mb-sm-0 mb-0 mt-lg-5 mt-md-5 mt-sm-0 mt-0">
|
||||
<div class="row hero my-auto">
|
||||
<div style="z-index:100; display:flex; flex-direction:column;" class="col-lg-6 col-sm-12 order-lg-1 order-sm-2 order-2">
|
||||
|
|
|
|||
|
|
@ -19,8 +19,8 @@
|
|||
|
||||
<hr>
|
||||
<div class="row button-container">
|
||||
<a href="/tea.white-paper.pdf" role="button" class="btn btn-primary auth-btn split-btn" id="nav-cta"><i class="icon-enter-arrow"></i>DOWNLOAD WHITEPAPER</a>
|
||||
<a href="https://github.com/teaxyz/white-paper" role="button" class="btn btn-primary auth-btn split-btn split-right" id="nav-cta"><i class="icon-enter-arrow"></i>CONTRIBUTE ON GITHUB</a>
|
||||
<a href="/tea.white-paper.pdf" role="button" class="btn btn-primary split-btn" id="nav-cta"><i class="icon-enter-arrow"></i>DOWNLOAD WHITEPAPER</a>
|
||||
<a href="https://github.com/teaxyz/white-paper" role="button" class="btn btn-primary split-btn split-right" id="nav-cta"><i class="icon-enter-arrow"></i>CONTRIBUTE ON GITHUB</a>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
['Deutsch', '_de'],
|
||||
['Русский', '_ru'],
|
||||
['українська', '_uk'],
|
||||
['官话', '_zh']
|
||||
['简体中文', '_zh']
|
||||
];
|
||||
|
||||
let adobeDcView;
|
||||
|
|
@ -97,23 +97,21 @@
|
|||
}
|
||||
const adobeDCView = getAdobeDcView();
|
||||
|
||||
adobeDCView.previewFile({
|
||||
content:{
|
||||
location: {
|
||||
url: getWhitePaperUrl(),
|
||||
}
|
||||
},
|
||||
metaData:{
|
||||
fileName: "tea.white-paper.pdf"
|
||||
}
|
||||
}, { embedMode: "IN_LINE" });
|
||||
const hash = window.location.hash.replace(/^#/, '_')
|
||||
const suffix = versions.find(v => v[1] === hash) || ''
|
||||
viewWhitepaper(suffix)
|
||||
} catch (error) {
|
||||
console.error('test:', error);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function viewWhitepaper(suffix) {
|
||||
if (suffix.length) {
|
||||
window.location.hash = '#' + suffix.substr(1)
|
||||
} else{
|
||||
// https://stackoverflow.com/questions/1397329/how-to-remove-the-hash-from-window-location-url-with-javascript-without-page-r/5298684#5298684
|
||||
history.pushState("", document.title, window.location.pathname + window.location.search)
|
||||
}
|
||||
const adobeDCView = getAdobeDcView();
|
||||
const url = getWhitePaperUrl(suffix);
|
||||
adobeDCView.previewFile({
|
||||
|
|
|
|||
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() {
|
||||
// Get the text field
|
||||
var copyText = document.getElementById("shortcodeCopy");
|
||||
var copiedValue = "sh <(curl https://tea.xyz)";
|
||||
|
||||
// Select the text field
|
||||
copyText.select();
|
||||
copyText.setSelectionRange(0, 99999); // For mobile devices
|
||||
|
||||
// Copy the text inside the text field
|
||||
navigator.clipboard.writeText(copyText.value);
|
||||
|
||||
navigator.clipboard.writeText(copiedValue);
|
||||
|
||||
document.getElementById("liveToastBtn").innerHTML = "copied!";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<a target="_blank" href="{{- . -}}">
|
||||
<button class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>
|
||||
<button class="detail-btn-large" id="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>
|
||||
</a>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<div class="col-lg-4">
|
||||
<div class="card social-box" style="width: 100%; float:right;">
|
||||
<ul class="list-group list-group-flush">
|
||||
<a class="list-group-item" role="button" href="https://twitter.com/teaxyz_"><i class="icon-twitter social-icon"></i>Twitter</a>
|
||||
<a class="list-group-item" role="button" href="https://twitter.com/teaxyz"><i class="icon-twitter social-icon"></i>Twitter</a>
|
||||
<a class="list-group-item" role="button" href="https://discord.gg/KCZsXfJphn"><i class="icon-discord social-icon"></i>Discord</a>
|
||||
<a class="list-group-item" role="button" href="https://github.com/teaxyz"><i class="icon-github social-icon"></i>GitHub</a>
|
||||
<a class="list-group-item" role="button" href="https://reddit.com/r/teaxyz"><i class="icon-reddit social-icon"></i>Reddit</a>
|
||||
|
|
@ -39,7 +39,6 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
|
||||
|
||||
<!-- JavaScript Bundle with Popper -->
|
||||
|
||||
|
|
@ -146,19 +145,6 @@ integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+
|
|||
rdt('track', 'ViewContent');
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var swiper = new Swiper(".mySwiper", {
|
||||
slidesPerView: 1.5,
|
||||
spaceBetween: 10,
|
||||
freeMode: true,
|
||||
loop: true,
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
|
||||
const url = 'https://tea.breezy.hr/json?verbose=true';
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
width:57vw;
|
||||
height: 19.3vw;
|
||||
left: 6.8vw;
|
||||
margin-top:164vw;
|
||||
margin-top:173vw;
|
||||
z-index: 1;
|
||||
background-image: url("/Images/gen-art/orange-pattern.jpg");
|
||||
background-position: center;
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
width:36vw;
|
||||
height: 19.3vw;
|
||||
right: 6.8vw;
|
||||
margin-top:154vw;
|
||||
margin-top:183vw;
|
||||
z-index: 3;
|
||||
background-image: url("/Images/gen-art/gen-art-_0010_DALL·E 2022-09-01 10.48.33 - bright blue and green _It’s time we stop robbing Peter to pay Mark and Jeff._.jpg");
|
||||
background-position: center;
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
height: 18vw;
|
||||
border-radius:200px;
|
||||
right: 40vw;
|
||||
margin-top:167vw;
|
||||
margin-top:170vw;
|
||||
z-index: 3;
|
||||
background-image: url("/Images/gen-art/gen-art-_0002_DALL·E 2022-09-01 09.50.45 - rainbow oil spill on pavement.png.jpg");
|
||||
background-position: center;
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
width:36vw;
|
||||
height: 12vw;
|
||||
right: 50vw;
|
||||
margin-top:180vw;
|
||||
margin-top:190vw;
|
||||
z-index: 2;
|
||||
background-image: url("/Images/gen-art/gen-art-_0011_DALL·E 2022-09-01 10.52.27 - neon pink colored subway wall painted in the style of keith haring.png.jpg");
|
||||
background-position: center;
|
||||
|
|
@ -100,6 +100,7 @@
|
|||
|
||||
</style>
|
||||
|
||||
|
||||
<div class="gen-art-mobile animated-25 animatedFadeInUp fadeInUp" id="m-home-gen-art-1"></div>
|
||||
<div class="gen-art-mobile animated-5 animatedFadeInUp fadeInUp" id="m-home-gen-art-2"></div>
|
||||
<div class="gen-art-mobile" id="m-home-gen-art-3"></div>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
<!-- Package Grid -->
|
||||
|
||||
<section>
|
||||
|
||||
<!-- Package Grid Header -->
|
||||
<hr>
|
||||
<div class="container package-grid-header">
|
||||
<section class="flex">
|
||||
<div class="container package-grid-header two-boxes">
|
||||
<section class="flex flex-column flex-md-row">
|
||||
<h3>packages</h3>
|
||||
{{- partial "sort-dropdown.html" -}}
|
||||
</section>
|
||||
<p style="width:60%;">There are already plenty of packages available through tea. As the communi’tea builds the library, contributions will live here. We use <a href="https://stability.ai/blog/stable-diffusion-public-release">Stable Diffusion</a> to generate the artwork for each package using their title and code for input. That’s the power of Open Source.</p>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
{{- partial "search-menu.html" "searchTermDesktop" -}}
|
||||
<hr>
|
||||
|
||||
<div class="package-grid">
|
||||
|
||||
<!-- Start Package Grid -->
|
||||
|
|
@ -37,7 +39,7 @@
|
|||
}
|
||||
.package-grid {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
#loadMorePackagesBtn {
|
||||
cursor: pointer;
|
||||
|
|
@ -90,26 +92,72 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script async src="https://unpkg.com/string-similarity@4.0.1/umd/string-similarity.min.js"></script>
|
||||
<script language="javascript" type="text/javascript">
|
||||
const sortOptions = {
|
||||
popularity: 'popularity',
|
||||
last_modified: 'last_modified',
|
||||
}
|
||||
const showAllPackages = window.location.pathname.includes("/+/");
|
||||
|
||||
let sortBy = sortOptions.popularity; // last_modified
|
||||
let sortDirection = 'desc'; // asc
|
||||
let limit = 16;
|
||||
|
||||
function getPackageThumbs() {
|
||||
const grid = document.getElementById('packageGrid');
|
||||
return Array.from(grid.children).filter((e) => e.dataset && e.dataset.name);
|
||||
const packagesCache = Array.from(grid.children).filter((e) => e.dataset && e.dataset.name);
|
||||
|
||||
function debounce(fn, delay) {
|
||||
var timer = null;
|
||||
return function () {
|
||||
var context = this, args = arguments;
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(function () {
|
||||
fn.apply(context, args);
|
||||
}, delay);
|
||||
};
|
||||
}
|
||||
|
||||
const onSearch = debounce(() => {
|
||||
const searchInput = document.getElementById('searchTermDesktop');
|
||||
if (searchInput.value) {
|
||||
const term = searchInput.value;
|
||||
const packages = getPackageThumbs();
|
||||
const sortedPackages = packages.sort((a, b) => {
|
||||
const aScore = getMatchScore(term, a.dataset);
|
||||
const bScore = getMatchScore(term, b.dataset);
|
||||
return bScore - aScore;
|
||||
});
|
||||
const grid = document.getElementById('packageGrid');
|
||||
grid.textContent = '';
|
||||
for(const sp of sortedPackages) {
|
||||
const score = getMatchScore(term, sp.dataset);
|
||||
if (score > 20) {
|
||||
sp.classList.remove('hidden');
|
||||
} else {
|
||||
sp.classList.add('hidden');
|
||||
}
|
||||
grid.appendChild(sp);
|
||||
}
|
||||
} else {
|
||||
sortPackages();
|
||||
}
|
||||
}, 300);
|
||||
|
||||
const searchInputDesktop = document.getElementById('searchTermDesktop');
|
||||
searchInputDesktop.addEventListener("search", onSearch);
|
||||
searchInputDesktop.addEventListener("change", onSearch);
|
||||
searchInputDesktop.addEventListener("keyup", onSearch);
|
||||
|
||||
function getPackageThumbs() {
|
||||
// const grid = document.getElementById('packageGrid');
|
||||
return packagesCache;
|
||||
}
|
||||
|
||||
const packagesCount = getPackageThumbs().length;
|
||||
|
||||
function sortPackages() {
|
||||
const packages = getPackageThumbs();
|
||||
|
||||
const sortedPackages = packages.sort((a, b) => {
|
||||
if (sortBy === sortOptions.popularity) {
|
||||
const aPop = +a.dataset.popularity;
|
||||
|
|
@ -140,7 +188,7 @@
|
|||
const packages = getPackageThumbs();
|
||||
let i = 0;
|
||||
for(const sp of packages) {
|
||||
if (i >= limit) {
|
||||
if (i >= limit && !showAllPackages) {
|
||||
sp.classList.add('hidden');
|
||||
} else {
|
||||
sp.classList.remove('hidden');
|
||||
|
|
@ -149,7 +197,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
function getMatchScore(term, dataset) {
|
||||
// provide higher value with name
|
||||
const { name, description } = dataset;
|
||||
const nameScore = stringSimilarity.compareTwoStrings(name, term);
|
||||
const descriptionScore = stringSimilarity.compareTwoStrings(description, term);
|
||||
return (nameScore*80) + (descriptionScore*20)
|
||||
}
|
||||
|
||||
const loadMoreButton = document.getElementById('loadMorePackagesBtn');
|
||||
if (showAllPackages) {
|
||||
loadMoreSection.classList.add('hidden');
|
||||
} else {
|
||||
loadMoreSection.classList.remove('hidden');
|
||||
}
|
||||
loadMoreButton.addEventListener('click',() => {
|
||||
limit += 16;
|
||||
refreshDisplayedPackages();
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="card card-thumbnail" style="width: 100%" data-name="{{- .name -}}" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}">
|
||||
<div class="card card-thumbnail" style="width: 100%" data-name="{{- .name -}}" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}" data-description="{{- .desc -}}">
|
||||
<figure class="card-img-top" >
|
||||
<img class="package-image" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
|
||||
<article class="card-thumb-label">
|
||||
|
|
@ -19,12 +19,12 @@
|
|||
<span class="package-install-no">>{{- .installs -}} installs</span> -->
|
||||
</p>
|
||||
</div>
|
||||
<a href="/packages/{{- .slug -}}/">
|
||||
<a href="/+{{- lower .full_name -}}/">
|
||||
{{- partial "detail-btn.html" . -}}
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body thumbnail-body-mobile">
|
||||
<a href="/packages/{{- .slug -}}/">
|
||||
<a href="/+{{- lower .full_name -}}/">
|
||||
<button class="detail-btn-mobile"><i class="icon-enter-arrow"></i>details</button>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
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>
|
||||
.sorting-container{
|
||||
display:none;
|
||||
}
|
||||
@media only screen and (min-width: 576px) {
|
||||
.sorting-container{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.sorting-container{
|
||||
font-family: "pp-neue-machina", sans-serif;
|
||||
background-color: #1a1a1a;
|
||||
border: 1px solid #ffffff;
|
||||
|
|
|
|||
|
|
@ -5,12 +5,14 @@
|
|||
</div>
|
||||
<hr>
|
||||
|
||||
{{- partial "search-menu.html" "searchTermMobile" -}}
|
||||
<hr>
|
||||
<!-- Slider main container -->
|
||||
|
||||
<div class="row" style="margin-bottom: 2vw !important;">
|
||||
<div class="col">
|
||||
<div class="swiper mySwiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div id="parentSwiper" class="swiper-wrapper">
|
||||
{{ range $.Site.Data.packages }}
|
||||
<div class="swiper-slide">
|
||||
{{- partial "package-thumbnail.html" .}}
|
||||
|
|
@ -21,3 +23,92 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 1vw !important;
|
||||
margin-top: 1vw;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.swiper-slide figure > img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
|
||||
<script>
|
||||
let swipeyPackagesCache;
|
||||
const swiper = new Swiper(".mySwiper", {
|
||||
slidesPerView: 1.5,
|
||||
spaceBetween: 10,
|
||||
freeMode: true,
|
||||
loop: false,
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true,
|
||||
},
|
||||
on: {
|
||||
afterInit: () => {
|
||||
const swiperParent = document.getElementById('parentSwiper');
|
||||
swipeyPackagesCache = Array.from(swiperParent.children)
|
||||
.filter((e) => e.childNodes[0].dataset.popularity)
|
||||
.map((e) => {
|
||||
e.classList = ['swiper-slide'];
|
||||
return e;
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const onSearchMobile = debounce(async () => {
|
||||
const searchInput = document.getElementById('searchTermMobile');
|
||||
if (searchInput.value) {
|
||||
const term = searchInput.value;
|
||||
const packages = [...swipeyPackagesCache];
|
||||
const sortedPackages = packages.sort((a, b) => {
|
||||
const aScore = getMatchScore(term, a.childNodes[0].dataset);
|
||||
const bScore = getMatchScore(term, b.childNodes[0].dataset);
|
||||
return bScore - aScore;
|
||||
});
|
||||
swiper.removeAllSlides();
|
||||
for(const sp of sortedPackages) {
|
||||
const score = getMatchScore(term, sp.childNodes[0].dataset);
|
||||
if (score > 20) {
|
||||
swiper.addSlide(1, sp);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const recache = [...swipeyPackagesCache];
|
||||
await swiper.removeAllSlides();
|
||||
swiper.appendSlide(recache);
|
||||
}
|
||||
}, 300);
|
||||
|
||||
const searchInputMobile = document.getElementById('searchTermMobile');
|
||||
searchInputMobile.addEventListener("search", onSearchMobile);
|
||||
searchInputMobile.addEventListener("change", onSearchMobile);
|
||||
searchInputMobile.addEventListener("keyup", onSearchMobile);
|
||||
</script>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 128 KiB After Width: | Height: | Size: 407 KiB |
|
|
@ -247,7 +247,7 @@ mark{
|
|||
align-items: center;
|
||||
height: 15vw;
|
||||
margin-top: 0.4vw;
|
||||
margin-bottom: 1vw;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.package_before{
|
||||
|
|
@ -303,7 +303,7 @@ mark{
|
|||
align-items: center;
|
||||
height: 15vw;
|
||||
margin-top: 1.1vw;
|
||||
margin-bottom: 1vw;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.package_before{
|
||||
|
|
@ -358,8 +358,8 @@ mark{
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 20.2vw;
|
||||
margin-top: 1.3vw;
|
||||
margin-bottom: 2.5vw;
|
||||
margin-top: .5vw;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.metric-block{
|
||||
|
|
|
|||
Loading…
Reference in a new issue