| 1 | import { InferGetStaticPropsType } from 'next' |
| 2 | import { Layout } from 'components/Layout' |
| 3 | import { generateRenderedMarp } from 'components/Marp' |
| 4 | import { Description } from 'components/top/Description' |
| 5 | import { Features } from 'components/top/Features' |
| 6 | import { GetStarted } from 'components/top/GetStarted' |
| 7 | import { Hero } from 'components/top/Hero' |
| 8 | import { absoluteUrl } from 'utils/url' |
| 9 | |
| 10 | const exampleMarkdown = ` |
| 11 | --- |
| 12 | theme: gaia |
| 13 | _class: lead |
| 14 | paginate: true |
| 15 | backgroundColor: #fff |
| 16 | backgroundImage: url('${absoluteUrl('/assets/hero-background.svg')}') |
| 17 | --- |
| 18 | |
| 19 | }) |
| 20 | |
| 21 | # **Marp** |
| 22 | |
| 23 | Markdown Presentation Ecosystem |
| 24 | |
| 25 | https://marp.app/ |
| 26 | |
| 27 | --- |
| 28 | |
| 29 | # How to write slides |
| 30 | |
| 31 | Split pages by horizontal ruler (\`---\`). It's very simple! :satisfied: |
| 32 | |
| 33 | \`\`\`markdown |
| 34 | # Slide 1 |
| 35 | |
| 36 | foobar |
| 37 | |
| 38 | --- |
| 39 | |
| 40 | # Slide 2 |
| 41 | |
| 42 | foobar |
| 43 | \`\`\` |
| 44 | `.trim() |
| 45 | |
| 46 | export const getStaticProps = async () => ({ |
| 47 | props: { example: await generateRenderedMarp(exampleMarkdown) }, |
| 48 | }) |
| 49 | |
| 50 | const Index = (props: InferGetStaticPropsType<typeof getStaticProps>) => ( |
| 51 | <Layout type="website"> |
| 52 | <Hero /> |
| 53 | <Description example={props.example} /> |
| 54 | <Features /> |
| 55 | <GetStarted /> |
| 56 | </Layout> |
| 57 | ) |
| 58 | |
| 59 | export default Index |
| 60 |