From dbe75a5065d060ac3cc451b5e98f2046e3dfe4fc Mon Sep 17 00:00:00 2001
From: Amogh Lele <amogh@dyte.io>
Date: Sat, 21 May 2022 16:21:02 +0530
Subject: [PATCH] feat(shorten): improve ux by showing users what the shortened
 url is

Signed-off-by: Amogh Lele <amogh@dyte.io>
---
 assets/css/app.css                            | 140 ++++++++++--------
 .../controllers/api/paste_controller.ex       |   1 -
 lib/ketbin_web/controllers/page_controller.ex |   2 +-
 .../templates/page/shorten.html.heex          |  16 ++
 4 files changed, 95 insertions(+), 64 deletions(-)
 create mode 100644 lib/ketbin_web/templates/page/shorten.html.heex

diff --git a/assets/css/app.css b/assets/css/app.css
index f208286..6251300 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -6,107 +6,123 @@
 @import "./markdown.css";
 
 @font-face {
-  font-family: "JetBrains Mono";
-  src: url(/fonts/jetbrains_mono_variable.ttf);
-  font-weight: 100 1000;
-  font-stretch: 25% 151%;
+    font-family: "JetBrains Mono";
+    src: url(/fonts/jetbrains_mono_variable.ttf);
+    font-weight: 100 1000;
+    font-stretch: 25% 151%;
 }
 
 * {
-  font-family: "JetBrains Mono", monospace;
-  color: white;
-  font-size: 14px;
-  font-weight: bold;
+    font-family: "JetBrains Mono", monospace;
+    color: white;
+    font-size: 14px;
+    font-weight: bold;
 }
 
 @layer base {
-  h1 {
-    font-size: 2em;
-    font-weight: bold;
-  }
-  h2 {
-    font-size: 1.5em;
-    font-weight: bold;
-  }
-  h3 {
-    font-size: 1.17em;
-    font-weight: bold;
-  }
-  h4 {
-    font-weight: bold;
-  }
-  h5 {
-    font-size: 0.83em;
-    font-weight: bold;
-  }
-  h6 {
-    font-size: 0.67em;
-    font-weight: bold;
-  } 
-  h1, h2, h3 {
-    margin-top: 20px;
-    margin-bottom:10px
-  }
-  img {
-    display: inline;
-  }
+    h1 {
+        font-size: 2em;
+        font-weight: bold;
+    }
+
+    h2 {
+        font-size: 1.5em;
+        font-weight: bold;
+    }
+
+    h3 {
+        font-size: 1.17em;
+        font-weight: bold;
+    }
+
+    h4 {
+        font-weight: bold;
+    }
+
+    h5 {
+        font-size: 0.83em;
+        font-weight: bold;
+    }
+
+    h6 {
+        font-size: 0.67em;
+        font-weight: bold;
+    }
+
+    h1,
+    h2,
+    h3 {
+        margin-top: 20px;
+        margin-bottom: 10px
+    }
+
+    img {
+        display: inline;
+    }
 }
 
 html,
 body {
-  width: 100%;
-  height: 100%;
+    width: 100%;
+    height: 100%;
+}
+
+a {
+    color: #ff9800;
 }
 
 a:hover {
-  color: #ff9800;
+    color: #ff9800;
+    text-decoration: underline;
 }
 
 header {
-  background-color: #1a1a1a;
+    background-color: #1a1a1a;
 }
 
 code {
-  font-family: "JetBrains Mono", monospace;
+    font-family: "JetBrains Mono", monospace;
 }
 
 code {
-  white-space: pre;
-  font-size: 14px;
-  font-weight: bold;
+    white-space: pre;
+    font-size: 14px;
+    font-weight: bold;
 }
 
 textarea {
-  font-size: 14px;
-  font-weight: bold;
+    font-size: 14px;
+    font-weight: bold;
 }
 
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+    width: 8px;
+    height: 8px;
 }
+
 ::-webkit-scrollbar-corner,
 ::-webkit-scrollbar-track {
-  background: transparent;
+    background: transparent;
 }
+
 ::-webkit-scrollbar-thumb {
-  border-radius: 8px;
-  @apply bg-amber;
+    border-radius: 8px;
+    @apply bg-amber;
 }
 
 .alert {
-  width: 100%;
-  text-align: center;
+    width: 100%;
+    text-align: center;
 }
 
 .alert-info {
-  background-color: #1ed98e;
-  color: black;
-  font-weight: bold;
+    background-color: #1ed98e;
+    color: black;
+    font-weight: bold;
 }
 
 .alert-danger {
-  background-color: #ff9800;
-  color: black;
-  font-weight: bold;
-}
+    background-color: #ff9800;
+    color: black;
+    font-weight: bold;
+}
\ No newline at end of file
diff --git a/lib/ketbin_web/controllers/api/paste_controller.ex b/lib/ketbin_web/controllers/api/paste_controller.ex
index 1bd8c41..484d2b6 100644
--- a/lib/ketbin_web/controllers/api/paste_controller.ex
+++ b/lib/ketbin_web/controllers/api/paste_controller.ex
@@ -2,7 +2,6 @@ defmodule KetbinWeb.Api.PasteController do
   use KetbinWeb, :controller
 
   alias Ketbin.Pastes
-  alias Ketbin.Pastes.Paste
   alias Ketbin.Pastes.Utils
 
   def show(conn, %{"id" => id}) do
diff --git a/lib/ketbin_web/controllers/page_controller.ex b/lib/ketbin_web/controllers/page_controller.ex
index 08c8485..0c087e9 100644
--- a/lib/ketbin_web/controllers/page_controller.ex
+++ b/lib/ketbin_web/controllers/page_controller.ex
@@ -37,7 +37,7 @@ defmodule KetbinWeb.PageController do
     [head | tail] = String.split(id, ".")
     paste = Pastes.get_paste!(head)
 
-    render(conn, "show.html",
+    render(conn, "shorten.html",
       paste: paste,
       show_edit: show_edit,
       extension: if(tail == [], do: "", else: tail)
diff --git a/lib/ketbin_web/templates/page/shorten.html.heex b/lib/ketbin_web/templates/page/shorten.html.heex
new file mode 100644
index 0000000..373a521
--- /dev/null
+++ b/lib/ketbin_web/templates/page/shorten.html.heex
@@ -0,0 +1,16 @@
+<div class="flex relative flex-col w-full h-full">
+	<div class="flex absolute top-0 right-0 p-4">
+		<%= if @show_edit do%>
+			<a href={ Routes.page_path(@conn, :edit, @paste.id) } class="text-white hover:text-amber">
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="h-6 w-6 cursor-pointer fill-current">
+				<path d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path>
+			</svg>
+		</a>
+		<% end %>
+	</div>
+	<div class="break-word px-6 py-4 h-full w-full overflow-y-auto">
+        <span>
+            Your shortened url is: <a href={Routes.page_path(@conn, :show, @paste.id) }>https://katb.in/<%= @paste.id %></a>
+        </span>
+    </div>
+</div>