Skip to content

Commit

Permalink
add Readme for space-header
Browse files Browse the repository at this point in the history
  • Loading branch information
enzostvs committed Jun 17, 2024
1 parent 1f4eb84 commit baad7b4
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 1 deletion.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
59 changes: 59 additions & 0 deletions packages/space-header/README.md
Original file line number Diff line number Diff line change
@@ -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;
// }
```
2 changes: 1 addition & 1 deletion packages/space-header/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@huggingface/space-header",
"version": "1.0.0",
"version": "0.0.0",
"description": "",
"main": "index.js",
"type": "module",
Expand Down

0 comments on commit baad7b4

Please sign in to comment.