diff --git a/client/app.js b/client/app.js deleted file mode 100644 index c0c021d..0000000 --- a/client/app.js +++ /dev/null @@ -1,2 +0,0 @@ -// custom client js -// alert('alert from client code') diff --git a/client/app.tsx b/client/app.tsx new file mode 100644 index 0000000..a3976c8 --- /dev/null +++ b/client/app.tsx @@ -0,0 +1,52 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import {registerExtensions} from 'newsroom-core/assets/index'; +import {CopyEmbedCodeBanner} from './copy-embed-code-banner'; + +registerExtensions({ + prepareWirePreview: (previewHtmlElement, article) => { + for (const embedBlockHtmlElement of previewHtmlElement.querySelectorAll('.embed-block')) { + const embeddedArticleId = embedBlockHtmlElement.getAttribute('data-association-key'); + + if (embeddedArticleId == null) { + continue; + } + + const embeddedArticle = article.associations?.[embeddedArticleId]; + + if (embeddedArticle == null) { + continue; + } + + const licenseName = (embeddedArticle.subject ?? []).find(({scheme}) => scheme === 'licence_type')?.name; + + if (licenseName == null) { + continue; + } + + const div = document.createElement('div'); + + div.style.textAlign = 'center'; + + ReactDOM.render( + { + navigator.clipboard.writeText(embedBlockHtmlElement.innerHTML); + }} + />, + div, + ); + + const parent = embedBlockHtmlElement.parentElement; + + if (parent != null) { + parent.insertBefore(div, embedBlockHtmlElement.nextSibling); + } + + } + + return previewHtmlElement; + + } +}); diff --git a/client/copy-embed-code-banner.tsx b/client/copy-embed-code-banner.tsx new file mode 100644 index 0000000..973832f --- /dev/null +++ b/client/copy-embed-code-banner.tsx @@ -0,0 +1,60 @@ +import React, {useState} from 'react'; +import {exposed} from 'newsroom-core/assets/index'; + +const bannerStyle: React.CSSProperties = { + display: 'flex', + gap: 16, + alignItems: 'center', + background: 'var(--color-background--muted)', + padding: 'var(--space--1-5)', + border: '1px solid var(--color-line--light)', + borderRadius: 'var(--border-radius--m)', + color: 'var(--color-text--muted)', + marginTop: 16, +}; + +const textStyle: React.CSSProperties = { + margin: 0, + textAlign: 'justify', + lineHeight: 1.2, + fontSize: 'var(--text-size--medium)', +} + +const {Button} = exposed.ui; +const {gettext} = exposed.locale; + +interface IProps { + onCopy(): void; + license: string; +} + +export function CopyEmbedCodeBanner(props: IProps) { + const initialLabel = gettext('copy'); + const [label, setLabel] = useState(initialLabel); + + return ( +
+
+ +
+ +

+ {gettext('Copy this into your own story. Available under {{x}} license.', {x: props.license})} +

+ +
+ ); +} diff --git a/client/tsconfig.json b/client/tsconfig.json new file mode 100644 index 0000000..07f79e1 --- /dev/null +++ b/client/tsconfig.json @@ -0,0 +1,6 @@ +{ + "extends": "newsroom-core/tsconfig", + "include": [ + "." + ], +} diff --git a/server/settings.py b/server/settings.py index 02b7a4d..a183c00 100644 --- a/server/settings.py +++ b/server/settings.py @@ -93,4 +93,3 @@ ] PUBLIC_DASHBOARD = True - diff --git a/server/theme/360-Logo.png b/server/theme/360-Logo.png new file mode 100644 index 0000000..ba2e24d Binary files /dev/null and b/server/theme/360-Logo.png differ