futureporn
/
fp
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

2024-03-14 update

This commit is contained in:
Chris Grimmett 2024-03-14 14:08:49 -08:00
parent 94c10d07e1
commit 6f66755871
8 changed files with 237 additions and 202 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/link2cid/app.json Normal file
View File

@ -0,0 +1,14 @@
{
"healthchecks": {
"web": [
{
"type": "startup",
"name": "web check",
"description": "Checking for expecting string at /health",
"path": "/health",
"content": "link2cid",
"attempts": 3
}
]
}
}

10
packages/next/app/components/archive-progress.tsx
View File

@ -1,4 +1,5 @@
import { getAllStreamsForVtuber } from "@/lib/streams"; import { getAllStreamsForVtuber } from "@/lib/streams";
import { getVodsForVtuber } from "@/lib/vods";
import { IVtuber } from "@/lib/vtubers"; import { IVtuber } from "@/lib/vtubers";
export interface IArchiveProgressProps { export interface IArchiveProgressProps {
@ -6,6 +7,7 @@ export interface IArchiveProgressProps {
} }
export default async function ArchiveProgress ({ vtuber }: IArchiveProgressProps) { export default async function ArchiveProgress ({ vtuber }: IArchiveProgressProps) {
const vods = await getVodsForVtuber(vtuber.id)
// const streams = await getAllStreamsForVtuber(vtuber.id); // const streams = await getAllStreamsForVtuber(vtuber.id);
// const goodStreams = await getAllStreamsForVtuber(vtuber.id, ['good']); // const goodStreams = await getAllStreamsForVtuber(vtuber.id, ['good']);
// const issueStreams = await getAllStreamsForVtuber(vtuber.id, ['issue']); // 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> // <progress className="progress is-success" value={eligibleStreams} max={totalStreams}>{completedPercentage}%</progress>
// </div> // </div>
// ) // )
return "@todo" // @todo
return (
<div>
<i><p className="">{(vods) ? vods.data.length : 0} vods</p></i>
</div>
)
} }

4
packages/next/app/components/footer.tsx
View File

@ -17,7 +17,7 @@ export default function Footer() {
<ul> <ul>
<li><Link href="#top">&uarr; Top of page</Link></li> <li><Link href="#top">&uarr; Top of page</Link></li>
<li><Link href="/vt">Vtubers</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="/about">About</Link></li>
<li><Link href="/faq">FAQ</Link></li> <li><Link href="/faq">FAQ</Link></li>
<li><Link href="/goals">Goals</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="/feed">RSS Feed</Link></li>
<li><Link href="/api">API</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="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> <li><Link href="/profile">Profile</Link></li>
</ul> </ul>
</div> </div>

11
packages/next/app/components/localized-date.tsx
View File

@ -4,6 +4,17 @@ interface ILocalizedDateProps {
date: Date; 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) { export function LocalizedDate ({ date }: ILocalizedDateProps) {
const isoDateTime = formatISO(date); const isoDateTime = formatISO(date);
const isoDate = formatISO(date, { representation: 'date' }); const isoDate = formatISO(date, { representation: 'date' });

2
packages/next/app/components/navbar.tsx
View File

@ -43,7 +43,7 @@ export default function Navbar() {
<div className={`navbar-menu ${isExpanded ? 'is-active' : ''}`} id="navMenu"> <div className={`navbar-menu ${isExpanded ? 'is-active' : ''}`} id="navMenu">
<div className='navbar-start'> <div className='navbar-start'>
<Link className="navbar-item is-expanded" href="/vt">Vtubers</Link> <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="/about">About</Link>
<Link className="navbar-item is-expanded" href="/faq">FAQ</Link> <Link className="navbar-item is-expanded" href="/faq">FAQ</Link>
<Link className="navbar-item is-expanded" href="/goals">Goals</Link> <Link className="navbar-item is-expanded" href="/goals">Goals</Link>

4
packages/next/app/components/vod-nav.tsx
View File

@ -10,6 +10,7 @@ import { buildIpfsUrl } from '@/lib/ipfs';
import { getSafeDate } from "@/lib/dates"; import { getSafeDate } from "@/lib/dates";
import { StreamButton } from '@/components/stream-button'; import { StreamButton } from '@/components/stream-button';
import VtuberButton from "./vtuber-button"; import VtuberButton from "./vtuber-button";
import { LocalizedDate } from "./localized-date";
export function getDownloadLink(cid: string, safeDate: string, slug: string, quality: string) { export function getDownloadLink(cid: string, safeDate: string, slug: string, quality: string) {
return buildIpfsUrl(`${cid}?filename=${slug}-${safeDate}-${quality}.mp4`) return buildIpfsUrl(`${cid}?filename=${slug}-${safeDate}-${quality}.mp4`)
@ -35,7 +36,8 @@ export default function VodNav ({ vod }: IVodNavProps) {
</Link> </Link>
</div> </div>
<div className="level-item"> <div className="level-item">
<StreamButton stream={vod.attributes.stream.data} /> {/* <StreamButton stream={vod.attributes.stream.data} /> */}
{vod.attributes.date2}
</div> </div>
</div> </div>
<div className='level-right'> <div className='level-right'>

4
packages/next/app/components/vod-page.tsx
View File

@ -29,8 +29,8 @@ export function buildMuxThumbnailUrl(playbackId: string, token: string) {
export default async function VodPage({vod}: { vod: IVod }) { export default async function VodPage({vod}: { vod: IVod }) {
console.log('vod page helllo') // console.log('vod page helllo')
console.log(vod) // console.log(vod)
if (!vod) notFound(); if (!vod) notFound();
const slug = vod.attributes.vtuber.data.attributes.slug; const slug = vod.attributes.vtuber.data.attributes.slug;

410
packages/next/app/vt/[slug]/page.tsx
View File

@ -30,218 +30,218 @@ export default async function Page({ params }: { params: { slug: string } }) {
const vods = await getVodsForVtuber(vtuber.id, 1, 9); const vods = await getVodsForVtuber(vtuber.id, 1, 9);
if (!vods) notFound(); if (!vods) notFound();
return '@todo' // @todo
// const missingStreams = await getAllStreamsForVtuber(vtuber.id, ['missing']); // const missingStreams = await getAllStreamsForVtuber(vtuber.id, ['missing']);
// const issueStreams = await getAllStreamsForVtuber(vtuber.id, ['issue']); // const issueStreams = await getAllStreamsForVtuber(vtuber.id, ['issue']);
// const goodStreams = await getAllStreamsForVtuber(vtuber.id, ['good']); // const goodStreams = await getAllStreamsForVtuber(vtuber.id, ['good']);
// // return (
// // <>
// // <p>hi mom!</p>
// // <pre>
// // <code>
// // {JSON.stringify(missingStreams, null, 2)}
// // </code>
// // </pre>
// // </>
// // )
// return ( // return (
// <> // <>
// {vtuber && ( // <p>hi mom!</p>
// <> // <pre>
// <div className="box"> // <code>
// {JSON.stringify(missingStreams, null, 2)}
// <div className="columns is-multiline"> // </code>
// <div className="column is-full"> // </pre>
// <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>
// <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>
// <>
// <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>
// <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} /> */}
// </div>
// </> // </>
// )} // )
// </>
// ); 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>
<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>
{/* <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>}
</> */}
<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>)
}
{/* <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>
</>
)}
</>
);
} }