Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React from "react"
import { Head } from "../site/Head"
import { SiteHeader } from "../site/SiteHeader"
import { SiteFooter } from "../site/SiteFooter"
import { LoadingIndicator } from "../grapher/loadingIndicator/LoadingIndicator"
import { IFrameDetector } from "../site/IframeDetector"
import { SiteSubnavigation } from "../site/SiteSubnavigation"
import { formatReusableBlock } from "../site/formatting"
import {
EMBEDDED_EXPLORER_GRAPHER_CONFIGS,
EMBEDDED_EXPLORER_DELIMITER,
ExplorerContainerId,
} from "../explorer/ExplorerConstants"
import { ExplorerProgram } from "../explorer/ExplorerProgram"
import { GrapherInterface } from "../grapher/core/GrapherInterface"
import { serializeJSONForHTML } from "../clientUtils/serializers"
import { GRAPHER_PAGE_BODY_CLASS } from "../grapher/core/GrapherConstants"
import { ExplorerPageUrlMigrationSpec } from "../explorer/urlMigrations/ExplorerPageUrlMigrationSpec"
interface ExplorerPageSettings {
program: ExplorerProgram
wpContent?: string
grapherConfigs: GrapherInterface[]
baseUrl: string
urlMigrationSpec?: ExplorerPageUrlMigrationSpec
}
const ExplorerContent = ({ content }: { content: string }) => {
return (
<div className="explorerContentContainer">
<div className="sidebar"></div>
<div className="article-content">
<section>
<div className="wp-block-columns is-style-sticky-right">
<div
className="wp-block-column"
dangerouslySetInnerHTML={{
__html: formatReusableBlock(content),
}}
></div>
<div className="wp-block-column"></div>
</div>
</section>
</div>
</div>
)
}
export const ExplorerPage = (props: ExplorerPageSettings) => {
const { wpContent, program, grapherConfigs, baseUrl, urlMigrationSpec } =
props
const {
subNavId,
subNavCurrentId,
explorerTitle,
slug,
thumbnail,
hideAlertBanner,
} = program
const subNav = subNavId ? (
<SiteSubnavigation
subnavId={subNavId}
subnavCurrentId={subNavCurrentId}
/>
) : undefined
const inlineJs = `const explorerProgram = ${serializeJSONForHTML(
program.toJson(),
EMBEDDED_EXPLORER_DELIMITER
)};
const grapherConfigs = ${serializeJSONForHTML(
grapherConfigs,
EMBEDDED_EXPLORER_GRAPHER_CONFIGS
)};
const urlMigrationSpec = ${
urlMigrationSpec ? JSON.stringify(urlMigrationSpec) : "undefined"
};
window.Explorer.renderSingleExplorerOnExplorerPage(explorerProgram, grapherConfigs, urlMigrationSpec);`
return (
<html>
<Head
canonicalUrl={`${baseUrl}/${slug}`}
pageTitle={explorerTitle}
imageUrl={thumbnail}
baseUrl={baseUrl}
>
<IFrameDetector />
</Head>
<body className={GRAPHER_PAGE_BODY_CLASS}>
<SiteHeader
baseUrl={baseUrl}
hideAlertBanner={hideAlertBanner || false}
/>
{subNav}
<main id={ExplorerContainerId}>
<LoadingIndicator />
</main>
{wpContent && <ExplorerContent content={wpContent} />}
<SiteFooter baseUrl={baseUrl} />
<script dangerouslySetInnerHTML={{ __html: inlineJs }} />
</body>
</html>
)
}
|