aboutsummaryrefslogtreecommitdiffstats
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/Card.astro43
-rw-r--r--src/components/DiscordActivity.astro87
-rw-r--r--src/components/DiscordStatus.astro12
-rw-r--r--src/components/MiniCard.astro62
-rw-r--r--src/components/RSSFeed.astro73
5 files changed, 43 insertions, 234 deletions
diff --git a/src/components/Card.astro b/src/components/Card.astro
index 7bad586..a5b3b6d 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -3,25 +3,42 @@ interface Props {
title: string;
body: string;
href: string;
+ year?: string;
language: string;
languageColor: string;
- logoSrc?: string;
- logoWidth?: string;
contribution?: string;
+ tags?: string[];
}
-const { href, title, body, language, languageColor, logoSrc, logoWidth = '60%', contribution="" } = Astro.props;
+const {
+ href,
+ title,
+ body,
+ language,
+ languageColor,
+ contribution = "",
+ year,
+ tags,
+} = Astro.props;
---
<li class="link-card">
<a href={href}>
- {logoSrc && <div class="logo-container"><img src={logoSrc} alt="Project Logo" style={{ maxWidth: logoWidth }} /></div>}
<div class="content-container">
- <h2>{title}</h2>
+ <h2>{title} {year ? `(${year})` : ""}</h2>
<div class="language-container">
<span class="dot" style={{ backgroundColor: languageColor }}></span>
<span class="language">{language}</span>
</div>
+ {
+ tags && tags.length > 0 && (
+ <div class="tags-container">
+ {tags.map((tag) => (
+ <span class="tag">{tag}</span>
+ ))}
+ </div>
+ )
+ }
<p>{body}</p>
<p>{contribution}</p>
</div>
@@ -29,6 +46,21 @@ const { href, title, body, language, languageColor, logoSrc, logoWidth = '60%',
</li>
<style>
+ .tags-container {
+ display: flex;
+ gap: 5px;
+ }
+
+ .tag {
+ background-color: #4d4e4e;
+ color: #ffffff;
+ padding: 2px 6px;
+ font-size: 12px;
+ font-weight: 600;
+ border-radius: 20px;
+ display: inline-block;
+ }
+
.link-card {
list-style: none;
display: flex;
@@ -69,6 +101,7 @@ const { href, title, body, language, languageColor, logoSrc, logoWidth = '60%',
}
h2 {
margin: 0;
+ font-weight: bold;
font-size: 1.25rem;
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
diff --git a/src/components/DiscordActivity.astro b/src/components/DiscordActivity.astro
deleted file mode 100644
index a07d660..0000000
--- a/src/components/DiscordActivity.astro
+++ /dev/null
@@ -1,87 +0,0 @@
-<script>
- async function fetchData() {
- const API_URL = "https://api.lanyard.rest/v1/users/246787839570739211";
-
- try {
- const response = await fetch(API_URL);
- const data = await response.json();
-
- if (data && data.success) {
- const activities = data.data.activities;
- let activityHTML = "";
- if (activities.length === 0) {
- activityHTML = "<p>Not doing anything at the moment :(</p>";
- } else {
- for (const activity of activities) {
- const imageUrl =
- activity.assets && activity.assets.large_image
- ? activity.assets.large_image
- : "";
-
- activityHTML += `
- <div class="activity-card">
- <h3>${activity.name}</h3>
- <p>${activity.details ? activity.details : ""}</p>
- <p>${activity.state ? activity.state : ""}</p>
- </div>
- `;
- }
- }
-
- document.querySelector("#activities").innerHTML = activityHTML;
- } else {
- console.error("Failed fetching user data:", data.message);
- }
- } catch (error) {
- console.error("Network error:", error);
- }
- }
-
- window.addEventListener("DOMContentLoaded", fetchData);
-</script>
-
-<section>
- <div>
- <div id="activities"></div>
- </div>
-</section>
-<style>
-section {
- max-width: 800px;
- margin: 40px auto;
- padding: 24px;
- border-radius: 12px;
- background-color: #1a1a1a;
- font-family: 'Courier New', Courier, monospace;
- color: #c0c0c0;
-}
-
-
-.activity-card {
- background-color: #1a1a1a;
- padding: 20px;
- margin-bottom: 16px;
- border: 1px solid #c0c0c0;
- display: flex;
- flex-direction: column;
-}
-
-.activity-card h3 {
- margin-top: 0;
- margin-bottom: 8px;
-}
-
-.activity-card p {
- margin: 0;
- font-size: 0.5em;
- line-height: 1.5;
- padding: 4px 0;
-}
-
-.activity-card p + p {
- margin-top: 6px;
- border-top: 1px dashed #c0c0c0;
- padding-top: 8px;
-}
-
-</style> \ No newline at end of file
diff --git a/src/components/DiscordStatus.astro b/src/components/DiscordStatus.astro
index 518909e..46bebf9 100644
--- a/src/components/DiscordStatus.astro
+++ b/src/components/DiscordStatus.astro
@@ -16,33 +16,31 @@ const statusText = {
---
<section id="discord-status">
<img src="https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a6ca814282eca7172c6_icon_clyde_white_RGB.svg" alt="Discord Avatar" />
- <h2>Status: <span id="status-text"></span></h2>
+ <h2><span id="status-text"></span></h2>
</section>
<style>
#discord-status {
display: flex;
align-items: center;
- padding: 20px;
+ padding: 15px;
border-radius: 10px;
color: white;
transition: background-color 0.3s ease-in-out;
}
#discord-status img {
- width: 60px;
- height: 60px;
+ width: 30px;
+ height: 30px;
border-radius: 50%;
margin-right: 20px;
}
#discord-status h2 {
- margin: 0;
- font-size: 1.5rem;
+ font-size: 1.2rem;
}
#discord-status p {
- margin: 0;
font-size: 1rem;
opacity: 0.8;
}
diff --git a/src/components/MiniCard.astro b/src/components/MiniCard.astro
deleted file mode 100644
index b34bcef..0000000
--- a/src/components/MiniCard.astro
+++ /dev/null
@@ -1,62 +0,0 @@
----
-interface Props {
- title: string;
- body: string;
- href: string;
- language: string;
- languageColor: string;
- logoSrc?: string;
- logoWidth?: string;
- contribution?: string;
-}
-
-const { href, title, body, language, languageColor, logoSrc, logoWidth = '60%', contribution = 'Minor Contributions' } = Astro.props;
----
-
-<li class="link-card">
- <a href={href}>
- {logoSrc && <img src={logoSrc} alt="Project Logo" style={{ maxWidth: logoWidth }} />}
- <h2>{title}</h2>
- <div class="language-container">
- <span class="dot" style={{ backgroundColor: languageColor }}></span>
- <span class="language">{language}</span>
- </div>
- <p>{body}</p>
- <p>{contribution}</p>
- </a>
-</li>
-
-<style>
- .link-card {
- list-style: none;
- padding: 1px;
- background-color: #23262d;
- border-radius: 6px;
- color: white;
- }
- .link-card > a {
- text-decoration: none;
- color: inherit;
- display: flex;
- flex-direction: column;
- padding: 2rem;
- }
- .link-card h2 {
- margin: 0;
- font-size: 1.25rem;
- }
- .link-card p {
- margin-top: 0.5rem;
- margin-bottom: 0;
- }
- .language-container {
- display: flex;
- align-items: center;
- gap: 5px;
- }
- .dot {
- width: 10px;
- height: 10px;
- border-radius: 50%;
- }
-</style> \ No newline at end of file
diff --git a/src/components/RSSFeed.astro b/src/components/RSSFeed.astro
deleted file mode 100644
index ca2dddb..0000000
--- a/src/components/RSSFeed.astro
+++ /dev/null
@@ -1,73 +0,0 @@
----
-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 '<rss></rss>';
- }
-};
-
-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;
----
-
-<style>
- body {
- font-family: Arial, sans-serif;
- }
- header {
- padding: 20px;
- margin-bottom: 20px;
- border-radius: 8px;
- }
- ul {
- list-style-type: none;
- padding: 0;
- }
- li {
- border-bottom: 1px solid #444;
- padding: 10px 0;
- transition: background-color 0.3s;
- }
- li:hover {
- background-color: #3a3a3a;
- }
- a {
- color: #f9a825;
- text-decoration: none;
- }
- a:hover {
- text-decoration: underline;
- }
- time {
- color: #888;
- font-size: 0.85em;
- }
-</style>
-
-<ul>
- {items.map(item => {
- return (
- <li key={item.querySelector("guid").textContent}>
- <a href={item.querySelector("guid").textContent}>{item.querySelector("title").textContent}</a>
- <p>{item.querySelector("description").textContent}</p>
- <time>{item.querySelector("pubDate").textContent}</time>
- </li>
- );
- })}
-</ul>
send patches to the email below
yukais@pinapelz.com
include the subject [PATCH repo_name]
pinapelz.com
homepage