From 88b4ef729a83edbd48fd19fc7773c96d8bfbb4f1 Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Fri, 20 Oct 2023 23:30:21 -0700 Subject: added MAL to about section and refactor style --- src/components/DiscordActivity.astro | 2 +- src/components/RSSFeed.astro | 73 ++++++++++++++++++++++++++++++++++++ src/pages/about.astro | 67 +++++++++++++++++++++++---------- 3 files changed, 122 insertions(+), 20 deletions(-) create mode 100644 src/components/RSSFeed.astro diff --git a/src/components/DiscordActivity.astro b/src/components/DiscordActivity.astro index 0b2bb88..a07d660 100644 --- a/src/components/DiscordActivity.astro +++ b/src/components/DiscordActivity.astro @@ -10,7 +10,7 @@ const activities = data.data.activities; let activityHTML = ""; if (activities.length === 0) { - activityHTML = "

Not doing anything at the moment

"; + activityHTML = "

Not doing anything at the moment :(

"; } else { for (const activity of activities) { const imageUrl = diff --git a/src/components/RSSFeed.astro b/src/components/RSSFeed.astro new file mode 100644 index 0000000..ca2dddb --- /dev/null +++ b/src/components/RSSFeed.astro @@ -0,0 +1,73 @@ +--- +import { JSDOM } from 'jsdom'; + +const fetchContent = async (url) => { + try { + const response = await fetch(url); + if (!response.ok) { + throw new Error(`Failed to fetch RSS feed: ${response.statusText}`); + } + return await response.text(); + } catch (error) { + console.error(error); + return ''; + } +}; + +const rssData = await fetchContent(Astro.props.url); + +// Parse the RSS data +const dom = new JSDOM(rssData); +const xmlDoc = dom.window.document; +const items = Array.from(xmlDoc.querySelectorAll("item")).slice(0, 7); // Only take the first 5 items + +const title = xmlDoc.querySelector("title").textContent; +const link = xmlDoc.querySelector("link").textContent; +const description = xmlDoc.querySelector("description").textContent; +--- + + + + diff --git a/src/pages/about.astro b/src/pages/about.astro index b934660..65ed57d 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -3,42 +3,61 @@ import Layout from "../layouts/Layout.astro"; import SocialNavbar from "../components/SocialNavbar.astro"; import DiscordStatus from "../components/DiscordStatus.astro"; import DiscordActivity from "../components/DiscordActivity.astro"; +import RSSFeed from "../components/RSSFeed.astro"; ---
-

About Me

-
-
-

- I'm am avid virtual youtuber (vtuber) + anime enjoyer so you may see a - trend in what my projects. Programming stuff is one of my hobbies but I - also spend my time playing video games although admittedly its pretty - much just MMOs, JRPGs, and Visual Novels. +

About

+

+ Since you're here, I guess you want to know a bit more about me. Outside of programming random projects here and there, I'm + a conisseur of anime and VTubers (although you might've already figured out that from my projects). I also enjoy gaming, although + nearly all the games I've enjoyed are either MMORPGS, JRPGS, or Visual Novels.

-

-

推し!!!!

- - -

-
-
-

What am I up to?

+

What am I up to right now?

- +

Yes. Its a live status of my Discord status

+ Live data courtesy of Lanyard
Github Language Stats +

The first programming language I ever learned was Java, although after learning Python, that has become what I primarily use + since its super easy to just get something running. A lot of my C++ experince comes from competitive robotics in high school. +

+ Live data courtesy of anuraghazra/github-readme-stats

My Final Fantasy XIV Character!

+

FFXIV is one of my favorite MMORPGs of all time so I figured I'd also share my character in case you were curious

+ Live data courtesy of xivapi/XIV-Character-Cards
-
+
+

推し! (Oshi!)

+

VTubers I enjoy watching

+
+ + @RosemiLovelock + + +
+
+ + @ErinaMakina + + +
+
+
+

MyAnimeList - What am I watching?

+

Don't judge me too hard :(

+ + Live data courtesy of MyAnimeList +
@@ -83,7 +102,17 @@ import DiscordActivity from "../components/DiscordActivity.astro"; color: rgba(255, 255, 255, 0.742); } - p { + h3 { + font-size: 1.5rem; + font-weight: 700; + line-height: 1; + text-align: center; + margin-bottom: 1em; + transition: transform 0.3s ease-in-out; + color: rgba(255, 255, 255, 0.742); + } + + a,p { margin-top: 0.5rem; margin-bottom: 0; color: rgba(255, 255, 255, 0.742); -- cgit v1.2.3