Handle user and org avatars (#816)

Currently if there is no avatar then the space header can display a
broken image link.

This PR adds a simple check to see if the avatar exists. If it doesn't
then we don't add the DOM for it.

I decided to do it outside of the 'component' rendering just to keep
things cleaner + sync after the main function but I'm happy to change
this.

Could be optimised to make the fetches in parallel but the difference is
probably minor in most cases.

Screenshot:

<img width="911" alt="Screenshot 2024-07-23 at 10 19 56"
src="https://github.com/user-attachments/assets/29b70a51-d2a8-4352-95ab-cc29e37b7c53">


cc @enzostvs @coyotte508 @julien-c

---------

Co-authored-by: enzo <[email protected]>

packages/space-header/src/header/components/content/avatar.ts

@@ -1,6 +1,8 @@
-export const Avatar = (username: string): HTMLImageElement => {
+export const Avatar = (username: string, type: "user" | "org" = "user"): HTMLImageElement => {
+	const route = type === "user" ? "users" : "organizations";
+
 	const element = document.createElement("img");
-	element.src = `https://huggingface.co/api/users/${username}/avatar`;
+	element.src = `https://huggingface.co/api/${route}/${username}/avatar`;
 
 	element.style.width = "0.875rem";
 	element.style.height = "0.875rem";

packages/space-header/src/header/components/content/index.ts

@@ -15,7 +15,9 @@ export const Content = (space: Space): HTMLDivElement => {
 	content.style.paddingRight = "12px";
 	content.style.height = "40px";
 
-	content.appendChild(Avatar(space.author));
+	if (space.type !== "unknown") {
+		content.appendChild(Avatar(space.author, space.type));
+	}
 	content.appendChild(Username(space.author));
 	content.appendChild(Separation());
 	content.appendChild(Namespace(space.id));

packages/space-header/src/index.ts

@@ -3,7 +3,8 @@ import type { Options, Space, Header } from "./type";
 import { inject_fonts } from "./inject_fonts";
 
 import { create } from "./header/create";
-import { get_space } from "./get_space";
+import { check_avatar } from "./utils/check_avatar";
+import { get_space } from "./utils/get_space";
 import { inject } from "./inject";
 
 async function main(initialSpace: string | Space, options?: Options) {
@@ -27,6 +28,9 @@ async function main(initialSpace: string | Space, options?: Options) {
 		space = initialSpace;
 	}
 
+	const [user, org] = await Promise.all([check_avatar(space.author, "user"), check_avatar(space.author, "org")]);
+	space.type = user ? "user" : org ? "org" : "unknown";
+
 	const mini_header_element = create(space as Space);
 	inject(mini_header_element, options);
 

packages/space-header/src/type.ts

@@ -2,6 +2,7 @@ export interface Space {
 	id: string;
 	likes: number;
 	author: string;
+	type?: "user" | "org" | "unknown";
 }
 
 export interface User {

packages/space-header/src/utils/check_avatar.ts

@@ -0,0 +1,10 @@
+export const check_avatar = async (username: string, type: "user" | "org" = "user"): Promise<boolean> => {
+	const route = type === "user" ? "users" : "organizations";
+
+	try {
+		const response = await fetch(`https://huggingface.co/api/${route}/${username}/avatar`);
+		return response.ok;
+	} catch (error) {
+		return false;
+	}
+};

packages/space-header/src/get_space.ts → packages/space-header/src/utils/get_space.ts

@@ -1,9 +1,10 @@
-import type { Space } from "./type";
+import type { Space } from "./../type";
 
 export const get_space = async (space_id: string): Promise<Space | null> => {
 	try {
 		const response = await fetch(`https://huggingface.co/api/spaces/${space_id}`);
 		const data = await response.json();
+		console.log(data);
 		return data as Space;
 	} catch (error) {
 		return null;