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

use memo more wisely

Browse Source
This commit is contained in:
Jake Jarvis
2022-01-22 10:06:24 -05:00
parent 224358fd68
commit d06ebfcf60
11 changed files with 70 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/Blockquote/Blockquote.tsx
View File

@ -5,10 +5,8 @@ import styles from "./Blockquote.module.css";
type Props = BlockquoteHTMLAttributes<HTMLElement>;
const Blockquote = ({ children, className, ...rest }: Props) => (
<blockquote className={classNames(styles.blockquote, className)} {...rest}>
{children}
</blockquote>
const Blockquote = ({ className, ...rest }: Props) => (
<blockquote className={classNames(styles.blockquote, className)} {...rest} />
);
export default Blockquote;

16
components/ColorfulLink/ColorfulLink.tsx
View File

@ -41,16 +41,7 @@ const getFancyLinkStyles = ({ lightColor, darkColor }: Partial<Props>) => {
`;
};
const ColorfulLink = ({
href,
title,
lightColor,
darkColor,
external = false,
className,
children,
...rest
}: Props) => {
const ColorfulLink = ({ href, lightColor, darkColor, external = false, className, ...rest }: Props) => {
const { className: underlineClassName, styles: underlineStyles } = getFancyLinkStyles({ lightColor, darkColor });
return (
@ -58,13 +49,10 @@ const ColorfulLink = ({
<Link href={href} passHref={true} prefetch={false}>
<a
className={classNames(underlineClassName, className)}
title={title}
target={external ? "_blank" : undefined}
rel={external ? "noopener noreferrer" : undefined}
{...rest}
>
{children}
</a>
/>
</Link>
{underlineStyles}

3
components/Comments/Comments.tsx
View File

@ -1,3 +1,4 @@
import { memo } from "react";
import { useTheme } from "next-themes";
import classNames from "classnames";
import { Giscus } from "@giscus/react";
@ -28,4 +29,4 @@ const Comments = ({ title, className }: Props) => {
);
};
export default Comments;
export default memo(Comments);

2
components/Content/Content.tsx
View File

@ -6,6 +6,6 @@ type Props = {
children: ReactNode;
};
const Content = ({ children }: Props) => <div className={styles.content}>{children}</div>;
const Content = (props: Props) => <div className={styles.content} {...props} />;
export default Content;

12
components/CopyButton/CopyButton.tsx
View File

@ -1,9 +1,9 @@
import { useState, useEffect } from "react";
import { forwardRef, useState, useEffect } from "react";
import classNames from "classnames/bind";
import copy from "copy-to-clipboard";
import innerText from "react-innertext";
import { ClipboardOcticon, CheckOcticon } from "../Icons";
import type { ReactNode } from "react";
import type { ReactNode, Ref } from "react";
import styles from "./CopyButton.module.css";
const cx = classNames.bind(styles);
@ -14,7 +14,10 @@ type Props = {
className?: string;
};
const CopyButton = ({ source, timeout = 2000, className }: Props) => {
const CopyButton = forwardRef(function CopyButton(
{ source, timeout = 2000, className }: Props,
ref: Ref<HTMLButtonElement>
) {
const [copied, setCopied] = useState(false);
const handleCopy = (e) => {
@ -49,10 +52,11 @@ const CopyButton = ({ source, timeout = 2000, className }: Props) => {
aria-label="Copy to clipboard"
onClick={handleCopy}
disabled={!!copied}
ref={ref}
>
{copied ? <CheckOcticon fill="currentColor" /> : <ClipboardOcticon fill="currentColor" />}
</button>
);
};
});
export default CopyButton;

45
components/Heading/Heading.tsx
View File

@ -8,44 +8,15 @@ type Props = HTMLAttributes<HTMLHeadingElement> & {
className?: string;
};
const Heading = ({ as: Component, children, className, ...rest }: Props) => {
return (
<Component className={classNames(styles.heading, styles[Component], className)} {...rest}>
{children}
</Component>
);
const Heading = ({ as: Component, className, ...rest }: Props) => {
return <Component className={classNames(styles.heading, styles[Component], className)} {...rest} />;
};
// TODO: do this less manually...
export const H1 = ({ children, ...rest }: Props) => (
<Heading as="h1" {...rest}>
{children}
</Heading>
);
export const H2 = ({ children, ...rest }: Props) => (
<Heading as="h2" {...rest}>
{children}
</Heading>
);
export const H3 = ({ children, ...rest }: Props) => (
<Heading as="h3" {...rest}>
{children}
</Heading>
);
export const H4 = ({ children, ...rest }: Props) => (
<Heading as="h4" {...rest}>
{children}
</Heading>
);
export const H5 = ({ children, ...rest }: Props) => (
<Heading as="h5" {...rest}>
{children}
</Heading>
);
export const H6 = ({ children, ...rest }: Props) => (
<Heading as="h6" {...rest}>
{children}
</Heading>
);
export const H1 = (props: Props) => <Heading as="h1" {...props} />;
export const H2 = (props: Props) => <Heading as="h2" {...props} />;
export const H3 = (props: Props) => <Heading as="h3" {...props} />;
export const H4 = (props: Props) => <Heading as="h4" {...props} />;
export const H5 = (props: Props) => <Heading as="h5" {...props} />;
export const H6 = (props: Props) => <Heading as="h6" {...props} />;
export default Heading;

18
components/List/List.tsx
View File

@ -8,20 +8,14 @@ type Props = {
className?: string;
};
export const UnorderedList = ({ children, className, ...rest }: Props) => (
<ul className={classNames(styles.unordered, className)} {...rest}>
{children}
</ul>
export const UnorderedList = ({ className, ...rest }: Props) => (
<ul className={classNames(styles.unordered, className)} {...rest} />
);
export const OrderedList = ({ children, className, ...rest }: Props) => (
<ol className={classNames(styles.ordered, className)} {...rest}>
{children}
</ol>
export const OrderedList = ({ className, ...rest }: Props) => (
<ol className={classNames(styles.ordered, className)} {...rest} />
);
// TODO: this is based on good faith that the children are all `<li>`s...
export const ListItem = ({ children, className, ...rest }: Props) => (
<li className={classNames(styles.item, className)} {...rest}>
{children}
</li>
export const ListItem = ({ className, ...rest }: Props) => (
<li className={classNames(styles.item, className)} {...rest} />
);

3
components/PageTitle/PageTitle.tsx
View File

@ -1,4 +1,3 @@
import { memo } from "react";
import { useRouter } from "next/router";
import Link from "next/link";
import classNames from "classnames";
@ -23,4 +22,4 @@ const PageTitle = ({ children, className }: Props) => {
);
};
export default memo(PageTitle);
export default PageTitle;

37
components/ThemeToggle/BulbIcon.tsx Normal file
View File

@ -0,0 +1,37 @@
import { memo } from "react";
import classNames from "classnames";
type Props = {
on?: boolean;
className?: string;
};
// modified from Twemoji lightbulb:
const BulbIcon = ({ on = false, className }: Props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" className={classNames("icon", className)}>
<g fill="none">
<path
d="m30 11.376c0 6.6229714-5.2272727 7.6515429-5.2272727 13.824 0 3.1865143-3.2649546 3.4549714-5.75 3.4549714-2.1463182 0-6.8853637-.8012571-6.8853637-3.4570285 0-6.1693715-5.1373636-7.1979429-5.1373636-13.8219429 0-6.20331429 5.5252273-11.232 11.5867727-11.232 6.0636364 0 11.4132273 5.02868571 11.4132273 11.232z"
fill={on ? "#ffd983" : "#cccbcb"}
/>
<path
d="m22.8564091 33.4285714c0 .8516572-2.3355455 2.5714286-4.3564091 2.5714286s-4.3564091-1.7197714-4.3564091-2.5714286c0-.8516571 2.3345-.5142857 4.3564091-.5142857 2.0208636 0 4.3564091-.3373714 4.3564091.5142857z"
fill={on ? "#b9c9d9" : "#ccd6dd"}
/>
<path
d="m23.4209545 10.5870857c-.4087727-.4021714-1.0695-.4021714-1.4782727 0l-3.4426818 3.3870857-3.4426818-3.3870857c-.4087727-.4021714-1.0695-.4021714-1.4782727 0-.4087728.4021714-.4087728 1.0522286 0 1.4544l3.8755 3.8129143v10.8884571c0 .5688.4683636 1.0285715 1.0454545 1.0285715s1.0454545-.4597715 1.0454545-1.0285715v-10.8884571l3.8755-3.8129143c.4087728-.4021714.4087728-1.0522286 0-1.4544z"
fill={on ? "#ffcc4d" : "#7d7a72"}
/>
<path
d="m24.7727273 31.8857143c0 1.1355428-.9367273 2.0571428-2.0909091 2.0571428h-8.3636364c-1.1541818 0-2.0909091-.9216-2.0909091-2.0571428v-6.1714286h12.5454546z"
fill="#99aab5"
/>
<path
d="m12.2262273 32.9142857c-.5018182 0-.9450909-.3569143-1.0297728-.8598857-.0951363-.5595429.289591-1.0902857.8593637-1.1828571l12.5454545-2.0571429c.5687273-.1008 1.1081818.2849143 1.2022728.8454857.0951363.5595429-.289591 1.0902857-.8593637 1.1828572l-12.5454545 2.0571428c-.0575.0102857-.1160455.0144-.1725.0144zm0-4.1142857c-.5018182 0-.9450909-.3569143-1.0297728-.8598857-.0951363-.5595429.289591-1.0902857.8593637-1.1828572l12.5454545-2.0571428c.5687273-.0997714 1.1081818.2849143 1.2022728.8454857.0951363.5595429-.289591 1.0902857-.8593637 1.1828571l-12.5454545 2.0571429c-.0575.0102857-.1160455.0144-.1725.0144z"
fill="#ccd6dd"
/>
</g>
</svg>
);
export default memo(BulbIcon);

34
components/ThemeToggle/ThemeToggle.tsx
View File

@ -1,6 +1,6 @@
import { useEffect, useState, memo } from "react";
import { useTheme } from "next-themes";
import classNames from "classnames";
import BulbIcon from "./BulbIcon";
import styles from "./ThemeToggle.module.css";
@ -8,41 +8,13 @@ type Props = {
className?: string;
};
// modified from Twemoji lightbulb:
const BulbIcon = ({ on = false, className }) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" className={className}>
<g fill="none">
<path
d="m30 11.376c0 6.6229714-5.2272727 7.6515429-5.2272727 13.824 0 3.1865143-3.2649546 3.4549714-5.75 3.4549714-2.1463182 0-6.8853637-.8012571-6.8853637-3.4570285 0-6.1693715-5.1373636-7.1979429-5.1373636-13.8219429 0-6.20331429 5.5252273-11.232 11.5867727-11.232 6.0636364 0 11.4132273 5.02868571 11.4132273 11.232z"
fill={on ? "#ffd983" : "#cccbcb"}
/>
<path
d="m22.8564091 33.4285714c0 .8516572-2.3355455 2.5714286-4.3564091 2.5714286s-4.3564091-1.7197714-4.3564091-2.5714286c0-.8516571 2.3345-.5142857 4.3564091-.5142857 2.0208636 0 4.3564091-.3373714 4.3564091.5142857z"
fill={on ? "#b9c9d9" : "#ccd6dd"}
/>
<path
d="m23.4209545 10.5870857c-.4087727-.4021714-1.0695-.4021714-1.4782727 0l-3.4426818 3.3870857-3.4426818-3.3870857c-.4087727-.4021714-1.0695-.4021714-1.4782727 0-.4087728.4021714-.4087728 1.0522286 0 1.4544l3.8755 3.8129143v10.8884571c0 .5688.4683636 1.0285715 1.0454545 1.0285715s1.0454545-.4597715 1.0454545-1.0285715v-10.8884571l3.8755-3.8129143c.4087728-.4021714.4087728-1.0522286 0-1.4544z"
fill={on ? "#ffcc4d" : "#7d7a72"}
/>
<path
d="m24.7727273 31.8857143c0 1.1355428-.9367273 2.0571428-2.0909091 2.0571428h-8.3636364c-1.1541818 0-2.0909091-.9216-2.0909091-2.0571428v-6.1714286h12.5454546z"
fill="#99aab5"
/>
<path
d="m12.2262273 32.9142857c-.5018182 0-.9450909-.3569143-1.0297728-.8598857-.0951363-.5595429.289591-1.0902857.8593637-1.1828571l12.5454545-2.0571429c.5687273-.1008 1.1081818.2849143 1.2022728.8454857.0951363.5595429-.289591 1.0902857-.8593637 1.1828572l-12.5454545 2.0571428c-.0575.0102857-.1160455.0144-.1725.0144zm0-4.1142857c-.5018182 0-.9450909-.3569143-1.0297728-.8598857-.0951363-.5595429.289591-1.0902857.8593637-1.1828572l12.5454545-2.0571428c.5687273-.0997714 1.1081818.2849143 1.2022728.8454857.0951363.5595429-.289591 1.0902857-.8593637 1.1828571l-12.5454545 2.0571429c-.0575.0102857-.1160455.0144-.1725.0144z"
fill="#ccd6dd"
/>
</g>
</svg>
);
const ThemeToggle = ({ className }: Props) => {
const [mounted, setMounted] = useState(false);
const { resolvedTheme, setTheme } = useTheme();
// render a dummy bulb until we're fully mounted and self-aware
useEffect(() => setMounted(true), []);
if (!mounted) return <BulbIcon on={false} className={classNames("icon", className)} />;
if (!mounted) return <BulbIcon on={false} className={className} />;
return (
<button
@ -51,7 +23,7 @@ const ThemeToggle = ({ className }: Props) => {
title={resolvedTheme === "light" ? "Toggle Dark Mode" : "Toggle Light Mode"}
aria-hidden={true}
>
<BulbIcon on={resolvedTheme === "light"} className={classNames("icon", className)} />
<BulbIcon on={resolvedTheme === "light"} className={className} />
</button>
);
};

1
next.config.js
View File

@ -57,7 +57,6 @@ module.exports = (phase, { defaultConfig }) => {
loader: "@svgr/webpack",
options: {
icon: true,
memo: true,
typescript: true,
svgProps: {
"aria-hidden": true,