main
html 100 lines 5.86 KB
Raw
1 {{- $pageurl := .Permalink -}}
2 {{- $title := .Title | plainify -}}
3 {{- $summary := (.Description | default .Summary | default .Title) | plainify -}}
4 {{- $.Scratch.Set "tags" "" -}}
5 {{- with .Params.Tags -}}
6 {{- $hashtags := newScratch -}}
7 {{- range . -}}
8 {{- $hashtags.Add "tags" (slice (replaceRE "(\\s)" "" .)) -}}
9 {{- end -}}
10 {{- $.Scratch.Set "tags" (delimit ($hashtags.Get "tags") ",") -}}
11 {{- end -}}
12 {{- $shareButtons := .Param "ShareButtons" | default (slice "x" "linkedin" "facebook") -}}
13 <div class="share-block" aria-label="Share this report">
14 <p class="share-block__label">Share this report</p>
15 <div class="share-actions">
16 <button
17 type="button"
18 class="share-button share-button--native"
19 data-share-native
20 data-share-title="{{ $title }}"
21 data-share-text="{{ $summary }}"
22 data-share-url="{{ $pageurl }}"
23 aria-label="Share this report using your device share sheet"
24 hidden>
25 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
26 <circle cx="18" cy="5" r="3"></circle>
27 <circle cx="6" cy="12" r="3"></circle>
28 <circle cx="18" cy="19" r="3"></circle>
29 <path d="M8.59 13.51 15.42 17.49"></path>
30 <path d="M15.41 6.51 8.59 10.49"></path>
31 </svg>
32 <span>Share</span>
33 </button>
34 <ul class="share-buttons" aria-label="Share on social platforms">
35 {{- if or (in $shareButtons "x") (in $shareButtons "twitter") }}
36 <li>
37 <a class="share-button share-button--icon" target="_blank" rel="noopener noreferrer" aria-label="Share {{ $title }} on X"
38 href="https://x.com/intent/tweet/?text={{ $title | urlquery }}&amp;url={{ $pageurl | urlquery }}&amp;hashtags={{ $.Scratch.Get "tags" | urlquery }}">
39 <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" fill="currentColor" aria-hidden="true">
40 <path d="M512 62.554 L 512 449.446 C 512 483.97 483.97 512 449.446 512 L 62.554 512 C 28.03 512 0 483.97 0 449.446 L 0 62.554 C 0 28.03 28.029 0 62.554 0 L 449.446 0 C 483.971 0 512 28.03 512 62.554 Z M 269.951 190.75 L 182.567 75.216 L 56 75.216 L 207.216 272.95 L 63.9 436.783 L 125.266 436.783 L 235.9 310.383 L 332.567 436.783 L 456 436.783 L 298.367 228.367 L 432.367 75.216 L 371.033 75.216 Z M 127.633 110 L 164.101 110 L 383.481 400.065 L 349.5 400.065 Z" />
41 </svg>
42 <span class="visually-hidden">X</span>
43 </a>
44 </li>
45 {{- end }}
46 {{- if in $shareButtons "linkedin" }}
47 <li>
48 <a class="share-button share-button--icon" target="_blank" rel="noopener noreferrer" aria-label="Share {{ $title }} on LinkedIn"
49 href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ $pageurl | urlquery }}&amp;title={{ $title | urlquery }}&amp;summary={{ $summary | urlquery }}&amp;source={{ $pageurl | urlquery }}">
50 <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" fill="currentColor" aria-hidden="true">
51 <path d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-386.892,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Zm-288.985,423.278l0,-225.717l-75.04,0l0,225.717l75.04,0Zm270.539,0l0,-129.439c0,-69.333 -37.018,-101.586 -86.381,-101.586c-39.804,0 -57.634,21.891 -67.617,37.266l0,-31.958l-75.021,0c0.995,21.181 0,225.717 0,225.717l75.02,0l0,-126.056c0,-6.748 0.486,-13.492 2.474,-18.315c5.414,-13.475 17.767,-27.434 38.494,-27.434c27.135,0 38.007,20.707 38.007,51.037l0,120.768l75.024,0Zm-307.552,-334.556c-25.674,0 -42.448,16.879 -42.448,39.002c0,21.658 16.264,39.002 41.455,39.002l0.484,0c26.165,0 42.452,-17.344 42.452,-39.002c-0.485,-22.092 -16.241,-38.954 -41.943,-39.002Z" />
52 </svg>
53 <span class="visually-hidden">LinkedIn</span>
54 </a>
55 </li>
56 {{- end }}
57 {{- if in $shareButtons "facebook" }}
58 <li>
59 <a class="share-button share-button--icon" target="_blank" rel="noopener noreferrer" aria-label="Share {{ $title }} on Facebook"
60 href="https://facebook.com/sharer/sharer.php?u={{ $pageurl | urlquery }}">
61 <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" fill="currentColor" aria-hidden="true">
62 <path d="M449.446,0c34.525,0 62.554,28.03 62.554,62.554l0,386.892c0,34.524 -28.03,62.554 -62.554,62.554l-106.468,0l0,-192.915l66.6,0l12.672,-82.621l-79.272,0l0,-53.617c0,-22.603 11.073,-44.636 46.58,-44.636l36.042,0l0,-70.34c0,0 -32.71,-5.582 -63.982,-5.582c-65.288,0 -107.96,39.569 -107.96,111.204l0,62.971l-72.573,0l0,82.621l72.573,0l0,192.915l-191.104,0c-34.524,0 -62.554,-28.03 -62.554,-62.554l0,-386.892c0,-34.524 28.029,-62.554 62.554,-62.554l386.892,0Z" />
63 </svg>
64 <span class="visually-hidden">Facebook</span>
65 </a>
66 </li>
67 {{- end }}
68 </ul>
69 </div>
70 </div>
71 <script>
72 (() => {
73 const currentScript = document.currentScript;
74 const shareBlock = currentScript && currentScript.previousElementSibling;
75 const nativeShareButton = (shareBlock || document).querySelector('[data-share-native]');
76 if (!nativeShareButton || typeof navigator === 'undefined' || typeof navigator.share !== 'function') {
77 return;
78 }
79
80 const shouldUseNativeShare = window.matchMedia('(hover: none), (pointer: coarse)').matches;
81 if (!shouldUseNativeShare) {
82 return;
83 }
84
85 nativeShareButton.hidden = false;
86 nativeShareButton.addEventListener('click', async () => {
87 try {
88 await navigator.share({
89 title: nativeShareButton.dataset.shareTitle,
90 text: nativeShareButton.dataset.shareText,
91 url: nativeShareButton.dataset.shareUrl,
92 });
93 } catch (error) {
94 if (error && error.name !== 'AbortError') {
95 window.open(nativeShareButton.dataset.shareUrl, '_blank', 'noopener');
96 }
97 }
98 });
99 })();
100 </script>