Skip to content

Commit 505ba86

Browse files
robertgendlerrobertgendler
committed
Moved scripts folder
1 parent 083ffa6 commit 505ba86

File tree

2 files changed

+215
-0
lines changed

2 files changed

+215
-0
lines changed

‎public/scripts/github-buttons.js‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
// GitHub Star Button Script
2+
// ------------------------------------------------------------
3+
// Dynamically inserts a GitHub "Star" button that adapts to light/dark mode
4+
// and updates automatically when the theme changes. Works with Astro/MDX docs.
5+
//
6+
// Usage:
7+
// 1. Add this to your page where you want the button:
8+
//
9+
// <div id="github-button-container"></div>
10+
// <script src="/scripts/github-buttons.js"></script>
11+
//
12+
// 2. The button will automatically update for light/dark mode.
13+
//
14+
// ------------------------------------------------------------
15+
16+
17+
// Returns the GitHub button HTML as a string based on the current theme
18+
function getGitHubButtonHTML() {
19+
const theme = document.documentElement.getAttribute('data-theme');
20+
// Only use "light" or "dark" for GitHub Buttons
21+
const colorScheme = theme === 'dark' ? 'dark' : 'light';
22+
return `<a
23+
class="github-button"
24+
href="https://github.com/usnistgov/macos_security"
25+
data-size="large"
26+
data-show-count="true"
27+
data-color-scheme="${colorScheme}"
28+
aria-label="Star usnistgov/macos_security on GitHub"
29+
>Star</a>`;
30+
}
31+
32+
// Insert or update the GitHub button in the container
33+
function renderDynamicGitHubButton(containerId = 'github-button-container') {
34+
const container = document.getElementById(containerId);
35+
if (!container) return;
36+
// Remove any existing button to avoid duplicates
37+
container.innerHTML = '';
38+
container.innerHTML = getGitHubButtonHTML();
39+
// Always try to render after updating the HTML
40+
if (window.GitHubButtons && typeof window.GitHubButtons.render === 'function') {
41+
setTimeout(() => {
42+
window.GitHubButtons.render();
43+
}, 0);
44+
}
45+
}
46+
47+
// Helper to ensure GitHubButtons.render is called after the library is loaded
48+
function renderGitHubButtonWhenReady(containerId = 'github-button-container') {
49+
renderDynamicGitHubButton(containerId);
50+
// Remove the retry loop, since renderDynamicGitHubButton already calls render if available
51+
}
52+
53+
// Optionally, insert the button into a container and load the library if needed
54+
function insertGitHubButton(containerId = 'github-button-container') {
55+
// Remove any existing GitHub Buttons script to force re-processing
56+
const existingScript = document.querySelector('script[src="https://buttons.github.io/buttons.js"]');
57+
if (existingScript) {
58+
existingScript.remove();
59+
window._githubButtonsLoaded = false;
60+
}
61+
// Only render after the library is loaded
62+
if (!window._githubButtonsLoaded) {
63+
var script = document.createElement('script');
64+
script.async = true;
65+
script.defer = true;
66+
script.src = 'https://buttons.github.io/buttons.js';
67+
script.onload = () => {
68+
window._githubButtonsLoaded = true;
69+
renderDynamicGitHubButton(containerId);
70+
};
71+
document.body.appendChild(script);
72+
} else {
73+
renderDynamicGitHubButton(containerId);
74+
}
75+
}
76+
77+
// Export for manual use
78+
window.getGitHubButtonHTML = getGitHubButtonHTML;
79+
window.insertGitHubButton = insertGitHubButton;
80+
81+
// Listen for theme changes via MutationObserver
82+
const observer = new MutationObserver(() => {
83+
insertGitHubButton(); // Use insertGitHubButton to ensure script is loaded
84+
});
85+
observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
86+
87+
// Still listen for custom themechange event for compatibility
88+
document.addEventListener('themechange', () => {
89+
insertGitHubButton(); // Use insertGitHubButton to ensure script is loaded
90+
});
91+
92+
window.addEventListener('DOMContentLoaded', () => {
93+
insertGitHubButton();
94+
});
95+

‎public/scripts/github-latest-release.js‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
// GitHub Latest Release Info Script
2+
// Usage:
3+
// 1. Add <div id="github-latest-release"></div> where you want the info.
4+
// 2. Add <script src="/scripts/github-latest-release.js"></script> to your page.
5+
6+
const GITHUB_OWNER = 'usnistgov';
7+
const GITHUB_REPO = 'macos_security';
8+
const CONTAINER_ID = 'github-latest-release';
9+
10+
function renderReleaseInfo({ tag_name, name, html_url, published_at, body }) {
11+
const date = published_at
12+
? new Date(published_at).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
13+
: '';
14+
15+
let notes = '';
16+
if (body) {
17+
notes = body.replace(/</g, "&lt;");
18+
notes = notes.replace(
19+
/\*\*Full Changelog\*\*:\s*(https?:\/\/[^\s]+)/g,
20+
(match, url) =>
21+
`<a href="${url}" target="_blank" rel="noopener">Full Changelog</a>`
22+
);
23+
notes = `<div class="github-release-notes" style="margin-top:1em; font-size:0.98em; color:var(--sl-color-text, #444); white-space:pre-line;">${notes}</div>`;
24+
}
25+
return `
26+
<div class="github-release-info">
27+
<strong><a href="${html_url}" target="_blank" rel="noopener">
28+
${name || tag_name}
29+
</a></strong>
30+
<span style="color: #888; font-size: 0.9em; font-style: italic;">(${tag_name})</span>
31+
${date ? `<div style="font-size:0.9em; color:var(--sl-color-text, #666); margin-top:2px;">Released: <strong>${date}</strong></div>` : ''}
32+
${notes}
33+
<div style="margin-top:0.7em;">
34+
<a href="https://github.com/${GITHUB_OWNER}/${GITHUB_REPO}/releases" target="_blank" rel="noopener" style="font-size:0.95em;">
35+
View all releases &rarr;
36+
</a>
37+
</div>
38+
</div>
39+
`;
40+
}
41+
42+
function showReleaseLoading() {
43+
const container = document.getElementById(CONTAINER_ID);
44+
if (container) container.innerHTML = 'Loading latest release...';
45+
}
46+
47+
function showReleaseError() {
48+
const container = document.getElementById(CONTAINER_ID);
49+
if (container) container.innerHTML = 'Could not load release info.';
50+
}
51+
52+
function fetchLatestRelease() {
53+
showReleaseLoading();
54+
fetch(`https://api.github.com/repos/${GITHUB_OWNER}/${GITHUB_REPO}/releases/latest`)
55+
.then(res => {
56+
if (!res.ok) throw new Error('Network response was not ok');
57+
return res.json();
58+
})
59+
.then(release => {
60+
const container = document.getElementById(CONTAINER_ID);
61+
if (container) container.innerHTML = renderReleaseInfo(release);
62+
})
63+
.catch(() => showReleaseError());
64+
}
65+
66+
function injectReleaseBoxStyles() {
67+
if (document.getElementById('github-release-style')) return;
68+
const style = document.createElement('style');
69+
style.id = 'github-release-style';
70+
style.textContent = `
71+
.github-release-info {
72+
border-radius: 12px;
73+
padding: 1.25em 1.5em;
74+
margin: 1.5em 0;
75+
border: 1px solid #cbd3d8ff;
76+
background: var(--sl-color-bg, #fff);
77+
color: var(--sl-color-text, #316431);
78+
box-shadow: 0 2px 8px 0 rgba(60,60,60,0.06);
79+
transition: background 0.2s, color 0.2s, border-color 0.2s;
80+
}
81+
[data-theme="dark"] .github-release-info {
82+
background: var(--sl-color-bg, #161b22);
83+
color: var(--sl-color-text, #6ab549);
84+
border-color: #2d3133ff;
85+
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.10);
86+
}
87+
.github-release-info a {
88+
color: var(--sl-color-accent, #316431);
89+
text-decoration: none;
90+
font-weight: 500;
91+
transition: color 0.2s;
92+
}
93+
[data-theme="dark"] .github-release-info a {
94+
color: var(--sl-color-accent-high, #6ab549);
95+
}
96+
.github-release-info a:hover {
97+
text-decoration: underline;
98+
}
99+
.github-release-info span {
100+
color: #888;
101+
font-size: 0.9em;
102+
}
103+
[data-theme="dark"] .github-release-info span {
104+
color: #aaa;
105+
}
106+
.github-release-info strong {
107+
color: #111;
108+
font-size: 1.08em;
109+
}
110+
[data-theme="dark"] .github-release-info strong {
111+
color: #fff;
112+
}
113+
`;
114+
document.head.appendChild(style);
115+
}
116+
117+
window.addEventListener('DOMContentLoaded', () => {
118+
injectReleaseBoxStyles();
119+
fetchLatestRelease();
120+
});

0 commit comments

Comments
 (0)