There's been so many times that I've wished I could quickly link to a specific
headline in an article, but there's no
id attributes on the tag...so I can't.
But then there's nothing I can do to fix it, because it actually requires the
blog author to overhaul their site to add
ids to all the heading tags which
may not be a quick job.
So, my dear blog author, here's my work around until you do serve
Book nowModern Universal React with Next.js
Stop worrying about configuration, and complex codebases: Next.js makes SSR with React easy. Book your masterclass today.
heading elements, and convert the text of the heading into an
Then, if there's a hash fragment in the URL, the window will jump down to the named element. Thus "faking" permalink support.
id attribute is only applied if there's no
id on the heading element
and is simply a regular expression that strips away anything that isn't an
alphanumeric and converts it to lowercase.
So a heading that reads: "What does a Pro account get you?" is converted to
whatdoesaproaccountgetyou. Pretty simple.
Exposing the link
Inspired by Github's readme permalinks, when you hover near the left of the title then you'll see a ¶ character that is clickable and gives the reader the permalink.
Simple. Download the script. Then just slap the script in the footer of your site (or after all your heading tags) and it'll upgrade your headings for your visitors:
Now I can share headline specific links to your site whilst all you needed to do was add one line. Thank you!