diff --git a/app/assets/images/social_icons/email.svg b/app/assets/images/social_icons/email.svg new file mode 100644 index 0000000000..d35d51d60f --- /dev/null +++ b/app/assets/images/social_icons/email.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/images/social_icons/facebook.svg b/app/assets/images/social_icons/facebook.svg new file mode 100644 index 0000000000..80241473eb --- /dev/null +++ b/app/assets/images/social_icons/facebook.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/images/social_icons/linkedin.svg b/app/assets/images/social_icons/linkedin.svg new file mode 100644 index 0000000000..908c867517 --- /dev/null +++ b/app/assets/images/social_icons/linkedin.svg @@ -0,0 +1,4 @@ + + + + diff --git a/app/assets/images/social_icons/mastodon.svg b/app/assets/images/social_icons/mastodon.svg new file mode 100644 index 0000000000..a8b4bc44e0 --- /dev/null +++ b/app/assets/images/social_icons/mastodon.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/app/assets/images/social_icons/telegram.svg b/app/assets/images/social_icons/telegram.svg new file mode 100644 index 0000000000..84c087929f --- /dev/null +++ b/app/assets/images/social_icons/telegram.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/app/assets/images/social_icons/x.svg b/app/assets/images/social_icons/x.svg new file mode 100644 index 0000000000..937dcc732c --- /dev/null +++ b/app/assets/images/social_icons/x.svg @@ -0,0 +1 @@ + diff --git a/app/assets/javascripts/social_share_button.js b/app/assets/javascripts/social_share_button.js new file mode 100644 index 0000000000..409b2c58a7 --- /dev/null +++ b/app/assets/javascripts/social_share_button.js @@ -0,0 +1,21 @@ +function openShareUrl(url, initialWidth = 640, initialHeight = 480) { + const width = Math.max(100, Math.min(screen.width, initialWidth)); + const height = Math.max(100, Math.min(screen.height, initialHeight)); + + const left = (screen.width / 2) - (width / 2); + const top = (screen.height * 0.3) - (height / 2); + const opts = `width=${width},height=${height},left=${left},top=${top},menubar=no,status=no,location=no`; + + window.open(url, "popup", opts); +} + +$(document).ready(function () { + $(".ssb-icon").on("click", function (e) { + const shareUrl = $(this).attr("href"); + if (!shareUrl.startsWith("mailto:")) { + e.preventDefault(); + openShareUrl(shareUrl); + } + }); +}); + diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index fcf253289e..5558e69fbd 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -1,5 +1,6 @@ module ApplicationHelper require "rexml/document" + include SocialShareButtonHelper def linkify(text) if text.html_safe? @@ -75,4 +76,32 @@ def render_flash(flash) rescue StandardError flash.inspect if Rails.env.development? end + + # Generates a set of social share buttons based on the specified options. + def render_social_share_buttons(opts = {}) + sites = opts.fetch(:allow_sites, []) + valid_sites, invalid_sites = SocialShareButtonHelper.filter_allowed_sites(sites) + + # Log invalid sites + invalid_sites.each do |invalid_site| + Rails.logger.error("Invalid site or icon not configured: #{invalid_site}") + end + + tag.div( + :class => "social-share-button d-flex gap-1 align-items-end flex-wrap mb-3" + ) do + valid_sites.map do |site| + link_options = { + :rel => ["nofollow", opts[:rel]].compact, + :class => "ssb-icon rounded-circle", + :title => I18n.t("application.share.#{site}.title"), + :target => "_blank" + } + + link_to SocialShareButtonHelper.generate_share_url(site, opts), link_options do + image_tag(SocialShareButtonHelper.icon_path(site), :alt => I18n.t("application.share.#{site}.alt"), :size => 28) + end + end.join.html_safe + end + end end diff --git a/app/views/diary_entries/_diary_entry.html.erb b/app/views/diary_entries/_diary_entry.html.erb index 62e701d144..2d8243d1b2 100644 --- a/app/views/diary_entries/_diary_entry.html.erb +++ b/app/views/diary_entries/_diary_entry.html.erb @@ -44,4 +44,5 @@ <% end %> + diff --git a/app/views/diary_entries/show.html.erb b/app/views/diary_entries/show.html.erb index e80a44f096..14b1576f0f 100644 --- a/app/views/diary_entries/show.html.erb +++ b/app/views/diary_entries/show.html.erb @@ -1,3 +1,7 @@ +<% content_for :head do %> + <%= javascript_include_tag "social_share_button" %> +<% end %> + <% content_for :heading do %>
@@ -11,6 +15,10 @@ <% end %> <%= render @entry %> +<%= render_social_share_buttons({ + :title => @entry.title, + :url => diary_entry_url(@entry.user, @entry) + }) %>
diff --git a/config/locales/en.yml b/config/locales/en.yml index 1ad17e786c..d24987aefb 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -2628,6 +2628,25 @@ en: wikipedia: title: Log in with Wikipedia alt: Wikipedia logo + share: + email: + title: Share via Email + alt: Email icon + facebook: + title: Share via Facebook + alt: Facebook Icon + linkedin: + title: Share via LinkedIn + alt: LinkedIn Icon + mastodon: + title: Share on Mastodon + alt: Mastodon Icon + telegram: + title: Share on Telegram + alt: Telegram Icon + x: + title: Share on X + alt: X Icon oauth: permissions: missing: "You have not permitted the application access to this facility" diff --git a/lib/social_share_button_helper.rb b/lib/social_share_button_helper.rb new file mode 100644 index 0000000000..fe47c6ca15 --- /dev/null +++ b/lib/social_share_button_helper.rb @@ -0,0 +1,51 @@ +module SocialShareButtonHelper + require "uri" + + SOCIAL_SHARE_CONFIG = { + :email => "social_icons/email.svg", + :facebook => "social_icons/facebook.svg", + :linkedin => "social_icons/linkedin.svg", + :mastodon => "social_icons/mastodon.svg", + :telegram => "social_icons/telegram.svg", + :x => "social_icons/x.svg" + }.freeze + + def self.filter_allowed_sites(sites) + valid_sites = sites.empty? ? SOCIAL_SHARE_CONFIG.keys : sites.select { |site| valid_site?(site) } + invalid_sites = sites - valid_sites + [valid_sites, invalid_sites] + end + + def self.icon_path(site) + SOCIAL_SHARE_CONFIG[site.to_sym] || "" + end + + def self.valid_site?(site) + SOCIAL_SHARE_CONFIG.key?(site.to_sym) + end + + def self.generate_share_url(site, params) + site = site.to_sym + case site + when :email + to = params[:to] || "" + subject = CGI.escape(params[:title]) + body = CGI.escape(params[:url]) + "mailto:#{to}?subject=#{subject}&body=#{body}" + when :x + via_str = params[:via] ? "&via=#{URI.encode_www_form_component(params[:via])}" : "" + hashtags_str = params[:hashtags] ? "&hashtags=#{URI.encode_www_form_component(params[:hashtags].join(','))}" : "" + "https://x.com/intent/tweet?url=#{URI.encode_www_form_component(params[:url])}&text=#{URI.encode_www_form_component(params[:title])}#{hashtags_str}#{via_str}" + when :linkedin + "https://www.linkedin.com/sharing/share-offsite/?url=#{URI.encode_www_form_component(params[:url])}" + when :facebook + "https://www.facebook.com/sharer/sharer.php?u=#{URI.encode_www_form_component('params[:url]')}&t=#{URI.encode_www_form_component(params[:title])}" + when :mastodon + "https://mastodonshare.com/?text=#{URI.encode_www_form_component(params[:title])}&url=#{URI.encode_www_form_component(params[:url])}" + when :telegram + "https://t.me/share/url?url=#{URI.encode_www_form_component(params[:url])}&text=#{URI.encode_www_form_component(params[:title])}" + else + raise ArgumentError, "Unsupported platform: #{platform}" + end + end +end diff --git a/test/helpers/social_share_button_helper_test.rb b/test/helpers/social_share_button_helper_test.rb new file mode 100644 index 0000000000..9c7569334d --- /dev/null +++ b/test/helpers/social_share_button_helper_test.rb @@ -0,0 +1,48 @@ +require "test_helper" + +class SocialShareButtonHelperTest < ActionView::TestCase + include SocialShareButtonHelper + include ApplicationHelper + + def setup + @options = { + :allow_sites => %w[x facebook linkedin], + :title => "Test Title", + :url => "https://example.com", + :desc => "Test Description", + :via => "testuser" + } + end + + def test_render_social_share_buttons_with_valid_sites + result = render_social_share_buttons(@options) + assert_includes result, "x" + assert_includes result, "facebook" + assert_includes result, "linkedin" + end + + def test_render_social_share_buttons_with_invalid_site + @options[:allow_sites] << "invalid_site" + result = render_social_share_buttons(@options) + assert_not_includes result, "invalid_site" + end + + def test_render_social_share_buttons_with_no_sites + @options[:allow_sites] = [] + result = render_social_share_buttons(@options) + SocialShareButtonHelper::SOCIAL_SHARE_CONFIG.each_key do |site| + assert_includes result, site.to_s # Convert symbol to string + end + end + + def test_filter_allowed_sites + valid_sites, invalid_sites = SocialShareButtonHelper.filter_allowed_sites(%w[x facebook invalid_site]) + assert_equal %w[x facebook], valid_sites + assert_equal %w[invalid_site], invalid_sites + end + + def test_icon_path + assert_equal "social_icons/x.svg", SocialShareButtonHelper.icon_path("x") + assert_equal "", SocialShareButtonHelper.icon_path("invalid_site") + end +end