update remaining collection docs

apps/site/docs/02.getting-started.mdx

@@ -36,9 +36,9 @@ Prepending the renoun CLI ensures that the renoun process starts before your fra
 The `collection` utility is a core concept in renoun. This allows you to query a collection of files from the file system. For example, to create a list of blog posts or documentation pages we can query all the MDX files in a directory:
 
 ```tsx
-import { collection } from 'renoun/collections'
+import { Collection } from 'renoun/collections'
 
-const posts = collection({
+const posts = new Collection({
   filePattern: 'posts/*.mdx',
 })
 ```
@@ -87,10 +87,10 @@ generated at the collection's call site for each targeted extension during the d
 process. These imports are necessary to load the targeted files from
 the file system.
 
-```ts
-import { collection } from 'renoun/collections'
+```ts highlightedLines="5"
+import { Collection } from 'renoun/collections'
 
-const posts = collection(
+const posts = new Collection(
   { filePattern: 'posts/*.mdx' },
   (slug) => import(`./posts/${slug}.mdx`)
 )

packages/renoun/README.md

@@ -36,9 +36,9 @@ Collections are a way to organize and query file-system data in renoun. They are
 Use the `collection` utility to render a collection of files from the file system:
 
 ```tsx
-import { collection } from 'renoun/collections'
+import { Collection } from 'renoun/collections'
 
-const posts = collection({ filePattern: 'posts/*.mdx' })
+const posts = new Collection({ filePattern: 'posts/*.mdx' })
 
 export default async function Page({ params }) {
   const Content = await posts
@@ -73,15 +73,15 @@ export default function Page() {
 Use the `APIReference` component to render API references from `collection` sources:
 
 ```tsx
-import { collection } from 'renoun/collections'
+import { Collection } from 'renoun/collections'
 import { APIReference } from 'renoun/components'
 
-const components = collection({ filePattern: 'components/*.tsx' })
+const components = new Collection({ filePattern: 'components/*.tsx' })
 
 export default async function Page({ params }) {
-  const Component = await components.getSource(params.slug)!
+  const component = await components.getSource(params.slug)!
 
-  return <APIReference component={Component} />
+  return <APIReference source={component} />
 }
 ```
 

packages/renoun/src/collections/docs/index.mdx

@@ -63,7 +63,7 @@ import { PostsCollection } from '../../../collections'
 import { notFound } from 'next/navigation'
 
 export default async function Page({ params }: { params: { slug: string } }) {
-  const source = await PostsCollection.getSource(params.slug)
+  const source = PostsCollection.getSource(params.slug)
 
   if (!source) notFound()
 
@@ -117,7 +117,6 @@ When retrieving a source and querying for siblings, composite collections will a
 const source = AllCollections.getSource(
   'posts/how-to-build-a-button-component'
 )!
-
 const [previousSource, nextSource] = await source.getSiblings()
 ```