NeatoJSConfiguration
Landing page#
Landing pages are a good way to introduce your project without going directly into the documentation. On this page you will learn how to make a landing page or use a preset.
Creating a basic landing page#
To make a landing page (or any page that isn't MDX for that matter), you will first need to wrap it in a <GuiderLayout /> component.
If you want the layout to belong to a specific layout or site, you can specify it the meta prop - this is completely optional. It accepts the same data as the Frontmatter from a page.
import { GuiderLayout } from '@neato/guider/client';
export default function LandingPage() {
return (
<GuiderLayout meta={{ site: 'my-site' }}>
<p>My page goes here</p>
</GuiderLayout>
);
}You can add any content you need inside of the <GuiderLayout /> component.
Use premade landing page#
In the case that you don't want to put in extra effort into making a landing page, you can opt for using our premade landing page:
import {
Button,
Card,
CardGrid,
GuiderLayout,
Hero,
} from '@neato/guider/client';
export default function LandingPage() {
return (
<GuiderLayout meta={{ site: 'my-site' }}>
<Hero>
<Hero.Badge title="V1.0.0" to="/docs/guider/guides">
Just went out of alpha!
</Hero.Badge>
<Hero.Title>Documentation that looks great out of the box</Hero.Title>
<Hero.Subtitle>
Flexible but beautiful documentation, easy to write and easier to
extend. Exactly what you need everytime.
</Hero.Subtitle>
<Hero.Actions>
<Button to="/docs/guider/guides">Get started</Button>
<Button to="https://github.com/mrjvs/neatojs" type="secondary">
View on GitHub
</Button>
</Hero.Actions>
</Hero>
<CardGrid>
<Card icon="mdi:cube-outline" title="Focus on writing">
Effortlessly create beautiful documentation sites with just markdown.
</Card>
<Card icon="mdi:cube-outline" title="Focus on writing">
Effortlessly create beautiful documentation sites with just markdown.
</Card>
<Card icon="mdi:cube-outline" title="Focus on writing">
Effortlessly create beautiful documentation sites with just markdown.
</Card>
</CardGrid>
</GuiderLayout>
);
}when making non-MDX pages, make sure you put it in a .tsx file instead of a .mdx file.