Use <web-share-wrapper> for article sharing (#1524)

app/javascript/packs/webShare.js

@@ -0,0 +1,2 @@
+/* eslint no-unused-vars: ["error", { "argsIgnorePattern": "_" }] */
+import 'web-share-wrapper';

app/views/articles/_actions.html.erb

@@ -31,10 +31,15 @@
         <div class="dropdown-link-row">
           <input value="https://dev.to<%= @article.path %>" onClick="this.setSelectionRange(0, this.value.length)" readonly/>
         </div>
-        <div class="dropdown-link-row"><a target='_blank' href='https://twitter.com/intent/tweet?text="<%= @article.title %>" by <%= @article.user.twitter_username ? "@" + @article.user.twitter_username : @article.user.name %> %23DEVcommunity https://dev.to<%= @article.path %>'>Share to Twitter</a></div>
-        <div class="dropdown-link-row"><a target='_blank' href='https://www.linkedin.com/shareArticle?mini=true&url=https://dev.to<%=@article.path%>&title=<%=@article.title%>&summary=<%=@article.description%>&source=dev.to'>Share to LinkedIn</a></div>
-        <div class="dropdown-link-row"><a target='_blank' href='https://www.reddit.com/submit?url=https://dev.to<%=@article.path%>&title=<%= @article.title %>'>Share to Reddit</a></div>
-        <div class="dropdown-link-row"><a target='_blank' href='https://www.facebook.com/sharer.php?u=https://dev.to<%=@article.path%>'>Share to Facebook</a></div>
+        <web-share-wrapper shareurl="https://dev.to<%= @article.path %>" sharetext="<%= @article.title %>" template="web-share-button">
+          <div class="dropdown-link-row"><a target='_blank' href='https://twitter.com/intent/tweet?text="<%= @article.title %>" by <%= @article.user.twitter_username ? "@" + @article.user.twitter_username : @article.user.name %> %23DEVcommunity https://dev.to<%= @article.path %>'>Share to Twitter</a></div>
+          <div class="dropdown-link-row"><a target='_blank' href='https://www.linkedin.com/shareArticle?mini=true&url=https://dev.to<%=@article.path%>&title=<%=@article.title%>&summary=<%=@article.description%>&source=dev.to'>Share to LinkedIn</a></div>
+          <div class="dropdown-link-row"><a target='_blank' href='https://www.reddit.com/submit?url=https://dev.to<%=@article.path%>&title=<%= @article.title %>'>Share to Reddit</a></div>
+          <div class="dropdown-link-row"><a target='_blank' href='https://www.facebook.com/sharer.php?u=https://dev.to<%=@article.path%>'>Share to Facebook</a></div>
+        </web-share-wrapper>
+        <template id="web-share-button">
+          <div class="dropdown-link-row"><a href="#">Share Post</a></div>
+        </template>
         <div class="dropdown-link-row"><a href="/report-abuse">Report Abuse</a></div>
       </div>
     </div>

app/views/articles/show.html.erb

@@ -211,7 +211,7 @@
   <% end %>
 <% end %>
 
- <% cache("article-show-scripts", expires_in: 8.hours) do %>
+<% cache("article-show-scripts", expires_in: 8.hours) do %>
   <script async>
     <%= TweetTag.script.html_safe %>
     <%= YoutubeTag.script.html_safe %>
@@ -220,3 +220,5 @@
     <%= RunkitTag.script.html_safe %>
   </script>
 <% end %>
+
+<%= javascript_pack_tag "webShare", defer: true %>

package.json

@@ -98,6 +98,7 @@
     "preact-textarea-autosize": "^4.0.7",
     "prop-types": "^15.7.1",
     "pusher-js": "^4.3.1",
+    "web-share-wrapper": "^0.2.1",
     "twilio-video": "^1.15.2"
   }
 }

yarn.lock

@@ -10804,6 +10804,11 @@ wbuf@^1.1.0, wbuf@^1.7.2:
   dependencies:
     minimalistic-assert "^1.0.0"
 
+web-share-wrapper@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/web-share-wrapper/-/web-share-wrapper-0.2.1.tgz#679a8daf339fe6da17f5999c1744fb89552f99ee"
+  integrity sha512-YEHwLgxLP3qOiP7/pKNdwSLdXfJ8+U9b1A12jbALzE9nSX/sbu4TTZXxQWu1nFjAfzxeqbwokAhcMDWe/4ey0Q==
+
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"