We are working very hard to bring you the best documentation possible.

HTML DOCUMENTS

Collections

A collection consists of one or more HTML documents created using a single template and a higher order collection component.

View this example project that demonstrates using a collection to generate pages for all the flags of the world.

The following discussion assumes that you have already read simple components.

Synopsis

Imagine for the moment that you have a portfolio of one kind or another, and that you want to create an HTML document for each item in the portfolio. Imagine how tedious and laborious that process would be if you had to do that manually. fusion.ssg provides a much better solution.

Simply put, fusion.ssg can generate a "collection" of HTML documents using a single template and a collection component that is called multiple times and that returns an object that defines the properties of an HTML document.

Collection Component Tags

A collection component tag is any component tag that declares the property isCollection.

<MyComponent isCollection />

Collection component tags are applicable within includes, templates and pages but may only appear once in an HTML document.

Collection Templates

A collection template is any template that declares a front matter property named isCollection with a value of true.

---
page: team-member
isCollection: true
---
<h1>Team Member</h1>

<TeamMember isCollection datasources="team.json" />

Collection Component Implementation

Collection components are higher order components that produce multiple HTML documents.

fusion.ssg repeatedly invokes collection components until they indicate that they shouldn't be invoked again.

For each invocation, the component receives arguments for an index, for asset and assets, and for any of the other properties that it has declared, such as its data sources.

The value of the index is initially set to 0 and is incremented by 1 for each subsequent invocation, and can be used, for example, to "iterate" through one or more data sources, one invocation at a time.

When there are no more HTML documents to be generated for this collection, the component returns nothing which signals to fusion.ssg that it is to stop calling the component.

Properties Passed As Arguments

• asset: object. The metadata that fusion.ssg has generated for the HTML document that this component is being called for. Components can use the data in this asset when rendering its output for the HTML document.
• assets: asset[]. Contains the metadata that fusion.ssg has generated for all HTML documents in your project. As with asset, components also can use this accumulated data when rendering its output for the HTML document, such as for generating lists whose items contain references to other HTML documents. See the example below.
• index: number. Initially set to 0 and incremented by 1 for every subsequent invocation.
• dataSources: Components that have this property are recognized as being consumers of one or more data sources. This property is a comma separated lists of JSON file names that are located in your project's src/data folder. At runtime, fusion.ssg reads each data source, converting them to JavaScript objects, and passes the converted data sources to your component. Data sources passed to your components can be destructured from props using their JSON file name minus the .json extension.

Returns

To generate an HTML document, collection components should always return an object with the following properties:

• content: HTML. This content will replace the template token in the associated page with this content.
• title: string. Replaces the simple token in this HTML document's title tag (e.g., <title>{title}</title>).
• htmlDocumentName: string. The file name for this HTML document.

When collection components no longer have content to contribute to an HTML document, they return nothing.

interface TeamMember {
    name: {
        first: string,
        last: string
    },
    address: {
        street: string,
        apt: string,
        city: string,
        state: string,
        zip: number,
    }
}

interface Props {
    team: TeamMember[],
    index: number
}

export const TeamMember = function({ team, index }: Props): { content: unknown, title: string, htmlDocumentName: string } | undefined {
    if (index === team.length) return;
    const content = (
        <>
            <h2>{team[index].name.first} {team[index].name.last}</h2>
            <ul style="list-style: none">
                <li><span style="color: green">{team[index].address.city}, {team[index].address.state}</span></li>
            </ul>
        </>
    );
    const title = `${team[index].name.first} ${team[index].name.last}`;
    const htmlDocumentName = `${team[index].name.first}-${team[index].name.last}`;
    return { content, title, htmlDocumentName };
};