Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP: Handle twitter oembed fallback with interstitial link #1618

Open
wants to merge 1 commit into
base: arc-themes-release-version-1.25
Choose a base branch
from
Open

WIP: Handle twitter oembed fallback with interstitial link #1618

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 40 additions & 18 deletions blocks/article-body-block/chains/article-body/default.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,28 @@ const StyledLink = styled.a`
color: ${(props) => props.primaryColor};
`;

const InterstitialLink = ({ key, url, content, arcSite, phrases }) => {
// link string will have to be truthy (non-zero length string) to render below
if (!(url && content)) return null;
const beforeContent = "[ ";
const afterContent = " ]";

return (
<Fragment key={key}>
<p className="interstitial-link block-margin-bottom">
<span dangerouslySetInnerHTML={{ __html: beforeContent }} />
<StyledLink
href={url}
aria-label={phrases.t("article-body-block.interstitial-link-aria-label")}
dangerouslySetInnerHTML={{ __html: content }}
primaryColor={getThemeStyle(arcSite)["primary-color"]}
/>
<span dangerouslySetInnerHTML={{ __html: afterContent }} />
</p>
</Fragment>
);
};

function parseArticleItem(item, index, arcSite, phrases, id, customFields) {
const { _id: key = index, type, content } = item;

Expand Down Expand Up @@ -177,25 +199,14 @@ function parseArticleItem(item, index, arcSite, phrases, id, customFields) {
}

case "interstitial_link": {
const { url } = item;
// link string will have to be truthy (non-zero length string) to render below
if (!(url && content)) return null;
const beforeContent = "[&nbsp;";
const afterContent = "&nbsp;]";

return (
<Fragment key={key}>
<p className="interstitial-link block-margin-bottom">
<span dangerouslySetInnerHTML={{ __html: beforeContent }} />
<StyledLink
href={url}
aria-label={phrases.t("article-body-block.interstitial-link-aria-label")}
dangerouslySetInnerHTML={{ __html: content }}
primaryColor={getThemeStyle(arcSite)["primary-color"]}
/>
<span dangerouslySetInnerHTML={{ __html: afterContent }} />
</p>
</Fragment>
<InterstitialLink
key={key}
url={item?.url}
content={item?.content}
arcSite={arcSite}
phrases={phrases}
/>
);
}

Expand Down Expand Up @@ -248,6 +259,17 @@ function parseArticleItem(item, index, arcSite, phrases, id, customFields) {
) : null;

case "oembed_response": {
if (item.subtype === "twitter" && !item?.raw_oembed?.html?.includes(item?.raw_oembed?.url)) {
return (
<InterstitialLink
key={key}
url={item?.raw_oembed?.url}
content={item?.raw_oembed?.url}
arcSite={arcSite}
phrases={phrases}
/>
);
}
return item.raw_oembed ? <Oembed key={key} element={item} /> : null;
}

Expand Down