fix: adjust post html markup for safari's reader

assets/css/components.css

@@ -47,9 +47,15 @@ nav.pagination a:hover {
 }
 .post {
   display: flex;
-  align-items: flex-start;
+  flex-direction: column;
+  margin: 0 auto;
   margin-bottom: 3vw;
-  justify-content: center;
+  min-width: 35rem;
+  max-width: 60%;
+  background: rgb(251, 253, 254);
+  border: 0.2rem solid rgb(255, 255, 255);
+  box-shadow: 5px 5px 7px var(--navy-light);
+  box-sizing: border-box;
 }
 .post:after {
   content: "";
@@ -62,37 +68,34 @@ nav.pagination a:hover {
 @media screen and (max-width: 480px) {
   .post {
     display: block;
-    padding: 0 1rem;
+    margin: 1rem;
  }
 }
 .post.draft {
   opacity: 0.8;
 }
-.post section {
-  flex: 0 1 auto;
-  box-sizing: border-box;
-  min-width: 35rem;
-  max-width: 60%;
-  background: rgb(251, 253, 254);
-  border: 0.2rem solid rgb(255, 255, 255);
-  box-shadow: 5px 5px 7px var(--navy-light);
-}
 @media screen and (max-width: 480px) {
-  .post section {
+  .post {
     max-width: none;
     min-width: 0;
  }
 }
-.post .post__content {
+.post.post__content {
   overflow: auto;
-  padding: 4vw;
+  padding-top: 4vw;
+
+  :is(header, footer), .copy, a.twitter-share-button {
+    padding: 0 4vw;
+  }
 }
-.post .post__content h1:first-of-type a {
+.post.post__content header:first-of-type a {
+  font-family: var(--primary-typeface);
+  font-weight: bold;
   color: inherit;
   display: block;
   transition: color 0.1s;
 }
-.post .post__content h1:first-of-type a:hover {
+.post.post__content header:first-of-type a:hover {
   color: var(--red);
 }
 .post footer {
@@ -125,6 +128,9 @@ nav.pagination a:hover {
 .post footer a:hover {
   text-decoration: underline;
 }
+.post aside {
+  padding-top: 4vw;
+}
 .post aside ul {
   display: flex;
   width: 100%;
@@ -341,15 +347,25 @@ form input[type='submit']:active, form button[type='submit']:active, form input[
     font-size: 0.85em;
  }
 }
-.copy h1, .copy h2, .copy h3, .copy p, .copy ul, .copy ol {
-  margin: 0 0 1.2em 0;
+.post.post__content header, .copy {
+  :is(h1, h2, h3, h4, h5, p, ul, ol) {
+    margin: 0 0 1.2em 0;
+  }
+  header:first-type-of a {
+    margin: 0 0 1.2em 0;
+  }
 }
 @media screen and (max-width: 480px) {
-  .copy h1, .copy h2, .copy h3, .copy p, .copy ul, .copy ol {
-    margin-bottom: 0.7em;
- }
-}
-.copy h1 {
+  .post.post__content header, .copy {
+    :is(h1, h2, h3, h4, h5, p, ul, ol) {
+      margin-bottom: 0.7em;
+    }
+    header:first-type-of a {
+      margin-bottom: 0.7em;
+    }
+  }
+}
+.copy h1, .post.post__content header:first-of-type a {
   font-size: 1.6em;
 }
 .copy h2, .copy h3 {

assets/js/like.js

@@ -71,5 +71,5 @@ $(function(){
     new LikeButton(this);
   });
 
-  $('header').attr('data-likes-loaded', 'true')
+  $('header.site_head').attr('data-likes-loaded', 'true')
 });

config/config.exs

@@ -34,7 +34,7 @@ config :swoosh, :api_client, false
 
 # Configure esbuild (the version is required)
 config :esbuild,
-  version: "0.14.29",
+  version: "0.18.6",
   default: [
     args:
       ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),

lib/tilex_web/templates/shared/post.html.eex

@@ -1,55 +1,51 @@
-<article class="post">
-  <section>
-    <div class="post__content copy">
-      <h1>
-        <%= link(@post.title, to: Routes.post_path(@conn, :show, @post)) %>
-      </h1>
-      <%= raw Tilex.Markdown.to_html(@post.body) %>
+<article class="post post__content" itemscope itemtype="https://schema.org/BlogPosting">
+  <header itemprop="headline">
+    <h3><%= link(@post.title, to: Routes.post_path(@conn, :show, @post)) %></h3>
+  </header>
 
-      <%= if assigns[:twitter_shareable] && Mix.env != :test do %>
-        <a href='http://twitter.com/share'
-           class='twitter-share-button'
-           data-text= "Today I learned: <%= @post.title %>"
-           data-via= "<%= Tilex.Blog.Developer.twitter_handle(@post.developer) %>"
-           data-hashtags= "<%= @post.channel.twitter_hashtag %>"
-           data-url= "<%= Routes.post_url(@conn, :show, @post) %>">
-          Tweet
-        </a>
-      <% end %>
+  <div class="copy" itemprop="blogPost">
+    <%= raw Tilex.Markdown.to_html(@post.body) %>
+  </div>
+
+  <%= if assigns[:twitter_shareable] && Mix.env != :test do %>
+    <a href='http://twitter.com/share'
+       class='twitter-share-button'
+       data-text= "Today I learned: <%= @post.title %>"
+       data-via= "<%= Tilex.Blog.Developer.twitter_handle(@post.developer) %>"
+       data-hashtags= "<%= @post.channel.twitter_hashtag %>"
+       data-url= "<%= Routes.post_url(@conn, :show, @post) %>">
+      Tweet
+    </a>
+  <% end %>
 
-      <footer>
-        <p class="byline">
-          <%= link(@post.developer.username, to: Routes.developer_path(@conn, :show, @post.developer)) %>
-          <br/>
-          <time datetime="<%= @post.inserted_at %>">
-            <%= link(display_date(@post), to: Routes.post_path(@conn, :show, @post), class: "post__permalink") %>
-          </time>
-        </p>
-      </footer>
+  <footer class="byline">
+    <%= link(@post.developer.username, to: Routes.developer_path(@conn, :show, @post.developer), itemprop: "author") %>
+    <div itemprop="datePublished">
+      <%= link(display_date(@post), to: Routes.post_path(@conn, :show, @post), class: "post__permalink") %>
     </div>
-    <aside>
-      <ul>
+  </footer>
+  <aside>
+    <ul>
+      <li>
+        <%= link("##{@post.channel.name}", to: Routes.channel_path(@conn, :show, @post.channel.name), class: "post__tag-link", itemprop: "keywords") %>
+      </li>
+      <li>
+        <%= link("permalink", to: Routes.post_path(@conn, :show, @post), class: "post__permalink") %>
+      </li>
+      <li>
+        <%= link("raw", to: "#{Routes.post_path(@conn, :show, @post)}.md", class: "post__raw-link") %>
+      </li>
+      <%= if TilexWeb.SharedView.post_creator_or_admin?(@conn, @post) do %>
         <li>
-          <%= link("##{@post.channel.name}", to: Routes.channel_path(@conn, :show, @post.channel.name), class: "post__tag-link") %>
+          <%= link("edit", to: Routes.post_path(@conn, :edit, @post), class: "post__permalink") %>
         </li>
-        <li>
-          <%= link("permalink", to: Routes.post_path(@conn, :show, @post), class: "post__permalink") %>
-        </li>
-        <li>
-          <%= link("raw", to: "#{Routes.post_path(@conn, :show, @post)}.md", class: "post__raw-link") %>
-        </li>
-        <%= if TilexWeb.SharedView.post_creator_or_admin?(@conn, @post) do %>
-          <li>
-            <%= link("edit", to: Routes.post_path(@conn, :edit, @post), class: "post__permalink") %>
-          </li>
+      <% end %>
+      <li>
+        <%= link to: "#", class: "js-like-action post__like-link", id: @post.slug do %>
+          <span class="post__like-heart"><%= icon("heart", :small, "likes") %></span>
+          <span class="post__like-count"><%= @post.likes %></span>
         <% end %>
-        <li>
-          <%= link to: "#", class: "js-like-action post__like-link", id: @post.slug do %>
-            <span class="post__like-heart"><%= icon("heart", :small, "likes") %></span>
-            <span class="post__like-count"><%= @post.likes %></span>
-          <% end %>
-        </li>
-      </ul>
-    </aside>
-  </section>
+      </li>
+    </ul>
+  </aside>
 </article>

mix.lock

@@ -18,7 +18,7 @@
   "earmark": {:hex, :earmark, "1.4.47", "7e7596b84fe4ebeb8751e14cbaeaf4d7a0237708f2ce43630cfd9065551f94ca", [:mix], [], "hexpm", "3e96bebea2c2d95f3b346a7ff22285bc68a99fbabdad9b655aa9c6be06c698f8"},
   "ecto": {:hex, :ecto, "3.12.3", "1a9111560731f6c3606924c81c870a68a34c819f6d4f03822f370ea31a582208", [:mix], [{:decimal, "~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "9efd91506ae722f95e48dc49e70d0cb632ede3b7a23896252a60a14ac6d59165"},
   "ecto_sql": {:hex, :ecto_sql, "3.12.0", "73cea17edfa54bde76ee8561b30d29ea08f630959685006d9c6e7d1e59113b7d", [:mix], [{:db_connection, "~> 2.4.1 or ~> 2.5", [hex: :db_connection, repo: "hexpm", optional: false]}, {:ecto, "~> 3.12", [hex: :ecto, repo: "hexpm", optional: false]}, {:myxql, "~> 0.7", [hex: :myxql, repo: "hexpm", optional: true]}, {:postgrex, "~> 0.19 or ~> 1.0", [hex: :postgrex, repo: "hexpm", optional: true]}, {:tds, "~> 2.1.1 or ~> 2.2", [hex: :tds, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.0 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "dc9e4d206f274f3947e96142a8fdc5f69a2a6a9abb4649ef5c882323b6d512f0"},
-  "esbuild": {:hex, :esbuild, "0.8.1", "0cbf919f0eccb136d2eeef0df49c4acf55336de864e63594adcea3814f3edf41", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}, {:jason, "~> 1.4", [hex: :jason, repo: "hexpm", optional: false]}], "hexpm", "25fc876a67c13cb0a776e7b5d7974851556baeda2085296c14ab48555ea7560f"},
+  "esbuild": {:hex, :esbuild, "0.9.0", "f043eeaca4932ca8e16e5429aebd90f7766f31ac160a25cbd9befe84f2bc068f", [:mix], [{:jason, "~> 1.4", [hex: :jason, repo: "hexpm", optional: false]}], "hexpm", "b415027f71d5ab57ef2be844b2a10d0c1b5a492d431727f43937adce22ba45ae"},
   "eternal": {:hex, :eternal, "1.2.2", "d1641c86368de99375b98d183042dd6c2b234262b8d08dfd72b9eeaafc2a1abd", [:mix], [], "hexpm", "2c9fe32b9c3726703ba5e1d43a1d255a4f3f2d8f8f9bc19f094c7cb1a7a9e782"},
   "expo": {:hex, :expo, "1.1.0", "f7b9ed7fb5745ebe1eeedf3d6f29226c5dd52897ac67c0f8af62a07e661e5c75", [:mix], [], "hexpm", "fbadf93f4700fb44c331362177bdca9eeb8097e8b0ef525c9cc501cb9917c960"},
   "file_system": {:hex, :file_system, "1.0.1", "79e8ceaddb0416f8b8cd02a0127bdbababe7bf4a23d2a395b983c1f8b3f73edd", [:mix], [], "hexpm", "4414d1f38863ddf9120720cd976fce5bdde8e91d8283353f0e31850fa89feb9e"},

test/features/visitor_searches_posts_test.exs

@@ -64,6 +64,6 @@ defmodule VisiorSearchesPosts do
   end
 
   defp get_first_post_on_page_title(session) do
-    get_text(session, "#home > article:first-child h1 a")
+    get_text(session, "#home > article:first-child header a")
   end
 end

test/features/visitor_views_channel_test.exs

@@ -42,10 +42,10 @@ defmodule Features.VisitorViewsChannelTest do
     |> assert_has(Query.css("article.post", count: 5))
     |> assert_has(Query.css("nav.pagination", visible: true))
     |> visit("/smalltalk?page=2")
-    |> assert_has(Query.css("h1", text: "Title1", visible: true))
+    |> assert_has(Query.css("article header a", text: "Title1", visible: true))
     |> assert_has(Query.css("article.post", count: 1))
     |> visit("/smalltalk")
-    |> assert_has(Query.css("h1", text: "Title5", visible: true))
+    |> assert_has(Query.css("article header a", text: "Title5", visible: true))
     |> assert_has(Query.css("article.post", count: 5))
   end
 end

test/features/visitor_visits_homepage_test.exs

@@ -35,7 +35,7 @@ defmodule VisitorVisitsHomepageTest do
       Element.text(find(session, Query.css(selector)))
     end
 
-    post_header = element_text.(session, "article h1")
+    post_header = element_text.(session, "article header a")
     post_body = element_text.(session, "article")
     post_footer = element_text.(session, ".post aside")
 

test/support/pages/post_show_page.ex

@@ -10,7 +10,7 @@ defmodule Tilex.Integration.Pages.PostShowPage do
     |> Browser.find(Query.css("article.post"))
 
     session
-    |> Browser.find(Query.css("h1", text: title))
+    |> Browser.find(Query.css("header a", text: title))
 
     session
   end
@@ -29,7 +29,7 @@ defmodule Tilex.Integration.Pages.PostShowPage do
     expected_likes_count = attrs |> Map.fetch!(:likes_count) |> to_string()
 
     session
-    |> Browser.find(Query.css(".post h1", text: expected_title))
+    |> Browser.find(Query.css(".post header a", text: expected_title))
 
     session
     |> Browser.find(Query.css(".post .copy", text: expected_body))