277 lines
8.3 KiB
JavaScript
277 lines
8.3 KiB
JavaScript
const DepGraph = require("dependency-graph").DepGraph;
|
||
|
||
function findNavigationEntries(nodes = [], key = "") {
|
||
let keys = key.split(",").filter(k => Boolean(k));
|
||
let pages = {};
|
||
for(let entry of nodes) {
|
||
let data = entry?.data || {};
|
||
if(data?.eleventyNavigation) {
|
||
let {eleventyNavigation} = data || {};
|
||
|
||
let pageKey;
|
||
if(!key && !eleventyNavigation.parent) { // top level (no parents)
|
||
pageKey = "__default";
|
||
} else if(keys.includes(eleventyNavigation.parent)) {
|
||
pageKey = eleventyNavigation.parent;
|
||
}
|
||
|
||
if(pageKey) {
|
||
if(!pages[pageKey]) {
|
||
pages[pageKey] = [];
|
||
}
|
||
let url = eleventyNavigation.url ?? data?.page?.url;
|
||
|
||
pages[pageKey].push(Object.assign({ data }, eleventyNavigation, {
|
||
...(url ? { url } : {}),
|
||
pluginType: "eleventy-navigation",
|
||
...(keys.length > 0 ? { parentKey: eleventyNavigation.parent } : {}),
|
||
}));
|
||
}
|
||
}
|
||
}
|
||
|
||
return Object.values(pages).flat().sort(function(a, b) {
|
||
if(a.pinned && b.pinned) {
|
||
return (a.order || 0) - (b.order || 0);
|
||
}
|
||
|
||
let order = [a.order, b.order];
|
||
if(a.pinned) {
|
||
order[0] = -Infinity;
|
||
}
|
||
if(b.pinned) {
|
||
order[1] = -Infinity;
|
||
}
|
||
|
||
if(order[0] === undefined && order[1] === undefined) {
|
||
return 0;
|
||
}
|
||
if(order[1] === undefined) {
|
||
return -1;
|
||
}
|
||
if(order[0] === undefined) {
|
||
return 1;
|
||
}
|
||
return order[0] - order[1];
|
||
}).map(function(entry) {
|
||
if(!entry.title) {
|
||
entry.title = entry.key;
|
||
}
|
||
if(entry.key) {
|
||
entry.children = findNavigationEntries(nodes, entry.key);
|
||
}
|
||
return entry;
|
||
});
|
||
}
|
||
|
||
function findDependencies(pages, depGraph, parentKey) {
|
||
for( let page of pages ) {
|
||
depGraph.addNode(page.key, page);
|
||
if(parentKey) {
|
||
depGraph.addDependency(page.key, parentKey);
|
||
}
|
||
if(page.children) {
|
||
findDependencies(page.children, depGraph, page.key);
|
||
}
|
||
}
|
||
}
|
||
|
||
function getDependencyGraph(nodes) {
|
||
let pages = findNavigationEntries(nodes);
|
||
let graph = new DepGraph();
|
||
findDependencies(pages, graph);
|
||
return graph;
|
||
}
|
||
|
||
function isOptionMatch(options, name) {
|
||
// Liquid.js issue #35
|
||
if(Array.isArray(options)) {
|
||
return options[options.indexOf(name)]
|
||
}
|
||
return options[name];
|
||
}
|
||
|
||
function findBreadcrumbEntries(nodes, activeKey, options = {}) {
|
||
let graph = getDependencyGraph(nodes);
|
||
if (isOptionMatch(options, "allowMissing") && !graph.hasNode(activeKey)) {
|
||
// Fail gracefully if the key isn't in the graph
|
||
return [];
|
||
}
|
||
let deps = graph.dependenciesOf(activeKey);
|
||
if(isOptionMatch(options, "includeSelf")) {
|
||
deps.push(activeKey);
|
||
}
|
||
|
||
return activeKey ? deps.map(key => {
|
||
let data = Object.assign({}, graph.getNodeData(key));
|
||
delete data.children;
|
||
data._isBreadcrumb = true;
|
||
return data;
|
||
}) : [];
|
||
}
|
||
|
||
function getUrlFilter(eleventyConfig) {
|
||
// eleventyConfig.pathPrefix was first available in Eleventy 2.0.0-canary.15
|
||
// And in Eleventy 2.0.0-canary.15 we recommend the a built-in transform for pathPrefix
|
||
if(eleventyConfig.pathPrefix !== undefined) {
|
||
return function(url) {
|
||
return url;
|
||
};
|
||
}
|
||
|
||
if("getFilter" in eleventyConfig) {
|
||
// v0.10.0 and above
|
||
return eleventyConfig.getFilter("url");
|
||
} else if("nunjucksFilters" in eleventyConfig) {
|
||
// backwards compat, hardcoded key
|
||
return eleventyConfig.nunjucksFilters.url;
|
||
} else {
|
||
// Theoretically we could just move on here with a `url => url` but then `pathPrefix`
|
||
// would not work and it wouldn’t be obvious why—so let’s fail loudly to avoid that.
|
||
throw new Error("Could not find a `url` filter for the eleventy-navigation plugin in eleventyNavigationToHtml filter.");
|
||
}
|
||
}
|
||
|
||
function buildHtmlAttr(name, values) {
|
||
// values could be array or string
|
||
if (!values || !values.length) {
|
||
return '';
|
||
}
|
||
const valueStr = Array.isArray(values) ? values.join(" ") : values;
|
||
return ` ${name}="${valueStr}"`;
|
||
}
|
||
|
||
function buildAllHtmlAttrs(attrs) {
|
||
return attrs.reduce((acc, { name, values }) => acc + buildHtmlAttr(name, values), '');
|
||
}
|
||
|
||
function navigationToHtml(pages, options = {}) {
|
||
options = Object.assign({
|
||
listElement: "ul",
|
||
listItemElement: "li",
|
||
listClass: "",
|
||
listItemClass: "",
|
||
listItemHasChildrenClass: "",
|
||
activeKey: "",
|
||
activeListItemClass: "",
|
||
anchorClass: "",
|
||
activeAnchorClass: "",
|
||
useAriaCurrentAttr: false,
|
||
showExcerpt: false,
|
||
isChildList: false,
|
||
useTopLevelDetails: false,
|
||
anchorElementWithoutHref: "a", // default, better to use span
|
||
}, options);
|
||
|
||
let isChildList = !!options.isChildList;
|
||
options.isChildList = true;
|
||
|
||
let urlFilter;
|
||
|
||
if(pages.length && pages[0].pluginType !== "eleventy-navigation") {
|
||
throw new Error("Incorrect argument passed to eleventyNavigationToHtml filter. You must call `eleventyNavigation` or `eleventyNavigationBreadcrumb` first, like: `collection.all | eleventyNavigation | eleventyNavigationToHtml | safe`");
|
||
}
|
||
|
||
return pages.length ? `<${options.listElement}${!isChildList && options.listClass ? ` class="${options.listClass}"` : ''}>${pages.map(entry => {
|
||
let liClass = [];
|
||
let aClass = [];
|
||
let aAttrs = [];
|
||
if(options.listItemClass) {
|
||
liClass.push(options.listItemClass);
|
||
}
|
||
if(options.anchorClass) {
|
||
aClass.push(options.anchorClass);
|
||
}
|
||
if(entry.url) {
|
||
if(!urlFilter) {
|
||
// don’t get if not used
|
||
urlFilter = getUrlFilter(this);
|
||
}
|
||
aAttrs.push({name: "href", values: urlFilter(entry.url)})
|
||
}
|
||
if(options.activeKey === entry.key) {
|
||
if(options.activeListItemClass) {
|
||
liClass.push(options.activeListItemClass);
|
||
}
|
||
if(options.activeAnchorClass) {
|
||
aClass.push(options.activeAnchorClass);
|
||
}
|
||
if(options.useAriaCurrentAttr) {
|
||
aAttrs.push({ name: "aria-current", values: "page" });
|
||
}
|
||
}
|
||
if(options.listItemHasChildrenClass && entry.children && entry.children.length) {
|
||
liClass.push(options.listItemHasChildrenClass);
|
||
}
|
||
if(aClass.length) {
|
||
aAttrs.push({ name: "class", values: aClass });
|
||
}
|
||
|
||
let postfix = "";
|
||
|
||
// Helper to show pin/order in text:
|
||
// let hasOrder = entry.order || entry.order === 0;
|
||
// if(process.env.ELEVENTY_RUN_MODE === "serve" && (hasOrder || entry.pinned)) {
|
||
// postfix = ` (${entry.pinned ? "📌" : ""}${entry.order ?? ""})`;
|
||
// }
|
||
|
||
let aAttrsStr = buildAllHtmlAttrs(aAttrs);
|
||
let hasLink = aAttrs.find(entry => entry.name === "href");
|
||
let itemTitle = entry.title + postfix;
|
||
|
||
let titleHtmlStart = `<a${aAttrsStr}>${itemTitle}</a>`;
|
||
|
||
// purely defensive use of `useTopLevelDetails` here
|
||
if(options.anchorElementWithoutHref && !hasLink) {
|
||
titleHtmlStart = `<${options.anchorElementWithoutHref}>${itemTitle}</${options.anchorElementWithoutHref}>`;
|
||
}
|
||
|
||
let titleHtmlEnd = "";
|
||
if(options.useTopLevelDetails && !isChildList && entry.children) {
|
||
if(hasLink) {
|
||
// `<a>` must be sibling: no other interactive elements in <summary>
|
||
titleHtmlStart = `${titleHtmlStart}<details><summary>${itemTitle}</summary>`;
|
||
} else {
|
||
titleHtmlStart = `<details><summary>${itemTitle}</summary>`;
|
||
}
|
||
titleHtmlEnd = "</details>";
|
||
}
|
||
|
||
let childContentStr = entry.children ? navigationToHtml.call(this, entry.children, options) : "";
|
||
|
||
return `<${options.listItemElement}${buildHtmlAttr("class", liClass)}>${titleHtmlStart}${options.showExcerpt && entry.excerpt ? `: ${entry.excerpt}` : ""}${childContentStr}${titleHtmlEnd}</${options.listItemElement}>`;
|
||
}).join("\n")}</${options.listElement}>` : "";
|
||
}
|
||
|
||
function navigationToMarkdown(pages, options = {}) {
|
||
options = Object.assign({
|
||
showExcerpt: false,
|
||
childDepth: 0
|
||
}, options);
|
||
|
||
let childDepth = 1 + options.childDepth;
|
||
options.childDepth++;
|
||
|
||
let urlFilter;
|
||
|
||
if(pages.length && pages[0].pluginType !== "eleventy-navigation") {
|
||
throw new Error("Incorrect argument passed to eleventyNavigationToMarkdown filter. You must call `eleventyNavigation` or `eleventyNavigationBreadcrumb` first, like: `collection.all | eleventyNavigation | eleventyNavigationToMarkdown | safe`");
|
||
}
|
||
|
||
let indent = (new Array(childDepth)).join(" ") || "";
|
||
return pages.length ? `${pages.map(entry => {
|
||
if(entry.url && !urlFilter) {
|
||
// don’t get if not used
|
||
urlFilter = getUrlFilter(this);
|
||
}
|
||
return `${indent}* ${entry.url ? `[` : ""}${entry.title}${entry.url ? `](${urlFilter(entry.url)})` : ""}${options.showExcerpt && entry.excerpt ? `: ${entry.excerpt}` : ""}\n${entry.children ? navigationToMarkdown.call(this, entry.children, options) : ""}`;
|
||
}).join("")}` : "";
|
||
}
|
||
|
||
module.exports = {
|
||
getDependencyGraph,
|
||
findNavigationEntries,
|
||
findBreadcrumbEntries,
|
||
toHtml: navigationToHtml,
|
||
toMarkdown: navigationToMarkdown
|
||
}; |
