coralite-plugin-aggregation
Advanced tools
A Coralite plugin for dynamically collecting, filtering, sorting, and displaying content across multiple sources. Build database-free Coralite websites with automated content aggregation.
The Coralite Aggregation Plugin is a powerful tool designed to help developers dynamically collect, filter, sort, and display content across multiple sources within a Coralite project.
blog/, ['products/all','blog/']).npm install coralite-plugin-aggregation
First, enable the plugin in your coralite.config.js:
// coralite.config.js
import aggregation from 'coralite-plugin-aggregation'
export default {
plugins: [aggregation]
}
Note: The plugin must be imported as
'coralite-plugin-aggregation'for compatibility with the core Coralite framework.
Create a file like coralite-posts.html to define your aggregation logic and rendering template:
<!-- templates/coralite-posts.html -->
<template id="coralite-posts">
<div>
{{ posts }}
<!-- Pagination controls will be injected automatically if enabled. -->
</div>
</template>
<script type="module">
import { defineComponent, aggregation } from 'coralite/plugins'
export default defineComponent({
tokens: {
// Aggregation function returns an array of content items.
posts() {
return aggregation({
path: ['products'], // Source directory.
template: 'coralite-post', // Template ID for individual items.
limit: 20, // Maximum number of results per page.
recursive: true, // Include subdirectories.
pagination: {
token: 'post_count', // Page size control token.
template: 'coralite-pagination', // Template for pagination controls.
path: 'page', // Infix for paginated URLs (e.g., `page/1`).
visible: 5 // Max number of visible page links.
},
filter(meta) {
return meta.name === 'category' && meta.content === 'tech'
},
sort(a, b) {
return new Date(b.date) - new Date(a.date)
},
tokens: {
default: {
author: 'Anonymous',
category: 'uncategorized'
},
aliases: {
tags: ['tech', 'news', 'tutorial']
}
}
})
}
}
})
</script>
Each file to be aggregated must include metadata via <meta> elements. For example:
<!-- pages/products/product-1.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="title" content="Great Barrier Reef" />
<meta name="description" content="The Great Barrier Reef—largest, comprising over 2,900 individual reefs and 900 islands stretching for over 2,600 kilometers." />
<meta name="price" content="1000" />
<meta name="published_time" content="2025-01-08T20:23:07.645Z" />
</head>
<body>
<coralite-header>
<h1>Great Barrier Reef</h1>
</coralite-header>
<coralite-author name="Nemo" datetime="2025-01-08T20:23:07.645Z"></coralite-author>
</body>
</html>
Define a <template> element for rendering individual items:
<!-- templates/coralite-post.html -->
<template id="coralite-post">
<div class="post-item">
<h2>{{ $title }}</h2>
<p>{{ $description }} - {{ formattedPrice }}</p>
</div>
</template>
<script type="module">
import { defineComponent } from 'coralite/plugins'
export default defineComponent({
tokens: {
// Custom token to format prices using Intl.NumberFormat.
formattedPrice(values) {
return new Intl.NumberFormat("en-AU", { style: "currency", currency: "AUD" }).format(
values.$price
)
}
}
})
</script>
Token Syntax: Metadata attributes are accessed in templates as
$<meta name>. For example, the<meta name="title">element is referenced using$title.
CoraliteAggregate {#coralite-aggregate}Configuration object for content aggregation processes.
| Property | Type | Description | Reference |
|---|---|---|---|
path | string[] | Array of paths relative to the pages directory (e.g., ['products', 'blog/']). | - |
template | CoraliteAggregateTemplate or string | Templates used to display the result. Must match an existing <template> element by ID. | CoraliteAggregateTemplate |
pagination | Object | Pagination settings (optional). | - |
filter | CoraliteAggregateFilter | Callback to filter out unwanted elements from the aggregated content. | CoraliteAggregateFilter |
recursive | boolean | Whether to recursively search subdirectories. | - |
tokens | CoraliteTokenOptions | Token configuration options (optional). | CoraliteTokenOptions |
sort | CoraliteAggregateSort | Sort aggregated pages. | CoraliteAggregateSort |
limit | number | Maximum number of results to retrieve (used with pagination). | - |
offset | number | Starting index for the results list (used with pagination). | - |
CoraliteAggregateTemplate {#coralite-aggregate-template}Configuration for templates used to render aggregated results.
| Property | Type | Description | Reference |
|---|---|---|---|
item | string | Unique identifier for the component used for each document (e.g., 'coralite-post'). | - |
CoraliteTokenOptions {#coralite-token-options}Configuration options for token handling during processing.
| Property | Type | Description |
|---|---|---|
default | Object.<string, string> | Default token values for properties not explicitly set (e.g., { author: 'Anonymous' }). |
aliases | Object.<string, string[]> | Token aliases and their possible values (e.g., { tags: ['tech', 'news'] }). |
CoraliteAggregateFilter {#coralite-aggregate-filter}Callback function for filtering aggregated content based on metadata.
| Parameter | Type | Description |
|---|---|---|
metadata | CoraliteToken | Aggregated HTML page metadata (e.g., { name: 'category', content: 'tech' }). |
CoraliteAggregateSort {#coralite-aggregate-sort}Callback function for sorting aggregated results based on metadata.
| Parameter | Type | Description |
|---|---|---|
a | Object.<string, string> | Metadata of the first item being compared (e.g., { date: '2025-01-08' }). |
b | Object.<string, string> | Metadata of the second item being compared. |
CoraliteToken {#coralite-token}A representation of a token with name and value.
| Property | Type | Description |
|---|---|---|
name | string | Token identifier (e.g., 'title', 'category'). |
content | string | Token value or content (e.g., 'Great Barrier Reef', 'tech'). |
This guide explains how to create a custom pagination template using the existing coralite-pagination component as a reference. The goal is to define a new pager layout below the default implementation, preserving compatibility with the core logic while enabling customization.
Define a unique <template> element for your custom pager. Use an ID distinct from the default (coralite-pagination) to avoid conflicts:
<template id="coralite-pagination-custom">
{{ pagination_list }}
</template>
<script type="module">Replace or extend the pagination_list token function with your custom logic. The core structure remains compatible with Coralite’s API, but you can modify rendering rules (e.g., ellipsis behavior, link formatting).
<script type="module">
import { defineComponent } from 'coralite'
export default defineComponent({
tokens: {
/**
* @param {Object} values
* @param {string} values.pagination_visible - Max number of visible pages items.
* @param {string} values.pagination_offset - Number of items to skip from the beginning (offset for pagination)
* @param {string} values.pagination_index - Base URL path for generating pagination links
* @param {string} values.pagination_dirname - Directory path component for routing context
* @param {string} values.pagination_length - Total number of items across all pages
* @param {string} values.pagination_current - Currently active page number or identifier
*/
pagination_list (values) {
const length = parseInt(values.pagination_length)
if (!length) return ''
// Custom logic: render a simplified pager with only previous/next and current page
const currentPage = parseInt(values.pagination_current)
const dirname = values.pagination_dirname[0] === '/' ? values.pagination_dirname : '/' + values.pagination_dirname
let html = '<ul class="pagination">'
// Previous link
if (currentPage > 1) {
html += `<li class="page-item"><a class="page-link" href="${dirname}/${currentPage - 1}.html">Previous</a></li>`
} else {
html += '<li class="page-item disabled"><span class="page-link">Previous</span></li>'
}
// Current page
html += `<li class="page-item active"><span class="page-link">${currentPage}</span></li>`
// Next link
if (currentPage < length) {
html += `<li class="page-item"><a class="page-link" href="${dirname}/${currentPage + 1}.html">Next</a></li>`
} else {
html += '<li class="page-item disabled"><span class="page-link">Next</span></li>'
}
html += '</ul>'
return html
}
}
})
</script>
The pagination_list token function receives these critical parameters from Coralite:
| Parameter | Description |
|---|---|
values.pagination_length | Total number of items across all pages (used to determine page count). |
values.pagination_current | Currently active page number. |
values.pagination_dirname | Base directory path for routing context (e.g., /blog). |
values.pagination_index | Base URL path for pagination links (e.g., /blog/index.html). |
Note: Avoid hardcoding values like
length,currentPage, ordirname. Use the parameters provided by Coralite to ensure compatibility.
FAQs
A Coralite plugin for dynamically collecting, filtering, sorting, and displaying content across multiple sources. Build database-free Coralite websites with automated content aggregation.
The npm package coralite-plugin-aggregation receives a total of 5 weekly downloads. As such, coralite-plugin-aggregation popularity was classified as not popular.
We found that coralite-plugin-aggregation demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.