/* 
** FIXES
** This section contains fixes for things that are broken on the site as opposed to subjectively making the site look better
*/

/* 
** START Make API reference example code blocks overflow with a scrollbar
*/

p.whitespace-pre-line:has(> code:only-child){
    display: inline-grid;
}

p.whitespace-pre-line>code {
    overflow-x: auto;
    overflow-wrap: normal;
    scrollbar-width:none; /* overlay scrollbars may hide content on some devices */
}

/* 
** END Make API reference example code blocks overflow with a scrollbar
*/

/* 
** CUSTOMIZATIONS
** This section contains stylings rather than fixing anything that is broken on the site
*/

/* 
** Scale down the background image
*/

span.fixed{
    background-size: contain;
    min-height: 800px;
    background-attachment: initial !important;
}

/* 
** Make topbar navigation buttons like StackOne buttons
*/

nav > ul > li:not(#topbar-cta-button) > a.font-medium {
    font-weight: 600;
    letter-spacing: 0rem;
}

nav > ul > li:not(#topbar-cta-button) > a{
    border-radius: 8px;
    padding: 6px;
    font-size: 13px;
}

nav > ul > li:not(#topbar-cta-button) > a:hover{
    background-color: rgb(var(--gray-100));
}

nav > ul > li:not(#topbar-cta-button) > a:hover:is(.dark *){
    background-color: rgb(var(--gray-700));
}

/* Top call to action button */
li#topbar-cta-button a{
    padding: 6px 10px;
}

/* li#topbar-cta-button > a > span:hover{
    background-color: red;
} */

li#topbar-cta-button > a > span{
    border-radius: 12px;
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.15);
    background-color: #0A0A0A;
}

li#topbar-cta-button > a > span:is(.dark *){
    background-color: #3b3b3b;
}

/* Topbar tabs */
div.hidden div.h-full a.group{
    border-radius: 8px;
    margin-top: 10px;
    margin-right: -10px;
    padding: 10px 10px;
    height: 30px;

}

div.hidden div.h-full a.group:hover{
    background-color: rgb(var(--gray-100));
}

div.hidden div.h-full a.group:hover:is(.dark *){
    background-color: rgb(var(--gray-700));
}

/* Line under the tabs */
div.hidden div.h-full a.group div{
    left: 0;
    bottom: -8px;
    border-radius: 8px;
}

div.hidden div.h-full a.group div:not(.bg-primary){
    display: none;
}

/*  
** Change colors for note boxes from the default blue.
*/

.bg-sky-50\/50{
    background-color: rgba(255,251,235,.5);
}

.border-sky-500\/20{
    border-color: rgba(245,158,11,.2);
}

.text-sky-900{
    color: rgb(120 53 15/var(--tw-text-opacity));
}

.text-sky-500{
    color: rgb(251 191 36/var(--tw-text-opacity));
}

.bg-sky-50\/50:is(.dark *){
    background-color: rgba(236, 201, 61, 0.5);
}

.border-sky-500\/20:is(.dark *){
    border-color: rgba(245,158,11,.2);
}

.text-sky-900:is(.dark *){
    color: rgb(240 240 240/var(--tw-text-opacity));
}

.text-sky-500:is(.dark *){
    color: rgb(240 240 240/var(--tw-text-opacity));
}

/*
** Make the text bigger in note boxes
*/

div.text-sm > p{
    font-size: 0.95rem;
}

/* 
** Resize the logo in the top left of the site
*/

div#navbar img
{
    height: 20px;
}

/* 
** Align all table headers
*/

table th{
    text-align: left;
}

/* 
** Tooltips
*/

div[data-radix-popper-content-wrapper] div.bg-tooltip{
    background: #3B3B3B;
    max-width: 320px;
    border-radius: 10px;
    border: none;
    box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.2);
    padding: 8px 12px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 160%;
    letter-spacing: 0.02em;
    text-align: left;
}

/* 
** START Allows dropdown to be sticky and hide other menu items on scroll and hover
*/

div#sidebar-content{
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(var(--background-light)) 5%, rgb(var(--background-light)) 96%, rgba(255, 255, 255, 0) 100%);
    padding-left: 15px;
    padding-right: 10px;
    left: 0px;
}

div#sidebar-content:is(.dark *){
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(var(--background-dark)) 5%, rgb(var(--background-dark)) 96%, rgba(255, 255, 255, 0) 100%);
    padding-left: 15px;
    padding-right: 10px;
}

div.sticky{
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(var(--background-light)) 1%, rgb(var(--background-light)) 99%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

div.sticky:is(.dark *){
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgb(var(--background-dark)) 1%, rgb(var(--background-dark)) 99%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

#navigation-items button{
    position: sticky; 
    top: 20px;
}

#navigation-items button:is(.dark *){
    box-shadow: 5px 0px 10px 10px rgb(var(--background-dark));
}

#navigation-items button:hover{
    background-color: rgb(var(--gray-100));
}

#navigation-items button:hover:is(.dark *){
    background-color: rgb(var(--gray-800));
}

/* 
** END Allows dropdown to be sticky and hide other menu items on scroll and hover
*/

/* 
** Heading spacing
*/

div.eyebrow{
    margin-bottom: 22px;
}

.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){
    margin-top: 1.6em;
}

.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){
    margin-top: 1.2em;
}

/* 
** Mermaid diagrams
*/

svg[aria-roledescription="flowchart-v2"], svg[aria-roledescription="er"] {
    background-image: url(https://mintlify.s3.us-west-1.amazonaws.com/stackone-60/images/background/dots.svg);
    background-color: #ffffff;
    border-radius: 12px;
    border-color: #bdbdbd;
    border-width: 1px;
    border-style: solid;
    padding: 4px;
}

svg[aria-roledescription="flowchart-v2"]:is(.dark *), svg[aria-roledescription="er"]:is(.dark *) {
    background-color: #555555;
    border-color: #888888;
}

svg[aria-roledescription="flowchart-v2"]:is(.dark *) p{
    color: rgb(var(--gray-700));
}

div:has(> svg[aria-roledescription="flowchart-v2"]), div:has(> svg[aria-roledescription="er"]) {
    display: flex;
    justify-content: center; 
    align-items: center;     
}

.mint-rounded-md {
    border-radius: 0.375rem
}

#!/usr/bin/env node

/**
 * This script installs Git hooks for the project.
 * It copies the pre-commit hook to the .git/hooks directory and makes it executable.
 * 
 * Usage:
 *   node scripts/install-hooks.js
 */

const fs = require('fs');
const path = require('path');
const { execSync } = require('child_process');

// Get the root directory of the Git repository
const gitRoot = execSync('git rev-parse --show-toplevel', { encoding: 'utf8' }).trim();

// Paths for hooks
const hooksDir = path.join(gitRoot, '.git', 'hooks');
const preCommitSource = path.join(gitRoot, 'scripts', 'hooks', 'pre-commit');
const preCommitDest = path.join(hooksDir, 'pre-commit');

// Create hooks directory if it doesn't exist
if (!fs.existsSync(hooksDir)) {
  console.log(`Creating hooks directory: ${hooksDir}`);
  fs.mkdirSync(hooksDir, { recursive: true });
}

// Create scripts/hooks directory if it doesn't exist
const hooksSourceDir = path.join(gitRoot, 'scripts', 'hooks');
if (!fs.existsSync(hooksSourceDir)) {
  console.log(`Creating hooks source directory: ${hooksSourceDir}`);
  fs.mkdirSync(hooksSourceDir, { recursive: true });
}

// Create the pre-commit hook in the scripts/hooks directory
const preCommitContent = `#!/bin/sh

# Pre-commit hook to run wrap-images.js script
# This ensures all images in MDX files are properly wrapped with Frame tags

echo "Running wrap-images script to ensure all images are properly wrapped..."

# Get the directory of the git repository
REPO_ROOT=$(git rev-parse --show-toplevel)

# Get list of staged MDX files
STAGED_MDX_FILES=$(git diff --cached --name-only --diff-filter=ACMR | grep '\\.mdx$' || true)

if [ -z "$STAGED_MDX_FILES" ]; then
    echo "No staged MDX files found. Proceeding with commit..."
    exit 0
fi

# Process each staged MDX file
echo "Processing staged MDX files..."
for file in $STAGED_MDX_FILES; do
    echo "Checking $file"
    node "$REPO_ROOT/scripts/wrap-images.js" "$file"
    
    # Check if the script executed successfully
    if [ $? -ne 0 ]; then
        echo "Error: wrap-images script failed on $file. Aborting commit."
        exit 1
    fi
done

# Check if there are any changes in the staged MDX files after running the script
for file in $STAGED_MDX_FILES; do
    if [ -n "$(git diff --name-only "$file")" ]; then
        echo "Images were wrapped with Frame tags in $file. Please stage these changes and commit again."
        echo "Run 'git add $file' and try committing again."
        exit 1
    fi
done

echo "All images in staged MDX files are properly wrapped. Proceeding with commit..."
exit 0
`;

// Write the pre-commit hook to the scripts/hooks directory
console.log(`Creating pre-commit hook in: ${preCommitSource}`);
fs.writeFileSync(preCommitSource, preCommitContent, { mode: 0o755 });

// Copy the pre-commit hook to the .git/hooks directory
console.log(`Installing pre-commit hook to: ${preCommitDest}`);
fs.copyFileSync(preCommitSource, preCommitDest);

// Make the pre-commit hook executable
console.log('Making pre-commit hook executable');
fs.chmodSync(preCommitDest, 0o755);

console.log('Git hooks installed successfully!');
console.log('The pre-commit hook will now run the wrap-images.js script before each commit.'); 

#!/usr/bin/env node

/**
 * This script finds all .mdx files in the codebase and wraps markdown images
 * with <Frame> tags if they're not already wrapped.
 * 
 * Usage:
 *   node wrap-images.js                  # Process all .mdx files in the codebase
 *   node wrap-images.js path/to/file.mdx # Process a specific file
 *   node wrap-images.js --verbose        # Run with verbose logging
 *   node wrap-images.js path/to/file.mdx --verbose # Process a specific file with verbose logging
 */

const fs = require('fs');
const path = require('path');
const { promisify } = require('util');

const readdir = promisify(fs.readdir);
const readFile = promisify(fs.readFile);
const writeFile = promisify(fs.writeFile);

// Parse command line arguments
const args = process.argv.slice(2);
const verboseMode = args.includes('--verbose');
const fileArg = args.filter(arg => arg !== '--verbose')[0];

// Utility function for verbose logging
function verboseLog(...messages) {
    if (verboseMode) {
        console.log('[VERBOSE]', ...messages);
    }
}

// Regular expression to match markdown image syntax
const imageRegex = /!\[([^\]]*)\]$([^)]*)$/g;

/**
 * Recursively finds all .mdx files in a directory
 * @param {string} dir - Directory to search
 * @returns {Promise<string[]>} - Array of file paths
 */
async function findMdxFiles(dir) {
    const files = [];

    async function traverse(currentDir) {
        try {
            const entries = await readdir(currentDir, { withFileTypes: true });

            for (const entry of entries) {
                const fullPath = path.join(currentDir, entry.name);

                // Skip .git and node_modules directories
                if (entry.isDirectory() && !entry.name.startsWith('.') && entry.name !== 'node_modules') {
                    await traverse(fullPath);
                } else if (entry.isFile() && entry.name.endsWith('.mdx')) {
                    files.push(fullPath);
                }
            }
        } catch (error) {
            console.error(`Error reading directory ${currentDir}:`, error.message);
        }
    }
    await traverse(dir);
    return files;
}

/**
 * Processes a single .mdx file to wrap images with Frame tags
 * @param {string} filePath - Path to the file
 * @returns {Promise<boolean>} - Whether the file was updated
 */
async function processFile(filePath) {
    try {
        const content = await readFile(filePath, 'utf8');
        verboseLog(`Processing file: ${filePath}`);
        
        // Function to check if an image at a specific position is wrapped in Frame tags
        function isWrappedInFrame(fullContent, matchIndex, matchLength) {
            // Check for <Frame> before the image
            const beforeContent = fullContent.substring(0, matchIndex).trim();
            const hasFrameBefore = beforeContent.endsWith('<Frame>');
            
            // Check for </Frame> after the image
            const afterContent = fullContent.substring(matchIndex + matchLength).trim();
            const hasFrameAfter = afterContent.startsWith('</Frame>');
            
            return hasFrameBefore && hasFrameAfter;
        }
        
        // Find all image matches and replace unwrapped ones
        let lastIndex = 0;
        let match;
        let resultParts = [];
        let unwrappedCount = 0;
        
        while ((match = imageRegex.exec(content)) !== null) {
            const matchIndex = match.index;
            const matchText = match[0];
            const alt = match[1];
            const src = match[2];
            
            // Add content before this match
            resultParts.push(content.substring(lastIndex, matchIndex));
            
            // Check if this image is already wrapped
            if (isWrappedInFrame(content, matchIndex, matchText.length)) {
                verboseLog(`Skipping already wrapped image: ${src}`);
                resultParts.push(matchText);
            } else {
                verboseLog(`Wrapping image: ![${alt}](${src})`);
                // Check if previous content ends with a newline or is empty
                const prevContent = content.substring(0, matchIndex).trim();
                const needsNewline = prevContent.length > 0 && !prevContent.endsWith('\n');
                resultParts.push(`${needsNewline ? '\n' : ''}<Frame>\n${matchText}\n</Frame>`);
                unwrappedCount++;
            }
            
            lastIndex = matchIndex + matchText.length;
        }
        
        // Add any remaining content
        resultParts.push(content.substring(lastIndex));
        
        // If no images were wrapped, we're done
        if (unwrappedCount === 0) {
            console.log(`No unframed images found in ${filePath}`);
            return false;
        }
        
        // Join all parts and write back to the file
        const updatedContent = resultParts.join('');
        await writeFile(filePath, updatedContent, 'utf8');
        console.log(`Updated ${unwrappedCount} images in ${filePath}`);
        return true;
    } catch (error) {
        console.error(`Error processing ${filePath}:`, error.message);
        return false;
    }
}

/**
 * Process a specific file
 * @param {string} filePath - Path to the file
 */
async function processSpecificFile(filePath) {
    try {
        if (!fs.existsSync(filePath)) {
            console.error(`File not found: ${filePath}`);
            process.exit(1);
        }

        if (!filePath.endsWith('.mdx')) {
            console.error(`File is not an MDX file: ${filePath}`);
            process.exit(1);
        }

        console.log(`Processing file: ${filePath}`);
        const wasUpdated = await processFile(filePath);

        console.log(`\nSummary:`);
        console.log(`File ${wasUpdated ? 'was updated' : 'did not need changes'}`);
    } catch (error) {
        console.error(`Error processing specific file:`, error.message);
        process.exit(1);
    }
}

/**
 * Process all MDX files in the codebase
 */
async function processAllFiles() {
    try {
        const rootDir = process.cwd();
        console.log(`Searching for .mdx files in ${rootDir}...`);

        const mdxFiles = await findMdxFiles(rootDir);
        console.log(`Found ${mdxFiles.length} .mdx files`);

        let updatedCount = 0;

        for (const file of mdxFiles) {
            const wasUpdated = await processFile(file);
            if (wasUpdated) {
                updatedCount++;
            }
        }

        console.log(`\nSummary:`);
        console.log(`Total .mdx files: ${mdxFiles.length}`);
        console.log(`Files updated: ${updatedCount}`);
        console.log(`Files with no changes needed: ${mdxFiles.length - updatedCount}`);
    } catch (error) {
        console.error(`Error processing all files:`, error.message);
        process.exit(1);
    }
}

/**
 * Main function
 */
async function main() {
    try {
        if (verboseMode) {
            console.log('Running in verbose mode');
        }

        if (fileArg) {
            await processSpecificFile(path.resolve(process.cwd(), fileArg));
        } else {
            await processAllFiles();
        }
    } catch (error) {
        console.error('Error:', error.message);
        process.exit(1);
    }
}

// Run the script
main(); 

✅ Prerequisites

Get Credentials

Configure Webhooks

StackOne Webhooks Configurations

Useful Links

To successfully configure the webhook and send the event on action.

HubSpot Webhook Configuration

Stackone

Overview

Learn how to leverage StackOne integrations in your AI agent with StackOne

Getting Started

Filter tools when using the StackOne AI SDK

Tool Filtering

Use Open API specs as tools via the StackOne (typescript) AI SDK

OpenAPI Tools

Welcome to StackOne's Unified API for HRIS, ATS, CRM and more!

Getting Started with StackOne

Connect your Frontend via the StackOne React Hub

Connect your Backend with StackOne

A basic introduction to the dashboard, logging in etc

Dashboard Overview

Browse and take actions on any of the project's linked accounts

Accounts

Get your customer to connect their tool with only a link!

Auth Link

API Keys

Request Logs

Enable, disable and manage integrations for any StackOne Project

Managing Integration

Managing Projects

Webhooks

Managing your Organization

Custom Unified Fields enable users to create and unify bespoke fields to extend the existing Unified API models & resources.

Introduction

Define what source fields, the custom unified field will use for each integration.

Integration Field Mapping

Custom unified fields use an expression language that can be used to create more complex field mappings

Expression language syntax

Outline the list of supported SDKs to use the API with language-native libraries

Postman is a tool that allows developers to send API requests and receive responses to verify whether an API works correctly. This document describes how to use Postman to call the StackOne Unified API.

Using Postman

Using Expand & Include API Parameters

Use filters that are supported by the underlying provider requests

Using the Passthrough (Proxy) query parameters

StackOne Unified API: Error Codes & Resolution Guide

Unified API Error Codes and Troubleshooting  Guide

Making your first API request

Pagination

StackOne Identifiers

Transform HR operations with StackOne's HRIS API, providing intelligent tools for employee management, payroll tracking, and workforce insights across platforms.

Automate bringing users into your application from your customer HRIS

User Syncing from HRIS

Automate the creation and update of employees in your customer's HRIS

Automated Employee Provisioning

Unify and transform recruitment workflows across multiple platforms with StackOne's comprehensive ATS API, enabling data integration, real-time synchronization, and intelligent candidate management.

Learn how StackOne simplifies job board integrations with multiple ATS platforms, reducing custom code and maintenance

Job Board - Easy Apply

Learn how to integrate real-time interview data into your SaaS to deliver intelligent insights and seamlessly sync back to your customers’ ATS

Interview Intelligence

Automated application and candidate screening or scoring (eg. for AI-powered resume scoring).

Automated Application Screening

Learn how to integrate real-time assessment data, AI insights, and ATS syncing to simplify user workflows and improve candidate evaluation

Assessment & Background Checks

Automated candidate screening and scoring to simplify application management and HR decisions

Intelligent Candidate Screening

Accelerate CRM operations with StackOne's Unified API, connecting disparate platforms to unlock intelligent customer data management and real-time insights.

Amplify marketing performance with StackOne's Marketing API, delivering intelligent tools for campaign management, lead tracking, and multi-channel engagement across platforms

Essential details about the StackOne Documents API and its capabilities for organizing, managing, and accessing digital content efficiently within a document management system

Optimize learning management with StackOne's LMS API, delivering powerful tools for content creation, user tracking, and educational process integration across platforms.

Elevate identity security with StackOne's IAM API, providing comprehensive tools for managing user access, roles, and permissions across diverse platforms

The Admin API provides essential tools for managing and interacting with accounts and connectors

API Reference

HubSpot Developer Portal

Integration Guides

HubSpot Webhook Configuration

✅ Prerequisites

Get Credentials

Configure Webhooks

StackOne Webhooks Configurations

Useful Links

Integration Guides

​✅ Prerequisites

​Get Credentials

​Configure Webhooks

​StackOne Webhooks Configurations

​Useful Links

API Reference

HubSpot Developer Portal

✅ Prerequisites

Get Credentials

Configure Webhooks

StackOne Webhooks Configurations

Useful Links