Fix anchor navigation in panel headers

.eslintignore

@@ -1,6 +1,5 @@
 *.min.*
 src/lib/markbind/src/lib/markdown-it/*
-src/lib/markbind/src/lib/vue-attribute-renderer/*
 src/lib/markbind/src/lib/markdown-it-shared/*
 
 !.eslintrc.js

.eslintrc.js

@@ -29,6 +29,7 @@ module.exports = {
     "lodash/prefer-lodash-method": [0],
     "lodash/prefer-noop": [0],
     "max-len": ["error", { "code": 110 }],
+    "no-param-reassign": ["error", { "props": false }],
     "operator-linebreak": ["error", "before"],
     // override airbnb-base dev dependencies, latest version does not white list __mocks__
     "import/no-extraneous-dependencies": [

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - '8'
+  - '10'
 deploy:
   # deploy on release, to markbind.org
   - provider: script

README.md

@@ -8,4 +8,6 @@
 
 The website for the latest master branch (not yet released to the public) is at https://markbind-master.netlify.com.
 
-The Developer Guide can be found at https://markbind.org/devdocs/devGuide/index.html
+The Developer Guide can be found at https://markbind.org/devdocs/devGuide/index.html
+
+If you're interested in contributing to MarkBind, we'd love to have you onboard! Check out our [Contribution Guide](https://markbind.org/devdocs/devGuide/contributing) for ideas on contributing and setup steps for getting our repositories up and running on your local machine.

appveyor.yml

@@ -0,0 +1,17 @@
+environment:
+  nodejs_version: "10"
+
+# Install scripts
+install:
+  # Install nodejs version
+  - ps: Install-Product node $env:nodejs_version
+  # Install modules
+  - npm ci
+
+# Post-install test scripts
+test_script:
+  - node --version
+  - npm --version
+  - npm run testwin
+
+build: off

asset/css/markbind.css

@@ -25,6 +25,40 @@ pre > code.hljs {
     counter-reset: line;
 }
 
+pre > code.hljs[heading] {
+    border-top-right-radius: 0;
+}
+
+.code-block {
+    position: relative;
+}
+
+.code-block-heading {
+    background-color: #f2f2ff;
+    border-radius: 6px 6px 0 0;
+    color: #8787a5;
+    float: right;
+    font-size: 85%;
+    line-height: 1;
+    max-width: 85%;
+    overflow-wrap: break-word;
+    padding: 0.25em 0.4em;
+    text-align: right;
+}
+
+.inline-markdown-heading {
+    line-height: 1.5;
+}
+
+.code-block-content {
+    clear: both;
+    display: block;
+}
+
+code > span.highlighted {
+    background: lavender;
+}
+
 kbd {
     background-color: #fafbfc;
     border: 1px solid #c6cbd1;
@@ -94,7 +128,7 @@ code.hljs:hover {
 header.header-fixed {
     position: fixed;
     width: 100%;
-    z-index: 9999;
+    z-index: 1000;
 }
 
 /* #app is treated as the main container */
@@ -112,10 +146,10 @@ header.header-fixed {
 #content-wrapper {
     flex: 1;
     margin: 0 auto;
+    min-width: 0;
     max-width: 1000px;
     padding: 0 20px;
     transition: 0.4s;
-    width: 100%;
     -webkit-transition: 0.4s;
 }
 
@@ -340,3 +374,85 @@ li.footnote-item:target {
     top: 0;
     width: 3em;
 }
+
+/* hide popover, modal, tooltip content */
+[data-mb-html-for] {
+    display: none;
+}
+
+/* styles for triggers */
+.trigger {
+    border-bottom: 1px dashed currentColor;
+}
+
+.trigger-click {
+    cursor: pointer;
+    border-bottom: 1px dashed currentColor;
+}
+
+.modal.mb-zoom {
+    -webkit-transform: scale(0.1);
+    -moz-transform: scale(0.1);
+    -ms-transform: scale(0.1);
+    transform: scale(0.1);
+    opacity: 0;
+    -webkit-transition: all 0.3s;
+    -moz-transition: all 0.3s;
+    transition: all 0.3s;
+}
+
+.modal.mb-zoom.show {
+    -webkit-transform: scale(1);
+    -moz-transform: scale(1);
+    -ms-transform: scale(1);
+    transform: scale(1);
+    opacity: 1;
+}
+
+/* "Copy" code block button */
+pre {
+    position: relative;
+}
+
+.copy-btn {
+    background-color: #b4b4b9;
+    border-radius: 0.25rem;
+    color: #f8f8ff;
+    display: inline-block;
+    font-size: 75%;
+    line-height: 1;
+    padding: 0.25em 0.4em;
+    position: absolute;
+    right: 0.5em;
+    text-align: center;
+    top: 0.4em;
+    white-space: nowrap;
+}
+
+.copy-btn:hover {
+    color: #555;
+}
+
+.copy-btn-body {
+    align-items: center;
+    display: flex;
+}
+
+.copy-btn svg {
+    fill: currentColor;
+    margin-right: 0.4em;
+}
+
+.copy-btn-label {
+    font-size: 11px;
+}
+
+.copy-btn:focus {
+    outline: none;
+}
+
+/* Octicon sizing */
+.octicon {
+    height: 1em;
+    width: 1em;
+}

asset/js/setup.js

@@ -33,30 +33,31 @@ function setupAnchors() {
   if (isFixed) {
     jQuery('.nav-inner').css('padding-top', `calc(${headerHeight}px)`);
     jQuery('#content-wrapper').css('padding-top', `calc(${headerHeight}px)`);
+    const headingTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+    for (let i = 0; i < headingTags.length; i += 1) {
+      const headingTag = headingTags[i];
+      insertCss(
+        `${headingTag}::before {
+          display: block;
+          content: '';
+          margin-top: calc(-${headerHeight}px - ${bufferHeight}rem);
+          height: calc(${headerHeight}px + ${bufferHeight}rem);
+        }`);
+    }
     insertCss(
-      `span.anchor {
-      display: block;
-      position: relative;
-      top: calc(-${headerHeight}px - ${bufferHeight}rem)
-      }`,
-    );
+      `span.card-container::before {
+          display: block;
+          content: '';
+          margin-top: calc(-${headerHeight}px - ${bufferHeight}rem);
+          height: calc(${headerHeight}px + ${bufferHeight}rem);
+        }`);
   }
   jQuery('h1, h2, h3, h4, h5, h6, .header-wrapper').each((index, heading) => {
     if (heading.id) {
       jQuery(heading).on('mouseenter',
                          () => jQuery(heading).find('.fa.fa-anchor').css('visibility', 'visible'));
       jQuery(heading).on('mouseleave',
                          () => jQuery(heading).find('.fa.fa-anchor').css('visibility', 'hidden'));
-      if (isFixed) {
-        /**
-         * Fixing the top navbar would break anchor navigation,
-         * by creating empty spans above the <h> tag we can prevent
-         * the headings from being covered by the navbar.
-         */
-        const spanId = heading.id;
-        heading.insertAdjacentHTML('beforebegin', `<span id="${spanId}" class="anchor"></span>`);
-        jQuery(heading).removeAttr('id'); // to avoid duplicated id problem
-      }
     }
   });
   jQuery('.fa-anchor').each((index, anchor) => {
@@ -171,6 +172,39 @@ function setupWithSearch() {
   setupSiteNav();
 }
 
+function makeInnerGetterFor(attribute) {
+  return (element) => {
+    const innerElement = element.querySelector(`[data-mb-html-for="${attribute}"]`);
+    return innerElement === null ? '' : innerElement.innerHTML;
+  };
+}
+
+function makeHtmlGetterFor(componentType, attribute) {
+  return (element) => {
+    const contentWrapper = document.getElementById(element.attributes.for.value);
+    return contentWrapper.dataset.mbComponentType === componentType
+      ? makeInnerGetterFor(attribute)(contentWrapper) : '';
+  };
+}
+
+/* eslint-disable no-unused-vars */
+/*
+ These getters are used by triggers to get their popover/tooltip content.
+ We need to create a completely new popover/tooltip for each trigger due to bootstrap-vue's implementation,
+ so this is how we retrieve our contents.
+*/
+const popoverContentGetter = makeHtmlGetterFor('popover', 'content');
+const popoverHeaderGetter = makeHtmlGetterFor('popover', 'header');
+const popoverInnerContentGetter = makeInnerGetterFor('content');
+const popoverInnerHeaderGetter = makeInnerGetterFor('header');
+
+const popoverGenerator = { title: popoverHeaderGetter, content: popoverContentGetter };
+const popoverInnerGenerator = { title: popoverInnerHeaderGetter, content: popoverInnerContentGetter };
+
+const tooltipContentGetter = makeHtmlGetterFor('tooltip', '_content');
+const tooltipInnerContentGetter = makeInnerGetterFor('_content');
+/* eslint-enable no-unused-vars */
+
 if (enableSearch) {
   setupWithSearch();
 } else {

docs/_markbind/layouts/devGuide/navigation.md

@@ -4,4 +4,6 @@
 
 * [Developer Guide]({{baseUrl}}/devGuide/devGuide.html)
 * [Maintainer Guide]({{baseUrl}}/devGuide/maintainerGuide.html)
+* [Contributing]({{baseUrl}}/devGuide/contributing.html)
+
 </navigation>

docs/_markbind/variables.md

@@ -11,8 +11,8 @@
 <variable name="icon_check_blue"><span style="color: {{ markbind_blue }}">:fas-check-circle:</span></variable>
 <variable name="icon_bulb_blue"><span style="color: {{ markbind_blue }}">:fas-lightbulb:</span></variable>
 <variable name="icon_dislike">:fas-thumbs-down:</variable>
-<variable name="icon_example"><big><span class='badge badge-pill badge-light' style="background-color: #d9d9d9; color: #737373; position:relative; left:-10px">Example:</span></big></variable>
-<variable name="icon_examples"><big><span class='badge badge-pill badge-light' style="background-color: #d9d9d9; color: #737373; position:relative; left:-10px">Examples:</span></big></variable>
+<variable name="icon_example"><big><span class='badge badge-pill badge-secondary' style="padding-bottom: 4px; margin-right: 5px;">Example</span></big></variable>
+<variable name="icon_examples"><big><span class='badge badge-pill badge-secondary' style="padding-bottom: 4px;">Examples</span></big></variable>
 <variable name="icon_info">:fas-info-circle:</variable>
 <variable name="icon_ticked">:far-check-square:</variable>
 

docs/devGuide/contributing.md

@@ -0,0 +1,73 @@
+<frontmatter>
+  title: "Contributing"
+  layout: devGuide
+  pageNav: default
+</frontmatter>
+
+# Contributing to MarkBind 
+
+Thank you for your interest in contributing! We're glad you want to help. Read the sections below to learn about our code of conduct and how to get started contributing.
+
+## Code of conduct
+
+This project and everyone participating in it are governed by our [Code of Conduct]({{baseUrl}}/devGuide/contributing/code-of-conduct.html). By participating, you are expected to uphold this code. Please report unacceptable behavior to [email protected].
+
+## Things to do before getting started
+
+Make sure you have the project set up and ready. We have guides detailing what we [expect our contributors to know]({{baseurl}}/devguide/devguide#requirement), our required [environment]({{baseurl}}/devGuide.html#environment) and our [development process]({{baseurl}}/devGuide.html#development-process).
+
+## How to contribute
+
+All contributions are welcome. You can contribute to MarkBind by:
+- Reporting bugs
+- Requesting features
+- Making changes (with a corresponding Pull Request), by:
+   - Updating documentation
+   - Fixing bugs
+   - Implementing features 
+
+### How to report a bug
+
+Report bugs in our [issue tracker](https://github.com/MarkBind/markbind/issues), following the guideslines below. This helps us in undestanding your report.
+
+- Before reporting a bug, please search if someone else has has already reported it in the [existing issues](https://github.com/MarkBind/markbind/issues).
+- Is your bug from the current version or an older version of MarkBind? What OS are you on? Tell us about your environment, for example, the MarkBind version you are on.
+- What did you do? What did you expect to happen? What actually happened? 
+  - Include things such the actual MarkBind code causing the issue, the steps for reproduction, the raw output, and what you expect instead can help us in diagnosing the issue quicker
+  - You are also encouraged to submit a PR that reproduces this in `test/functional/test_site/bugs/`.
+
+Please do not submit personal support requests (eg: "How do I use X?") as bugs. Instead, feel free to [submit a blank issue](https://github.com/MarkBind/markbind/issues/new) to our issue tracker with a label of <a href="https://github.com/MarkBind/markbind/issues?q=is%3Aopen+is%3Aissue+label%3Aquestion" class="badge" style="color:white; background-color: #A41BD6;">question</a>.
+
+### How to request a feature
+
+We welcome suggestions to improve MarkBind as well. To do so, you can request for new features or enhancements to existing features in our [issue tracker](https://github.com/MarkBind/markbind/issues), following the guidelines below. This helps us in undestanding your request.
+
+- Before requesting a new feature, please search if someone else has has already requested for it in the [existing issues](https://github.com/MarkBind/markbind/issues).
+- Is your request related to a problem? Provide a clear and concise description of what the problem is. 
+  Eg: I have an issue when [...]
+- Describe the solution you'd like. Provide a clear and concise description of what you want to happen.
+- Describe alternatives you've considered. Let us know about other solutions you've tried or researched.
+- You can also share some additional context, anything else that you can add about the proposal.
+
+### First issues for contributors
+
+Unsure where to begin contributing to MarkBind? 
+
+We recommend that you start off by visiting the [Getting Started](https://markbind.org/userGuide/gettingStarted.html) section in the User Guide and try out MarkBind as a user. Exploring and understanding the various features it provides.
+
+If you have not done so yet, we also recommend visiting the [Developer Guide]({{baseurl}}/devGuide/index.html) to learn about the [structure of the project]({{baseurl}}/devGuide/index.html#project-structure), how to set up the [developer environment]({{baseurl}}/devGuide/index.html#development-process), and how to run [tests]({{baseurl}}/devGuide/devGuide.html#testing).
+
+When you're ready, you can start by looking through these issues marked <a href="https://github.com/MarkBind/markbind/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22+sort%3Acomments-desc" class="badge" style="color:white; background-color: #7057FF;">good first issue</a>.
+
+If you have any questions, be it regarding MarkBind or our workflow, feel free to [submit a blank issue](https://github.com/MarkBind/markbind/issues/new) to our issue tracker with a label of <a href="https://github.com/MarkBind/markbind/issues?q=is%3Aopen+is%3Aissue+label%3Aquestion" class="badge" style="color:white; background-color: #A41BD6;">question</a>.
+
+### How to make Pull Requests to submit changes?
+
+Please follow the steps to have your contribution considered by the maintainers:
+
+1. Follow all the instructions in the pull request [template](https://github.com/MarkBind/markbind/blob/master/.github/PULL_REQUEST_TEMPLATE), the same template is also given to you when you submit a new Pull Request.
+2. After you submit your pull request, verify that all [status checks](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-status-checks) are passing
+3. You can then [request for a review](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/requesting-a-pull-request-review)
+   - Not sure who to ask a review from? A good rule of thumb is to check recently [merged](https://github.com/MarkBind/markbind/pulls?q=is%3Apr+is%3Aclosed) or [approved](https://github.com/MarkBind/markbind/pulls?q=is%3Aopen+is%3Apr+review%3Aapproved) pull requests, and see who the reviewers are. It's likely that they are currently active and willing to review your pull request as well!
+
+Reviewer(s) may request additional changes from you in terms of implementation, design, tests, style, or other changes before your pull request is finally approved.