diff --git a/README.md b/README.md
index 3b16d61..010ce50 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
# `Nextra` _Demo_
-[](https://codecov.io/github/dwyl/nextra-demo?branch=master)
+[](https://codecov.io/github/dwyl/nextra-demo?branch=main)
[](https://hits.dwyl.com/dwyl/nextra-demo)
[](https://github.com/dwyl/nextra-demo/issues)
@@ -42,7 +42,7 @@ you come across technical documentation daily.
From API references to internal manuals,
technical documentation
**is vital for the development process**.
-Everyone expects docs as a
+Everyone expects docs as a
[hygiene factor](https://en.wikipedia.org/wiki/Two-factor_theory#:~:text=Hygiene%20factors).
Without docs,
knowledge of the application becomes siloed
diff --git a/src/pages/about.mdx b/src/pages/about.mdx
index f7d8937..4f27e3e 100644
--- a/src/pages/about.mdx
+++ b/src/pages/about.mdx
@@ -1,7 +1,18 @@
# About Nextra
-Nextra is a powerful static site generator designed specifically for creating modern and highly customizable documentation websites. Built on top of Next.js, it leverages React's capabilities to deliver a seamless and efficient experience for developers.
+`Nextra` is a powerful static site generator designed specifically
+for creating modern and highly customizable documentation websites.
+Built on top of `Next.js`, it leverages
+[React](https://github.com/dwyl/learn-react/issues/23)
+capabilities
+to deliver a seamless and efficient experience for developers.
-With Nextra, you can easily create documentation sites with automatic navigation, markdown support, and themable design options. Whether you are documenting an API, creating a knowledge base, or writing a user manual, Nextra provides the tools you need to get the job done.
+With `Nextra`, you can easily create documentation sites
+with automatic navigation, markdown support,
+and themable design options.
+Whether you are documenting an API, creating a knowledge base,
+or writing a user manual,
+`Nextra` provides the tools you need to get the job done.
-Learn more about the features and capabilities of Nextra as you explore this documentation.
+Learn more about the features and capabilities of `Nextra`
+as you explore this demo.
diff --git a/src/pages/reference_api.mdx b/src/pages/reference_api/index.mdx
similarity index 100%
rename from src/pages/reference_api.mdx
rename to src/pages/reference_api/index.mdx
diff --git a/theme.config.tsx b/theme.config.tsx
index ef08ebd..3f72c1a 100644
--- a/theme.config.tsx
+++ b/theme.config.tsx
@@ -1,10 +1,10 @@
import { DocsThemeConfig } from "nextra-theme-docs";
const config: DocsThemeConfig = {
- logo: My Nextra Documentation,
+ logo: Nextra Docs,
project: {
link: 'https://github.com/shuding/nextra'
}
}
- export default config
\ No newline at end of file
+export default config
\ No newline at end of file
diff --git a/tutorial.md b/tutorial.md
index c2a4298..8e74159 100644
--- a/tutorial.md
+++ b/tutorial.md
@@ -6,16 +6,18 @@
> [!TIP]
>
-> Some of the information found in these notes
+> Some of the info in these notes
> can also be found in the
-> [official `Nextra` docs](https://nextra.site/docs).
-> We recommend going through their docs
-> if you get stuck
+> official `Nextra` docs:
+> [nextra.site/docs](https://nextra.site/docs)
+>
+> We recommend going through the docs
+> if you get stuck
> or want a more in-depth understanding of the framework.
When using `Nextra`,
-you _first_ have to choose:
-either use a **`default` theme**
+you _first_ have to choose:
+_either_ use a **`default` theme**
***or*** **_customize_ your own**.
The vast majority of people will use the **`default` theme**.
@@ -98,22 +100,38 @@ e.g:
which will add a `copy` button to code snippets.
Lastly, we need to create
-a corresponding
-`theme.config.jsx`
+a corresponding
+`theme.config.jsx`
file in project root directory.
-It will be used to configure the `Nextra` site theme.
+It is used to configure the `Nextra` site theme.
+Add the following code to it:
+
+```js
+import { DocsThemeConfig } from "nextra-theme-docs";
+
+const config: DocsThemeConfig = {
+ logo: Nextra Docs,
+ project: {
+ link: 'https://github.com/shuding/nextra'
+ }
+ }
+
+export default config
+```
+
+Save the file and continue.
> [!TIP]
>
-> Full theme configurations docs:
+> Full theme config docs:
> [nextra.site/docs/docs-theme](https://nextra.site/docs/docs-theme/theme-configuration).
Given that
`Nextra` is a **file-based system framework**
-(like `Next.js`),
+(based on `Next.js`),
we create docs
under the `/pages` directory.
-Create a file with the path
+Create a file with the path
`pages/index.mdx`
and type/paste the following markdown:
@@ -135,11 +153,13 @@ Hello, world!
Let's see the first page;
Run:
+
```sh
pnpm run dev
```
+
and visit
-`http://localhost:3000`
+[localhost:3000](http://localhost:3000/)
in your web browser
You should see your page!
@@ -158,7 +178,8 @@ so it's easier to navigate.
In `Nextra`,
the site and page structure can be configured via
-[`_meta.json`](https://nextra.site/docs/guide/organize-files) files.
+[`_meta.json`](https://nextra.site/docs/guide/organize-files)
+files.
These files will affect the layout of the theme,
especially the sidebar/navigation bar.
@@ -201,28 +222,24 @@ As you can see, you can group pages together in directories
**to create _a hierarchy_** of pages,
thus organizing them neatly.
-If you want a folder to have their own page,
-you can simply add a `.mdx` file
-a level above, with the name of the folder.
+If you want a directory to have its own page,
+you can simply add an `index.mdx` file.
Let's say we want `api_reference` to have an introductory page
when we click on it on the sidebar.
-Simply create the file above the folder's level!
+Simply create the `index.mdx` file:
```sh
pages
|_ api_reference
|_ _meta.json
|_ about.mdx
+ |_ index.mdx // added this
|_ _meta.json
|_ about.mdx
|_ contact.mdx
-|_ api_reference.mdx // added this
|_ index.mdx
```
-Alternatively, create an `index.mdx` file inside `api_reference`
-to achieve a similar result.
-
Fill each `.mdx` file with content
then run:
`pnpm run dev`
@@ -2256,7 +2273,8 @@ So this is the function where we want to make changes! 😊
First, let's change the `MenuProps`
to our extended types
-so we have access to the `private` property we've defined inside our `_meta.json` files.
+so we have access to the `private` property
+we've defined inside our `_meta.json` files.
```ts
interface MenuProps {