diff --git a/src/components/board-nav/board-nav.module.css b/src/components/board-nav/board-nav.module.css
index d36195b2..6dbe99e2 100644
--- a/src/components/board-nav/board-nav.module.css
+++ b/src/components/board-nav/board-nav.module.css
@@ -5,13 +5,13 @@
}
.boardNavDesktop a {
- color: var(--link-internal-text-color);
- text-decoration: var(--link-internal-text-decoration);
+ color: var(--button-desktop-text-color);
+ text-decoration: var(--button-desktop-text-color-decoration);
}
.boardNavDesktop a:hover {
- color: var(--link-internal-text-color-hover);
- text-decoration: var(--link-internal-text-decoration-hover);
+ color: var(--button-desktop-text-color-hover);
+ text-decoration: var(--button-desktop-text-color-hover);
}
.navTopRight {
@@ -58,8 +58,8 @@
}
.pageJump a {
- color: var(--link-internal-text-color);
- text-decoration: var(--link-internal-text-decoration);
+ color: var(--homepage-box-link-text-color);
+ text-decoration: var(--homepage-box-link-text-decoration);
}
@media (max-width: 640px) {
diff --git a/src/components/embed/embed.module.css b/src/components/embed/embed.module.css
new file mode 100644
index 00000000..6ded658d
--- /dev/null
+++ b/src/components/embed/embed.module.css
@@ -0,0 +1,70 @@
+.audioEmbed {
+ height: 240px !important;
+ width: 700px !important;
+}
+
+@media (max-width: 768px) {
+ .audioEmbed {
+ max-height: 250px !important;
+ width: 100% !important;
+ }
+}
+
+.instagramEmbed {
+ height: 420px !important;
+ width: 360px !important;
+}
+
+@media (max-width: 768px) {
+ .instagramEmbed {
+ max-height: 420px !important;
+ width: 100% !important;
+ }
+}
+
+.redditEmbed {
+ width: 500px !important;
+ height: 520px !important;
+}
+
+@media (max-width: 768px) {
+ .redditEmbed {
+ width: 100% !important;
+ height: 520px !important;
+ }
+}
+
+.tiktokEmbed {
+ width: 400px !important;
+ height: 780px !important;
+}
+
+@media (max-width: 768px) {
+ .tiktokEmbed {
+ width: 100% !important;
+ height: 70vh !important;
+ }
+}
+
+.videoEmbed {
+ height: 450px !important;
+ width: 800px !important;
+}
+
+@media (max-width: 768px) {
+ .videoEmbed {
+ max-height: 250px !important;
+ width: 100% !important;
+ }
+}
+
+.xEmbed {
+ height: 580px !important;
+}
+
+@media (max-width: 768px) {
+ .xEmbed {
+ width: 100% !important;
+ height: 50vh !important;
+ }
+}
\ No newline at end of file
diff --git a/src/components/embed/embed.tsx b/src/components/embed/embed.tsx
new file mode 100644
index 00000000..7d7d3a8e
--- /dev/null
+++ b/src/components/embed/embed.tsx
@@ -0,0 +1,273 @@
+import styles from './embed.module.css';
+
+interface EmbedProps {
+ url: string;
+}
+
+const Embed = ({ url }: EmbedProps) => {
+ const parsedUrl = new URL(url);
+
+ if (youtubeHosts.has(parsedUrl.host)) {
+ return ;
+ }
+ if (xHosts.has(parsedUrl.host)) {
+ return ;
+ }
+ if (redditHosts.has(parsedUrl.host)) {
+ return ;
+ }
+ if (twitchHosts.has(parsedUrl.host)) {
+ return ;
+ }
+ if (tiktokHosts.has(parsedUrl.host)) {
+ return ;
+ }
+ if (instagramHosts.has(parsedUrl.host)) {
+ return ;
+ }
+ if (odyseeHosts.has(parsedUrl.host)) {
+ return ;
+ }
+ if (bitchuteHosts.has(parsedUrl.host)) {
+ return ;
+ }
+ if (streamableHosts.has(parsedUrl.host)) {
+ return ;
+ }
+ if (spotifyHosts.has(parsedUrl.host)) {
+ return ;
+ }
+};
+
+interface EmbedComponentProps {
+ parsedUrl: URL;
+}
+
+const youtubeHosts = new Set(['youtube.com', 'www.youtube.com', 'youtu.be', 'www.youtu.be', 'm.youtube.com']);
+
+const YoutubeEmbed = ({ parsedUrl }: EmbedComponentProps) => {
+ let youtubeId;
+ if (parsedUrl.host.endsWith('youtu.be')) {
+ youtubeId = parsedUrl.pathname.replaceAll('/', '');
+ } else {
+ youtubeId = parsedUrl.searchParams.get('v');
+ }
+ return (
+
+ );
+};
+
+const xHosts = new Set(['twitter.com', 'www.twitter.com', 'x.com', 'www.x.com']);
+
+const XEmbed = ({ parsedUrl }: EmbedComponentProps) => {
+ return (
+