EBI Groups header looks broken - clearing API caching make it work

[sandykadam]

I have noticed on some EBI groups that header links looks broken, when we clear the API cache from admin and then refresh the page fixes it. My understanding was API cache is set for certain interval and it will autofetch the new records past that interval but it doesn't seem to work in that way.

https://wwwdev.ebi.ac.uk/about/teams/web-production/

I saw similar issue on Webdev team but when I clear API cache it worked.

More examples.
https://wwwdev.ebi.ac.uk/about/teams/software-development-operations/members/
https://wwwdev.ebi.ac.uk/about/teams/technology-science-integration/members/

[dbushell]

Seems to be caused by the vf-content class on the <header id="masthead-black-bar"... element (HTML is from the Content Hub) — at least, removing that class seems to fix it. That said, the visual framework example is using the class.

Tested on my local version it has no issue. Maybe VF CSS is out of date on those sites?

@khawkins98 @sturobson do you know what's going on here?

[khawkins98]

In the contentHub response (view-source:https://content.embl.org/api/v1/pattern.html?filter-content-type=article&filter-id=6682&pattern=node-body) there is a stylesheet link included:

<link rel="stylesheet" href="https://assets.emblstatic.net/vf/v2.2.0/assets/ebi-header-footer/ebi-header-footer.css" type="text/css" media="all" />
<header id="masthead-black-bar" class="clearfix masthead-black-bar | ebi-header-footer vf-content vf-u-fullbleed"</header>

This stylesheet part of the HTML response doesn't seem to get stored in the cache. Is that expected?

[dbushell]

This is what is caching on my local docker:

<div class="vf-content-hub-html">
    <!-- Generated by: http://content.embl.org/api/v1/pattern.html?filter-content-type=article&amp;filter-id=6682&amp;pattern=node-body&amp;source=contenthub -->
            <div data-embl-js-conditional-edit="6682">
            <link rel="stylesheet" href="https://assets.emblstatic.net/vf/v2.2.0/assets/ebi-header-footer/ebi-header-footer.css" type="text/css" media="all" />
<header id="masthead-black-bar" class="clearfix masthead-black-bar | ebi-header-footer vf-content vf-u-fullbleed"></header>

            <a class="vf-text vf-text--body-r vf-link embl-conditional-edit" rel="noopener noreferrer nofollow" href="https://content.embl.org/node/6682" target="_blank">Edit</a>
        </div>
    </div>

[khawkins98]

Strange. @sandykadam any reason why the <link element wouldn't get cached on the EBI servers?

https://wwwdev.ebi.ac.uk/about/teams/software-development-operations/members/

<div class="vf-content-hub-html" data-cache="2c418982">
    <!-- Generated by: http://content.embl.org/api/v1/pattern.html?filter-content-type=article&amp;filter-id=6682&amp;pattern=node-body -->
            <div data-embl-js-conditional-edit="6682">
            
<header id="masthead-black-bar" class="clearfix masthead-black-bar | ebi-header-footer vf-content vf-u-fullbleed"></header>

            <a class="vf-text vf-text--body-r vf-link embl-conditional-edit" rel="noopener noreferrer nofollow" href="https://content.embl.org/node/6682" target="_blank">Edit</a>
        </div>
    </div>

[sandykadam]

I don't think it has to do anything with servers, as I can see same entry in SDO website. It just for somehow doesn't renders correctly in frontend.

[khawkins98]

Is there a strip_tags somewhere when the cache gets rendered?

[dbushell]

No that I'm aware of. The cache plugin just stores the raw response and the template isn't stripping anything.

It'd take a bit of code to strip the <link ... /> but keep everything else intact.