import React, { useEffect } from 'react';
import Head from '@docusaurus/Head';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';
// import { TabulaProvider } from '@rasahq/react-tabula';
import ThemeProvider from '@theme/_contexts/ThemeProvider';
import SidebarProvider from '@theme/_contexts/SidebarProvider';
import UserPreferencesProvider from '@theme/_contexts/UserPreferencesProvider';
import TopNavbar from '@theme/TopNavbar';
import Footer from '@theme/Footer';
import { GraphQLClient, ClientContext as GraphQLClientContext } from 'graphql-hooks';
import { SegmentManager } from '@rasahq/react-tabula';
import Link from '@docusaurus/Link';
import logLevel from 'loglevel';
const log = logLevel.getLogger('docusaurus');
log.setLevel('debug');
import faviconUrl from '!file-loader!./_assets/favicon.ico';
import touchIcon from '!file-loader!./_assets/apple-touch-icon.png';
import favicon32 from '!file-loader!./_assets/favicon-32x32.png';
import favicon16 from '!file-loader!./_assets/favicon-16x16.png';
import pinnedTab from '!file-loader!./_assets/safari-pinned-tab.svg';
const pkgVersion = require('../package.json')['version'];
const isClient = typeof window !== 'undefined';
const isDev = process.env.NODE_ENV == 'development';
function Providers({ children }) {
return (
{children}
);
}
function Layout(props) {
const { siteConfig = {} } = useDocusaurusContext();
const {
title: siteTitle,
themeConfig: { image: siteMetaImage },
url: siteUrl,
customFields: { datocmsToken },
} = siteConfig;
const { children, title, description, image, keywords, permalink, version } = props;
const metaTitle = title ? `${title} | ${siteTitle}` : siteTitle;
const metaImage = image || siteMetaImage;
const metaImageUrl = useBaseUrl(metaImage, {
absolute: true,
});
/*
Datocms Provider Setup
const { Provider: GraphQLClientProvider } = GraphQLClientContext;
const datoClient =
!isClient && datocmsToken
? null
: new GraphQLClient({
url: 'https://graphql.datocms.com/',
headers: {
Authorization: datocmsToken,
},
});
*/
// ENSURE TRAILING SLASH ON CANONICAL URL
const canonical = permalink && (permalink.match(/\/$/) ? permalink : permalink + '/');
// TABULA CONFIG LOCALSTORAGE SETUP
// TODO: extract this to a hook
const tabulaConfig =
isClient && isDev ? JSON.parse(window?.localStorage.getItem('tabula')) || { debug: false } : {};
const setTabulaConfig =
isClient && isDev
? () => window.localStorage.setItem('tabula', JSON.stringify(tabulaConfig))
: () => undefined;
useEffect(() => {
log.debug('mounted Layout component');
if (isDev && isClient) {
document.body.classList.toggle('debug', tabulaConfig.debug);
document.body.addEventListener('keyup', function (event) {
if (event.shiftKey == true && event.ctrlKey == true && (event.keyCode || event.which) == 68) {
tabulaConfig.debug = !tabulaConfig.debug;
document.body.classList.toggle('debug', tabulaConfig.debug);
setTabulaConfig();
}
});
}
});
return (
{/* eslint-disable-next-line react/no-unknown-property */}
{metaTitle && {metaTitle}}
{metaTitle && }
{description && }
{description && }
{version && }
{keywords && keywords.length && }
{metaImage && }
{metaImage && }
{metaImage && }
{canonical && }
{canonical && }
{children}
Analytics Preferences
);
}
export default Layout;