Skip to content

Commit 8755771

Browse files
harsha509harsha509
committed
feat: add button to show full code example
1 parent 331cb2b commit 8755771

File tree

1 file changed

+126
-29
lines changed

1 file changed

+126
-29
lines changed

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

Lines changed: 126 additions & 29 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,130 @@
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-2">
57+
<button class="btn btn-outline-secondary" onclick="showCodeModal('{{ $uniqueId }}')">
58+
Show full example
59+
</button>
60+
</div>
61+
62+
<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;">
63+
<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);">
64+
<div style="padding: 20px; border-bottom: 1px solid #dee2e6; display: flex; justify-content: space-between; align-items: center;">
65+
<h5 style="margin: 0;">{{ $path }}</h5>
66+
<div>
67+
<button onclick="copyCode('{{ $uniqueId }}')" style="margin-right: 10px; padding: 5px 10px; border: 1px solid #007bff; background: #007bff; color: white; border-radius: 4px; cursor: pointer;">
68+
Copy
69+
</button>
70+
<button onclick="closeCodeModal('{{ $uniqueId }}')" style="padding: 5px 10px; border: 1px solid #6c757d; background: #6c757d; color: white; border-radius: 4px; cursor: pointer;">
71+
Close
72+
</button>
73+
</div>
74+
</div>
75+
<div style="padding: 20px;">
76+
<div id="codeContent_{{ $uniqueId }}">{{ highlight $content $language }}</div>
77+
</div>
78+
</div>
79+
</div>
80+
81+
<script>
82+
window.showCodeModal = window.showCodeModal || function(id) {
83+
document.getElementById('codeModal_' + id).style.display = 'block';
84+
document.body.style.overflow = 'hidden';
85+
};
86+
87+
window.closeCodeModal = window.closeCodeModal || function(id) {
88+
document.getElementById('codeModal_' + id).style.display = 'none';
89+
document.body.style.overflow = '';
90+
};
91+
92+
window.copyCode = window.copyCode || function(id) {
93+
const codeElement = document.getElementById('codeContent_' + id);
94+
const code = codeElement.textContent;
95+
96+
if (navigator.clipboard) {
97+
navigator.clipboard.writeText(code).then(() => {
98+
const btn = event.target;
99+
const originalText = btn.textContent;
100+
btn.textContent = 'Copied!';
101+
btn.style.background = '#28a745';
102+
btn.style.borderColor = '#28a745';
103+
setTimeout(() => {
104+
btn.textContent = originalText;
105+
btn.style.background = '#007bff';
106+
btn.style.borderColor = '#007bff';
107+
}, 2000);
108+
});
109+
} else {
110+
const textArea = document.createElement('textarea');
111+
textArea.value = code;
112+
document.body.appendChild(textArea);
113+
textArea.select();
114+
document.execCommand('copy');
115+
document.body.removeChild(textArea);
116+
117+
const btn = event.target;
118+
const originalText = btn.textContent;
119+
btn.textContent = 'Copied!';
120+
btn.style.background = '#28a745';
121+
btn.style.borderColor = '#28a745';
122+
setTimeout(() => {
123+
btn.textContent = originalText;
124+
btn.style.background = '#007bff';
125+
btn.style.borderColor = '#007bff';
126+
}, 2000);
127+
}
128+
};
129+
130+
document.addEventListener('click', function(e) {
131+
if (e.target.id && e.target.id.startsWith('codeModal_')) {
132+
const id = e.target.id.replace('codeModal_', '');
133+
closeCodeModal(id);
134+
}
135+
});
136+
137+
document.addEventListener('keydown', function(e) {
138+
if (e.key === 'Escape') {
139+
const openModals = document.querySelectorAll('[id^="codeModal_"]');
140+
openModals.forEach(modal => {
141+
if (modal.style.display === 'block') {
142+
const id = modal.id.replace('codeModal_', '');
143+
closeCodeModal(id);
144+
}
145+
});
146+
}
147+
});
148+
</script>
149+
{{ end }}
150+
151+
<div class="text-end pb-2">
54152
<a href="{{- $webUrl -}}" target="_blank">
55-
<i class="fas fa-external-link-alt pl-2"></i>
153+
<i class="fas fa-external-link-alt pl-2"></i>
56154
<strong>View full example on GitHub</strong>
57155
</a>
58-
</div>
156+
</div>
157+
59158
{{ else }}
60-
{{ partial "github-content.html" }}
159+
{{ partial "github-content.html" }}
61160
{{ end }}
62-
63-

0 commit comments

Comments
 (0)