Merge pull request #952 from ArmDeveloperEcosystem/copy-link-url

remove github issue add copy url

Author: chrismoroney

assets/css/eco-dashboard.css

@@ -112,18 +112,45 @@
 
 }
 
-p.github-link        { 
+.github-link        { 
     margin-top: 0px;
     margin-bottom: 0px;
 
     color: var(--arm-web-safe-blue);
     text-decoration: none;
 }
 
-html[theme='dark'] p.github-link        { 
+a.package-url-copy-link {
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+a.package-url-copy-link .github-link span {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+a.package-url-copy-link:focus,
+a.package-url-copy-link:focus-visible {
+    outline: none;
+    box-shadow: none;
+}
+
+html[theme='dark'] .github-link        { 
+    color: var(--arm-light-blue);
+}
+html[theme='dark'] .github-link:hover {
+    color: var(--arm-green);
+}
+
+html[theme='dark'] a.package-url-copy-link .github-link {
     color: var(--arm-light-blue);
 }
-html[theme='dark'] p.github-link:hover {
+
+html[theme='dark'] a.package-url-copy-link:hover .github-link,
+a.package-url-copy-link:hover .github-link {
     color: var(--arm-green);
 }
 
@@ -627,7 +654,3 @@ ads-card.stack-card:hover  .stack-title {
 
 
 
-
-
-
-

themes/arm-design-system-hugo-theme/layouts/partials/eco-dashboard/github-links.html

@@ -1,18 +1,18 @@
-<!-- GitHub links calculated from GitHub repo, defined in config.toml -->
-{{ $gh_repo := site.Params.github_repo -}}
-{{ $gh_branch := (default "main" site.Params.github_branch) -}}
-{{ $pathFormatted := replace .File.Path "\\" "/" -}}
-{{ $gh_repo_path := printf "%s/content/%s" $gh_branch $pathFormatted -}}
+{{ $package_slug := partial "eco-dashboard/urlize_custom.html" (.metadata.Params.name | lower) -}}
 
-{{ $editURL := printf "%s/edit/%s" $gh_repo $gh_repo_path -}}
-
-<!-- Display github elements -->
-
-<a class="github-issue-update-link" href="{{ $editURL }}" target="_blank" style="text-decoration: none;" title="Edit on GitHub">
+<a
+    class="package-url-copy-link"
+    href="#"
+    title="Copy package URL"
+    aria-label="Copy package URL"
+    data-package-slug="{{ $package_slug }}"
+    data-dashboard-path="{{ .dashboard_page_path }}"
+    onclick="copyPackageUrl(this); return false;"
+    style="text-decoration: none;">
     <p class="github-link">
         <span>
-            <i class="left-hand-icon fa-brands fa-github"></i>
-            Issues? Update here.
+            <i class="left-hand-icon fa-solid fa-link"></i>
+            <span class="package-url-copy-label">Copy package URL</span>
         </span>
     </p>
 </a>

themes/arm-design-system-hugo-theme/layouts/partials/package-display/row-sub.html

@@ -15,10 +15,10 @@
                             {{ end }}
                         </div>
                         <div class="c-col u-hide sm:u-display-block sm:c-col-5 md:c-col-4" style="margin: 0px; padding: 0px; text-align: right;">
-                            {{partial "eco-dashboard/github-links.html" .metadata  }}
+                            {{partial "eco-dashboard/github-links.html" .}}
                         </div>
                         <div class="c-col u-display-block sm:u-hide c-col-12" style="margin: 0px; margin-top: 8px; padding: 0px;">
-                            {{partial "eco-dashboard/github-links.html" .metadata  }}
+                            {{partial "eco-dashboard/github-links.html" .}}
                         </div>
                     </div>
 
@@ -156,4 +156,4 @@
             {{ end }}
         </div>
     </td>
-</tr>
+</tr>

themes/arm-design-system-hugo-theme/layouts/partials/package-display/table.html

@@ -13,19 +13,20 @@
         <tbody id="sw-tablebody">
             {{ $id_index := 0}}
             {{ $os := .context.Params.os }}
+            {{ $dashboard_page_path := .context.RelPermalink | strings.TrimRight "/" }}
             {{ range .packages }}
 
                 {{ $id_index = add $id_index 1 }}
 
 
 
                 {{ partial "package-display/row-main.html" (dict "metadata" . "id_index" $id_index "os" $os "category" .Params.category "search_enable" $.search_enable) }}
-                {{ partial "package-display/row-sub.html" (dict "metadata" . "id_index" $id_index  "os" $os "category" .Params.category)}}
+                {{ partial "package-display/row-sub.html" (dict "metadata" . "id_index" $id_index  "os" $os "category" .Params.category "dashboard_page_path" $dashboard_page_path)}}
 
             {{end}}
 
 
 
         </tbody>
     </table>
-</div>
+</div>

themes/arm-design-system-hugo-theme/static/js/anonymous-analytics.js

@@ -154,12 +154,12 @@ document.addEventListener("DOMContentLoaded", function() {
         }
 
 
-        // GitHub issue tracking
-        let github_issue_links = document.querySelectorAll('a.github-issue-update-link');
-        for (let gh_link of github_issue_links) {
-            gh_link.addEventListener("click", () => {
-                let package_name = gh_link.closest('table').closest('tr').previousElementSibling.getAttribute('data-title');
-                trackGeneralContentInteraction('github_edit_package_click',package_name);
+        // Copy package URL tracking
+        let package_url_copy_links = document.querySelectorAll('a.package-url-copy-link');
+        for (let copy_button of package_url_copy_links) {
+            copy_button.addEventListener("click", () => {
+                let package_name = copy_button.closest('tr').previousElementSibling.getAttribute('data-title');
+                trackGeneralContentInteraction('copy_package_url_click',package_name);
             });
         }
 

themes/arm-design-system-hugo-theme/static/js/eco-dashboard/search.js

@@ -58,6 +58,76 @@ function normalizePackageName(input) {
         .toLowerCase();                 // Convert to lowercase
 }
 
+function getDashboardPath(dashboardPath) {
+    if (dashboardPath) {
+        return dashboardPath.replace(/\/$/, '') || '/';
+    }
+
+    return window.location.pathname.replace(/\/$/, '') || '/';
+}
+  
+function buildPackageDashboardUrl(packageSlug, dashboardPath) {
+    const packageUrl = new URL(window.location.href);
+
+    packageUrl.pathname = getDashboardPath(dashboardPath);
+    packageUrl.search = '';
+    packageUrl.hash = '';
+    packageUrl.searchParams.set('package', packageSlug);
+
+    return packageUrl.toString();
+}
+
+async function copyTextToClipboard(textToCopy) {
+    if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(textToCopy);
+        return;
+    }
+
+    const temporaryTextArea = document.createElement('textarea');
+    temporaryTextArea.value = textToCopy;
+    temporaryTextArea.setAttribute('readonly', '');
+    temporaryTextArea.style.position = 'absolute';
+    temporaryTextArea.style.left = '-9999px';
+
+    document.body.appendChild(temporaryTextArea);
+    temporaryTextArea.select();
+
+    const copySucceeded = document.execCommand('copy');
+    document.body.removeChild(temporaryTextArea);
+
+    if (!copySucceeded) {
+        throw new Error('Copy command failed.');
+    }
+}
+
+async function copyPackageUrl(button) {
+    const packageSlug = button.getAttribute('data-package-slug');
+    const dashboardPath = button.getAttribute('data-dashboard-path');
+    const label = button.querySelector('.package-url-copy-label');
+    const defaultLabel = 'Copy package URL';
+
+    if (!packageSlug || !label) {
+        return;
+    }
+
+    try {
+        const packageUrl = buildPackageDashboardUrl(packageSlug, dashboardPath);
+        await copyTextToClipboard(packageUrl);
+        label.textContent = 'Copied URL';
+        button.setAttribute('aria-label', 'Package URL copied');
+    } catch (error) {
+        console.error('Unable to copy package URL.', error);
+        label.textContent = 'Copy failed';
+        button.setAttribute('aria-label', 'Copy package URL failed');
+    }
+
+    window.clearTimeout(button.copyResetTimeout);
+    button.copyResetTimeout = window.setTimeout(() => {
+        label.textContent = defaultLabel;
+        button.setAttribute('aria-label', defaultLabel);
+    }, 2000);
+}
+
 
 
 function updatePageMetadata(package_dom) {
@@ -75,7 +145,8 @@ function updatePageMetadata(package_dom) {
     if (!does_it_woa) {
         social_description = "View "+pkg_name+" in the Software Ecosystem Dashboard for Arm and discover if it runs on Arm Linux servers (Aarch64) and alternative packages.";
     }
-    let new_cannonical = 'https://developer.arm.com/ecosystem-dashboard?package='+normalizePackageName(pkg_name).replaceAll('(','').replaceAll(')','').replaceAll('__','/');
+    let package_slug = package_dom.getAttribute('data-title-urlized');
+    let new_cannonical = buildPackageDashboardUrl(package_slug);
 
 
 
@@ -101,6 +172,11 @@ function updatePageMetadata(package_dom) {
         canonical_link.setAttribute('href',new_cannonical);
     }
 
+    const ogUrl = document.querySelector('meta[property="og:url"]');
+    if (ogUrl) {
+        ogUrl.setAttribute('content', new_cannonical);
+    }
+
     // Update descriptions
     const ogDescription = document.querySelector('meta[property="og:description"]');
     if (ogDescription) {