import React from 'react' ; import styled from 'styled-components' ; import { init , ErrorBoundary } from '@sentry/react' ; import { BrowserRouter as Router , Route , Redirect , Switch } from 'react-router-dom' ; import { Content , Footer , Header , Layout , VarnishApp } from '@allenai/varnish/components' ; import { ScrollToTopOnPageChange } from '@allenai/varnish-react-router' ; import { Demos } from '@allenai/tugboat/lib' ; import { ErrorBoundaryView , Promised } from '@allenai/tugboat/components' ; import allenNlpLogo from './components/allennlp_logo.svg' ; import { Menu } from './components' ; import { groups } from './groups' ; import { ModelCards , TaskCards } from './context' ; import { fetchTaskCards , fetchModelCards } from './lib' ; import '@allenai/varnish/dist/theme.css' ; init ( { dsn : 'https://59686a41b9664bf2a8bbc51a602428c2@o226626.ingest.sentry.io/5599301' , autoSessionTracking : true , environment : process . env . SENTRY_ENVIRONMENT || 'dev' , release : process . env . SENTRY_RELEASE || 'none' , ignoreErrors : [ 'top.GLOBALS' , ] , denyUrls : [ /extensions\//i , /^chrome:\/\//i , /moz-extension\//i , ] , } ) ; /*******************************************************************************
  <App /> Container
*******************************************************************************/ const DEFAULT_PATH = '/reading-comprehension' ; const ctx = require . context ( './demos' , true , /\/index\.ts$/ ) ; const demos = Demos . load ( ctx ) ; const demosByGroup = groups . map ( ( g ) => ( { ... g , demos : demos . forGroup ( g . label ) , } ) ) ; export const App = ( ) => ( < VarnishApp layout = "left-aligned" > < Router > < ScrollToTopOnPageChange /> < DemoLayout > < ErrorBoundary fallback = { ( { error } ) => < ErrorBoundaryView error = { error } />}> < Promised promise = { ( ) => Promise . all ( [ fetchTaskCards ( ) , fetchModelCards ( ) ] ) } deps = { [ ] } > { ( [ tasks , cards ] ) => ( < ModelCards . Provider value = { cards } > < TaskCards . Provider value = { tasks } > < Switch > < Route exact path = "/" render = { ( ) => < Redirect to = { DEFAULT_PATH } />}/ > { demos . all ( ) . map ( ( { config , Component } ) => ( < Route key = { config . path } path = { config . path } > < ErrorBoundary fallback = { ( { error } ) => ( < ErrorBoundaryView error = { error } / > ) } > < Component /> < /ErrorBoundary> < /Route>))} < /Switch> < /TaskCards.Provider> < /ModelCards.Provider>)} < /Promised> < /ErrorBoundary> < /DemoLayout> < /Router> < /VarnishApp>); const DemoLayout = ( props ) => { return ( < Layout bgcolor = "white" > < Header > < HeaderColumnsWithSpace columns = "auto 1fr" > < Header . Logo href = "http://www.allennlp.org/" > < Logo width = "147px" height = "26px" alt = "AllenNLP" / > < /Header.Logo> < /HeaderColumnsWithSpace> < /Header> < Layout > < Menu items = { demosByGroup } /> < Layout > < Content main > { props . children } < /Content> < Footer / > < /Layout> < /Layout> < /Layout>); } ; const Logo = styled . img . attrs ( { src : allenNlpLogo , } ) `` ; const HeaderColumnsWithSpace = styled ( Header . Columns ) `
    padding: ${ ( { theme } ) => theme . spacing . md } 0;
` ;