@heyo-sh/create-heyo-docs 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -18
- package/package.json +1 -1
- package/templates/astro/content/configuration.mdx +76 -0
- package/templates/astro/content/deploying.mdx +57 -0
- package/templates/astro/content/essentials/callouts.mdx +36 -0
- package/templates/astro/content/essentials/code-blocks.mdx +51 -0
- package/templates/astro/content/essentials/lists.mdx +40 -0
- package/templates/astro/content/essentials/tables.mdx +37 -0
- package/templates/astro/content/essentials/tabs.mdx +42 -0
- package/templates/astro/content/essentials/text-styling.mdx +50 -0
- package/templates/astro/content/quickstart.mdx +60 -0
- package/templates/astro/heyo-docs.config.ts +24 -2
- package/templates/next/content/configuration.mdx +76 -0
- package/templates/next/content/deploying.mdx +57 -0
- package/templates/next/content/essentials/callouts.mdx +36 -0
- package/templates/next/content/essentials/code-blocks.mdx +51 -0
- package/templates/next/content/essentials/lists.mdx +40 -0
- package/templates/next/content/essentials/tables.mdx +37 -0
- package/templates/next/content/essentials/tabs.mdx +42 -0
- package/templates/next/content/essentials/text-styling.mdx +50 -0
- package/templates/next/content/quickstart.mdx +60 -0
- package/templates/next/heyo-docs.config.ts +24 -2
- package/templates/react-router/content/configuration.mdx +76 -0
- package/templates/react-router/content/deploying.mdx +57 -0
- package/templates/react-router/content/essentials/callouts.mdx +36 -0
- package/templates/react-router/content/essentials/code-blocks.mdx +51 -0
- package/templates/react-router/content/essentials/lists.mdx +40 -0
- package/templates/react-router/content/essentials/tables.mdx +37 -0
- package/templates/react-router/content/essentials/tabs.mdx +42 -0
- package/templates/react-router/content/essentials/text-styling.mdx +50 -0
- package/templates/react-router/content/quickstart.mdx +60 -0
- package/templates/react-router/heyo-docs.config.ts +24 -2
package/README.md
CHANGED
|
@@ -4,38 +4,30 @@ Create a standalone, production-ready documentation site with Heyo Docs. Choose
|
|
|
4
4
|
|
|
5
5
|
## Create a project
|
|
6
6
|
|
|
7
|
+
Run the creator without arguments to choose the project directory, framework,
|
|
8
|
+
deployment target, theme, and package manager interactively. It prints the
|
|
9
|
+
appropriate `cd` and development-server commands when it finishes.
|
|
10
|
+
|
|
7
11
|
```bash
|
|
8
12
|
# pnpm
|
|
9
|
-
pnpm create @heyo-sh/heyo-docs
|
|
10
|
-
cd my-docs
|
|
11
|
-
pnpm dev
|
|
13
|
+
pnpm create @heyo-sh/heyo-docs
|
|
12
14
|
|
|
13
15
|
# npm
|
|
14
|
-
npm create @heyo-sh/heyo-docs@latest
|
|
15
|
-
cd my-docs
|
|
16
|
-
npm run dev
|
|
16
|
+
npm create @heyo-sh/heyo-docs@latest
|
|
17
17
|
|
|
18
18
|
# Yarn
|
|
19
|
-
yarn dlx @heyo-sh/create-heyo-docs
|
|
20
|
-
cd my-docs
|
|
21
|
-
yarn dev
|
|
19
|
+
yarn dlx @heyo-sh/create-heyo-docs
|
|
22
20
|
|
|
23
21
|
# Bun
|
|
24
|
-
bun create @heyo-sh/heyo-docs
|
|
25
|
-
cd my-docs
|
|
26
|
-
bun run dev
|
|
22
|
+
bun create @heyo-sh/heyo-docs
|
|
27
23
|
```
|
|
28
24
|
|
|
29
25
|
The creator works with pnpm, npm, Yarn, and Bun.
|
|
30
26
|
|
|
31
27
|
## Options
|
|
32
28
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
--template astro \
|
|
36
|
-
--theme moss \
|
|
37
|
-
--deployment cloudflare
|
|
38
|
-
```
|
|
29
|
+
Passing options makes the creator non-interactive; include a project-directory
|
|
30
|
+
argument when using them in automation.
|
|
39
31
|
|
|
40
32
|
| Option | Values |
|
|
41
33
|
| ------------------- | ------------------------------- |
|
package/package.json
CHANGED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Basic Configuration
|
|
3
|
+
description: Set the identity, content source, and sidebar structure for a Heyo Docs site.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Basic Configuration
|
|
7
|
+
|
|
8
|
+
`heyo-docs.config.ts` is the single source of truth for a Heyo Docs site.
|
|
9
|
+
The framework integration and the documentation UI read the same validated
|
|
10
|
+
object, so a change to navigation or metadata does not need to be repeated in
|
|
11
|
+
multiple places.
|
|
12
|
+
|
|
13
|
+
## Start with the site model
|
|
14
|
+
|
|
15
|
+
The generated project already includes a working configuration. Update the
|
|
16
|
+
identity fields first, then point `content` at the directory that contains
|
|
17
|
+
your MDX files.
|
|
18
|
+
|
|
19
|
+
<CodeBlock language="ts" title="heyo-docs.config.ts" showLineNumbers>
|
|
20
|
+
{`import { heyoDocs } from "@heyo-sh/heyo-docs";
|
|
21
|
+
|
|
22
|
+
export default heyoDocs({
|
|
23
|
+
title: "{{PROJECT_NAME}}",
|
|
24
|
+
description: "Guides and reference for {{PROJECT_NAME}}.",
|
|
25
|
+
content: "./content",
|
|
26
|
+
theme: "grain",
|
|
27
|
+
mode: "system",
|
|
28
|
+
branding: { name: "{{PROJECT_NAME}}" },
|
|
29
|
+
});`}
|
|
30
|
+
</CodeBlock>
|
|
31
|
+
|
|
32
|
+
Set `siteUrl` to the final public origin before publishing. It is used for
|
|
33
|
+
canonical URLs, social metadata, the sitemap, RSS, and AI-facing discovery
|
|
34
|
+
files.
|
|
35
|
+
|
|
36
|
+
## Organize the sidebar
|
|
37
|
+
|
|
38
|
+
Use `groups` to define the order readers see. A group contains named sections
|
|
39
|
+
and their MDX page references; a reference is relative to `content` and does
|
|
40
|
+
not include the `.mdx` extension.
|
|
41
|
+
|
|
42
|
+
<CodeBlock language="ts" title="heyo-docs.config.ts">
|
|
43
|
+
{`groups: [
|
|
44
|
+
{
|
|
45
|
+
group: "Documentation",
|
|
46
|
+
icon: "globe",
|
|
47
|
+
sections: [
|
|
48
|
+
{
|
|
49
|
+
section: "Get Started",
|
|
50
|
+
icon: "lightbulb",
|
|
51
|
+
pages: ["quickstart", "configuration"],
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
section: "Essentials",
|
|
55
|
+
icon: "book",
|
|
56
|
+
pages: ["essentials/text-styling", "essentials/code-blocks"],
|
|
57
|
+
},
|
|
58
|
+
],
|
|
59
|
+
},
|
|
60
|
+
],`}
|
|
61
|
+
</CodeBlock>
|
|
62
|
+
|
|
63
|
+
The order is meaningful: it controls the sidebar and the previous/next links at
|
|
64
|
+
the end of each article. Use a page object with `title` and `src` when a
|
|
65
|
+
sidebar entry should point to a page outside the local documentation.
|
|
66
|
+
|
|
67
|
+
## Verify the result
|
|
68
|
+
|
|
69
|
+
Run the project's typecheck and build commands after changing configuration.
|
|
70
|
+
They resolve each configured MDX page and report missing paths or malformed
|
|
71
|
+
navigation before the site is deployed.
|
|
72
|
+
|
|
73
|
+
<Callout type="info" title="Keep page metadata close to the page">
|
|
74
|
+
Put a page's <code>title</code> and <code>description</code> in its MDX
|
|
75
|
+
frontmatter. Keep shared site settings in <code>heyo-docs.config.ts</code>.
|
|
76
|
+
</Callout>
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Deploying
|
|
3
|
+
description: Build and publish your Heyo Docs site with the deployment target chosen during setup.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Deploying
|
|
7
|
+
|
|
8
|
+
A Heyo Docs site is built as part of the framework application. The creator asks
|
|
9
|
+
for a deployment target when the project is created and adds the corresponding
|
|
10
|
+
configuration, so the same MDX content, navigation, search, and metadata are
|
|
11
|
+
used locally and in production.
|
|
12
|
+
|
|
13
|
+
## Choose the target during setup
|
|
14
|
+
|
|
15
|
+
Select Vercel or Cloudflare when running the creator if you already know where
|
|
16
|
+
the site will live. The generated project includes the adapter and deployment
|
|
17
|
+
configuration required by that platform. You can also choose to configure
|
|
18
|
+
deployment later and keep the starter focused on local development.
|
|
19
|
+
|
|
20
|
+
## Build before publishing
|
|
21
|
+
|
|
22
|
+
Run the production build on your machine before creating a deployment. It
|
|
23
|
+
resolves every configured page, validates the navigation tree, and generates
|
|
24
|
+
the sitemap, RSS feed, robots file, and AI-facing documentation endpoints.
|
|
25
|
+
|
|
26
|
+
<CodeBlock language="bash" title="Terminal">
|
|
27
|
+
{"bun run build"}
|
|
28
|
+
</CodeBlock>
|
|
29
|
+
|
|
30
|
+
Use the equivalent `npm run build`, `pnpm build`, or `yarn build` command
|
|
31
|
+
when the project uses a different package manager.
|
|
32
|
+
|
|
33
|
+
<Callout type="tip" title="Set the canonical URL">
|
|
34
|
+
Add the final public origin as <code>siteUrl</code> in
|
|
35
|
+
<code>heyo-docs.config.ts</code> before the first production release. It keeps
|
|
36
|
+
canonical links, social metadata, and generated discovery files consistent.
|
|
37
|
+
</Callout>
|
|
38
|
+
|
|
39
|
+
## Publish the project
|
|
40
|
+
|
|
41
|
+
For a generated Vercel or Cloudflare project, connect the repository in the
|
|
42
|
+
provider dashboard or run the deployment script included by the selected setup.
|
|
43
|
+
The provider builds the application with the same command you verified locally.
|
|
44
|
+
|
|
45
|
+
<Steps>
|
|
46
|
+
<Step title="Push the documentation source">
|
|
47
|
+
Commit the MDX content and <code>heyo-docs.config.ts</code> together so the
|
|
48
|
+
deployed navigation matches the reviewed pages.
|
|
49
|
+
</Step>
|
|
50
|
+
<Step title="Create a preview">
|
|
51
|
+
Review the provider's preview URL for layout, links, search, and metadata.
|
|
52
|
+
</Step>
|
|
53
|
+
<Step title="Promote the production build">
|
|
54
|
+
Publish once the preview is correct and the configured <code>siteUrl</code>
|
|
55
|
+
matches the public domain.
|
|
56
|
+
</Step>
|
|
57
|
+
</Steps>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Callouts
|
|
3
|
+
description: Highlight prerequisites, tips, warnings, and successful outcomes.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Callouts
|
|
7
|
+
|
|
8
|
+
Use `Callout` when an important note should stand apart from the surrounding
|
|
9
|
+
prose. It works well for a prerequisite, a preferred approach, a warning, or a
|
|
10
|
+
successful result.
|
|
11
|
+
|
|
12
|
+
## Choose the right emphasis
|
|
13
|
+
|
|
14
|
+
Use `note` or `info` for context, `tip` for a recommended approach, and
|
|
15
|
+
`check` for a completed outcome. Reserve `warning` and `danger` for cases
|
|
16
|
+
where missing the message has a real consequence.
|
|
17
|
+
|
|
18
|
+
<Callout type="tip" title="Keep examples focused">
|
|
19
|
+
Show one idea at a time so readers can apply it quickly.
|
|
20
|
+
</Callout>
|
|
21
|
+
|
|
22
|
+
<Callout type="warning" title="Preview before publishing">
|
|
23
|
+
Run the production build locally after changing navigation or MDX.
|
|
24
|
+
</Callout>
|
|
25
|
+
|
|
26
|
+
## Add richer guidance
|
|
27
|
+
|
|
28
|
+
Pass the message as children when it needs Markdown or another MDX component.
|
|
29
|
+
|
|
30
|
+
<Callout type="info" title="Configuration and content work together">
|
|
31
|
+
Navigation belongs in <code>heyo-docs.config.ts</code>; page titles and
|
|
32
|
+
descriptions belong in the page frontmatter.
|
|
33
|
+
</Callout>
|
|
34
|
+
|
|
35
|
+
Keep each callout focused on one decision. A long sequence of status messages is
|
|
36
|
+
usually clearer as regular sections or a numbered procedure.
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Code Blocks
|
|
3
|
+
description: Write compact, copyable examples with syntax highlighting and context.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Code Blocks
|
|
7
|
+
|
|
8
|
+
A code example should answer one implementation question and be safe to copy.
|
|
9
|
+
Use inline code for a literal value, then use a fenced block or `CodeBlock`
|
|
10
|
+
when a reader needs more than one line.
|
|
11
|
+
|
|
12
|
+
## Add a language to fenced code
|
|
13
|
+
|
|
14
|
+
The language label enables syntax highlighting and tells readers what they are
|
|
15
|
+
looking at. Use `bash` for commands, `ts` for configuration, and `json` for
|
|
16
|
+
data.
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
bun run dev
|
|
20
|
+
bun run build
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Give configuration a title
|
|
24
|
+
|
|
25
|
+
Use `CodeBlock` when a sample needs a filename or line numbers. Keep examples
|
|
26
|
+
small enough that a reader can understand their effect before copying them.
|
|
27
|
+
|
|
28
|
+
<CodeBlock language="ts" title="heyo-docs.config.ts" showLineNumbers>
|
|
29
|
+
{`export default heyoDocs({
|
|
30
|
+
title: "Orbit Docs",
|
|
31
|
+
content: "content",
|
|
32
|
+
theme: "grain",
|
|
33
|
+
});`}
|
|
34
|
+
</CodeBlock>
|
|
35
|
+
|
|
36
|
+
## Compare equivalent commands
|
|
37
|
+
|
|
38
|
+
Put package-manager variants in a `CodeBlockGroup` so readers can choose one
|
|
39
|
+
command without scrolling past unrelated options.
|
|
40
|
+
|
|
41
|
+
<CodeBlockGroup defaultValue="bun" variant="line">
|
|
42
|
+
<CodeBlock language="bash" title="bun">
|
|
43
|
+
{"bun add @heyo-sh/heyo-docs"}
|
|
44
|
+
</CodeBlock>
|
|
45
|
+
<CodeBlock language="bash" title="npm">
|
|
46
|
+
{"npm install @heyo-sh/heyo-docs"}
|
|
47
|
+
</CodeBlock>
|
|
48
|
+
<CodeBlock language="bash" title="pnpm">
|
|
49
|
+
{"pnpm add @heyo-sh/heyo-docs"}
|
|
50
|
+
</CodeBlock>
|
|
51
|
+
</CodeBlockGroup>
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Lists
|
|
3
|
+
description: Use ordered, unordered, and task lists to make steps and choices easy to scan.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Lists
|
|
7
|
+
|
|
8
|
+
Lists make a page easier to scan when readers need to compare options, follow a
|
|
9
|
+
short sequence, or check completion. Keep every item parallel in structure and
|
|
10
|
+
start it with the action or noun that matters most.
|
|
11
|
+
|
|
12
|
+
## Use bullets for related options
|
|
13
|
+
|
|
14
|
+
Use an unordered list when order does not change the result.
|
|
15
|
+
|
|
16
|
+
- Keep MDX pages in the `content` directory.
|
|
17
|
+
- Add important routes to `heyo-docs.config.ts`.
|
|
18
|
+
- Build the project before publishing.
|
|
19
|
+
|
|
20
|
+
## Use numbers when sequence matters
|
|
21
|
+
|
|
22
|
+
An ordered list makes dependencies explicit.
|
|
23
|
+
|
|
24
|
+
1. Create an MDX file.
|
|
25
|
+
2. Add its path to a sidebar section.
|
|
26
|
+
3. Start the development server.
|
|
27
|
+
4. Review the rendered route.
|
|
28
|
+
|
|
29
|
+
## Keep nested lists intentional
|
|
30
|
+
|
|
31
|
+
Use a nested list only to clarify a direct relationship. Too many levels make
|
|
32
|
+
the page harder to scan than a short heading and paragraph.
|
|
33
|
+
|
|
34
|
+
- Prepare the release:
|
|
35
|
+
- Review the changed pages.
|
|
36
|
+
- Confirm navigation order.
|
|
37
|
+
- Run the production build.
|
|
38
|
+
|
|
39
|
+
Use a `Steps` component instead when each item needs rich content such as a
|
|
40
|
+
command, callout, or additional explanation.
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Tables
|
|
3
|
+
description: Compare a small, consistent set of options in a documentation table.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Tables
|
|
7
|
+
|
|
8
|
+
Use a table when readers need to compare the same attributes across a small
|
|
9
|
+
number of options. Tables are strongest when every cell is short and each row
|
|
10
|
+
can be understood without a paragraph of surrounding prose.
|
|
11
|
+
|
|
12
|
+
## Compare like with like
|
|
13
|
+
|
|
14
|
+
For example, a configuration reference can show the setting, its purpose, and
|
|
15
|
+
a representative value.
|
|
16
|
+
|
|
17
|
+
| Setting | Purpose | Example |
|
|
18
|
+
| --------- | -------------------------------------- | ---------------------------- |
|
|
19
|
+
| `content` | Directory containing MDX source files. | `"content"` |
|
|
20
|
+
| `theme` | Built-in documentation theme. | `"grain"` |
|
|
21
|
+
| `mode` | Initial color preference. | `"system"` |
|
|
22
|
+
| `siteUrl` | Canonical public site origin. | `"https://docs.example.com"` |
|
|
23
|
+
|
|
24
|
+
## Keep cells concise
|
|
25
|
+
|
|
26
|
+
Move long explanations, procedures, and code samples out of the table. Link to
|
|
27
|
+
a focused guide instead of stretching a table past the point where it can be
|
|
28
|
+
read horizontally.
|
|
29
|
+
|
|
30
|
+
| Use a table for | Use a section for |
|
|
31
|
+
| ---------------------- | ---------------------- |
|
|
32
|
+
| Compact comparisons | A multi-step procedure |
|
|
33
|
+
| Option defaults | A detailed explanation |
|
|
34
|
+
| Short reference values | A large code example |
|
|
35
|
+
|
|
36
|
+
If a reader must act on the information in a specific order, use a numbered
|
|
37
|
+
list or [Quickstart](/quickstart) instead.
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Tabs
|
|
3
|
+
description: Let readers choose between related commands or platform-specific instructions.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Tabs
|
|
7
|
+
|
|
8
|
+
`Tabs` presents related content one panel at a time. It is useful for package
|
|
9
|
+
manager commands, framework variants, and small comparisons where readers need
|
|
10
|
+
only one option to complete the task.
|
|
11
|
+
|
|
12
|
+
## Label equivalent choices clearly
|
|
13
|
+
|
|
14
|
+
Each `Tab` needs a concise title. Give a tab a stable `value` when you need
|
|
15
|
+
to set a different initial panel with `defaultValue`.
|
|
16
|
+
|
|
17
|
+
<Tabs defaultValue="typescript" variant="line">
|
|
18
|
+
<Tab title="JavaScript" value="javascript">
|
|
19
|
+
Import the package from your JavaScript entry point.
|
|
20
|
+
</Tab>
|
|
21
|
+
<Tab title="TypeScript" value="typescript">
|
|
22
|
+
Import the package with full type information and keep configuration typed.
|
|
23
|
+
</Tab>
|
|
24
|
+
</Tabs>
|
|
25
|
+
|
|
26
|
+
## Keep the choices parallel
|
|
27
|
+
|
|
28
|
+
Tabs work when every panel solves the same problem in a different environment.
|
|
29
|
+
Use headings or `Steps` for a sequence that every reader must complete; tabs
|
|
30
|
+
can hide required information.
|
|
31
|
+
|
|
32
|
+
<Tabs defaultValue="vercel" variant="line">
|
|
33
|
+
<Tab title="Vercel" value="vercel">
|
|
34
|
+
Connect the repository and let Vercel detect the framework.
|
|
35
|
+
</Tab>
|
|
36
|
+
<Tab title="Cloudflare" value="cloudflare">
|
|
37
|
+
Deploy the generated static site when your team already uses Cloudflare.
|
|
38
|
+
</Tab>
|
|
39
|
+
<Tab title="Static host" value="static">
|
|
40
|
+
Upload the build output to any host that serves static files.
|
|
41
|
+
</Tab>
|
|
42
|
+
</Tabs>
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Text Styling
|
|
3
|
+
description: Structure documentation with clear headings, emphasis, links, and quotes.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Text Styling
|
|
7
|
+
|
|
8
|
+
Good documentation is easy to scan before it is read in detail. Use the
|
|
9
|
+
frontmatter title for the page's H1, then organize the body around short,
|
|
10
|
+
descriptive H2 and H3 headings.
|
|
11
|
+
|
|
12
|
+
## Build a clear hierarchy
|
|
13
|
+
|
|
14
|
+
Use `##` for the main tasks or ideas on a page. Add `###` only when a section
|
|
15
|
+
has a meaningful subdivision. Headings should tell the reader what they will
|
|
16
|
+
learn, not simply announce that more information follows.
|
|
17
|
+
|
|
18
|
+
```md
|
|
19
|
+
## Configure navigation
|
|
20
|
+
|
|
21
|
+
Add pages in the order readers should follow.
|
|
22
|
+
|
|
23
|
+
### Add an external resource
|
|
24
|
+
|
|
25
|
+
Use a custom link for a separate destination.
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Emphasize the decision
|
|
29
|
+
|
|
30
|
+
Use **bold text** for an important choice and inline `code` for literal values
|
|
31
|
+
such as file names, commands, and configuration keys. Keep the rest of the
|
|
32
|
+
sentence plain so these signals remain useful.
|
|
33
|
+
|
|
34
|
+
```md
|
|
35
|
+
Set `content: "content"` in `heyo-docs.config.ts`.
|
|
36
|
+
|
|
37
|
+
Deploy **after** reviewing the production build.
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Link with context
|
|
41
|
+
|
|
42
|
+
Describe where a link goes instead of pasting a raw URL. Relative links work
|
|
43
|
+
well for another page in the same documentation, while full URLs are useful for
|
|
44
|
+
external resources.
|
|
45
|
+
|
|
46
|
+
Read the [Quickstart](/quickstart) before changing the
|
|
47
|
+
[site configuration](/configuration).
|
|
48
|
+
|
|
49
|
+
> Keep each paragraph focused on one idea so readers can quickly find the
|
|
50
|
+
> decision that applies to them.
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Quickstart
|
|
3
|
+
description: Create, run, and understand your Heyo Docs project.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Quickstart
|
|
7
|
+
|
|
8
|
+
A new Heyo Docs project is a complete documentation site: MDX files provide the
|
|
9
|
+
content, `heyo-docs.config.ts` defines the site model, and your selected
|
|
10
|
+
framework renders the finished experience.
|
|
11
|
+
|
|
12
|
+
## Create a project
|
|
13
|
+
|
|
14
|
+
Use the creator with the package manager you already use. It asks for a project
|
|
15
|
+
name, framework, deployment target, theme, and package manager, then creates a
|
|
16
|
+
ready-to-run application.
|
|
17
|
+
|
|
18
|
+
<CodeBlockGroup defaultValue="bun" variant="line">
|
|
19
|
+
<CodeBlock language="bash" title="bun">
|
|
20
|
+
{"bun create @heyo-sh/heyo-docs"}
|
|
21
|
+
</CodeBlock>
|
|
22
|
+
<CodeBlock language="bash" title="npm">
|
|
23
|
+
{"npm create @heyo-sh/heyo-docs@latest"}
|
|
24
|
+
</CodeBlock>
|
|
25
|
+
<CodeBlock language="bash" title="pnpm">
|
|
26
|
+
{"pnpm create @heyo-sh/heyo-docs"}
|
|
27
|
+
</CodeBlock>
|
|
28
|
+
<CodeBlock language="bash" title="yarn">
|
|
29
|
+
{"yarn dlx @heyo-sh/create-heyo-docs"}
|
|
30
|
+
</CodeBlock>
|
|
31
|
+
</CodeBlockGroup>
|
|
32
|
+
|
|
33
|
+
When the command finishes, move into the new directory and run the development
|
|
34
|
+
command printed by the creator. The local server rebuilds the documentation
|
|
35
|
+
when you change either content or configuration.
|
|
36
|
+
|
|
37
|
+
## How the pieces fit together
|
|
38
|
+
|
|
39
|
+
1. **Content** lives in the `content` directory. Every `.mdx` file becomes a
|
|
40
|
+
documentation route.
|
|
41
|
+
2. **Configuration** in `heyo-docs.config.ts` gives the site its name, theme,
|
|
42
|
+
navigation order, and public metadata.
|
|
43
|
+
3. **The framework app** loads the same model during development and production
|
|
44
|
+
builds, so the sidebar, search, routes, and adjacent-page links stay in sync.
|
|
45
|
+
|
|
46
|
+
Create a new file such as `content/guides/deployment.mdx` to add the
|
|
47
|
+
`/guides/deployment` route. Add that path to a navigation section when the
|
|
48
|
+
page should appear in the sidebar.
|
|
49
|
+
|
|
50
|
+
## Make your first change
|
|
51
|
+
|
|
52
|
+
Update the title and description in the frontmatter of `content/index.mdx`,
|
|
53
|
+
then refresh the browser. Use [Basic Configuration](/configuration) to adjust
|
|
54
|
+
the site model and [Text Styling](/essentials/text-styling) for writing the
|
|
55
|
+
page itself.
|
|
56
|
+
|
|
57
|
+
<Callout type="tip" title="One source of truth">
|
|
58
|
+
Keep navigation in <code>heyo-docs.config.ts</code> and page-specific details
|
|
59
|
+
in MDX frontmatter. The build validates both before publishing.
|
|
60
|
+
</Callout>
|
|
@@ -12,8 +12,30 @@ export default heyoDocs({
|
|
|
12
12
|
icon: "globe",
|
|
13
13
|
sections: [
|
|
14
14
|
{
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
pages: [
|
|
16
|
+
{
|
|
17
|
+
title: "Documentation",
|
|
18
|
+
src: "https://docs.heyo.sh/introduction",
|
|
19
|
+
icon: "book",
|
|
20
|
+
},
|
|
21
|
+
],
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
section: "Get Started",
|
|
25
|
+
icon: "lightbulb",
|
|
26
|
+
pages: ["quickstart", "configuration", "deploying"],
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
section: "Essentials",
|
|
30
|
+
icon: "book",
|
|
31
|
+
pages: [
|
|
32
|
+
"essentials/text-styling",
|
|
33
|
+
"essentials/code-blocks",
|
|
34
|
+
"essentials/callouts",
|
|
35
|
+
"essentials/tabs",
|
|
36
|
+
"essentials/lists",
|
|
37
|
+
"essentials/tables",
|
|
38
|
+
],
|
|
17
39
|
},
|
|
18
40
|
],
|
|
19
41
|
},
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Basic Configuration
|
|
3
|
+
description: Set the identity, content source, and sidebar structure for a Heyo Docs site.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Basic Configuration
|
|
7
|
+
|
|
8
|
+
`heyo-docs.config.ts` is the single source of truth for a Heyo Docs site.
|
|
9
|
+
The framework integration and the documentation UI read the same validated
|
|
10
|
+
object, so a change to navigation or metadata does not need to be repeated in
|
|
11
|
+
multiple places.
|
|
12
|
+
|
|
13
|
+
## Start with the site model
|
|
14
|
+
|
|
15
|
+
The generated project already includes a working configuration. Update the
|
|
16
|
+
identity fields first, then point `content` at the directory that contains
|
|
17
|
+
your MDX files.
|
|
18
|
+
|
|
19
|
+
<CodeBlock language="ts" title="heyo-docs.config.ts" showLineNumbers>
|
|
20
|
+
{`import { heyoDocs } from "@heyo-sh/heyo-docs";
|
|
21
|
+
|
|
22
|
+
export default heyoDocs({
|
|
23
|
+
title: "{{PROJECT_NAME}}",
|
|
24
|
+
description: "Guides and reference for {{PROJECT_NAME}}.",
|
|
25
|
+
content: "./content",
|
|
26
|
+
theme: "grain",
|
|
27
|
+
mode: "system",
|
|
28
|
+
branding: { name: "{{PROJECT_NAME}}" },
|
|
29
|
+
});`}
|
|
30
|
+
</CodeBlock>
|
|
31
|
+
|
|
32
|
+
Set `siteUrl` to the final public origin before publishing. It is used for
|
|
33
|
+
canonical URLs, social metadata, the sitemap, RSS, and AI-facing discovery
|
|
34
|
+
files.
|
|
35
|
+
|
|
36
|
+
## Organize the sidebar
|
|
37
|
+
|
|
38
|
+
Use `groups` to define the order readers see. A group contains named sections
|
|
39
|
+
and their MDX page references; a reference is relative to `content` and does
|
|
40
|
+
not include the `.mdx` extension.
|
|
41
|
+
|
|
42
|
+
<CodeBlock language="ts" title="heyo-docs.config.ts">
|
|
43
|
+
{`groups: [
|
|
44
|
+
{
|
|
45
|
+
group: "Documentation",
|
|
46
|
+
icon: "globe",
|
|
47
|
+
sections: [
|
|
48
|
+
{
|
|
49
|
+
section: "Get Started",
|
|
50
|
+
icon: "lightbulb",
|
|
51
|
+
pages: ["quickstart", "configuration"],
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
section: "Essentials",
|
|
55
|
+
icon: "book",
|
|
56
|
+
pages: ["essentials/text-styling", "essentials/code-blocks"],
|
|
57
|
+
},
|
|
58
|
+
],
|
|
59
|
+
},
|
|
60
|
+
],`}
|
|
61
|
+
</CodeBlock>
|
|
62
|
+
|
|
63
|
+
The order is meaningful: it controls the sidebar and the previous/next links at
|
|
64
|
+
the end of each article. Use a page object with `title` and `src` when a
|
|
65
|
+
sidebar entry should point to a page outside the local documentation.
|
|
66
|
+
|
|
67
|
+
## Verify the result
|
|
68
|
+
|
|
69
|
+
Run the project's typecheck and build commands after changing configuration.
|
|
70
|
+
They resolve each configured MDX page and report missing paths or malformed
|
|
71
|
+
navigation before the site is deployed.
|
|
72
|
+
|
|
73
|
+
<Callout type="info" title="Keep page metadata close to the page">
|
|
74
|
+
Put a page's <code>title</code> and <code>description</code> in its MDX
|
|
75
|
+
frontmatter. Keep shared site settings in <code>heyo-docs.config.ts</code>.
|
|
76
|
+
</Callout>
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Deploying
|
|
3
|
+
description: Build and publish your Heyo Docs site with the deployment target chosen during setup.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Deploying
|
|
7
|
+
|
|
8
|
+
A Heyo Docs site is built as part of the framework application. The creator asks
|
|
9
|
+
for a deployment target when the project is created and adds the corresponding
|
|
10
|
+
configuration, so the same MDX content, navigation, search, and metadata are
|
|
11
|
+
used locally and in production.
|
|
12
|
+
|
|
13
|
+
## Choose the target during setup
|
|
14
|
+
|
|
15
|
+
Select Vercel or Cloudflare when running the creator if you already know where
|
|
16
|
+
the site will live. The generated project includes the adapter and deployment
|
|
17
|
+
configuration required by that platform. You can also choose to configure
|
|
18
|
+
deployment later and keep the starter focused on local development.
|
|
19
|
+
|
|
20
|
+
## Build before publishing
|
|
21
|
+
|
|
22
|
+
Run the production build on your machine before creating a deployment. It
|
|
23
|
+
resolves every configured page, validates the navigation tree, and generates
|
|
24
|
+
the sitemap, RSS feed, robots file, and AI-facing documentation endpoints.
|
|
25
|
+
|
|
26
|
+
<CodeBlock language="bash" title="Terminal">
|
|
27
|
+
{"bun run build"}
|
|
28
|
+
</CodeBlock>
|
|
29
|
+
|
|
30
|
+
Use the equivalent `npm run build`, `pnpm build`, or `yarn build` command
|
|
31
|
+
when the project uses a different package manager.
|
|
32
|
+
|
|
33
|
+
<Callout type="tip" title="Set the canonical URL">
|
|
34
|
+
Add the final public origin as <code>siteUrl</code> in
|
|
35
|
+
<code>heyo-docs.config.ts</code> before the first production release. It keeps
|
|
36
|
+
canonical links, social metadata, and generated discovery files consistent.
|
|
37
|
+
</Callout>
|
|
38
|
+
|
|
39
|
+
## Publish the project
|
|
40
|
+
|
|
41
|
+
For a generated Vercel or Cloudflare project, connect the repository in the
|
|
42
|
+
provider dashboard or run the deployment script included by the selected setup.
|
|
43
|
+
The provider builds the application with the same command you verified locally.
|
|
44
|
+
|
|
45
|
+
<Steps>
|
|
46
|
+
<Step title="Push the documentation source">
|
|
47
|
+
Commit the MDX content and <code>heyo-docs.config.ts</code> together so the
|
|
48
|
+
deployed navigation matches the reviewed pages.
|
|
49
|
+
</Step>
|
|
50
|
+
<Step title="Create a preview">
|
|
51
|
+
Review the provider's preview URL for layout, links, search, and metadata.
|
|
52
|
+
</Step>
|
|
53
|
+
<Step title="Promote the production build">
|
|
54
|
+
Publish once the preview is correct and the configured <code>siteUrl</code>
|
|
55
|
+
matches the public domain.
|
|
56
|
+
</Step>
|
|
57
|
+
</Steps>
|