const deno_lock_response = await fetch(
https://api.github.com/repos/${owner_repo}/contents/deno.lock,
{
method: "GET",
headers: headersList,
},
);
const deno_lock_data = await deno_lock_response.json();

if (
!("documentation_url" in deno_lock_data && "message" in deno_lock_data)
) {
return {
name: owner_repo.split("/")[1],
favdeps: ["deno"],
dependencies: { deno: "latest" },
pkg_type: "Deno",
} as any as DecodedPackageJson;
}
const deno_json_response = await fetch(
https://api.github.com/repos/${owner_repo}/contents/deno.json,
{
method: "GET",
headers: headersList,
},
);
const deno_json_data = await deno_json_response.json();

if (
!("documentation_url" in deno_json_data && "message" in deno_json_data)
) {
return {
name: owner_repo.split("/")[1],
favdeps: ["deno"],
dependencies: { deno: "latest" },
pkg_type: "Deno",
} as any as DecodedPackageJson;
}

const bun_lock_response = await fetch(
https://api.github.com/repos/${owner_repo}/contents/bun.lock,
{
method: "GET",
headers: headersList,
},
);
const bun_lock_data = await bun_lock_response.json();
if (!("documentation_url" in bun_lock_data && "message" in bun_lock_data)) {
return {
name: owner_repo.split("/")[1],
favdeps: ["bun"],
dependencies: { bun: "latest" },
pkg_type: "Bun",
} as any as DecodedPackageJson;
}

return data as DecodedPackageJson;
} catch (error) {
logError("error getOneRepoPackageJson >>>>>>>>>>>> ", error);
return error as DecodedPackageJson;
}
}

ts function base64ToUint8Array(base64: string): Uint8Array { const raw = atob(base64); const array = new Uint8Array(raw.length); for (let i = 0; i < raw.length; i++) { array[i] = raw.charCodeAt(i); } return array; }

ts // modify package.json to addthe pkg_type export function modifyPackageJson(pgkjson: DecodedPackageJson) { if ("name" in pgkjson) { const typeCondition = pkgTypeCondition(pgkjson); pgkjson["pkg_type"] = typeCondition.pkg_type;

const alldeps = Object.keys(pgkjson.dependencies) .map((key) => { return key.split("^")[0]; }) .concat( Object.keys(pgkjson.devDependencies).map((key) => { return key.split("^")[0]; }), );

const favdeps = mostFaveDepsList.filter((key) => { return alldeps.find((dep) => { return dep.includes(key); }); });

pgkjson["favdeps"] = favdeps; return pgkjson; } return pgkjson; }

ts const viewer_token"ghp_0Bw5w5H5e8u7v9wjVBw5w5H5e8uw7W1e3z5n2vZr4P6qPq"; const repos = await fetchReposRecursivelyWithGQL({ viewer_token: gh_token, }); const reposPkgJson: DecodedPackageJson[] = [];

if (all_repos.data?.data) { const reposList = all_repos.data?.data.viewer.repositories.edges; for await (const repo of reposList) { const pkgjson = await getOneRepoPackageJson( repo.node.nameWithOwner, viewer_token, ); if ("message" in pkgjson && "documentation_url" in pkgjson) { continue; } if (pkgjson) { pkgjson.languages = repo.node.languages.edges; reposPkgJson.push(pkgjson); } } } return reposPkgJson;

sh npm i @visx/hierarchy @visx/responsive

ts export interface ViewerLibraries { highlighted_library_stats: Record<string, string>; library_stats: Record<string, string>; framework_stats: Record<string, string>; }

tsx const languages = Object.entries(libs?.highlighted_library_stats ?? {}) .map(([key, value]) => ({ key, value, }));

// initialize the pack const pack = React.useMemo( () => ({ children: languages, name: "root", radius: 0, distance: 0, }), [languages] );

// initialize the root const root = React.useMemo( () => hierarchy(pack) // d:{key:string;value:number} .sum((d: any) => { // // no("sum", d?.tier?.monthlyPriceInDollars) return 1 + d?.value; }) .sort((a, b) => (b.value ?? 0) - (a.value ?? 0)), [pack] );

tsx

<div className="w-full h-full flex flex-col items-center gap-2 pt-2">
<div className="w-full">
<ParentSize>
{({ width = 600 }) => { return width < 10 ? null : ( <div style={{ width, height: width, position: "relative", }}> <style dangerouslySetInnerHTML={{ __html: `

.spon-link { transition: all .2s ease; transform: translate(-50%, -50%); }

.spon-link:hover { z-index: 10; transform: translate(-50%, -50%) scale(1.1); }

.spon-link:hover .spon-tooltip { opacity: 1; } `, }} />
<Pack root={root} size={[width, width]} padding={width * 0.005}>
{(packData) => { // // no(" ===== PACK DATA ======= ", packData); const circles = packData.descendants().slice(1); // skip first layer // // no("========= CIRCLES DESCENDANT ======== ", circles); return (
<div>
{[...circles].reverse().map((circ, i) => { const circle = circ as any as Circle; const tooltipX = circle.x > width / 2 ? "left" : "right"; const tooltipY = circle.y > width / 2 ? "top" : "bottom";

return ( <a key={circle-${i}} href={https://github.com/${circle.data.key}} className={ spon-link ` + `absolute shadow-lg bg-white rounded-full z-0 } style={{ left: circle.x, top: circle.y, width: circle.r * 2, height: circle.r * 2, }}> <img key={circle-${i}} className={absolute bg-no-repeat bg-center bg-contain rounded-full w-[95%] h-[95%] dark:w-[100.5%] dark:h-[100.5%] left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 `} src={https://avatars0.githubusercontent.com/${ circle.data.key }?v=3&s=${Math.round(circle.r * 2)}`} /> <div className={twMerge( `spon-tooltip absolute text-sm bg-gray-800 text-white p-2 pointer-events-none transform opacity-0 shadow-xl rounded-lg flex flex-col items-center `,

tooltipX == "left" ? left-1/4 -translate-x-full : right-1/4 translate-x-full, tooltipY == "top" ? top-1/4 -translate-y-full : bottom-1/4 translate-y-full )}>
<p className={whitespace-nowrap font-bold}>{circle.data.key}</p>
</div>
</a>
); })}
</div>
); }}
</Pack>
</div>
); }}
</ParentSize>
</div>
</div>

ts src={https://avatars0.githubusercontent.com/${ circle.data.key }?v=3&s=${Math.round(circle.r * 2)}}
```
A more reliable solution might be to search the repository and save it's open-graph image in in the augment package JSON step.

That's enough over engineering for a day,
In the next part we'll adding a contact me form using NextJS server actions and try to make it as progressively enhancable as possible