Skip to content

Commit 2fc8f70

Browse files
harsha509diemol
harsha509
and
diemol
authored
feat: add button to show full code example (#2334)
* feat: add button to show full code example * fix: apply bot code suggestions * set border style for buttons --------- [deploy site] Co-authored-by: Diego Molina <[email protected]>
1 parent 0411ffa commit 2fc8f70

File tree

1 file changed

+133
-30
lines changed

1 file changed

+133
-30
lines changed

‎website_and_docs/layouts/shortcodes/gh-codeblock.html

Lines changed: 133 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,22 @@
66

77
{{ $defaultBranchFromEnv := (getenv "SELENIUM_EXAMPLES_BRANCH") }}
88
{{ if $defaultBranchFromEnv }}
9-
{{ $branch = $defaultBranchFromEnv }}
9+
{{ $branch = $defaultBranchFromEnv }}
1010
{{ end }}
1111

1212
{{ $defaultOrgFromEnv := (getenv "SELENIUM_EXAMPLES_ORG") }}
1313
{{ if $defaultOrgFromEnv }}
14-
{{ $org = $defaultOrgFromEnv }}
14+
{{ $org = $defaultOrgFromEnv }}
1515
{{ end }}
1616

1717
{{ $defaultRepoFromEnv := (getenv "SELENIUM_EXAMPLES_REPO") }}
1818
{{ if $defaultRepoFromEnv }}
19-
{{ $repo = $defaultRepoFromEnv }}
19+
{{ $repo = $defaultRepoFromEnv }}
2020
{{ end }}
2121

2222
{{ $fullPath := .Get "path" }}
2323
{{ $path := index (split $fullPath "#") 0 }}
24+
{{ $hasFragment := in $fullPath "#" }}
2425

2526
{{ $apiUrl := printf "%s/%s/%s/contents%s?ref=%s" $apiBaseUrl $org $repo $path $branch }}
2627
{{ $webUrl := printf "%s/%s/%s/blob/%s/%s" $webBaseUrl $org $repo $branch $fullPath }}
@@ -30,34 +31,136 @@
3031

3132
{{ $githubToken := (getenv "SELENIUM_CI_TOKEN") }}
3233
{{ if $githubToken }}
33-
{{ $toReplace := printf "://%s@" $githubToken }}
34-
{{ $tokenInUrl := cond (eq $githubToken "") "://" $toReplace }}
35-
{{ $apiUrlWithToken := replace $apiUrl "://" $tokenInUrl }}
36-
37-
{{ $apiResults := getJSON $apiUrlWithToken }}
38-
{{ $content := base64Decode $apiResults.content }}
39-
{{ $codeSnippet := $content }}
40-
41-
{{ $parsedApiUrl := urls.Parse $webUrl }}
42-
{{ with $parsedApiUrl.Fragment }}
43-
{{ $codeLines := split $parsedApiUrl.Fragment "-" }}
44-
{{ $fromLine := sub (int (replace (index $codeLines 0) "L" "")) 1 }}
45-
{{ $toLine := int (cond (eq (len $codeLines) 1) (replace (index $codeLines 0) "L" "") (replace (index $codeLines 1) "L" "")) }}
46-
{{ $numOfLines := cond (eq (sub $toLine $fromLine) 0) 1 (sub $toLine $fromLine) }}
47-
{{ $splitContent := split $content "\n" }}
48-
{{ $codeSnippet = delimit (first $numOfLines (after $fromLine $splitContent)) "\n" }}
49-
{{ end }}
50-
51-
{{ highlight $codeSnippet $language }}
52-
53-
<div class="text-end pb-2">
34+
{{ $toReplace := printf "://%s@" $githubToken }}
35+
{{ $tokenInUrl := cond (eq $githubToken "") "://" $toReplace }}
36+
{{ $apiUrlWithToken := replace $apiUrl "://" $tokenInUrl }}
37+
38+
{{ $apiResults := getJSON $apiUrlWithToken }}
39+
{{ $content := base64Decode $apiResults.content }}
40+
{{ $codeSnippet := $content }}
41+
42+
{{ $parsedApiUrl := urls.Parse $webUrl }}
43+
{{ with $parsedApiUrl.Fragment }}
44+
{{ $codeLines := split $parsedApiUrl.Fragment "-" }}
45+
{{ $fromLine := sub (int (replace (index $codeLines 0) "L" "")) 1 }}
46+
{{ $toLine := int (cond (eq (len $codeLines) 1) (replace (index $codeLines 0) "L" "") (replace (index $codeLines 1) "L" "")) }}
47+
{{ $numOfLines := cond (eq (sub $toLine $fromLine) 0) 1 (sub $toLine $fromLine) }}
48+
{{ $splitContent := split $content "\n" }}
49+
{{ $codeSnippet = delimit (first $numOfLines (after $fromLine $splitContent)) "\n" }}
50+
{{ end }}
51+
52+
{{ highlight $codeSnippet $language }}
53+
54+
{{ if $hasFragment }}
55+
{{ $uniqueId := md5 $path }}
56+
<div class="mt-4 pb-2">
57+
<div style="border: 1px solid #dee2e6; border-radius: 6px; overflow: hidden; display: flex;">
58+
<a onclick="showCodeModal('{{ $uniqueId }}')" style="flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px 12px; text-decoration: none; color: #007bff; background: #f8f9fa; font-weight: 500; transition: background-color 0.2s; cursor: pointer; border-right: 1px solid #dee2e6;" onmouseover="this.style.backgroundColor='#e9ecef'" onmouseout="this.style.backgroundColor='#f8f9fa'">
59+
View Complete Code
60+
</a>
61+
<a href="{{- $webUrl -}}" target="_blank" style="flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px 12px; text-decoration: none; color: #007bff; background: #f8f9fa; font-weight: 500; transition: background-color 0.2s;" onmouseover="this.style.backgroundColor='#e9ecef'" onmouseout="this.style.backgroundColor='#f8f9fa'">
62+
<i class="fas fa-external-link-alt" style="margin-right: 8px;"></i>
63+
View on GitHub
64+
</a>
65+
</div>
66+
</div>
67+
68+
<div id="codeModal_{{ $uniqueId }}" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1050;">
69+
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; border-radius: 8px; max-width: 90%; max-height: 90%; overflow: auto; box-shadow: 0 4px 20px rgba(0,0,0,0.3);">
70+
<div style="padding: 20px; border-bottom: 1px solid #dee2e6; display: flex; justify-content: space-between; align-items: center;">
71+
<h5 style="margin: 0;">{{ $path }}</h5>
72+
<div>
73+
<button onclick="copyCode('{{ $uniqueId }}', event)" style="margin-right: 10px; padding: 5px 10px; border: 1px solid #007bff; background: #007bff; color: white; border-radius: 4px; cursor: pointer;">
74+
Copy
75+
</button>
76+
<button onclick="closeCodeModal('{{ $uniqueId }}')" style="padding: 5px 10px; border: 1px solid #6c757d; background: #6c757d; color: white; border-radius: 4px; cursor: pointer;">
77+
Close
78+
</button>
79+
</div>
80+
</div>
81+
<div style="padding: 20px;">
82+
<div id="codeContent_{{ $uniqueId }}">{{ highlight $content $language }}</div>
83+
</div>
84+
</div>
85+
</div>
86+
87+
<script>
88+
window.showCodeModal = window.showCodeModal || function(id) {
89+
document.getElementById('codeModal_' + id).style.display = 'block';
90+
document.body.style.overflow = 'hidden';
91+
};
92+
93+
window.closeCodeModal = window.closeCodeModal || function(id) {
94+
document.getElementById('codeModal_' + id).style.display = 'none';
95+
document.body.style.overflow = '';
96+
};
97+
98+
window.copyCode = window.copyCode || function(id, event) {
99+
const codeElement = document.getElementById('codeContent_' + id);
100+
const code = codeElement.textContent;
101+
102+
if (navigator.clipboard) {
103+
navigator.clipboard.writeText(code).then(() => {
104+
const btn = event.target;
105+
const originalText = btn.textContent;
106+
btn.textContent = 'Copied!';
107+
btn.style.background = '#28a745';
108+
btn.style.borderColor = '#28a745';
109+
setTimeout(() => {
110+
btn.textContent = originalText;
111+
btn.style.background = '#007bff';
112+
btn.style.borderColor = '#007bff';
113+
}, 2000);
114+
});
115+
} else {
116+
const textArea = document.createElement('textarea');
117+
textArea.value = code;
118+
document.body.appendChild(textArea);
119+
textArea.select();
120+
document.execCommand('copy');
121+
document.body.removeChild(textArea);
122+
123+
const btn = event.target;
124+
const originalText = btn.textContent;
125+
btn.textContent = 'Copied!';
126+
btn.style.background = '#28a745';
127+
btn.style.borderColor = '#28a745';
128+
setTimeout(() => {
129+
btn.textContent = originalText;
130+
btn.style.background = '#007bff';
131+
btn.style.borderColor = '#007bff';
132+
}, 2000);
133+
}
134+
};
135+
136+
document.addEventListener('click', function(e) {
137+
if (e.target.id && e.target.id.startsWith('codeModal_')) {
138+
const id = e.target.id.replace('codeModal_', '');
139+
closeCodeModal(id);
140+
}
141+
});
142+
143+
document.addEventListener('keydown', function(e) {
144+
if (e.key === 'Escape') {
145+
const openModals = document.querySelectorAll('[id^="codeModal_"]');
146+
openModals.forEach(modal => {
147+
if (modal.style.display === 'block') {
148+
const id = modal.id.replace('codeModal_', '');
149+
closeCodeModal(id);
150+
}
151+
});
152+
}
153+
});
154+
</script>
155+
{{ else }}
156+
<div class="text-end pb-2">
54157
<a href="{{- $webUrl -}}" target="_blank">
55-
<i class="fas fa-external-link-alt pl-2"></i>
56-
<strong>View full example on GitHub</strong>
158+
<i class="fas fa-external-link-alt pl-2"></i>
159+
<strong>View on GitHub</strong>
57160
</a>
58-
</div>
59-
{{ else }}
60-
{{ partial "github-content.html" }}
161+
</div>
61162
{{ end }}
62163

63-
164+
{{ else }}
165+
{{ partial "github-content.html" }}
166+
{{ end }}

0 commit comments

Comments
 (0)