chore(site): improve design

Author: JamieMason

.github/FUNDING.yml

@@ -1 +1,3 @@
 github: JamieMason
+ko_fi: jamiemason
+thanks_dev: u/gh/JamieMason

.gitignore

@@ -6,11 +6,8 @@
 .idea
 coverage/
 dist/
+flamegraph.svg
+lcp_trace.json
 node_modules/
+npm/packages/
 target/
-
-# Generated packages published to npm
-npm/packages
-
-# Benchmarks
-flamegraph.svg

pnpm-lock.yaml

@@ -159,16 +159,16 @@ export default defineConfig({
           label: 'GitHub',
           href: 'https://github.com/JamieMason/syncpack',
         },
+        {
+          icon: 'npm',
+          label: 'npm',
+          href: 'https://npmx.dev/package/syncpack',
+        },
         {
           icon: 'blueSky',
           label: 'Bluesky',
           href: 'https://bsky.app/profile/foldleft.bsky.social',
         },
-        {
-          icon: 'x.com',
-          label: 'X',
-          href: 'https://x.com/fold_left',
-        },
       ],
       editLink: {
         baseUrl: 'https://github.com/JamieMason/syncpack/edit/main/site/',
@@ -177,17 +177,35 @@ export default defineConfig({
       logo: {
         src: './src/assets/logo.svg',
       },
+      tableOfContents: {
+        minHeadingLevel: 2,
+        maxHeadingLevel: 4,
+      },
       expressiveCode: {
-        themes: ['github-light-default', 'github-dark-default'],
-        removeUnusedThemes: false,
+        themes: ['everforest-dark', 'everforest-light'],
+        frames: false,
+        styleOverrides: {
+          // Borders and spacing
+          borderRadius: '6px',
+          borderWidth: '1px',
+          borderColor: 'var(--sl-color-gray-5)',
+
+          // Code area
+          codeBackground: 'var(--sl-color-gray-6)',
+          codeFontFamily: 'var(--sl-font-mono)',
+          codeFontSize: '0.8rem',
+          codeLineHeight: '1.65',
+          codePaddingBlock: '1rem',
+          codePaddingInline: '1.35rem',
+          codeForeground: 'var(--sl-color-gray-2)',
+
+          // Accent color for highlights
+          focusBorder: 'var(--sl-color-accent)',
+        },
       },
-      customCss: ['./src/styles/custom.css'],
+      customCss: ['@fontsource-variable/inter', '@fontsource-variable/jetbrains-mono', './src/styles/custom.css'],
       pagination: false,
       sidebar: [
-        {
-          label: 'Github',
-          link: 'https://github.com/JamieMason/syncpack',
-        },
         {
           label: 'Guides',
           autogenerate: { directory: 'guide' },
@@ -230,7 +248,9 @@ export default defineConfig({
         },
       ],
       components: {
+        Footer: './src/components/Footer.astro',
         Head: './src/components/Head.astro',
+        SocialIcons: './src/components/SocialIcons.astro',
       },
       head: [
         {

site/astro.config.mjs

@@ -4,6 +4,8 @@
   "dependencies": {
     "@astrojs/check": "^0.9.6",
     "@astrojs/starlight": "^0.37.4",
+    "@fontsource-variable/inter": "5.2.8",
+    "@fontsource-variable/jetbrains-mono": "5.2.8",
     "astro": "^5.16.16",
     "rehype-external-links": "^3.0.0",
     "satori-astro": "^0.3.3",

site/package.json

@@ -0,0 +1,46 @@
+---
+import Default from '@astrojs/starlight/components/Footer.astro';
+import SponsorButton from './SponsorButton.astro';
+---
+
+<Default />
+
+<aside>
+  <SponsorButton />
+  <a href="https://www.npmjs.com/package/syncpack" rel="external nofollow">
+    <img
+      alt="NPM downloads"
+      src="http://img.shields.io/npm/dm/syncpack.svg?style=flat-square"
+      loading="lazy"
+    />
+  </a>
+  <a
+    href="https://github.com/JamieMason/syncpack/actions"
+    rel="external nofollow"
+  >
+    <img
+      alt="Build Status"
+      src="https://img.shields.io/github/actions/workflow/status/JamieMason/syncpack/ci.yaml?branch=main"
+      loading="lazy"
+    />
+  </a>
+</aside>
+
+<style>
+  a {
+    font-size: 0;
+  }
+
+  img {
+    border-radius: 4px;
+  }
+
+  aside {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    gap: 1rem;
+    justify-content: center;
+    justify-items: center;
+  }
+</style>

site/public/InterDisplay-Bold.woff2

@@ -0,0 +1,8 @@
+---
+import Default from '@astrojs/starlight/components/SocialIcons.astro';
+import SponsorButton from './SponsorButton.astro';
+---
+
+<SponsorButton />
+
+<Default />

site/public/InterDisplay-SemiBold.woff2

@@ -0,0 +1,53 @@
+<a href="https://github.com/sponsors/JamieMason" rel="external">
+  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" width="16">
+    <path
+      fill="rgb(219, 97, 162)"
+      d="m8 14.25.345.666a.75.75 0 0 1-.69 0l-.008-.004-.018-.01a7.152 7.152 0 0 1-.31-.17 22.055 22.055 0 0 1-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.066 22.066 0 0 1-3.744 2.584l-.018.01-.006.003h-.002ZM4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.58 20.58 0 0 0 8 13.393a20.58 20.58 0 0 0 3.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.749.749 0 0 1-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5Z"
+    ></path>
+  </svg>
+  Sponsor
+</a>
+
+<style>
+  a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 6px;
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 0.76rem;
+    font-weight: 500;
+    text-decoration: none;
+    transition:
+      background-color 0.2s,
+      border-color 0.2s;
+  }
+
+  :root[data-theme="dark"] a {
+    background-color: rgb(33, 40, 48);
+    color: rgb(240, 246, 252);
+    border: 1px solid rgb(61, 68, 77);
+
+    &:hover {
+      background-color: rgb(48, 56, 65);
+      border-color: rgb(84, 91, 100);
+    }
+  }
+
+  /* should look just like github's buttons */
+  :root[data-theme="light"] a {
+    background-color: #f6f8fa;
+    color: #1f2328;
+    border: 1px solid #d1d9e0;
+
+    &:hover {
+      background-color: #eff2f5;
+      border-color: #d1d9e0;
+    }
+  }
+
+  svg {
+    display: inline-block;
+  }
+</style>