Playfair font + self-hosting, author pages, socials, privacy, CTA polish

package.json

@@ -39,9 +39,10 @@
     "@blocknote/core": "^0.51.4",
     "@blocknote/mantine": "^0.51.4",
     "@blocknote/react": "^0.51.4",
-    "@fontsource/fraunces": "^5.2.9",
-    "@fontsource/instrument-serif": "^5.2.8",
+    "@fontsource/hanken-grotesk": "^5.2.8",
     "@fontsource/jetbrains-mono": "^5.2.8",
+    "@fontsource/playfair-display": "^5.2.8",
+    "@fontsource/source-serif-4": "^5.2.9",
     "@resvg/resvg-js": "^2.6.2",
     "astro": "^5.1.0",
     "jszip": "^3.10.1",

src/components/Footer.astro

@@ -1,34 +1,14 @@
 ---
 import { SITE, SOCIALS } from '@/lib/site';
+import { SOCIAL_ICONS } from '@/lib/socialIcons';
 const currentYear = new Date().getFullYear();
 
-const socialIcons = [
-  {
-    key: 'discord',
-    label: 'Discord',
-    href: SOCIALS.discord,
-    // Simple Icons — Discord
-    path: 'M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418Z',
-  },
-  {
-    key: 'github',
-    label: 'GitHub',
-    href: SOCIALS.github,
-    path: 'M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12',
-  },
-  {
-    key: 'twitter',
-    label: 'X (Twitter)',
-    href: SOCIALS.twitter,
-    path: 'M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z',
-  },
-  {
-    key: 'linkedin',
-    label: 'LinkedIn',
-    href: SOCIALS.linkedin,
-    path: 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.063 2.063 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z',
-  },
-];
+const socialIcons = (['discord', 'github', 'twitter', 'linkedin'] as const).map((key) => ({
+  key,
+  label: SOCIAL_ICONS[key].label,
+  path: SOCIAL_ICONS[key].path,
+  href: SOCIALS[key],
+}));
 ---
 
 <footer class="footer">
@@ -82,9 +62,9 @@ const socialIcons = [
           <h2>Read</h2>
           <ul>
             <li><a href="/blog">All articles</a></li>
+            <li><a href="/authors">Authors</a></li>
             <li><a href="/topics">Topics</a></li>
             <li><a href="/tags">Tags</a></li>
-            <li><a href="/authors">Authors</a></li>
           </ul>
         </div>
 
@@ -102,7 +82,7 @@ const socialIcons = [
           <h2>Connect</h2>
           <ul>
             <li><a href="/about">About us</a></li>
-            <li><a href="/contribute">Editorial policy</a></li>
+            <li><a href="/privacy">Privacy</a></li>
             <li>
               <a
                 href={`${SITE.repoUrl}/blob/main/CODE_OF_CONDUCT.md`}
@@ -112,7 +92,7 @@ const socialIcons = [
                 Code of conduct
               </a>
             </li>
-            <li><a href="/contact">Contact</a></li>
+            <li><a href="/contact">Contact Us</a></li>
           </ul>
         </div>
       </div>

src/components/IconLinkCard.astro

@@ -97,10 +97,10 @@ const external = !!href && href.startsWith('http');
   .ilc-action {
     grid-area: action;
     font-family: var(--font-display);
-    font-size: 20px;
+    font-size: clamp(15px, 4vw, 19px);
     color: var(--ink);
     line-height: 1.15;
-    word-break: break-word;
+    overflow-wrap: break-word;
     align-self: start;
     transition: color 0.15s ease;
   }

src/content/authors/dinesh.json

@@ -1,5 +1,8 @@
 {
   "name": "Dinesh",
   "bio": "Systems engineer learning ML systems from the ground up and writing it down along the way. Interested in how the fundamentals assemble into the models and infrastructure we actually run.",
-  "role": "author"
+  "role": "author",
+  "twitter": "https://x.com/The_Dinessh",
+  "linkedin": "https://www.linkedin.com/in/dineshyd/",
+  "website": "https://dineshy.com/"
 }

src/layouts/BaseLayout.astro

@@ -9,6 +9,23 @@ import AnalyticsConsent from '@/components/AnalyticsConsent.tsx';
 import SearchModal from '@/components/SearchModal.tsx';
 import '@/styles/global.css';
 
+// Self-hosted fonts (latin subset). No third-party request; @fontsource sets font-display: swap.
+import '@fontsource/playfair-display/latin-400.css';
+import '@fontsource/playfair-display/latin-500.css';
+import '@fontsource/playfair-display/latin-600.css';
+import '@fontsource/playfair-display/latin-400-italic.css';
+import '@fontsource/playfair-display/latin-600-italic.css';
+import '@fontsource/hanken-grotesk/latin-400.css';
+import '@fontsource/hanken-grotesk/latin-500.css';
+import '@fontsource/hanken-grotesk/latin-600.css';
+import '@fontsource/hanken-grotesk/latin-700.css';
+import '@fontsource/source-serif-4/latin-400.css';
+import '@fontsource/source-serif-4/latin-600.css';
+import '@fontsource/source-serif-4/latin-400-italic.css';
+import '@fontsource/jetbrains-mono/latin-400.css';
+import '@fontsource/jetbrains-mono/latin-500.css';
+import '@fontsource/jetbrains-mono/latin-600.css';
+
 interface Props {
   title?: string;
   description?: string;
@@ -160,26 +177,7 @@ const siteJsonLd = [
   <meta name="twitter:site" content={SITE.twitter} />
   <meta name="twitter:creator" content={SITE.twitter} />
 
-  <!-- Fonts — preloaded non-blocking. Stylesheet swaps in after first paint. -->
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link
-    rel="preload"
-    as="style"
-    href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap"
-  />
-  <link
-    rel="stylesheet"
-    href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap"
-    media="print"
-    onload="this.media='all'"
-  />
-  <noscript>
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap"
-    />
-  </noscript>
+  <!-- Fonts are self-hosted via @fontsource (imported in this layout's frontmatter). -->
 
   <!-- Favicons -->
   <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

src/lib/og.tsx

@@ -62,7 +62,7 @@ const SHELL_STYLE: React.CSSProperties = {
   background: C.paper,
   padding: '64px 72px',
   position: 'relative',
-  fontFamily: 'Fraunces',
+  fontFamily: 'Playfair Display',
 };
 
 const BORDER_STYLE: React.CSSProperties = {
@@ -111,7 +111,7 @@ function brandBar(): React.ReactElement {
         </span>
         <span
           style={{
-            fontFamily: 'Fraunces',
+            fontFamily: 'Playfair Display',
             fontStyle: 'italic',
             fontSize: 28,
             color: C.ink2,
@@ -141,7 +141,7 @@ function template(d: OgArticle): React.ReactElement {
       <div style={{ flex: 1, display: 'flex', alignItems: 'center', marginTop: 24 }}>
         <div
           style={{
-            fontFamily: 'Fraunces',
+            fontFamily: 'Playfair Display',
             fontSize: 76,
             lineHeight: 1.04,
             color: C.ink,
@@ -168,7 +168,7 @@ function pageTemplate(title: string): React.ReactElement {
       <div style={{ flex: 1, display: 'flex', alignItems: 'center', marginTop: 28 }}>
         <div
           style={{
-            fontFamily: 'Fraunces',
+            fontFamily: 'Playfair Display',
             fontSize: 132,
             lineHeight: 1.0,
             color: C.ink,
@@ -215,7 +215,7 @@ function authorTemplate(name: string, bio?: string, handle?: string): React.Reac
         </div>
         <div
           style={{
-            fontFamily: 'Fraunces',
+            fontFamily: 'Playfair Display',
             fontSize: 108,
             lineHeight: 1.0,
             color: C.ink,
@@ -229,7 +229,7 @@ function authorTemplate(name: string, bio?: string, handle?: string): React.Reac
         {bio && (
           <div
             style={{
-              fontFamily: 'Fraunces',
+              fontFamily: 'Playfair Display',
               fontStyle: 'italic',
               fontSize: 32,
               lineHeight: 1.3,
@@ -280,7 +280,7 @@ function toolTemplate(name: string, summary: string, tag: string): React.ReactEl
         </div>
         <div
           style={{
-            fontFamily: 'Fraunces',
+            fontFamily: 'Playfair Display',
             fontSize: 92,
             lineHeight: 1.0,
             color: C.ink,
@@ -294,7 +294,7 @@ function toolTemplate(name: string, summary: string, tag: string): React.ReactEl
         </div>
         <div
           style={{
-            fontFamily: 'Fraunces',
+            fontFamily: 'Playfair Display',
             fontStyle: 'italic',
             fontSize: 28,
             lineHeight: 1.35,
@@ -321,7 +321,7 @@ function defaultTemplate(): React.ReactElement {
       <div style={{ flex: 1, display: 'flex', alignItems: 'center', marginTop: 28 }}>
         <div
           style={{
-            fontFamily: 'Fraunces',
+            fontFamily: 'Playfair Display',
             fontSize: 124,
             lineHeight: 1.0,
             color: C.ink,
@@ -341,14 +341,20 @@ function defaultTemplate(): React.ReactElement {
 
 async function renderToPng(node: React.ReactElement, context: string): Promise<Buffer> {
   try {
-    const serif = loadFont('@fontsource/fraunces/files/fraunces-latin-400-normal.woff');
+    const serif = loadFont(
+      '@fontsource/playfair-display/files/playfair-display-latin-400-normal.woff',
+    );
+    const serifItalic = loadFont(
+      '@fontsource/playfair-display/files/playfair-display-latin-400-italic.woff',
+    );
     const mono = loadFont('@fontsource/jetbrains-mono/files/jetbrains-mono-latin-400-normal.woff');
 
     const svg = await satori(node, {
       width: 1200,
       height: 630,
       fonts: [
-        { name: 'Fraunces', data: serif, weight: 400, style: 'normal' },
+        { name: 'Playfair Display', data: serif, weight: 400, style: 'normal' },
+        { name: 'Playfair Display', data: serifItalic, weight: 400, style: 'italic' },
         { name: 'JetBrains Mono', data: mono, weight: 400, style: 'normal' },
       ],
     });