DOCSEARCHbyAlgolia
Submit Docs

Sublay Infrastructure Platform

repository·main·Indexed 41 days ago

https://github.com/sublay-io/monorepo

An infrastructure platform providing pre-modeled backend bundles for social features like chat, comments, notifications, and AI search. Sublay offers a unified SDK family for React, React Native, Expo, and Node.js, along with a CLI to install editable, shadcn-style UI components directly into your project source tree.

Tokens
698.1K
Snippets
1.9K
Records
3.1K
Agent score
48%

What's inside Sublay

  1. Overview of Sublay platform

    main
    Sublay provides infrastructure for user-powered products by offering pre-modeled bundles for common application layers such as comments, notifications, files, search, and chat. Instead of rebuilding these complex systems, developers can install specific bundles via the Sublay dashboard and interact with them through a unified SDK. All bundles attach to a single shared entity model, ensuring schema consistency across your project.

  2. Overview of Threaded Comment features

    main

    Sublay provides a comprehensive, Reddit-style threaded comment system with the following capabilities:

    • Unlimited Nesting: Infinite branching conversation threads with visual indentation and connection lines.
    • Voting System: Upvote/downvote functionality with net score display (requires authentication).
    • Collapsible Threads: Ability to collapse/expand entire comment chains to manage long discussions.
    • @ Mentions: Autocomplete user tagging that integrates with otherUserClickCallback.
    • Moderation: Built-in reporting system for users and a moderation toolkit for admins via the Sublay dashboard.
    • Real-Time Updates: Automatic updates for new comments powered by @replyke/react-js and WebSockets (no configuration required).
    • Accessibility: Semantic HTML, keyboard navigation, and ARIA labels.

  3. Understand Social Comments features

    main

    The Sublay social comment system provides an Instagram-style engagement experience. Key features include:

    • Single-Level Nesting: Supports a maximum of 2 levels (a top-level comment and its direct replies) to maintain conversation clarity.
    • Heart/Like System: Users can interact with comments using a heart icon (❤️). Each user is limited to one like per comment and can unlike a comment. There is no downvote functionality.
    • Sorting Options: Built-in support for switching between Top (most liked), New (newest), and Old (oldest) comment views.
    • @ Mentions: Supports user tagging with autocomplete functionality.
    • Management Tools: Comment authors can edit or delete their own comments, and users can report inappropriate content via an action menu.
    • Real-Time & UI: Includes automatic real-time updates for new comments and full support for Dark Mode (via inline styles or Tailwind).

  4. Choose a Sublay integration method

    main

    Sublay provides two primary integration paths based on your application's architecture and framework:

    1. React & React Native SDK (Recommended for React developers): Best for frontend applications built with React or React Native. It provides automatic token management, built-in state management, optimized API calls, and optional pre-built UI components with full TypeScript support.

    2. REST API (For other frameworks and server-side): Best for Vue, Angular, Svelte, or server-to-server communication. This offers maximum flexibility but requires manual token management and state handling. You can use the Vanilla JS package for client-side non-React apps or the NodeJS package for backend operations.

    Important Production Requirement: To use Sublay in a web application in production, you must whitelist your domain in your project's Sublay dashboard.

  5. Compare Sublay comment components

    main

    Sublay provides three primary components for engagement and notifications. Choose based on your required nesting depth, voting mechanics, and target platform.

    Available Components

    1. Threaded Comments (comments-threaded)

      • Style: Reddit-style threaded discussions.
      • Features: Unlimited nesting depth, upvote/downvote with scores, visual threading lines, and collapsible threads.
      • Best For: Forums, technical discussions, and complex conversations.

    2. Social Comments (comments-social)

      • Style: Instagram-style social comments.
      • Features: Single-level nesting (max 2 levels), heart/like system (no dislikes), and Top/New/Old sorting.
      • Best For: Social media, quick interactions, and positive-only engagement.

    3. Notification Control (notifications-control)

      • Style: Dropdown notification bell.
      • Features: Real-time updates, smart viewport positioning, mark as read, and infinite scroll.
      • Best For: Managing user alerts and notifications.

    Comparison Table

    FeatureThreaded CommentsSocial Comments
    NestingUnlimited depth2 levels (comments + replies)
    VotingUpvote/downvote with scoreHeart/like only
    Visual StyleThreading lines, indentationFlat, minimal design
    SortingBest/Top (by votes)Top/New/Old
    Collapsing✅ Collapsible threads❌ No collapsing

    Platform Support

    PlatformThreaded CommentsSocial CommentsNotification Control
    React (Web)✅✅✅
    React Native✅✅❌
    Expo✅✅❌

  6. Choose an authentication mode for Sublay

    main

    Sublay supports three authentication modes that can be used independently or together in the same project:

    1. Built-in Auth: Register and sign in users with email and password. Sublay manages credentials, tokens, and the password reset flow.
    2. External Auth: Use your own authentication system. You sign a JWT with your project's private key and exchange it for Sublay tokens.
    3. OAuth: Use a redirect-based OAuth 2.0 flow for Google, GitHub, Apple, or Facebook.

    Additionally, Sublay supports Multi-Account functionality, allowing users to be signed into multiple accounts simultaneously and switch between them.

  7. Overview of the Notification Control component

    main

    The Notification Control is a dropdown component designed for navigation bars and headers, similar to the notification bells found on GitHub or LinkedIn. It displays an unread count badge on a trigger element and opens a dropdown list of real-time notifications when clicked.

    Key Capabilities:

    • Real-Time Updates: Automatically updates when new notifications arrive.
    • Smart Positioning: The dropdown stays within viewport bounds to prevent overflow.
    • Infinite Scroll: Loads more notifications on demand (starting with 10).
    • Read Management: Supports marking individual notifications or all notifications as read.
    • Theme Support: Supports light, dark, and auto modes via inline styles and Tailwind variants.

    Important Distinction: This is a dropdown control, not a full-page inbox. If you need to build a dedicated notifications page, use the useAppNotifications hook from @sublay/react-js instead.

  8. Overview of Threaded Comments

    main

    Threaded Comments is a Reddit-style comment system designed for deep, structured conversations. It supports unlimited nesting depth, allowing users to create branching conversation threads.

    Key Features:

    • Unlimited Nesting: Infinite depth for replies.
    • Upvote/Downvote System: Reddit-style voting with visible scores.
    • Visual Threading: Indentation and connection lines to show hierarchy.
    • Collapsible Threads: Ability to collapse entire chains for easier navigation.
    • @ Mentions: Clickable user tagging with autocomplete.
    • Highlighted Comments: Support for deep-linking to specific comments.
    • Moderation: Built-in edit/delete for authors and reporting/moderation tools for admins.

  9. What is an Entity in Sublay?

    main

    An entity is the fundamental data unit in Sublay. It is a highly flexible abstraction that represents the core content of your application. Because entities are context-dependent, they can represent any object that users interact with.

    Common examples include:

    • Social Media: A single post.
    • Marketplace: A product or a listing.
    • Blog: An article.
    • Personal Website: A static page (e.g., an 'About' page).

    Entities serve as the backbone for all other Sublay features; without them, there is no content to attach comments, votes, or collections to.

  10. Overview of Sublay Bundles

    main

    Sublay provides pre-modeled backend layers called bundles. Every project includes the core bundle (users, authentication, OAuth) by default. You can install additional bundles from the Sublay dashboard to add specific functionality to your project schema.

    Key Bundles:

    • entities: Base content unit (posts, articles) with views/drafts. Requires entities for comments and collections.
    • comments: Threaded discussions on entities.
    • reactions: Emoji reactions on entities and comments.
    • files-images: File and image uploads.
    • follows: One-way follow relationships.
    • connections: Bidirectional connection requests.
    • spaces: Hierarchical communities with roles/rules.
    • workspaces: SaaS/team workspaces.
    • chat: Real-time 1:1 and group conversations.
    • collections: User-owned bookmarks/folders.
    • events: Event management and RSVP.
    • moderation: Reports and user blocking.
    • notifications: In-app notification fan-out.
    • push: Native push delivery.
    • reputation: Per-space and overall user reputation.
    • ai-search: Semantic search and AI endpoints. Requires ai-search for interest-matching.
    • interest-matching: Activity-derived interest facets.

  11. Overview of NotificationControl

    main

    The NotificationControl is a lightweight dropdown component designed for navigation bars and headers. It functions like a notification bell (similar to GitHub or LinkedIn), displaying an unread count badge and a dropdown list of real-time notifications when clicked.

    Key Capabilities:

    • Real-Time Updates: Automatically updates when new notifications arrive via Sublay's notification system.
    • Smart Positioning: The dropdown automatically adjusts to stay within viewport bounds.
    • Infinite Scroll: Loads notifications in batches (starting with 10) as the user scrolls.
    • Read Management: Supports marking individual notifications or all notifications as read.
    • Unread Badge: Displays a real-time unread count on the trigger icon.
    • Theme Support: Supports light and dark modes via inline styles or Tailwind CSS.

    Note: This is a dropdown component, not a full-page inbox. For a full-page notifications center, use the useAppNotifications hook from @replyke/react-js.

  12. Overview of Social Comments component

    main

    The Social Comments component is an Instagram-style social engagement system designed for minimal, mobile-first experiences. It supports a maximum of 2 levels of nesting (comments and replies) and features a positive-only engagement model using hearts/likes.

    Key Capabilities:

    • Single-level nesting: Supports comments and replies (max 2 levels).
    • Heart/Like System: Positive-only engagement (no downvotes).
    • Sorting: Built-in support for Top, New, and Old sorting.
    • @ Mentions: Includes autocomplete suggestions for tagging users.
    • Real-Time Updates: Automatically updates when new comments arrive.

    When to use:

    • Use for social media platforms, photo/video sharing, and brand engagement.
    • Do not use for deep technical discussions; use the Threaded Comments component instead. Do not use if your platform requires voting/scoring or complex threading.