Socket
Socket
Sign inDemoInstall

@ndla/article-converter

Package Overview
Dependencies
Maintainers
0
Versions
312
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ndla/article-converter

Transforms NDLA articles into extended html versions


Version published
Weekly downloads
543
decreased by-49.86%
Maintainers
0
Weekly downloads
 
Created
Source

Article-converter

Converts NDLA articles created in ed.ndla.no into a React tree

Installation

yarn add @ndla/article-converter

Why is this package needed?

Articles rendered on NDLA.no can contain different embeds, each having their own data requirements. In order to keep embed data fresh, it is fetched directly from its source instead of being embedded within the stored article. As such, a transformation process is required.

In order to allow for flexibility in how and when an article is transformed, the process has been split up into several different steps:

  1. An article is created in our CMS, Editorial. The content is stored in a database. Embeds are stored as custom <ndlaembed /> html elements.
  2. A web application fetches an article through our GraphQL api. GraphQL fetches the article from the database, extracts the <ndlaembed /> tags and fetches the required embed metadata. The metadata is then serialized and stored in a data-json attribute on the <ndlaembed>.
  3. The web application receives a response from GraphQL, and calls transform from the @ndla/article-converter package.
  4. The @ndla/article-converter package transforms the HTML string into React Elements, and applies a series of transformations to further transform the article. It returns a valid React tree.

Functions

This package exports two functions that allows one to transform NDLA content to React nodes.

  • transform: Accepts an entire NDLA article string that has been passed through GraphQL, and returns a React tree. Accepts the following transformation options:
    • isOembed: Adds target="_blank" to all links.
    • subject: Adds a specific subject context to the article.
    • path: The path to use for the rendered article.
    • previewAlt: Show visual previews of image alt texts.
    • frontendDomain: The frontend domain to use for generated links.
  • extractEmbedData: Accepts a string containing a single <ndlaembed> element that has been passed through GraphQL. Returns a react tree.

Keywords

FAQs

Package last updated on 10 Oct 2024

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc