fix: adjust html markup so that it's parsed nicely by safari's reader

mode

* rework html markup by removing extra section tag and replacing h1 with header
* fixes css that was broken by changes to structure
* add structured data so browser can infer things like markup, type,
  title, and author

Author: avogel3

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;
+
+  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 {
+  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 {
+    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')
 });

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>

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))