src/templates/contentTemplate.js
// the data prop will be injected by the GraphQL query below.
the data prop will be injected by the GraphQL query below.
the data prop will be injected by the GraphQL query below .
function Template({data}) {
	const {markdownRemark} = data; 
	const {frontmatter, html} = markdownRemark;
	let componentName, docPath, gitHubPath, linked, noNav, pageTitle;
	docPath = markdownRemark.fields.path;
	gitHubPath = markdownRemark.fields.gitHubPath.substring(0, markdownRemark.fields.gitHubPath.lastIndexOf('/'));
	const editPath = 'https://github.com/HumanCellAtlas/data-portal/tree/staging/content' + gitHubPath + '.md';
	if (frontmatter) {
		linked = frontmatter.linked;
		componentName = frontmatter.componentName;
		noNav = frontmatter.noNav;
		pageTitle = frontmatter.title;
	}
	return (
		<Layout pageTitle={pageTitle} docPath={docPath} noNav={noNav}>
			{componentName === 'analysisDetail' ? null :
				<div className={globalStyles.md} dangerouslySetInnerHTML={{__html: html}}/>}
			{linked && (componentName === 'analyze') ?
				<Analyze editPath={editPath} linked={linked}/> : null}
			{componentName === 'analysisDetail' ?
				<AnalysisDetail editPath={editPath} data={markdownRemark}/> : null}
			{componentName === 'attributions' ? <Attributions/> : null}
			{componentName === 'analyze' || componentName === 'analysisDetail' ? null :
				<a className={classNames(globalStyles.editContent, globalStyles.editContentSeparator)}
				   href={editPath} target='_blank' rel='noopener noreferrer'>Improve this page</a>}
		</Layout>
	);
}
function Template ( { data } ) { const { markdownRemark } = data ; const { frontmatter , html } = markdownRemark ; let componentName , docPath , gitHubPath , linked , noNav , pageTitle ; docPath = markdownRemark . fields . path ; gitHubPath = markdownRemark . fields . gitHubPath . substring ( 0 , markdownRemark . fields . gitHubPath . lastIndexOf ( '/' ) ) ; const editPath = 'https://github.com/HumanCellAtlas/data-portal/tree/staging/content' + gitHubPath + '.md' ; if ( frontmatter ) { linked = frontmatter . linked ; componentName = frontmatter . componentName ; noNav = frontmatter . noNav ; pageTitle = frontmatter . title ; } return ( < Layout pageTitle = { pageTitle } docPath = { docPath } noNav = { noNav } > { componentName === 'analysisDetail' ? null : < div className = { globalStyles . md } dangerouslySetInnerHTML = { { __html : html } } / > } { linked && ( componentName === 'analyze' ) ? < Analyze editPath = { editPath } linked = { linked } / > : null } { componentName === 'analysisDetail' ? < AnalysisDetail editPath = { editPath } data = { markdownRemark } / > : null } { componentName === 'attributions' ? < Attributions / > : null } { componentName === 'analyze' || componentName === 'analysisDetail' ? null : < a className = { classNames ( globalStyles . editContent , globalStyles . editContentSeparator ) } href = { editPath } target = '_blank' rel = 'noopener noreferrer' > Improve this page < / a > } < / Layout > ) ; }
the data prop will be injected by the GraphQL query below.
the data prop will be injected by the GraphQL query below .
// data.markdownRemark holds our post data