YapHub

Appearance

App Home & Interactions ​

This recording shows the complete flow: navigating the App Home, adding knowledge with a URL via the quick link, and watching the Notion page appear with the full extracted content embedded.

Features Demonstrated ​

  • App Home Dashboard — The central management console with statistics and category overview
  • Quick Action Buttons — Five one-click actions: Kennis toevoegen, Lijst toevoegen, Digest maken, Digest Delen, Lijst Instellingen
  • Quick Add Knowledge — Add a knowledge item via the "Kennis toevoegen" button or global shortcut
  • URL Content Extraction — Paste a URL and YapHub automatically fetches, extracts, and embeds the full article content
  • Notion Sync & Page Embedding — Watch the knowledge item appear in Notion with the full extracted article embedded as markdown

YapHub lives entirely inside Slack. The App Home tab serves as the central dashboard, and users interact with the system through message shortcuts, global shortcuts, and App Home buttons.

App Home Dashboard ​

The App Home tab is the primary interface. It's dynamically rebuilt every time a user opens it, showing real-time data from the backend.

What Users See ​

  1. Welcome Header — Personalised greeting: "Welkom bij Yappa Info Hub"
  2. Quick Action Buttons — One-click access to common actions:
    • Kennis toevoegen (Add Knowledge) — Opens the knowledge entry form
    • Lijst toevoegen (Add List) — Creates a new category
    • Digest maken (Create Digest) — Generates a digest for a category
    • Digest Delen (Share Digest) — Distributes a digest to subscribers
    • Lijst Instellingen (List Settings) — Configure category digest preferences
  3. Statistics — Shows total knowledge items and category count
  4. Category List — Each category displays its icon, name, item/digest counts, and an overflow menu with contextual actions

Quick Add Knowledge ​

Clicking "Kennis toevoegen" opens a modal with:

  • Titel (Title) — required, a descriptive name for the knowledge item
  • Inhoud (Content) — optional notes or context
  • Lijst (List) — dropdown to select which category to file it under
  • Tags — comma-separated tags for discoverability
  • URL — paste any article link for automatic content extraction

URL Content Extraction ​

When you paste a URL into the knowledge form, the backend automatically:

  1. Fetches the page via HTTP request
  2. Detects the content type (HTML, PDF, etc.)
  3. Extracts readable text from the HTML, stripping navigation, ads, and boilerplate
  4. Falls back to Jina Reader (r.jina.ai) for JavaScript-rendered or Cloudflare-protected pages
  5. Merges the extracted content with any notes you typed in the Content field
  6. Resolves the page title automatically if you left the Title field as default

Notion Sync & Page Embedding ​

The moment you click "Toevoegen", YapHub:

  1. Saves the knowledge item to the local database
  2. Creates a corresponding Notion page with all fields: title, content, tags, category, URL, metadata
  3. Embeds the full extracted article content as formatted markdown directly in the Notion page body
  4. Returns the Notion link in your DM confirmation

Message Shortcut ​

The "Add to YapHub" message action (available via the three-dot menu on any Slack message) lets users save any message as knowledge:

  1. User clicks ⋮ on a Slack message → selects "Add to YapHub"
  2. A modal opens, pre-filled with the message text
  3. If the message contains a URL, it's automatically extracted and pre-filled
  4. User adds a title, selects a category, and optionally adds tags
  5. On submit, the knowledge item is created, URL content is extracted, and everything syncs to Notion

Global Shortcut ​

The "Quick Add to YapHub" global shortcut (accessible from the search bar ⚡ icon) opens a blank knowledge entry form:

  1. User triggers the global shortcut
  2. A blank Add Knowledge modal opens
  3. User fills in title, content, optional URL, tags, and category
  4. On submit, the knowledge item is created and synced to Notion

Architecture ​

All Slack interactions are stateless — each event triggers fresh API calls to the Symfony backend, which handles all business logic and data persistence.