fix font css vars

2025-04-25 23:05:21 -04:00 · 2025-04-10 20:23:34 -04:00 · 2025-04-10 20:23:34 -04:00 · eb84ec37ee
commit eb84ec37ee
parent a63098b150
13 changed files with 71 additions and 82 deletions
--- a/.env.example
+++ b/.env.example
@ -6,13 +6,13 @@
 GITHUB_TOKEN=
 KV_REST_API_TOKEN=
 KV_REST_API_URL=
+RESEND_API_KEY=
+RESEND_FROM_EMAIL=
+RESEND_TO_EMAIL=
+TURNSTILE_SECRET_KEY=
 NEXT_PUBLIC_GISCUS_CATEGORY_ID=
 NEXT_PUBLIC_GISCUS_REPO_ID=
 NEXT_PUBLIC_ONION_DOMAIN=
 NEXT_PUBLIC_TURNSTILE_SITE_KEY=
 NEXT_PUBLIC_UMAMI_URL=
 NEXT_PUBLIC_UMAMI_WEBSITE_ID=
-RESEND_API_KEY=
-RESEND_FROM_EMAIL=
-RESEND_TO_EMAIL=
-TURNSTILE_SECRET_KEY=
--- a/app/fonts.ts
+++ b/app/fonts.ts
@ -11,6 +11,7 @@ export const GeistSans = GeistSansLoader({
    "system-ui",
    "sans-serif",
  ],
+  variable: "--fonts-sans",
  preload: true,
 });

@ -28,5 +29,6 @@ export const GeistMono = GeistMonoLoader({
    "monospace",
  ],
  adjustFontFallback: false,
+  variable: "--fonts-mono",
  preload: true,
 });
--- a/app/global.css
+++ b/app/global.css
@ -1,4 +1,7 @@
-/*! Adapted from modern-normalize.css | MIT License | https://github.com/sindresorhus/modern-normalize */
+/*!
+ * modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize/tree/v3.0.1
+ */
+
 *,
 ::before,
 ::after {
@ -15,6 +18,7 @@ html {
 body {
  margin: 0;
  font-family: var(--fonts-sans);
+  background-color: var(--colors-background-inner);
 }

 code,
--- a/app/layout.module.css
+++ b/app/layout.module.css
@ -1,7 +1,3 @@
-.body {
-  background-color: var(--colors-background-inner);
-}
-
 .layout {
  display: flex;
  flex-direction: column;
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -1,11 +1,11 @@
 import { JsonLd } from "react-schemaorg";
+import clsx from "clsx";
 import Analytics from "./analytics";
 import { ThemeProvider, ThemeScript } from "../contexts/ThemeContext";
 import Header from "../components/Header";
 import Footer from "../components/Footer";
-import { SkipToContentLink, SkipToContentTarget } from "../components/SkipToContent";
+import { SkipNavLink, SkipNavTarget } from "../components/SkipNav";
 import { defaultMetadata } from "../lib/helpers/metadata";
-import { setRootCssVariables } from "../lib/helpers/styles";
 import * as config from "../lib/config";
 import { BASE_URL, MAX_WIDTH } from "../lib/config/constants";
 import type { Metadata } from "next";
@ -69,25 +69,21 @@ const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
        />
      </head>

-      <body className={styles.body}>
-        <style
-          precedence={styles.layout}
-          {...setRootCssVariables({
-            "fonts-sans": GeistSans.style.fontFamily,
-            "fonts-mono": GeistMono.style.fontFamily,
-            "max-width": `${MAX_WIDTH}px`,
-          })}
-        />
-
+      <body
+        className={clsx(GeistSans.variable, GeistMono.variable)}
+        style={{ ["--max-width" as string]: `${MAX_WIDTH}px` }}
+      >
        <ThemeProvider>
-          <SkipToContentLink />
+          <SkipNavLink />

          <div className={styles.layout}>
            <Header />

            <main className={styles.default}>
-              <SkipToContentTarget />
-              <div className={styles.container}>{children}</div>
+              <div className={styles.container}>
+                <SkipNavTarget />
+                {children}
+              </div>
            </main>

            <Footer />
--- a/components/Heading/Heading.module.css
+++ b/components/Heading/Heading.module.css
@ -3,8 +3,10 @@
  margin-bottom: 0.5em;
  line-height: 1.5;

-  /* offset (approximately) with sticky header so jumped-to content isn't hiding behind it.
-     note: use rem so it isn't based on the heading's font size. */
+  /*
+   * offset (approximately) with sticky header so jumped-to content isn't hiding behind it.
+   * note: use rem so it isn't based on the heading's font size.
+   */
  scroll-margin-top: 5.5rem;
 }

--- a/components/SkipToContent/SkipToContent.module.css
+++ b/components/SkipToContent/SkipToContent.module.css
@ -1,5 +1,6 @@
-/* accessible invisibility stuff pulled from @reach/skip-nav:
-https://github.com/reach/reach-ui/blob/main/packages/skip-nav/styles.css */
+/*
+ * Pulled from @reach/skip-nav: https://github.com/reach/reach-ui/blob/main/packages/skip-nav/styles.css
+ */

 .hidden {
  border: 0;
--- a/components/SkipToContent/SkipToContent.tsx
+++ b/components/SkipToContent/SkipToContent.tsx
@ -1,8 +1,8 @@
-import styles from "./SkipToContent.module.css";
+import styles from "./SkipNav.module.css";

 const skipNavId = "skip-nav";

-export const SkipToContentLink = () => {
+export const SkipNavLink = () => {
  return (
    <a href={`#${skipNavId}`} tabIndex={0} className={styles.hidden}>
      Skip to content
@ -10,8 +10,8 @@ export const SkipToContentLink = () => {
  );
 };

-export const SkipToContentTarget = () => {
+export const SkipNavTarget = () => {
  return <div id={skipNavId} />;
 };

-export default SkipToContentLink;
+export default SkipNavLink;
--- a/components/SkipNav/index.ts
+++ b/components/SkipNav/index.ts
@ -0,0 +1,2 @@
+export * from "./SkipNav";
+export { default } from "./SkipNav";
--- a/components/SkipToContent/index.ts
+++ b/components/SkipToContent/index.ts
@ -1,2 +0,0 @@
-export * from "./SkipToContent";
-export { default } from "./SkipToContent";
--- a/instrumentation.ts
+++ b/instrumentation.ts
@ -1,7 +1,9 @@
 import { registerOTel } from "@vercel/otel";

 export const register = () => {
-  registerOTel({
-    serviceName: "jarvis",
-  });
+  if (process.env.VERCEL_ENV === "production") {
+    registerOTel({
+      serviceName: "jarvis",
+    });
+  }
 };
--- a/lib/helpers/styles.ts
+++ b/lib/helpers/styles.ts
@ -1,14 +0,0 @@
-import hash from "@emotion/hash";
-
-// a little hacky-hack to have react combine all of these css var declarations into a single <style> tag up top. see:
-// https://react.dev/reference/react-dom/components/style#rendering-an-inline-css-stylesheet
-export const setRootCssVariables = (vars: Record<string, string>) => {
-  const root = Object.entries(vars)
-    .map(([key, value]) => `--${key}:${value}`)
-    .join(";");
-
-  return {
-    href: hash(root),
-    dangerouslySetInnerHTML: { __html: `:root{${root}}` },
-  };
-};
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -859,20 +859,20 @@ packages:
    resolution: {integrity: sha512-lp4qAiMTD4sNWW4DbKLBkfiMZ4jbAboJIGOQr5DvciMRI494OapieI9qiODpOt0XBr1LjIDy1xAGAnVs5supTA==}
    engines: {node: '>=14'}

-  '@opentelemetry/semantic-conventions@1.30.0':
-    resolution: {integrity: sha512-4VlGgo32k2EQ2wcCY3vEU28A0O13aOtHz3Xt2/2U5FAh9EfhD6t6DqL5Z6yAnRCntbTFDU4YfbpyzSlHNWycPw==}
+  '@opentelemetry/semantic-conventions@1.31.0':
+    resolution: {integrity: sha512-cYJeP+6qN0UnBv1r09hXl0YorB8kXHv61BC0NUlBA8vxrylZ4/C8lnva3gd1E8n33DNYSaiGW+DuGoSt0QQ7Dw==}
    engines: {node: '>=14'}

  '@pkgjs/parseargs@0.11.0':
    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
    engines: {node: '>=14'}

-  '@pkgr/core@0.2.1':
-    resolution: {integrity: sha512-VzgHzGblFmUeBmmrk55zPyrQIArQN4vujc9shWytaPdB3P7qhi0cpaiKIr7tlCmFv2lYUwnLospIqjL9ZSAhhg==}
+  '@pkgr/core@0.2.2':
+    resolution: {integrity: sha512-25L86MyPvnlQoX2MTIV2OiUcb6vJ6aRbFa9pbwByn95INKD5mFH2smgjDhq+fwJoqAgvgbdJLj6Tz7V9X5CFAQ==}
    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}

-  '@polka/url@1.0.0-next.28':
-    resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==}
+  '@polka/url@1.0.0-next.29':
+    resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}

  '@react-email/render@1.0.5':
    resolution: {integrity: sha512-CA69HYXPk21HhtAXATIr+9JJwpDNmAFCvdMUjWmeoD1+KhJ9NAxusMRxKNeibdZdslmq3edaeOKGbdQ9qjK8LQ==}
@ -1337,8 +1337,8 @@ packages:
    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
    engines: {node: '>=6'}

-  caniuse-lite@1.0.30001712:
-    resolution: {integrity: sha512-MBqPpGYYdQ7/hfKiet9SCI+nmN5/hp4ZzveOJubl5DTAMa5oggjAuoi0Z4onBpKPFI2ePGnQuQIzF3VxDjDJig==}
+  caniuse-lite@1.0.30001713:
+    resolution: {integrity: sha512-wCIWIg+A4Xr7NfhTuHdX+/FKh3+Op3LBbSp2N5Pfx6T/LhdQy3GTyoTg48BReaW/MyMNZAkTadsBtai3ldWK0Q==}

  ccount@2.0.1:
    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@ -1574,8 +1574,8 @@ packages:
  eastasianwidth@0.2.0:
    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}

-  electron-to-chromium@1.5.134:
-    resolution: {integrity: sha512-zSwzrLg3jNP3bwsLqWHmS5z2nIOQ5ngMnfMZOWWtXnqqQkPVyOipxK98w+1beLw1TB+EImPNcG8wVP/cLVs2Og==}
+  electron-to-chromium@1.5.135:
+    resolution: {integrity: sha512-8gXUdEmvb+WCaYUhA0Svr08uSeRjM2w3x5uHOc1QbaEVzJXB8rgm5eptieXzyKoVEtinLvW6MtTcurA65PeS1Q==}

  emoji-regex-xs@1.0.0:
    resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==}
@ -2131,8 +2131,8 @@ packages:
  hermes-parser@0.25.1:
    resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}

-  hookified@1.8.1:
-    resolution: {integrity: sha512-GrO2l93P8xCWBSTBX9l2BxI78VU/MAAYag+pG8curS3aBGy0++ZlxrQ7PdUOUVMbn5BwkGb6+eRrnf43ipnFEA==}
+  hookified@1.8.2:
+    resolution: {integrity: sha512-5nZbBNP44sFCDjSoB//0N7m508APCgbQ4mGGo1KJGBYyCKNHfry1Pvd0JVHZIxjdnqn8nFRBAN/eFB6Rk/4w5w==}

  hosted-git-info@7.0.2:
    resolution: {integrity: sha512-puUZAUKT5m8Zzvs72XWy3HtvVbTWljRE66cP60bxJzAqf2DgICo7lYTY2IHUmLnNpjYvw5bvmoHvPc0QO2a62w==}
@ -2465,8 +2465,8 @@ packages:
    engines: {node: '>=18.12.0'}
    hasBin: true

-  listr2@8.2.5:
-    resolution: {integrity: sha512-iyAZCeyD+c1gPyE9qpFu8af0Y+MRtmKOncdGoA2S5EY8iFq99dmmvkNnHiWo+pj0s7yH7l3KPIgee77tKpXPWQ==}
+  listr2@8.3.2:
+    resolution: {integrity: sha512-vsBzcU4oE+v0lj4FhVLzr9dBTv4/fHIa57l+GCwovP8MoFNZJTOhGU8PXd4v2VJCbECAaijBiHntiekFMLvo0g==}
    engines: {node: '>=18.0.0'}

  lit-element@4.1.1:
@ -4450,7 +4450,7 @@ snapshots:
  '@opentelemetry/core@2.0.0(@opentelemetry/api@1.9.0)':
    dependencies:
      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/semantic-conventions': 1.30.0
+      '@opentelemetry/semantic-conventions': 1.31.0

  '@opentelemetry/instrumentation@0.200.0(@opentelemetry/api@1.9.0)':
    dependencies:
@ -4473,7 +4473,7 @@ snapshots:
    dependencies:
      '@opentelemetry/api': 1.9.0
      '@opentelemetry/core': 2.0.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.30.0
+      '@opentelemetry/semantic-conventions': 1.31.0

  '@opentelemetry/sdk-logs@0.200.0(@opentelemetry/api@1.9.0)':
    dependencies:
@ -4497,14 +4497,14 @@ snapshots:

  '@opentelemetry/semantic-conventions@1.28.0': {}

-  '@opentelemetry/semantic-conventions@1.30.0': {}
+  '@opentelemetry/semantic-conventions@1.31.0': {}

  '@pkgjs/parseargs@0.11.0':
    optional: true

-  '@pkgr/core@0.2.1': {}
+  '@pkgr/core@0.2.2': {}

-  '@polka/url@1.0.0-next.28': {}
+  '@polka/url@1.0.0-next.29': {}

  '@react-email/render@1.0.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
    dependencies:
@ -4945,8 +4945,8 @@ snapshots:

  browserslist@4.24.4:
    dependencies:
-      caniuse-lite: 1.0.30001712
-      electron-to-chromium: 1.5.134
+      caniuse-lite: 1.0.30001713
+      electron-to-chromium: 1.5.135
      node-releases: 2.0.19
      update-browserslist-db: 1.1.3(browserslist@4.24.4)

@ -4963,7 +4963,7 @@ snapshots:

  cacheable@1.8.10:
    dependencies:
-      hookified: 1.8.1
+      hookified: 1.8.2
      keyv: 5.3.2

  call-bind-apply-helpers@1.0.2:
@ -4985,7 +4985,7 @@ snapshots:

  callsites@3.1.0: {}

-  caniuse-lite@1.0.30001712: {}
+  caniuse-lite@1.0.30001713: {}

  ccount@2.0.1: {}

@ -5199,7 +5199,7 @@ snapshots:

  eastasianwidth@0.2.0: {}

-  electron-to-chromium@1.5.134: {}
+  electron-to-chromium@1.5.135: {}

  emoji-regex-xs@1.0.0: {}

@ -5732,7 +5732,7 @@ snapshots:
    dependencies:
      cacheable: 1.8.10
      flatted: 3.3.3
-      hookified: 1.8.1
+      hookified: 1.8.2

  flatted@3.3.3: {}

@ -6025,7 +6025,7 @@ snapshots:
    dependencies:
      hermes-estree: 0.25.1

-  hookified@1.8.1: {}
+  hookified@1.8.2: {}

  hosted-git-info@7.0.2:
    dependencies:
@ -6331,7 +6331,7 @@ snapshots:
      debug: 4.4.0
      execa: 8.0.1
      lilconfig: 3.1.3
-      listr2: 8.2.5
+      listr2: 8.3.2
      micromatch: 4.0.8
      pidtree: 0.6.0
      string-argv: 0.3.2
@ -6339,7 +6339,7 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  listr2@8.2.5:
+  listr2@8.3.2:
    dependencies:
      cli-truncate: 4.0.0
      colorette: 2.0.20
@ -6908,7 +6908,7 @@ snapshots:
      '@swc/counter': 0.1.3
      '@swc/helpers': 0.5.15
      busboy: 1.6.0
-      caniuse-lite: 1.0.30001712
+      caniuse-lite: 1.0.30001713
      postcss: 8.4.31
      react: 19.1.0
      react-dom: 19.1.0(react@19.1.0)
@ -7676,7 +7676,7 @@ snapshots:

  sirv@2.0.4:
    dependencies:
-      '@polka/url': 1.0.0-next.28
+      '@polka/url': 1.0.0-next.29
      mrmime: 2.0.1
      totalist: 3.0.1

@ -7937,7 +7937,7 @@ snapshots:

  synckit@0.11.3:
    dependencies:
-      '@pkgr/core': 0.2.1
+      '@pkgr/core': 0.2.2
      tslib: 2.8.1

  table@6.9.0: