Add support for the Web Share API (#20)

README.md

@@ -15,6 +15,9 @@ This repository contains the source of a proposal for an alternative news hub fo
   - [jekyll-transcode-image-filters](https://github.com/Garanas/jekyll-transcode-image-filters): Plugin to help with converting images to browser friendly formats
   - [jekyll-icalendar-feed](https://github.com/Garanas/jekyll-icalendar-feed): Plugin to help with generating an iCalendar (RFC5545) feed of our content
 
+- [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API): A browser API that makes it easier to share content
+- [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API): A browser API that makes it easier to copy content to the clipboard. This is used as a fallback if the Web Share API is not available.
+
 ### CI/CD
 
 - [Node Package Manager](https://nodejs.org/en/download/package-manager)

src/_includes/components/copy-button.html

@@ -1,10 +1,12 @@
 {% comment %} 
 
 Input parameters: 
-- data: the data to copy to clipboard
+- url: the URL to share
+- title: the title of the content to share
+- description: the description of the content to share
 
 {% endcomment %}
 
 <abbr title="Click to copy">
-    <button class="copy-button" data-clipboard-text="{{ include.data }}" type="button"> <span class="icon-copy"></span> </button>
+    <button class="copy-button" data-share-description="{{ include.description |  strip_html }}" data-share-title="{{ include.title |  strip_html }}" data-share-url="{{ include.url }}" type="button"> <span class="icon-share2"></span> </button>
 </abbr>

src/_includes/post/featured.html

@@ -26,7 +26,8 @@ <h3 class="post-featured-header">{{ include.post.title | escape }}</h3>
     </span>
 
     <div class="post-featured-actions">
-      {% include components/copy-button.html data=include.post.redirectURL %}
+      {% assign absolute_url_post = include.post.url | absolute_url %}
+      {% include components/copy-button.html title=include.post.title description=include.post.excerpt url=absolute_url_post %}
       {% include components/url-button.html href=include.post.redirectURL %}
     </div>
   </div>

src/_includes/post/small.html

@@ -27,7 +27,7 @@ <h3 class="post-small-header">{{ include.post.title | escape }}</h3>
   </div>
 
   <div class="post-small-actions">
-    {% include components/copy-button.html data=include.post.redirectURL %}
+    {% include components/copy-button.html title=include.post.title description=include.post.excerpt url=include.post.url %}
     {% include components/url-button.html href=include.post.redirectURL %}
   </div>
 </div>

src/_sass/_icomoon.scss

@@ -28,6 +28,10 @@
 /* When updating, override the following section and leave everything else   */
 /* intact!                                                                   */
 
+.icon-instagram:before {
+  content: "\e906";
+  color: #e4405f;
+}
 .icon-github:before {
   content: "\e905";
 }
@@ -68,6 +72,9 @@
 .icon-embed2:before {
   content: "\ea80";
 }
+.icon-share2:before {
+  content: "\ea82";
+}
 .icon-deviantart:before {
   content: "\eaaa";
-}
+}

src/_sass/components/_copy-button.scss

@@ -63,8 +63,4 @@
     opacity: 1;
     animation: moveUpFadeOut 1s linear;
   }
-
-  @media (max-width: $on-medium) {
-    display: none;
-  }
 }

src/assets/js/copy-to-clipboard.js

@@ -5,23 +5,42 @@ document.addEventListener("DOMContentLoaded", () => {
   buttons.forEach((button) => {
     button.addEventListener("click", function () {
       // Get the associated text to copy
-      const textToCopy = this.getAttribute("data-clipboard-text");
+      const dataTitle = this.getAttribute("data-share-title");
+      const dataText = this.getAttribute("data-share-description");
+      const dataURL = this.getAttribute("data-share-url");
 
-      // Use the Clipboard API
-      navigator.clipboard
-        .writeText(textToCopy)
-        .then(() => {
-          // Flash the button green
-          this.classList.add("show-msg");
+      if (navigator.share) {
+        navigator
+          .share({
+            title: dataTitle,
+            text: dataText,
+            url: dataURL,
+          })
+          .then(() => console.log("Shared successfully!"))
+          .catch((error) => console.error("Error sharing:", error));
 
-          // Remove the class after the animation ends
-          setTimeout(() => {
-            this.classList.remove("show-msg");
-          }, 1000); // Match the animation duration
-        })
-        .catch((err) => {
-          console.error("Failed to copy text: ", err);
-        });
+        return;
+      }
+
+      if (navigator.clipboard) {
+        // Use the Clipboard API
+        navigator.clipboard
+          .writeText(dataURL)
+          .then(() => {
+            // Flash the button green
+            this.classList.add("show-msg");
+
+            // Remove the class after the animation ends
+            setTimeout(() => {
+              this.classList.remove("show-msg");
+            }, 1000); // Match the animation duration
+          })
+          .catch((err) => {
+            console.error("Failed to copy text: ", err);
+          });
+
+        return;
+      }
     });
   });
 });

src/manifest.json

@@ -13,27 +13,7 @@
   "display": "standalone",
   "scope": "{{ site.baseurl }}/",
   "start_url": "{{ site.baseurl }}/",
-  "description": "Newshub for FAForever ",
-  "screenshots" : [
-    {
-      "src": "assets/images/pwa/screenshots/pwa-screenshot-colossus-2560x1440.webp",
-      "sizes": "2560x1440",
-      "type": "image/webp",
-      "platform": "wide",
-    },
-    {
-      "src": "assets/images/pwa/screenshots/pwa-screenshot-uef-base-1920x1080.webp",
-      "sizes": "1920x1080",
-      "type": "image/webp",
-      "platform": "wide",
-    },
-    {
-      "src": "assets/images/pwa/screenshots/pwa-screenshot-uef-base-960x540.webp",
-      "sizes": "960x540",
-      "type": "image/webp",
-      "platform": "wide",
-    }
-  ],
+  "description": "News of FAForever ",
   "icons": [
     {
       "src": "{{ '/assets/icons/windows11/SmallTile.scale-100.png' | relative_url }} ",