xgen-gallery

GitHub organization의 레포지토리를 보여주는 React 컴포넌트.

Install

npm install xgen-gallery

Usage

import { XgenGallery } from 'xgen-gallery';

function App() {
  return (
    <XgenGallery
      org="PlateerLab"
      token="ghp_xxx"  // optional, raises rate limit
      theme="dark"     // "dark" | "light"
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | org | string | required | GitHub organization name | | token | string | - | GitHub personal access token | | theme | "dark" \| "light" | "dark" | Color theme | | limit | number | - | Max repos to show | | onRepoClick | (repo: Repo) => void | - | Custom click handler (overrides built-in detail view) |

Features

• Repo list with search & language filter
• Repo detail with README rendering
• Demo tab: auto-extracts Python code blocks from README, examples/, or demo.json
• Dark/Light theme
• Zero config — just pass org

Demo Data Convention

Repos can provide curated demos by adding .xgen-gallery/demo.json:

{
  "snippets": [
    {
      "label": "Basic Usage",
      "code": "from my_package import hello\nprint(hello())",
      "expectedOutput": "Hello, World!"
    }
  ]
}

Priority: demo.json > examples/*.py > README python blocks