MinPluto/MinPluto-Frontend
MinPluto/MinPluto-Frontend
Archived
1
Fork 0
Code Issues Pull requests Activity

update

Browse source
This commit is contained in:
Korbs 2024-09-07 20:33:13 -04:00
parent b29039f07b
commit e0097006ff
4 changed files with 150 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

16
package.json
View file

@ -32,24 +32,24 @@
"build": "astro build --config ./source/astro.js" "build": "astro build --config ./source/astro.js"
}, },
"dependencies": { "dependencies": {
"@astrojs/mdx": "^3.1.3", "@astrojs/mdx": "^3.1.5",
"@astrojs/node": "^8.3.2", "@astrojs/node": "^8.3.3",
"@astrojs/vue": "^4.5.0", "@astrojs/vue": "^4.5.0",
"@iconoir/vue": "^7.8.0", "@iconoir/vue": "^7.9.0",
"@minpluto/zorn": "^0.4.5", "@minpluto/zorn": "^0.4.5",
"@nurodev/astro-bun": "^1.1.5", "@nurodev/astro-bun": "^1.1.5",
"@openpanel/sdk": "^0.0.9-beta", "@openpanel/sdk": "^1.0.0",
"@supabase/supabase-js": "^2.45.1", "@supabase/supabase-js": "^2.45.3",
"@xexiu/astro-modal": "^0.5.9", "@xexiu/astro-modal": "^0.5.9",
"astro": "^4.13.3", "astro": "^4.15.4",
"astro-analytics": "^2.7.0", "astro-analytics": "^2.7.0",
"astro-i18next": "^1.0.0-beta.21", "astro-i18next": "^1.0.0-beta.21",
"astro-tooltips": "^0.6.2", "astro-tooltips": "^0.6.2",
"astro-useragent": "^4.0.2", "astro-useragent": "^4.0.2",
"rss-to-json": "^2.1.1", "rss-to-json": "^2.1.1",
"undici": "^6.19.7" "undici": "^6.19.8"
}, },
"devDependencies": { "devDependencies": {
"sass": "^1.77.8" "sass": "^1.78.0"
} }
} }

79
source/src/components/category/CategoryCard.astro Normal file
View 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>
}
}
}

153
source/src/pages/index.astro
View file

@ -13,6 +13,7 @@ import { FireFlame, Frame, Gamepad, GraphUp, Movie, MusicDoubleNote } from "@ico
// Components // Components
import Trending from "@components/category/trending.astro"; import Trending from "@components/category/trending.astro";
import Chip from "@components/Chip.astro"; import Chip from "@components/Chip.astro";
import CategoryCard from "@components/category/CategoryCard.astro";
// Fetch // Fetch
const TrendingFetch = DEFAULT_MEDIA_DATA_PROXY + '/api/v1/trending' const TrendingFetch = DEFAULT_MEDIA_DATA_PROXY + '/api/v1/trending'
@ -46,51 +47,67 @@ const TwitchDiscoverData = await TwitchDiscoverFetch.json()
<br/> <br/>
<div class="category-select-grid" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;"> <div class="category-select-grid" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;">
{TrendingSplit.map((data) => {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"> <CategoryCard
<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> Link={'/discover?category=trending&?platform=youtube'}
<div class="goin-card-content"> Name={t("SIDEBAR.CATEGORY_LIST.POPULAR")}
<GraphUp viewBox="0 0 10 24"/> Platform="YouTube"
<p>{t("SIDEBAR.CATEGORY_LIST.POPULAR")}</p> Thumbnail={DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg'}
</div> Ratio="16:9"
</a> server:defer
>
<div slot="fallback" class="fl-sk-video" style="height: 328px;"></div>
</CategoryCard>
)} )}
{MoviesSplit.map((data) => {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"> <CategoryCard
<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> Link={'/discover?category=movies&?platform=youtube'}
<div class="goin-card-content"> Name={t("SIDEBAR.CATEGORY_LIST.TRAILERS")}
<Movie viewBox="0 0 10 24"/> Platform="YouTube"
<p>{t("SIDEBAR.CATEGORY_LIST.TRAILERS")}</p> Thumbnail={DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg'}
</div> Ratio="16:9"
</a> server:defer
>
<div slot="fallback" class="fl-sk-video" style="height: 328px;"></div>
</CategoryCard>
)} )}
{MusicSplit.map((data) => {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"> <CategoryCard
<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> Link={'/discover?category=music&?platform=youtube'}
<div class="goin-card-content"> Name={t("SIDEBAR.CATEGORY_LIST.MUSIC")}
<MusicDoubleNote viewBox="0 0 10 24"/> Platform="YouTube"
<p>{t("SIDEBAR.CATEGORY_LIST.MUSIC")}</p> Thumbnail={DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg'}
</div> Ratio="16:9"
</a> server:defer
>
<div slot="fallback" class="fl-sk-video" style="height: 328px;"></div>
</CategoryCard>
)} )}
{GamingSplit.map((data) => {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"> <CategoryCard
<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> Link={'/discover?category=gaming&?platform=youtube'}
<div class="goin-card-content"> Name={t("SIDEBAR.CATEGORY_LIST.GAMES")}
<Gamepad viewBox="0 0 10 24"/> Platform="YouTube"
<p>{t("SIDEBAR.CATEGORY_LIST.GAMES")}</p> Thumbnail={DEFAULT_IMAGE_PROXY + '/' + 'https://img.youtube.com/' + '/vi/' + data.videoId + '/mqdefault.jpg'}
</div> Ratio="16:9"
</a> server:defer
>
<div slot="fallback" class="fl-sk-video" style="height: 328px;"></div>
</CategoryCard>
)} )}
</div> </div>
<br/> <br/>
<div id="twitch" class="category-select-grid"> <div id="twitch" class="category-select-grid">
{TwitchDiscoverData.data.map((data) => {TwitchDiscoverData.data.map((data) =>
<a href={'/discover?category=' + data.name + '&?platform=twitch'} style={'background: url("' + data.image + '")'} class="goin-card"> <CategoryCard
<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> Link={'/discover?category=' + data.name + '&?platform=twitch'}
<div class="goin-card-content"> Name={data.displayName}
<p>{data.displayName}</p> Platform="Twitch"
</div> Thumbnail={DEFAULT_IMAGE_PROXY + '/' + data.image}
</a> Ratio="9:16"
server:defer
>
<div slot="fallback" class="fl-sk-video" style="height: 328px;"></div>
</CategoryCard>
)} )}
</div> </div>
<br/> <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: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"> <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"] { img[src="/images/backgrounds/1.webp"] {
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
@ -118,57 +147,6 @@ img[src="/images/backgrounds/1.webp"] {
text-align: center; text-align: center;
padding-top: 10%; 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 { .category-select-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@ -177,9 +155,4 @@ img[src="/images/backgrounds/1.webp"] {
margin: auto; margin: auto;
padding: 0px 24px; padding: 0px 24px;
} }
.category-select-grid#twitch {
a {
height: 328px;
}
}
</style> </style>