feat(tools): add thumbnail (#1470)

src/routes/+layout.svelte

@@ -158,7 +158,7 @@
 
 	<!-- use those meta tags everywhere except on the share assistant page -->
 	<!-- feel free to refacto if there's a better way -->
-	{#if !$page.url.pathname.includes("/assistant/") && $page.route.id !== "/assistants" && !$page.url.pathname.includes("/models/")}
+	{#if !$page.url.pathname.includes("/assistant/") && $page.route.id !== "/assistants" && !$page.url.pathname.includes("/models/") && !$page.url.pathname.includes("/tools")}
 		<meta property="og:title" content={envPublic.PUBLIC_APP_NAME} />
 		<meta property="og:type" content="website" />
 		<meta property="og:url" content="{envPublic.PUBLIC_ORIGIN || $page.url.origin}{base}" />

src/routes/tools/+layout.svelte

@@ -1 +1,23 @@
+<script lang="ts">
+	import { env as envPublic } from "$env/dynamic/public";
+	import { isHuggingChat } from "$lib/utils/isHuggingChat";
+	import { base } from "$app/paths";
+	import { page } from "$app/stores";
+</script>
+
+<svelte:head>
+	{#if isHuggingChat}
+		<title>HuggingChat - Tools</title>
+		<meta property="og:title" content="HuggingChat - Tools" />
+		<meta property="og:type" content="link" />
+		<meta property="og:description" content="Browse HuggingChat tools made by the community." />
+		<meta
+			property="og:image"
+			content="{envPublic.PUBLIC_ORIGIN ||
+				$page.url.origin}{base}/{envPublic.PUBLIC_APP_ASSETS}/tools-thumbnail.png"
+		/>
+		<meta property="og:url" content={$page.url.href} />
+	{/if}
+</svelte:head>
+
 <slot />

src/routes/tools/+page.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { PageData } from "./$types";
 
-	import { env as envPublic } from "$env/dynamic/public";
 	import { isHuggingChat } from "$lib/utils/isHuggingChat";
 
 	import { goto } from "$app/navigation";
@@ -88,21 +87,6 @@
 	};
 </script>
 
-<svelte:head>
-	{#if isHuggingChat}
-		<title>HuggingChat - Tools</title>
-		<meta property="og:title" content="HuggingChat - Tools" />
-		<meta property="og:type" content="link" />
-		<meta property="og:description" content="Browse HuggingChat tools made by the community." />
-		<meta
-			property="og:image"
-			content="{envPublic.PUBLIC_ORIGIN ||
-				$page.url.origin}{base}/{envPublic.PUBLIC_APP_ASSETS}/tools-thumbnail.png"
-		/>
-		<meta property="og:url" content={$page.url.href} />
-	{/if}
-</svelte:head>
-
 <div class="scrollbar-custom mr-1 h-full overflow-y-auto py-12 max-sm:pt-8 md:py-24">
 	<div class="pt-42 mx-auto flex flex-col px-5 xl:w-[60rem] 2xl:w-[64rem]">
 		<div class="flex items-center">