Broken heading anchors

[PyvesB]

Links with heading anchors no longer seem to work on our homepage, for instance:
https://shields.io/#your-badge

As a consequence, our Readme link named Make your own badges! is broken and shows a blank page rather than bringing the user to the appropriate section on shields.io.

[chris48s]

Good spot. Hadn't though of this. It will be because we're now using react-router's HashRouter for the frond-end routing.

Doing a quick google, there are workarounds but I think this package exists to fix this problem. I've not tried it yet though.

[paulmelnikow]

Another option would be to make a new page at your-badge for the "your badge" bit, and leave a shorter version on the home page.

[calebcartwright]

I assume this is related (and thus already known), but opening any of the example pages in a new browser tab results in a 404 error. For example when opening the first item build in a new tab uses: https://shields.io/examples/build vs. https://shields.io/#/examples/build

[paulmelnikow]

Huh, I can't reproduce that. Could you clarify?

[calebcartwright]

Steps to reproduce (I'm seeing this on Windows, haven't checked Ubuntu)

1. Open web browser (occurs for me in Chrome, Firefox, Edge, and IE) to https://shields.io/
2. Right click on any of the category links listed at top of page (build, chat, dependencies, etc.) -> open in new tab
3. New tab opens with http 404 error page

[chris48s]

Thanks for reporting @calebcartwright I can reproduce this in prod and locally.

At first page load 'Build' (for example) links to https://shields.io/examples/build . This works in the main window/tab, but 404 in a new tab. Then as soon as I've clicked one or more of them in that main window they're all generated as https://shields.io/#/examples/build back on the index page.

Not quite sure why this is happening. We're not actually directly creating links here - they're being generated using React Router's <Link to= so should be correct for the router type. I wonder if its because we're doing this:

shields/pages/index.js

Lines 14 to 21 in 7153ed0

	if (typeof window !== 'undefined') {
	// browser
	return <HashRouter>{router}</HashRouter>
	} else {
	// server-side rendering
	const context = {}
	return <StaticRouter context={context}>{router}</StaticRouter>
	}

to work with next.js

[paulmelnikow]

This could be tackled now that #2906 is merged. I think it would be fixed by removing your-badge as an element ID and making it an anchor… I'm having a case of, "how did this ever work?" 😁