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 ( +