search

visual-framework / vf-wp

WordPress theme and plugins for Visual Framework integration
3 stars 6 forks source link

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

Open sandykadam opened 3 years ago

sandykadam commented 3 years ago

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/

Screenshot 2020-11-23 at 12 51 55

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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.

Screenshot 2020-11-23 at 14 01 54

khawkins98 commented 3 years ago

Is there a strip_tags somewhere when the cache gets rendered?

dbushell commented 3 years ago

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.