chore: additional formatting w/prettier
This commit is contained in:
parent
ea75e585e1
commit
ee77555c32
39 changed files with 1544 additions and 1584 deletions
|
|
@ -15,9 +15,9 @@ Once you've added the appropriate tags from webmention.io, connected your desire
|
|||
import loadWebmentions from '@/lib/webmentions'
|
||||
|
||||
export default async function handler(req, res) {
|
||||
const target = req.query.target
|
||||
const response = await loadWebmentions(target)
|
||||
res.json(response)
|
||||
const target = req.query.target
|
||||
const response = await loadWebmentions(target)
|
||||
res.json(response)
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -36,125 +36,119 @@ import Image from 'next/image'
|
|||
import { formatDate } from '@/utils/formatters'
|
||||
|
||||
const WebmentionsCore = () => {
|
||||
const { asPath } = useRouter()
|
||||
const { response, error } = useJson(`/api/webmentions?target=${siteMetadata.siteUrl}${asPath}`)
|
||||
const webmentions = response?.children
|
||||
const hasLikes =
|
||||
webmentions?.filter((mention) => mention['wm-property'] === 'like-of').length > 0
|
||||
const hasComments =
|
||||
webmentions?.filter((mention) => mention['wm-property'] === 'in-reply-to').length > 0
|
||||
const boostsCount = webmentions?.filter(
|
||||
(mention) =>
|
||||
mention['wm-property'] === 'repost-of' || mention['wm-property'] === 'mention-of'
|
||||
).length
|
||||
const hasBoosts = boostsCount > 0
|
||||
const hasMention = hasLikes || hasComments || hasBoosts
|
||||
const { asPath } = useRouter()
|
||||
const { response, error } = useJson(`/api/webmentions?target=${siteMetadata.siteUrl}${asPath}`)
|
||||
const webmentions = response?.children
|
||||
const hasLikes = webmentions?.filter((mention) => mention['wm-property'] === 'like-of').length > 0
|
||||
const hasComments =
|
||||
webmentions?.filter((mention) => mention['wm-property'] === 'in-reply-to').length > 0
|
||||
const boostsCount = webmentions?.filter(
|
||||
(mention) => mention['wm-property'] === 'repost-of' || mention['wm-property'] === 'mention-of'
|
||||
).length
|
||||
const hasBoosts = boostsCount > 0
|
||||
const hasMention = hasLikes || hasComments || hasBoosts
|
||||
|
||||
if (error) return null
|
||||
if (!response) return <Spin className="my-2 flex justify-center" />
|
||||
|
||||
const Boosts = () => {
|
||||
return (
|
||||
<div className="flex flex-row items-center">
|
||||
<div className="mr-2 h-5 w-5">
|
||||
<Rocket />
|
||||
</div>
|
||||
{` `}
|
||||
<span className="text-sm">{boostsCount}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Likes = () => (
|
||||
<>
|
||||
<div className="flex flex-row items-center">
|
||||
<div className="mr-2 h-5 w-5">
|
||||
<Heart />
|
||||
</div>
|
||||
<ul className="ml-2 flex flex-row">
|
||||
{webmentions?.map((mention) => {
|
||||
if (mention['wm-property'] === 'like-of')
|
||||
return (
|
||||
<li key={mention['wm-id']} className="-ml-2">
|
||||
<Link
|
||||
href={mention.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="h-10 w-10 rounded-full border border-primary-500 dark:border-gray-500"
|
||||
src={mention.author.photo}
|
||||
alt={mention.author.name}
|
||||
width="40"
|
||||
height="40"
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
const Comments = () => {
|
||||
return (
|
||||
<>
|
||||
{webmentions?.map((mention) => {
|
||||
if (mention['wm-property'] === 'in-reply-to') {
|
||||
return (
|
||||
<Link
|
||||
className="border-bottom flex flex-row items-center border-gray-100 pb-4"
|
||||
key={mention['wm-id']}
|
||||
href={mention.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="h-12 w-12 rounded-full border border-primary-500 dark:border-gray-500"
|
||||
src={mention.author.photo}
|
||||
alt={mention.author.name}
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
<div className="ml-3">
|
||||
<p className="text-sm">{mention.content?.text}</p>
|
||||
<p className="mt-1 text-xs">{formatDate(mention.published)}</p>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
})}
|
||||
</>
|
||||
)
|
||||
}
|
||||
if (error) return null
|
||||
if (!response) return <Spin className="my-2 flex justify-center" />
|
||||
|
||||
const Boosts = () => {
|
||||
return (
|
||||
<>
|
||||
{hasMention ? (
|
||||
<div className="text-gray-500 dark:text-gray-100">
|
||||
<h4 className="pt-3 text-xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 md:text-2xl md:leading-10 ">
|
||||
Webmentions
|
||||
</h4>
|
||||
{hasBoosts ? (
|
||||
<div className="pt-2 pb-4">
|
||||
<Boosts />
|
||||
</div>
|
||||
) : null}
|
||||
{hasLikes ? (
|
||||
<div className="pt-2 pb-4">
|
||||
<Likes />
|
||||
</div>
|
||||
) : null}
|
||||
{hasComments ? (
|
||||
<div className="pt-2 pb-4">
|
||||
<Comments />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
<div className="flex flex-row items-center">
|
||||
<div className="mr-2 h-5 w-5">
|
||||
<Rocket />
|
||||
</div>
|
||||
{` `}
|
||||
<span className="text-sm">{boostsCount}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Likes = () => (
|
||||
<>
|
||||
<div className="flex flex-row items-center">
|
||||
<div className="mr-2 h-5 w-5">
|
||||
<Heart />
|
||||
</div>
|
||||
<ul className="ml-2 flex flex-row">
|
||||
{webmentions?.map((mention) => {
|
||||
if (mention['wm-property'] === 'like-of')
|
||||
return (
|
||||
<li key={mention['wm-id']} className="-ml-2">
|
||||
<Link href={mention.url} target="_blank" rel="noopener noreferrer">
|
||||
<Image
|
||||
className="h-10 w-10 rounded-full border border-primary-500 dark:border-gray-500"
|
||||
src={mention.author.photo}
|
||||
alt={mention.author.name}
|
||||
width="40"
|
||||
height="40"
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
const Comments = () => {
|
||||
return (
|
||||
<>
|
||||
{webmentions?.map((mention) => {
|
||||
if (mention['wm-property'] === 'in-reply-to') {
|
||||
return (
|
||||
<Link
|
||||
className="border-bottom flex flex-row items-center border-gray-100 pb-4"
|
||||
key={mention['wm-id']}
|
||||
href={mention.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="h-12 w-12 rounded-full border border-primary-500 dark:border-gray-500"
|
||||
src={mention.author.photo}
|
||||
alt={mention.author.name}
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
<div className="ml-3">
|
||||
<p className="text-sm">{mention.content?.text}</p>
|
||||
<p className="mt-1 text-xs">{formatDate(mention.published)}</p>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
})}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{hasMention ? (
|
||||
<div className="text-gray-500 dark:text-gray-100">
|
||||
<h4 className="pt-3 text-xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 md:text-2xl md:leading-10 ">
|
||||
Webmentions
|
||||
</h4>
|
||||
{hasBoosts ? (
|
||||
<div className="pt-2 pb-4">
|
||||
<Boosts />
|
||||
</div>
|
||||
) : null}
|
||||
{hasLikes ? (
|
||||
<div className="pt-2 pb-4">
|
||||
<Likes />
|
||||
</div>
|
||||
) : null}
|
||||
{hasComments ? (
|
||||
<div className="pt-2 pb-4">
|
||||
<Comments />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default WebmentionsCore
|
||||
|
|
@ -167,22 +161,22 @@ import { useEffect, useState } from 'react'
|
|||
import useSWR from 'swr'
|
||||
|
||||
export const useJson = (url: string, props?: any) => {
|
||||
const [response, setResponse] = useState<any>({})
|
||||
const [response, setResponse] = useState<any>({})
|
||||
|
||||
const fetcher = (url: string) =>
|
||||
fetch(url)
|
||||
.then((res) => res.json())
|
||||
.catch()
|
||||
const { data, error } = useSWR(url, fetcher, { fallbackData: props, refreshInterval: 30000 })
|
||||
const fetcher = (url: string) =>
|
||||
fetch(url)
|
||||
.then((res) => res.json())
|
||||
.catch()
|
||||
const { data, error } = useSWR(url, fetcher, { fallbackData: props, refreshInterval: 30000 })
|
||||
|
||||
useEffect(() => {
|
||||
setResponse(data)
|
||||
}, [data, setResponse])
|
||||
useEffect(() => {
|
||||
setResponse(data)
|
||||
}, [data, setResponse])
|
||||
|
||||
return {
|
||||
response,
|
||||
error,
|
||||
}
|
||||
return {
|
||||
response,
|
||||
error,
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -195,8 +189,8 @@ import dynamic from 'next/dynamic'
|
|||
import { Spin } from '@/components/Loading'
|
||||
|
||||
const Webmentions = dynamic(() => import('@/components/webmentions/WebmentionsCore'), {
|
||||
ssr: false,
|
||||
loading: () => <Spin className="my-2 flex justify-center" />,
|
||||
ssr: false,
|
||||
loading: () => <Spin className="my-2 flex justify-center" />,
|
||||
})
|
||||
|
||||
export default Webmentions
|
||||
|
|
|
|||
Reference in a new issue