language colors ✨

.gitignore

···
+node_modules

deno.json

···
 {
   "imports": {
+    "github-colors": "npm:github-colors@^2.2.21",
     "preact": "npm:preact@^10.27.1",
     "preact-render-to-string": "npm:preact-render-to-string@^6.6.1",
     "@takumi-rs/helpers": "npm:@takumi-rs/helpers@^0.29.8",
···
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "preact"
-  }
+  },
+  "nodeModulesDir": "auto"
 }

deno.lock

···
     "npm:@types/node@*": "22.15.15",
     "npm:@vercel/og@~0.6.2": "0.6.8",
     "npm:@vercel/og@~0.8.5": "0.8.5",
+    "npm:github-colors@^2.2.21": "2.2.21",
     "npm:preact-render-to-string@^6.6.1": "6.6.1_preact@10.27.1",
     "npm:preact@^10.27.1": "10.27.1",
     "npm:satori@~0.10.14": "0.10.14",
···
         "satori@0.16.0"
       ]
     },
+    "add-subtract-date@1.0.16": {
+      "integrity": "sha512-pmGFYgOmVhZ7R47PB/h/BLt/f77rVZL3WXvxSUWKSd6RTe7lHu7ZalQUYWJ2RXNIuv9KKZjstyuKnNQqbqtoGw=="
+    },
+    "ansi-parser@3.2.11": {
+      "integrity": "sha512-HeEwCVf/pI9qQUVaTkoDBl9U/QU4RvWJ+Trg1jNSNvDzFsBAId6fHv6VLiC7HzwrOiL8uOEkO5T1eTgpnTFQfQ=="
+    },
+    "ansi-styles@3.2.1": {
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dependencies": [
+        "color-convert"
+      ]
+    },
+    "ansy@1.0.16": {
+      "integrity": "sha512-9heIA517JMByr2usiEiobYDJSN71ikQgcFucf4mp4THZG2ZQHNQJjzJIICB1m5JOy3s66HZHTZ5nTHDoliLI9A==",
+      "dependencies": [
+        "ansi-styles",
+        "custom-return",
+        "supports-color",
+        "ul"
+      ]
+    },
+    "argparse@1.0.10": {
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dependencies": [
+        "sprintf-js"
+      ]
+    },
+    "assured@1.0.16": {
+      "integrity": "sha512-KwttBV8EIJw4/KqRFTJzKELLm9c3d1V9+fefORWv8cJNgKouuCRQ5rvCgjpBwA1AxVwqpR5Y1ePLU5SINJzhQg==",
+      "dependencies": [
+        "noop6",
+        "sliced"
+      ]
+    },
     "base64-js@0.0.8": {
       "integrity": "sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw=="
     },
+    "bug-killer@4.4.4": {
+      "integrity": "sha512-O/iJPwIf0Igra3q91s+jGeYhUSdtFUtBMb1JMwvAZLS0We1mIdEuDM4FCjbxFQAF+R6GqpRVgHVQa0utQQxSEA==",
+      "dependencies": [
+        "ansi-parser",
+        "couleurs",
+        "daty",
+        "deffy",
+        "typpy"
+      ]
+    },
     "camelize@1.0.1": {
       "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ=="
     },
+    "class-methods@1.0.13": {
+      "integrity": "sha512-iaTvwkDnvbatOhvhCCPe6MKldhbjMPR2pmtet2HrNfYB/5tclL45bPSqEYV1itC7jIlpQsEAT0qK1x0Ym1Zc8Q==",
+      "dependencies": [
+        "exclude-arr",
+        "static-methods",
+        "ul"
+      ]
+    },
+    "color-convert@1.9.3": {
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dependencies": [
+        "color-name@1.1.3"
+      ]
+    },
+    "color-name@1.1.3": {
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+    },
     "color-name@1.1.4": {
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "couleurs@6.0.12": {
+      "integrity": "sha512-3SzCoWk+IWpReIhdrPnFCsjOQq1CyZ1OHWVTlFq/HR94tK6tEzNSbUycYCEhg+ywnznhFACad+YbGAHGmKzeOQ==",
+      "dependencies": [
+        "ansy",
+        "color-convert",
+        "iterate-object",
+        "typpy"
+      ]
     },
     "css-background-parser@0.1.0": {
       "integrity": "sha512-2EZLisiZQ+7m4wwur/qiYJRniHX4K5Tc9w93MT3AS0WS1u5kaZ4FKXlOTBhOjc+CgEgPiGY+fX1yWD8UwpEqUA=="
···
         "postcss-value-parser"
       ]
     },
+    "custom-return@1.0.13": {
+      "integrity": "sha512-28xNk/Ek+zEhP5grGiNm9+npFJzqhwULzNcBSx4Osh4iuvczTLQqKB7cZoyNql/hpuuWyWBzbeY2+uCH0Qv7UA==",
+      "dependencies": [
+        "noop6"
+      ]
+    },
+    "date-unit-ms@1.1.15": {
+      "integrity": "sha512-udyntpYTFNZPX0JiFCWtrzkPM8WEBV4SGfSXYwZUCRxxBVs/jNYkS+zpiyk3ICGwG9GfZeh4WYOd1hDbyKzOLw=="
+    },
+    "daty@1.2.2": {
+      "integrity": "sha512-2Ax1006BgHLtksGfjcMqf9nyEehrQ5j4UZm3mSgpVlscAVmjpGXUSunVSYSC1yeGjiDwx3HkWY49UfLV2q5smQ==",
+      "dependencies": [
+        "add-subtract-date",
+        "class-methods",
+        "date-unit-ms",
+        "diff-dates",
+        "formatoid"
+      ]
+    },
+    "days@1.1.1": {
+      "integrity": "sha512-vzeIwVsEIyA35GH4+mPd4hjVDNI87wYANyZFs0BHjBr5kIBH5zEl7LfD6Wr4SFZca4D3CU9IH1w4DuZLlXzKRw=="
+    },
+    "deffy@2.2.5": {
+      "integrity": "sha512-6TX2cfIo97eKqWmqgMDAUulCwnveAe3K+4VGsTGPJsL3NtSEnSBFZ3sUXdS4EBhZ8GbdaZBzXQ04ton18dJrug==",
+      "dependencies": [
+        "typpy"
+      ]
+    },
+    "diff-dates@1.0.15": {
+      "integrity": "sha512-tmM/uyu+nFMJbrh9E9HSzqwteVJmSYwXNkCKjavW24kXvbjVQGRpcQzp1EgkJzqUYragRUZsnAXaIVaX5zw7Yw==",
+      "dependencies": [
+        "date-unit-ms"
+      ]
+    },
     "emoji-regex-xs@2.0.1": {
       "integrity": "sha512-1QFuh8l7LqUcKe24LsPUNzjrzJQ7pgRwp1QMcZ5MX6mFplk2zQ08NVCM84++1cveaUUYtcCYHmeFEuNg16sU4g=="
     },
···
     "escape-html@1.0.3": {
       "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
     },
+    "esprima@4.0.1": {
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "bin": true
+    },
+    "exclude-arr@1.0.12": {
+      "integrity": "sha512-uvWXnvXIej85g/JQYdH/IziIfiIa8g3MegneWe92JXERRl7yEDm2ptzUfN80sdHJnsarmXvwv2wFl3rmVeMEvA=="
+    },
     "fflate@0.7.4": {
       "integrity": "sha512-5u2V/CDW15QM1XbbgS+0DfPxVB+jUKhWEKuuFuHncbk3tEEqzmoXL+2KyOFuKGqOnmdIy0/davWF1CkuwtibCw=="
     },
+    "fillo@1.0.15": {
+      "integrity": "sha512-AU9+1s5J2halrmGGe9On+a8TXfbaXsY9JLz/sxPsmcISaqcGn0M9Pt6cQzKPesqdzQdSQ08JJHH5RZR9HdF2Jw=="
+    },
+    "follow-redirects@1.15.11": {
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ=="
+    },
+    "formatoid@1.2.5": {
+      "integrity": "sha512-ADuqDTwrQd0800jF0G6tL3mWwO8aGStjypqvrwkhTnoQc2fD1hc9reGtrMiRmWK7ti1n2NUfy+6WKfJ+AJUsvA==",
+      "dependencies": [
+        "days",
+        "fillo",
+        "months",
+        "parse-it"
+      ]
+    },
+    "function.name@1.0.14": {
+      "integrity": "sha512-s99L814NRuLxwF2sJMIcLhkQhueGXb3oKyvorzrUKKwlVB0SBbWrgZt4+EwKAo3ujCXnT7vshmCvXgZA09kCMw==",
+      "dependencies": [
+        "noop6"
+      ]
+    },
+    "github-colors@2.2.21": {
+      "integrity": "sha512-afkYdtO1VsMV9mHky+Td3CqIUDHpu0o2ztIJcW1cc7niPi0N9PwMG6MjaPjKp4kYKUL1Qnj/b6L6DQbNIe953Q==",
+      "dependencies": [
+        "bug-killer",
+        "js-yaml",
+        "streamp",
+        "tinyreq",
+        "ul"
+      ],
+      "scripts": true
+    },
+    "has-flag@1.0.0": {
+      "integrity": "sha512-DyYHfIYwAJmjAjSSPKANxI8bFY9YtFrgkAfinBojQ8YJTOuOuav64tMUJv584SES4xl74PmuaevIyaLESHdTAA=="
+    },
     "hex-rgb@4.3.0": {
       "integrity": "sha512-Ox1pJVrDCyGHMG9CFg1tmrRUMRPRsAWYc/PinY0XzJU4K7y7vjNoLKIQ7BR5UJMCxNN8EM1MNDmHWA/B3aZUuw=="
     },
+    "iterate-object@1.3.5": {
+      "integrity": "sha512-eL23u8oFooYTq6TtJKjp2RYjZnCkUYQvC0T/6fJfWykXJ3quvdDdzKZ3CEjy8b3JGOvLTjDYMEMIp5243R906A=="
+    },
+    "js-yaml@3.14.1": {
+      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+      "dependencies": [
+        "argparse",
+        "esprima"
+      ],
+      "bin": true
+    },
     "linebreak@1.1.0": {
       "integrity": "sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==",
       "dependencies": [
···
         "unicode-trie"
       ]
     },
+    "minimist@1.2.8": {
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="
+    },
+    "mkdirp@0.5.6": {
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dependencies": [
+        "minimist"
+      ],
+      "bin": true
+    },
+    "months@1.2.0": {
+      "integrity": "sha512-zFM7hUpziSYGk2DNObYGWgHdRRxAOgjl8CC1Rbl50p/q0rGDsREfk0nbxxmSIquVi/lEAuUY8nwbwkZ8biNCOQ=="
+    },
+    "noop6@1.0.10": {
+      "integrity": "sha512-WZvuCILZFZHK+WuqCQwxLBGllkBK1ct8s8Mu9FMDbEsBE6/bqNxyFGbX7Xky+6bYFL8X2Ou4Cis4CJyrwXLvQA=="
+    },
     "pako@0.2.9": {
       "integrity": "sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA=="
     },
     "parse-css-color@0.2.1": {
       "integrity": "sha512-bwS/GGIFV3b6KS4uwpzCFj4w297Yl3uqnSgIPsoQkx7GMLROXfMnWvxfNkL0oh8HVhZA4hvJoEoEIqonfJ3BWg==",
       "dependencies": [
-        "color-name",
+        "color-name@1.1.4",
         "hex-rgb"
       ]
     },
+    "parse-it@1.0.11": {
+      "integrity": "sha512-1OWDPQNF7eUxkqPdP4vFu96QnVwQjy2zag5CZcF3Ipd12s1iu8nPpgNBsda0tgZlj04vSrIZ5DQr2bqp5Cn6UQ==",
+      "dependencies": [
+        "regex-escape"
+      ]
+    },
     "postcss-value-parser@4.2.0": {
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
···
     },
     "preact@10.27.1": {
       "integrity": "sha512-V79raXEWch/rbqoNc7nT9E4ep7lu+mI3+sBmfRD4i1M73R3WLYcCtdI0ibxGVf4eQL8ZIz2nFacqEC+rmnOORQ=="
+    },
+    "regex-escape@3.4.11": {
+      "integrity": "sha512-051l4Hl/0HoJwTvNztrWVjoxLiseSfCrDgWqwR1cnGM/nyQSeIjmvti5zZ7HzOmsXDPaJ2k0iFxQ6/WNpJD5wQ=="
     },
     "satori@0.10.14": {
       "integrity": "sha512-abovcqmwl97WKioxpkfuMeZmndB1TuDFY/R+FymrZyiGP+pMYomvgSzVPnbNMWHHESOPosVHGL352oFbdAnJcA==",
···
         "yoga-layout"
       ]
     },
+    "sliced@1.0.1": {
+      "integrity": "sha512-VZBmZP8WU3sMOZm1bdgTadsQbcscK0UM8oKxKVBs4XAhUo2Xxzm/OFMGBkPusxw9xL3Uy8LrzEqGqJhclsr0yA=="
+    },
+    "sprintf-js@1.0.3": {
+      "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
+    },
+    "static-methods@1.0.13": {
+      "integrity": "sha512-EFiLdwFlgLQuRib6tFOg63H2RcVG2pWIh1/Xm9BtJeHSgcndYFmlDh60XzgUXsrSw/CvWzRTw4RwP7I/4U5Yng=="
+    },
+    "streamp@2.2.9": {
+      "integrity": "sha512-O9sQ0Xhca952frhlM84JEGc9a3IuBFcpsv/PemwBAzSo9Lpq9GpYUwOHVZrmda/tklqqV5hEqKp9XmN3wWpIIw==",
+      "dependencies": [
+        "mkdirp",
+        "ul"
+      ]
+    },
     "string.prototype.codepointat@0.2.1": {
       "integrity": "sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg=="
     },
+    "supports-color@3.2.3": {
+      "integrity": "sha512-Jds2VIYDrlp5ui7t8abHN2bjAu4LV/q4N2KivFPpGH0lrka0BMq/33AmECUXlKPcHigkNaqfXRENFju+rlcy+A==",
+      "dependencies": [
+        "has-flag"
+      ]
+    },
     "tiny-inflate@1.0.3": {
       "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw=="
+    },
+    "tinyreq@3.4.3": {
+      "integrity": "sha512-28nKVsWONtEPo0Tlo0cZ24nuLTtcgPKY+89F++cFGXJDhR5GSQ2kThVTIJQ3I8kutxaPCQg5FsDNf8ZSz3dZTg==",
+      "dependencies": [
+        "assured",
+        "follow-redirects",
+        "noop6",
+        "ul"
+      ]
+    },
+    "typpy@2.4.0": {
+      "integrity": "sha512-a16Uv5doNtvHzaG4wZCHmXN+l9xxmTMpyODtPz7B3DSTsDVNXilTSJGuNw68sUh0Un4bf+ghRMbEcJCI6r06mQ==",
+      "dependencies": [
+        "function.name"
+      ]
+    },
+    "ul@5.2.16": {
+      "integrity": "sha512-v1YrSEsJZpJsywzF/MKgsQwMdOwBlwwmNiUOJh/yX6FHrq7dYjeua1YOhLV0q0KioqEFZC4P7MsKmpEsGdZz3w==",
+      "dependencies": [
+        "deffy",
+        "typpy"
+      ]
     },
     "undici-types@6.21.0": {
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="
···
     "dependencies": [
       "npm:@takumi-rs/core@~0.29.8",
       "npm:@takumi-rs/helpers@~0.29.8",
+      "npm:github-colors@^2.2.21",
       "npm:preact-render-to-string@^6.6.1",
       "npm:preact@^10.27.1"
     ]

src/components/Layout.tsx

···
 const Layout = ({
   children,
   head,
-  title = "TANGLED://SEARCH_v1.2.1",
+  title = "TANGLED://SEARCH_v1.3.0",
 }: {
   children: ComponentChildren;
   head?: ComponentChildren;

src/components/RepoCard.tsx

···
+import githubColors from "github-colors";
+
+interface Language {
+  name: string;
+  percentage: number;
+  size: number;
+}
+
 interface RepoCardProps {
   repoName: string;
   ownerHandle: string;
···
   starCount: number;
   createdAt: string;
   avatarSrc?: string;
+  languages?: Language[];
 }
 
 const RepoCard = ({
···
   starCount,
   createdAt,
   avatarSrc,
+  languages,
 }: RepoCardProps) => (
   <div
     style={{
···
     >
       {description || "NO_DESCRIPTION_AVAILABLE"}
     </div>
+
+    {/* Language breakdown */}
+    {languages && languages.length > 0 && (
+      <div style={{ marginBottom: "24px", display: "flex", flexDirection: "column" }}>
+        <div
+          style={{
+            fontSize: "12px",
+            color: "#06b6d4",
+            textTransform: "uppercase",
+            letterSpacing: "1px",
+            marginBottom: "8px",
+            display: "flex",
+          }}
+        >
+          LANGUAGE_BREAKDOWN
+        </div>
+        
+        {/* Language bar */}
+        <div
+          style={{
+            display: "flex",
+            height: "8px",
+            backgroundColor: "#111111",
+            borderRadius: "4px",
+            overflow: "hidden",
+            marginBottom: "12px",
+          }}
+        >
+          {languages.map((lang) => (
+            <div
+              style={{
+                width: `${lang.percentage}%`,
+                backgroundColor: githubColors.get(lang.name)?.color || "#888888",
+                height: "100%",
+              }}
+            />
+          ))}
+        </div>
+        
+        {/* Language legend */}
+        <div
+          style={{
+            display: "flex",
+            flexWrap: "wrap",
+            gap: "12px",
+          }}
+        >
+          {languages.map((lang) => (
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: "6px",
+                fontSize: "12px",
+              }}
+            >
+              <div
+                style={{
+                  width: "10px",
+                  height: "10px",
+                  borderRadius: "2px",
+                  backgroundColor: githubColors.get(lang.name)?.color || "#888888",
+                }}
+              />
+              <span style={{ color: "#94a3b8", display: "flex", gap: "8px" }}>
+                <span>{lang.name}</span>
+                <span>{lang.percentage.toFixed(1)}%</span>
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    )}
 
     {/* Footer with star count and date */}
     <div

src/components/SearchPage.tsx

···
             TANGLED<span class="text-pink-400">.SH</span>
           </h1>
           <div class="text-green-400 text-xs sm:text-sm font-light">
-            REPO_SEARCH v1.2.1 // AT_PROTOCOL_INTERFACE
+            REPO_SEARCH v1.3.0 // AT_PROTOCOL_INTERFACE
           </div>
         </div>
 

src/main.tsx

···
         console.error("Error fetching star count:", error);
       }
 
+      // Fetch language data from knot API
+      let languages: Array<{ name: string; percentage: number; size: number }> =
+        [];
+      if (repoRecord.value.knot) {
+        try {
+          const languageResponse = await fetch(
+            `https://${repoRecord.value.knot}/xrpc/sh.tangled.repo.languages?repo=${repoRecord.did}/${repoRecord.value.name}`
+          );
+          if (languageResponse.ok) {
+            const languageData = await languageResponse.json();
+            languages = languageData.languages || [];
+            // Sort languages by percentage descending
+            languages.sort((a, b) => b.percentage - a.percentage);
+          }
+        } catch (error) {
+          console.error("Error fetching language data:", error);
+        }
+      }
+
       // Set up fonts for Takumi (including emoji font)
       const [fontBuffer, emojiFontBuffer] = await Promise.all([
         fetch(
···
           starCount={starCount}
           createdAt={repoRecord.value.createdAt}
           avatarSrc={avatarSrc}
+          languages={languages}
         />
       );