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

octicons weren't being tree-shaken -- import SVGs manually for now

Browse Source
This commit is contained in:
Jake Jarvis
2022-01-01 18:14:04 -05:00
parent c47f5f917d
commit ddb48ef2ab
28 changed files with 67 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/clipboard/CopyButton.module.scss
View File

@ -3,6 +3,7 @@
top: 0;
right: 0;
padding: 0.75em;
line-height: 1;
color: var(--text);
background-color: var(--background-inner);
border: 1px solid var(--kinda-light);
@ -15,6 +16,7 @@
.octicon {
width: 16px;
height: 16px;
vertical-align: text-bottom;
}
.octicon-check {

6
components/clipboard/CopyButton.tsx
View File

@ -1,7 +1,7 @@
import { useState, useEffect } from "react";
import copy from "copy-to-clipboard";
import trimNewlines from "trim-newlines";
import { CopyIcon, CheckIcon } from "@primer/octicons-react";
import { CopyOcticon, CheckOcticon } from "../icons/octicons";
import styles from "./CopyButton.module.scss";
@ -48,9 +48,9 @@ export default function CopyButton({ content, timeout = 2000 }: Props) {
disabled={copied}
>
{copied ? (
<CheckIcon size={16} className={`${styles.octicon} ${styles["octicon-check"]}`} />
<CheckOcticon fill="currentColor" className={`${styles.octicon} ${styles["octicon-check"]}`} />
) : (
<CopyIcon size={16} className={styles.octicon} />
<CopyOcticon fill="currentColor" className={styles.octicon} />
)}
</button>
);

6
components/contact/ContactForm.tsx
View File

@ -1,7 +1,7 @@
import { useState } from "react";
import HCaptcha from "@hcaptcha/react-hcaptcha";
import { CheckIcon, XIcon } from "@primer/octicons-react";
import SendIcon from "../icons/svg/send.svg";
import { CheckOcticon, XOcticon } from "../icons/octicons";
import { SendIcon } from "../icons";
import styles from "./ContactForm.module.scss";
@ -131,7 +131,7 @@ export default function ContactForm() {
className={status.success ? styles.result_success : styles.result_error}
style={{ display: !status.message || sending ? "none" : null }}
>
{status.success ? <CheckIcon size={16} /> : <XIcon size={16} />} {status.message}
{status.success ? <CheckOcticon fill="CurrentColor" /> : <XOcticon fill="CurrentColor" />} {status.message}
</span>
</div>
</form>

75
components/icons/index.ts
View File

@ -1,51 +1,24 @@
import BotIcon from "./svg/bot.svg";
import BulbOffIcon from "./svg/bulb-off.svg";
import BulbOnIcon from "./svg/bulb-on.svg";
import ContactIcon from "./svg/contact.svg";
import DateIcon from "./svg/date.svg";
import EditIcon from "./svg/edit.svg";
import FloppyIcon from "./svg/floppy.svg";
import HeartIcon from "./svg/heart.svg";
import HomeIcon from "./svg/home.svg";
import LaptopIcon from "./svg/laptop.svg";
import LicenseIcon from "./svg/license.svg";
import LockIcon from "./svg/lock.svg";
import MailIcon from "./svg/mail.svg";
import NextjsIcon from "./svg/nextjs.svg";
import NotesIcon from "./svg/notes.svg";
import PrivacyIcon from "./svg/privacy.svg";
import ProjectsIcon from "./svg/projects.svg";
import SendIcon from "./svg/send.svg";
import SirenIcon from "./svg/siren.svg";
import TagIcon from "./svg/tag.svg";
import TapeIcon from "./svg/tape.svg";
import ViewsIcon from "./svg/views.svg";
import WandIcon from "./svg/wand.svg";
import WaveIcon from "./svg/wave.svg";
export {
BotIcon,
BulbOffIcon,
BulbOnIcon,
ContactIcon,
DateIcon,
EditIcon,
FloppyIcon,
HeartIcon,
HomeIcon,
LaptopIcon,
LicenseIcon,
LockIcon,
MailIcon,
NextjsIcon,
NotesIcon,
PrivacyIcon,
ProjectsIcon,
SendIcon,
SirenIcon,
TagIcon,
TapeIcon,
ViewsIcon,
WandIcon,
WaveIcon,
};
export { default as BotIcon } from "./svg/bot.svg";
export { default as BulbOffIcon } from "./svg/bulb-off.svg";
export { default as BulbOnIcon } from "./svg/bulb-on.svg";
export { default as ContactIcon } from "./svg/contact.svg";
export { default as DateIcon } from "./svg/date.svg";
export { default as EditIcon } from "./svg/edit.svg";
export { default as FloppyIcon } from "./svg/floppy.svg";
export { default as HeartIcon } from "./svg/heart.svg";
export { default as HomeIcon } from "./svg/home.svg";
export { default as LaptopIcon } from "./svg/laptop.svg";
export { default as LicenseIcon } from "./svg/license.svg";
export { default as LockIcon } from "./svg/lock.svg";
export { default as MailIcon } from "./svg/mail.svg";
export { default as NextjsIcon } from "./svg/nextjs.svg";
export { default as NotesIcon } from "./svg/notes.svg";
export { default as PrivacyIcon } from "./svg/privacy.svg";
export { default as ProjectsIcon } from "./svg/projects.svg";
export { default as SendIcon } from "./svg/send.svg";
export { default as SirenIcon } from "./svg/siren.svg";
export { default as TagIcon } from "./svg/tag.svg";
export { default as TapeIcon } from "./svg/tape.svg";
export { default as ViewsIcon } from "./svg/views.svg";
export { default as WandIcon } from "./svg/wand.svg";
export { default as WaveIcon } from "./svg/wave.svg";

6
components/icons/octicons.ts Normal file
View File

@ -0,0 +1,6 @@
export { default as CheckOcticon } from "./octicons/check.svg";
export { default as CopyOcticon } from "./octicons/copy.svg";
export { default as ForkOcticon } from "./octicons/fork.svg";
export { default as OctocatOcticon } from "./octicons/octocat.svg";
export { default as StarOcticon } from "./octicons/star.svg";
export { default as XOcticon } from "./octicons/x.svg";

1
components/icons/octicons/check.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 255 B

1
components/icons/octicons/copy.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 590 B

1
components/icons/octicons/fork.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 461 B

1
components/icons/octicons/octocat.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 696 B

1
components/icons/octicons/star.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 583 B

1
components/icons/octicons/x.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 309 B

4
components/mdxComponents.tsx
View File

@ -5,7 +5,7 @@ import Gist from "react-gist";
import getNodeText from "../lib/get-node-text";
import Video from "./video/FullPageVideo";
import CopyButton from "./clipboard/CopyButton";
import { MarkGithubIcon } from "@primer/octicons-react";
import { OctocatOcticon } from "./icons/octicons";
import type { LinkProps } from "next/link";
import type { ImageProps } from "next/image";
import type { ReactPlayerProps } from "react-player";
@ -73,7 +73,7 @@ const mdxComponents = {
gist: (props: { id: string; file?: string }) => <Gist {...props} />,
octocat: (props: { repo: string }) => (
<a className="no-underline" href={`https://github.com/${props.repo}`} target="_blank" rel="noopener noreferrer">
<MarkGithubIcon size={24} verticalAlign="text-top" />
<OctocatOcticon verticalAlign="text-top" fill="currentColor" />
<style jsx>{`
a {
margin: 0 0.3em;

5
components/notes/Meta.tsx
View File

@ -1,10 +1,7 @@
import Link from "next/link";
import { format, parseISO } from "date-fns";
import Hits from "../hits/Hits";
import DateIcon from "../icons/svg/date.svg";
import TagIcon from "../icons/svg/tag.svg";
import EditIcon from "../icons/svg/edit.svg";
import ViewsIcon from "../icons/svg/views.svg";
import { DateIcon, TagIcon, EditIcon, ViewsIcon } from "../icons";
import * as config from "../../lib/config";
import styles from "./Meta.module.scss";

3
components/page-footer/Footer.tsx
View File

@ -1,6 +1,5 @@
import Link from "next/link";
import HeartIcon from "../icons/svg/heart.svg";
import NextjsIcon from "../icons/svg/nextjs.svg";
import { HeartIcon, NextjsIcon } from "../icons";
import * as config from "../../lib/config";
import styles from "./Footer.module.scss";

5
components/page-header/Menu.tsx
View File

@ -1,9 +1,6 @@
import dynamic from "next/dynamic";
import Link from "next/link";
import HomeIcon from "../icons/svg/home.svg";
import NotesIcon from "../icons/svg/notes.svg";
import ProjectsIcon from "../icons/svg/projects.svg";
import ContactIcon from "../icons/svg/contact.svg";
import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../icons";
import styles from "./Menu.module.scss";

3
components/page-header/ThemeToggle.tsx
View File

@ -1,7 +1,6 @@
import { useState, useEffect, useCallback } from "react";
import * as config from "../../lib/config";
import BulbOffIcon from "../icons/svg/bulb-off.svg";
import BulbOnIcon from "../icons/svg/bulb-on.svg";
import { BulbOffIcon, BulbOnIcon } from "../icons";
import styles from "./ThemeToggle.module.scss";

5
components/projects/RepoCard.module.scss
View File

@ -40,6 +40,9 @@
.octicon,
.language_color {
width: 16px;
height: 16px;
vertical-align: text-bottom;
margin-right: 0.5em;
}
@ -49,7 +52,7 @@
height: 1.15em;
border-radius: 50%;
position: relative;
top: 0.175em;
vertical-align: text-top;
}
}
}

6
components/projects/RepoCard.tsx
View File

@ -1,5 +1,5 @@
import { intlFormat, formatDistanceToNowStrict, parseISO } from "date-fns";
import { StarIcon, RepoForkedIcon } from "@primer/octicons-react";
import { StarOcticon, ForkOcticon } from "../icons/octicons";
import styles from "./RepoCard.module.scss";
@ -47,7 +47,7 @@ export default function RepoCard({ name, url, description, language, stars, fork
target="_blank"
rel="noopener noreferrer"
>
<StarIcon size={16} className={styles.octicon} />
<StarOcticon fill="currentColor" className={styles.octicon} />
<span>{stars.toLocaleString("en-US")}</span>
</a>
</div>
@ -61,7 +61,7 @@ export default function RepoCard({ name, url, description, language, stars, fork
target="_blank"
rel="noopener noreferrer"
>
<RepoForkedIcon size={16} className={styles.octicon} />
<ForkOcticon fill="currentColor" className={styles.octicon} />
<span>{forks.toLocaleString("en-US")}</span>
</a>
</div>

1
package.json
View File

@ -3,6 +3,7 @@
"private": true,
"license": "MIT",
"homepage": "https://jarv.is/",
"sideEffects": false,
"author": {
"name": "Jake Jarvis",
"email": "jake@jarv.is",

2
pages/birthday.tsx
View File

@ -3,7 +3,7 @@ import Container from "../components/Container";
import Content from "../components/Content";
import PageTitle from "../components/page/PageTitle";
import Video from "../components/video/FullPageVideo";
import TapeIcon from "../components/icons/svg/tape.svg";
import { TapeIcon } from "../components/icons";
import thumbnail from "../public/static/images/birthday/thumb.png";

2
pages/cli.tsx
View File

@ -3,7 +3,7 @@ import Layout from "../components/Layout";
import Container from "../components/Container";
import Content from "../components/Content";
import PageTitle from "../components/page/PageTitle";
import BotIcon from "../components/icons/svg/tape.svg";
import { BotIcon } from "../components/icons";
import cliImg from "../public/static/images/cli/screenshot.png";

3
pages/contact.tsx
View File

@ -2,8 +2,7 @@ import Layout from "../components/Layout";
import Container from "../components/Container";
import PageTitle from "../components/page/PageTitle";
import ContactForm from "../components/contact/ContactForm";
import MailIcon from "../components/icons/svg/mail.svg";
import LockIcon from "../components/icons/svg/lock.svg";
import { MailIcon, LockIcon } from "../components/icons";
export default function Contact() {
return (

3
pages/index.tsx
View File

@ -3,8 +3,7 @@ import hexRgb from "hex-rgb";
import isAbsoluteUrl from "is-absolute-url";
import Layout from "../components/Layout";
import Container from "../components/Container";
import WaveIcon from "../components/icons/svg/wave.svg";
import LockIcon from "../components/icons/svg/lock.svg";
import { WaveIcon, LockIcon } from "../components/icons";
type ColorLinkProps = {
children: unknown;

2
pages/license.tsx
View File

@ -2,7 +2,7 @@ import Layout from "../components/Layout";
import Container from "../components/Container";
import Content from "../components/Content";
import PageTitle from "../components/page/PageTitle";
import LicenseIcon from "../components/icons/svg/license.svg";
import { LicenseIcon } from "../components/icons";
export default function License() {
return (

3
pages/previously.tsx
View File

@ -5,8 +5,7 @@ import Layout from "../components/Layout";
import Container from "../components/Container";
import Content from "../components/Content";
import PageTitle from "../components/page/PageTitle";
import FloppyIcon from "../components/icons/svg/floppy.svg";
import SirenIcon from "../components/icons/svg/siren.svg";
import { FloppyIcon, SirenIcon } from "../components/icons";
import img_wayback from "../public/static/images/previously/wayback.png";
import img_2002_02 from "../public/static/images/previously/2002_02.png";

2
pages/privacy.tsx
View File

@ -4,7 +4,7 @@ import Layout from "../components/Layout";
import Container from "../components/Container";
import Content from "../components/Content";
import PageTitle from "../components/page/PageTitle";
import PrivacyIcon from "../components/icons/svg/privacy.svg";
import { PrivacyIcon } from "../components/icons";
import faunaImg from "../public/static/images/privacy/fauna_hits.png";

2
pages/projects.tsx
View File

@ -3,7 +3,7 @@ import Layout from "../components/Layout";
import Container from "../components/Container";
import PageTitle from "../components/page/PageTitle";
import RepoCard from "../components/projects/RepoCard";
import ProjectsIcon from "../components/icons/svg/projects.svg";
import { ProjectsIcon } from "../components/icons";
import type { GetStaticProps } from "next";
export default function Projects({ repos }) {

2
pages/uses.tsx
View File

@ -4,7 +4,7 @@ import Layout from "../components/Layout";
import Container from "../components/Container";
import Content from "../components/Content";
import PageTitle from "../components/page/PageTitle";
import LaptopIcon from "../components/icons/svg/laptop.svg";
import { LaptopIcon } from "../components/icons";
import desktopImg from "../public/static/images/uses/bigsur.png";