Headless: Write unit tests for virtual storage

apps/docs/content/docs/headless/contentlayer/index.mdx

@@ -1,5 +1,58 @@
 ---
-title: Contentlayer
-index: true
-description: Use Next Docs with Contentlayer
+title: Configuration
+description: Learn how to use Contentlayer with Next Docs
 ---
+
+Next Docs has native support for Contentlayer, and provides default
+configuration with required MDX plugins.
+
+## Setup
+
+1. Edit your configuration.
+
+```ts title="contentlayer.config.ts"
+import { makeSource } from 'contentlayer/source-files';
+import { defaultConfig } from 'next-docs-zeta/contentlayer/configuration';
+
+export default makeSource(defaultConfig);
+```
+
+<Callout title="Note">
+  Configuration file **can't** be imported from Next.js runtime.
+</Callout>
+
+2. Load the files with Source API.
+
+```ts
+import { allDocs, allMeta } from 'contentlayer/generated';
+import { createContentlayerSource } from 'next-docs-zeta/contentlayer';
+import { loader } from 'next-docs-zeta/source';
+
+export const docs = loader({
+  baseUrl: '/docs',
+  rootDir: 'docs',
+  source: createContentlayerSource(allMeta, allDocs),
+});
+```
+
+## Pages Structure
+
+All documents should be located in `/content` or `/content/docs`.
+
+<Cards>
+  <Card
+    title="Pages Structure"
+    description="Learn how to structure your pages"
+    href="/docs/headless/page-conventions"
+  />
+</Cards>
+
+## Advanced
+
+Next Docs Zeta also adds extra functionalities to Contentlayer, making it more
+convenient to use and straightforward.
+
+### Adding Icons
+
+You can configure the icon handler in
+the [`loader`](/docs/headless/source-api#icons).

apps/docs/content/docs/ui/index.mdx

@@ -34,7 +34,7 @@ you prefer, such as [Contentlayer](https://contentlayer.dev) and `next-docs-mdx`
 This is a list of sources supported by Next Docs:
 
 - [Next Docs MDX](/docs/mdx)
-- [Contentlayer](/docs/headless/contentlayer/config)
+- [Contentlayer](/docs/headless/contentlayer)
 
 You have to configure the library correctly following their setup guide before continuing.
 

packages/headless/test/graph.test.ts → packages/headless/test/storage.test.ts

@@ -1,7 +1,40 @@
 import { loader } from '@/source';
+import { Storage } from '@/source/file-system';
 import { parseFilePath, parseFolderPath } from '@/source/path';
 import { describe, expect, test } from 'vitest';
 
+describe('Virtual Storage', () => {
+  const storage = new Storage();
+
+  test('Writing', () => {
+    storage.write('test.mdx', {
+      type: 'page',
+      data: { title: 'Hello' },
+      slugs: ['test'],
+      url: '/test',
+    });
+    storage.write('meta.json', { type: 'meta', data: { pages: ['test'] } });
+
+    expect(storage.list().length).toBe(2);
+  });
+
+  test('Reading', () => {
+    expect(storage.read('test')).toBeDefined();
+    expect(storage.read('meta')).toBeDefined();
+  });
+
+  test('Nested Directories', () => {
+    storage.write('dir1/dir2/meta.json', {
+      type: 'meta',
+      data: { pages: ['test'] },
+    });
+
+    expect(storage.readDir('dir1')).toBeDefined();
+    expect(storage.readDir('dir1/dir2')).toBeDefined();
+    expect(storage.read('dir1/dir2/meta')).toBeDefined();
+  });
+});
+
 describe('Building File Graph', () => {
   test('Simple', () => {
     loader({
@@ -41,60 +74,6 @@ describe('Building File Graph', () => {
   });
 
   test('Nested Directories', async () => {
-    loader({
-      source: {
-        files: [
-          {
-            type: 'page',
-            path: 'test.mdx',
-            data: {
-              title: 'Hello',
-            },
-          },
-          {
-            type: 'meta',
-            path: 'meta.json',
-            data: {
-              pages: ['test', 'nested'],
-            },
-          },
-          {
-            type: 'page',
-            path: '/nested/test.mdx',
-            data: {
-              title: 'Nested Page',
-            },
-          },
-        ],
-      },
-      transformers: [
-        ({ storage }) => {
-          expect(storage.root().children).toEqual([
-            expect.objectContaining({
-              type: 'page',
-              file: parseFilePath('test.mdx'),
-            }),
-            expect.objectContaining({
-              type: 'meta',
-              file: parseFilePath('meta.json'),
-            }),
-            expect.objectContaining({
-              type: 'folder',
-              file: parseFolderPath('nested'),
-              children: [
-                expect.objectContaining({
-                  type: 'page',
-                  file: parseFilePath('nested/test.mdx'),
-                }),
-              ],
-            }),
-          ]);
-        },
-      ],
-    });
-  });
-
-  test('Complicated Directories', async () => {
     loader({
       source: {
         files: [