Styling tweaks, privacy policy

Author: alex-snezhko

astro/package-lock.json

@@ -20,7 +20,7 @@
     "@wasmer/wasi": "^1.2.2",
     "algoliasearch": "^4.23.3",
     "assert": "^2.1.0",
-    "astro": "^4.13.3",
+    "astro": "^4.16.13",
     "buffer": "^6.0.3",
     "constants-browserify": "^1.0.0",
     "events": "^3.3.0",

astro/package.json

@@ -4,27 +4,11 @@ import fs from "node:fs";
 async function generateContributors() {
   const octokit = new Octokit({ auth: process.env.GITHUB_ACCESS_TOKEN });
 
-  const PAGE_SIZE = 25;
-  let results = [];
-  let batch = [];
-  let pageNumber = 1;
-  do {
-    const res = await octokit.rest.repos.listContributors({
-      owner: "grain-lang",
-      repo: "grain",
-      page: pageNumber,
-      per_page: PAGE_SIZE,
-    });
-
-    if (res.status !== 200) {
-      console.error("Failed to get contributors");
-      return;
-    }
-
-    batch = res.data;
-    results.push(...batch);
-    pageNumber++;
-  } while (batch.length === PAGE_SIZE);
+  const results = await octokit.paginate(octokit.rest.repos.listContributors, {
+    owner: "grain-lang",
+    repo: "grain",
+    per_page: 25,
+  });
 
   fs.writeFileSync("../contributors.json", JSON.stringify(results, undefined, 4));
 }

astro/scripts/generateContributors.js

@@ -23,11 +23,6 @@ interface Props {
 }
 
 const { entry } = Astro.props;
-
-const images = import.meta.glob<{ default: ImageMetadata }>("/src/images/cover/*.jpg");
-if (!images[entry.data.cover]) {
-  throw new Error(`Image ${entry.data.cover} not found for blog`);
-}
 ---
 
 <div class="max-w-[48rem] mx-auto px-5 py-6 md:p-8">
@@ -64,7 +59,7 @@ if (!images[entry.data.cover]) {
   </div>
   <figure class="py-10">
     <Image
-      src={images[entry.data.cover]()}
+      src={entry.data.cover}
       alt={entry.data.coverAttribution}
       class="max-h-[26rem] w-full object-cover"
     />

astro/src/components/BlogEntry.astro

@@ -12,11 +12,6 @@ interface Props {
 }
 
 const { entry } = Astro.props;
-
-const images = import.meta.glob<{ default: ImageMetadata }>("/src/images/cover/*.jpg");
-if (!images[entry.data.cover]) {
-  throw new Error(`Image ${entry.data.cover} not found for blog`);
-}
 ---
 
 <div class="mx-auto max-w-[70rem] pb-5 lg:pb-28 px-5">
@@ -46,7 +41,7 @@ if (!images[entry.data.cover]) {
       <a href="https://discord.com/invite/grain-lang" class="underline">Discord</a>
     </div>
   </div>
-  <div class="flex items-stretch bg-color-background-bright dark:bg-gray-variant-80 rounded-lg p-5 lg:p-8 drop-shadow-xl">
+  <div class="lg:flex lg:items-stretch bg-color-background-bright dark:bg-gray-variant-80 rounded-lg p-5 lg:p-8 drop-shadow-xl">
     <div class="p-0 lg:p-6 lg:w-5/12">
       <h1 class="text-2xl font-bold mb-5"><a href={`/blog/${entry.slug}`}>{entry.data.title}</a></h1>
       <BlogAuthor entry={entry} imgClass="w-12 h-12" nameClass="text-lg" />
@@ -59,7 +54,7 @@ if (!images[entry.data.cover]) {
     </div>
     <div class="w-0 lg:w-7/12 pl-6">
       <Image
-        src={images[entry.data.cover]()}
+        src={entry.data.cover}
         alt={entry.data.coverAttribution ?? `${entry.data.title} cover image`}
         class="w-full h-full object-cover rounded"
       />

astro/src/components/BlogHero.astro

@@ -8,17 +8,12 @@ interface Props {
 }
 
 const { entry } = Astro.props;
-
-const images = import.meta.glob<{ default: ImageMetadata }>("/src/images/cover/*.jpg");
-if (!images[entry.data.cover]) {
-  throw new Error(`Image ${entry.data.cover} not found for blog`);
-}
 ---
 
 <div class="flex flex-col drop-shadow-sm border rounded-lg border-gray-10 dark:border-color-background-bright dark:bg-color-dim-3 overflow-hidden">
   <a href={`/blog/${entry.slug}`} class="grow flex flex-col">
     <Image
-      src={images[entry.data.cover]()}
+      src={entry.data.cover}
       alt={entry.data.coverAttribution ?? `${entry.data.title} thumbnail`}
       class="w-full h-[10rem] md:h-[14rem] object-cover"
     />

astro/src/components/BlogThumbnail.astro

@@ -30,12 +30,12 @@ const special = [
           <img class="w-14 h-14 rounded-full p-0.5 shadow-md border border-color-dim-2 dark:shadow-purple-80" src={contributor.avatar_url} alt={`Image of ${contributor.login}`} />
         </a>
         {special.includes(contributor.login) && (
-          <div class="absolute text-3xl bottom-0 right-0 text-yellow-500 [text-shadow:0_0_2px_#000]">★</div>
+          <a href={contributor.html_url} class="absolute text-3xl bottom-0 right-0 text-yellow-500 [text-shadow:0_0_2px_#000]">★</a>
         )}
       </div>
     ))}
 
   <p class="mt-6">
-    <span class="text-2xl text-yellow-500">★</span> = Noteworthy contributors who we feel have made signifant contributions to the project.
+    <span class="text-2xl text-yellow-500">★</span> = Noteworthy contributors who have made signifant contributions to the project.
   </p>
 </div>

astro/src/components/Contributors.astro

@@ -4,7 +4,6 @@ import oscarHeadshot from "../images/headshots/oscar-headshot-square.jpg";
 import philipHeadshot from "../images/headshots/philip-headshot-square.jpg";
 import blaineHeadshot from "../images/headshots/blaine-headshot-square.jpg";
 import marcusHeadshot from "../images/headshots/marcus-headshot-square.jpg";
-import josiahHeadshot from "../images/headshots/josiah-headshot-square.jpg";
 import jakeProfile from "../images/headshots/jake-profile-square.png";
 import alexHeadshot from "../images/headshots/alex-headshot-square.jpg";
 ---
@@ -146,7 +145,24 @@ import alexHeadshot from "../images/headshots/alex-headshot-square.jpg";
       githubUsername="spotandjake"
     >
       <p>
-        ...
+        Driven by a passion for programming languages and WebAssembly, Jake
+        brings a fresh and dynamic perspective to the Grain core team. His
+        contributions focus on enhancing the standard library, Jake has played
+        a key role in building the JSON and Number libraries, refining
+        documentation, and supporting language server development. On occasion,
+        he also contributes to the compiler, further expanding his expertise.
+      </p>
+
+      <p>
+        Currently studying type checking and compiler development, Jake blends
+        his curiosity for programming languages with hands-on contributions to
+        Grain. Outside of tech, he enjoys exploring the outdoors and engineering.
+      </p>
+
+      <p>
+        Jake is constantly exploring ways to push the boundaries of what's
+        possible with programming languages and is always eager to learn new
+        things and contribute to the advancement of technology.
       </p>
     </CoreTeamMemberInfo>
 

astro/src/components/CoreTeam.astro

@@ -5,18 +5,29 @@
   <p class="text-color-dim mb-2">Sign up for farm-to-inbox developer news</p>
   <div>
     <form
+      class="flex"
+      name="mailing-list-signup"
+      method="POST"
+      netlify-honeypot="bot-field"
+      data-netlify="true"
+    >
+      <input type="email" name="email" placeholder="email@dev.com" class="bg-color-background-bright text-black rounded box-content border border-color-dim-3 hover:border-color-dim-2 px-5 py-2 flex-1 w-full" />
+      <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
+      <div class="hidden"><input name="bot-field" /></div>
+      <input type="submit" value="Sign up" class="cursor-pointer ml-1 bg-color-dim-1 text-white px-6 py-2 rounded border border-color-dim-1 flex-0 hover:opacity-90" />
+    </form>
+    <!-- <form
       class="flex"
       action="https://grain-lang.us18.list-manage.com/subscribe/post?u=b33eb7484930855e59aae309f&amp;id=e8b0f20480"
       method="post"
       target="_blank"
       novalidate
     >
-      <input type="email" name="EMAIL" placeholder="email@dev.com" class="bg-color-background-bright text-black rounded box-content border border-color-dim-3 hover:border-color-dim-2 px-5 py-2 flex-1 w-full" />
+      <input type="email" name="EMAIL" placeholder="email@dev.com" class="bg-color-background-bright text-black rounded box-content border border-color-dim-3 hover:border-color-dim-2 px-5 py-2 flex-1 w-full" /> -->
       <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
-      <div style="position: absolute; left: -5000px;"><input type="text" name="b_b33eb7484930855e59aae309f_e8b0f20480" tabindex="-1" value=""></div>
+      <!-- <div style="position: absolute; left: -5000px;"><input type="text" name="b_b33eb7484930855e59aae309f_e8b0f20480" tabindex="-1" value=""></div>
       <input type="submit" value="Sign up" name="subscribe" class="cursor-pointer ml-1 bg-color-dim-1 text-white px-6 py-2 rounded border border-color-dim-1 flex-0 hover:opacity-90" />
-    </form>
+    </form> -->
   </div>
-  <!-- TODO privacy policy -->
-  <p class="text-color-dim mt-2 text-sm">You can unsubscribe at any time. Read our <a>privacy policy</a>.</p>
+  <p class="text-color-dim mt-2 text-sm">You can unsubscribe at any time. Read our <a href="/privacy">privacy policy</a>.</p>
 </div>

astro/src/components/NewsletterSignup.astro

@@ -94,7 +94,7 @@
 
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
     themeChangeUnsub = store.$selectedTheme.subscribe(selectedTheme => {
-      monaco.editor.setTheme(selectedTheme === "light" || !prefersDark ? "github-light" : "github-dark-modified");
+      monaco.editor.setTheme(selectedTheme === "light" || (!selectedTheme && !prefersDark) ? "github-light" : "github-dark-modified");
     });
 
     worker.addEventListener("message", ({ data }) => {
@@ -151,7 +151,7 @@
   </div>
   <div class="grid grid-cols-1 grid-rows-2 lg:grid-cols-2 lg:grid-rows-1 h-[calc(100vh-3.5rem-5rem)] max-h-[calc(100vh-3.5rem-5rem)]">
     <div id="editor"></div>
-    <section class="dark:bg-[#2F254B] bg-[#EFEFEF] {state === 'compiledWithErrors' ? 'border-4 border-red-500 dark:border-[#C43550] dark:bg-[#4F2B38] bg-red-200' : ''}">
+    <section class="dark:bg-[#2F254B] bg-[#EFEFEF] {state === 'compiledWithErrors' ? 'border-4 border-red-500 dark:border-[#C43550] dark:bg-[#3D222C] bg-red-200' : ''}">
       {#if loadingState}
         <div class="flex items-center justify-center w-full h-full">
           <div class="flex flex-col gap-2 items-center">