GithubActivity

Code

import { GithubActivity, type GithubCommit, type GithubRun } from "@fadymondy/nasaq/web";declare const commits: GithubCommit[];declare const runs: GithubRun[];export function Repo() {  return (    <GithubActivity      repo={{ owner: "acme", name: "storefront", href: "https://github.com/acme/storefront" }}      commits={commits}      runs={runs}      onRerun={async (id) => {        await fetch(`/api/runs/${id}/rerun`, { method: "POST" });      }}    />  );}

Developer Tools · beta

Live examples and controls: GithubActivity in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/github-activity.json

What is happening in a repository, in one card: a merged timeline of everything, and a tab each for commits, pull requests, workflow runs and deployments. Every row has its status, the author and a link to GitHub. It has no backend and does not call GitHub: you fetch the feeds (a GitHub App, or the Mahaam GitHub tools) and pass them in. It uses the official GitHub mark, reused from GitHubLogo in oauth-buttons.

When to useCopy Anchor Link

• A project or deploy page that shows the health of the repository next to the product.
• A dashboard that needs commits, PRs, CI and deploys together, newest first.

When not to useCopy Anchor Link

• Reading the full log of one run: use LogViewer or DeployView.
• Code review (diffs, comments): this only lists.

ImportCopy Anchor Link

import { GithubActivity } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { GithubActivity, type GithubCommit, type GithubRun } from "@fadymondy/nasaq/web";

declare const commits: GithubCommit[];
declare const runs: GithubRun[];

export function Repo() {
  return (
    <GithubActivity
      repo={{ owner: "acme", name: "storefront", href: "https://github.com/acme/storefront" }}
      commits={commits}
      runs={runs}
      onRerun={async (id) => {
        await fetch(`/api/runs/${id}/rerun`, { method: "POST" });
      }}
    />
  );
}

AnatomyCopy Anchor Link

GithubActivity                  data-slot="github-activity" (Card)
├─ header                       GitHubLogo, owner/name link, Refresh and Deploy buttons
├─ filter Input                 searches the message, author, branch, number
└─ Tabs (underline)             only for the feeds you pass
   ├─ Activity                  merged Timeline, newest first
   ├─ Commits                   short SHA, title, author, branch, checks
   ├─ Pull requests             state badge, labels, head to base, comments
   ├─ Workflow runs             Status, branch, event, duration, Re-run
   └─ Deployments               environment, ref, status, URL

APICopy Anchor Link

GithubActivity: every div prop except children, plus:

Helpers (pure, tested): shortSha, commitTitle, commitBody, runTone, pullTone, deploymentTone, isActive, matches, mergeActivity, countBy.

ExamplesCopy Anchor Link

Only pull requests

import { GithubActivity, type GithubPull } from "@fadymondy/nasaq/web";

declare const pulls: GithubPull[];

export const Pulls = () => <GithubActivity repo={{ owner: "acme", name: "storefront" }} pulls={pulls} hideSearch />;

AccessibilityCopy Anchor Link

• Tabs follow the WAI-ARIA tabs pattern (arrow keys, and they mirror in RTL).
• Status is an icon plus a word, never colour alone. Links say where they go, and external ones open in a new tab with rel="noopener noreferrer".
• Refresh, Deploy and Re-run show a busy state and errors appear in an Alert with role="alert".

RTL & i18nCopy Anchor Link

• English and Arabic strings follow the Nasaq locale. SHAs, branch names, refs, URLs and PR numbers are dir="ltr".
• The GitHub mark never mirrors. Direction icons flip.

Styling & tokensCopy Anchor Link

• Built on Card, Tabs, Timeline, Status, Badge, Avatar, DateTime and --nq-* tokens.
• Target [data-slot="github-activity"].

Do / Don'tCopy Anchor Link

• Do keep the token and API calls on your server. Pass only public data in.
• Do pass the feeds you have; a tab appears only for a feed that is given.
• Don't use another GitHub logo. Reuse the official mark from oauth-buttons.
• Don't put more than a few dozen items per feed. Page on the server and refresh.

RelatedCopy Anchor Link

• DeployView
• LogViewer
• Timeline

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-developer-tools-github-activity--docs