mirror of
https://github.com/cupcakearmy/fantus.git
synced 2024-12-22 16:26:25 +00:00
57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import type { NextPage, GetStaticProps } from 'next'
|
|
import React from 'react'
|
|
import axios from 'axios'
|
|
|
|
type Props = {
|
|
slugs: string[]
|
|
}
|
|
|
|
const Home: NextPage<Props> = ({ slugs }) => {
|
|
const encoded = slugs.map((slug) => encodeURIComponent(`/fantus/${slug}/`))
|
|
|
|
return (
|
|
<div className="sets">
|
|
<h1 className="ma0">sets</h1>
|
|
<p>collection of some sets made here and there.</p>
|
|
<ul>
|
|
{encoded.map((link) => (
|
|
<li key={link}>
|
|
<iframe
|
|
width="100%"
|
|
height="120"
|
|
src={`https://www.mixcloud.com/widget/iframe/?hide_cover=1&feed=${link}`}
|
|
/>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Home
|
|
|
|
export const getStaticProps: GetStaticProps<Props> = async (context) => {
|
|
const { data } = await axios({
|
|
url: 'https://www.mixcloud.com/graphql',
|
|
method: 'post',
|
|
data: {
|
|
query: `
|
|
query UserUploadsQuery($lookup: UserLookup!, $orderBy: CloudcastOrderByEnum) {
|
|
user: userLookup(lookup: $lookup) {
|
|
uploads(first: 100, orderBy: $orderBy) {
|
|
edges {
|
|
node {
|
|
slug
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`,
|
|
variables: { lookup: { username: 'fantus' }, orderBy: 'LATEST' },
|
|
},
|
|
})
|
|
const slugs: string[] = data.data.user.uploads.edges.map((item: any) => item.node.slug)
|
|
return { props: { slugs } }
|
|
}
|