@@ -122,45 +122,54 @@ defmodule OgImageWeb.ImageHTML do
122122 mask: radial-gradient(ellipse 120% 100% at 30% 70%, hsla(0, 0%, 0%, 0.8), hsla(0, 0%, 0%, 0.1) 70%);
123123 "> </ div >
124124
125- <!-- Logo positioned bottom left -->
126- < div class = "absolute bottom-12 left-12 z-20 " >
127- < . fly_logo height = "64 " />
128- </ div >
129-
130125 <!-- Main content area -->
131- < div class = "flex-1 flex items-center justify-between pl-20 pr-16 " >
126+ < div class = "flex-1 flex items-center pl-16 pr-12 pb-8 " >
132127 <!-- Text section -->
133- < div class = "flex-1 max-w-2xl relative z-10 " >
134- < div class = "mb-6 " >
135- < span class = "relative inline-block text-3xl font-bold text-[#1a1347] tracking-tight " >
136- Docs
128+ < div class = "flex-1 pr-12 relative z-10 " >
129+ <!-- Logo and URL -->
130+ < div class = "mb-10 flex items-center gap-4 " >
131+ < div class = "w-16 h-16 " >
132+ < . fly_logomark />
133+ </ div >
134+ < span class = "relative inline-block text-3xl font-semibold text-[#1a1347] tracking-tight " >
135+ fly.io/docs
137136 < svg
138137 viewBox = "0 0 1213 73 "
139138 aria-hidden = "true "
140139 preserveAspectRatio = "none "
141- height = "8 "
142- class = "absolute -bottom-0.5 left-0 w-full h-2 "
140+ height = "6 "
141+ class = "absolute -bottom-0.5 left-0 w-full h-1.5 "
143142 >
144143 < path
145- fill = "url(#underline-gradient) "
144+ fill = "url(#underline-gradient-top ) "
146145 d = "M1213.19 35.377c2.37-13.011-22.95-10.753-31.04-14.087C1086.89 5.705 911.742 2.887 815.218 2.809c-78.003.231-155.966-1.833-233.961.481-57.545.429-114.885 6.164-172.419 7.383-121.164 5.39-242.94 10.751-362.507 32.199-12.356 3.286-25.614 4.255-37.332 9.401-29.507 22.983 27.103 20.15 39.468 17.234 357.956-47.703 362.767-46.261 636.452-50.97 121.033-2.508 241.892 6.658 428.341 19.243 4.74.404 8.98-4.032 8-8.788a942.105 942.105 0 0154.69 6.378c9.44 1.843 18.92 3.583 28.29 5.729 4.01.839 8.02-1.718 8.95-5.712v-.01z "
147146 />
148147 < defs >
149- < linearGradient id = "underline-gradient " gradientTransform = "rotate(110) " >
148+ < linearGradient id = "underline-gradient-top " gradientTransform = "rotate(110) " >
150149 < stop offset = "5% " stop-color = "#CA7FF8 " />
151150 < stop offset = "95% " stop-color = "#795BE9 " />
152151 </ linearGradient >
153152 </ defs >
154153 </ svg >
155154 </ span >
156155 </ div >
157- < h1 class = "font-extrabold bg-gradient-to-br from-[#1a1347] via-[#2A1863] to-[#4338ca] inline-block text-transparent bg-clip-text text-[4.5rem] leading-[1.1] tracking-tight " >
158- <%= @ text %>
156+ <%
157+ # Extract string from {:safe, text} tuple if needed
158+ raw_text = case @ text do
159+ { :safe , text } -> text
160+ text when is_binary(text) - > text
161+ _ - > to_string(@text)
162+ end
163+ clipped_text = OgImageWeb.ImageHTML.clip_text(raw_text, 20)
164+ text_size_class = OgImageWeb.ImageHTML.get_text_size(clipped_text)
165+ % >
166+ < h1 class = { "font-extrabold bg-gradient-to-br from-[#1a1347] via-[#2A1863] to-[#4338ca] inline-block text-transparent bg-clip-text leading-tight tracking-tight break-words #{ text_size_class } } >
167+ <%= clipped_text %>
159168 </ h1 >
160169 </ div >
161170
162171 <!-- Frankie image section -->
163- < div class = "flex items-center justify-center relative " >
172+ < div class = "flex items-center justify-center relative flex-shrink-0 " >
164173 < div class = "relative " >
165174 <!-- Subtle glow behind frankie -->
166175 < div class = "absolute inset-0 bg-purple-300/20 rounded-full blur-2xl scale-110 " > </ div >
@@ -172,6 +181,40 @@ defmodule OgImageWeb.ImageHTML do
172181 """
173182 end
174183
184+ # Helper function to determine text size based on length
185+ def get_text_size ( text ) when is_binary ( text ) do
186+ length = String . length ( text )
187+
188+ cond do
189+ length <= 15 -> "text-[4.5rem]" # Short text: large size
190+ length <= 25 -> "text-[3.8rem]" # Medium text: medium-large size
191+ length <= 35 -> "text-[3.2rem]" # Long text: medium size
192+ length <= 50 -> "text-[2.6rem]" # Very long text: smaller size
193+ length <= 75 -> "text-[2.2rem]" # Extra long text: much smaller size
194+ true -> "text-[1.8rem]" # Super long text: smallest size
195+ end
196+ end
197+
198+ def get_text_size ( _ ) , do: "text-[4.5rem]" # Fallback for non-binary values
199+
200+ # Helper function to clip text based on word count
201+ def clip_text ( text , max_words \\ 5 )
202+
203+ def clip_text ( text , max_words ) when is_binary ( text ) do
204+ words = String . split ( text , " " , trim: true )
205+
206+ if length ( words ) > max_words do
207+ words
208+ |> Enum . take ( max_words )
209+ |> Enum . join ( " " )
210+ |> Kernel . <> ( "..." )
211+ else
212+ text
213+ end
214+ end
215+
216+ def clip_text ( text , _ ) , do: text # Fallback for non-binary values
217+
175218 @ doc """
176219 A fallback image.
177220 """
0 commit comments