github.com/Jeffail/benthos/v3@v3.65.0/website/src/theme/CookbookPage/index.js (about) 1 import React from 'react'; 2 3 import Layout from '@theme/Layout'; 4 import Link from '@docusaurus/Link'; 5 import MDXComponents from '@theme/MDXComponents'; 6 import {MDXProvider} from '@mdx-js/react'; 7 import TOC from '@theme/TOC'; 8 9 import classnames from 'classnames'; 10 import styles from './styles.module.css'; 11 12 function CookbookPage(props) { 13 const {content: CookbookContents} = props; 14 const {frontMatter, metadata} = CookbookContents; 15 const {title} = frontMatter; 16 const {keywords} = metadata; 17 18 return ( 19 <Layout title={metadata.title} description={metadata.description} keywords={keywords}> 20 <div className="container"> 21 <div className="row"> 22 <div className="col"> 23 <article className={styles.cookbookContainer}> 24 <header className={classnames(styles.header, 'margin-top--xl')}> 25 <h1 className={styles.cookbookTitle}>{title}</h1> 26 <p className={styles.cookbookDescription}>{metadata.description}</p> 27 </header> 28 <div className="container container--narrow container--bleed margin-vert--xl"> 29 <section className="markdown"> 30 <MDXProvider components={MDXComponents}><CookbookContents /></MDXProvider> 31 </section> 32 <Link to="/cookbooks" className="button button--outline button--primary margin-vert--lg">Find more cookbooks</Link> 33 </div> 34 </article> 35 </div> 36 {CookbookContents.toc && ( 37 <div className="col col--2"> 38 <TOC toc={CookbookContents.toc} /> 39 </div> 40 )} 41 </div> 42 </div> 43 </Layout> 44 ); 45 } 46 47 export default CookbookPage;