I created a copy link button for source theme

Live demo On my multilingual website

Here are the html, css and javascript codes

partials/copy.hbs

<button class="share-button" aria-label="Share">
  <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M14.851 11.923c-.179-.641-.521-1.246-1.025-1.749-1.562-1.562-4.095-1.563-5.657 0l-4.998 4.998c-1.562 1.563-1.563 4.095 0 5.657 1.562 1.563 4.096 1.561 5.656 0l3.842-3.841.333.009c.404 0 .802-.04 1.189-.117l-4.657 4.656c-.975.976-2.255 1.464-3.535 1.464-1.28 0-2.56-.488-3.535-1.464-1.952-1.951-1.952-5.12 0-7.071l4.998-4.998c.975-.976 2.256-1.464 3.536-1.464 1.279 0 2.56.488 3.535 1.464.493.493.861 1.063 1.105 1.672l-.787.784zm-5.703.147c.178.643.521 1.25 1.026 1.756 1.562 1.563 4.096 1.561 5.656 0l4.999-4.998c1.563-1.562 1.563-4.095 0-5.657-1.562-1.562-4.095-1.563-5.657 0l-3.841 3.841-.333-.009c-.404 0-.802.04-1.189.117l4.656-4.656c.975-.976 2.256-1.464 3.536-1.464 1.279 0 2.56.488 3.535 1.464 1.951 1.951 1.951 5.119 0 7.071l-4.999 4.998c-.975.976-2.255 1.464-3.535 1.464-1.28 0-2.56-.488-3.535-1.464-.494-.495-.863-1.067-1.107-1.678l.788-.785z"/></svg>
  <span class="tooltip">Copied to clipboard</span>
</button>

<script>
document.querySelector('.share-button').addEventListener('click', async function() {
  try {
    // Get current page URL
    const currentUrl = window.location.href;
    
    // Copy to clipboard
    await navigator.clipboard.writeText(currentUrl);
    
    // Show tooltip
    this.classList.add('copied');
    
    // Hide tooltip after 2 seconds
    setTimeout(() => {
      this.classList.remove('copied');
    }, 2000);
    
  } catch (err) {
    console.error('Failed to copy:', err);
  }
});
</script>

.share-button {
  position: relative;
  padding: 8px;
  background: none;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.share-button:hover {
  background-color: #f6f8fa;
}

.share-button svg {
  display: block;
  width: 24px;
  height: 24px;
  color: #24292e;
}

.tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 8px;
  background: #24292e;
  color: white;
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #24292e;
}

.share-button.copied .tooltip {
  opacity: 1;
  visibility: visible;
}

post.hbs

            <div class="gh-article-meta">
                <div class="gh-article-author-image instapaper_ignore">
                    {{#foreach authors}}
                        {{#if profile_image}}
                            <a href="{{url}}">
                                <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}">
                            </a>
                        {{else}}
                            <a href="{{url}}">{{> "icons/avatar"}}</a>
                        {{/if}}
                    {{/foreach}}
                </div>
                <div class="gh-article-meta-wrapper">
                    <h4 class="gh-article-author-name">{{authors}}</h4>
                    <div class="gh-article-meta-content">
                        <time class="gh-article-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMM YYYY"}}</time>
                        {{#if reading_time}}
                            <span class="gh-article-meta-length"><span class="bull">—</span> {{reading_time}}</span>
                        {{/if}}
                    </div>
                </div>
              {{> "copy"}} <<< partials copy
            </div>