search

resolvetosavelives / healthicons

A collection of open source icons for public health projects.
https://healthicons.org
MIT License
623 stars 49 forks source link

Add a route-like link to the modal #102

Closed nburka closed 2 years ago

nburka commented 3 years ago

Maybe there's a better way to do this? Trying to do it JS-only.

This opens a modal with the URL /#icon/filled/name

Not sure if there's some better way. I tried following some tutorials like this one https://github.com/vercel/next.js/tree/canary/examples/with-route-as-modal and ran into problems with that approach. If we do go that way, we have to make sure that works with the statically published version of the site.

This works pretty well though.

nburka commented 3 years ago

Fixes https://github.com/resolvetosavelives/healthicons/issues/80

sgarrity commented 3 years ago

Tested this out and I think there's an edge case that doesn't work as intended:

  1. Open the site
  2. Click on an icon (we'll call it icon B)
  3. See that the URL is updated (perfect!), copy that URL for icon B.
  4. Open a new tab and paste in the new URL (works as intended - you see the modal for icon B)
  5. Now, close the modal or open another one, and stay on the site. Paste in the URL we copied, and hit Enter. For me, it's not navigating to the modal for icon B - it's just staying as is.

I think in Step 5 it should be opening the modal for icon B, but isn't.

sgarrity commented 3 years ago

Also, do we need the # in the URL? I'm not sure we do.

nburka commented 3 years ago

Also, do we need the # in the URL? I'm not sure we do.

I'm not sure either. The example on NextJS uses their router dir/filename structure. I tried that and ran into problems trying to load all of the prop.categories. I could use some help on this.

dburka commented 3 years ago

Is this ready to go @nburka @sgarrity ?

nburka commented 3 years ago

this is superseded by https://github.com/resolvetosavelives/healthicons/pull/119