add Readme for space-header (#756)

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

.vscode/settings.json

@@ -13,5 +13,6 @@
 		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 	"cSpell.words": ["huggingface"],
-	"deno.enablePaths": ["./e2e/deno"]
+	"deno.enablePaths": ["./e2e/deno"],
+	"typescript.tsdk": "node_modules/typescript/lib"
 }

CODEOWNERS

@@ -21,3 +21,6 @@
 # Ownership for the gguf Package
 
 /packages/gguf @mishig25 @julien-c
+
+# Ownership for the space-header Package
+/packages/space-header @enzostvs

README.md

@@ -54,6 +54,7 @@ This is a collection of JS libraries to interact with the Hugging Face API, with
 - [@huggingface/agents](packages/agents/README.md): Interact with HF models through a natural language interface
 - [@huggingface/gguf](packages/gguf/README.md): A GGUF parser that works on remotely hosted files.
 - [@huggingface/tasks](packages/tasks/README.md): The definition files and source-of-truth for the Hub's main primitives like pipeline tasks, model libraries, etc.
+- [@huggingface/space-header](packages/space-header/README.md): Use the Space `mini_header` outside Hugging Face
 
 
 We use modern features to avoid polyfills and dependencies, so the libraries will only work on modern browsers / Node.js >= 18 / Bun / Deno.

docs/_toctree.yml

@@ -21,3 +21,13 @@
       title: Use Agents to run multi-modal workflows from a natural language API
     - local: agents/modules
       title: API Reference
+- title: "@huggingface/space-header"
+  isExpanded: true
+  sections:
+    - local: space-header/README
+      title: Use Space mini_header in your app
+- title: "@huggingface/gguf"
+  isExpanded: true
+  sections:
+    - local: gguf/README
+      title: Parse local and remote GGUF files

packages/doc-internal/package.json

@@ -5,14 +5,16 @@
 	"description": "Package to generate doc for other @huggingface packages",
 	"private": true,
 	"scripts": {
-		"start": "pnpm run fix-cdn-versions && pnpm run doc-hub && pnpm run doc-inference && pnpm run doc-agents && cp ../../README.md ../../docs/index.md && pnpm run update-toc && pnpm run fix-md-links && pnpm run fix-md-headinghashlinks",
+		"start": "pnpm run fix-cdn-versions && pnpm run doc-hub && pnpm run doc-inference && pnpm run doc-agents && pnpm run doc-space-header && pnpm run doc-gguf && cp ../../README.md ../../docs/index.md && pnpm run update-toc && pnpm run fix-md-links && pnpm run fix-md-headinghashlinks",
 		"lint": "eslint --quiet --fix --ext .cjs,.ts .",
 		"lint:check": "eslint --ext .cjs,.ts .",
 		"format": "prettier --write .",
 		"format:check": "prettier --check .",
 		"doc-hub": "typedoc --tsconfig ../hub/tsconfig.json --githubPages false --plugin typedoc-plugin-markdown --out ../../docs/hub --hideBreadcrumbs --hideInPageTOC --sourceLinkTemplate https://github.com/huggingface/huggingface.js/blob/main/{path}#L{line} ../hub/index.ts",
 		"doc-inference": "typedoc --tsconfig ../inference/tsconfig.json --githubPages false --plugin typedoc-plugin-markdown --out ../../docs/inference --hideBreadcrumbs --hideInPageTOC --sourceLinkTemplate https://github.com/huggingface/huggingface.js/blob/main/{path}#L{line} ../inference/src/index.ts",
 		"doc-agents": "typedoc --tsconfig ../agents/tsconfig.json --githubPages false --plugin typedoc-plugin-markdown --out ../../docs/agents --hideBreadcrumbs --hideInPageTOC --sourceLinkTemplate https://github.com/huggingface/huggingface.js/blob/main/{path}#L{line} ../agents/src/index.ts",
+		"doc-gguf": "mkdir -p ../../docs/gguf && cp ../../packages/gguf/README.md ../../docs/gguf/README.md",
+		"doc-space-header": "mkdir -p ../../docs/space-header && cp ../../packages/space-header/README.md ../../docs/space-header/README.md",
 		"update-toc": "tsx update-toc.ts",
 		"fix-cdn-versions": "tsx fix-cdn-versions.ts",
 		"fix-md-links": "tsx fix-md-links.ts",

packages/space-header/README.md

@@ -0,0 +1,59 @@
+# 🤗 Hugging Face Space Header
+
+A Typescript powered wrapper for the Space `mini_header` feature.
+
+## Install
+
+```console
+pnpm add @huggingface/space-header
+
+npm add @huggingface/space-header
+
+yarn add @huggingface/space-header
+```
+
+### Deno
+
+```ts
+// esm.sh
+import { init } from "https://esm.sh/@huggingface/space-header"
+// or npm:
+import { init } from "npm:@huggingface/space-header"
+```
+
+### Initialize
+```ts
+import { init } from "@huggingface/space-header";
+
+// ...
+
+init(":user/:spaceId");
+// init("enzostvs/lora-studio") for example
+```
+❗Important note: The `init` method must be called on the client side.
+
+## Usage
+
+Uses the `target` option to inject the space-header into another DOM element
+
+```ts
+const app = document.getElementById("app");
+
+// ...
+
+init(":user/:spaceId", {
+  target: app
+});
+```
+
+If you already have the space data, you can also pass it as a parameter to avoid a fetch
+
+```ts
+init(space);
+
+// space = {
+//  id: string;
+//  likes: number;
+//  author: string;
+// }
+```

packages/space-header/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@huggingface/space-header",
-	"version": "1.0.0",
+	"version": "0.0.0",
 	"description": "",
 	"main": "index.js",
 	"type": "module",
@@ -15,7 +15,7 @@
 		"prepublishOnly": "pnpm run build"
 	},
 	"keywords": [],
-	"author": "",
+	"author": "Hugging Face",
 	"license": "ISC",
 	"devDependencies": {
 		"tsup": "^8.1.0",