Built-in Page Variables
During the build phase, Coralite automatically injects a page object into the state of your components. This object provides essential information about the current page's URL and file path, making it easy to create dynamic logic like highlighting active navigation links or generating breadcrumbs.
These core variables are organized into url and file objects within the page context.
Available Page Variables #
page.url.pathname: The final URL path that the user navigates to (e.g.,/docs/guide/page-variables.html).page.url.dirname: The directory component of the URL path (e.g.,/docs/guide).page.file.pathname: The physical file path name relative to your pages directory (e.g.,docs/guide/page-variables.html).page.file.dirname: The physical directory name of the source page file (e.g.,docs/guide).page.file.filename: The filename of the source page file (e.g.,page-variables.html).
Metadata Variables #
In addition to the path-related variables, if you are using the built-in metadata plugin, it injects metadata from the page's <head> into the page.meta object:
page.meta.title: Extracted from the page's<title>tag.page.meta.lang: Extracted from thelangattribute on the root<html>tag.
Example Usage #
Because templates do not support dot notation for tokens (e.g., {{ page.url.pathname }}), you must map these variables to local properties in your component's state (via the data function) or getters.
Here is an example of a navigation link component that automatically adds an "active" class if the current URL matches its target URL:
<!-- src/components/nav-link.html -->
<template id="nav-link">
<a href="{{ href }}" class="link {{ activeClass }}">
<slot></slot>
</a>
</template>
<script type="module">
import { defineComponent } from 'coralite'
export default defineComponent({
attributes: {
href: { type: String }
},
getters: {
// Mapping nested page variable to a flat state property
activeClass: (state) => (state.href === state.page.url.pathname ? 'active' : '')
}
})
</script> For static values that don't require reactivity on the client, mapping them in data is the preferred approach:
<!-- src/components/page-info.html -->
<template id="page-info">
<div class="page-info-box">
<p>Current URL: <strong>{{ currentUrl }}</strong></p>
<p>Source File: <strong>{{ fileName }}</strong></p>
<p>Language: <strong>{{ language }}</strong></p>
</div>
</template>
<script type="module">
import { defineComponent } from 'coralite'
export default defineComponent({
data ({ page }) {
return {
currentUrl: page.url.pathname,
fileName: page.file.filename,
language: page.meta.lang
}
}
})
</script>