@visual-framework/embl-content-hub-loader
Advanced tools
Use this component to remotely load markup and content from the central EMBL ContentHub, this particular component allows reuse and distribution of content ranging articles to navigation elements (such as a global footer).
Currently this is done as HTML imports (see the code example) + some JS. In the future other methods will be support (such as JSON).
After loading from contentHub, this component will also invoke these functions on child content:
vf-banner/vf-bannervf-tabs/vf-tabsembl-conditional-edit/embl-conditional-editembl-notifications/embl-notificationsSee the introductory text on the contentHub.
Load a content and pattern through the contentHub:
<link rel="import" href="https://www.embl.org/api/v1/pattern.html?filter-content-type=article&filter-id=580&pattern=node-body&source=contenthub" data-target="self" data-embl-js-content-hub-loader>
There are optional features specified by data attributes, looks like:
<link rel="import" href="https://www.embl.org/api/v1/pattern.html?source=contenthub&pattern=embl-person-publications&limit=100&sort-field-value[changed]=DESC&orcid=0000-0002-2524-5026&source=contenthub" data-target="publications-block" data-embl-js-content-hub-loader-no-content="No publications were found." data-embl-js-content-hub-loader-no-content-hide=".publications-container" data-embl-js-content-hub-loader>
Breakdown:
data-target="publications-block": pass the class of an element to insert text intodata-embl-js-content-hub-loader-no-content="No publications were found.": String to use if no results found, can also pass true to use default no match textdata-embl-js-content-hub-loader-no-content-hide=".publications-container": If no results, hide an element that matches this selector selectordata-inject-class="vf-grid vf-grid__col-2" data-inject-class-target="ul": Inject class(es) to a an element inside the returned contentThis repository is distributed with npm. After installing npm and yarn, you can install with this command.
$ yarn add --dev @visual-framework/embl-content-hub-loader
The style files included are written in Sass. If you're using a VF-core project, you can import it like this:
@import "@visual-framework/embl-content-hub-loader/index.scss";
Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter
FAQs
embl-content-hub-loader component
The npm package @visual-framework/embl-content-hub-loader receives a total of 414 weekly downloads. As such, @visual-framework/embl-content-hub-loader popularity was classified as not popular.
We found that @visual-framework/embl-content-hub-loader demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Socket researchers uncover how threat actors weaponize Discord across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Socket now integrates with Bun 1.3’s Security Scanner API to block risky packages at install time and enforce your organization’s policies in local dev and CI.
Research
The Socket Threat Research Team is tracking weekly intrusions into the npm registry that follow a repeatable adversarial playbook used by North Korean state-sponsored actors.