Meta image generation

jemiluv8 · Jun 10, 2024 · 7418725 · 7418725
1 parent ab8b8e4
commit 7418725
Show file tree

Hide file tree

Showing 19 changed files with 211 additions and 140 deletions.
diff --git a/.env.example b/.env.example
@@ -4,4 +4,5 @@ CONVERTKIT_FORM_ID=
 CONVERTKIT_TAG_ID=
 ADMIN_USERNAME=
 ADMIN_PASSWORD=
-SYNTH_API_KEY=
+SYNTH_API_KEY=
+BANNERBEAR_API_KEY=
diff --git a/Gemfile b/Gemfile
@@ -28,6 +28,7 @@ gem "tzinfo-data", platforms: %i[ windows jruby ]
 gem "redcarpet"
 gem "avo", ">= 3.2"
 gem "revise_auth"
+gem "bannerbear"
 
 
 group :development, :test do

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -127,6 +127,8 @@ GEM
       turbo_power (>= 0.6.0)
       view_component (>= 3.7.0)
       zeitwerk (>= 2.6.12)
+    bannerbear (0.1.4)
+      httparty
     base64 (0.2.0)
     bcrypt (3.1.20)
     better_html (2.1.1)
@@ -413,6 +415,7 @@ PLATFORMS
 
 DEPENDENCIES
   avo (>= 3.2)
+  bannerbear
   bootsnap
   brakeman
   capybara

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -7,6 +7,10 @@ def description(page_description)
     content_for(:description) { page_description }
   end
 
+  def meta_image(meta_image)
+    content_for(:meta_image) { meta_image }
+  end
+
   def markdown(text)
     options = {
       filter_html:     true,

diff --git a/app/models/article.rb b/app/models/article.rb
@@ -1,9 +1,17 @@
 class Article < ApplicationRecord
+  include MetaImage
+
   def self.random_sample(count, exclude:)
     where.not(id: exclude.id).order(Arel.sql("RANDOM()")).limit(count)
   end
 
   def to_param
     slug
   end
+
+  private
+
+  def create_meta_image
+    super(title)
+  end
 end
diff --git a/app/models/concerns/meta_image.rb b/app/models/concerns/meta_image.rb
@@ -0,0 +1,28 @@
+module MetaImage
+  extend ActiveSupport::Concern
+
+  included do
+    after_commit :create_meta_image, on: [ :create, :update ]
+  end
+
+  private
+
+  def create_meta_image(custom_text)
+    bb = Bannerbear::Client.new
+    begin
+      response = bb.create_image("RnxGpW5lvKw0bEXrJ1",
+        synchronous: true,
+        modifications: [
+          {
+            name: "text",
+            text: custom_text
+          }
+        ]
+      )
+
+      self.update_columns(meta_image_url: response["image_url"])
+    rescue => e
+      Rails.logger.error "Failed to create image: #{e.message}"
+    end
+  end
+end
diff --git a/app/models/term.rb b/app/models/term.rb
@@ -1,9 +1,17 @@
 class Term < ApplicationRecord
+  include MetaImage
+
   def self.random_sample(count, exclude:)
     where.not(id: exclude.id).order(Arel.sql("RANDOM()")).limit(count)
   end
 
   def to_param
     slug
   end
+
+  private
+
+  def create_meta_image
+    super(title)
+  end
 end
diff --git a/app/models/tool.rb b/app/models/tool.rb
@@ -1,4 +1,6 @@
 class Tool < ApplicationRecord
+  include MetaImage
+
   CATEGORIES = {
     retirement: {
       name: "Retirement",
@@ -39,4 +41,10 @@ def to_param
   def category
     CATEGORIES[category_slug&.to_sym]
   end
+
+  private
+
+  def create_meta_image
+    super(name)
+  end
 end
diff --git a/app/views/articles/show.html.erb b/app/views/articles/show.html.erb
@@ -1,6 +1,7 @@
 <%
   title @article.title
   description "#{markdown(@article.content).gsub(%r{</?[^>]+?>}, '')[0...300]}..."
+  meta_image @article.meta_image_url if @article.meta_image_url.present?
 %>
 
 <%= link_to articles_path, class: "w-9 h-9 rounded-full grid place-items-center mx-auto text-gray-500 hover:bg-gray-200/50 bg-transparent border border-gray-300 hover:border-gray-300 " do %>

diff --git a/app/views/terms/show.html.erb b/app/views/terms/show.html.erb
@@ -1,6 +1,7 @@
 <%
   title "#{@term.title} - Financial Terms"
   description "#{markdown(@term.content).gsub(%r{</?[^>]+?>}, '')[0...300]}..."
+  meta_image @term.meta_image_url if @term.meta_image_url.present?
 %>
 
 <%= link_to terms_path, class: "w-9 h-9 rounded-full grid place-items-center mx-auto text-gray-500 hover:bg-gray-200/50 bg-transparent border border-gray-300 hover:border-gray-300 " do %>

diff --git a/app/views/tools/_compound_interest_calculator.html.erb b/app/views/tools/_compound_interest_calculator.html.erb
@@ -1,8 +1,3 @@
-<%
-  title "Compound Interest Calculator"
-  description "See how your investments grow over time by earning interest on interest and letting your money work for you."
-%>
-
 <div class="grid grid-cols-1 p-2 bg-white border shadow-xs sm:grid-cols-3 rounded-xl" data-controller="compound-interest-calculator">
   <%= form_with html: { class: "bg-gray-25 p-4 rounded-lg flex flex-col gap-4 col-span-1", data: { action: "submit->compound-interest-calculator#calculate" }} do |form| %>
     <div data-controller="synchronized-input" class="flex flex-col gap-2">

diff --git a/app/views/tools/_financial_freedom_calculator.html.erb b/app/views/tools/_financial_freedom_calculator.html.erb
@@ -1,8 +1,3 @@
-<%
-  title "Financial Freedom Calculator"
-  description "Want to know how many years of financial freedom you have ahead of you based on your savings and expenses? Take a look at Maybe's Financial Freedom Calculator and see how long your savings will last!"
-%>
-
 <div class="grid grid-cols-1 p-2 bg-white border shadow-xs sm:grid-cols-3 rounded-xl" data-controller="financial-freedom-calculator">
   <%= form_with html: { class: "bg-gray-25 p-4 rounded-lg flex flex-col gap-4 col-span-1", data: { action: "submit->financial-freedom-calculator#calculate" }} do |form| %>
     <div data-controller="synchronized-input" class="flex flex-col gap-2">

diff --git a/app/views/tools/_inflation_calculator.html.erb b/app/views/tools/_inflation_calculator.html.erb
@@ -1,82 +1,77 @@
-<%
-  title "Inflation Calculator"
-  description "Calculate how inflation is impacting an asset’s future price and your future buying power."
-%>
-
-  <div class="grid grid-cols-1 p-2 bg-white border shadow-xs sm:grid-cols-3 rounded-xl" data-controller="inflation-calculator">
-    <%= form_with html: { class: "bg-gray-25 p-4 rounded-lg flex flex-col gap-4 col-span-1" , data: { action: "submit->inflation-calculator#calculate" }} do |form| %>
-      <div class="flex flex-col gap-2">
-        <%= form.unit_field :initial_amount, label: "Initial Amount" , value: 0, unit_symbol: "$" %>
-      </div>
+<div class="grid grid-cols-1 p-2 bg-white border shadow-xs sm:grid-cols-3 rounded-xl" data-controller="inflation-calculator">
+  <%= form_with html: { class: "bg-gray-25 p-4 rounded-lg flex flex-col gap-4 col-span-1" , data: { action: "submit->inflation-calculator#calculate" }} do |form| %>
+    <div class="flex flex-col gap-2">
+      <%= form.unit_field :initial_amount, label: "Initial Amount" , value: 0, unit_symbol: "$" %>
+    </div>
 
-      <div class="flex flex-col gap-2">
-        <%= form.unit_field :inflation_percentage, label: "Inflation in %" , label_right: "%", value: 3 %>
-      </div>
+    <div class="flex flex-col gap-2">
+      <%= form.unit_field :inflation_percentage, label: "Inflation in %" , label_right: "%", value: 3 %>
+    </div>
 
-      <div class="flex flex-col gap-2">
-        <%= form.unit_field :years, label: "Years" , label_right: "years", value: 0 %>
-      </div>
+    <div class="flex flex-col gap-2">
+      <%= form.unit_field :years, label: "Years" , label_right: "years", value: 0 %>
+    </div>
 
-      <div class="mt-auto md:mt-[140px]">
-        <%= form.submit "Calculate" %>
-      </div>
-    <% end %>
-    <div class="col-span-2">
-      <div class="flex-1" data-inflation-calculator-target="resultsContainer">
-        <div class="grid h-96 place-items-center">
-          <div class="flex flex-col gap-4 text-sm text-center text-gray-500 max-w-72">
-            <%= lucide_icon "keyboard" , class: "h-6 w-6 mx-auto" %>
-              <p>Fill in the fields to calculate your investment's ROI.</p>
-          </div>
+    <div class="mt-auto md:mt-[140px]">
+      <%= form.submit "Calculate" %>
+    </div>
+  <% end %>
+  <div class="col-span-2">
+    <div class="flex-1" data-inflation-calculator-target="resultsContainer">
+      <div class="grid h-96 place-items-center">
+        <div class="flex flex-col gap-4 text-sm text-center text-gray-500 max-w-72">
+          <%= lucide_icon "keyboard" , class: "h-6 w-6 mx-auto" %>
+            <p>Fill in the fields to calculate your investment's ROI.</p>
         </div>
       </div>
+    </div>
 
-      <template data-inflation-calculator-target="resultsTemplate">
+    <template data-inflation-calculator-target="resultsTemplate">
 
-        <div data-controller="tabs" data-tabs-default-tab-value="one"
-          class="flex flex-col justify-between h-full px-8 py-4">
-          <div class="upper-wrapper">
-            <div class="bg-gray-25 p-1 rounded-[10px] flex flex-row w-full mb-8">
-              <button class="tab-item" type="button" id="one" data-tabs-target="btn" data-action="click->tabs#select">Future price</button>
-              <button class="tab-item" type="button" id="two" data-tabs-target="btn" data-action="click->tabs#select">Future buying power</button>
+      <div data-controller="tabs" data-tabs-default-tab-value="one"
+        class="flex flex-col justify-between h-full px-8 py-4">
+        <div class="upper-wrapper">
+          <div class="bg-gray-25 p-1 rounded-[10px] flex flex-row w-full mb-8">
+            <button class="tab-item" type="button" id="one" data-tabs-target="btn" data-action="click->tabs#select">Future price</button>
+            <button class="tab-item" type="button" id="two" data-tabs-target="btn" data-action="click->tabs#select">Future buying power</button>
+          </div>
+          <div data-tabs-target="tab" id="one">
+            <div class="flex flex-col gap-2">
+              <p class="font-normal text-gray-500">Something that costs you <span t-text="initialAmount"></span> today, will cost you</p>
+              <p class="text-4xl font-medium text-gray-900" t-text="futurePrice"></p>
+              <p class="text-gray-500">after <span t-text="years"></span> years at <span t-text="inflationRate"></span>% inflation annually</p>
             </div>
-            <div data-tabs-target="tab" id="one">
+            <div class="flex justify-between mt-4">
               <div class="flex flex-col gap-2">
-                <p class="font-normal text-gray-500">Something that costs you <span t-text="initialAmount"></span> today, will cost you</p>
-                <p class="text-4xl font-medium text-gray-900" t-text="futurePrice"></p>
-                <p class="text-gray-500">after <span t-text="years"></span> years at <span t-text="inflationRate"></span>% inflation annually</p>
+                <p class="text-gray-500">That's an increase of</p>
+                <p class="text-3xl font-medium text-red-500" t-text="percentageIncrease"></p>
               </div>
-              <div class="flex justify-between mt-4">
-                <div class="flex flex-col gap-2">
-                  <p class="text-gray-500">That's an increase of</p>
-                  <p class="text-3xl font-medium text-red-500" t-text="percentageIncrease"></p>
-                </div>
-                <div class="flex flex-col gap-2">
-                  <p class="text-gray-500">Which comes to</p>
-                  <p class="text-3xl font-medium text-red-500" t-text="amountIncrease"></p>
-                </div>
+              <div class="flex flex-col gap-2">
+                <p class="text-gray-500">Which comes to</p>
+                <p class="text-3xl font-medium text-red-500" t-text="amountIncrease"></p>
               </div>
             </div>
-            <div data-tabs-target="tab" id="two">
+          </div>
+          <div data-tabs-target="tab" id="two">
+            <div class="flex flex-col gap-2">
+              <p class="font-normal text-gray-500">if you do nothing with that <span t-text="initialAmount"></span> it'll be worth</p>
+              <p class="text-4xl font-medium text-gray-900" t-text="futureValue"></p>
+              <p class="text-gray-500">after <span t-text="years"></span> years at <span t-text="inflationRate"></span>% inflation annually</p>
+            </div>
+            <div class="flex justify-between mt-4">
               <div class="flex flex-col gap-2">
-                <p class="font-normal text-gray-500">if you do nothing with that <span t-text="initialAmount"></span> it'll be worth</p>
-                <p class="text-4xl font-medium text-gray-900" t-text="futureValue"></p>
-                <p class="text-gray-500">after <span t-text="years"></span> years at <span t-text="inflationRate"></span>% inflation annually</p>
+                <p class="text-gray-500">That's an decrease of</p>
+                <p class="text-3xl font-medium text-red-500" t-text="percentageLoss"></p>
               </div>
-              <div class="flex justify-between mt-4">
-                <div class="flex flex-col gap-2">
-                  <p class="text-gray-500">That's an decrease of</p>
-                  <p class="text-3xl font-medium text-red-500" t-text="percentageLoss"></p>
-                </div>
-                <div class="flex flex-col gap-2">
-                  <p class="text-gray-500">Which comes to</p>
-                  <p class="text-3xl font-medium text-red-500" t-text="amountLoss"></p>
-                </div>
+              <div class="flex flex-col gap-2">
+                <p class="text-gray-500">Which comes to</p>
+                <p class="text-3xl font-medium text-red-500" t-text="amountLoss"></p>
               </div>
             </div>
           </div>
-          <p class="mt-4 text-sm text-gray-500">On average, considering fluctuations, the global inflation rate has hovered around 3% to 3.5% per year over the last decade.</p>
         </div>
-      </template>
-    </div>
-  </div>
+        <p class="mt-4 text-sm text-gray-500">On average, considering fluctuations, the global inflation rate has hovered around 3% to 3.5% per year over the last decade.</p>
+      </div>
+    </template>
+  </div>
+</div>