rythondev/RythonDev
1
0
Fork 0
mirror of https://github.com/liyunze-coding/RythonDev.git synced 2026-09-22 15:53:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

migrated to Svelte 5

Browse source
This commit is contained in:
liyunze 2024-11-04 17:47:04 +11:00
parent 84f734eecc
commit 208a700fe6
8 changed files with 73 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
bun.lockb
View file

Binary file not shown.

52
package.json
View file

@ -1,27 +1,29 @@
{ {
"name": "dev-portfolio", "name": "dev-portfolio",
"type": "module", "type": "module",
"version": "3.0.1", "version": "3.0.1",
"scripts": { "scripts": {
"dev": "astro dev", "dev": "astro dev",
"start": "astro dev", "start": "astro dev",
"build": "astro build", "build": "astro build",
"preview": "astro preview", "preview": "astro preview",
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"@astrojs/svelte": "^4.0.2", "@astrojs/svelte": "^5.7.2",
"@astrojs/tailwind": "^5.0.0", "@astrojs/tailwind": "^5.0.0",
"astro": "^3.2.0", "astro": "^4.16.8",
"caniuse-lite": "^1.0.30001669", "caniuse-lite": "^1.0.30001669",
"moment": "^2.30.1", "moment": "^2.30.1",
"moment-timezone": "^0.5.45", "moment-timezone": "^0.5.45",
"svelte": "^4.2.1", "svelte": "^5.1.9",
"tailwindcss": "^3.3.3" "tailwindcss": "^3.3.3",
}, "typescript": "^5.6.3"
"devDependencies": { },
"prettier": "^3.0.3", "devDependencies": {
"prettier-plugin-astro": "^0.12.0", "prettier": "^3.0.3",
"prettier-plugin-svelte": "^3.0.3" "prettier-plugin-astro": "^0.14.1",
} "prettier-plugin-svelte": "^3.0.3",
"@sveltejs/vite-plugin-svelte": "^4.0.0-next.6"
}
} }

4
src/components/sections/IntroComponent.svelte
View file

@ -9,7 +9,7 @@
"Content creator", "Content creator",
"Student", "Student",
]; ];
let roleState: string = ""; let roleState: string = $state("");
let role: string; let role: string;
let counter: number = 0; let counter: number = 0;
let roleEmpty: boolean = true; let roleEmpty: boolean = true;
@ -82,7 +82,7 @@
greeting = "evening"; greeting = "evening";
} }
let greetingState: string = ""; let greetingState: string = $state("");
let greetingPulse: HTMLElement; let greetingPulse: HTMLElement;
async function animateGreeting(greeting: string) { async function animateGreeting(greeting: string) {

2
src/components/sections/ProjectsComponent.svelte
View file

@ -1,6 +1,4 @@
<script lang="ts"> <script lang="ts">
// import { onMount } from "svelte";
const streamers = [ const streamers = [
{ {
streamer: "4l1c3_0", streamer: "4l1c3_0",

65
src/components/sections/StreamSchedule.svelte
View file

@ -2,6 +2,8 @@
import moment from "moment-timezone"; import moment from "moment-timezone";
import { onMount } from "svelte"; import { onMount } from "svelte";
const myLocation = "Australia/Melbourne";
const myStreamSchedule = [ const myStreamSchedule = [
{ {
start: getUpcomingTimeDevTZ(2, "9:30"), start: getUpcomingTimeDevTZ(2, "9:30"),
@ -17,8 +19,6 @@
}, },
]; ];
const myLocation = "Australia/Melbourne";
/** /**
* Calculates the upcoming specified time for a given day of the week in my timezone. * Calculates the upcoming specified time for a given day of the week in my timezone.
* *
@ -70,13 +70,13 @@
end: string; end: string;
}; };
let sameTimezone = true; let sameTimezone = $state(true);
let adjusted = true; let adjusted = $state(true);
let localisedStreamSchedule = []; let localisedStreamSchedule = [];
let formattedSchedule: Schedule[] = []; let formattedSchedule: Schedule[] = $state([]);
let formattedLocalisedSchedule: Schedule[] = []; let formattedLocalisedSchedule: Schedule[] = $state([]);
function displayStreamSchedule() { function displayStreamSchedule() {
localisedStreamSchedule = myStreamSchedule.map((stream) => ({ localisedStreamSchedule = myStreamSchedule.map((stream) => ({
@ -121,14 +121,14 @@
px-1 py-1 z-20" px-1 py-1 z-20"
> >
<button <button
on:click={() => (adjusted = true)} onclick={() => (adjusted = true)}
class="rounded-lg w-1/2 py-1 class="rounded-lg w-1/2 py-1
transition-colors duration-150 transition-colors duration-150
{adjusted ? 'text-white bg-[#303030]' : 'text-gray-400'}" {adjusted ? 'text-white bg-[#303030]' : 'text-gray-400'}"
>Your Timezone</button >Your Timezone</button
> >
<button <button
on:click={() => (adjusted = false)} onclick={() => (adjusted = false)}
class="rounded-lg flex-grow py-1 class="rounded-lg flex-grow py-1
transition-colors duration-150 transition-colors duration-150
{adjusted ? 'text-gray-400' : 'text-white bg-[#303030]'}" {adjusted ? 'text-gray-400' : 'text-white bg-[#303030]'}"
@ -138,28 +138,33 @@
{/if} {/if}
<div class="mt-1"> <div class="mt-1">
<table> <table>
<tr> <thead>
<th>Day</th> <tr>
<th>Time</th> <th>Day</th>
</tr> <th>Time</th>
{#if adjusted} </tr>
{#each formattedLocalisedSchedule as localTime} </thead>
<tr> <tbody>
<td class="px-1 md:px-5">{localTime.day}</td> {#if adjusted}
<td class="px-1 md:px-5" {#each formattedLocalisedSchedule as localTime}
>{localTime.start} - {localTime.end}</td <tr>
> <td class="px-1 md:px-5">{localTime.day}</td>
</tr> <td class="px-1 md:px-5"
{/each} >{localTime.start} - {localTime.end}</td
{:else} >
{#each formattedSchedule as devTime} </tr>
<tr> {/each}
<td class="px-1 md:px-5">{devTime.day}</td> {:else}
<td class="px-1 md:px-5">{devTime.start} - {devTime.end}</td {#each formattedSchedule as devTime}
> <tr>
</tr> <td class="px-1 md:px-5">{devTime.day}</td>
{/each} <td class="px-1 md:px-5"
{/if} >{devTime.start} - {devTime.end}</td
>
</tr>
{/each}
{/if}
</tbody>
</table> </table>
</div> </div>

2
src/pages/contact.astro
View file

@ -34,7 +34,7 @@ import Footer from "../components/sections/FooterComponent.astro";
</div> </div>
</div> </div>
<div class="mt-10"> <div class="mt-10">
<ContactComponent /> <ContactComponent client:only />
</div> </div>
</div> </div>
<Footer /> <Footer />

2
src/pages/index.astro
View file

@ -42,7 +42,7 @@ import Footer from "../components/sections/FooterComponent.astro";
<Education /> <Education />
</div> </div>
<div id="contact"> <div id="contact">
<Contact client:visible /> <Contact client:only />
</div> </div>
<Footer /> <Footer />
</Layout> </Layout>

9
svelte.config.js
View file

@ -1,5 +1,10 @@
import { vitePreprocess } from '@astrojs/svelte'; import { vitePreprocess } from "@astrojs/svelte";
export default { export default {
preprocess: vitePreprocess(), preprocess: vitePreprocess(),
compilerOptions: {
compatibility: {
componentApi: 4,
},
},
}; };