ContentApp

The ContentApp component is the root component for building a content-driven site.

The ContentApp component is the root component for building a content-driven site. It controls and sets up the overall content renderin pipeline, from loading the content to rendering it.

It is recommended to use the ContentApp component as the root component of your app like this:

import 'package:jaspr/jaspr.dart';
import 'package:jaspr_content/jaspr_content.dart';

import 'jaspr_options.dart';

void main() {
  Jaspr.initializeApp(options: defaultJasprOptions);

  runApp(ContentApp(
    parsers: [
      MarkdownParser(), // Parses markdown files
    ],
    // ... More configuration here
  ));
}

With this simple setup, using the default ContentApp() constructor, there is already a bunch of stuff happening behind the scenes:

  1. The app analyzes the 'content' directory in your projects and builds a routing table of all files and folders. For example:
    • a file content/index.md will be available at /
    • a file content/guides/routing.md will be available at guides/routing/
  2. The app will parse the markdown content of each file and render it into a Jaspr component, including some basic theming and typographic styles.
    • 2.1. If the file contains frontmatter data, it too will be parsed. Data like a 'title' or 'description' will be rendered as html meta tags.
  3. When building in static mode, the app will generate static html files for each markdown file at build time.
  4. During development, the app watches the 'content' directory for changes and updates the routing table and content accordingly.

ContentApp()

The default ContentApp() constructor is a good starting point for simple content-driven sites. It provides a basic setup for parsing and rendering content from the local filesystem and is easy to setup.

Properties

directoryString

The directory to load pages from. This is relative to the root of your project. Defaults to content.

eagerlyLoadAllPagesbool

Whether to eagerly load all pages at startup. This is needed when a page may depend on other pages, such as when rendering a collection of sub-pages. Defaults to false.

enableFrontmatterbool

Whether to enable frontmatter parsing for pages. Defaults to true.

dataDirectoryString

The directory to load data files from. This is relative to the root of your project. Defaults to content/_data.

templateEngineTemplateEngine

An optional TemplateEngine to preprocess a page's content. This is useful for injecting data into the content before parsing.

parsersList<PageParser>

A list of PageParser to use for parsing the page content. Each parser may be responsible for a file type like markdown, html, etc.

extensionsList<PageExtension>

A list of PageExtension to use for processing the parsed page nodes. Each extension may add or modify the nodes of the page. Extensions are applied in the order they are listed.

componentsList<CustomComponent>

A list of CustomComponent to use for rendering the page.

layoutsList<PageLayout>

A list of PageLayout to use for building the page. When more than one layout is provided, the layout to use is determined by the 'layout' key in the page data. Therefore a page can choose its layout by setting 'layout: ___' in its frontmatter. When no key is set or matching, the first provided layout is used.

themeContentTheme

The ContentTheme to use for the pages.

Based on its properties the ContentApp() constructor creates a default FilesystemLoader and FilesystemDataLoader. It also provides the same configuration to all pages.

For even more control over the content loading and rendering pipeline, you can use the ContentApp.custom() constructor.

ContentApp.custom()

The ContentApp.custom() constructor allows you to:

  • switch out the default FilesystemLoader with one or multiple alternative RouteLoaders, for example the GithubLoader to load content from a Github repository instead of a local directory.

  • configure the ConfigResolver to use different configurations for different pages.

  • add a routeBuilder to customize the main Router component like adding additional routes or inserting custom components above the router.

Properties

loadersList<RouteLoader>

A list of RouteLoader to load pages from.

eagerlyLoadAllPagesbool

Whether to eagerly load all pages at startup. This is needed when a page may depend on other pages, such as when rendering a collection of sub-pages. Defaults to false.

configResolverConfigResolver

A function resolve the configuration for a page based on its url. Use PageConfig.all to resolve the same config for all pages.

routeBuilderRouteBuilder

A custom builder function to use for building the main Router component. This can be used to customize the Router component like add additional routes or inserting components above the router.