78 lines
2.3 KiB
JavaScript
78 lines
2.3 KiB
JavaScript
import React from 'react';
|
|
import cn from 'classnames';
|
|
import { CopyButton, CodeBlock } from 'UI';
|
|
import stl from './installDocs.module.css';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
const installationCommand = 'npm i @openreplay/tracker';
|
|
const usageCode = `import { tracker } from '@openreplay/tracker';
|
|
|
|
tracker.configure({
|
|
projectKey: "PROJECT_KEY",
|
|
ingestPoint: "https://${window.location.hostname}/ingest",
|
|
});
|
|
|
|
tracker.start()`;
|
|
const usageCodeSST = `import { tracker } from '@openreplay/tracker/cjs';
|
|
// alternatively you can use dynamic import without /cjs suffix to prevent issues with window scope
|
|
|
|
tracker.configure({
|
|
projectKey: "PROJECT_KEY",
|
|
ingestPoint: "https://${window.location.hostname}/ingest",
|
|
});
|
|
|
|
function MyApp() {
|
|
useEffect(() => { // use componentDidMount in case of React Class Component
|
|
tracker.start()
|
|
}, []);
|
|
|
|
//...
|
|
}`;
|
|
|
|
function InstallDocs({ site }) {
|
|
const { t } = useTranslation();
|
|
const _usageCode = usageCode.replace('PROJECT_KEY', site.projectKey);
|
|
return (
|
|
<div>
|
|
<div className="mb-3">
|
|
<div className="font-semibold mb-2">{t('1. Installation')}</div>
|
|
<div className="">
|
|
{/* <CopyButton content={installationCommand} className={cn(stl.codeCopy, 'mt-2 mr-2')} /> */}
|
|
<div className={cn(stl.snippetWrapper, '')}>
|
|
<CopyButton
|
|
content={installationCommand}
|
|
className={cn(stl.codeCopy, 'mt-2 mr-2')}
|
|
/>
|
|
<CodeBlock code={installationCommand} language="bash" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="font-semibold mb-2">{t('2. Usage')}</div>
|
|
<div className="">
|
|
<div className={cn(stl.snippetWrapper, '')}>
|
|
<CopyButton
|
|
content={_usageCode}
|
|
className={cn(stl.codeCopy, 'mt-2 mr-2')}
|
|
/>
|
|
<CodeBlock code={_usageCode} language="js" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-6">
|
|
{t('See')}
|
|
<a
|
|
href="https://docs.openreplay.com/en/sdk/"
|
|
className="color-teal underline"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
{t('Documentation')}
|
|
</a>{' '}
|
|
{t('for the list of available options.')}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default InstallDocs;
|