Investigations into MarkBind build warnings #2
Description
Investigations / Suggestions
Build Warnings Present:
1 / 101 pages built
<body> tag found in undefined. This may cause formatting errors.
51 / 101 pages built
[Vue warn]: Failed to resolve component: md
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
83 / 101 pages built
[Vue warn]: Failed to resolve component: md
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
101 / 101 pages built
<body> tag found in undefined. This may cause formatting errors.Warning
git-mastery.github.io/lessons/trail/all.md
Lines 9 to 23 in 741c365
Due to usage of <body> in trail/all, as MarkBind page template already wraps with a <body> ... </body>, causes invalid HTML (<body> ... <body> ... </body> </body> situation, hence warning.
Could it be a typo of <div id="body">? Or removing the <body> tag also works.
mdfailed to resolve componentmdwarnings
These warnings are actually true positive warnings as in the
[===================================================--------------------------------------------------] 51 / 101 pages builtRendering page: /Users/gerteck/dev/git-mastery.github.io/lessons/trail/index.md
[Vue warn]: Failed to resolve component: md
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
Rendering page: /Users/gerteck/dev/git-mastery.github.io/lessons/index.md
[Vue warn]: Failed to resolve component: md
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
MarkBind `md` processing steps
Internally, MarkBind converts `md` elements into spans.They are implemented in the
NodeProcessorclass withinpackages/core/src/html/NodeProcessor.ts, specifically in the traverse method.
Contrary to being custom elements for the Vue compiler, they are actually processed and transformed into standard HTML elements ( and) during the HTML pre-processing stage, before the content reaches the Vue compiler.
switch (node.name) {
case 'md':
node.name = 'span';
cheerio(node).html(
this.markdownProcessor.renderMdInline(cheerio.html(node.children as unknown as cheerio.Element)),
);
break;
case 'markdown':
node.name = 'div';
cheerio(node).html(
this.markdownProcessor.renderMd(cheerio.html(node.children as unknown as cheerio.Element)),
);
break;
default:
break;
}
However, looking at the DOM of the git-mastery webpage, we do notice that the md element is preserved and not converted
Hence, it could be considered a valid bug as we shouldn't be seeing any md elements in the actual DOM.
As the code is used inside a tree element, it is probably the case that <md> is not supported in <tree> components. I tried simply to just remove the <md> in
git-mastery.github.io/lessons/trail/text.md
Lines 13 to 15 in 741c365
and the markdown still worked and there were no more warnings!
<div id="trail-intro">
We've packaged our Git (and GitHub) lessons as a series of 'tours'. Each tour consists of a series of lessons and covers the Git knowledge required for a specific usage.
<!-- TWO nested MD are removed -->
{% macro tour(desc) %}<span style="border-top-left-radius: 5px; border-top-right-radius: 5px; margin-left: -10px;" class="bg-success text-light p-1">:fas-map-marker-alt: {{ desc }}</span>{% endmacro %}
{% macro lesson(desc) %}<span class="badge bg-success text-light">{{ desc }}</span>{% endmacro %}
{% macro usage(desc) %}<span class="badge bg-warning text-dark rounded-pill">Usage: {{ desc }}</span>{% endmacro %}
<span class="badge bg-success rounded-pill"><md>++Git Tours++</md></span><br>
<div style="margin-top: -15px;" class="indented-level1 pt-0">
<tree>
|
{{ tour("Tour 1") }}
Lessons: {{ lesson("T1L1") }} → {{ lesson("T1L2") }} → ... → {{ lesson("T1L6") }} → {{ usage("Save snapshots of a folder") }}
{{ tour("Tour 2") }}
Lessons: {{ lesson("T2L1") }} → {{ lesson("T2L2") }} → ... → {{ lesson("T2L6") }} → {{ usage("Backup folder history on the cloud") }}
...
{{ tour("Tour N") }}
Lessons: ... {{ usage("...") }}
</tree>
</div>
</div>
- Off-centered Title page and other page
These pages are off-center due to the default.md layout having the page-nav component that displays list of page's headings. Consider a custom layout e.g. layouts/no-page-nav.md and applying it to the root index.md:
<head-bottom>
<link rel="stylesheet" href="{{baseUrl}}/css/main.css">
</head-bottom>
<header sticky>
{% include '_markbind/layouts/navbar.md' %}
</header>
<div id="flex-body">
<div id="content-wrapper" class="fixed-header-padding">
{{ content }}
</div>
</div>
{% include '_markbind/layouts/footer.md' %}
<frontmatter>
title: "Git-Mastery: Home"
layout: no-page-nav.md
</frontmatter>
On a side note, All lessons page (https://git-mastery.org/lessons/trail/all.html) is also off centered, due to presence of page nav, but nothing is showing in the page navigation menu, perhaps add pageNav: 4 to show the lessons?
<frontmatter>
title: "Lessons: All in one page"
+ pageNav: 4
+ pageNavTitle: "All Lessons"
</frontmatter>