Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sdorra/content-collections
Transform your content into type-safe data collections
https://github.com/sdorra/content-collections
collections content content-layer json markdown mdx nextjs nodejs react remix svektekit vite yaml
Last synced: 8 days ago
JSON representation
Transform your content into type-safe data collections
- Host: GitHub
- URL: https://github.com/sdorra/content-collections
- Owner: sdorra
- License: mit
- Created: 2023-11-23T20:48:07.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-04-12T11:01:44.000Z (7 months ago)
- Last Synced: 2024-04-14T03:13:05.006Z (7 months ago)
- Topics: collections, content, content-layer, json, markdown, mdx, nextjs, nodejs, react, remix, svektekit, vite, yaml
- Language: TypeScript
- Homepage: https://content-collections.dev
- Size: 3.56 MB
- Stars: 46
- Watchers: 3
- Forks: 4
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- jimsghstars - sdorra/content-collections - Transform your content into type-safe data collections (TypeScript)
README
# Content Collections
Transform your content into type-safe data collections. Eliminate the need for manual data fetching and parsing. Simply import your content and begin. Built-in validation ensures the accuracy of your data. Preprocess your data before it enters your app.
## Features
- **Beautiful DX**:
Content Collections is designed to provide a pleasurable user experience. It offers a seamless developer experience without the need to restart the server or refresh the browser. Content collections are automatically updated when you make changes to your content.
- **Type-safe**:
Your content is parsed and validated during the build process, guaranteeing accuracy and currency. Content Collections offers a type-safe API to access your content.
- **Simple to use**:
No need to manually fetch and parse your content anymore. Just import it and start using Content Collections. It provides a simple API, allowing you to concentrate on building your app.
- **Tansformation**:
Content Collections allows you to transform your content before it enters your app. You can use it to modify your content, join two collections or even fetch data from a server.
## Installation
Content Collections offers a variety of adapters that seamlessly integrate with popular web frameworks. The installation process depends on the chosen adapter:
- [Next.js](https://www.content-collections.dev/docs/quickstart/next)
- [Qwik](https://www.content-collections.dev/docs/quickstart/qwik)
- [Remix (Vite)](https://www.content-collections.dev/docs/quickstart/remix-vite)
- [Solid Start](https://www.content-collections.dev/docs/quickstart/solid)
- [SvelteKit](https://www.content-collections.dev/docs/quickstart/svelte-kit)
- [Vite](https://www.content-collections.dev/docs/quickstart/vite)
If your framework is not listed, you can still use Content Collections by using the [CLI](https://www.content-collections.dev/docs/quickstart/cli). Please open a ticket if you want to see your framework listed.
## Usage
1. Create a content-collections.ts file at the root of your project:
```ts
import { defineCollection, defineConfig } from "@content-collections/core";
const posts = defineCollection({
name: "posts",
directory: "src/posts",
include: "**/*.md",
schema: (z) => ({
title: z.string(),
summary: z.string(),
}),
});
export default defineConfig({
collections: [posts],
});
```
1. Start writing content in `src/posts`:
```md
---
title: Hello World
summary: This is my first post
---
# Hello World
This is my first post.
```
1. Use your content in your app:
```tsx
import { allPosts } from "content-collections";
export function Posts() {
return (
-
{post.title}
{post.summary}
{allPosts.map((post) => (
))}
);
}
```
Please note that the example above shows only the very basics of Content Collections and it does not cover content transformation.
Content Collections does not transform content like markdown or mdx by default.
But it has packages which can do that for you:
- [@content-collections/markdown](https://www.content-collections.dev/docs/samples/markdown)
- [@content-collections/mdx](https://www.content-collections.dev/docs/samples/mdx)
If you want to see more examples and use cases, please refer to the [documentation](https://content-collections.dev/docs).
## Sponsors
### [Become a sponsor](https://github.com/sponsors/sdorra)
## License
Content Collections is licensed under the [MIT License](./LICENSE).