breadcrumbs

Updated 10 months ago

i’m working on creating a simple way for people to see their path through entries on this site. right now, i’m simply linking to the previous page that you visited, which leads to a bit of a circular loop. update: a basic version of a full breadcrumb path is now working! i still need to solve storing it in localStorage though.

over time, i want to be able to potentially provide a means for for people to navigate forward using the same affordance.

a couple of things i’ve learned just in the process of trying to build this:

• the basics of using Svelte stores. creating, storing, and updating values (in this case, the slug for each entry)
  • one thing that was a bit frustrating at first was the fact that the store values did not appear to persist on reload. this seems obvious, but it was helpful to remember that navigating between pages in Svelte is not the same thing as a reload—which loads everything up again from scratch.
  • i had to try and store the value in localStorage and retrieve it as needed. even with this, i was still running into issues where the backlink was directing me to the page i was already on.
  • at first, i thought it was because i was not correctly storing the value in localStorage. but looking in the console, i saw that beforeNavigate was returning an output right before the entire site was reloaded (contrary to what some AI hallucinations seemed to suggest)
  • i needed to ensure that i only updated the store when the page being navigated to was not the same as the what was being navigated away from, e.g. current.from.params.slug !== current.to.params.slug.
  • VS Code keeps warning me about potentially null values, but i’m not sure if that’s actually relevant in this case.
• Svelte’s navigation interceptors which trigger whenever browser navigation events occur.
  • i don’t fully understand everything here, but i do understand that using beforeNavigate allows you to access an object with a lot of useful information, particularly about the page being navigated away from and the page being navigated to.
  • i’m extracting before.from.params to get the page being navigated away from and putting that into the footer for each entry.