mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 15:53:57 +00:00
stream schedule component added to socials
This commit is contained in:
liyunze
parent
6f05d793bd
commit
a736e8386a
5 changed files with 199 additions and 26 deletions
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
46
package.json
46
package.json
|
|
@ -1,24 +1,26 @@
|
|||
{
|
||||
"name": "dev-portfolio",
|
||||
"type": "module",
|
||||
"version": "3.0.1",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/svelte": "^4.0.2",
|
||||
"@astrojs/tailwind": "^5.0.0",
|
||||
"astro": "^3.2.0",
|
||||
"svelte": "^4.2.1",
|
||||
"tailwindcss": "^3.3.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier": "^3.0.3",
|
||||
"prettier-plugin-astro": "^0.12.0",
|
||||
"prettier-plugin-svelte": "^3.0.3"
|
||||
}
|
||||
"name": "dev-portfolio",
|
||||
"type": "module",
|
||||
"version": "3.0.1",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/svelte": "^4.0.2",
|
||||
"@astrojs/tailwind": "^5.0.0",
|
||||
"astro": "^3.2.0",
|
||||
"moment": "^2.30.1",
|
||||
"moment-timezone": "^0.5.45",
|
||||
"svelte": "^4.2.1",
|
||||
"tailwindcss": "^3.3.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier": "^3.0.3",
|
||||
"prettier-plugin-astro": "^0.12.0",
|
||||
"prettier-plugin-svelte": "^3.0.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -146,7 +146,8 @@
|
|||
>, <br class="sm:hidden" />I'm Ryan!
|
||||
</div>
|
||||
<p class="text-left">
|
||||
I was born and raised in Malaysia, and fluent in Mandarin Chinese
|
||||
I was born and raised in Malaysia, currently studying my Bachelor's
|
||||
in Computer Science in Australia! I speak fluent in Mandarin Chinese
|
||||
and English.
|
||||
<br /><br />
|
||||
I'm passionate about developing open source projects that benefit others,
|
||||
|
|
|
|||
157
src/components/sections/StreamSchedule.svelte
Normal file
157
src/components/sections/StreamSchedule.svelte
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
<script lang="ts">
|
||||
import moment from "moment-timezone";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
let adjusted = true;
|
||||
|
||||
const myLocation = "Australia/Melbourne";
|
||||
|
||||
/**
|
||||
* Calculates the upcoming specified time for a given day of the week in my timezone.
|
||||
*
|
||||
* This function initially finds the upcoming Friday at 8 AM in my timezone.
|
||||
* It then adjusts this time based on the provided `dayOfWeek` and `time24` parameters to find the
|
||||
* upcoming time specified by these parameters. If the specified time has already passed for the current week,
|
||||
* it calculates the time for the next week.
|
||||
*
|
||||
* @param dayOfWeek - The day of the week as an integer (1 for Monday, 7 for Sunday).
|
||||
* @param time24 - The time in 24-hour format (e.g., "14:00" for 2 PM).
|
||||
* @returns A moment object representing the upcoming specified time in my timezone.
|
||||
*/
|
||||
function getUpcomingTimeDevTZ(
|
||||
dayOfWeek: number,
|
||||
time24: string,
|
||||
): moment.Moment {
|
||||
// Current time in my timezone
|
||||
let now = moment.tz(myLocation);
|
||||
|
||||
// Find the upcoming Friday
|
||||
let upcomingFriday = now.clone().day(5).hour(8).minute(0).second(0);
|
||||
if (now.day() >= 5 && now.format("HH:mm") >= "08:00") {
|
||||
// If today is Friday and it's already past 8am, set to next Friday
|
||||
upcomingFriday.add(1, "week");
|
||||
}
|
||||
|
||||
// Adjust based on the provided day and time
|
||||
let dayDiff = (5 - dayOfWeek + 7) % 7; // Calculate days until Friday
|
||||
let inputTime = moment(time24, "HH:mm");
|
||||
let upcomingTime = now
|
||||
.clone()
|
||||
.day(dayOfWeek)
|
||||
.hour(inputTime.hour())
|
||||
.minute(inputTime.minute())
|
||||
.second(0);
|
||||
|
||||
if (now.isAfter(upcomingTime)) {
|
||||
upcomingTime.add(1, "week"); // If the time has already passed this week, set to next week
|
||||
}
|
||||
|
||||
return upcomingTime.tz(myLocation);
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert a given time in my timezone to the user's local timezone.
|
||||
* @param {moment.Moment} devTimeZone - Moment object representing the time in my timezone.
|
||||
* @returns A moment object representing the equivalent time in the user's local timezone.
|
||||
*/
|
||||
function convertToUserLocalTimezone(
|
||||
devTimeZone: moment.Moment,
|
||||
): moment.Moment {
|
||||
return devTimeZone.clone().tz(moment.tz.guess());
|
||||
}
|
||||
|
||||
type Schedule = {
|
||||
day: string;
|
||||
start: string;
|
||||
end: string;
|
||||
};
|
||||
|
||||
let myStreamSchedule = [];
|
||||
let localisedStreamSchedule = [];
|
||||
|
||||
let formattedSchedule: Schedule[] = [];
|
||||
let formattedLocalisedSchedule: Schedule[] = [];
|
||||
|
||||
function displayStreamSchedule() {
|
||||
myStreamSchedule = [
|
||||
{
|
||||
start: getUpcomingTimeDevTZ(5, "10:00"),
|
||||
end: getUpcomingTimeDevTZ(5, "18:00"),
|
||||
},
|
||||
{
|
||||
start: getUpcomingTimeDevTZ(6, "10:00"),
|
||||
end: getUpcomingTimeDevTZ(6, "18:00"),
|
||||
},
|
||||
];
|
||||
|
||||
localisedStreamSchedule = myStreamSchedule.map((stream) => ({
|
||||
start: convertToUserLocalTimezone(stream.start),
|
||||
end: convertToUserLocalTimezone(stream.end),
|
||||
}));
|
||||
|
||||
formattedSchedule = myStreamSchedule.map((stream) => ({
|
||||
day: stream.start.format("dddd"),
|
||||
start: stream.start.format("h:mm a"),
|
||||
end: stream.end.format("h:mm a"),
|
||||
}));
|
||||
|
||||
formattedLocalisedSchedule = localisedStreamSchedule.map((stream) => ({
|
||||
day: stream.start.format("dddd"),
|
||||
start: stream.start.format("h:mm a"),
|
||||
end: stream.end.format("h:mm a"),
|
||||
}));
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
// Example usage
|
||||
displayStreamSchedule();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- TABS -->
|
||||
<div
|
||||
class="w-full flex
|
||||
bg-[#141414]
|
||||
rounded-xl
|
||||
px-1 py-1 z-20"
|
||||
>
|
||||
<button
|
||||
on:click={() => (adjusted = true)}
|
||||
class="rounded-lg w-1/2 py-2
|
||||
transition-colors duration-150
|
||||
{adjusted ? 'text-white bg-[#303030]' : 'text-gray-400'}"
|
||||
>Your Timezone</button
|
||||
>
|
||||
<button
|
||||
on:click={() => (adjusted = false)}
|
||||
class="rounded-lg flex-grow py-2
|
||||
transition-colors duration-150
|
||||
{adjusted ? 'text-gray-400' : 'text-white bg-[#303030]'}">AEDT</button
|
||||
>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Day</th>
|
||||
<th>Time</th>
|
||||
</tr>
|
||||
{#if adjusted}
|
||||
{#each formattedLocalisedSchedule as localTime}
|
||||
<tr>
|
||||
<td class="px-1 md:px-5">{localTime.day}</td>
|
||||
<td class="px-1 md:px-5"
|
||||
>{localTime.start} - {localTime.end}</td
|
||||
>
|
||||
</tr>
|
||||
{/each}
|
||||
{:else}
|
||||
{#each formattedSchedule as devTime}
|
||||
<tr>
|
||||
<td class="px-1 md:px-5">{devTime.day}</td>
|
||||
<td class="px-1 md:px-5">{devTime.start} - {devTime.end}</td
|
||||
>
|
||||
</tr>
|
||||
{/each}
|
||||
{/if}
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import StreamScheduleComponent from "../components/sections/StreamSchedule.svelte";
|
||||
---
|
||||
|
||||
<Layout title="Socials" description="Check out Ryan's socials">
|
||||
|
|
@ -421,8 +422,17 @@ import Layout from "../layouts/Layout.astro";
|
|||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- Stream Schedule -->
|
||||
<div class="social-card col-span-2 h-fit">
|
||||
<div
|
||||
class="social-card-content flex justify-center items-center flex-col p-0 md:p-3"
|
||||
>
|
||||
<h2 class="font-bold text-xl mb-3">Stream Schedule</h2>
|
||||
<StreamScheduleComponent client:load />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Location -->
|
||||
<div class="social-card col-span-2">
|
||||
<div class="social-card col-span-2 md:col-span-1 lg:col-span-2">
|
||||
<div
|
||||
class="social-card-content flex flex-col justify-center items-start gap-5"
|
||||
>
|
||||
|
|
@ -585,11 +595,14 @@ import Layout from "../layouts/Layout.astro";
|
|||
</div>
|
||||
<div>
|
||||
<h2 class="font-bold text-xl">Discord</h2>
|
||||
<p class="text-[#ccc]">rython.dev/discord</p>
|
||||
<p class="text-[#ccc]">
|
||||
rython.dev/<wbr />discord
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="opacity-0 hidden lg:block"></div>
|
||||
<!-- Twitter -->
|
||||
<a href="https://twitter.com/@RythonDev" target="_blank">
|
||||
<div class="social-card">
|
||||
|
|
@ -648,6 +661,7 @@ import Layout from "../layouts/Layout.astro";
|
|||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="opacity-0 hidden md:block lg:hidden"></div>
|
||||
<!-- Threads -->
|
||||
<a href="https://www.threads.net/@rythondev" target="_blank">
|
||||
<div class="social-card">
|
||||
|
|
@ -786,7 +800,6 @@ import Layout from "../layouts/Layout.astro";
|
|||
border-radius: inherit;
|
||||
/* flex-grow: 1; */
|
||||
inset: 1px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
padding: 1.75rem;
|
||||
z-index: 3;
|
||||
|
|
|
|||
Loading…
Reference in a new issue