jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2026-06-05 19:15:30 -04:00
Code Issues Activity

refactor: update font imports and variables

Browse Source 
- Replaced GeistSans and GeistMono with Inter and JetBrainsMono in globals.css and layout.tsx.
- Updated font variable names to reflect the new font choices in fonts.ts.
This commit is contained in:
Jake Jarvis
2026-02-19 13:36:13 -05:00
parent eecf93e7cc
commit 4858c8928c
10 changed files with 729 additions and 878 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+2 -2
View File
@@ -6,9 +6,9 @@
@custom-variant dark (&:where(.dark *));
@theme inline {
--font-sans: var(--font-geist-sans);
--font-sans: var(--font-inter);
--font-sans--font-feature-settings: "rlig" 1, "calt" 0;
--font-mono: var(--font-geist-mono);
--font-mono: var(--font-jetbrains-mono);
--font-mono--font-feature-settings: "liga" 0;
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
app/layout.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ import { Footer } from "@/components/layout/footer";
import { Toaster } from "@/components/ui/sonner";
import { Analytics } from "@/app/analytics";
import { defaultMetadata } from "@/lib/metadata";
import { GeistSans, GeistMono } from "@/lib/fonts";
import { Inter, JetBrainsMono } from "@/lib/fonts";
import siteConfig from "@/lib/config/site";
import authorConfig from "@/lib/config/author";
import type { Person, WebSite } from "schema-dts";
@@ -20,7 +20,7 @@ const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
return (
<html
lang={env.NEXT_PUBLIC_SITE_LOCALE}
className={`${GeistSans.variable} ${GeistMono.variable}`}
className={`${Inter.variable} ${JetBrainsMono.variable}`}
suppressHydrationWarning
>
<head>
app/notes/[slug]/opengraph-image.tsx
+11 -16
View File
@@ -5,6 +5,7 @@ import { ImageResponse } from "next/og";
import { notFound } from "next/navigation";
import { getSlugs, getFrontMatter, POSTS_DIR } from "@/lib/posts";
import siteConfig from "@/lib/config/site";
import { loadGoogleFont } from "@/lib/og-utils";
export const contentType = "image/png";
export const size = {
@@ -53,16 +54,14 @@ const OpenGraphImage = async ({ params }: { params: Promise<{ slug: string }> })
// get the post's title and image filename from its frontmatter
const frontmatter = await getFrontMatter(slug);
const [postImg, avatarImg, fontRegular, fontSemiBold] = await Promise.all([
// IMPORTANT: include these exact paths in next.config.ts under "outputFileTracingIncludes"
const [postImg, avatarImg] = await Promise.all([
frontmatter!.image ? getLocalImage(`${POSTS_DIR}/${slug}/${frontmatter!.image}`) : null,
// IMPORTANT: include these exact paths in next.config.ts under "outputFileTracingIncludes"
getLocalImage("app/avatar.jpg"),
// load the Geist font directly from its npm package
fs.promises.readFile(path.join(process.cwd(), "node_modules/geist/dist/fonts/geist-sans/Geist-Regular.ttf")),
fs.promises.readFile(path.join(process.cwd(), "node_modules/geist/dist/fonts/geist-sans/Geist-SemiBold.ttf")),
]);
const [fontRegular, fontSemibold] = await Promise.all([loadGoogleFont("Inter", 400), loadGoogleFont("Inter", 600)]);
// template is HEAVILY inspired by https://og-new.clerkstage.dev/
return new ImageResponse(
<div
@@ -138,8 +137,7 @@ const OpenGraphImage = async ({ params }: { params: Promise<{ slug: string }> })
<span
style={{
fontSize: "1.825rem",
fontFamily: "Geist-SemiBold",
fontWeight: 700,
fontWeight: 600,
lineHeight: "3rem",
letterSpacing: "-0.015em",
marginLeft: "0.75rem",
@@ -153,8 +151,7 @@ const OpenGraphImage = async ({ params }: { params: Promise<{ slug: string }> })
style={{
display: "flex",
flexGrow: 0,
fontFamily: "Geist-SemiBold",
fontWeight: 700,
fontWeight: 600,
fontSize: "48px",
color: "#030712",
letterSpacing: "-0.025em",
@@ -172,7 +169,6 @@ const OpenGraphImage = async ({ params }: { params: Promise<{ slug: string }> })
>
<span
style={{
fontFamily: "Geist-Regular",
fontWeight: 400,
fontSize: "20px",
color: "#030712",
@@ -193,7 +189,6 @@ const OpenGraphImage = async ({ params }: { params: Promise<{ slug: string }> })
style={{
display: "flex",
flexGrow: 0,
fontFamily: "Geist-Regular",
fontWeight: 400,
fontSize: "24px",
color: "#030712",
@@ -235,16 +230,16 @@ const OpenGraphImage = async ({ params }: { params: Promise<{ slug: string }> })
...size,
fonts: [
{
name: "Geist-Regular",
name: "Inter",
data: fontRegular,
style: "normal",
weight: 400,
},
{
name: "Geist-SemiBold",
data: fontSemiBold,
name: "Inter",
data: fontSemibold,
style: "normal",
weight: 700,
weight: 600,
},
],
}