From 2808505b4e8871e96e86e46c4be0293db8a5a39a Mon Sep 17 00:00:00 2001
From: Edward Loveall <edward@edwardloveall.com>
Date: Sun, 3 Oct 2021 17:17:36 -0400
Subject: [PATCH] Add instructions on how to view a post

---
 src/css/app.css              | 10 ++++++++
 src/pages/home/index_page.cr | 47 +++++++++++++++++++++---------------
 2 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/src/css/app.css b/src/css/app.css
index 855538a..3d1cff9 100644
--- a/src/css/app.css
+++ b/src/css/app.css
@@ -14,3 +14,13 @@ p.meta {
 figure iframe {
   max-width: 100%;
 }
+
+.highlight {
+  background: rgba(17, 17, 17, 0.3);
+}
+
+@media (prefers-color-scheme: dark) {
+  .highlight {
+    background: rgba(221, 221, 221, 0.3);
+  }
+}
diff --git a/src/pages/home/index_page.cr b/src/pages/home/index_page.cr
index f0ef6ec..111c793 100644
--- a/src/pages/home/index_page.cr
+++ b/src/pages/home/index_page.cr
@@ -4,36 +4,43 @@ class Home::IndexPage < MainLayout
   end
 
   def content
-    post_id = "92f4e0bb9f53"
-    post_slug = "my-post-#{post_id}"
     h1 "Scribe"
-    h2 "How-To"
     article do
       section do
-        para "To view a medium post, you need the last part of the post's URL."
+        h2 "How-To"
+        para do
+          text "To view a Medium post simply replace "
+          code "medium.com", class: "highlight"
+          text " with "
+          code app_domain, class: "highlight"
+        end
         para do
           text "For example if the URL is: "
-          code "medium.com/@user/#{post_slug}"
-          text " or "
-          code "user.medium.com/#{post_slug}"
-          text " or "
-          code "somewebsite.com/blog/#{post_slug}"
-        end
-        para do
-          text " take "
-          code post_slug
-          text " and add it on to the end of Scribe's post URL: "
-        end
-        para do
-          code Articles::Show.with(post_slug: post_slug).url
+          code do
+            span "medium.com", class: "highlight"
+            text "/@user/my-post-09a6af907a2"
+          end
+          text " change it to "
+          code do
+            span app_domain, class: "highlight"
+            text "/@user/my-post-09a6af907a2"
+          end
         end
       end
       section do
-        para do
-          text "Hint: If you're feeling lazy, the URL only needs to be the nonsense at the end of the post URL. E.g. "
-          code Articles::Show.with(post_slug: post_id).url
+        footer do
+          para do
+            a "Source code", href: "https://git.sr.ht/~edwardloveall/scribe"
+          end
         end
       end
     end
   end
+
+  def app_domain
+    URI.parse(Home::Index.url).normalize
+      .to_s
+      .sub(/\/$/, "")
+      .sub(/^https?:\/\//, "")
+  end
 end