softechlog-feed

Embeddable activity feed Web Component built with Angular Elements. Works in any frontend framework or plain HTML.

Load the script

<script src="https://cdn.softechlog.com/[email protected]/feed.js"></script>

Usage

<!-- Show all events for the current user -->
<softechlog-feed
  public-key="stl_pk_xxxxxxxxxxxx"
  actor-id="user_123"
></softechlog-feed>

<!-- Show events for a specific resource -->
<softechlog-feed
  public-key="stl_pk_xxxxxxxxxxxx"
  target-type="workspace"
  target-id="ws_abc"
></softechlog-feed>

In Angular

<softechlog-feed
  [attr.public-key]="publicKey"
  [attr.actor-id]="currentUser.id"
></softechlog-feed>

In React

<softechlog-feed public-key={publicKey} actor-id={user.id} />

Attributes

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | public-key | string | required | Your project's public key | | actor-id | string | — | Filter to a specific user | | target-type | string | — | Filter by resource type | | target-id | string | — | Filter by specific resource | | theme | light | dark | auto | auto | Color scheme | | limit | number | 25 | Events per page | | locale | string | browser | Locale for timestamps |

CSS custom properties

softechlog-feed {
  --stl-accent: #6366f1;
  --stl-bg: #ffffff;
  --stl-border: #e2e8f0;
  --stl-text: #0e1a2c;
  --stl-muted: #94a3b8;
  --stl-avatar-size: 32px;
}

Build

npm install
npm run build   # → dist/feed/ (Angular Elements bundle, ~45KB gzipped)