You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
3.2 KiB
123 lines
3.2 KiB
/**
|
|
* Copyright (c) 2013-present, Facebook, Inc.
|
|
*
|
|
* @emails react-core
|
|
* @flow
|
|
*/
|
|
|
|
'use strict';
|
|
|
|
import Container from 'components/Container';
|
|
import ErrorDecoder from 'components/ErrorDecoder';
|
|
import Flex from 'components/Flex';
|
|
import hex2rgba from 'hex2rgba';
|
|
import MarkdownHeader from 'components/MarkdownHeader';
|
|
import React from 'react';
|
|
import StickyResponsiveSidebar from 'components/StickyResponsiveSidebar';
|
|
import TitleAndMetaTags from 'components/TitleAndMetaTags';
|
|
import {colors, sharedStyles} from 'theme';
|
|
import {createLinkDocs} from 'utils/createLink';
|
|
import findSectionForPath from 'utils/findSectionForPath';
|
|
import {sectionListDocs} from 'utils/sectionList';
|
|
|
|
type Props = {
|
|
data: Object,
|
|
location: Location,
|
|
};
|
|
|
|
const ErrorPage = ({data, location}: Props) => (
|
|
<Flex
|
|
direction="column"
|
|
grow="1"
|
|
shrink="0"
|
|
halign="stretch"
|
|
css={{
|
|
width: '100%',
|
|
flex: '1 0 auto',
|
|
position: 'relative',
|
|
zIndex: 0,
|
|
}}>
|
|
<Container>
|
|
<div css={sharedStyles.articleLayout.container}>
|
|
<Flex
|
|
type="article"
|
|
direction="column"
|
|
grow="1"
|
|
halign="stretch"
|
|
css={{
|
|
minHeight: 'calc(100vh - 40px)',
|
|
}}>
|
|
<MarkdownHeader
|
|
path={data.markdownRemark.fields.path}
|
|
title={data.markdownRemark.frontmatter.title}
|
|
/>
|
|
<TitleAndMetaTags
|
|
title={`React - ${data.markdownRemark.frontmatter.title}`}
|
|
/>
|
|
|
|
<div css={sharedStyles.articleLayout.content}>
|
|
<div
|
|
css={sharedStyles.markdown}
|
|
dangerouslySetInnerHTML={{__html: data.markdownRemark.html}}
|
|
/>
|
|
<div
|
|
css={[
|
|
sharedStyles.markdown,
|
|
{
|
|
marginTop: 30,
|
|
'& code': {
|
|
display: 'block',
|
|
marginTop: 30,
|
|
padding: '1rem',
|
|
borderRadius: '0.5rem',
|
|
backgroundColor: hex2rgba(colors.error, 0.1),
|
|
color: colors.error,
|
|
},
|
|
},
|
|
]}>
|
|
<ErrorDecoder
|
|
errorCodesString={data.errorCodesJson.internal.contentDigest}
|
|
location={location}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Flex>
|
|
|
|
<div css={sharedStyles.articleLayout.sidebar}>
|
|
<StickyResponsiveSidebar
|
|
createLink={createLinkDocs}
|
|
defaultActiveSection={findSectionForPath(
|
|
location.pathname,
|
|
sectionListDocs,
|
|
)}
|
|
location={location}
|
|
sectionList={sectionListDocs}
|
|
title={data.markdownRemark.frontmatter.title}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</Flex>
|
|
);
|
|
|
|
// eslint-disable-next-line no-undef
|
|
export const pageQuery = graphql`
|
|
query ErrorPageMarkdown($slug: String!) {
|
|
markdownRemark(fields: {slug: {eq: $slug}}) {
|
|
html
|
|
fields {
|
|
path
|
|
}
|
|
frontmatter {
|
|
title
|
|
}
|
|
}
|
|
errorCodesJson {
|
|
internal {
|
|
contentDigest
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
export default ErrorPage;
|
|
|