Twitter embeds

packages/frontend/web/components/elements/TweetBlockComponent.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+// tslint:disable:react-no-dangerous-html
+export const TweetBlockComponent: React.FC<{
+    element: TweetBlockElement;
+}> = ({ element }) => {
+    return (
+        <div>
+            <div dangerouslySetInnerHTML={{ __html: element.html }} />
+            <script
+                async={true}
+                src="https://platform.twitter.com/widgets.js"
+            />
+        </div>
+    );
+};

packages/frontend/web/components/lib/ArticleRenderer.tsx

@@ -1,6 +1,7 @@
 import { TextBlockComponent } from '@frontend/web/components/elements/TextBlockComponent';
 import { SubheadingBlockComponent } from '@frontend/web/components/elements/SubheadingBlockComponent';
 import { ImageBlockComponent } from '@frontend/web/components/elements/ImageBlockComponent';
+import { TweetBlockComponent } from '@frontend/web/components/elements/TweetBlockComponent';
 import React from 'react';
 // import { clean } from '@frontend/model/clean';
 export const ArticleRenderer: React.FC<{
@@ -30,6 +31,8 @@ export const ArticleRenderer: React.FC<{
                             pillar={pillar}
                         />
                     );
+                case 'model.dotcomrendering.pageElements.TweetBlockElement':
+                    return <TweetBlockComponent key={i} element={element} />;
                 default:
                     return null;
             }