@heyo-sh/create-heyo-docs 0.2.0 → 0.2.1

package/templates/react-router/content/essentials/tabs.mdx

@@ -0,0 +1,42 @@
+---
+title: Tabs
+description: Let readers choose between related commands or platform-specific instructions.
+---
+
+# Tabs
+
+`Tabs` presents related content one panel at a time. It is useful for package
+manager commands, framework variants, and small comparisons where readers need
+only one option to complete the task.
+
+## Label equivalent choices clearly
+
+Each `Tab` needs a concise title. Give a tab a stable `value` when you need
+to set a different initial panel with `defaultValue`.
+
+<Tabs defaultValue="typescript" variant="line">
+  <Tab title="JavaScript" value="javascript">
+    Import the package from your JavaScript entry point.
+  </Tab>
+  <Tab title="TypeScript" value="typescript">
+    Import the package with full type information and keep configuration typed.
+  </Tab>
+</Tabs>
+
+## Keep the choices parallel
+
+Tabs work when every panel solves the same problem in a different environment.
+Use headings or `Steps` for a sequence that every reader must complete; tabs
+can hide required information.
+
+<Tabs defaultValue="vercel" variant="line">
+  <Tab title="Vercel" value="vercel">
+    Connect the repository and let Vercel detect the framework.
+  </Tab>
+  <Tab title="Cloudflare" value="cloudflare">
+    Deploy the generated static site when your team already uses Cloudflare.
+  </Tab>
+  <Tab title="Static host" value="static">
+    Upload the build output to any host that serves static files.
+  </Tab>
+</Tabs>

package/templates/react-router/content/essentials/text-styling.mdx

@@ -0,0 +1,50 @@
+---
+title: Text Styling
+description: Structure documentation with clear headings, emphasis, links, and quotes.
+---
+
+# Text Styling
+
+Good documentation is easy to scan before it is read in detail. Use the
+frontmatter title for the page's H1, then organize the body around short,
+descriptive H2 and H3 headings.
+
+## Build a clear hierarchy
+
+Use `##` for the main tasks or ideas on a page. Add `###` only when a section
+has a meaningful subdivision. Headings should tell the reader what they will
+learn, not simply announce that more information follows.
+
+```md
+## Configure navigation
+
+Add pages in the order readers should follow.
+
+### Add an external resource
+
+Use a custom link for a separate destination.
+```
+
+## Emphasize the decision
+
+Use **bold text** for an important choice and inline `code` for literal values
+such as file names, commands, and configuration keys. Keep the rest of the
+sentence plain so these signals remain useful.
+
+```md
+Set `content: "content"` in `heyo-docs.config.ts`.
+
+Deploy **after** reviewing the production build.
+```
+
+## Link with context
+
+Describe where a link goes instead of pasting a raw URL. Relative links work
+well for another page in the same documentation, while full URLs are useful for
+external resources.
+
+Read the [Quickstart](/quickstart) before changing the
+[site configuration](/configuration).
+
+> Keep each paragraph focused on one idea so readers can quickly find the
+> decision that applies to them.

package/templates/react-router/content/quickstart.mdx

@@ -0,0 +1,60 @@
+---
+title: Quickstart
+description: Create, run, and understand your Heyo Docs project.
+---
+
+# Quickstart
+
+A new Heyo Docs project is a complete documentation site: MDX files provide the
+content, `heyo-docs.config.ts` defines the site model, and your selected
+framework renders the finished experience.
+
+## Create a project
+
+Use the creator with the package manager you already use. It asks for a project
+name, framework, deployment target, theme, and package manager, then creates a
+ready-to-run application.
+
+<CodeBlockGroup defaultValue="bun" variant="line">
+  <CodeBlock language="bash" title="bun">
+    {"bun create @heyo-sh/heyo-docs"}
+  </CodeBlock>
+  <CodeBlock language="bash" title="npm">
+    {"npm create @heyo-sh/heyo-docs@latest"}
+  </CodeBlock>
+  <CodeBlock language="bash" title="pnpm">
+    {"pnpm create @heyo-sh/heyo-docs"}
+  </CodeBlock>
+  <CodeBlock language="bash" title="yarn">
+    {"yarn dlx @heyo-sh/create-heyo-docs"}
+  </CodeBlock>
+</CodeBlockGroup>
+
+When the command finishes, move into the new directory and run the development
+command printed by the creator. The local server rebuilds the documentation
+when you change either content or configuration.
+
+## How the pieces fit together
+
+1. **Content** lives in the `content` directory. Every `.mdx` file becomes a
+   documentation route.
+2. **Configuration** in `heyo-docs.config.ts` gives the site its name, theme,
+   navigation order, and public metadata.
+3. **The framework app** loads the same model during development and production
+   builds, so the sidebar, search, routes, and adjacent-page links stay in sync.
+
+Create a new file such as `content/guides/deployment.mdx` to add the
+`/guides/deployment` route. Add that path to a navigation section when the
+page should appear in the sidebar.
+
+## Make your first change
+
+Update the title and description in the frontmatter of `content/index.mdx`,
+then refresh the browser. Use [Basic Configuration](/configuration) to adjust
+the site model and [Text Styling](/essentials/text-styling) for writing the
+page itself.
+
+<Callout type="tip" title="One source of truth">
+  Keep navigation in <code>heyo-docs.config.ts</code> and page-specific details
+  in MDX frontmatter. The build validates both before publishing.
+</Callout>

package/templates/react-router/heyo-docs.config.ts

@@ -12,8 +12,30 @@ export default heyoDocs({
       icon: "globe",
       sections: [
         {
-          section: "Get started",
-          pages: ["index"],
+          pages: [
+            {
+              title: "Documentation",
+              src: "https://docs.heyo.sh/introduction",
+              icon: "book",
+            },
+          ],
+        },
+        {
+          section: "Get Started",
+          icon: "lightbulb",
+          pages: ["quickstart", "configuration", "deploying"],
+        },
+        {
+          section: "Essentials",
+          icon: "book",
+          pages: [
+            "essentials/text-styling",
+            "essentials/code-blocks",
+            "essentials/callouts",
+            "essentials/tabs",
+            "essentials/lists",
+            "essentials/tables",
+          ],
         },
       ],
     },