jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-16 17:55:32 -04:00
Code Issues Activity

fix some leftover stitches to-do items

Browse Source
This commit is contained in:
Jake Jarvis
2022-03-03 13:18:12 -05:00
parent dc7622a7af
commit ea4e7025ff
12 changed files with 173 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/CodeBlock/CodeBlock.tsx
View File

@@ -89,18 +89,13 @@ const CornerCopyButton = styled(CopyButton, {
top: 0,
right: 0,
padding: "0.65em",
color: "$mediumDark",
backgroundColor: "$backgroundInner",
border: "1px solid $kindaLight",
borderTopRightRadius: "$radii$rounded",
borderEndStartRadius: "$radii$rounded",
borderTopRightRadius: "$rounded",
borderBottomLeftRadius: "$rounded",
// light-dark theme switch fading
transition: "background 0.25s ease, border 0.25s ease",
"&:hover": {
color: "$link",
},
});
export type CodeBlockProps = ComponentProps<typeof Code> & {

2
components/ContactForm/ContactForm.tsx
View File

@@ -64,7 +64,7 @@ const SubmitButton = styled("button", {
height: "3.25em",
padding: "1em 1.25em",
marginRight: "1.5em",
border: "0",
border: 0,
borderRadius: "$rounded",
cursor: "pointer",
userSelect: "none",

13
components/CopyButton/CopyButton.tsx
View File

@@ -10,9 +10,16 @@ const Button = styled("button", {
cursor: "pointer",
variants: {
success: {
copied: {
true: {
color: "$success !important",
color: "$success",
},
false: {
color: "$mediumDark",
"&:hover": {
color: "$link",
},
},
},
},
@@ -69,7 +76,7 @@ const CopyButton = forwardRef(function CopyButton(
aria-label="Copy to clipboard"
onClick={handleCopy}
disabled={!!copied}
success={copied}
copied={copied}
ref={ref}
>
<Icon as={copied ? CheckOcticon : ClipboardOcticon} />

18
components/MenuItem/MenuItem.tsx
View File

@@ -9,18 +9,20 @@ const Link = styled("a", {
textDecoration: "none",
padding: "0.6em",
"&:hover": {
borderBottom: "0.2em solid",
marginBottom: "-0.2em",
borderColor: "$kindaLight",
},
variants: {
// indicate active page/section
current: {
true: {
borderBottom: "0.2em solid",
marginBottom: "-0.2em",
borderColor: "$linkUnderline !important",
borderBottom: "0.2em solid",
borderColor: "$linkUnderline",
},
false: {
"&:hover": {
marginBottom: "-0.2em",
borderBottom: "0.2em solid",
borderColor: "$kindaLight",
},
},
},
},

9
lib/styles/fonts/comic-neue.ts
View File

@@ -6,7 +6,9 @@ import comicNeueLatin400NormalWoff2 from "@fontsource/comic-neue/files/comic-neu
import comicNeueLatin700NormalWoff from "@fontsource/comic-neue/files/comic-neue-latin-700-normal.woff";
import comicNeueLatin700NormalWoff2 from "@fontsource/comic-neue/files/comic-neue-latin-700-normal.woff2";
export const ComicNeue = [
const ComicNeue = {
preloadUrl: null, // don't preload, only used on one page
family: [
{
fontFamily: "Comic Neue",
fontStyle: "normal",
@@ -21,4 +23,7 @@ export const ComicNeue = [
fontWeight: 700,
src: `url(${comicNeueLatin700NormalWoff2}) format("woff2"), url(${comicNeueLatin700NormalWoff}) format("woff")`,
},
];
],
};
export default ComicNeue;

24
lib/styles/fonts/inter.ts
View File

@@ -10,12 +10,11 @@ import interLatin700NormalWoff2 from "@fontsource/inter/files/inter-latin-700-no
// Variable
import interLatinVarFullNormalWoff2 from "@fontsource/inter/files/inter-latin-variable-full-normal.woff2";
import interLatinExtVarFullNormalWoff2 from "@fontsource/inter/files/inter-latin-ext-variable-full-normal.woff2";
// re-export hashed URL of the most prominent font so we can preload it
export { interLatinVarFullNormalWoff2 as preloadUrl };
export const Inter = [
const Inter = {
// re-export hashed URL of the most prominent file so we can preload it in head:
preloadUrl: interLatinVarFullNormalWoff2,
family: [
{
fontFamily: "Inter",
fontStyle: "normal",
@@ -43,15 +42,8 @@ export const Inter = [
fontDisplay: "swap",
fontWeight: "100 900",
src: `url(${interLatinVarFullNormalWoff2}) format("woff2")`,
unicodeRange:
"U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd",
},
{
fontFamily: "Inter var",
fontStyle: "oblique 0deg 10deg",
fontDisplay: "swap",
fontWeight: "100 900",
src: `url(${interLatinExtVarFullNormalWoff2}) format("woff2")`,
unicodeRange: "U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff",
},
];
],
};
export default Inter;

58
lib/styles/fonts/roboto-mono.ts
View File

@@ -7,17 +7,21 @@ import robotoMonoLatin500NormalWoff from "@fontsource/roboto-mono/files/roboto-m
import robotoMonoLatin500NormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-500-normal.woff2";
import robotoMonoLatin700NormalWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-700-normal.woff";
import robotoMonoLatin700NormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-700-normal.woff2";
import robotoMonoLatin400ItalicWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-400-italic.woff";
import robotoMonoLatin400ItalicWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-400-italic.woff2";
import robotoMonoLatin500ItalicWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-500-italic.woff";
import robotoMonoLatin500ItalicWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-500-italic.woff2";
import robotoMonoLatin700ItalicWoff from "@fontsource/roboto-mono/files/roboto-mono-latin-700-italic.woff";
import robotoMonoLatin700ItalicWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-700-italic.woff2";
// Variable
import robotoMonoLatinVarWghtOnlyNormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-variable-wghtOnly-normal.woff2";
import robotoMonoLatinExtVarWghtOnlyNormalWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-ext-variable-wghtOnly-normal.woff2";
import robotoMonoLatinVarWghtOnlyItalicWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-variable-wghtOnly-italic.woff2";
import robotoMonoLatinExtVarWghtOnlyItalicWoff2 from "@fontsource/roboto-mono/files/roboto-mono-latin-ext-variable-wghtOnly-italic.woff2";
// re-export hashed URL of the most prominent font so we can preload it
export { robotoMonoLatinVarWghtOnlyNormalWoff2 as preloadUrl };
export const RobotoMono = [
const RobotoMono = {
// re-export hashed URL of the most prominent file so we can preload it in head:
preloadUrl: robotoMonoLatinVarWghtOnlyNormalWoff2,
family: [
{
fontFamily: "Roboto Mono",
fontStyle: "normal",
@@ -40,21 +44,32 @@ export const RobotoMono = [
src: `url(${robotoMonoLatin700NormalWoff2}) format("woff2"), url(${robotoMonoLatin700NormalWoff}) format("woff")`,
},
{
fontFamily: "Roboto Mono var",
fontStyle: "normal",
fontFamily: "Roboto Mono",
fontStyle: "italic",
fontDisplay: "swap",
fontWeight: "100 700",
src: `url(${robotoMonoLatinVarWghtOnlyNormalWoff2}) format("woff2")`,
unicodeRange:
"U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd",
fontWeight: 400,
src: `url(${robotoMonoLatin400ItalicWoff2}) format("woff2"), url(${robotoMonoLatin400ItalicWoff}) format("woff")`,
},
{
fontFamily: "Roboto Mono",
fontStyle: "italic",
fontDisplay: "swap",
fontWeight: 500,
src: `url(${robotoMonoLatin500ItalicWoff2}) format("woff2"), url(${robotoMonoLatin500ItalicWoff}) format("woff")`,
},
{
fontFamily: "Roboto Mono",
fontStyle: "italic",
fontDisplay: "swap",
fontWeight: 700,
src: `url(${robotoMonoLatin700ItalicWoff2}) format("woff2"), url(${robotoMonoLatin700ItalicWoff}) format("woff")`,
},
{
fontFamily: "Roboto Mono var",
fontStyle: "normal",
fontDisplay: "swap",
fontWeight: "100 700",
src: `url(${robotoMonoLatinExtVarWghtOnlyNormalWoff2}) format("woff2")`,
unicodeRange: "U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff",
src: `url(${robotoMonoLatinVarWghtOnlyNormalWoff2}) format("woff2")`,
},
{
fontFamily: "Roboto Mono var",
@@ -62,15 +77,8 @@ export const RobotoMono = [
fontDisplay: "swap",
fontWeight: "100 700",
src: `url(${robotoMonoLatinVarWghtOnlyItalicWoff2}) format("woff2")`,
unicodeRange:
"U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd",
},
{
fontFamily: "Roboto Mono var",
fontStyle: "italic",
fontDisplay: "swap",
fontWeight: "100 700",
src: `url(${robotoMonoLatinExtVarWghtOnlyItalicWoff2}) format("woff2")`,
unicodeRange: "U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff",
},
];
],
};
export default RobotoMono;

5
lib/styles/helpers/normalize.ts
View File

@@ -1,7 +1,8 @@
// @sindresorhus's modern-normalize.css converted to a JS object, with a bit of cruft removed:
// https://github.com/sindresorhus/modern-normalize/blob/b59ec0d3d8654cbb6843bc9ea45aef5f1d680108/modern-normalize.css
// note: re-defining any of these selector(s) anywhere else will override *every* property for them defined here.
export const normalizeCss = {
const normalizeCss = {
"*, ::before, ::after": {
boxSizing: "border-box",
},
@@ -85,3 +86,5 @@ export const normalizeCss = {
display: "list-item",
},
};
export default normalizeCss;

16
lib/styles/stitches.config.ts
View File

@@ -2,12 +2,12 @@ import { createStitches, defaultThemeMap } from "@stitches/react";
import hex2rgba from "./helpers/hex-to-rgba";
// modified modern-normalize.css in object form
import { normalizeCss } from "./helpers/normalize";
import normalizeCss from "./helpers/normalize";
// web fonts
import { Inter, preloadUrl as interPreloadUrl } from "./fonts/inter";
import { RobotoMono, preloadUrl as robotoMonoPreloadUrl } from "./fonts/roboto-mono";
import { ComicNeue } from "./fonts/comic-neue";
import Inter from "./fonts/inter";
import RobotoMono from "./fonts/roboto-mono";
import ComicNeue from "./fonts/comic-neue";
export const { styled, css, getCssText, globalCss, keyframes, theme, createTheme } = createStitches({
theme: {
@@ -120,7 +120,7 @@ export const globalStyles = globalCss({
...normalizeCss,
// @ts-ignore
"@font-face": [...Inter, ...RobotoMono, ...ComicNeue],
"@font-face": [...Inter.family, ...RobotoMono.family, ...ComicNeue.family],
body: {
margin: 0,
@@ -176,9 +176,9 @@ export const globalStyles = globalCss({
});
// re-export hashed URLs of the most important variable fonts so we can preload them in ../../pages/_document.tsx
export const preloads = {
export const preloadUrls = {
fonts: {
InterVar: interPreloadUrl,
RobotoMonoVar: robotoMonoPreloadUrl,
InterVar: Inter.preloadUrl,
RobotoMonoVar: RobotoMono.preloadUrl,
},
};

6
pages/_app.tsx
View File

@@ -48,12 +48,12 @@ const App = ({ Component, pageProps }: AppProps) => {
};
}, []); // eslint-disable-line react-hooks/exhaustive-deps
// allow layout overrides per-page, but default to plain `<Layout />`
const getLayout = Component.getLayout || ((page) => <Layout>{page}</Layout>);
// inject body styles defined in ../lib/styles/stitches.config.ts
globalStyles();
// allow layout overrides per-page, but default to plain `<Layout />`
const getLayout = Component.getLayout || ((page) => <Layout>{page}</Layout>);
return (
<>
{/* all SEO config is in ../lib/config/seo.ts except for canonical URLs, which require access to next router */}

12
pages/_document.tsx
View File

@@ -1,5 +1,5 @@
import { Html, Head, Main, NextScript } from "next/document";
import { getCssText, preloads } from "../lib/styles/stitches.config";
import { getCssText, preloadUrls } from "../lib/styles/stitches.config";
import * as config from "../lib/config";
// https://nextjs.org/docs/advanced-features/custom-document
@@ -8,8 +8,14 @@ const Document = () => {
<Html lang={config.siteLocale?.replace("_", "-")}>
<Head>
{/* static asset preloads */}
<link rel="preload" as="font" type="font/woff2" href={preloads.fonts.InterVar} crossOrigin="anonymous" />
<link rel="preload" as="font" type="font/woff2" href={preloads.fonts.RobotoMonoVar} crossOrigin="anonymous" />
<link rel="preload" as="font" type="font/woff2" href={preloadUrls.fonts.InterVar} crossOrigin="anonymous" />
<link
rel="preload"
as="font"
type="font/woff2"
href={preloadUrls.fonts.RobotoMonoVar}
crossOrigin="anonymous"
/>
{/* stitches SSR: https://stitches.dev/blog/using-nextjs-with-stitches#step-3-ssr */}
<style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />