jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-01-14 10:42:56 -05:00
Code Issues Activity

add page stats typings

Browse Source
This commit is contained in:
Jake Jarvis
2022-06-30 09:17:12 -04:00
parent ae2cb50cbe
commit 7da0a713a4
9 changed files with 80 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/HitCounter/HitCounter.tsx
View File

@@ -1,42 +1,36 @@
import useSWR from "swr";
import useSWRImmutable from "swr/immutable";
import commaNumber from "comma-number";
import Loading from "../Loading";
import fetcher from "../../lib/helpers/fetcher";
import type { PageStats } from "../../types";
export type HitCounterProps = {
slug: string;
className?: string;
};
const HitCounter = ({ slug, className }: HitCounterProps) => {
// start fetching repos from API immediately
const { data, error } = useSWR(
const HitCounter = ({ slug }: HitCounterProps) => {
// use immutable SWR to avoid double (or more) counting views:
// https://swr.vercel.app/docs/revalidation#disable-automatic-revalidations
const { data, error } = useSWRImmutable<PageStats>(
`/api/hits/?${new URLSearchParams({
slug,
})}`,
fetcher,
{
// avoid double (or more) counting views
revalidateOnFocus: false,
revalidateOnReconnect: false,
}
fetcher
);
// show spinning loading indicator if data isn't fetched yet
if (!data) {
return <Loading boxes={3} width={20} />;
}
// fail secretly
if (error) {
return null;
}
// show spinning loading indicator if data isn't fetched yet
if (!data) {
return <Loading boxes={3} width={20} />;
}
// we have data!
return (
<span title={`${commaNumber(data.hits)} ${data.hits === 1 ? "view" : "views"}`} className={className}>
{commaNumber(data.hits)}
</span>
<span title={`${commaNumber(data.hits)} ${data.hits === 1 ? "view" : "views"}`}>{commaNumber(data.hits)}</span>
);
};

29
components/NoteMeta/NoteMeta.tsx
View File

@@ -56,7 +56,7 @@ const Tag = styled("span", {
export type NoteMetaProps = Pick<NoteFrontMatter, "slug" | "date" | "title" | "htmlTitle" | "tags">;
const NoteMeta = ({ slug, date, title, htmlTitle, tags = [] }: NoteMetaProps) => {
const NoteMeta = ({ slug, date, title, htmlTitle, tags }: NoteMetaProps) => {
return (
<>
<Wrapper>
@@ -68,21 +68,17 @@ const NoteMeta = ({ slug, date, title, htmlTitle, tags = [] }: NoteMetaProps) =>
}}
underline={false}
>
<span>
<Icon as={DateIcon} />
</span>
<Icon as={DateIcon} />
<Time date={date} format="MMMM D, YYYY" />
</MetaLink>
</MetaItem>
{tags.length > 0 && (
{tags && (
<MetaItem>
<span title="Tags">
<Icon as={TagIcon} />
</span>
<Icon as={TagIcon} />
<TagsList>
{tags.map((tag) => (
<Tag key={tag} title={tag}>
<Tag key={tag} title={tag} aria-label={`Tagged with ${tag}`}>
{tag}
</Tag>
))}
@@ -96,9 +92,7 @@ const NoteMeta = ({ slug, date, title, htmlTitle, tags = [] }: NoteMetaProps) =>
title={`Edit "${title}" on GitHub`}
underline={false}
>
<span>
<Icon as={EditIcon} />
</span>
<Icon as={EditIcon} />
<span>Improve This Post</span>
</MetaLink>
</MetaItem>
@@ -106,12 +100,13 @@ const NoteMeta = ({ slug, date, title, htmlTitle, tags = [] }: NoteMetaProps) =>
{/* only count hits on production site */}
{process.env.NEXT_PUBLIC_VERCEL_ENV === "production" && (
<MetaItem
// fix potential layout shift when number of hits loads
css={{ minWidth: "7em", marginRight: 0 }}
css={{
// fix potential layout shift when number of hits loads
minWidth: "7em",
marginRight: 0,
}}
>
<span>
<Icon as={ViewsIcon} />
</span>
<Icon as={ViewsIcon} />
<HitCounter slug={`notes/${slug}`} />
</MetaItem>
)}