feat: change main font to Schibsted Grotesk, adjust sizes

app/(home)/page.tsx

@@ -24,18 +24,18 @@ const projects: readonly Project[] = [
     tagline: "Domain intelligence made easy",
     icon: domainstackIcon,
   },
-  {
-    name: "Stanza",
-    url: "https://stanza.tools",
-    tagline: "shadcn/ui for infrastructure",
-    icon: stanzaIcon,
-  },
   {
     name: "Sofa",
     url: "https://sofa.watch",
     tagline: "Self-hosted movie & TV show tracker",
     icon: sofaIcon,
   },
+  {
+    name: "Stanza",
+    url: "https://stanza.tools",
+    tagline: "shadcn/ui for infrastructure",
+    icon: stanzaIcon,
+  },
   {
     name: "Versioneer",
     url: "https://versioneer.app",
@@ -58,7 +58,7 @@ const projects: readonly Project[] = [
 
 const Page = () => (
   <FadeTransition>
-    <h1 className="text-lg font-medium tracking-tight">
+    <h1 className="text-lg font-medium">
       Hi there! I&rsquo;m Jake.{" "}
       <span className="ml-0.5 inline-block origin-[65%_80%] text-[1.2rem] motion-safe:animate-wave">
         👋
@@ -66,7 +66,7 @@ const Page = () => (
     </h1>
 
     <div className="markdown">
-      <p className="text-sm leading-normal tracking-[-0.0125em]">
+      <p className="text-sm leading-normal">
         I&rsquo;m a developer based in the Boston area working on some cool stuff:
       </p>
     </div>

app/globals.css

@@ -7,8 +7,7 @@
 @custom-variant dark (&:where(.dark *));
 
 @theme inline {
-  --font-sans: var(--font-inter);
-  --font-sans--font-feature-settings: "rlig" 1, "calt" 0;
+  --font-sans: var(--font-schibsted-grotesk);
   --font-mono: var(--font-jetbrains-mono);
   --font-mono--font-feature-settings: "liga" 0;
   --radius-sm: calc(var(--radius) - 4px);

app/layout.tsx

@@ -8,7 +8,7 @@ import { Providers } from "@/components/providers";
 import { Toaster } from "@/components/ui/toast";
 import authorConfig from "@/lib/config/author";
 import siteConfig from "@/lib/config/site";
-import { Inter, JetBrainsMono } from "@/lib/fonts";
+import { SchibstedGrotesk, JetBrainsMono } from "@/lib/fonts";
 import { defaultMetadata } from "@/lib/metadata";
 import { cn } from "@/lib/utils";
 
@@ -19,7 +19,7 @@ export const metadata = defaultMetadata;
 const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => (
   <html
     lang={process.env.NEXT_PUBLIC_SITE_LOCALE}
-    className={cn(Inter.variable, JetBrainsMono.variable)}
+    className={cn(SchibstedGrotesk.variable, JetBrainsMono.variable)}
     suppressHydrationWarning
   >
     <head>
@@ -33,7 +33,7 @@ const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => (
           image: [`${process.env.NEXT_PUBLIC_BASE_URL}/opengraph-image.jpg`],
           sameAs: [
             process.env.NEXT_PUBLIC_BASE_URL!,
-            `https://${authorConfig.social?.mastodon}`,
+            authorConfig.social?.mastodon?.replace(/^@([^@]+)@(.+)$/, "https://$2/@$1"),
             `https://github.com/${authorConfig.social?.github}`,
             `https://bsky.app/profile/${authorConfig.social?.bluesky}`,
             `https://twitter.com/${authorConfig.social?.twitter}`,

app/notes/[slug]/page.tsx

@@ -18,6 +18,8 @@ import { getFrontMatter, getPost, getSlugs, POSTS_DIR } from "@/lib/posts";
 
 import { size as ogImageSize } from "./opengraph-image";
 
+export const instant = false;
+
 export const generateStaticParams = () => {
   const slugs = getSlugs();
 

app/notes/page.tsx

@@ -58,7 +58,7 @@ const PostsList = () => {
   Object.entries(postsByYear).forEach(([year, yearPosts]) => {
     sections.push(
       <section className="my-8 first-of-type:mt-0 last-of-type:mb-0" key={year}>
-        <h2 id={year} className="mt-0 mb-4 text-xl font-semibold tracking-tight">
+        <h2 id={year} className="mt-0 mb-4 text-xl font-semibold">
           {year}
         </h2>
         <ul className="space-y-4">

app/projects/page.tsx

@@ -90,7 +90,7 @@ const Page = async () => {
                 </p>
               )}
 
-              <div className="flex flex-wrap gap-x-4 text-[11px] leading-loose whitespace-nowrap">
+              <div className="flex flex-wrap gap-x-4 text-[0.7rem] leading-loose whitespace-nowrap">
                 {repo?.primaryLanguage && (
                   <div className="inline-flex flex-nowrap items-center gap-1.5 text-muted-foreground">
                     {repo?.primaryLanguage.color && (

components/comments/comments.tsx

@@ -51,7 +51,7 @@ const Comments = async ({ slug }: { slug: string }) => {
           ))}
         </div>
       ) : (
-        <div className="py-8 text-center text-lg font-medium tracking-tight text-foreground/80">
+        <div className="py-8 text-center text-lg font-medium text-foreground/80">
           Be the first to comment!
         </div>
       )}

components/layout/header.tsx

@@ -93,7 +93,7 @@ const contactLinks = [
   {
     label: "Mastodon",
     value: authorConfig.social.mastodon,
-    href: `https://${authorConfig.social.mastodon}`,
+    href: authorConfig.social.mastodon.replace(/^@([^@]+)@(.+)$/, "https://$2/@$1"),
     Icon: (props: React.SVGProps<SVGSVGElement>) => (
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -317,12 +317,7 @@ const Header = ({ className }: { className?: string }) => {
               quality={75}
               priority
             />
-            <span
-              className={cn(
-                "text-[17.5px] font-medium tracking-[-0.0375em] whitespace-nowrap",
-                "max-md:sr-only",
-              )}
-            >
+            <span className={cn("text-[17.5px] font-medium whitespace-nowrap", "max-md:sr-only")}>
               {siteConfig.name}
             </span>
           </Link>

components/layout/page-title.tsx

@@ -11,10 +11,7 @@ const PageTitle = ({
   canonical: string;
 }) => (
   <h1
-    className={cn(
-      "not-prose mt-0 mb-6 text-left text-2xl font-medium tracking-tight lowercase",
-      className,
-    )}
+    className={cn("not-prose mt-0 mb-6 text-left text-2xl font-medium lowercase", className)}
     {...rest}
   >
     <Link

components/post-stats.tsx

@@ -72,7 +72,7 @@ const PostStats = ({ slug }: { slug: string }) => {
       {viewCount > 0 && (
         <Badge
           variant="secondary"
-          className="gap-[5px] text-[11px] text-foreground/80 tabular-nums"
+          className="gap-[5px] text-xs font-medium tracking-wide text-foreground/80"
         >
           <IconEye className="text-foreground/65" aria-hidden="true" />
           {numberFormatter.format(viewCount)}
@@ -82,7 +82,7 @@ const PostStats = ({ slug }: { slug: string }) => {
       {commentCount > 0 && (
         <Badge
           variant="secondary"
-          className="gap-[5px] text-[11px] text-foreground/80 tabular-nums"
+          className="gap-[5px] text-xs font-medium tracking-wide text-foreground/80"
           render={
             <Link
               href={`/${slug}#comments`}

lib/config/author.ts

@@ -8,7 +8,7 @@ const authorConfig = {
     medium: "jakejarvis",
     linkedin: "jakejarvis",
     instagram: "jakejarvis",
-    mastodon: "fediverse.jarv.is/@jake",
+    mastodon: "@jakejarvis@mastodon.social",
     bluesky: "jarv.is",
   },
 } as const;

lib/fonts.ts

@@ -3,14 +3,14 @@
 
 import {
   Comic_Neue as ComicNeueLoader,
-  Inter as InterLoader,
   JetBrains_Mono as JetBrainsMonoLoader,
+  Schibsted_Grotesk as SchibstedGroteskLoader,
 } from "next/font/google";
 
-export const Inter = InterLoader({
+export const SchibstedGrotesk = SchibstedGroteskLoader({
   subsets: ["latin"],
   display: "swap",
-  variable: "--font-inter",
+  variable: "--font-schibsted-grotesk",
   preload: true,
 });