feat(shorten): improve ux by showing users what the shortened url is

Signed-off-by: Amogh Lele <amogh@dyte.io>

assets/css/app.css

@@ -24,29 +24,38 @@
         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 {
+
+    h1,
+    h2,
+    h3 {
         margin-top: 20px;
-    margin-bottom:10px
+        margin-bottom: 10px
     }
+
     img {
         display: inline;
     }
@@ -58,8 +67,13 @@ body {
     height: 100%;
 }
 
+a {
+    color: #ff9800;
+}
+
 a:hover {
     color: #ff9800;
+    text-decoration: underline;
 }
 
 header {
@@ -85,10 +99,12 @@ textarea {
     width: 8px;
     height: 8px;
 }
+
 ::-webkit-scrollbar-corner,
 ::-webkit-scrollbar-track {
     background: transparent;
 }
+
 ::-webkit-scrollbar-thumb {
     border-radius: 8px;
     @apply bg-amber;

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

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)

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>