Fix anchor navigation in panel headers #1145
Conversation
Update Test for Version 2.11.0
The parser class houses a large number of functions. This can be daunting for newer developers to the project, and decreases maintainability of the code. Let’s start by modularising the preprocess and url processing functions into separate files. Let’s also enhance some in-code documentation for these functions. Some of these functions can also be abstracted into smaller units of functionality, increasing the maintainability of the code.
The parsers MarkBind uses parses content in html tags as html or markdown respectively. This makes it difficult to add custom components that utilize conflicting syntax. Let’s add an interface to ignore content in certain special tags. This interface is also exposed to plugins as the getSpecialTags option.
During live reload, changes to a source file rebuilds all files that are dependent on it. In addition, rebuilding all dependent source files slows the live reload process, leading to a less pleasant user experience. In addition, when running markbind serve, all pages are built and rendered initially. This significantly slows down the time to first page load, which can be substantial when the number of source files is huge. Let's implement lazy page building in these operations, which is opt-in using the existing -o <file> or --one-page <file> flags for the markbind serve command. Changes to a source file will only rebuild pages that are dependent on it, and is currently being viewed by the author. Other pages not being viewed by the author are rebuilt when the author navigates to them. In addition, only the landing page is built initially when serving. Subsequent pages are built when the author navigates to them.
The user will have to try out how to add multiple features when using code blocks. Let's add an example regarding how to use multiple features in code blocks so that it's easier for the user to understand.
Let's convert <code> boxes to code blocks to better showcase the feature
* Update documentation on icon slot for boxes * Update the examples for using icon slot for boxes. * Resolve comments.
* Allow nunjucks that is called multiple times to support escaping for special tags * Remove the need to prune raw tags, simplify logic of replacement * Fix style and remove nested nunjucks escape test
The markdown-it parser used for attributes in components uses a different set of plugins from the one used throughout markbind. Let's unify the two variants to reduce the potential amount of maintainence needed, and standardise the usable markdown syntax throughout markbind.
Bumps [acorn](https://github.com/acornjs/acorn) from 7.1.0 to 7.1.1. - [Release notes](https://github.com/acornjs/acorn/releases) - [Commits](acornjs/acorn@7.1.0...7.1.1) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
``` The hrefs of headings with angular brackets are incorrect because markdown-it escapes the characters to "<" and ">" and the subsequent slugify operation converts it to "and-lt" or "and-gt". Let's fix this by removing the occurrences of the strings "<" and ">" before the slugify operation ```
Update devGuide.md
|
Have you tried the solution adopted here? ( notice the I tried it briefly on the inspector, it seems to work well as a css-only solution for both minimized and expanded panel forms: Could this be used instead of creating spans at runtime? |
Build is failing for commit 7ec7bc4 due to outdated versioning Let us update tests
MarkBind currently runs js-beautify v1.7.5, although later versions of the library have been released (the latest version as of this PR is v1.10.3). Let's upgrade js-beautify to the latest version. Turning off js-beautify can improve the performance of MarkBind's build process. Let's also give the user the option to turn off js-beautify (whenever necessary) through an option in site.json.
|
@ang-zeyu you were adding Edit: I added |
This is due to how we assign the id of the header to the root of the panel ( You can refer to #967 for a more in depth disccussion.
👍 will take a look in a while |
|
Seems good, for headings inside panels, you would also need to add |
Good catch! Will rectify this shortly. Thanks! |
The diffing utilities used for functional tests only check for differences in html files and the siteData json file. Additionally, the diffs are whitespace and newline insensitive, which can cause subtle, unintended changes to go unnoticed. Let's expand the range of files to diff, using the isTextOrBinary package as a first guard against diffing binary files. Let's add additional constants that guard against binary files not recognised by the package, or misrecognised as such. Let's also change the diffing function used to be whitespace and newline sensitive. Since whitespaces and newlines now appear in the diffs, let's also improve the diff printing utilities to account for it.
12 participants
What is the purpose of this pull request? (put "X" next to an item, remove the rest)
• [X] Documentation update
• [X] Bug fix
Fixes #1104 Fixes #1071
What is the rationale for this request?
Re-implement the anchor navigation fix for fixed headers using pseudo selectors, so that no runtime generation of dummy spans is no longer needed.
What changes did you make? (Give an overview)
Instead of adding a invisible dummy span, we introduce the empty space using
::beforecss selector. For the special case of panel headers, we add::beforeto the container so that when thescrollToUrlAnchorHeadingfunction locates the target as the container, the offset is correctly applied.Is there anything you'd like reviewers to focus on?
This change should only affect the behavior when
class="header-fixed"is set inheader.md's<header>. Test if there are unexpected issues of anchor navigation.Important: I applied the css to
.card-container, not sure if there are any other vue-strap components that uses this class name and is affected unexpectedly.Testing instructions:
Replace the vue-strap file from MarkBind/vue-strap#141
Proposed commit message: (wrap lines at 72 characters)
To avoid generating lots of dummy spans at runtime when fixed header is
enabled, and to fix the bug where anchor navigation doesn't work when
the panel is minimized, we re-implement the anchor nav fix using
::before selector.
Let's introduce the invisible empty space by applying styles to
::before of h tags and card-containers.
Let's disable the pointer-events of the card-container to prevent users
from clicking on the invisible empty space; and force the
pointer-events to all on the button space of the panel. (See the
companion vue-strap commit)