Skip to content

Commit

Permalink
Set News img widths as html attributes (👀 Outlook)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jerodsanto
jerodsanto committed Mar 14, 2024
1 parent c211881 commit 84fe5f0
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 31 deletions.
38 changes: 28 additions & 10 deletions lib/changelog/kits/html_kit.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,20 @@ defmodule Changelog.HtmlKit do
end
end

def put_img_width(html, width) when is_binary(width) do
case Floki.parse_document(html) do
{:ok, document} ->
document
|> Floki.attr("img", "width", fn _ -> width end)
|> Floki.raw_html()

{:error, _string} ->
html
end
end

def put_img_width(html, width), do: put_img_width(html, Integer.to_string(width))

def put_ugc({:safe, html}), do: put_ugc(html)

def put_ugc(html), do: put_a_rel(html, "ugc")
Expand All @@ -51,9 +65,10 @@ defmodule Changelog.HtmlKit do
{:ok, document} ->
document
|> Floki.attr("a", "href", fn href ->
merge_href_query_params(href, %{utm_source: value})
merge_href_query_params(href, %{utm_source: value})
end)
|> Floki.raw_html(encode: false)

{:error, _string} ->
html
end
Expand All @@ -62,15 +77,18 @@ defmodule Changelog.HtmlKit do
defp merge_href_query_params(href, params) do
uri = URI.parse(href)

new_uri = cond do
is_nil(uri.query) ->
uri |> Map.put(:query, URI.encode_query(params))
String.match?(uri.query, ~r/utm_/) ->
uri
true ->
new_query = uri.query |> URI.decode_query() |> Map.merge(params)
uri |> Map.put(:query, URI.encode_query(new_query))
end
new_uri =
cond do
is_nil(uri.query) ->
uri |> Map.put(:query, URI.encode_query(params))

String.match?(uri.query, ~r/utm_/) ->
uri

true ->
new_query = uri.query |> URI.decode_query() |> Map.merge(params)
uri |> Map.put(:query, URI.encode_query(new_query))
end

URI.to_string(new_uri)
end
Expand Down
39 changes: 22 additions & 17 deletions ...b/templates/email/news_published.html.eex → .../templates/email/news_published.html.heex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,32 +8,32 @@
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark only">
<meta name="copyright" content="Changelog Media LLC">
<meta name="author" content="<%= List.first(@episode.hosts, %{name: "Jerod Santo"}).name %>">
<meta name="description" property="og:description" content="<%= @episode.title |> html_escape() %>">
<meta name="author" content={List.first(@episode.hosts, %{name: "Jerod Santo"}).name}>
<meta name="description" property="og:description" content={html_escape(@episode.title)}>

<meta property="og:type" content="website">
<meta property="og:title" content="<%= news_title(@episode) %>">
<meta property="og:title" content={news_title(@episode)}>
<meta property="og:site_name" content="Changelog News">
<meta property="og:url" content="<%= Routes.episode_url(Endpoint, :email, @episode.podcast.slug, @episode.slug) %>">
<meta property="og:url" content={url(~p"/#{@episode.podcast.slug}/#{@episode.slug}/email")}>
<meta property="og:locale" content="en_US">
<meta property="og:image" content="<%= url(~p"/images/share/twitter-news.png") %>">
<meta property="og:image" content={url(~p"/images/share/twitter-news.png")}>

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@Changelog">
<meta name="twitter:description" content="<%= @episode.title |> html_escape() %>">
<meta name="twitter:url" content="<%= Routes.episode_url(Endpoint, :email, @episode.podcast.slug, @episode.slug) %>">
<meta name="twitter:image" content="<%= url(~p"/images/share/twitter-news.png") %>">
<meta name="twitter:description" content={html_escape(@episode.title)}>
<meta name="twitter:url" content={url(~p"/#{@episode.podcast.slug}/#{@episode.slug}/email")}>
<meta name="twitter:image" content={url(~p"/images/share/twitter-news.png")}>

<meta name="apple-itunes-app" content="app-id=<%= PodcastView.apple_id(@episode.podcast) %>">
<meta name="apple-itunes-app" content={"app-id" <> PodcastView.apple_id(@episode.podcast)}>

<link rel="stylesheet" href="<%= url(~p"/css/email.css") %>">
<link rel="shortcut icon" href="<%= url(~p"/favicon.ico") %>">
<link rel="stylesheet" href={url(~p"/css/email.css")}>
<link rel="shortcut icon" href={url(~p"/favicon.ico")}>
</head>
<body>
<p style="display:none !important;"><%= @episode.email_teaser %></p>
<%= if !@person do %>
<div class="meta">
<%= form_tag Routes.person_path(Endpoint, :subscribe, "news"), method: "get" do %>
<%= form_tag ~p"/subscribe/news", method: "get" do %>
You are viewing issue #<%= @episode.slug %> of the Changelog News(letter). Pop in your <input type="email" name="email" placeholder="email address" aria-label="[email protected]" required/> <input class="signup-form-submit-button" type="submit" value="to get it"> in your inbox every Monday.
<% end %>
</div>
Expand All @@ -51,7 +51,7 @@
<tbody>
<tr>
<td class="header" align="center">
<img class="spacer-10" src="<%= url(~p"/images/email/spacer_1.gif") %>">
<img class="spacer-10" src={url(~p"/images/email/spacer_1.gif")}>
<p class="last-of-type"><%= link("View on Web", to: url(~p"/#{@episode.podcast.slug}/#{@episode.slug}/email"), title: "View this newsletter in your web browser") %>
&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;&nbsp;
<%= link("Audio Edition", to: url(~p"/#{@episode.podcast.slug}/#{@episode.slug}"), title: "View the companion audio edition") %>
Expand All @@ -68,13 +68,18 @@
<tr>
<td>
<div class="content">
<%= @episode.email_content |> SharedHelpers.md_to_html() |> HtmlKit.put_utm_source("changelog-news") |> raw() %>
<%=
@episode.email_content
|> SharedHelpers.md_to_html()
|> HtmlKit.put_utm_source("changelog-news")
|> HtmlKit.put_img_width("630")
|> raw() %>
</div>
</td>
</tr>
</tbody>
</table>
<img class="spacer-20" src="<%= url(~p"/images/email/spacer_1.gif") %>">
<img class="spacer-20" src={url(~p"/images/email/spacer_1.gif")}>
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#e5e5e5">
<tbody>
<tr><td bgcolor="#e5e5e5" height="1" width="100%"></td></tr>
Expand All @@ -84,15 +89,15 @@
<tbody>
<tr>
<td class="footer" align="center">
<img class="spacer-20" src="<%= url(~p"/images/email/spacer_1.gif") %>">
<img class="spacer-20" src={url(~p"/images/email/spacer_1.gif")}>
<%= if @person do %>
<p><%= link("Unsubscribe", to: PersonView.opt_out_url(@person, "podcast", @episode.podcast.slug)) %></p>
<%= if String.length(@subscription.context) > 0 do %>
<p>(Context: <%= @subscription.context %>)</p>
<% end %>
<% end %>
<p class="last-of-type">Copyright Changelog Media LLC</p>
<img class="spacer-20" src="<%= url(~p"/images/email/spacer_1.gif") %>">
<img class="spacer-20" src={url(~p"/images/email/spacer_1.gif")}>
</td>
</tr>
</tbody>
Expand Down
34 changes: 30 additions & 4 deletions test/changelog/kits/html_kit_test.exs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,24 @@ defmodule Changelog.HtmlKitTest do
end
end

describe "put_img_width/2" do
test "does nothing if there are no img tags" do
assert HtmlKit.put_img_width("<html></html>", 500) == "<html></html>"
end

test "it adds width to a single img" do
a = ~s(<div><h1><img src="/example.png"></h1></div>)
b = ~s(<div><h1><img width="500" src="/example.png"/></h1></div>)
assert HtmlKit.put_img_width(a, 500) == b
end

test "it adds width to multiple img tags" do
a = ~s(<img src="/test1.png"> (<img src="/test2.png">)
b = ~s(<img width="250" src="/test1.png"/> (<img width="250" src="/test2.png"/>)
assert HtmlKit.put_img_width(a, "250") == b
end
end

describe "put_utm_source/2" do
test "it does nothing if there are no anchors" do
assert HtmlKit.put_utm_source("<html></html>", "changelog-news") == "<html></html>"
Expand All @@ -105,14 +123,22 @@ defmodule Changelog.HtmlKitTest do
end

test "it adds utm_source to multiple anchors" do
a = ~s(<a href="https://changelog.com">ohai there</a> <a href="https://test.com">obai there</a>)
b = ~s(<a href="https://changelog.com?utm_source=test">ohai there</a><a href="https://test.com?utm_source=test">obai there</a>)
a =
~s(<a href="https://changelog.com">ohai there</a> <a href="https://test.com">obai there</a>)

b =
~s(<a href="https://changelog.com?utm_source=test">ohai there</a><a href="https://test.com?utm_source=test">obai there</a>)

assert HtmlKit.put_utm_source(a, "test") == b
end

test "it skips anchors that are have utm" do
a = ~s(<a href="https://changelog.com?utm_medium=nope">ohai there</a> <a href="https://test.com">obai there</a>)
b = ~s(<a href="https://changelog.com?utm_medium=nope">ohai there</a><a href="https://test.com?utm_source=test">obai there</a>)
a =
~s(<a href="https://changelog.com?utm_medium=nope">ohai there</a> <a href="https://test.com">obai there</a>)

b =
~s(<a href="https://changelog.com?utm_medium=nope">ohai there</a><a href="https://test.com?utm_source=test">obai there</a>)

assert HtmlKit.put_utm_source(a, "test") == b
end

Expand Down

0 comments on commit 84fe5f0

Please sign in to comment.