Revert "Update React Doctor branding assets and README theme-aware logo (#11)"

This reverts commit 2d2f779.

Author: ben-million

assets/react-doctor-readme-logo-dark.svg

@@ -1,8 +1,4 @@
-<picture>
-  <source media="(prefers-color-scheme: dark)" srcset="./assets/react-doctor-readme-logo-dark.svg">
-  <source media="(prefers-color-scheme: light)" srcset="./assets/react-doctor-readme-logo-light.svg">
-  <img alt="React Doctor" src="./assets/react-doctor-readme-logo-light.svg" width="180" height="40">
-</picture>
+# <img src="https://github.com/millionco/react-doctor/blob/main/.github/public/logo.svg?raw=true" width="60" align="center" /> React Doctor
 
 [![version](https://img.shields.io/npm/v/react-doctor?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/react-doctor)
 [![downloads](https://img.shields.io/npm/dt/react-doctor.svg?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/react-doctor)

assets/react-doctor-readme-logo-light.svg

@@ -11,7 +11,7 @@ const ibmPlexMono = IBM_Plex_Mono({
 export const metadata: Metadata = {
   title: "React Doctor",
   description: "Let coding agents diagnose and fix your React code.",
-  icons: { icon: "/react-doctor-icon.svg" },
+  icons: { icon: "/favicon.svg" },
 };
 
 export default function RootLayout({

packages/react-doctor/README.md

@@ -5,9 +5,6 @@ const SCORE_GOOD_THRESHOLD = 75;
 const SCORE_OK_THRESHOLD = 50;
 const IMAGE_WIDTH_PX = 1200;
 const IMAGE_HEIGHT_PX = 630;
-const OG_BRAND_MARK_WIDTH_PX = 244;
-const OG_BRAND_MARK_HEIGHT_PX = 82;
-const OG_BRAND_MARK_PATH = "/react-doctor-og-banner.svg";
 
 const getScoreLabel = (score: number): string => {
   if (score >= SCORE_GOOD_THRESHOLD) return "Great";
@@ -21,6 +18,12 @@ const getScoreColor = (score: number): string => {
   return "#f87171";
 };
 
+const getDoctorFace = (score: number): [string, string] => {
+  if (score >= SCORE_GOOD_THRESHOLD) return ["^ ^", "v"];
+  if (score >= SCORE_OK_THRESHOLD) return ["o o", "-"];
+  return ["x x", "v"];
+};
+
 export const GET = (request: Request): ImageResponse => {
   const { searchParams } = new URL(request.url);
 
@@ -30,7 +33,7 @@ export const GET = (request: Request): ImageResponse => {
   const warningCount = Math.max(0, Number(searchParams.get("w")) || 0);
   const fileCount = Math.max(0, Number(searchParams.get("f")) || 0);
   const scoreColor = getScoreColor(score);
-  const brandMarkUrl = new URL(OG_BRAND_MARK_PATH, request.url).toString();
+  const [eyes, mouth] = getDoctorFace(score);
   const scoreBarPercent = (score / PERFECT_SCORE) * 100;
 
   return new ImageResponse(
@@ -47,7 +50,26 @@ export const GET = (request: Request): ImageResponse => {
       }}
     >
       <div style={{ display: "flex", alignItems: "center", gap: "24px" }}>
-        <img src={brandMarkUrl} width={OG_BRAND_MARK_WIDTH_PX} height={OG_BRAND_MARK_HEIGHT_PX} />
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "80px",
+            height: "80px",
+            border: `2px solid ${scoreColor}`,
+            borderRadius: "12px",
+            color: scoreColor,
+          }}
+        >
+          <div style={{ fontSize: "22px", lineHeight: 1 }}>{eyes}</div>
+          <div style={{ fontSize: "18px", lineHeight: 1, marginTop: "2px" }}>{mouth}</div>
+        </div>
+        <div style={{ display: "flex", flexDirection: "column" }}>
+          <span style={{ fontSize: "28px", color: "#d4d4d4" }}>React Doctor</span>
+          <span style={{ fontSize: "18px", color: "#525252" }}>www.react.doctor</span>
+        </div>
         {projectName && (
           <div
             style={{

packages/react-doctor/assets/react-doctor-readme-logo-dark.svg

@@ -1,6 +1,5 @@
 import type { Metadata } from "next";
 import AnimatedScore from "./animated-score";
-import ReactDoctorIcon from "@/components/react-doctor-icon";
 
 const PERFECT_SCORE = 100;
 const SCORE_GOOD_THRESHOLD = 75;
@@ -10,7 +9,6 @@ const FIX_COMMAND = "npx -y react-doctor@latest . --fix";
 const SHARE_BASE_URL = "https://www.react.doctor/share";
 const AMI_DEEPLINK =
   "ami://new-chat?prompt=Run%20%60npx%20-y%20react-doctor%40latest%20.%60%20to%20diagnose%20issues%2C%20then%20fix%20all%20reported%20issues%20one%20by%20one.%20After%20applying%20fixes%2C%20run%20it%20again%20to%20verify%20the%20results%20improved.&mode=agent&autoSubmit=true";
-const SHARE_ICON_SIZE_PX = 40;
 const X_ICON_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";
 const LINKEDIN_ICON_PATH =
@@ -32,6 +30,29 @@ const getScoreLabel = (score: number): string => {
   return "Critical";
 };
 
+const getScoreColorClass = (score: number): string => {
+  if (score >= SCORE_GOOD_THRESHOLD) return "text-green-400";
+  if (score >= SCORE_OK_THRESHOLD) return "text-yellow-500";
+  return "text-red-400";
+};
+
+const getDoctorFace = (score: number): [string, string] => {
+  if (score >= SCORE_GOOD_THRESHOLD) return ["\u25E0 \u25E0", " \u25BD "];
+  if (score >= SCORE_OK_THRESHOLD) return ["\u2022 \u2022", " \u2500 "];
+  return ["x x", " \u25BD "];
+};
+
+const DoctorFace = ({ score }: { score: number }) => {
+  const [eyes, mouth] = getDoctorFace(score);
+  const colorClass = getScoreColorClass(score);
+
+  return (
+    <pre className={`${colorClass} leading-tight`}>
+      {`  \u250C\u2500\u2500\u2500\u2500\u2500\u2510\n  \u2502 ${eyes} \u2502\n  \u2502 ${mouth} \u2502\n  \u2514\u2500\u2500\u2500\u2500\u2500\u2518`}
+    </pre>
+  );
+};
+
 export const generateMetadata = async ({
   searchParams,
 }: {
@@ -97,7 +118,7 @@ const SharePage = async ({ searchParams }: { searchParams: Promise<ShareSearchPa
     <div className="mx-auto min-h-screen w-full max-w-3xl bg-[#0a0a0a] p-6 pb-32 font-mono text-base leading-relaxed text-neutral-300 sm:p-8 sm:pb-40 sm:text-lg">
       <div className="mb-6">
         {projectName && <div className="mb-4 text-xl text-white">{projectName}</div>}
-        <ReactDoctorIcon sizePx={SHARE_ICON_SIZE_PX} />
+        <DoctorFace score={score} />
         <div className="mt-2 text-neutral-500">
           React Doctor <span className="text-neutral-600">(www.react.doctor)</span>
         </div>