Add page-level share button with referral ID

EssentialCSharp.Web/src/components/PageNavigation.vue

@@ -16,6 +16,16 @@ const shell = inject("shell");
                 ( or use the <i class="fa-solid fa-square-caret-left" /> key)
             </span>
         </div>
+        <div v-if="shell.isContentPage" class="turn-page-tooltip">
+            <button id="share-btn" class="arrow-btn" aria-label="Share this page" @click="shell.shareCurrentPage()">
+                <i class="fa-solid fa-share-from-square arrow-icon" />
+            </button>
+            <span class="turn-page-tooltip-text tooltip-center">
+                <b>Share Page</b>
+                <br />
+                Copies a link to this page
+            </span>
+        </div>
         <div class="turn-page-tooltip">
             <a v-if="shell.nextPageUrl" id="next-btn" :href="shell.nextPageUrl" class="arrow-btn">
                 <i class="fa fa-solid fa-arrow-right icon-light arrow-icon" />

EssentialCSharp.Web/src/composables/useSiteShell.js

@@ -89,28 +89,21 @@ export function useSiteShell() {
         return urlObject.toString();
     }
 
-    function copyToClipboard(copyText) {
-        let url;
-
-        if (copyText.includes("#")) {
-            url = `${window.location.origin}/${copyText}`;
-        }
-        else {
-            const currentUrl = window.location.href.split("#")[0];
-            url = `${currentUrl}#${copyText}`;
-        }
-
+    function addReferralIdToUrl(url) {
         const referralId = window.REFERRAL_ID;
         if (typeof referralId === "string" && referralId.trim().length > 0) {
-            url = addQueryParam(url, "rid", referralId);
+            return addQueryParam(url, "rid", referralId);
         }
+        return url;
+    }
 
+    function writeToClipboard(url, successMessage = "Copied to clipboard!") {
         navigator.clipboard
             .writeText(url)
             .then(
                 () => {
                     snackbarColor.value = "white";
-                    snackbarMessage.value = "Copied url to clipboard!";
+                    snackbarMessage.value = successMessage;
                 },
                 (error) => {
                     console.error("Could not copy text to clipboard: ", error);
@@ -129,6 +122,25 @@ export function useSiteShell() {
         }, 3000);
     }
 
+    function copyToClipboard(copyText) {
+        let url;
+
+        if (copyText.includes("#")) {
+            url = `${window.location.origin}/${copyText}`;
+        }
+        else {
+            const currentUrl = window.location.href.split("#")[0];
+            url = `${currentUrl}#${copyText}`;
+        }
+
+        writeToClipboard(addReferralIdToUrl(url), "Copied url to clipboard!");
+    }
+
+    function shareCurrentPage() {
+        const url = window.location.href.split("#")[0];
+        writeToClipboard(addReferralIdToUrl(url), "Copied page url to clipboard!");
+    }
+
     function goToPrevious() {
         if (window.PREVIOUS_PAGE !== null) {
             window.location.href = `/${window.PREVIOUS_PAGE}`;
@@ -276,6 +288,7 @@ export function useSiteShell() {
         isContentPage,
         filteredTocData,
         copyToClipboard,
+        shareCurrentPage,
         goToPrevious,
         goToNext,
         openSearch,

EssentialCSharp.Web/wwwroot/css/styles.css

@@ -437,6 +437,17 @@ a:hover {
   right: 3rem;
 }
 
+.turn-page-tooltip .tooltip-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* Share button reset */
+.turn-page button.arrow-btn {
+  border: none;
+  padding: 0;
+}
+
 /* Chapter Navigation Sidebar Styles */
 
 .sidebar {