mirror of
https://github.com/hanzoai/insights-js.git
synced 2026-11-03 00:53:53 +00:00
zeekay
e43ab1afe7
Bulk rename across 989 files: - Package names: posthog-js → @hanzo/insights, posthog-node → @hanzo/insights-node, etc. - Repository URLs: posthog/posthog-js → hanzoai/insights-js - Brand names: PostHog → Insights - File renames: 259 reference JSON files, source files, workflow files - Directory rename: eslint-plugin-posthog-js → eslint-plugin-insights Remaining: 8 refs to @posthog/rrweb-* (real npm deps, need fork+publish)
89 lines
4.0 KiB
TypeScript
89 lines
4.0 KiB
TypeScript
import Head from 'next/head'
|
|
|
|
export default function Home() {
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>Insights State Management Examples</title>
|
|
<meta name="description" content="Compare Insights logging with Redux vs Kea" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
<div className="container">
|
|
<h1>Insights State Management Examples</h1>
|
|
<p style={{ textAlign: 'center', color: '#666', marginBottom: '2rem' }}>
|
|
Compare Insights logging with different state management libraries
|
|
</p>
|
|
|
|
<div style={{ display: 'flex', gap: '20px', justifyContent: 'center', flexWrap: 'wrap' }}>
|
|
<div className="example-card">
|
|
<h3>Redux Example</h3>
|
|
<p>
|
|
Todo list with Redux Toolkit and <code>insightsReduxLogger</code>
|
|
</p>
|
|
<ul style={{ textAlign: 'left', margin: '1rem 0' }}>
|
|
<li>Redux Toolkit store</li>
|
|
<li>Middleware integration</li>
|
|
<li>Action/state masking</li>
|
|
<li>Rate limiting</li>
|
|
<li>Performance monitoring</li>
|
|
</ul>
|
|
<a href="/redux" className="example-button">
|
|
Try Redux Version →
|
|
</a>
|
|
</div>
|
|
|
|
<div className="example-card">
|
|
<h3>Kea Example</h3>
|
|
<p>
|
|
Todo list with Kea and <code>insightsKeaLogger</code>
|
|
</p>
|
|
<ul style={{ textAlign: 'left', margin: '1rem 0' }}>
|
|
<li>Kea logic stores</li>
|
|
<li>Plugin integration</li>
|
|
<li>Cleaner API (maskAction/maskState)</li>
|
|
<li>Same rate limiting & features</li>
|
|
<li>Performance monitoring</li>
|
|
</ul>
|
|
<a href="/kea" className="example-button">
|
|
Try Kea Version →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
marginTop: '3rem',
|
|
padding: '1.5rem',
|
|
background: '#f8f9fa',
|
|
borderRadius: '8px',
|
|
border: '1px solid #e9ecef',
|
|
}}
|
|
>
|
|
<h4 style={{ marginBottom: '1rem', color: '#333' }}>🧑💻 Developer Notes</h4>
|
|
<ul style={{ textAlign: 'left', color: '#666' }}>
|
|
<li>
|
|
<strong>Console Logging:</strong> Open browser dev tools to see Insights action logging
|
|
</li>
|
|
<li>
|
|
<strong>API Comparison:</strong> Redux uses <code>maskReduxAction</code>/
|
|
<code>maskReduxState</code>
|
|
</li>
|
|
<li>
|
|
<strong>Kea Cleaner API:</strong> Kea uses <code>maskAction</code>/<code>maskState</code>
|
|
</li>
|
|
<li>
|
|
<strong>Same Features:</strong> Both support rate limiting, state diffing, and performance
|
|
monitoring
|
|
</li>
|
|
<li>
|
|
<strong>Integration:</strong> Kea logger reuses Redux logger internally via middleware
|
|
injection
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|