Dogstudio / highway

Highway - A Modern Javascript Transitions Manager
https://highway.js.org/
MIT License
1.43k stars 92 forks source link

Updating a few metas for better social sharing #45

Closed miguderp closed 5 years ago

miguderp commented 5 years ago

First of all, good job for the tool – I started using it in a new project and so far pretty happy with the outcome and the way its integrated.

I noticed that Highway updates the title tag and there's #42 to adapt the document.body.classList but I thought about updating also some other metas for when we want to add a social sharing feature on a project through some libraries which take client-side meta data.

Came up with this, there's most probably a better way to write this but thought I'd share – Maybe consider adding a similar feature in the core of Highway?

H.on("NAVIGATE_IN", to => {
    // Adapting meta tags
    [].forEach.call(to.page.head.childNodes, node => {
        switch (node["nodeName"]) {
            case "META":
                if (node.hasAttribute("property")) document.querySelector("meta[property='" + node.getAttribute("property") + "']").setAttribute("content", node["content"]);
                if (node.hasAttribute("name")) document.querySelector("meta[name='" + node.getAttribute("name") + "']").setAttribute("content", node["content"]);
                break;
            case "LINK":
                if (node.hasAttribute("rel") && "canonical" === node.getAttribute("rel")) document.querySelector("link[rel='" + node.getAttribute("rel") + "']").setAttribute("href", node.getAttribute("href"));
                break;
            default:
                break;
        }
    });
});
Anthodpnt commented 5 years ago

Thanks @miguderp !

But we are not going to add this to the core since as you showed it's already possible to do it with the Highway events like we wanted. Highway as been built to provide enough features to extend it outside of the core to answer multiples scenarios and keep a lightweight library.

miguderp commented 5 years ago

Fair enough, maybe can you add a section on the documentation website like you have for the menus or the GA events (albeit you can surely write this bit of code in a better way than me)? Mainly wanted to share this ressource with other people