Fix ObsidianFlavoredMarkdown source link (#1694)

Ammar Alakkad

2024-12-30 ef72f1bf707dca363cdab84da91e2acfaef8f276

 docs/advanced/creating components.md

@@ -129,11 +129,11 @@
    return <button id="btn">Click me</button>
  }

  YourComponent.beforeDOM = `
  YourComponent.beforeDOMLoaded = `
  console.log("hello from before the page loads!")
  `

  YourComponent.afterDOM = `
  YourComponent.afterDOMLoaded = `
  document.getElementById('btn').onclick = () => {
    alert('button clicked!')
  }
@@ -156,12 +156,13 @@
  // do page specific logic here
  // e.g. attach event listeners
  const toggleSwitch = document.querySelector("#switch") as HTMLInputElement
  toggleSwitch.removeEventListener("change", switchTheme)
  toggleSwitch.addEventListener("change", switchTheme)
  window.addCleanup(() => toggleSwitch.removeEventListener("change", switchTheme))
})
```

It is best practice to also unmount any existing event handlers to prevent memory leaks.
It is best practice to track any event handlers via `window.addCleanup` to prevent memory leaks.
This will get called on page navigation.

#### Importing Code

@@ -179,7 +180,7 @@
    return <button id="btn">Click me</button>
  }

  YourComponent.afterDOM = script
  YourComponent.afterDOMLoaded = script
  return YourComponent
}) satisfies QuartzComponentConstructor
```