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:
- 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 atguides/routing/
- a file
- 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.
- When building in static mode, the app will generate static html files for each markdown file at build time.
- 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
directory
String
The directory to load pages from. This is relative to the root of your project. Defaults to content
.
eagerlyLoadAllPages
bool
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
.
enableFrontmatter
bool
Whether to enable frontmatter parsing for pages. Defaults to true
.
dataDirectory
String
The directory to load data files from. This is relative to the root of your project. Defaults to content/_data
.
templateEngine
TemplateEngine
An optional TemplateEngine to preprocess a page's content. This is useful for injecting data into the content before parsing.
parsers
List<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.
extensions
List<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.
components
List<CustomComponent>
A list of CustomComponent to use for rendering the page.
layouts
List<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.
theme
ContentTheme
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 alternativeRouteLoader
s, for example theGithubLoader
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 mainRouter
component like adding additional routes or inserting custom components above the router.
Properties
loaders
List<RouteLoader>
A list of RouteLoader to load pages from.
eagerlyLoadAllPages
bool
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
.
configResolver
ConfigResolver
A function resolve the configuration for a page based on its url. Use PageConfig.all
to resolve the same config for all pages.
routeBuilder
RouteBuilder
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.