Homepage tweaks

Author: ofriw

website/docs/intro.mdx

@@ -7,7 +7,7 @@ hide_table_of_contents: false
 
 import AgentWorkStabilityDiagram from '@site/src/components/VisualElements/AgentWorkStabilityDiagram';
 import DiagramFrame from '@site/src/components/VisualElements/DiagramFrame';
-import GitHubSocialProof from '@site/src/components/GitHubSocialProof';
+import { GitHubProjectSource } from '@site/src/components/GitHubSocialProof';
 import OperatorTransformationDiagram from '@site/src/components/VisualElements/OperatorTransformationDiagram';
 
 AI agents make execution cheap. They also make production judgment more valuable.
@@ -75,8 +75,8 @@ The dangerous runs are not the obviously broken ones. They look finished early
 
 This book, the tools it references, and everything built around them are **100% open source, community-backed projects with no commercial agenda.**
 
-- **Book source:** [github.com/agenticoding/agenticoding.github.io](https://github.com/agenticoding/agenticoding.github.io) <GitHubSocialProof repo="agenticoding/agenticoding.github.io" fallbackStars={102} variant="project" />
-- **ChunkHound:** [github.com/chunkhound/chunkhound](https://github.com/chunkhound/chunkhound) <GitHubSocialProof repo="chunkhound/chunkhound" fallbackStars={1400} variant="project" />
-- **Pi agenticoding extension:** [github.com/agenticoding/pi-agenticoding](https://github.com/agenticoding/pi-agenticoding) <GitHubSocialProof repo="agenticoding/pi-agenticoding" fallbackStars={18} variant="project" />
+- <GitHubProjectSource name="Book source" repo="agenticoding/agenticoding.github.io" fallbackStars={102} />
+- <GitHubProjectSource name="ChunkHound" repo="chunkhound/chunkhound" fallbackStars={1400} />
+- <GitHubProjectSource name="Pi agenticoding extension" repo="agenticoding/pi-agenticoding" fallbackStars={18} />
 
 No paid tiers. No enterprise licenses. Nothing to buy. Everything here exists because the problems are real and the solutions should be shared.

website/src/components/GitHubSocialProof/index.module.css

@@ -68,6 +68,45 @@
   vertical-align: baseline;
 }
 
+.projectSourceName,
+.projectSourceLink,
+.projectSourceStars {
+  vertical-align: baseline;
+}
+
 .starCount {
   transform: translateY(var(--space-px));
 }
+
+@media (max-width: 576px) {
+  .hero {
+    display: flex;
+    width: fit-content;
+    margin-top: var(--space-2);
+  }
+
+  .projectSource {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    align-items: baseline;
+  }
+
+  .projectSourceDetails {
+    display: contents;
+  }
+
+  .projectSourceLink {
+    flex-basis: 100%;
+    order: 3;
+  }
+
+  .projectSourceStars {
+    order: 2;
+    transform: translate(calc(var(--space-0h) * -1), calc(var(--space-px) * 2));
+  }
+
+  .projectSourceStars .project {
+    margin-inline-start: 0;
+  }
+}

website/src/components/GitHubSocialProof/index.tsx

@@ -14,6 +14,12 @@ interface GitHubRepository {
   stargazers_count: number;
 }
 
+interface GitHubProjectSourceProps {
+  name: string;
+  repo: string;
+  fallbackStars: number;
+}
+
 const starCountRequests = new Map<string, Promise<number | null>>();
 
 function fetchStarCount(repo: string): Promise<number | null> {
@@ -77,6 +83,35 @@ function StarCount({
   );
 }
 
+export function GitHubProjectSource({
+  name,
+  repo,
+  fallbackStars,
+}: GitHubProjectSourceProps): ReactNode {
+  return (
+    <span className={styles.projectSource}>
+      <strong className={styles.projectSourceName}>{name}</strong>{' '}
+      <span className={styles.projectSourceDetails}>
+        <a
+          className={styles.projectSourceLink}
+          href={`https://github.com/${repo}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          github.com/{repo}
+        </a>{' '}
+        <span className={styles.projectSourceStars}>
+          <GitHubSocialProof
+            repo={repo}
+            fallbackStars={fallbackStars}
+            variant="project"
+          />
+        </span>
+      </span>
+    </span>
+  );
+}
+
 export default function GitHubSocialProof({
   repo,
   fallbackStars,