na

app/helpers/site_helper.rb

@@ -25,4 +25,29 @@ module SiteHelper
     rand(range)
   end
 
+
+  def parse_article_html(html)
+    result = {}
+    return result if html.blank?
+
+    doc = Nokogiri::HTML.fragment(html, 'utf-8')
+
+    first_link = doc.at_css('a')
+    first_link.remove if first_link
+
+    result[:title] = doc.at_css('h1').text
+    result[:description] = doc.at_css('div').text
+    result[:link] = first_link&.to_html
+
+    doc.search('*').each do |node|
+      while node.children.last and node.children.last.name == 'br'
+        node.children.last.remove
+      end
+    end
+
+    result[:html] = doc.to_html
+
+    result
+  end
+
 end

app/javascript/application.js

@@ -44,10 +44,24 @@ document.querySelectorAll('#confirm_btn').forEach((confirm_btn) => {
 })
 
 // Copy link to clipboard
-document.querySelectorAll('[data-share-url]').forEach((share_btn) => {  
+document.querySelectorAll('[data-share-title]').forEach((share_btn) => {  
   share_btn.addEventListener('click', (e) => {        
-    navigator.clipboard.writeText(e.currentTarget.getAttribute('data-share-url'))
-    alert('URL copied to clipboard!')
+
+    if (navigator.share) {
+      navigator.share({
+          title: e.currentTarget.getAttribute('data-share-title'),
+          text:  e.currentTarget.getAttribute('data-share-text'),
+          url: window.location.href
+      }).then(() => {
+          console.log('Thanks for sharing!');
+      })
+      .catch(console.error);
+    } else {
+      navigator.clipboard.writeText(window.location.href)
+      alert('URL copied to clipboard!')
+    }
+
+    
   })
 })
 

app/views/site/tmpl_article.html.erb

@@ -1,4 +1,12 @@
-<%- content_for :title, node_title(@node) %>
+<%- 
+  
+  attachment = @node.attachments.limit(1)[0]
+
+  article_parts = parse_article_html(attachment&.body)
+
+  content_for :title, @node.page_title.blank? ? article_parts[:title] : @node.page_title
+  content_for :meta_description, @node.page_description.blank? ? article_parts[:description] : @node.page_description
+%>
 
 <article class="link__container">
 
@@ -21,12 +29,12 @@
       <% end %>
     
       <div class="link__body">
-        <%= attachment.body.html_safe %>        
+        <%= article_parts[:html]&.html_safe %>        
       </div>
 
       <%= tag.div class: "link__learn-more" do %>
-        <%= link_to t('learn_more'), @node.href %>
-      <% end %>
+        <%= article_parts[:link].html_safe %>
+      <% end if article_parts[:link] %>
     <% end %>
     
 
@@ -35,7 +43,7 @@
   <ul class="link__ctas">
     <li><%= link_to t('spot_another_link'), @node.parent.url, class: 'button__base' %></li>
     <li>
-      <button type="button" class="button__base button__base-light" data-share-url="<%= root_url %>">
+      <button type="button" class="button__base button__base-light" data-share-title="<%= yield(:title) %>" data-share-text="<%= strip_tags(t('can_you_spot_the_link')) %>">
         <%= t 'challange_a_friend' %>
       </button>
     </li>

config/locales/en.yml

@@ -80,6 +80,7 @@ en:
     uk: 🇺🇦 
 
   can_you_spot_the_link: Can you spot <span>the link?</span>
+  
 
   hello: Hello!
   please_select_a_language_to_get_started: Please select a language to get started.