mirror of
https://github.com/r-freeman/portfolio.git
synced 2024-11-11 18:45:41 +00:00
Added article views to homepage
This commit is contained in:
parent
819826422b
commit
bf8c522ef0
@ -7,9 +7,16 @@ type ViewsType = {
|
|||||||
views: string
|
views: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type ViewsProps = {
|
||||||
|
as?: ElementType
|
||||||
|
slug: string
|
||||||
|
className?: string
|
||||||
|
shouldUpdateViews?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
const updateViews = (slug: string) => fetcher(`/api/views/${slug}`, {method: 'POST'})
|
const updateViews = (slug: string) => fetcher(`/api/views/${slug}`, {method: 'POST'})
|
||||||
|
|
||||||
export function Views({as: Component = 'span', slug}: { as?: ElementType, slug: string }) {
|
export function Views({as: Component = 'span', slug, className, shouldUpdateViews = true}: ViewsProps) {
|
||||||
const {data} = useSWR<ViewsType>(`/api/views/${slug}`, fetcher, {
|
const {data} = useSWR<ViewsType>(`/api/views/${slug}`, fetcher, {
|
||||||
revalidateOnFocus: false,
|
revalidateOnFocus: false,
|
||||||
revalidateOnMount: true
|
revalidateOnMount: true
|
||||||
@ -17,11 +24,13 @@ export function Views({as: Component = 'span', slug}: { as?: ElementType, slug:
|
|||||||
const views = Number(data?.views)
|
const views = Number(data?.views)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
updateViews(slug).then(r => r)
|
if (shouldUpdateViews) {
|
||||||
|
updateViews(slug).then(r => r);
|
||||||
|
}
|
||||||
}, [slug])
|
}, [slug])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Component>
|
<Component className={className}>
|
||||||
{` · ${views > 0 ? numberFormat(views) : '—'} views`}
|
{` · ${views > 0 ? numberFormat(views) : '—'} views`}
|
||||||
</Component>
|
</Component>
|
||||||
)
|
)
|
||||||
|
@ -10,6 +10,7 @@ import {
|
|||||||
TwitterIcon
|
TwitterIcon
|
||||||
} from '@/components/SocialIcons'
|
} from '@/components/SocialIcons'
|
||||||
import {SocialLink} from '@/components/SocialLink'
|
import {SocialLink} from '@/components/SocialLink'
|
||||||
|
import {Views} from '@/components/Views'
|
||||||
import {formatDate} from '@/lib/formatDate'
|
import {formatDate} from '@/lib/formatDate'
|
||||||
import {generateRssFeed} from '@/lib/generateRssFeed'
|
import {generateRssFeed} from '@/lib/generateRssFeed'
|
||||||
import {generateSitemap} from '@/lib/generateSitemap'
|
import {generateSitemap} from '@/lib/generateSitemap'
|
||||||
@ -71,9 +72,12 @@ function Article(article: Article) {
|
|||||||
<Card.Title href={`/writing/${article.slug}`}>
|
<Card.Title href={`/writing/${article.slug}`}>
|
||||||
{article.title}
|
{article.title}
|
||||||
</Card.Title>
|
</Card.Title>
|
||||||
<Card.Eyebrow as="time" dateTime={article.date} decorate={false}>
|
<p className="flex order-first space-x-1 z-10">
|
||||||
{formatDate(article.date)}
|
<Card.Eyebrow as="time" dateTime={article.date} decorate={false}>
|
||||||
</Card.Eyebrow>
|
{formatDate(article.date)}
|
||||||
|
</Card.Eyebrow>
|
||||||
|
<Views slug={article.slug} shouldUpdateViews={false} className="text-sm text-zinc-500 dark:text-zinc-400"/>
|
||||||
|
</p>
|
||||||
<Card.Description>{article.description}</Card.Description>
|
<Card.Description>{article.description}</Card.Description>
|
||||||
<Card.Cta>Read more</Card.Cta>
|
<Card.Cta>Read more</Card.Cta>
|
||||||
</Card>
|
</Card>
|
||||||
|
Loading…
Reference in New Issue
Block a user