jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-06-30 23:21:29 -04:00
Code Issues Activity

organize types a bit more sanely & bump deps

Browse Source
This commit is contained in:
Jake Jarvis
2022-02-24 07:06:34 -05:00
parent d24d29a04e
commit e6f1955efb
16 changed files with 267 additions and 645 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
components/NoteMeta/NoteMeta.tsx
View File

@ -1,71 +1,76 @@
import Link from "next/link";
import classNames from "classnames";
import { format } from "date-fns";
import HitCounter from "../HitCounter/HitCounter";
import NoteTitle from "../NoteTitle/NoteTitle";
import { DateIcon, TagIcon, EditIcon, ViewsIcon } from "../Icons";
import * as config from "../../lib/config";
import type { NoteMetaType } from "../../types";
import type { NoteType } from "../../types";
import styles from "./NoteMeta.module.css";
import Link from "next/link";
export type NoteMetaProps = Pick<NoteMetaType, "slug" | "date" | "title" | "tags">;
export type NoteMetaProps = Pick<NoteType["frontMatter"], "slug" | "date" | "title" | "htmlTitle" | "tags">;
const NoteMeta = ({ slug, date, title, tags = [] }: NoteMetaProps) => (
<div className={styles.meta}>
<div className={styles.meta_item}>
<Link
href={{
pathname: "/notes/[slug]/",
query: { slug: slug },
}}
>
<a className={styles.date_link}>
const NoteMeta = ({ slug, date, title, htmlTitle, tags = [] }: NoteMetaProps) => (
<>
<div className={styles.meta}>
<div className={styles.meta_item}>
<Link
href={{
pathname: "/notes/[slug]/",
query: { slug },
}}
>
<a className={styles.date_link}>
<span>
<DateIcon className={styles.icon} />
</span>
<span title={format(new Date(date), "PPppp")}>{format(new Date(date), "MMMM d, yyyy")}</span>
</a>
</Link>
</div>
{tags.length > 0 && (
<div className={classNames(styles.meta_item, styles.tags)}>
<span>
<DateIcon className={styles.icon} />
<TagIcon className={styles.icon} />
</span>
<span title={format(new Date(date), "PPppp")}>{format(new Date(date), "MMMM d, yyyy")}</span>
{tags.map((tag) => (
<span key={tag} className={styles.tag}>
{tag}
</span>
))}
</div>
)}
<div className={styles.meta_item}>
<a
className={styles.edit_link}
href={`https://github.com/${config.githubRepo}/blob/main/notes/${slug}.mdx`}
target="_blank"
rel="noopener noreferrer"
title={`Edit "${title}" on GitHub`}
>
<span>
<EditIcon className={styles.icon} />
</span>
<span>Improve This Post</span>
</a>
</Link>
</div>
</div>
{tags.length > 0 && (
<div className={classNames(styles.meta_item, styles.tags)}>
<span>
<TagIcon className={styles.icon} />
</span>
{tags.map((tag) => (
<span key={tag} className={styles.tag}>
{tag}
{/* only count hits on production site */}
{process.env.NEXT_PUBLIC_VERCEL_ENV === "production" && (
<div className={classNames(styles.meta_item, styles.views)}>
<span>
<ViewsIcon className={styles.icon} />
</span>
))}
</div>
)}
<div className={styles.meta_item}>
<a
className={styles.edit_link}
href={`https://github.com/${config.githubRepo}/blob/main/notes/${slug}.mdx`}
target="_blank"
rel="noopener noreferrer"
title={`Edit "${title}" on GitHub`}
>
<span>
<EditIcon className={styles.icon} />
</span>
<span>Improve This Post</span>
</a>
<HitCounter slug={`notes/${slug}`} />
</div>
)}
</div>
{/* only count hits on production site */}
{process.env.NEXT_PUBLIC_VERCEL_ENV === "production" && (
<div className={classNames(styles.meta_item, styles.views)}>
<span>
<ViewsIcon className={styles.icon} />
</span>
<HitCounter slug={`notes/${slug}`} />
</div>
)}
</div>
<NoteTitle slug={slug} htmlTitle={htmlTitle || title} />
</>
);
export default NoteMeta;

6
components/NoteTitle/NoteTitle.tsx
View File

@ -1,17 +1,17 @@
import Link from "next/link";
import classNames from "classnames";
import type { NoteMetaType } from "../../types";
import type { NoteType } from "../../types";
import styles from "./NoteTitle.module.css";
export type NoteTitleProps = Pick<NoteMetaType, "slug" | "htmlTitle"> & JSX.IntrinsicElements["h1"];
export type NoteTitleProps = Pick<NoteType["frontMatter"], "slug" | "htmlTitle"> & JSX.IntrinsicElements["h1"];
const NoteTitle = ({ slug, htmlTitle, className, ...rest }: NoteTitleProps) => (
<h1 className={classNames(styles.title, className)} {...rest}>
<Link
href={{
pathname: "/notes/[slug]/",
query: { slug: slug },
query: { slug },
}}
>
<a className={styles.link} dangerouslySetInnerHTML={{ __html: htmlTitle }} />

8
components/NotesList/NotesList.tsx
View File

@ -1,17 +1,17 @@
import { format } from "date-fns";
import Link from "../Link/Link";
import type { NoteMetaType } from "../../types";
import type { NoteType } from "../../types";
import styles from "./NotesList.module.css";
export type NotesListProps = {
notesByYear: Record<string, NoteMetaType[]>;
notesByYear: Record<string, NoteType["frontMatter"][]>;
};
const NotesList = ({ notesByYear }: NotesListProps) => {
const sections = [];
Object.entries(notesByYear).forEach(([year, notes]: [string, NoteMetaType[]]) => {
Object.entries(notesByYear).forEach(([year, notes]: [string, NoteType["frontMatter"][]]) => {
sections.push(
<section key={year} className={styles.section}>
<h2 className={styles.year}>{year}</h2>
@ -23,7 +23,7 @@ const NotesList = ({ notesByYear }: NotesListProps) => {
<Link
href={{
pathname: "/notes/[slug]/",
query: { slug: slug },
query: { slug },
}}
dangerouslySetInnerHTML={{ __html: htmlTitle }}
/>

4
components/RepositoryCard/RepositoryCard.tsx
View File

@ -2,11 +2,11 @@ import classNames from "classnames";
import { intlFormat, formatDistanceToNowStrict } from "date-fns";
import Link from "../Link/Link";
import { StarOcticon, ForkOcticon } from "../Icons";
import type { RepoType } from "../../types";
import type { RepositoryType } from "../../types";
import styles from "./RepositoryCard.module.css";
export type RepositoryCardProps = RepoType & {
export type RepositoryCardProps = RepositoryType & {
className?: string;
};

2
components/TweetEmbed/TweetEmbed.tsx
View File

@ -9,7 +9,7 @@ export type TweetEmbedProps = {
const TweetEmbed = ({ id, className, options }: TweetEmbedProps) => (
<Tweet
className={className}
id={id}
tweetId={id}
options={{
dnt: true,
align: "center",