Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 | 4x 4x 4x 4x 4x 4x 4x 14x 14x 14x 24x 24x 24x 24x 24x 24x 24x 24x 24x 24x 1x 9x 9x 1x 9x 9x 9x 14x 14x 14x 4x 14x 13x 14x 13x 14x 13x 14x 14x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 10x 10x 10x 10x 10x 10x 10x 1x 1x 1x 1x 1x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 10x 1x 1x 9x 9x 9x 9x 9x 18x 36x 9x | import cheerio from 'cheerio';
import fs from 'fs-extra';
import path from 'path';
import jsPkg from 'js-beautify';
import _ from 'lodash';
import { pageVueServerRenderer } from './PageVueServerRenderer.js';
import { CyclicReferenceError } from '../errors/CyclicReferenceError.js';
import { PageSources } from './PageSources.js';
import { NodeProcessor, NodeProcessorConfig } from '../html/NodeProcessor.js';
import * as logger from '../utils/logger.js';
import type { PageAssets, PageConfig } from './PageConfig.js';
import type { SiteConfig } from '../Site/SiteConfig.js';
import type { FrontMatter } from '../plugins/Plugin.js';
import type { ExternalManager } from '../External/ExternalManager.js';
import { MbNode } from '../utils/node.js';
import { checkForVueHydrationViolation } from '../utils/htmlValidationUtil.js';
import { LAYOUT_DEFAULT_NAME } from '../Layout/index.js';
import { instance as LockManager } from '../utils/LockManager.js';
import packageJson from '../../package.json' with { type: 'json' };
import '../patches/htmlparser2.js';
// Destructure for CJS interoperability.
// Using ESM-style import does not work due to the fact that jsPkg is exported as a CJS module.
const { html: htmlBeautify } = jsPkg;
const PACKAGE_VERSION = packageJson.version;
const TITLE_PREFIX_SEPARATOR = ' - ';
const TITLE_SUFFIX_SEPARATOR = ' - ';
const PAGE_NAV_ID = 'mb-page-nav';
const PAGE_NAV_TITLE_CLASS = 'page-nav-title';
cheerio.prototype.options.decodeEntities = false; // Don't escape HTML entities
export class Page {
pageConfig: PageConfig;
siteConfig: SiteConfig;
// We assert that these properties exist because resetState is called in the constructor to initialise them
asset!: PageAssets;
pageUserScriptsAndStyles!: string[];
frontmatter!: FrontMatter;
headerIdMap!: Record<string, number>;
includedFiles!: Set<string>;
headings!: Record<string, string>;
keywords!: Record<string, string[]>;
navigableHeadings!: {
[id: string]: {
text: string,
level: number
}
};
title?: string;
layout?: string;
constructor(pageConfig: PageConfig, siteConfig: SiteConfig) {
/**
* Page configuration passed from {@link Site}.
* This should not be mutated.
*/
this.pageConfig = pageConfig;
/**
* Site configuration passed from {@link Site}.
*/
this.siteConfig = siteConfig;
this.resetState();
}
/**
* Resets or initialises all stateful variables of the page,
* which differs from one page generation call to another.
*/
resetState() {
/**
* Object containing asset names as keys and their corresponding file paths,
* or an array of <link/script> elements extracted from plugins during {@link collectPluginPageNjkAssets}.
* @type {Object<string, string | Array<string>>}
*/
this.asset = _.cloneDeep(this.pageConfig.asset);
/**
* To collect all the user provided scripts and/or style content.
*/
this.pageUserScriptsAndStyles = [];
/**
* The pure frontmatter of the page as collected in {@link collectFrontmatter}.
* https://markbind.org/userGuide/tweakingThePageStructure.html#front-matter
* @type {Object<string, any>}
*/
this.frontmatter = {};
/**
* Map of heading ids to its text content
*/
this.headings = {};
/**
* Stores the next integer to append to a heading id, for resolving heading id conflicts
*/
this.headerIdMap = {};
/**
* Set of included files (dependencies) used for live reload
* https://markbind.org/userGuide/reusingContents.html#includes
*/
this.includedFiles = new Set([this.pageConfig.sourcePath]);
/**
* Map of heading ids (that closest to the keyword) to the keyword text content
* https://markbind.org/userGuide/makingTheSiteSearchable.html#keywords
*/
this.keywords = {};
/**
* The title of the page.
* This is initially set to the title specified in the site configuration,
* if there is none, we look for one in the frontmatter(s) as well.
*/
this.title = this.pageConfig.title;
/*
* Layouts related properties
*/
/**
* The layout to use for this page, which may be further mutated in {@link processFrontmatter}.
*/
this.layout = this.pageConfig.layout;
/**
* Storing the mapping from the navigable headings' id to an
* object used for page nav generation.
*/
this.navigableHeadings = {};
}
/**
* Checks if the provided filePath is a dependency of the page
* @param {string} filePath to check
*/
isDependency(filePath: string) {
return this.includedFiles && this.includedFiles.has(filePath);
}
prepareTemplateData(content: string) {
let { title } = this;
if (this.siteConfig.titlePrefix) {
title = this.siteConfig.titlePrefix + (title ? TITLE_PREFIX_SEPARATOR + title : '');
}
Iif (this.siteConfig.titleSuffix) {
title = (title ? title + TITLE_SUFFIX_SEPARATOR : '') + this.siteConfig.titleSuffix;
}
const hasPageNavHeadings = Object.keys(this.navigableHeadings).length > 0;
return {
asset: { ...this.asset },
baseUrl: this.siteConfig.baseUrl,
content,
pageUserScriptsAndStyles: this.pageUserScriptsAndStyles.join('\n'),
layoutUserScriptsAndStyles: this.asset.layoutUserScriptsAndStyles.join('\n'),
hasPageNavHeadings,
dev: this.pageConfig.dev,
faviconUrl: this.pageConfig.faviconUrl,
markBindVersion: `MarkBind ${PACKAGE_VERSION}`,
title,
enableSearch: this.siteConfig.enableSearch,
codeTheme: this.siteConfig.style.codeTheme,
darkMode: this.siteConfig.style.darkMode,
};
}
/**
* Filters out icon asset files that are not used in a page.
* Pre-vue HTML does not include the actual HTML of vue components after rendering,
* and post-vue HTML does not include HTML of popups (e.g. trigger, modals).
* Hence, we need to process both HTML content here.
* @param preVueSsrHtml html content of the page before processing Vue components
* @param postVueSsrHtml html content of the page after processing Vue components
*/
filterIconAssets(preVueSsrHtml: string, postVueSsrHtml: string) {
const $preVueHtml = cheerio.load(preVueSsrHtml);
const $postVueHtml = cheerio.load(postVueSsrHtml);
if ($preVueHtml('[class^=fa]').length === 0
&& $postVueHtml('[class^=fa]').length === 0) {
delete this.asset.fontAwesome;
}
if ($preVueHtml('[class^=octicon]').length === 0
&& $postVueHtml('[class^=octicon]').length === 0) {
delete this.asset.octicons;
}
if ($preVueHtml('[class^=glyphicon]').length === 0
&& $postVueHtml('[class^=glyphicon]').length === 0) {
delete this.asset.glyphicons;
}
if ($preVueHtml('[class^=material-icons]').length === 0
&& $postVueHtml('[class^=material-icons]').length === 0) {
delete this.asset.materialIcons;
}
if ($preVueHtml('[class^=bi]').length === 0
&& $postVueHtml('[class^=bi]').length === 0) {
delete this.asset.bootstrapIcons;
}
}
/**
* Checks if page.frontmatter has a valid page navigation specifier
*/
isPageNavigationSpecifierValid() {
const { pageNav } = this.frontmatter;
return pageNav && (pageNav === 'default' || Number.isInteger(pageNav));
}
/**
* Generates element selector for page navigation, depending on specifier in frontmatter
* @param pageNav {string|number} 'default' refers to the configured heading indexing level,
* otherwise a number that indicates the indexing level.
*/
generateElementSelectorForPageNav(pageNav: string | number) {
if (pageNav === 'default') {
return `${Page.generateHeadingSelector(this.siteConfig.headingIndexingLevel)}, panel`;
} else Iif (Number.isInteger(pageNav)) {
return `${Page.generateHeadingSelector(pageNav as number)}, panel`;
}
// Not a valid specifier
return undefined;
}
/**
* Collect headings outside of models and unexpanded panels.
* Collects headings from the header slots of unexpanded panels, but not its content.
* @param content html content of a page
*/
collectNavigableHeadings(content: string) {
const { pageNav } = this.frontmatter;
const elementSelector = this.generateElementSelectorForPageNav(pageNav);
Iif (elementSelector === undefined) {
return;
}
const $ = cheerio.load(content);
$('modal').remove();
this._collectNavigableHeadings($, $.root()[0], elementSelector);
}
_collectNavigableHeadings($: cheerio.Root, context: cheerio.Element, pageNavSelector: string) {
$(pageNavSelector, context).each((_i, cheerioElem: cheerio.Element) => {
const elem = cheerioElem as MbNode;
// Check if heading or panel is already inside an unexpanded panel
let isInsideUnexpandedPanel = false;
const panelParents = $(elem).parentsUntil(context).filter('panel').not(elem);
panelParents.each((_j, elemParent) => {
Iif ((elemParent as MbNode).attribs.expanded === undefined) {
isInsideUnexpandedPanel = true;
return false;
}
return true;
});
Iif (isInsideUnexpandedPanel) {
return;
}
// Check if heading / panel is under a panel's header slots, which is handled specially below.
const slotParents = $(elem).parentsUntil(context).filter('[\\#header]').not(elem);
const panelSlotParents = slotParents.parent('panel');
Iif (panelSlotParents.length) {
return;
}
if (elem.name === 'panel') {
// Recurse only on the slot which has priority
const headings = $(elem).children('[\\#header]');
Iif (!headings.length) return;
this._collectNavigableHeadings($, headings.first() as unknown as cheerio.Element, pageNavSelector);
} else {
const headingId = $(elem).attr('id');
Iif (headingId && elem.name) {
// Headings already in content, with a valid ID
this.navigableHeadings[headingId] = {
text: $(elem).text(),
level: parseInt(elem.name.replace('h', ''), 10),
};
}
}
});
}
/**
* Records headings and keywords inside rendered page into this.headings and this.keywords respectively
*/
collectHeadingsAndKeywords(pageContent: string) {
this.collectHeadingsAndKeywordsInContent(pageContent, null, false, []);
}
/**
* Records headings and keywords inside content into this.headings and this.keywords respectively
*/
collectHeadingsAndKeywordsInContent(content: string | Buffer, lastHeading: cheerio.Element | null,
excludeHeadings: boolean, sourceTraversalStack: string[]) {
let $ = cheerio.load(content);
const headingsSelector = Page.generateHeadingSelector(this.siteConfig.headingIndexingLevel);
$('modal').remove();
$('panel').not('panel panel')
.each((_index, panel) => {
const slotHeader = $(panel).children('[\\#header]');
Iif (slotHeader.length) {
this.collectHeadingsAndKeywordsInContent(slotHeader.html() || '',
lastHeading, excludeHeadings, sourceTraversalStack);
}
})
.each((_index, cheerioPanel) => {
const panel = cheerioPanel as MbNode;
const shouldExcludeHeadings = excludeHeadings || (panel.attribs?.expanded === undefined);
let closestHeading = Page.getClosestHeading($, headingsSelector, panel);
Iif (!closestHeading) {
closestHeading = lastHeading;
}
const slotHeadings = $(panel).children('[\\#header]').find(':header');
Iif (slotHeadings.length) {
closestHeading = slotHeadings.first() as unknown as cheerio.Element;
}
if (panel.attribs?.src) {
const src = panel.attribs.src.split('#')[0];
const buildInnerDir = path.dirname(this.pageConfig.sourcePath);
const resultInnerDir = path.dirname(this.pageConfig.resultPath);
const includeRelativeToBuildRootDirPath = this.siteConfig.baseUrl
? path.relative(this.siteConfig.baseUrl, src)
: src.substring(1);
const includeAbsoluteToBuildRootDirPath = path.resolve(this.pageConfig.rootPath,
includeRelativeToBuildRootDirPath);
const includeRelativeToInnerDirPath
= path.relative(buildInnerDir, includeAbsoluteToBuildRootDirPath);
const includePath = path.resolve(resultInnerDir, includeRelativeToInnerDirPath);
const includeContent = fs.readFileSync(includePath);
const childSourceTraversalStack = sourceTraversalStack.slice();
childSourceTraversalStack.push(includePath);
Iif (childSourceTraversalStack.length > CyclicReferenceError.MAX_RECURSIVE_DEPTH) {
throw new CyclicReferenceError(childSourceTraversalStack);
}
if (panel.attribs.fragment) {
$ = cheerio.load(includeContent);
this.collectHeadingsAndKeywordsInContent($(`#${panel.attribs.fragment}`).html() || '',
closestHeading, shouldExcludeHeadings,
childSourceTraversalStack);
} else {
this.collectHeadingsAndKeywordsInContent(includeContent, closestHeading, shouldExcludeHeadings,
childSourceTraversalStack);
}
} else {
this.collectHeadingsAndKeywordsInContent($(panel).html() || '', closestHeading,
shouldExcludeHeadings, sourceTraversalStack);
}
});
$ = cheerio.load(content);
if (this.siteConfig.headingIndexingLevel > 0) {
$('modal').remove();
$('panel').remove();
if (!excludeHeadings) {
$(headingsSelector).each((_i, heading) => {
const headingId = $(heading).attr('id');
if (headingId) this.headings[headingId] = $(heading).text();
});
}
$('.keyword').each((_i, keyword) => {
let closestHeading = Page.getClosestHeading($, headingsSelector, keyword);
Iif (excludeHeadings || !closestHeading) {
Iif (!lastHeading) {
logger.warn(`Missing heading for keyword: ${$(keyword).text()}`);
return;
}
closestHeading = lastHeading;
}
this.linkKeywordToHeading($, keyword, closestHeading);
});
}
}
/**
* Links a keyword to a heading
* @param $ a Cheerio object
* @param keyword to link
* @param heading to link
*/
linkKeywordToHeading($: cheerio.Root, keyword: cheerio.Element, heading: cheerio.Element | null) {
const headingId = $(heading).attr('id');
Iif (!headingId) return;
Iif (!(headingId in this.keywords)) {
this.keywords[headingId] = [];
}
this.keywords[headingId].push($(keyword).text());
}
/**
* Uses the collected frontmatter from {@link collectFrontmatter} to extract the {@link Page}'s
* instance configurations.
* Frontmatter properties always have lower priority than site configuration properties.
*/
processFrontmatter(frontmatter: FrontMatter) {
this.frontmatter = {
...frontmatter,
...this.siteConfig.globalOverride,
...this.pageConfig.frontmatterOverride,
};
this.title = this.title || this.frontmatter.title;
this.layout = this.layout || this.frontmatter.layout || LAYOUT_DEFAULT_NAME;
}
/**
* Generates page navigation's heading list HTML
*
* A stack is used to maintain proper indentation levels for the headings at different heading levels.
*/
generatePageNavHeadingHtml() {
let headingHTML = '';
const headingStack: number[] = [];
Object.keys(this.navigableHeadings).forEach((key) => {
const currentHeadingLevel = this.navigableHeadings[key].level;
const headingText = this.navigableHeadings[key].text;
// Add v-pre to prevent text interpolation for {{ }} wrapped in {% (end)raw %}
const currentHeadingHTML = `<a class="nav-link py-1" href="#${key}" v-pre>`
+ `${headingText}‎</a>\n`;
const nestedHeadingHTML = '<nav class="nav nav-pills flex-column my-0 nested no-flex-wrap">\n'
+ `${currentHeadingHTML}`;
if (headingStack.length === 0 || headingStack[headingStack.length - 1] === currentHeadingLevel) {
// Add heading without nesting, into headingHTML
headingHTML += currentHeadingHTML;
} else {
// Stack has at least 1 other heading level
let topOfHeadingStack = headingStack[headingStack.length - 1];
if (topOfHeadingStack < currentHeadingLevel) {
// Increase nesting level by 1
headingHTML += nestedHeadingHTML;
} else {
// Close any nested list with heading level higher than current
while (headingStack.length > 1 && topOfHeadingStack > currentHeadingLevel) {
headingHTML += '</nav>\n';
headingStack.pop();
topOfHeadingStack = headingStack[headingStack.length - 1];
}
if (topOfHeadingStack < currentHeadingLevel) {
// Increase nesting level by 1
headingHTML += nestedHeadingHTML;
} else {
headingHTML += currentHeadingHTML;
}
}
}
// Update heading level stack
Iif (headingStack.length === 0 || headingStack[headingStack.length - 1] !== currentHeadingLevel) {
headingStack.push(currentHeadingLevel);
}
});
// Ensure proper closing for any nested lists towards the end
while (headingStack.length > 1
&& headingStack[headingStack.length - 1] > headingStack[headingStack.length - 2]) {
headingHTML += '</nav>\n';
headingStack.pop();
}
return headingHTML;
}
/**
* Generates page navigation's header if specified in this.frontmatter
* @returns string string
*/
generatePageNavTitleHtml() {
const { pageNavTitle } = this.frontmatter;
// Add v-pre to prevent text interpolation for {{ }} wrapped in {% (end)raw %}
return pageNavTitle
? `<a class="navbar-brand ${PAGE_NAV_TITLE_CLASS}" href="#" v-pre>${pageNavTitle.toString()}</a>`
: '';
}
/**
* Builds page navigation bar with headings up to headingIndexingLevel
*/
buildPageNav(content: string) {
const isFmPageNavSpecifierValid = this.isPageNavigationSpecifierValid();
const doesLayoutHavePageNav = this.pageConfig.layoutManager.layoutHasPageNav(this.layout!);
Iif (isFmPageNavSpecifierValid && doesLayoutHavePageNav) {
this.navigableHeadings = {};
this.collectNavigableHeadings(content);
const pageNavTitleHtml = this.generatePageNavTitleHtml();
const pageNavHeadingHTML = this.generatePageNavHeadingHtml();
Iif (!pageNavTitleHtml && !pageNavHeadingHTML) {
return '';
}
/*
Similar to siteAndPageNavProcessor#addSitePageNavPortal,
wrap the auto generated page nav with an overlay-source vue component for
portal-ing it into the mobile page nav.
*/
return `${pageNavTitleHtml}\n`
+ `<overlay-source id="${PAGE_NAV_ID}" tag-name="nav" to="${PAGE_NAV_ID}"`
+ ' class="nav nav-pills flex-column my-0 small no-flex-wrap">\n'
+ `${pageNavHeadingHTML}\n`
+ '</overlay-source>\n';
}
return '';
}
/**
* Generates the page content by processing variables, nodes, frontmatter, and plugins.
*
* If the file extension is not .html, it simply processes variables and writes the content.
*
* For HTML files (usual case), it also builds the page navigation, handles layout,
* collects headings/keywords, and compiles the page into a Vue application for server-side rendering.
* Finally, it writes the rendered HTML to the output file.
* @param externalManager to manage external dependencies and configuration
*/
async generate(externalManager: ExternalManager) {
this.resetState(); // Reset for live reload
const fileConfig: NodeProcessorConfig = {
baseUrl: this.siteConfig.baseUrl,
ignore: this.siteConfig.ignore,
intrasiteLinkValidation: this.siteConfig.intrasiteLinkValidation,
codeLineNumbers: this.siteConfig.style.codeLineNumbers,
baseUrlMap: this.pageConfig.baseUrlMap,
rootPath: this.pageConfig.rootPath,
addressablePagesSource: this.pageConfig.addressablePagesSource,
headerIdMap: this.headerIdMap,
outputPath: externalManager.config.outputPath,
plantumlCheck: this.siteConfig.plantumlCheck,
};
const {
variableProcessor, layoutManager, pluginManager, siteLinkManager,
} = this.pageConfig;
const pageSources = new PageSources();
const nodeProcessor = new NodeProcessor(fileConfig, pageSources, variableProcessor,
pluginManager, siteLinkManager, this.pageUserScriptsAndStyles);
let content = variableProcessor.renderWithSiteVariables(this.pageConfig.sourcePath, pageSources);
if (path.extname(this.pageConfig.resultPath) !== '.html') {
const hasFrontmatterLike = /^\s*---\s*[\s\S]*?---/m.test(content);
const hasScriptTagLike = /<script[\s>]/i.test(content);
Iif (hasFrontmatterLike || hasScriptTagLike) {
logger.warn('Detected frontmatter or <script> tag-like content in non-HTML file '
+ `${this.pageConfig.sourcePath}. These will be treated as plain text. `
+ 'If this was intentional, you can safely ignore this warning.');
}
await this.writeOutputFile(content);
return;
}
content = await nodeProcessor.process(this.pageConfig.sourcePath, content) as string;
this.processFrontmatter(nodeProcessor.frontmatter);
content = pluginManager.postRender(this.frontmatter, content);
const pageContent = content;
pluginManager.collectPluginPageNjkAssets(this.frontmatter, content, this.asset);
await layoutManager.generateLayoutIfNeeded(this.layout!);
const pageNav = this.buildPageNav(content);
content = layoutManager.combineLayoutWithPage(this.layout!, content, pageNav, this.includedFiles);
this.asset = {
...this.asset,
...layoutManager.getLayoutPageNjkAssets(this.layout!),
};
pageSources.addAllToSet(this.includedFiles);
await externalManager.generateDependencies(pageSources.getDynamicIncludeSrc(),
this.includedFiles,
this.pageUserScriptsAndStyles);
this.collectHeadingsAndKeywords(pageContent);
checkForVueHydrationViolation(content, this.pageConfig.sourcePath);
// Compile the page into Vue application and outputs the render function into script for browser
const renderFn = await pageVueServerRenderer.compileVuePageCreateAndReturnScript(
content, this.pageConfig, this.asset);
pageVueServerRenderer.savePageRenderFnForHotReload(this, pageNav, renderFn);
// Wait for all pages resources to be generated before writing to disk
await LockManager.waitForLockRelease();
/*
* Server-side render Vue page app into actual html.
*
* However, for automated testings (e.g. snapshots), we will output the pre SSR-processed HTML content
* as we want to retain the unrendered DOM for easier reference and checking.
*/
logger.verbose(`Rendering page: ${this.pageConfig.sourcePath}`);
const vueSsrHtml = await pageVueServerRenderer.renderVuePage(renderFn);
this.filterIconAssets(content, vueSsrHtml);
Iif (process.env.TEST_MODE) {
content = `<div id="app">${content}</div>`;
await this.writeOutputFile(content);
} else {
await this.writeOutputFile(vueSsrHtml);
}
}
/**
* Writes the rendered content to the output file.
* For non-HTML files, it writes the content directly.
* For HTML files, it renders the content into the page template (page.njk) before writing.
* @param content The processed page content (with variables substituted, etc.)
*/
async writeOutputFile(content: string) {
if (path.extname(this.pageConfig.resultPath) !== '.html') {
await fs.outputFile(this.pageConfig.resultPath, content);
return;
}
// Prepare data for page.njk template
const renderedTemplate = this.pageConfig.template.render(
this.prepareTemplateData(content)); // page.njk
const outputTemplateHTML = process.env.TEST_MODE
? htmlBeautify(renderedTemplate, this.pageConfig.pluginManager.htmlBeautifyOptions)
: renderedTemplate;
await fs.outputFile(this.pageConfig.resultPath, outputTemplateHTML);
}
/**
* Generates a selector for headings with level inside the headingIndexLevel
* or with the index attribute, that do not also have the noindex attribute
* @param headingIndexingLevel to generate
*/
static generateHeadingSelector(headingIndexingLevel: number) {
let headingsSelectors = ['.always-index:header', 'h1'];
for (let i = 2; i <= headingIndexingLevel; i += 1) {
headingsSelectors.push(`h${i}`);
}
headingsSelectors = headingsSelectors.map(selector => `${selector}:not(.no-index)`);
return headingsSelectors.join(',');
}
/**
* Gets the closest heading to an element
* @param $ a Cheerio object
* @param headingsSelector jQuery selector for selecting headings
* @param element to find closest heading
*/
static getClosestHeading($: cheerio.Root, headingsSelector: string,
element: cheerio.Element): cheerio.Element | null {
const prevElements = $(element).prevAll();
for (let i = 0; i < prevElements.length; i += 1) {
const currentElement = $(prevElements[i]);
Iif (currentElement.is(headingsSelector)) {
return currentElement as unknown as cheerio.Element;
}
const childHeadings = currentElement.find(headingsSelector);
Iif (childHeadings.length > 0) {
return childHeadings.last() as unknown as cheerio.Element;
}
}
Iif ($(element).parent().length === 0) {
return null;
}
return Page.getClosestHeading($, headingsSelector, $(element).parent() as unknown as cheerio.Element);
}
}
|