Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Steps component to keystatic.mdx #8078

Merged
merged 1 commit into from
May 2, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
41 changes: 21 additions & 20 deletions src/content/docs/en/guides/cms/keystatic.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@ type: cms
service: Keystatic
i18nReady: true
---
import { Steps } from '@astrojs/starlight/components';
import { FileTree } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

[Keystatic](https://keystatic.com/) is an open source, headless content-management system that allows you to structure your content and sync it with GitHub.

Expand Down Expand Up @@ -157,30 +158,30 @@ Visit `http://127.0.0.1:4321/keystatic` in the browser to see the Keystatic Admi

## Creating a new post

<Steps>
1. In the Keystatic Admin UI dashboard, click on the “Posts” collection.

2. Use the button to create a new post. Add the title "My First Post" and some content, then save the post.

3. This post should now be visible from your "Posts" collection. You can view and edit your individual posts from this dashboard page.

4. Return to view your Astro project files. You will now find a new `.mdoc` file inside the `src/content/posts` directory for this new post:
2. Use the button to create a new post. Add the title "My First Post" and some content, then save the post.

<FileTree title="Project Structure">
- src/
- content/
- posts/
- **my-first-post.mdoc**
</FileTree>
3. This post should now be visible from your "Posts" collection. You can view and edit your individual posts from this dashboard page.

5. Navigate to that file in your code editor and verify that you can see the Markdown content you entered. For example:
4. Return to view your Astro project files. You will now find a new `.mdoc` file inside the `src/content/posts` directory for this new post:
<FileTree title="Project Structure">
- src/
- content/
- posts/
- **my-first-post.mdoc**
</FileTree>

```markdown
---
title: My First Post
---

This is my very first post. I am **super** excited!
```
5. Navigate to that file in your code editor and verify that you can see the Markdown content you entered. For example:
```markdown
---
title: My First Post
---

This is my very first post. I am **super** excited!
```
</Steps>

## Rendering Keystatic content

Expand Down