From 6f6675587156ffa388679facbd334e21ae5e99dc Mon Sep 17 00:00:00 2001
From: Chris Grimmett <chris@grimtech.net>
Date: Thu, 14 Mar 2024 14:08:49 -0800
Subject: [PATCH] 2024-03-14 update

---
 packages/link2cid/app.json                    |  14 +
 .../next/app/components/archive-progress.tsx  |  10 +-
 packages/next/app/components/footer.tsx       |   4 +-
 .../next/app/components/localized-date.tsx    |  11 +
 packages/next/app/components/navbar.tsx       |   2 +-
 packages/next/app/components/vod-nav.tsx      |   4 +-
 packages/next/app/components/vod-page.tsx     |   4 +-
 packages/next/app/vt/[slug]/page.tsx          | 390 +++++++++---------
 8 files changed, 237 insertions(+), 202 deletions(-)
 create mode 100644 packages/link2cid/app.json

diff --git a/packages/link2cid/app.json b/packages/link2cid/app.json
new file mode 100644
index 0000000..2b90246
--- /dev/null
+++ b/packages/link2cid/app.json
@@ -0,0 +1,14 @@
+{
+    "healthchecks": {
+        "web": [
+            {
+                "type": "startup",
+                "name": "web check",
+                "description": "Checking for expecting string at /health",
+                "path": "/health",
+                "content": "link2cid",
+                "attempts": 3
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/packages/next/app/components/archive-progress.tsx b/packages/next/app/components/archive-progress.tsx
index 2783f2f..3f292e1 100644
--- a/packages/next/app/components/archive-progress.tsx
+++ b/packages/next/app/components/archive-progress.tsx
@@ -1,4 +1,5 @@
 import { getAllStreamsForVtuber } from "@/lib/streams";
+import { getVodsForVtuber } from "@/lib/vods";
 import { IVtuber } from "@/lib/vtubers";
 
 export interface IArchiveProgressProps {
@@ -6,6 +7,7 @@ export interface IArchiveProgressProps {
 }
 
 export default async function ArchiveProgress ({ vtuber }: IArchiveProgressProps) {
+    const vods = await getVodsForVtuber(vtuber.id)
     // const streams = await getAllStreamsForVtuber(vtuber.id);
     // const goodStreams = await getAllStreamsForVtuber(vtuber.id, ['good']);
     // const issueStreams = await getAllStreamsForVtuber(vtuber.id, ['issue']);
@@ -20,5 +22,11 @@ export default async function ArchiveProgress ({ vtuber }: IArchiveProgressProps
     //         <progress className="progress is-success" value={eligibleStreams} max={totalStreams}>{completedPercentage}%</progress>
     //     </div>
     // )
-    return "@todo"
+    // @todo
+
+    return (
+        <div>
+            <i><p className="">{(vods) ? vods.data.length : 0} vods</p></i>
+        </div>
+    )
 }
\ No newline at end of file
diff --git a/packages/next/app/components/footer.tsx b/packages/next/app/components/footer.tsx
index e51f679..2727d0f 100644
--- a/packages/next/app/components/footer.tsx
+++ b/packages/next/app/components/footer.tsx
@@ -17,7 +17,7 @@ export default function Footer() {
                             <ul>
                                 <li><Link href="#top">&uarr; Top of page</Link></li>
                                 <li><Link href="/vt">Vtubers</Link></li>
-                                <li><Link href="/streams">Stream Archive</Link></li>
+                                {/* <li><Link href="/streams">Stream Archive</Link></li> */}
                                 <li><Link href="/about">About</Link></li>
                                 <li><Link href="/faq">FAQ</Link></li>
                                 <li><Link href="/goals">Goals</Link></li>
@@ -26,7 +26,7 @@ export default function Footer() {
                                 <li><Link href="/feed">RSS Feed</Link></li>
                                 <li><Link href="/api">API</Link></li>
                                 <li><Link href="https://status.futureporn.net/" target="_blank"><span className="mr-1">Status</span><FontAwesomeIcon icon={faExternalLinkAlt} className="fab fa-external-link-alt"></FontAwesomeIcon></Link></li>
-                                <li><Link href="/upload">Upload</Link></li>
+                                {/* <li><Link href="/upload">Upload</Link></li> */}
                                 <li><Link href="/profile">Profile</Link></li>
                             </ul>
                         </div>
diff --git a/packages/next/app/components/localized-date.tsx b/packages/next/app/components/localized-date.tsx
index 65ec1c5..44ad6ec 100644
--- a/packages/next/app/components/localized-date.tsx
+++ b/packages/next/app/components/localized-date.tsx
@@ -4,6 +4,17 @@ interface ILocalizedDateProps {
     date: Date;
 }
 
+/**
+ * 
+ * this causes hydration issues
+ * 
+ * Error: Text content does not match server-rendered HTML.
+ *
+ * Warning: Text content did not match. Server: "2024-01-01" Client: "2023-12-31"
+ * 
+ * See more info here: https://nextjs.org/docs/messages/react-hydration-error
+ */
+
 export function LocalizedDate ({ date }: ILocalizedDateProps) {
     const isoDateTime = formatISO(date);
     const isoDate = formatISO(date, { representation: 'date' });
diff --git a/packages/next/app/components/navbar.tsx b/packages/next/app/components/navbar.tsx
index 57fca00..0dcf46a 100644
--- a/packages/next/app/components/navbar.tsx
+++ b/packages/next/app/components/navbar.tsx
@@ -43,7 +43,7 @@ export default function Navbar() {
                 <div className={`navbar-menu ${isExpanded ? 'is-active' : ''}`} id="navMenu">
                     <div className='navbar-start'>
                         <Link className="navbar-item is-expanded" href="/vt">Vtubers</Link>
-                        <Link className="navbar-item is-expanded" href="/streams">Stream Archive</Link>
+                        {/* <Link className="navbar-item is-expanded" href="/streams">Stream Archive</Link> */}
                         <Link className="navbar-item is-expanded" href="/about">About</Link>
                         <Link className="navbar-item is-expanded" href="/faq">FAQ</Link>
                         <Link className="navbar-item is-expanded" href="/goals">Goals</Link>
diff --git a/packages/next/app/components/vod-nav.tsx b/packages/next/app/components/vod-nav.tsx
index c760ed1..0b5f62f 100644
--- a/packages/next/app/components/vod-nav.tsx
+++ b/packages/next/app/components/vod-nav.tsx
@@ -10,6 +10,7 @@ import { buildIpfsUrl } from '@/lib/ipfs';
 import { getSafeDate } from "@/lib/dates";
 import { StreamButton } from '@/components/stream-button';
 import VtuberButton from "./vtuber-button";
+import { LocalizedDate } from "./localized-date";
 
 export function getDownloadLink(cid: string, safeDate: string, slug: string, quality: string) {
     return buildIpfsUrl(`${cid}?filename=${slug}-${safeDate}-${quality}.mp4`)
@@ -35,7 +36,8 @@ export default function VodNav ({ vod }: IVodNavProps) {
                     </Link>
                 </div>
                 <div className="level-item">
-                    <StreamButton stream={vod.attributes.stream.data} />
+                    {/* <StreamButton stream={vod.attributes.stream.data} /> */}
+                    {vod.attributes.date2}
                 </div>
             </div>
             <div className='level-right'>
diff --git a/packages/next/app/components/vod-page.tsx b/packages/next/app/components/vod-page.tsx
index fce06c2..28742b7 100644
--- a/packages/next/app/components/vod-page.tsx
+++ b/packages/next/app/components/vod-page.tsx
@@ -29,8 +29,8 @@ export function buildMuxThumbnailUrl(playbackId: string, token: string) {
 
 
 export default async function VodPage({vod}: { vod: IVod }) {
-    console.log('vod page helllo')
-    console.log(vod)
+    // console.log('vod page helllo')
+    // console.log(vod)
 
     if (!vod) notFound();
     const slug = vod.attributes.vtuber.data.attributes.slug;
diff --git a/packages/next/app/vt/[slug]/page.tsx b/packages/next/app/vt/[slug]/page.tsx
index c9c5a58..94082d9 100644
--- a/packages/next/app/vt/[slug]/page.tsx
+++ b/packages/next/app/vt/[slug]/page.tsx
@@ -30,218 +30,218 @@ export default async function Page({ params }: { params: { slug: string } }) {
   const vods = await getVodsForVtuber(vtuber.id, 1, 9);
   if (!vods) notFound();
 
-  return '@todo'
+  // @todo
 //   const missingStreams = await getAllStreamsForVtuber(vtuber.id, ['missing']);
 //   const issueStreams = await getAllStreamsForVtuber(vtuber.id, ['issue']);
 //   const goodStreams = await getAllStreamsForVtuber(vtuber.id, ['good']);
 
 
 
-//   // return (         
-//   //   <>
-//   //     <p>hi mom!</p>
-//   //     <pre>
-//   //       <code>
-//   //         {JSON.stringify(missingStreams, null, 2)}
-//   //       </code>
-//   //     </pre>
-//   //   </>   
-//   // )
+// return (         
+//   <>
+//     <p>hi mom!</p>
+//     <pre>
+//       <code>
+//         {JSON.stringify(missingStreams, null, 2)}
+//       </code>
+//     </pre>
+//   </>   
+// )
 
-//   return (
-//     <>
-//       {vtuber && (
-//         <>
-//           <div className="box">
+  return (
+    <>
+      {vtuber && (
+        <>
+          <div className="box">
 
-//             <div className="columns is-multiline">
-//               <div className="column is-full">
-//                 <h1 className="title is-2">{vtuber.attributes.displayName}</h1>
-//               </div>
-//               <div className="column is-one-quarter">
-//                 <figure className="image is-rounded is-1by1">
-//                   <Image
-//                     className="is-rounded"
-//                     alt={vtuber.attributes.displayName}
-//                     src={vtuber.attributes.image}
-//                     fill={true}
-//                     placeholder='blur'
-//                     blurDataURL={vtuber.attributes.imageBlur}
-//                   />
-//                 </figure>
-//               </div>
-//               <div className="column is-three-quarters">
-//                 <p className="is-size-5 mb-3">{vtuber.attributes.description1}</p>
-//                 <p className="is-size-5">{vtuber.attributes.description2}</p>
-//               </div>
-//             </div>
+            <div className="columns is-multiline">
+              <div className="column is-full">
+                <h1 className="title is-2">{vtuber.attributes.displayName}</h1>
+              </div>
+              <div className="column is-one-quarter">
+                <figure className="image is-rounded is-1by1">
+                  <Image
+                    className="is-rounded"
+                    alt={vtuber.attributes.displayName}
+                    src={vtuber.attributes.image}
+                    fill={true}
+                    placeholder='blur'
+                    blurDataURL={vtuber.attributes.imageBlur}
+                  />
+                </figure>
+              </div>
+              <div className="column is-three-quarters">
+                <p className="is-size-5 mb-3">{vtuber.attributes.description1}</p>
+                <p className="is-size-5">{vtuber.attributes.description2}</p>
+              </div>
+            </div>
 
-//             <h2 id="socials" className="title is-3">
-//               <Link href="#socials">Socials</Link>
-//             </h2>
+            <h2 id="socials" className="title is-3">
+              <Link href="#socials">Socials</Link>
+            </h2>
 
 
-//             <div className="column is-full mb-5">
-//               <div className="columns has-text-centered is-multiline is-centered">
-//                 {vtuber.attributes.patreon && (
-//                   <div className="column is-3 is-narrow">
-//                     <Link href={vtuber.attributes.patreon} className="subtitle is-5">
-//                       <span className="mr-2"><FontAwesomeIcon icon={faPatreon} className="fab fa-patreon" /></span><span className="mr-2">Patreon</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
-//                     </Link>
-//                   </div>
-//                 )}
-//                 {vtuber.attributes.twitter && (
-//                   <div className="column is-3 is-narrow">
-//                     <Link target="_blank" href={vtuber.attributes.twitter} className="subtitle is-5">
-//                       <span className="mr-2"><FontAwesomeIcon icon={faXTwitter} className="fab fa-x-twitter" /></span><span className="mr-2">Twitter</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
-//                     </Link>
-//                   </div>
-//                 )}
-//                 {vtuber.attributes.youtube && (
-//                   <div className="column is-3 is-narrow">
-//                     <Link target="_blank" href={vtuber.attributes.youtube} className="subtitle is-5">
-//                       <span className="mr-2"><FontAwesomeIcon icon={faYoutube} className="fab fa-youtube" /></span><span className="mr-2">YouTube</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
-//                     </Link>
-//                   </div>
-//                 )}
-//                 {vtuber.attributes.twitch && (
-//                   <div className="column is-3 is-narrow">
-//                     <Link target="_blank" href={vtuber.attributes.twitch} className="subtitle is-5">
-//                       <span className="mr-2"><FontAwesomeIcon icon={faTwitch} className="fab fa-twitch" /></span><span className="mr-2">Twitch</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
-//                     </Link>
-//                   </div>
-//                 )}
-//                 {vtuber.attributes.tiktok && (
-//                   <div className="column is-3 is-narrow">
-//                     <Link target="_blank" href={vtuber.attributes.tiktok} className="subtitle is-5">
-//                       <span className="mr-2"><FontAwesomeIcon icon={faTiktok} className="fab fa-tiktok" /></span><span className="mr-2">TikTok</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
-//                     </Link>
-//                   </div>
-//                 )}
-//                 {vtuber.attributes.fansly && (
-//                   <div className="column is-3 is-narrow">
-//                     <Link target="_blank" href={vtuber.attributes.fansly} className='subtitle is-5'>
-//                       <span className='mr-2'><FanslyIcon width={20} height={20} className={styles.icon}/></span><span className="mr-2">Fansly</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
-//                     </Link>
-//                   </div>
-//                 )}
-//                 {vtuber.attributes.onlyfans && (
-//                   <div className="column is-3 is-narrow">
-//                     <Link target="_blank" href={vtuber.attributes.onlyfans} className='subtitle is-5'>
-//                       <span className='mr-2'>
-//                         <OnlyfansIcon width={20} height={20} className={styles.icon}></OnlyfansIcon>
-//                       </span><span className="mr-2">OnlyFans</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
-//                     </Link>
-//                   </div>
-//                 )}
-//                 {vtuber.attributes.pornhub && (
-//                   <div className="column is-3 is-narrow">
-//                     <Link target="_blank" href={vtuber.attributes.pornhub} className='subtitle is-5'>
-//                       <span className='mr-2'><PornhubIcon width={20} height={20} className={styles.icon}/></span><span className="mr-2">Pornhub</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
-//                     </Link>
-//                   </div>
-//                 )}
-//                 {vtuber.attributes.reddit && (
-//                   <div className="column is-3 is-narrow">
-//                     <Link target="_blank" href={vtuber.attributes.reddit} className="subtitle is-5">
-//                       <span className="mr-2"><FontAwesomeIcon icon={faReddit} className="fab fa-reddit" /></span><span className="mr-2">Reddit</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
-//                     </Link>
-//                   </div>
-//                 )}
-//                 {vtuber.attributes.discord && (
-//                   <div className="column is-3 is-narrow">
-//                     <Link target="_blank" href={vtuber.attributes.discord} className="subtitle is-5">
-//                       <span className="mr-2"><FontAwesomeIcon icon={faDiscord} className="fab fa-discord" /></span><span className="mr-2">Discord</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
-//                     </Link>
-//                   </div>
-//                 )}
-//                 {vtuber.attributes.instagram && (
-//                   <div className="column is-3 is-narrow">
-//                     <Link target="_blank" href={vtuber.attributes.instagram} className="subtitle is-5">
-//                       <span className="mr-2"><FontAwesomeIcon icon={faInstagram} className="fab fa-instagram" /></span><span className="mr-2">Instagram</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
-//                     </Link>
-//                   </div>
-//                 )}
-//                 {vtuber.attributes.facebook && (
-//                   <div className="column is-3 is-narrow">
-//                     <Link target="_blank" href={vtuber.attributes.facebook} className="subtitle is-5">
-//                       <span className="mr-2"><FontAwesomeIcon icon={faFacebook} className="fab fa-facebook" /></span><span className="mr-2">Facebook</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
-//                     </Link>
-//                   </div>
-//                 )}
-//                 {vtuber.attributes.merch && (
-//                   <div className="column is-3 is-narrow">
-//                     <Link target="_blank" href={vtuber.attributes.merch} className="subtitle is-5">
-//                       <span className="mr-2"><FontAwesomeIcon icon={faBagShopping} className="fas fa-bag-shopping" /></span><span className="mr-2">Merch</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
-//                     </Link>
-//                   </div>
-//                 )}
-//                 {vtuber.attributes.chaturbate && (
-//                   <div className="column is-3 is-narrow">
-//                     <Link target="_blank" href={vtuber.attributes.chaturbate} className='subtitle is-5'>
-//                       <span className='mr-2'><ChaturbateIcon width={20} className={styles.icon}/></span><span className="mr-2">Chaturbate</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
-//                     </Link>
-//                   </div>
-//                 )}
-//                 {vtuber.attributes.throne && (
-//                   <div className="column is-3 is-narrow">
-//                     <Link target="_blank" href={vtuber.attributes.throne} className='subtitle is-5'>
-//                       <span className='mr-2'><ThroneIcon width={20} height={20} className={styles.icon}/></span><span className="mr-2">Throne</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
-//                     </Link>
-//                   </div>
-//                 )}
-//                 {vtuber.attributes.linktree && (
-//                   <div className="column is-3 is-narrow">
-//                     <Link target="_blank" href={vtuber.attributes.linktree} className='subtitle is-5'>
-//                       <span className='mr-2'><LinktreeIcon width={20} height={20} className={styles.icon}/></span><span className="mr-2">Linktree</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
-//                     </Link>
-//                   </div>
-//                 )}
-//                 {vtuber.attributes.carrd && (
-//                   <div className="column is-3 is-narrow">
-//                     <Link target="_blank" href={vtuber.attributes.carrd} className='subtitle is-5'>
-//                       <span className='mr-2'><CarrdIcon width={20} height={20} className={styles.icon}/></span><span className="mr-2">Carrd</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
-//                     </Link>
-//                   </div>
-//                 )}
-//               </div>
-//             </div>
+            <div className="column is-full mb-5">
+              <div className="columns has-text-centered is-multiline is-centered">
+                {vtuber.attributes.patreon && (
+                  <div className="column is-3 is-narrow">
+                    <Link href={vtuber.attributes.patreon} className="subtitle is-5">
+                      <span className="mr-2"><FontAwesomeIcon icon={faPatreon} className="fab fa-patreon" /></span><span className="mr-2">Patreon</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
+                    </Link>
+                  </div>
+                )}
+                {vtuber.attributes.twitter && (
+                  <div className="column is-3 is-narrow">
+                    <Link target="_blank" href={vtuber.attributes.twitter} className="subtitle is-5">
+                      <span className="mr-2"><FontAwesomeIcon icon={faXTwitter} className="fab fa-x-twitter" /></span><span className="mr-2">Twitter</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
+                    </Link>
+                  </div>
+                )}
+                {vtuber.attributes.youtube && (
+                  <div className="column is-3 is-narrow">
+                    <Link target="_blank" href={vtuber.attributes.youtube} className="subtitle is-5">
+                      <span className="mr-2"><FontAwesomeIcon icon={faYoutube} className="fab fa-youtube" /></span><span className="mr-2">YouTube</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
+                    </Link>
+                  </div>
+                )}
+                {vtuber.attributes.twitch && (
+                  <div className="column is-3 is-narrow">
+                    <Link target="_blank" href={vtuber.attributes.twitch} className="subtitle is-5">
+                      <span className="mr-2"><FontAwesomeIcon icon={faTwitch} className="fab fa-twitch" /></span><span className="mr-2">Twitch</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
+                    </Link>
+                  </div>
+                )}
+                {vtuber.attributes.tiktok && (
+                  <div className="column is-3 is-narrow">
+                    <Link target="_blank" href={vtuber.attributes.tiktok} className="subtitle is-5">
+                      <span className="mr-2"><FontAwesomeIcon icon={faTiktok} className="fab fa-tiktok" /></span><span className="mr-2">TikTok</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
+                    </Link>
+                  </div>
+                )}
+                {vtuber.attributes.fansly && (
+                  <div className="column is-3 is-narrow">
+                    <Link target="_blank" href={vtuber.attributes.fansly} className='subtitle is-5'>
+                      <span className='mr-2'><FanslyIcon width={20} height={20} className={styles.icon}/></span><span className="mr-2">Fansly</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
+                    </Link>
+                  </div>
+                )}
+                {vtuber.attributes.onlyfans && (
+                  <div className="column is-3 is-narrow">
+                    <Link target="_blank" href={vtuber.attributes.onlyfans} className='subtitle is-5'>
+                      <span className='mr-2'>
+                        <OnlyfansIcon width={20} height={20} className={styles.icon}></OnlyfansIcon>
+                      </span><span className="mr-2">OnlyFans</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
+                    </Link>
+                  </div>
+                )}
+                {vtuber.attributes.pornhub && (
+                  <div className="column is-3 is-narrow">
+                    <Link target="_blank" href={vtuber.attributes.pornhub} className='subtitle is-5'>
+                      <span className='mr-2'><PornhubIcon width={20} height={20} className={styles.icon}/></span><span className="mr-2">Pornhub</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
+                    </Link>
+                  </div>
+                )}
+                {vtuber.attributes.reddit && (
+                  <div className="column is-3 is-narrow">
+                    <Link target="_blank" href={vtuber.attributes.reddit} className="subtitle is-5">
+                      <span className="mr-2"><FontAwesomeIcon icon={faReddit} className="fab fa-reddit" /></span><span className="mr-2">Reddit</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
+                    </Link>
+                  </div>
+                )}
+                {vtuber.attributes.discord && (
+                  <div className="column is-3 is-narrow">
+                    <Link target="_blank" href={vtuber.attributes.discord} className="subtitle is-5">
+                      <span className="mr-2"><FontAwesomeIcon icon={faDiscord} className="fab fa-discord" /></span><span className="mr-2">Discord</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
+                    </Link>
+                  </div>
+                )}
+                {vtuber.attributes.instagram && (
+                  <div className="column is-3 is-narrow">
+                    <Link target="_blank" href={vtuber.attributes.instagram} className="subtitle is-5">
+                      <span className="mr-2"><FontAwesomeIcon icon={faInstagram} className="fab fa-instagram" /></span><span className="mr-2">Instagram</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
+                    </Link>
+                  </div>
+                )}
+                {vtuber.attributes.facebook && (
+                  <div className="column is-3 is-narrow">
+                    <Link target="_blank" href={vtuber.attributes.facebook} className="subtitle is-5">
+                      <span className="mr-2"><FontAwesomeIcon icon={faFacebook} className="fab fa-facebook" /></span><span className="mr-2">Facebook</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
+                    </Link>
+                  </div>
+                )}
+                {vtuber.attributes.merch && (
+                  <div className="column is-3 is-narrow">
+                    <Link target="_blank" href={vtuber.attributes.merch} className="subtitle is-5">
+                      <span className="mr-2"><FontAwesomeIcon icon={faBagShopping} className="fas fa-bag-shopping" /></span><span className="mr-2">Merch</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
+                    </Link>
+                  </div>
+                )}
+                {vtuber.attributes.chaturbate && (
+                  <div className="column is-3 is-narrow">
+                    <Link target="_blank" href={vtuber.attributes.chaturbate} className='subtitle is-5'>
+                      <span className='mr-2'><ChaturbateIcon width={20} className={styles.icon}/></span><span className="mr-2">Chaturbate</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
+                    </Link>
+                  </div>
+                )}
+                {vtuber.attributes.throne && (
+                  <div className="column is-3 is-narrow">
+                    <Link target="_blank" href={vtuber.attributes.throne} className='subtitle is-5'>
+                      <span className='mr-2'><ThroneIcon width={20} height={20} className={styles.icon}/></span><span className="mr-2">Throne</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
+                    </Link>
+                  </div>
+                )}
+                {vtuber.attributes.linktree && (
+                  <div className="column is-3 is-narrow">
+                    <Link target="_blank" href={vtuber.attributes.linktree} className='subtitle is-5'>
+                      <span className='mr-2'><LinktreeIcon width={20} height={20} className={styles.icon}/></span><span className="mr-2">Linktree</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
+                    </Link>
+                  </div>
+                )}
+                {vtuber.attributes.carrd && (
+                  <div className="column is-3 is-narrow">
+                    <Link target="_blank" href={vtuber.attributes.carrd} className='subtitle is-5'>
+                      <span className='mr-2'><CarrdIcon width={20} height={20} className={styles.icon}/></span><span className="mr-2">Carrd</span><span><FontAwesomeIcon icon={faExternalLinkAlt} className="fas fa-external-link-alt" /></span>
+                    </Link>
+                  </div>
+                )}
+              </div>
+            </div>
 
 
-//             {/* <h2 id="toys" className="title is-3">
-//               <Link href="#toys">Toys</Link>
-//             </h2>
+            {/* <h2 id="toys" className="title is-3">
+              <Link href="#toys">Toys</Link>
+            </h2>
 
-//             <>
-//               <ToysList vtuber={vtuber} toys={toys} page={1} pageSize={toySampleCount} />
-//               {(toys.pagination.total > toySampleCount) && <Link href={`/vt/${vtuber.slug}/toys/1`} className='button mb-5'>See all of {vtuber.displayName}'s toys</Link>}
-//             </> */}
+            <>
+              <ToysList vtuber={vtuber} toys={toys} page={1} pageSize={toySampleCount} />
+              {(toys.pagination.total > toySampleCount) && <Link href={`/vt/${vtuber.slug}/toys/1`} className='button mb-5'>See all of {vtuber.displayName}'s toys</Link>}
+            </> */}
 
-//             <h2 id="vods" className="title is-3">
-//               <Link href="#vods">Vods</Link>
-//             </h2>
+            <h2 id="vods" className="title is-3">
+              <Link href="#vods">Vods</Link>
+            </h2>
 
-//             <VodsList vtuber={vtuber} vods={vods.data} page={1} pageSize={9} />
-//             {
-//               (vtuber.attributes.vods) ? (
-//                 <Link className='button mb-5' href={`/vt/${vtuber.attributes.slug}/vods/1`}>See all {vtuber.attributes.displayName} vods</Link>
-//               ) : (<p className='section'><i>No VODs have been added, yet.</i></p>)
-//             }
+            <VodsList vtuber={vtuber} vods={vods.data} page={1} pageSize={9} />
+            {
+              (vtuber.attributes.vods) ? (
+                <Link className='button mb-5' href={`/vt/${vtuber.attributes.slug}/vods/1`}>See all {vtuber.attributes.displayName} vods</Link>
+              ) : (<p className='section'><i>No VODs have been added, yet.</i></p>)
+            }
 
-//             <h2 id="streams" className='title is-3'>
-//               <Link href="#streams">Streams</Link>
-//             </h2>
-//             <StreamsCalendar missingStreams={missingStreams} issueStreams={issueStreams} goodStreams={goodStreams} />
-// {/* 
-//             <h2 id="progress" className='title is-3'>
-//               <Link href="#progress">Archive Progress</Link>
-//             </h2>
-//             <ArchiveProgress vtuber={vtuber} /> */}
+            {/* <h2 id="streams" className='title is-3'>
+              <Link href="#streams">Streams</Link>
+            </h2> */}
+            {/* <StreamsCalendar missingStreams={missingStreams} issueStreams={issueStreams} goodStreams={goodStreams} /> */}
+{/* 
+            <h2 id="progress" className='title is-3'>
+              <Link href="#progress">Archive Progress</Link>
+            </h2>
+            <ArchiveProgress vtuber={vtuber} /> */}
 
             
-//           </div>
-//         </>
-//       )}
-//     </>
-//   );
+          </div>
+        </>
+      )}
+    </>
+  );
 }