Skip to content

Commit d8bf097

Browse files
joladevjoladev
committed
Tweak OG image generation
1 parent f1034cd commit d8bf097

2 files changed

Lines changed: 54 additions & 7 deletions

File tree

‎lib/jola_dev/og_image/renderer.ex‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ defmodule JolaDev.OGImage.Renderer do
1919
@logo_gap 20
2020
@wordmark_size 48
2121
@title_size 72
22-
@title_y 320
22+
@title_bottom_y 470
2323
@description_size 32
2424
@description_y 500
2525
@background "#0a0a0a"
@@ -92,7 +92,7 @@ defmodule JolaDev.OGImage.Renderer do
9292
font_size: @title_size,
9393
font_weight: :bold,
9494
color: @foreground,
95-
y: @title_y
95+
y_bottom: @title_bottom_y
9696
)
9797
|> place_text(description,
9898
font_size: @description_size,
@@ -153,6 +153,13 @@ defmodule JolaDev.OGImage.Renderer do
153153
end
154154

155155
{:ok, text} = Image.Text.text(content, text_opts)
156-
Image.compose!(canvas, text, x: @padding, y: Keyword.fetch!(opts, :y))
156+
157+
y =
158+
case Keyword.fetch(opts, :y) do
159+
{:ok, y} -> y
160+
:error -> Keyword.fetch!(opts, :y_bottom) - Image.height(text)
161+
end
162+
163+
Image.compose!(canvas, text, x: @padding, y: y)
157164
end
158165
end

‎lib/jola_dev_web/components/core_components.ex‎

Lines changed: 44 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -923,7 +923,17 @@ defmodule JolaDevWeb.CoreComponents do
923923
class="flex items-center justify-center w-9 h-9 rounded-lg text-muted-foreground hover:text-foreground hover:bg-surface transition-all"
924924
aria-label="GitHub"
925925
>
926-
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512"><path d="M256 6.3C114.6 6.3 0 120.9 0 262.3c0 113.3 73.3 209 175 242.9 12.8 2.2 17.6-5.4 17.6-12.2 0-6.1-.3-26.2-.3-47.7-64.3 11.8-81-15.7-86.1-30.1-2.9-7.4-15.4-30.1-26.2-36.2-9-4.8-21.8-16.6-.3-17 20.2-.3 34.6 18.6 39.4 26.2 23 38.7 59.8 27.8 74.6 21.1 2.2-16.6 9-27.8 16.3-34.2-57-6.4-116.5-28.5-116.5-126.4 0-27.8 9.9-50.9 26.2-68.8-2.6-6.4-11.5-32.6 2.6-67.8 0 0 21.4-6.7 70.4 26.2 20.5-5.8 42.2-8.6 64-8.6s43.5 2.9 64 8.6c49-33.3 70.4-26.2 70.4-26.2 14.1 35.2 5.1 61.4 2.6 67.8 16.3 17.9 26.2 40.6 26.2 68.8 0 98.2-59.8 120-116.8 126.4 9.3 8 17.3 23.4 17.3 47.4 0 34.2-.3 61.8-.3 70.4 0 6.7 4.8 14.7 17.6 12.2C438.7 471.3 512 375.3 512 262.3c0-141.4-114.6-256-256-256" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"/></svg>
926+
<svg
927+
class="w-5 h-5"
928+
xmlns="http://www.w3.org/2000/svg"
929+
xml:space="preserve"
930+
viewBox="0 0 512 512"
931+
>
932+
<path
933+
d="M256 6.3C114.6 6.3 0 120.9 0 262.3c0 113.3 73.3 209 175 242.9 12.8 2.2 17.6-5.4 17.6-12.2 0-6.1-.3-26.2-.3-47.7-64.3 11.8-81-15.7-86.1-30.1-2.9-7.4-15.4-30.1-26.2-36.2-9-4.8-21.8-16.6-.3-17 20.2-.3 34.6 18.6 39.4 26.2 23 38.7 59.8 27.8 74.6 21.1 2.2-16.6 9-27.8 16.3-34.2-57-6.4-116.5-28.5-116.5-126.4 0-27.8 9.9-50.9 26.2-68.8-2.6-6.4-11.5-32.6 2.6-67.8 0 0 21.4-6.7 70.4 26.2 20.5-5.8 42.2-8.6 64-8.6s43.5 2.9 64 8.6c49-33.3 70.4-26.2 70.4-26.2 14.1 35.2 5.1 61.4 2.6 67.8 16.3 17.9 26.2 40.6 26.2 68.8 0 98.2-59.8 120-116.8 126.4 9.3 8 17.3 23.4 17.3 47.4 0 34.2-.3 61.8-.3 70.4 0 6.7 4.8 14.7 17.6 12.2C438.7 471.3 512 375.3 512 262.3c0-141.4-114.6-256-256-256"
934+
style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"
935+
/>
936+
</svg>
927937
</a>
928938
<a
929939
href="https://twitter.com/joladev"
@@ -932,7 +942,17 @@ defmodule JolaDevWeb.CoreComponents do
932942
class="flex items-center justify-center w-9 h-9 rounded-lg text-muted-foreground hover:text-foreground hover:bg-surface transition-all"
933943
aria-label="Twitter"
934944
>
935-
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512"><path d="M459.6 151.6c.3 4.5.3 9 .3 13.6C459.9 303.9 354.2 464 161 464v-.1c-57.1.1-113-16.2-161-47.1 8.3 1 16.6 1.5 25 1.5 47.3 0 93.2-15.8 130.5-45.1-44.9-.9-84.4-30.2-98.1-72.9 15.7 3 32 2.4 47.4-1.8-49-9.9-84.3-53-84.3-103v-1.3c14.6 8.1 31 12.6 47.7 13.1C22 176.6 7.8 115.2 35.7 67.1c53.3 65.6 132 105.5 216.5 109.7-8.5-36.5 3.1-74.7 30.4-100.4 42.3-39.8 108.8-37.7 148.6 4.6 23.5-4.6 46.1-13.3 66.7-25.5-7.8 24.3-24.3 45-46.2 58.1 20.8-2.5 41.2-8 60.3-16.5-14.1 21.2-31.9 39.6-52.4 54.5" style="fill:#fff"/></svg>
945+
<svg
946+
class="w-5 h-5"
947+
xmlns="http://www.w3.org/2000/svg"
948+
xml:space="preserve"
949+
viewBox="0 0 512 512"
950+
>
951+
<path
952+
d="M459.6 151.6c.3 4.5.3 9 .3 13.6C459.9 303.9 354.2 464 161 464v-.1c-57.1.1-113-16.2-161-47.1 8.3 1 16.6 1.5 25 1.5 47.3 0 93.2-15.8 130.5-45.1-44.9-.9-84.4-30.2-98.1-72.9 15.7 3 32 2.4 47.4-1.8-49-9.9-84.3-53-84.3-103v-1.3c14.6 8.1 31 12.6 47.7 13.1C22 176.6 7.8 115.2 35.7 67.1c53.3 65.6 132 105.5 216.5 109.7-8.5-36.5 3.1-74.7 30.4-100.4 42.3-39.8 108.8-37.7 148.6 4.6 23.5-4.6 46.1-13.3 66.7-25.5-7.8 24.3-24.3 45-46.2 58.1 20.8-2.5 41.2-8 60.3-16.5-14.1 21.2-31.9 39.6-52.4 54.5"
953+
style="fill:#fff"
954+
/>
955+
</svg>
936956
</a>
937957
<a
938958
href="https://bsky.app/profile/jola.dev"
@@ -941,7 +961,17 @@ defmodule JolaDevWeb.CoreComponents do
941961
class="flex items-center justify-center w-9 h-9 rounded-lg text-muted-foreground hover:text-foreground hover:bg-surface transition-all"
942962
aria-label="Bluesky"
943963
>
944-
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512"><path d="M111 60.9c58.7 44.1 121.8 133.4 145 181.4 23.2-47.9 86.3-137.3 145-181.4 42.4-31.8 111-56.4 111 21.9 0 15.6-9 131.3-14.2 150.1-18.3 65.3-84.9 82-144.1 71.9 103.5 17.6 129.9 76 73 134.4-108 110.9-155.3-27.8-167.4-63.4-2.2-6.5-3.3-9.6-3.3-7 0-2.6-1.1.5-3.3 7-12.1 35.5-59.4 174.2-167.4 63.4-56.9-58.4-30.5-116.8 73-134.4-59.2 10.1-125.8-6.5-144.1-71.8C9 214.2 0 98.5 0 82.8 0 4.5 68.6 29.1 111 60.9" style="fill:#fff"/></svg>
964+
<svg
965+
class="w-5 h-5"
966+
xmlns="http://www.w3.org/2000/svg"
967+
xml:space="preserve"
968+
viewBox="0 0 512 512"
969+
>
970+
<path
971+
d="M111 60.9c58.7 44.1 121.8 133.4 145 181.4 23.2-47.9 86.3-137.3 145-181.4 42.4-31.8 111-56.4 111 21.9 0 15.6-9 131.3-14.2 150.1-18.3 65.3-84.9 82-144.1 71.9 103.5 17.6 129.9 76 73 134.4-108 110.9-155.3-27.8-167.4-63.4-2.2-6.5-3.3-9.6-3.3-7 0-2.6-1.1.5-3.3 7-12.1 35.5-59.4 174.2-167.4 63.4-56.9-58.4-30.5-116.8 73-134.4-59.2 10.1-125.8-6.5-144.1-71.8C9 214.2 0 98.5 0 82.8 0 4.5 68.6 29.1 111 60.9"
972+
style="fill:#fff"
973+
/>
974+
</svg>
945975
</a>
946976
<a
947977
href="https://linkedin.com/in/joladev"
@@ -950,7 +980,17 @@ defmodule JolaDevWeb.CoreComponents do
950980
class="flex items-center justify-center w-9 h-9 rounded-lg text-muted-foreground hover:text-foreground hover:bg-surface transition-all"
951981
aria-label="LinkedIn"
952982
>
953-
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 512 512"><path d="M455.1 0H56.9C25.5 0 0 25.5 0 56.9v398.2C0 486.5 25.5 512 56.9 512h398.2c31.4 0 56.9-25.5 56.9-56.9V56.9C512 25.5 486.5 0 455.1 0M154.8 440.9H78.5V194.4h76.4v246.5zm-38.5-278.8c-24.9 0-45.2-20.4-45.2-45.5s20.2-45.5 45.2-45.5 45.1 20.4 45.1 45.5-20.2 45.5-45.1 45.5m324.6 278.8h-76V311.5c0-35.5-13.5-55.3-41.6-55.3-30.5 0-46.5 20.6-46.5 55.3v129.4h-73.2V194.4h73.2v33.2s22-40.7 74.3-40.7 89.7 31.9 89.7 98v156z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"/></svg>
983+
<svg
984+
class="w-5 h-5"
985+
xmlns="http://www.w3.org/2000/svg"
986+
xml:space="preserve"
987+
viewBox="0 0 512 512"
988+
>
989+
<path
990+
d="M455.1 0H56.9C25.5 0 0 25.5 0 56.9v398.2C0 486.5 25.5 512 56.9 512h398.2c31.4 0 56.9-25.5 56.9-56.9V56.9C512 25.5 486.5 0 455.1 0M154.8 440.9H78.5V194.4h76.4v246.5zm-38.5-278.8c-24.9 0-45.2-20.4-45.2-45.5s20.2-45.5 45.2-45.5 45.1 20.4 45.1 45.5-20.2 45.5-45.1 45.5m324.6 278.8h-76V311.5c0-35.5-13.5-55.3-41.6-55.3-30.5 0-46.5 20.6-46.5 55.3v129.4h-73.2V194.4h73.2v33.2s22-40.7 74.3-40.7 89.7 31.9 89.7 98v156z"
991+
style="fill-rule:evenodd;clip-rule:evenodd;fill:#fff"
992+
/>
993+
</svg>
954994
</a>
955995
<a
956996
href="/rss.xml"

0 commit comments

Comments
 (0)