switching to alee14.ca; privacy policy tweaks; discord compon. embedstesting

12 files changed, 133 insertions, 49 deletions

diff --git a/astro.config.mjs b/astro.config.mjs
index 491ac54..24d101a 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -31,4 +31,9 @@ export default defineConfig({
       transformers: []
     }
   }
+  // vite: {
+  //   server: {
+  //     allowedHosts: true
+  //   }
+  // }
 });
diff --git a/bun.lockb b/bun.lockb
index c2bc450..17f1b3b 100755
--- a/bun.lockb
+++ b/bun.lockb
diff --git a/package.json b/package.json
index 0bf7919..c251c74 100644
--- a/package.json
+++ b/package.json
@@ -10,20 +10,21 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/react": "6.0.1",
+    "@astrojs/react": "7.0.1",
     "@astrojs/rss": "4.0.19",
     "@astrojs/svelte": "9.0.1",
-    "@astrojs/vercel": "11.0.2",
-    "@iconify-json/fa6-brands": "^1.2.6",
-    "@iconify-json/fa6-solid": "^1.2.4",
+    "@astrojs/vercel": "11.0.14",
+    "@iconify-json/fa7-brands": "^1.2.4",
+    "@iconify-json/fa7-solid": "^1.2.5",
     "@iconify-json/simple-icons": "^1.2.71",
     "@react-three/drei": "^10.7.7",
     "@react-three/fiber": "^9.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@types/three": "^0.180.0",
-    "astro": "7.0.6",
+    "astro": "7.3.8",
     "astro-icon": "^1.1.5",
+    "discord-component-embed": "^1.0.0",
     "dompurify": "^3.3.1",
     "markdown-it": "^14.1.1",
     "marked": "^15.0.12",
diff --git a/src/components/discord/index.tsx b/src/components/discord/index.tsx
new file mode 100644
index 0000000..eb0890a
--- /dev/null
+++ b/src/components/discord/index.tsx
@@ -0,0 +1,18 @@
+import { Container, Section, TextDisplay, Thumbnail, Separator } from 'discord-component-embed'
+
+export function HomeEmbed() {
+  return (
+    <Container accentColor={0x274131}>
+      <Section accessory={<Thumbnail url="https://alee14.ca/profile.png" />}>
+          <TextDisplay>
+            ## Andrew Lee
+          </TextDisplay>
+          <TextDisplay>
+            Hey, I am Andrew Lee, a person who has a passion with computers.
+          </TextDisplay>
+      </Section>
+      <Separator divider={true} />
+      <TextDisplay>### [LinkedIn](https://linkedin.alee14.ca/) • [GitHub](https://github.alee14.ca/) • [YouTube](https://youtube.alee14.ca/) • [Mastodon](https://mstdn.ca/@alee) • [Instagram](https://instagram.alee14.ca/)</TextDisplay>
+    </Container>
+  )
+}
diff --git a/src/components/discord/page.tsx b/src/components/discord/page.tsx
new file mode 100644
index 0000000..55cfa4f
--- /dev/null
+++ b/src/components/discord/page.tsx
@@ -0,0 +1,19 @@
+import { Container, Section, TextDisplay, Thumbnail } from 'discord-component-embed'
+
+export function PageEmbed() {
+  return (
+    <Container accentColor={0x274131}>
+      <Section accessory={<Thumbnail url="https://alee14.ca/profile.png" />}>
+          <TextDisplay>
+          ## PageTitle
+          </TextDisplay>
+          <TextDisplay>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae varius risus, non suscipit orci. Integer dictum libero eros, vestibulum gravida dui tincidunt quis. Suspendisse fermentum, lacus at pretium lacinia, orci nisi finibus elit, posuere egestas mi dui at diam. Sed in bibendum mi, quis lacinia odio. Proin eu lacus dui. Morbi viverra tincidunt pharetra.
+          </TextDisplay>
+          <TextDisplay>
+            -# Andrew Lee
+          </TextDisplay>
+      </Section>
+    </Container>
+  )
+}
diff --git a/src/data/contacts.json b/src/data/contacts.json
index ccc6415..1092fa2 100644
--- a/src/data/contacts.json
+++ b/src/data/contacts.json
@@ -1,65 +1,72 @@
 [
     {
         "platform": "LinkedIn",
-        "icon": "fa6-brands:linkedin",
+        "icon": "fa7-brands:linkedin",
         "username": "AndrewLeeCAN",
-        "url": "https://linkedin.alee14.me",
+        "url": "https://linkedin.alee14.ca",
         "mouseover": "LinkedIn"
     },
     {
         "platform": "GitHub",
-        "icon": "fa6-brands:github",
+        "icon": "fa7-brands:github",
         "username": "Alee14",
-        "url": "https://github.alee14.me",
+        "url": "https://github.alee14.ca",
+        "mouseover": "GitHub"
+    },
+    {
+        "platform": "Codeberg",
+        "icon": "fa7-brands:codeberg",
+        "username": "Alee14",
+        "url": "https://codeberg.org/Alee14",
         "mouseover": "GitHub"
     },
     {
         "platform": "YouTube",
-        "icon": "fa6-brands:youtube",
+        "icon": "fa7-brands:youtube",
         "username": "AndrewLeeCAN",
-        "url": "https://youtube.alee14.me",
+        "url": "https://youtube.alee14.ca",
         "mouseover": "YouTube"
     },
     {
         "platform": "Bluesky",
-        "icon": "fa6-brands:bluesky",
-        "username": "alee14.me",
-        "url": "https://bsky.app/profile/alee14.me",
+        "icon": "fa7-brands:bluesky",
+        "username": "alee14.ca",
+        "url": "https://bsky.app/profile/alee14.ca",
         "mouseover": "Bluesky"
     },
     {
         "platform": "Mastodon",
-        "icon": "fa6-brands:mastodon",
+        "icon": "fa7-brands:mastodon",
         "username": "alee@mstdn.ca",
         "url": "https://mstdn.ca/@alee",
         "mouseover": "Mastodon"
     },
     {
         "platform": "Instagram",
-        "icon": "fa6-brands:instagram",
+        "icon": "fa7-brands:instagram",
         "username": "alee14498",
-        "url": "https://instagram.alee14.me",
+        "url": "https://instagram.alee14.ca",
         "mouseover": "Instagram"
     },
     {
         "platform": "Reddit",
-        "icon": "fa6-brands:reddit",
+        "icon": "fa7-brands:reddit",
         "username": "alee1449",
-        "url": "https://reddit.alee14.me",
+        "url": "https://reddit.alee14.ca",
         "mouseover": "Reddit"
     },
     {
         "platform": "Steam",
-        "icon": "fa6-brands:steam",
+        "icon": "fa7-brands:steam",
         "username": "Alee14498",
         "url": "https://steamcommunity.com/id/Alee14498",
         "mouseover": "Steam"
     },
     {
         "platform": "Discord",
-        "icon": "fa6-brands:discord",
+        "icon": "fa7-brands:discord",
         "username": "Andrew Lee Projects",
-        "url": "https://discord.alee14.me",
+        "url": "https://discord.alee14.ca",
         "mouseover": "Discord"
     },
     {
diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro
index 0d8633e..5f5208a 100644
--- a/src/layouts/Default.astro
+++ b/src/layouts/Default.astro
@@ -6,6 +6,9 @@ interface Props {
 
 const { title = "Andrew Lee", description = "Andrew Lee Website" } = Astro.props;
 import { ClientRouter } from "astro:transitions";
+import { toComponentEmbedScript } from 'discord-component-embed';
+import { HomeEmbed } from '../components/discord/index.tsx';
+import { PageEmbed } from '../components/discord/page.tsx';
 import Navbar from '../components/Navbar.svelte';
 const date = new Date();
 ---
@@ -30,12 +33,22 @@ const date = new Date();
 		<!-- Open Graph Metadata -->
 		<meta property="og:title" content={title} />
 		<meta property="og:description" content={description} />
-		<meta property="og:image" content="https://alee14.me/profile.png" />
+		<meta property="og:image" content="https://alee14.ca/profile.png" />
 		<meta property="og:type" content="website" />
 
 		<meta name="theme-color" content="#1B291F"/>
 		<meta name="generator" content={Astro.generator} />
 
+		<meta name="darkreader-lock">
+
+		{Astro.url.pathname == "/" &&
+		  <Fragment set:html={toComponentEmbedScript(HomeEmbed())} />
+		}
+
+		{Astro.url.pathname !== "/" &&
+		  <Fragment set:html={toComponentEmbedScript(PageEmbed())} />
+		}
+
 		<!-- Plausible Analytics -->
 
 		<script defer data-domain="alee14.me" data-api="/plausible/api/event" src="/plausible/js/script.js"/>
@@ -45,13 +58,18 @@ const date = new Date();
 		<title>{title}</title>
 	</head>
 	<body>
+    {(Astro.url.hostname == "alee14.me") &&
+    <div class="notice">
+        <span>NOTICE: alee14.me will be switching to alee14.ca. Links will soon start redirecting to the new domain.</span>
+    </div>
+    }
 	<Navbar client:load />
 	<div transition:name="main" transition:animate="fade">
 		<slot />
 		<footer>
 			<p class="small">Made with Astro and Hosted on Vercel</p>
 			<p>Copyright &copy; {date.getFullYear()} Andrew Lee.</p>
-			<small><a href="https://github.com/Alee14/personal-website" target="_blank">View source code</a> | <a href="/privacy">Privacy Policy</a></small>
+			<small><a href="https://github.com/Alee14/personal-website" target="_blank">View source code</a></small>
 		</footer>
 	</div>
 	</body>
@@ -151,4 +169,12 @@ const date = new Date();
 			Courier New,
 			monospace;
 	}
+
+	.notice {
+    	background-color: #660F0F;
+        padding: 1.2em;
+        border-radius: 20px;
+        gap: 0.5em;
+        margin: 0.5em;
+	}
 </style>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 0e4e25e..c76a458 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -14,7 +14,7 @@ const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.pubDate
          <h1 class="header-text">
             Blog
             <a href="/blog/rss.xml">
-               <Icon name="fa6-solid:square-rss" aria-label="RSS" />
+               <Icon name="fa7-solid:square-rss" aria-label="RSS" />
             </a>
          </h1>
          <h2 class="header-text">Where I post can be anything!</h2>
diff --git a/src/pages/contacts.astro b/src/pages/contacts.astro
index 60eeff2..a24d073 100644
--- a/src/pages/contacts.astro
+++ b/src/pages/contacts.astro
@@ -27,7 +27,7 @@ import contacts from "../data/contacts.json";
     }
 
     .contact-icon {
-        margin: 0.1em 0.5em 0.1em 0.1em;
-        font-size: 1.3em;
+        margin-right: 0.3em;
+        font-size: 1.6em;
     }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 943dc01..b8723a3 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -20,21 +20,24 @@ const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.pubDate
 				<Image src={Profile} class="avatar" loading="eager" alt="Andrew Lee" height={200} width={200} />
 				<h1 id="title">Hey, I'm Andrew Lee!</h1>
 				<div class="social">
-					<a href="https://linkedin.alee14.me" target="_blank" aria-label="LinkedIn">
-						<Icon name="fa6-brands:linkedin" />
+					<a href="https://linkedin.alee14.ca" target="_blank" aria-label="LinkedIn">
+						<Icon name="fa7-brands:linkedin" />
 					</a>
-					<a href="https://github.alee14.me" target="_blank" aria-label="GitHub">
-						<Icon name="fa6-brands:github" />
+					<a href="https://github.alee14.ca" target="_blank" aria-label="GitHub">
+						<Icon name="fa7-brands:github" />
 					</a>
-					<a href="https://youtube.alee14.me" target="_blank" aria-label="YouTube">
-						<Icon name="fa6-brands:youtube" />
+					<a href="https://youtube.alee14.ca" target="_blank" aria-label="YouTube">
+						<Icon name="fa7-brands:youtube" />
 					</a>
-					<a href="https://instagram.alee14.me" target="_blank" aria-label="Instagram">
-						<Icon name="fa6-brands:instagram" />
+					<a rel="me" href="https://mstdn.ca/@alee" target="_blank" aria-label="Mastodon">
+					    <Icon name="fa7-brands:mastodon" />
+					</a>
+					<a href="https://instagram.alee14.ca" target="_blank" aria-label="Instagram">
+						<Icon name="fa7-brands:instagram" />
 					</a>
 				</div>
 				<div class="description">
-					<h2>21 Years Old</h2>
+					<h2>22 Years Old</h2>
 					<h2>Montreal, Quebec, Canada</h2>
 				</div>
 				<div>
@@ -54,7 +57,7 @@ const allBlogPosts = (await getCollection('blog')).sort((a, b) => b.data.pubDate
 				<p>I don't really remember much as I was really young at the time, but my dad was a programmer analyst, and I most likely wanted to follow his footsteps.
 					But maybe I thought computers looked cool because of TV shows and movies?</p>
 				<h2>When did you get into programming?</h2>
-				<p>Like before my dad was a programmer analyst, but it really began when I saw projects like ComputerCraft, ShiftOS or Histacom was when I wanted to build an operating system.
+				<p>Like before, my dad was a programmer analyst. But it really began when I saw projects like ComputerCraft, ShiftOS or Histacom was when I wanted to build an operating system.
 					Yep, pretty ambitious at the time though I ended up being those kids who made a PowerPoint OS and a batch script that simulates DOS. But, I eventually wrote actual (but terrible) software.</p>
 			</div>
 			<div class="box">
diff --git a/src/pages/privacy.md b/src/pages/privacy.md
index b9cfb7f..9b8a1d7 100644
--- a/src/pages/privacy.md
+++ b/src/pages/privacy.md
@@ -1,6 +1,6 @@
 ---
 title: Privacy Policy
-description: This policy covers any services provided under alee14.me, including websites, applications, and tools we develop.
+description: This policy covers any services provided under websites, applications, and tools we develop.
 layout: '../layouts/PageMarkdown.astro'
 ---
 # Privacy Policy
@@ -17,33 +17,33 @@ Logging: An event that collects messages, and user ID and sending them to a chan
 This policy covers any services provided under websites, applications, and tools we develop. Below are specific policies for different services.
 
 ### AleeBot (Discord Bot)
-**Information Collected:**
+Information Collected:
 - Message IDs (logging)
 - User IDs (for personal settings, logging & command usage)
 - Server IDs (to store bot settings & command usage)
 
-**How We Use It:**
+How We Use It:
 - To provide bot features
 - To store preferences per server
 - To store preferences per user
 
-**Opting Out:**
+Opting Out:
 - Removing AleeBot from a server will automatically delete all settings related to that server.
 - If you want personal data removed, contact us.
 
 ### Websites & Other Applications
-**Information Collected:**
+Information Collected:
 - Basic analytics using Plausible (e.g., visitor count, page interactions)
 - User-submitted content (if applicable)
 
-**How We Use It:**
+How We Use It:
 - To analyze website performance
 - To ensure proper functionality
 
 ## Wikis
 Our wikis uses the MediaWiki software, you do not need to sign up when browsing or editing an article (unless it requires to do so).
 
-**Information Collected:**
+Information Collected:
 - User-submitted content (username, password, email)
 - IP address (when logged out)
 
@@ -53,6 +53,11 @@ We don’t collect personal information like your real name, address, or payment
 ## Data Retention
 We only keep data as long as it’s needed for the service. If you want your data removed, contact us.
 
+## Data Storage & Server Location
+Certain services and databases are primarily hosted on various servers located in Montreal, Canada. Various static websites such as alee14.me are hosted on Vercel. 
+
+If you access our services from outside this region, please be aware that your information may be transferred to, stored, and processed in Canada, where data protection and privacy laws may differ from those in your jurisdiction.
+
 ## Children's Privacy
 Everyone who uses this service are able to use it including children without providing any personal information about themselves. We highly discourage any children under the age of 13 to not use our services.
 
@@ -62,4 +67,4 @@ If you are a parent who is concerned about your children's data being provided t
 We may update this policy as we add new services. Any significant changes will be posted here.
 
 ## Contact
-For any questions, reach out at privacy@alee14.me.
+For any questions, reach out to privacy@alee14.me.
diff --git a/src/styles/index.css b/src/styles/index.css
index 21d681b..dea0fc7 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -20,8 +20,8 @@
     display: flex;
     flex-direction: row;
     justify-content: center;
-    font-size: 3.2em;
-    gap: 1.4em;
+    font-size: 4em;
+    gap: 1em;
     margin: 0.2em;
 }
 
@@ -74,8 +74,8 @@
 /* Mobile view */
 @media (max-width: 992px) {
     .social {
-        font-size: 3em;
-        gap: 1em;
+        font-size: 3.5em;
+        gap: 0.5em;
     }
 
     .information {