fantus/pages/sets.tsx

57 lines
1.5 KiB
TypeScript
Raw Permalink Normal View History

2021-01-01 23:21:29 +00:00
import type { NextPage, GetStaticProps } from 'next'
import React from 'react'
2020-01-17 00:12:12 +00:00
import axios from 'axios'
2021-01-01 23:21:29 +00:00
type Props = {
slugs: string[]
}
2020-01-17 00:12:12 +00:00
2021-01-01 23:21:29 +00:00
const Home: NextPage<Props> = ({ slugs }) => {
const encoded = slugs.map((slug) => encodeURIComponent(`/fantus/${slug}/`))
2020-01-12 17:34:27 +00:00
2021-01-01 23:21:29 +00:00
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>
2020-01-12 17:34:27 +00:00
</div>
2021-01-01 23:21:29 +00:00
)
2020-01-12 17:34:27 +00:00
}
2021-01-01 23:21:29 +00:00
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 } }
}