Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/souporserious/renoun
Documentation that matches the quality of your product.
https://github.com/souporserious/renoun
Last synced: about 9 hours ago
JSON representation
Documentation that matches the quality of your product.
- Host: GitHub
- URL: https://github.com/souporserious/renoun
- Owner: souporserious
- License: agpl-3.0
- Created: 2022-12-06T08:46:30.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-29T08:03:22.000Z (16 days ago)
- Last Synced: 2024-10-29T09:21:46.307Z (16 days ago)
- Language: TypeScript
- Homepage: https://renoun.dev
- Size: 4.27 MB
- Stars: 416
- Watchers: 4
- Forks: 8
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
Your Technical Content Toolkit
Meticulously crafted React components and utilities to
help you create engaging content and documentation.
## Features
- 📝 Quickly start authoring technincal content
- 📊 Query file and directory metadata
- 🛟 Validate module exports
- 📘 Display API references
- 🌈 Accurately highlight code blocks
- ✅ Type-check code blocks
- 🖼️ Render source code examples
## Getting Started
```bash
npm install renoun
```
After installing the package, you can follow the [getting started guide](https://www.renoun.dev/docs/getting-started) or start creating content using your [favorite framework](https://www.renoun.dev/guides).
### Collections
Collections are a way to organize and query file-system data in renoun. They are a powerful tool that allows you to define a schema for file exports and query those exports using a simple API.
To get started with collections, instantiate the [`Collection`](https://www.renoun.dev/collections#collection) class to create a collection of files and directories from the file system. We can use the `getSource` method to query a specific file or directory:
```tsx
import { Collection } from 'renoun/collections'
const posts = new Collection({ filePattern: 'posts/*.mdx' })
export default async function Page({
params,
}: {
params: Promise<{ slug: string }>
}) {
const post = await posts.getSource((await params).slug)
if (!post) {
return
Post not found
}
const Content = await post.getExport('default').getValue()
return
}
```
Next, we can generate an index page of links to all posts using the `getSources` method:
```tsx
import { Collection } from 'renoun/collections'
const posts = new Collection<{ frontmatter: { title: string } }>({
filePattern: 'posts/*.mdx',
})
export default async function Page() {
const allPosts = await posts.getSources({ depth: 1 })
return (
<>
Blog
-
{frontmatter.title}
{allPosts.map(async (post) => {
const path = post.getPath()
const frontmatter = await post.getExport('frontmatter').getValue()
return (
)
})}
>
)
}
```
We added module export types to the `Collection` to provide better intellisense, for example, when enabling [frontmatter](https://www.renoun.dev/guides/mdx#remark-frontmatter) from `renoun/mdx`. We can also provide [schema validation](https://www.renoun.dev/docs/getting-started#validating-exports) to ensure that modules export the correct shape.
Collections are not limited to MDX files and can be used with _any file type_. By organizing content and source code into structured collections, we can easily generate static pages and manage complex routing and navigations. For a more in-depth look at collections, visit the [collections](https://www.renoun.dev/collections) guide.
### Components
Quickly build interactive and engaging content and documentation with renoun’s powerful set of React components.
#### Syntax Highlighting
Use the [`CodeBlock`](https://www.renoun.dev/components/code-block) component to render syntax-highlighted code blocks:
```tsx
import { CodeBlock } from 'renoun/components'
export default function Page() {
return Hello, world!`} />
}
```
Or take full control of the highlighting process with the `Tokens` component:
```tsx
import { CodeBlock, Tokens } from 'renoun/components'
export default function Page() {
return (
Hello, world!`}>
)
}
```
#### API References
Quickly document your APIs with renoun’s [`APIReference`](https://www.renoun.dev/components/api-reference) component:
```tsx
import { APIReference } from 'renoun/components'
export default function Page() {
return
}
```
API references can also be resolved from a `Collection` source. This can be from a file that will include references for all exports:
```tsx
import { Collection } from 'renoun/collections'
import { APIReference } from 'renoun/components'
const components = new Collection({ filePattern: 'components/*.tsx' })
export default async function Page({
params,
}: {
params: Promise<{ slug: string }>
}) {
const component = await components.getSource((await params).slug)
if (!component) {
return
}
return
}
```
Or from a specific export within a file:
```tsx
import { Collection } from 'renoun/collections'
import { APIReference } from 'renoun/components'
const components = new Collection({ filePattern: 'components/*.tsx' })
export default async function Page({
params,
}: {
params: Promise<{ slug: string }>
}) {
const component = await components.getSource((await params).slug)
if (!component) {
return
}
const componentExports = component.getExports()
return componentExports.map((source) => (
{source.getName()}
))
}
```
---
The renoun toolkit offers many different components to help facilitate writing technical content. Visit the [components](https://www.renoun.dev/components) page to learn more.
## License
[AGPLv3](/LICENSE.md) © [souporserious](https://souporserious.com/)