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

stop being lazy with css selectors

Browse Source
This commit is contained in:
Jake Jarvis
2022-01-30 11:38:37 -05:00
parent 9f34cec930
commit f0259dbab5
24 changed files with 498 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Footer/Footer.module.css
View File

@ -7,7 +7,7 @@
transition: color 0.25s ease, background 0.25s ease, border 0.25s ease;
}
.footer a {
.link {
color: inherit;
}

13
components/Footer/Footer.tsx
View File

@ -1,5 +1,6 @@
import { memo } from "react";
import Link from "next/link";
import classNames from "classnames";
import { HeartIcon, NextjsLogo } from "../Icons";
import * as config from "../../lib/config";
@ -11,11 +12,15 @@ const Footer = () => (
<div className={styles.license}>
Content{" "}
<Link href="/license/" prefetch={false}>
<a title="Creative Commons Attribution 4.0 International">licensed under CC-BY-4.0</a>
<a className={styles.link} title="Creative Commons Attribution 4.0 International">
licensed under CC-BY-4.0
</a>
</Link>
,{" "}
<Link href="/previously/" prefetch={false}>
<a title="Previously on...">2001</a>
<a className={styles.link} title="Previously on...">
2001
</a>
</Link>{" "}
– {new Date().getFullYear()}.
</div>
@ -26,7 +31,7 @@ const Footer = () => (
</span>{" "}
and{" "}
<a
className={styles.nextjs}
className={classNames(styles.link, styles.nextjs)}
href="https://nextjs.org/"
title="Powered by Next.js"
aria-label="Next.js"
@ -37,7 +42,7 @@ const Footer = () => (
</a>
.{" "}
<a
className={styles.view_source}
className={classNames(styles.link, styles.view_source)}
href={`https://github.com/${config.githubRepo}`}
title="View Source on GitHub"
target="_blank"

4
components/Heading/Heading.module.css
View File

@ -20,7 +20,7 @@
.anchor {
margin: 0 0.25em;
padding: 0 0.25em;
color: var(--medium-light) !important;
color: var(--medium-light);
font-weight: 300;
opacity: 0; /* overridden on hover below (except on small screens) */
}
@ -28,7 +28,7 @@
content: "\0023"; /* pound sign `#`, done here to keep content DOM cleaner */
}
.anchor:hover {
color: var(--link) !important;
color: var(--link);
}
/* make anchor link show up on hover over its corresponding heading */
.heading:hover .anchor {

2
components/Heading/Heading.tsx
View File

@ -16,7 +16,7 @@ const Heading = ({ as: Component, id, className, children, ...rest }: Props) =>
{/* add anchor link to H2s and H3s. ID is already generated by rehype-slug. `#` character inserted via CSS. */}
{id && (Component === "h2" || Component === "h3") && (
<a className={styles.anchor} href={`#${id}`} tabIndex={-1} aria-hidden="true" />
<a className={styles.anchor} href={`#${id}`} tabIndex={-1} aria-hidden={true} />
)}
</Component>
);

2
components/Image/Image.module.css
View File

@ -6,6 +6,6 @@
text-align: center;
}
.wrapper img {
.image {
border-radius: var(--rounded-edge-radius);
}

2
components/Image/Image.tsx
View File

@ -42,7 +42,7 @@ const CustomImage = ({
return (
<div className={classNames(styles.wrapper, className)}>
{/* @ts-ignore */}
<NextImage {...imageProps} {...rest} />
<NextImage className={styles.image} {...imageProps} {...rest} />
</div>
);
};

8
components/Menu/Menu.tsx
View File

@ -13,22 +13,22 @@ type Props = {
const links = [
{
icon: <HomeIcon className={styles.icon} aria-hidden={true} />,
icon: <HomeIcon className={styles.icon} />,
text: "Home",
href: "/",
},
{
icon: <NotesIcon className={styles.icon} aria-hidden={true} />,
icon: <NotesIcon className={styles.icon} />,
text: "Notes",
href: "/notes",
},
{
icon: <ProjectsIcon className={styles.icon} aria-hidden={true} />,
icon: <ProjectsIcon className={styles.icon} />,
text: "Projects",
href: "/projects",
},
{
icon: <ContactIcon className={styles.icon} aria-hidden={true} />,
icon: <ContactIcon className={styles.icon} />,
text: "Contact",
href: "/contact",
},

11
components/NoteMeta/NoteMeta.module.css
View File

@ -7,11 +7,7 @@
color: var(--medium);
}
.meta a {
color: inherit;
}
.meta > div {
.meta_item {
display: inline-flex;
margin-right: 1.6em;
white-space: nowrap;
@ -46,6 +42,11 @@
margin-right: 0;
}
.date_link,
.edit_link {
color: inherit;
}
.views {
/* fix potential layout shift when number of hits loads */
min-width: 7em;

28
components/NoteMeta/NoteMeta.tsx
View File

@ -1,3 +1,4 @@
import classNames from "classnames";
import { format } from "date-fns";
import HitCounter from "../HitCounter/HitCounter";
import { DateIcon, TagIcon, EditIcon, ViewsIcon } from "../Icons";
@ -5,20 +6,30 @@ import * as config from "../../lib/config";
import type { NoteMetaType } from "../../types";
import styles from "./NoteMeta.module.css";
import Link from "next/link";
type Props = Pick<NoteMetaType, "slug" | "date" | "title" | "tags">;
const NoteMeta = ({ slug, date, title, tags = [] }: Props) => (
<div className={styles.meta}>
<div>
<span>
<DateIcon className={styles.icon} />
</span>
<span title={format(new Date(date), "PPppp")}>{format(new Date(date), "MMMM d, yyyy")}</span>
<div className={styles.meta_item}>
<Link
href={{
pathname: "/notes/[slug]/",
query: { slug: 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={styles.tags}>
<div className={classNames(styles.meta_item, styles.tags)}>
<span>
<TagIcon className={styles.icon} />
</span>
@ -30,8 +41,9 @@ const NoteMeta = ({ slug, date, title, tags = [] }: Props) => (
</div>
)}
<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"
@ -44,7 +56,7 @@ const NoteMeta = ({ slug, date, title, tags = [] }: Props) => (
</a>
</div>
<div className={styles.views}>
<div className={classNames(styles.meta_item, styles.views)}>
<span>
<ViewsIcon className={styles.icon} />
</span>

12
components/NoteTitle/NoteTitle.module.css
View File

@ -5,16 +5,12 @@
font-weight: 700;
}
.title a {
color: inherit;
.title code {
margin: 0 0.075em;
}
.title code {
font-size: 1em;
background: none !important;
border: 0 !important;
margin: 0 0.075em !important;
padding: 0 !important;
.link {
color: inherit;
}
@media screen and (max-width: 768px) {

9
components/NoteTitle/NoteTitle.tsx
View File

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

4
components/OctocatLink/OctocatLink.module.css
View File

@ -1,10 +1,10 @@
.link {
margin: 0 0.4em;
color: var(--text) !important;
color: var(--text);
}
.link:hover {
color: var(--link) !important;
color: var(--link);
}
.icon {

2
components/PageTitle/PageTitle.module.css
View File

@ -5,7 +5,7 @@
text-align: center;
}
.title a {
.link {
color: inherit;
}

2
components/PageTitle/PageTitle.tsx
View File

@ -17,7 +17,7 @@ const PageTitle = ({ className, ...rest }: Props) => {
return (
<h1 className={classNames(styles.title, className)}>
<Link href={canonical}>
<a {...rest} />
<a className={styles.link} {...rest} />
</Link>
</h1>
);

13
components/RepositoryCard/RepositoryCard.module.css
View File

@ -1,6 +1,6 @@
.card {
width: 100%;
padding: 1.2em 1.2em 0.8em;
padding: 1.2em 1.2em 0.8em 1.2em;
border: 1px solid;
border-radius: var(--rounded-edge-radius);
font-size: 0.85em;
@ -16,7 +16,8 @@
}
.description {
margin: 0.7em 0 0.5em;
margin-top: 0.7em;
margin-bottom: 0.5em;
line-height: 1.7;
}
@ -33,12 +34,12 @@
color: var(--medium);
}
.meta_item a {
color: inherit !important;
.meta_link {
color: inherit;
}
.meta_item a:hover {
color: var(--link) !important;
.meta_link:hover {
color: var(--link);
}
.octicon,

2
components/RepositoryCard/RepositoryCard.tsx
View File

@ -29,6 +29,7 @@ const RepositoryCard = ({ name, url, description, language, stars, forks, update
{stars > 0 && (
<div className={styles.meta_item}>
<a
className={styles.meta_link}
href={`${url}/stargazers`}
title={`${stars.toLocaleString("en-US")} ${stars === 1 ? "star" : "stars"}`}
target="_blank"
@ -43,6 +44,7 @@ const RepositoryCard = ({ name, url, description, language, stars, forks, update
{forks > 0 && (
<div className={styles.meta_item}>
<a
className={styles.meta_link}
href={`${url}/network/members`}
title={`${forks.toLocaleString("en-US")} ${forks === 1 ? "fork" : "forks"}`}
target="_blank"

27
pages/cli.tsx
View File

@ -6,6 +6,7 @@ import Image from "../components/Image/Image";
import Blockquote from "../components/Blockquote/Blockquote";
import CodeBlock from "../components/CodeBlock/CodeBlock";
import { H2 } from "../components/Heading/Heading";
import { UnorderedList, ListItem } from "../components/List/List";
import cliImg from "../public/static/images/cli/screenshot.png";
@ -37,24 +38,24 @@ const CLI = () => (
<CodeBlock className="code-highlight">npx @jakejarvis/cli</CodeBlock>
<H2>Inspired by</H2>
<ul>
<li>
<UnorderedList>
<ListItem>
<Link href="https://github.com/sindresorhus/sindresorhus-cli">@sindresorhus/sindresorhus-cli</Link>
</li>
<li>
</ListItem>
<ListItem>
<Link href="https://github.com/yg/ygcodes">@yg/ygcodes</Link>
</li>
</ul>
</ListItem>
</UnorderedList>
<H2>Built with</H2>
<ul>
<li>
<UnorderedList>
<ListItem>
<Link href="https://github.com/vadimdemedes/ink">ink</Link> - React for interactive command-line apps
</li>
<li>
</ListItem>
<ListItem>
<Link href="https://github.com/sindresorhus/meow">meow</Link> - CLI helper
</li>
</ul>
</ListItem>
</UnorderedList>
<p>
<Link href="https://github.com/jakejarvis/jakejarvis/tree/main/cli" target="_blank" rel="noreferrer">
View source on GitHub.
@ -63,7 +64,7 @@ const CLI = () => (
<H2>License</H2>
<p>
MIT © <Link href="https://jarv.is/">Jake Jarvis</Link>,{" "}
MIT &copy; <Link href="https://jarv.is/">Jake Jarvis</Link>,{" "}
<Link href="https://sindresorhus.com">Sindre Sorhus</Link>
</p>
</Content>

2
pages/hillary.tsx
View File

@ -47,7 +47,7 @@ const Hillary = () => (
text-align: center;
font-size: 0.9em;
line-height: 1.8;
margin: 1.25em 1em 0.5em;
margin: 1.25em 1em 0 1em;
color: var(--medium-light);
}
`}</style>

2
pages/leo.tsx
View File

@ -44,7 +44,7 @@ const Leo = () => (
text-align: center;
font-size: 0.9em;
line-height: 1.8;
margin: 1.25em 1em 0.5em;
margin: 1.25em 1em 0 1em;
color: var(--medium-light);
}
`}</style>

89
pages/license.tsx
View File

@ -5,6 +5,7 @@ import Link from "../components/Link/Link";
import HorizontalRule from "../components/HorizontalRule/HorizontalRule";
import Blockquote from "../components/Blockquote/Blockquote";
import { H2, H3 } from "../components/Heading/Heading";
import { UnorderedList, OrderedList, ListItem } from "../components/List/List";
const License = () => (
<>
@ -84,8 +85,8 @@ const License = () => (
rights specified in the public license below. The following considerations are for informational purposes only,
are not exhaustive, and do not form part of our licenses.
</p>
<ul>
<li>
<UnorderedList>
<ListItem>
<p>
<strong>Considerations for licensors:</strong> Our public licenses are intended for use by those authorized
to give the public permission to use material in ways otherwise restricted by copyright and certain other
@ -99,8 +100,8 @@ const License = () => (
</Link>
.
</p>
</li>
<li>
</ListItem>
<ListItem>
<p>
<strong>Considerations for the public:</strong> By using one of our public licenses, a licensor grants the
public permission to use the licensed material under specified terms and conditions. If the licensor's
@ -115,8 +116,8 @@ const License = () => (
</Link>
.
</p>
</li>
</ul>
</ListItem>
</UnorderedList>
<H3>Licensed Rights</H3>
@ -193,8 +194,8 @@ const License = () => (
<strong>License grant.</strong>
</em>
</p>
<ol>
<li>
<OrderedList>
<ListItem>
<p>
Subject to the terms and conditions of this Public License, the Licensor hereby grants You a worldwide,
royalty-free, non-sublicensable, non-exclusive, irrevocable license to exercise the Licensed Rights in the
@ -202,20 +203,20 @@ const License = () => (
</p>
<p>A. reproduce and Share the Licensed Material, in whole or in part; and</p>
<p>B. produce, reproduce, and Share Adapted Material.</p>
</li>
<li>
</ListItem>
<ListItem>
<p>
<strong>Exceptions and Limitations.</strong> For the avoidance of doubt, where Exceptions and Limitations
apply to Your use, this Public License does not apply, and You do not need to comply with its terms and
conditions.
</p>
</li>
<li>
</ListItem>
<ListItem>
<p>
<strong>Term.</strong> The term of this Public License is specified in Section 6(a).
</p>
</li>
<li>
</ListItem>
<ListItem>
<p>
<strong>Media and formats; technical modifications allowed.</strong> The Licensor authorizes You to exercise
the Licensed Rights in all media and formats whether now known or hereafter created, and to make technical
@ -225,8 +226,8 @@ const License = () => (
Public License, simply making modifications authorized by this Section 2(a)(4) never produces Adapted
Material.
</p>
</li>
<li>
</ListItem>
<ListItem>
<p>
<strong>Downstream recipients.</strong>
</p>
@ -240,43 +241,43 @@ const License = () => (
terms or conditions on, or apply any Effective Technological Measures to, the Licensed Material if doing so
restricts exercise of the Licensed Rights by any recipient of the Licensed Material.
</p>
</li>
<li>
</ListItem>
<ListItem>
<p>
<strong>No endorsement.</strong> Nothing in this Public License constitutes or may be construed as
permission to assert or imply that You are, or that Your use of the Licensed Material is, connected with, or
sponsored, endorsed, or granted official status by, the Licensor or others designated to receive attribution
as provided in Section 3(a)(1)(A)(i).
</p>
</li>
</ol>
</ListItem>
</OrderedList>
<p>
b.{" "}
<em>
<strong>Other rights.</strong>
</em>
</p>
<ol>
<li>
<OrderedList>
<ListItem>
<p>
Moral rights, such as the right of integrity, are not licensed under this Public License, nor are publicity,
privacy, and/or other similar personality rights; however, to the extent possible, the Licensor waives
and/or agrees not to assert any such rights held by the Licensor to the limited extent necessary to allow
You to exercise the Licensed Rights, but not otherwise.
</p>
</li>
<li>
</ListItem>
<ListItem>
<p>Patent and trademark rights are not licensed under this Public License.</p>
</li>
<li>
</ListItem>
<ListItem>
<p>
To the extent possible, the Licensor waives any right to collect royalties from You for the exercise of the
Licensed Rights, whether directly or through a collecting society under any voluntary or waivable statutory
or compulsory licensing scheme. In all other cases the Licensor expressly reserves any right to collect such
royalties.
</p>
</li>
</ol>
</ListItem>
</OrderedList>
<H3>Section 3 – License Conditions.</H3>
@ -287,8 +288,8 @@ const License = () => (
<strong>Attribution.</strong>
</em>
</p>
<ol>
<li>
<OrderedList>
<ListItem>
<p>If You Share the Licensed Material (including in modified form), You must:</p>
<p>A. retain the following if it is supplied by the Licensor with the Licensed Material:</p>
<p>
@ -307,27 +308,27 @@ const License = () => (
C. indicate the Licensed Material is licensed under this Public License, and include the text of, or the URI
or hyperlink to, this Public License.
</p>
</li>
<li>
</ListItem>
<ListItem>
<p>
You may satisfy the conditions in Section 3(a)(1) in any reasonable manner based on the medium, means, and
context in which You Share the Licensed Material. For example, it may be reasonable to satisfy the
conditions by providing a URI or hyperlink to a resource that includes the required information.
</p>
</li>
<li>
</ListItem>
<ListItem>
<p>
If requested by the Licensor, You must remove any of the information required by Section 3(a)(1)(A) to the
extent reasonably practicable.
</p>
</li>
<li>
</ListItem>
<ListItem>
<p>
If You Share Adapted Material You produce, the Adapter's License You apply must not prevent recipients of
the Adapted Material from complying with this Public License.
</p>
</li>
</ol>
</ListItem>
</OrderedList>
<H3>Section 4 – Sui Generis Database Rights.</H3>
@ -388,17 +389,17 @@ const License = () => (
fail to comply with this Public License, then Your rights under this Public License terminate automatically.
</p>
<p>b. Where Your right to use the Licensed Material has terminated under Section 6(a), it reinstates:</p>
<ol>
<li>
<OrderedList>
<ListItem>
<p>
automatically as of the date the violation is cured, provided it is cured within 30 days of Your discovery
of the violation; or
</p>
</li>
<li>
</ListItem>
<ListItem>
<p>upon express reinstatement by the Licensor.</p>
</li>
</ol>
</ListItem>
</OrderedList>
<p>
For the avoidance of doubt, this Section 6(b) does not affect any right the Licensor may have to seek remedies
for Your violations of this Public License.

2
pages/previously.tsx
View File

@ -155,7 +155,7 @@ const Previously = () => (
{/* a complete sh*tshow of overrides, mainly to compensate for font change */}
<style jsx global>{`
body {
font-family: "Comic Neue", "Comic Sans MS", "Comic Sans", "Inter", sans-serif;
font-family: "Comic Neue", "Comic Sans MS", "Comic Sans", var(--font-family-sans-variable);
font-weight: 600 !important;
}
/* left header */

35
pages/privacy.tsx
View File

@ -4,8 +4,9 @@ import PageTitle from "../components/PageTitle/PageTitle";
import Link from "../components/Link/Link";
import Image from "../components/Image/Image";
import IFrame from "../components/IFrame/IFrame";
import { H2 } from "../components/Heading/Heading";
import Blockquote from "../components/Blockquote/Blockquote";
import { H2 } from "../components/Heading/Heading";
import { UnorderedList, ListItem } from "../components/List/List";
import faunaImg from "../public/static/images/privacy/fauna_hits.png";
@ -91,29 +92,29 @@ const Privacy = () => (
code that is outside of my control. Please refer to their privacy policies for more information:
</p>
<ul>
<li>
<UnorderedList>
<ListItem>
<Link href="https://blog.codepen.io/documentation/privacy/">CodePen</Link>
</li>
<li>
</ListItem>
<ListItem>
<Link href="https://www.facebook.com/policy.php">Facebook</Link>
</li>
<li>
</ListItem>
<ListItem>
<Link href="https://docs.github.com/en/github/site-policy/github-privacy-statement">GitHub</Link>
</li>
<li>
</ListItem>
<ListItem>
<Link href="https://soundcloud.com/pages/privacy">SoundCloud</Link>
</li>
<li>
</ListItem>
<ListItem>
<Link href="https://twitter.com/en/privacy">Twitter</Link>
</li>
<li>
</ListItem>
<ListItem>
<Link href="https://vimeo.com/privacy">Vimeo</Link>
</li>
<li>
</ListItem>
<ListItem>
<Link href="https://policies.google.com/privacy">YouTube</Link>
</li>
</ul>
</ListItem>
</UnorderedList>
<H2 id="hcaptcha">Fighting Spam</H2>

16
pages/projects.tsx
View File

@ -4,6 +4,7 @@ import Content from "../components/Content/Content";
import PageTitle from "../components/PageTitle/PageTitle";
import Link from "../components/Link/Link";
import RepositoryCard from "../components/RepositoryCard/RepositoryCard";
import { OctocatOcticon } from "../components/Icons";
import type { GetStaticProps } from "next";
import type { RepoType } from "../types";
@ -32,7 +33,20 @@ const Projects = ({ repos }: Props) => (
</div>
<p className="view_more">
<Link href="https://github.com/jakejarvis?tab=repositories">View more on GitHub...</Link>
<Link href="https://github.com/jakejarvis?tab=repositories">
View more on{" "}
<OctocatOcticon
fill="currentColor"
style={{
color: "var(--text)",
width: "1.2em",
height: "1.2em",
verticalAlign: "-0.2em",
margin: "0 0.15em",
}}
/>{" "}
GitHub...
</Link>
</p>
</Content>

680
pages/uses.tsx
View File

File diff suppressed because it is too large Load Diff