<commit_before>### Content tree

Content tree specifies what pages does the site have and how to navigate between
them. It should be specified in `sitegen.config.js` and exported under `route`
name.

The type of the content tree:

```
type ContentTree = Page | Collection
```

#### Pages

The `Page` type represents pages of the site.

Sub pages can be specified using optional `route` key which is a mapping from
path segments to remainings of the content tree.

The content of the page can be split from the main bundle by setting `split:
true`. This is useful if a page contains a lot of custom JS code which specific
for the page.

```
type Page = {
  page: string,
  route?: {
    [pathSegment: string]: ContentTree
  },
  split?: boolean
}
```

#### Collections

The `Collection` type represents collections of related pages, such as blog
posts for example.

The `collection` specifies pattern (using glob syntax) and optional pagination
strategy. By default all the pages in the collections are split from the main
bundle.

```
type Collection = {
  page: string,
  collection: {
    pattern: string
    paginate?: {size: number}
  },
  split?: boolean
}
```

#### Examples

The simplest example for a site consisting of a single page:

```
export let route = {page: './Site.js'}
```

Site with a single chrome component and multiple pages:

```
export let route = {
  page: './Site.js',
  route: {
    index: './Main.js',
    docs: './Docs.md',
    about: './About.md',
  }
}
```

Site with a collection of blog posts:

```
export let route = {
  page: './Site.js',
  route: {
    index: {
      page: './Blog.js',
      collection: {
        pattern: './posts/*.md'
      }
    },
    about: './About.js',
  }
}
```

### Components

As Sitegen allows you to use React component you can find on npm there's little
we can ship in its distribution. Though there are some components which are
specific to how Sitegen works.

#### &lt;Link /&gt;

`<Link />` component is used to define navigation between pages. While standard
`<a />` is usable with Sitegen it reloads the browser page on transitions, use
`<Link />` to provide non-reloading page transitions:

```
import {Link} from 'sitegen'<commit_msg>doc: updates for new routing API<commit_after>### Content tree

Content tree specifies what pages does the site have and how to navigate between
them. It should be specified in `sitegen.config.js` and exported under `route`
name.

The type of the content tree:

```
type ContentTree = Page | Collection
```

#### Pages

The `Page` type represents pages of the site.

Sub pages can be specified using optional `route` key which is a mapping from
path segments to remainings of the content tree.

The content of the page can be split from the main bundle by setting `split:
true`. This is useful if a page contains a lot of custom JS code which specific
for the page.

```
import {page} from 'sitegen/routing'

let about = page('./About', {split: true})
let site = page('./Site', undefined, {
  about: about
})
```

#### Collections

The `Collection` type represents collections of related pages, such as blog
posts for example.

The `collection` specifies pattern (using glob syntax) and optional pagination
strategy. By default all the pages in the collections are split from the main
bundle.

```
import {collection} from 'sitegen/routing'

let blog = collection('./Blog', 'posts/*.md')
```

#### Examples

The simplest example for a site consisting of a single page:

```
import {page} from 'sitegen/routing'

export let route = page('./Site.js')
```

Site with a single chrome component and multiple pages:

```
import {page} from 'sitegen/routing'

export let route = page('./Site', undefined, {
  index: page('./Main.js'),
  docs: page('./Docs.md'),
  about: page('./About.md'),
})
```

Site with a collection of blog posts:

```
import {page, collection} from 'sitegen/routing'

export let route = page('./Site', undefined, {
  index: collection('./Blog', './posts/*.md'),
  about: page('./About'),
})
```

### Components

As Sitegen allows you to use React component you can find on npm there's little
we can ship in its distribution. Though there are some components which are
specific to how Sitegen works.

#### &lt;Link /&gt;

`<Link />` component is used to define navigation between pages. While standard
`<a />` is usable with Sitegen it reloads the browser page on transitions, use
`<Link />` to provide non-reloading page transitions:

```
import {Link} from 'sitegen'
{'fraction_non_alphanumeric': 0.11618072557311374, 'fraction_numerical': 0.0, 'mean_word_length': 3.7656415694591727, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2717412', 'n_tokens_mistral': 1303, 'n_tokens_neox': 1255, 'n_words': 602}