fix(doc-page): make markdown hashtag links scroll to elements properly

[mesqueeb]

steps to reproduce:

1. click on a link in the example section eg. like on https://blitzar.cycraft.co

2. observe that it doesn't work! :O

reason:

• currently when a markdown link is written like so: [something](#some-chapter) it will push this on top of the main URL: blitzar.cycraft.co/#some-chapter

bad workaround:

• in the markdown URLs I can write [something](/docs/blitz-form#some-chapter) instead.
• this is less than ideal however, because it's ugly and prone to break when I change routing

desired fix:

• fix to be implemented at: DocPage.vue
• you may need to create a new test page that uses DocPage.vue in planetar/packages/dev to reproduce the issue and implement this fix more easily
• have DocPage detect when all examples/sections are mounted. (I'm listening to some events to know about this already)
• then scrape the DOM for all links in the markdown sections that start with #, and then attach an eventListener that does e.preventDefault() and e.stopPropagation()
• use Quasar scroll utils to scroll to the element
• the duration that it takes to have Quasar scroll to the element should be SCROLL_DURATION (do a global search for this in planetar)
• after clicking a link and after the scroll is complete the hashtag scrolled to, should be added to the URL in the browser:

   /**
     * @param {MouseEvent} event
     */
    setUrlHash(event) {
      const activeTocHash = event.srcElement.getAttribute('href')
      const activeTocId = activeTocHash.replace('#', '')
      this.willBecomeActiveTocId = activeTocId
      this.activeTocId = ''
      setTimeout(() => {
        location.hash = activeTocId
      }, SCROLL_DURATION)
    },

• this setUrlHash is also used by TOC.vue? so this logic should be in a planetar/packages/doc-builder/src/helpers/utils.ts file or something and imported into both TOC.vue and DocPage.vue