update
This commit is contained in:
Korbs
parent
b29039f07b
commit
e0097006ff
4 changed files with 150 additions and 98 deletions
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
16
package.json
16
package.json
|
|
@ -32,24 +32,24 @@
|
|||
"build": "astro build --config ./source/astro.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/mdx": "^3.1.3",
|
||||
"@astrojs/node": "^8.3.2",
|
||||
"@astrojs/mdx": "^3.1.5",
|
||||
"@astrojs/node": "^8.3.3",
|
||||
"@astrojs/vue": "^4.5.0",
|
||||
"@iconoir/vue": "^7.8.0",
|
||||
"@iconoir/vue": "^7.9.0",
|
||||
"@minpluto/zorn": "^0.4.5",
|
||||
"@nurodev/astro-bun": "^1.1.5",
|
||||
"@openpanel/sdk": "^0.0.9-beta",
|
||||
"@supabase/supabase-js": "^2.45.1",
|
||||
"@openpanel/sdk": "^1.0.0",
|
||||
"@supabase/supabase-js": "^2.45.3",
|
||||
"@xexiu/astro-modal": "^0.5.9",
|
||||
"astro": "^4.13.3",
|
||||
"astro": "^4.15.4",
|
||||
"astro-analytics": "^2.7.0",
|
||||
"astro-i18next": "^1.0.0-beta.21",
|
||||
"astro-tooltips": "^0.6.2",
|
||||
"astro-useragent": "^4.0.2",
|
||||
"rss-to-json": "^2.1.1",
|
||||
"undici": "^6.19.7"
|
||||
"undici": "^6.19.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"sass": "^1.77.8"
|
||||
"sass": "^1.78.0"
|
||||
}
|
||||
}
|
||||
79
source/src/components/category/CategoryCard.astro
Normal file
79
source/src/components/category/CategoryCard.astro
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
---
|
||||
const {
|
||||
Link,
|
||||
Name,
|
||||
Platform,
|
||||
Thumbnail,
|
||||
Ratio = "16:9" // "16:9" or "9:16"
|
||||
} = Astro.props
|
||||
---
|
||||
|
||||
|
||||
<a href={Link} style={"background-image: url('" + Thumbnail + "')"} class="goin-card">
|
||||
{
|
||||
()=> {
|
||||
if (Platform === "YouTube") {
|
||||
return <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg></span>
|
||||
} else if (Platform === "Twitch") {
|
||||
return <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M391.2 103.5H352.5v109.7h38.6zM285 103H246.4V212.8H285zM120.8 0 24.3 91.4V420.6H140.1V512l96.5-91.4h77.3L487.7 256V0zM449.1 237.8l-77.2 73.1H294.6l-67.6 64v-64H140.1V36.6H449.1z"/></svg></span>
|
||||
}
|
||||
}
|
||||
}
|
||||
<div class="goin-card-content">
|
||||
<p>{Name}</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<style lang="scss">
|
||||
.goin-card {
|
||||
text-decoration: none;
|
||||
border-radius: 10px;
|
||||
background-size: cover !important;
|
||||
background-position: center !important;
|
||||
position: relative;
|
||||
span {
|
||||
svg {
|
||||
fill: white;
|
||||
width: 30px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
margin: 18px;
|
||||
}
|
||||
}
|
||||
.goin-card-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
height: 100%;
|
||||
place-content: center;
|
||||
border-radius: 10px;
|
||||
backdrop-filter: blur(3px) brightness(0.3) contrast(0.8);
|
||||
p {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
margin: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
{
|
||||
()=> {
|
||||
if (Ratio === "16:9") {
|
||||
return <style is:inline>
|
||||
.goin-card {
|
||||
height: 170px !important
|
||||
}
|
||||
</style>
|
||||
} else if (Ratio === "9:16") {
|
||||
return <style is:inline>
|
||||
.goin-card {
|
||||
height: 328px !important
|
||||
}
|
||||
</style>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -13,6 +13,7 @@ import { FireFlame, Frame, Gamepad, GraphUp, Movie, MusicDoubleNote } from "@ico
|
|||
// Components
|
||||
import Trending from "@components/category/trending.astro";
|
||||
import Chip from "@components/Chip.astro";
|
||||
import CategoryCard from "@components/category/CategoryCard.astro";
|
||||
|
||||
// Fetch
|
||||
const TrendingFetch = DEFAULT_MEDIA_DATA_PROXY + '/api/v1/trending'
|
||||
|
|
@ -46,51 +47,67 @@ const TwitchDiscoverData = await TwitchDiscoverFetch.json()
|
|||
<br/>
|
||||
<div class="category-select-grid" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;">
|
||||
{TrendingSplit.map((data) =>
|
||||
<a href={'/discover?category=trending&?platform=youtube'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card">
|
||||
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg></span>
|
||||
<div class="goin-card-content">
|
||||
<GraphUp viewBox="0 0 10 24"/>
|
||||
<p>{t("SIDEBAR.CATEGORY_LIST.POPULAR")}</p>
|
||||
</div>
|
||||
</a>
|
||||
<CategoryCard
|
||||
Link={'/discover?category=trending&?platform=youtube'}
|
||||
Name={t("SIDEBAR.CATEGORY_LIST.POPULAR")}
|
||||
Platform="YouTube"
|
||||
Thumbnail={DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg'}
|
||||
Ratio="16:9"
|
||||
server:defer
|
||||
>
|
||||
<div slot="fallback" class="fl-sk-video" style="height: 328px;"></div>
|
||||
</CategoryCard>
|
||||
)}
|
||||
{MoviesSplit.map((data) =>
|
||||
<a href={'/discover?category=movies&?platform=youtube'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card">
|
||||
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg></span>
|
||||
<div class="goin-card-content">
|
||||
<Movie viewBox="0 0 10 24"/>
|
||||
<p>{t("SIDEBAR.CATEGORY_LIST.TRAILERS")}</p>
|
||||
</div>
|
||||
</a>
|
||||
<CategoryCard
|
||||
Link={'/discover?category=movies&?platform=youtube'}
|
||||
Name={t("SIDEBAR.CATEGORY_LIST.TRAILERS")}
|
||||
Platform="YouTube"
|
||||
Thumbnail={DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg'}
|
||||
Ratio="16:9"
|
||||
server:defer
|
||||
>
|
||||
<div slot="fallback" class="fl-sk-video" style="height: 328px;"></div>
|
||||
</CategoryCard>
|
||||
)}
|
||||
{MusicSplit.map((data) =>
|
||||
<a href={'/discover?category=music&?platform=youtube'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card">
|
||||
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg></span>
|
||||
<div class="goin-card-content">
|
||||
<MusicDoubleNote viewBox="0 0 10 24"/>
|
||||
<p>{t("SIDEBAR.CATEGORY_LIST.MUSIC")}</p>
|
||||
</div>
|
||||
</a>
|
||||
<CategoryCard
|
||||
Link={'/discover?category=music&?platform=youtube'}
|
||||
Name={t("SIDEBAR.CATEGORY_LIST.MUSIC")}
|
||||
Platform="YouTube"
|
||||
Thumbnail={DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg'}
|
||||
Ratio="16:9"
|
||||
server:defer
|
||||
>
|
||||
<div slot="fallback" class="fl-sk-video" style="height: 328px;"></div>
|
||||
</CategoryCard>
|
||||
)}
|
||||
{GamingSplit.map((data) =>
|
||||
<a href={'/discover?category=gaming&?platform=youtube'} style={'background: url("' + DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg")'} class="goin-card">
|
||||
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"/></svg></span>
|
||||
<div class="goin-card-content">
|
||||
<Gamepad viewBox="0 0 10 24"/>
|
||||
<p>{t("SIDEBAR.CATEGORY_LIST.GAMES")}</p>
|
||||
</div>
|
||||
</a>
|
||||
<CategoryCard
|
||||
Link={'/discover?category=gaming&?platform=youtube'}
|
||||
Name={t("SIDEBAR.CATEGORY_LIST.GAMES")}
|
||||
Platform="YouTube"
|
||||
Thumbnail={DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg'}
|
||||
Ratio="16:9"
|
||||
server:defer
|
||||
>
|
||||
<div slot="fallback" class="fl-sk-video" style="height: 328px;"></div>
|
||||
</CategoryCard>
|
||||
)}
|
||||
</div>
|
||||
<br/>
|
||||
<div id="twitch" class="category-select-grid">
|
||||
{TwitchDiscoverData.data.map((data) =>
|
||||
<a href={'/discover?category=' + data.name + '&?platform=twitch'} style={'background: url("' + data.image + '")'} class="goin-card">
|
||||
<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M391.2 103.5H352.5v109.7h38.6zM285 103H246.4V212.8H285zM120.8 0 24.3 91.4V420.6H140.1V512l96.5-91.4h77.3L487.7 256V0zM449.1 237.8l-77.2 73.1H294.6l-67.6 64v-64H140.1V36.6H449.1z"/></svg></span>
|
||||
<div class="goin-card-content">
|
||||
<p>{data.displayName}</p>
|
||||
</div>
|
||||
</a>
|
||||
<CategoryCard
|
||||
Link={'/discover?category=' + data.name + '&?platform=twitch'}
|
||||
Name={data.displayName}
|
||||
Platform="Twitch"
|
||||
Thumbnail={DEFAULT_IMAGE_PROXY + '/' + data.image}
|
||||
Ratio="9:16"
|
||||
server:defer
|
||||
>
|
||||
<div slot="fallback" class="fl-sk-video" style="height: 328px;"></div>
|
||||
</CategoryCard>
|
||||
)}
|
||||
</div>
|
||||
<br/>
|
||||
|
|
@ -99,6 +116,18 @@ const TwitchDiscoverData = await TwitchDiscoverFetch.json()
|
|||
|
||||
<style is:inline>.sidebar-top-end a[href="/"] {background: rgb(255 255 255 / 25%) !important;border: 2px rgba(255, 255, 255, 0.25) solid !important;}</style>
|
||||
<style is:global lang="scss">
|
||||
@keyframes load {
|
||||
0% { background-position-x: -100px; }
|
||||
100% { background-position-x: -100%; }
|
||||
}
|
||||
.fl-sk-video {
|
||||
height: 183px;
|
||||
width: 100%;
|
||||
background-image: linear-gradient(90deg, #323232 0px, #4c4c4c 40px, #323232 80px);
|
||||
background-size: 600px;
|
||||
animation: load 2s linear infinite;
|
||||
border-radius: 6px;
|
||||
}
|
||||
img[src="/images/backgrounds/1.webp"] {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
|
|
@ -118,57 +147,6 @@ img[src="/images/backgrounds/1.webp"] {
|
|||
text-align: center;
|
||||
padding-top: 10%;
|
||||
}
|
||||
|
||||
.goin-card {
|
||||
height: 170px;
|
||||
text-decoration: none;
|
||||
border-radius: 10px;
|
||||
background-size: cover !important;
|
||||
background-position: center !important;
|
||||
position: relative;
|
||||
span {
|
||||
svg {
|
||||
fill: white;
|
||||
width: 30px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
margin: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chip {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.goin-card-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
height: 100%;
|
||||
place-content: center;
|
||||
border-radius: 10px;
|
||||
backdrop-filter: blur(3px) brightness(0.3) contrast(0.8);
|
||||
}
|
||||
.goin-card-content p {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
margin: 12px;
|
||||
}
|
||||
.goin-card-content svg {
|
||||
display: none;
|
||||
}
|
||||
.goin-card img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.category-select-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
|
|
@ -177,9 +155,4 @@ img[src="/images/backgrounds/1.webp"] {
|
|||
margin: auto;
|
||||
padding: 0px 24px;
|
||||
}
|
||||
.category-select-grid#twitch {
|
||||
a {
|
||||
height: 328px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in a new issue