import Head from 'next/head' ; import { generateRSS } from '../rssUtil' ; import { Markdown } from '../components/Markdown' ; import { PostData , loadBlogPosts , loadMarkdownFile } from '../loader' ; import { PostCard } from '../components/PostCard' ; const Home = ( props ) => { return ( < div className = "content" > < Head > < title > Introducing Devii < /title> < link rel = "icon" href = "/favicon.ico" / > < /Head> < div className = "introduction" > < h1 > Introduction to Devii < /h1> < Markdown source = { props . introduction } / > < /div> < div className = "section" > < h2 > Features < /h2> < div className = "medium-wide" > < Markdown source = { props . features } /> < /div> < /div> < div className = "section" > < h2 > My blog posts < /h2> < p > This section demonstrates the power of dynamic imports . Every Markdown file under < code > /md/blog < /code> is automatically parsed into a structured TypeScript object and available in the { ' ' } < code > props . posts < /code> array. These blog post "cards" are implemented in the < code > /components/PostCard . tsx < /code> component. < /p> < div className = "post-card-container" > { props . posts . map ( ( post , j ) => { return < PostCard post = { post } key = { j } / > ; } ) } < /div> < /div> < div className = "section" > < h2 > Testimonials < /h2> < blockquote > < p > < em > Seems like it might be useful ! < /em> < /p> < p > — Dan Abramov , taken { ' ' } < a href = "https://github.com/colinhacks/devii/issues/2" target = "_blank" > { ' ' } utterly out of context < /a> < /p> < /blockquote> < /div> { } { } < div className = "section alternate" > < h2 className = "centered" > Get started < /h2> < a href = "https://github.com/colinhacks/devii" > < button className = "fork-button" > Go to README < /button> < /a> < /div> < /div>); } ; export default Home ; export const getStaticProps = async ( ) => { const introduction = await loadMarkdownFile ( 'introduction.md' ) ; const features = await loadMarkdownFile ( 'features.md' ) ; const readmeFile = await import ( `../${ 'README.md' }` ) ; const readme = readmeFile . default ; const posts = await loadBlogPosts ( ) ; await generateRSS ( posts ) ; const props = { introduction : introduction . contents , features : features . contents , readme : readme , posts , } ; return { props } ; } ;