@ndla/article-converter 1.0.25 → 1.0.26

package/es/plugins/embed/blogPostEmbedPlugin.js

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { attributesToProps } from 'html-react-parser';
+import { BlogPostV2 } from '@ndla/ui';
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+export var errorSvgSrc = "data:image/svg+xml;charset=UTF-8,%3Csvg fill='%238A8888' height='400' viewBox='0 0 24 12' width='100%25' xmlns='http://www.w3.org/2000/svg' style='background-color: %23EFF0F2'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath transform='scale(0.3) translate(28, 8.5)' d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E";
+export var blogPostEmbedPlugin = function blogPostEmbedPlugin(element) {
+  var _data$data$metaImage$, _data$data$metaImage;
+  var props = attributesToProps(element.attribs);
+  var data = JSON.parse(props['data-json']);
+  var _data$embedData = data.embedData,
+    title = _data$embedData.title,
+    author = _data$embedData.author,
+    url = _data$embedData.url,
+    size = _data$embedData.size,
+    language = _data$embedData.language;
+  return _jsx(BlogPostV2, {
+    title: {
+      title: title,
+      language: language
+    },
+    author: author,
+    url: url,
+    size: size,
+    metaImage: {
+      alt: '',
+      url: data.status === 'success' ? (_data$data$metaImage$ = (_data$data$metaImage = data.data.metaImage) === null || _data$data$metaImage === void 0 ? void 0 : _data$data$metaImage.imageUrl) !== null && _data$data$metaImage$ !== void 0 ? _data$data$metaImage$ : errorSvgSrc : errorSvgSrc
+    }
+  });
+};

package/es/plugins/embed/index.js

@@ -19,6 +19,7 @@ import { conceptEmbedPlugin } from './conceptEmbedPlugin';
 import { conceptListEmbedPlugin } from './conceptListEmbedPlugin';
 import { fileEmbedPlugin } from './fileEmbedPlugin';
 import { codeEmbedPlugin } from './codeEmbedPlugin';
+import { blogPostEmbedPlugin } from './blogPostEmbedPlugin';
 export var embedPlugins = {
   image: imageEmbedPlugin,
   audio: audioEmbedPlugin,
@@ -32,5 +33,6 @@ export var embedPlugins = {
   'content-link': contentLinkEmbedPlugin,
   concept: conceptEmbedPlugin,
   'concept-list': conceptListEmbedPlugin,
+  'blog-post': blogPostEmbedPlugin,
   file: fileEmbedPlugin
 };

package/lib/plugins/embed/blogPostEmbedPlugin.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { PluginType } from '../types';
+export declare const errorSvgSrc = "data:image/svg+xml;charset=UTF-8,%3Csvg fill='%238A8888' height='400' viewBox='0 0 24 12' width='100%25' xmlns='http://www.w3.org/2000/svg' style='background-color: %23EFF0F2'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath transform='scale(0.3) translate(28, 8.5)' d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E";
+export declare const blogPostEmbedPlugin: PluginType;

package/lib/plugins/embed/blogPostEmbedPlugin.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.errorSvgSrc = exports.blogPostEmbedPlugin = void 0;
+var _htmlReactParser = require("html-react-parser");
+var _ui = require("@ndla/ui");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+var errorSvgSrc = "data:image/svg+xml;charset=UTF-8,%3Csvg fill='%238A8888' height='400' viewBox='0 0 24 12' width='100%25' xmlns='http://www.w3.org/2000/svg' style='background-color: %23EFF0F2'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath transform='scale(0.3) translate(28, 8.5)' d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E";
+exports.errorSvgSrc = errorSvgSrc;
+var blogPostEmbedPlugin = function blogPostEmbedPlugin(element) {
+  var _data$data$metaImage$, _data$data$metaImage;
+  var props = (0, _htmlReactParser.attributesToProps)(element.attribs);
+  var data = JSON.parse(props['data-json']);
+  var _data$embedData = data.embedData,
+    title = _data$embedData.title,
+    author = _data$embedData.author,
+    url = _data$embedData.url,
+    size = _data$embedData.size,
+    language = _data$embedData.language;
+  return (0, _jsxRuntime.jsx)(_ui.BlogPostV2, {
+    title: {
+      title: title,
+      language: language
+    },
+    author: author,
+    url: url,
+    size: size,
+    metaImage: {
+      alt: '',
+      url: data.status === 'success' ? (_data$data$metaImage$ = (_data$data$metaImage = data.data.metaImage) === null || _data$data$metaImage === void 0 ? void 0 : _data$data$metaImage.imageUrl) !== null && _data$data$metaImage$ !== void 0 ? _data$data$metaImage$ : errorSvgSrc : errorSvgSrc
+    }
+  });
+};
+exports.blogPostEmbedPlugin = blogPostEmbedPlugin;

package/lib/plugins/embed/index.js

@@ -17,6 +17,7 @@ var _conceptEmbedPlugin = require("./conceptEmbedPlugin");
 var _conceptListEmbedPlugin = require("./conceptListEmbedPlugin");
 var _fileEmbedPlugin = require("./fileEmbedPlugin");
 var _codeEmbedPlugin = require("./codeEmbedPlugin");
+var _blogPostEmbedPlugin = require("./blogPostEmbedPlugin");
 /**
  * Copyright (c) 2023-present, NDLA.
  *
@@ -38,6 +39,7 @@ var embedPlugins = {
   'content-link': _contentLinkEmbedPlugin.contentLinkEmbedPlugin,
   concept: _conceptEmbedPlugin.conceptEmbedPlugin,
   'concept-list': _conceptListEmbedPlugin.conceptListEmbedPlugin,
+  'blog-post': _blogPostEmbedPlugin.blogPostEmbedPlugin,
   file: _fileEmbedPlugin.fileEmbedPlugin
 };
 exports.embedPlugins = embedPlugins;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/article-converter",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "description": "Transforms NDLA articles into extended html versions",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -27,11 +27,11 @@
     "src"
   ],
   "devDependencies": {
-    "@ndla/types-embed": "^1.0.6"
+    "@ndla/types-embed": "^1.0.7"
   },
   "dependencies": {
-    "@ndla/code": "^2.1.32",
-    "@ndla/ui": "^35.0.19",
+    "@ndla/code": "^2.1.33",
+    "@ndla/ui": "^35.0.20",
     "html-react-parser": "^3.0.8",
     "lodash": "^4.17.20"
   },
@@ -44,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0bb06868e530d50c49d3a934559764b24326f250"
+  "gitHead": "496319a9a156a2ec659bb9cf119d35654281417b"
 }

package/src/plugins/embed/blogPostEmbedPlugin.tsx

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { attributesToProps } from 'html-react-parser';
+import { BlogPostMeta } from '@ndla/types-embed';
+import { BlogPostV2 } from '@ndla/ui';
+import { PluginType } from '../types';
+
+export const errorSvgSrc = `data:image/svg+xml;charset=UTF-8,%3Csvg fill='%238A8888' height='400' viewBox='0 0 24 12' width='100%25' xmlns='http://www.w3.org/2000/svg' style='background-color: %23EFF0F2'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath transform='scale(0.3) translate(28, 8.5)' d='M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z'/%3E%3C/svg%3E`;
+
+export const blogPostEmbedPlugin: PluginType = (element) => {
+  const props = attributesToProps(element.attribs);
+  const data = JSON.parse(props['data-json']) as BlogPostMeta;
+  const { title, author, url, size, language } = data.embedData;
+  return (
+    <BlogPostV2
+      title={{ title, language }}
+      author={author}
+      url={url}
+      size={size}
+      metaImage={{
+        alt: '',
+        url: data.status === 'success' ? data.data.metaImage?.imageUrl ?? errorSvgSrc : errorSvgSrc,
+      }}
+    />
+  );
+};

package/src/plugins/embed/index.ts

@@ -20,6 +20,7 @@ import { conceptEmbedPlugin } from './conceptEmbedPlugin';
 import { conceptListEmbedPlugin } from './conceptListEmbedPlugin';
 import { fileEmbedPlugin } from './fileEmbedPlugin';
 import { codeEmbedPlugin } from './codeEmbedPlugin';
+import { blogPostEmbedPlugin } from './blogPostEmbedPlugin';
 
 export const embedPlugins: Record<string, PluginType> = {
   image: imageEmbedPlugin,
@@ -34,5 +35,6 @@ export const embedPlugins: Record<string, PluginType> = {
   'content-link': contentLinkEmbedPlugin,
   concept: conceptEmbedPlugin,
   'concept-list': conceptListEmbedPlugin,
+  'blog-post': blogPostEmbedPlugin,
   file: fileEmbedPlugin,
 };