Fix citation button on Explore page

[Not-Abram]

No description provided.

[cloudflare-workers-and-pages]

Deploying topology with    Cloudflare Pages

Latest commit:	684f850
Status:	✅  Deploy successful!
Preview URL:	https://d4b1fd64.topology.pages.dev
Branch Preview URL:	https://not-abram-citation-button-5pdg.topology.pages.dev

View logs

[StevenClontz]

The {#key markdown} suggestion I made earlier fails because markdown isn't being updated after the mount.

I think surrounding the whole component with {#key title} will trigger a remount and get us the result we want.

[StevenClontz]

Some hints to get this working.

First, we can replace the use of window (which only exists once the component is mounted) by instead using

https://learn.svelte.dev/tutorial/page-store

by adding this line

import { page } from '$app/stores'

this gives us access to the current URL throughout the component as $page.url (note the necessary $), which we should use instead of setting a url variable.

Finally, we won't set markdown during onMount. Instead, we'll make it reactive by using the dollar sign feature of Svelte:

$: markdown = `[${title}](${$page.url})`

Then the {#key title} block turns out to be unnecessary.

---

Spoiler (use ROT13.com:

<fpevcg ynat="gf">
  vzcbeg { cntr } sebz '$ncc/fgberf'
  vzcbeg PbclOhggba sebz './PbclOhggba.firygr'
  rkcbeg yrg gvgyr: fgevat =
    'π-Onfr, n pbzzhavgl qngnonfr bs gbcbybtvpny pbhagrerknzcyrf.'
  $: znexqbja = `[${gvgyr}](${$cntr.hey})`
</fpevcg>

👆 this, plus some changes to the body of the component, seems to work for me.

[StevenClontz]

See comments above (marking as "request changes" so this doesn't get merged accidentally)