From 44186997bedeafdd1983340bac1e0879cd24086b Mon Sep 17 00:00:00 2001 From: cappybara12 Date: Tue, 5 Aug 2025 18:17:34 +0530 Subject: [PATCH 1/3] star component added on navbar --- docusaurus.config.js | 11 +- src/css/custom.css | 113 ++++++++++++++++ .../NavbarItem/CustomReactNavbarItem.tsx | 9 +- static/github-stars.js | 121 ++++++++++++++++++ ter | 16 +++ 5 files changed, 260 insertions(+), 10 deletions(-) create mode 100644 static/github-stars.js create mode 100644 ter diff --git a/docusaurus.config.js b/docusaurus.config.js index 60cbccea..f654a9df 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -123,6 +123,10 @@ const config = { // async: false, defer: true, // if the script must be executed in order, set async to false }, + { + src: '/github-stars.js', // GitHub stars component script + defer: true, + }, ], themeConfig: @@ -234,12 +238,9 @@ const config = { // position: 'left', // }, { - href: 'https://github.com/datazip-inc/olake', - // label: 'GitHub', + type: 'html', position: 'right', - // position: 'right', - className: 'header-github-link', - + value: '
', }, { label: 'Talk to us', diff --git a/src/css/custom.css b/src/css/custom.css index 03ab63ee..89d12176 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -235,6 +235,119 @@ a[class^='footerLogoLink_'] { opacity: 0.8; } +/* GitHub Stars Component Styles */ +.github-stars-container { + display: flex; + align-items: center; + margin-right: 12px; + height: 100%; +} + +.github-stars-link { + display: flex; + align-items: center; + text-decoration: none; + transition: opacity 0.2s ease; + gap: 8px; +} + +.github-stars-link:hover { + opacity: 0.8; + text-decoration: none; +} + +.github-icon-box { + display: flex; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + background-color: #f6f8fa; + border: 1px solid #d0d7de; + border-radius: 6px; + transition: background-color 0.2s ease; +} + +:root[data-theme='dark'] .github-icon-box { + background-color: #21262d; + border-color: #30363d; +} + +.github-icon-box:hover { + background-color: #f3f4f6; +} + +:root[data-theme='dark'] .github-icon-box:hover { + background-color: #30363d; +} + +.github-icon { + width: 20px; + height: 20px; + background-image: url('/img/logo/github-light.svg'); + background-size: cover; + background-repeat: no-repeat; + background-position: center; +} + +:root[data-theme='dark'] .github-icon { + background-image: url('/img/logo/github-dark.svg'); +} + +.stars-section { + display: flex; + align-items: center; + gap: 4px; +} + +.star-emoji { + font-size: 16px; + line-height: 1; +} + +.stars-count { + color: var(--ifm-color-primary); + font-size: 14px; + font-weight: 600; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif; +} + +/* Mobile responsive */ +@media (max-width: 768px) { + .github-stars-container { + margin-right: 8px; + } + + .github-icon-box { + width: 28px; + height: 28px; + } + + .github-icon { + width: 18px; + height: 18px; + } + + .star-emoji { + font-size: 14px; + } + + .stars-count { + font-size: 12px; + } +} + +/* Navbar integration */ +.navbar__item .github-stars-container { + margin: 0; + height: auto; +} + +.navbar__item .github-stars-link { + height: 32px; + align-self: center; +} + .header-slack-link::before { content: ''; width: 28px; diff --git a/src/theme/NavbarItem/CustomReactNavbarItem.tsx b/src/theme/NavbarItem/CustomReactNavbarItem.tsx index bfbd96c2..486c7bf2 100644 --- a/src/theme/NavbarItem/CustomReactNavbarItem.tsx +++ b/src/theme/NavbarItem/CustomReactNavbarItem.tsx @@ -1,11 +1,10 @@ import React, { type ReactNode } from 'react'; -import CustomSolutionsNavbarItem from '../../components/CustomSolutionsNavbarItem'; type CustomReactNavbarItemProps = { - component: ReactNode; + component: React.ComponentType; }; - -export default function CustomReactNavbarItem(_props: CustomReactNavbarItemProps) { - return ; +export default function CustomReactNavbarItem(props: CustomReactNavbarItemProps) { + const Component = props.component; + return ; } diff --git a/static/github-stars.js b/static/github-stars.js new file mode 100644 index 00000000..9a9439fe --- /dev/null +++ b/static/github-stars.js @@ -0,0 +1,121 @@ +// GitHub Stars Component Script +(function() { + 'use strict'; + + // Wait for DOM to be ready + function waitForElement(selector) { + return new Promise(resolve => { + if (document.querySelector(selector)) { + return resolve(document.querySelector(selector)); + } + + const observer = new MutationObserver(mutations => { + if (document.querySelector(selector)) { + observer.disconnect(); + resolve(document.querySelector(selector)); + } + }); + + observer.observe(document.body, { + childList: true, + subtree: true + }); + }); + } + + // Create GitHub Stars Component + function createGitHubStars() { + const container = document.createElement('div'); + container.className = 'github-stars-container'; + + const link = document.createElement('a'); + link.href = 'https://github.com/datazip-inc/olake'; + link.target = '_blank'; + link.rel = 'noopener noreferrer'; + link.className = 'github-stars-link'; + + const iconBox = document.createElement('div'); + iconBox.className = 'github-icon-box'; + + const icon = document.createElement('div'); + icon.className = 'github-icon'; + + const starsSection = document.createElement('div'); + starsSection.className = 'stars-section'; + + const starEmoji = document.createElement('span'); + starEmoji.className = 'star-emoji'; + starEmoji.textContent = '⭐'; + + const countSpan = document.createElement('span'); + countSpan.className = 'stars-count'; + countSpan.textContent = '...'; + + iconBox.appendChild(icon); + starsSection.appendChild(starEmoji); + starsSection.appendChild(countSpan); + link.appendChild(iconBox); + link.appendChild(starsSection); + container.appendChild(link); + + return { container, countSpan }; + } + + // Fetch GitHub stars + async function fetchGitHubStars() { + try { + const response = await fetch('https://api.github.com/repos/datazip-inc/olake', { + headers: { + 'Accept': 'application/vnd.github.v3+json', + 'User-Agent': 'OLake-Docs' + } + }); + + if (!response.ok) { + if (response.status === 403) { + console.warn('GitHub API rate limited, showing fallback'); + return null; + } + throw new Error(`GitHub API error: ${response.status}`); + } + + const data = await response.json(); + return data.stargazers_count; + } catch (err) { + console.error('Failed to fetch GitHub stars:', err); + return null; + } + } + + // Initialize GitHub Stars + async function initGitHubStars() { + try { + const targetContainer = await waitForElement('#github-stars-container'); + if (!targetContainer) return; + + const { container, countSpan } = createGitHubStars(); + targetContainer.appendChild(container); + + // Fetch and update star count + const starCount = await fetchGitHubStars(); + if (starCount !== null && starCount > 0) { + countSpan.textContent = starCount.toLocaleString(); + } else { + // Hide stars section if no stars or error + const starsSection = container.querySelector('.stars-section'); + if (starsSection) { + starsSection.style.display = 'none'; + } + } + } catch (err) { + console.error('Failed to initialize GitHub stars:', err); + } + } + + // Start the script + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initGitHubStars); + } else { + initGitHubStars(); + } +})(); \ No newline at end of file diff --git a/ter b/ter new file mode 100644 index 00000000..102d3368 --- /dev/null +++ b/ter @@ -0,0 +1,16 @@ + + SSUUMMMMAARRYY OOFF LLEESSSS CCOOMMMMAANNDDSS + + Commands marked with * may be preceded by a number, _N. + Notes in parentheses indicate the behavior if _N is given. + A key preceded by a caret indicates the Ctrl key; thus ^K is ctrl-K. + + h H Display this help. + q :q Q :Q ZZ Exit. + --------------------------------------------------------------------------- + + MMOOVVIINNGG + + e ^E j ^N CR * Forward one line (or _N lines). + y ^Y k ^K ^P * Backward one line (or _N lines). + f ^F ^V SPACE * Forward one window (or _N lines). From ec6bea90f2da9a70c7a310c166cb16c305012521 Mon Sep 17 00:00:00 2001 From: cappybara12 Date: Wed, 6 Aug 2025 15:57:50 +0530 Subject: [PATCH 2/3] github star ui update --- src/css/custom.css | 101 +++++++++++++++++++++++++++-------------- static/github-stars.js | 40 +++++++++------- 2 files changed, 90 insertions(+), 51 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 89d12176..237ae092 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -248,42 +248,39 @@ a[class^='footerLogoLink_'] { align-items: center; text-decoration: none; transition: opacity 0.2s ease; - gap: 8px; -} - -.github-stars-link:hover { - opacity: 0.8; - text-decoration: none; -} - -.github-icon-box { - display: flex; - align-items: center; - justify-content: center; - width: 32px; - height: 32px; background-color: #f6f8fa; border: 1px solid #d0d7de; border-radius: 6px; - transition: background-color 0.2s ease; + overflow: hidden; + height: 32px; } -:root[data-theme='dark'] .github-icon-box { +:root[data-theme='dark'] .github-stars-link { background-color: #21262d; border-color: #30363d; } -.github-icon-box:hover { +.github-stars-link:hover { + opacity: 0.8; + text-decoration: none; background-color: #f3f4f6; } -:root[data-theme='dark'] .github-icon-box:hover { +:root[data-theme='dark'] .github-stars-link:hover { background-color: #30363d; } +.github-stars-left { + display: flex; + align-items: center; + padding: 0 12px; + gap: 8px; + height: 100%; +} + .github-icon { - width: 20px; - height: 20px; + width: 16px; + height: 16px; background-image: url('/img/logo/github-light.svg'); background-size: cover; background-repeat: no-repeat; @@ -294,22 +291,46 @@ a[class^='footerLogoLink_'] { background-image: url('/img/logo/github-dark.svg'); } -.stars-section { - display: flex; - align-items: center; - gap: 4px; +.star-text { + color: #24292f; + font-size: 14px; + font-weight: 600; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif; + white-space: nowrap; +} + +:root[data-theme='dark'] .star-text { + color: #f6f8fa; } -.star-emoji { - font-size: 16px; - line-height: 1; +.github-stars-separator { + width: 1px; + height: 16px; + background-color: #d0d7de; + margin: 0 1px; +} + +:root[data-theme='dark'] .github-stars-separator { + background-color: #30363d; +} + +.github-stars-right { + display: flex; + align-items: center; + padding: 0 12px; + height: 100%; } .stars-count { - color: var(--ifm-color-primary); + color: #24292f; font-size: 14px; font-weight: 600; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif; + white-space: nowrap; +} + +:root[data-theme='dark'] .stars-count { + color: #f6f8fa; } /* Mobile responsive */ @@ -318,18 +339,30 @@ a[class^='footerLogoLink_'] { margin-right: 8px; } - .github-icon-box { - width: 28px; + .github-stars-link { height: 28px; } + .github-stars-left { + padding: 0 8px; + gap: 6px; + } + .github-icon { - width: 18px; - height: 18px; + width: 14px; + height: 14px; + } + + .star-text { + font-size: 12px; + } + + .github-stars-separator { + height: 14px; } - .star-emoji { - font-size: 14px; + .github-stars-right { + padding: 0 8px; } .stars-count { diff --git a/static/github-stars.js b/static/github-stars.js index 9a9439fe..6933cb97 100644 --- a/static/github-stars.js +++ b/static/github-stars.js @@ -34,28 +34,37 @@ link.rel = 'noopener noreferrer'; link.className = 'github-stars-link'; - const iconBox = document.createElement('div'); - iconBox.className = 'github-icon-box'; + // Left section with GitHub icon and "Star" text + const leftSection = document.createElement('div'); + leftSection.className = 'github-stars-left'; const icon = document.createElement('div'); icon.className = 'github-icon'; - const starsSection = document.createElement('div'); - starsSection.className = 'stars-section'; + const starText = document.createElement('span'); + starText.className = 'star-text'; + starText.textContent = 'Star'; - const starEmoji = document.createElement('span'); - starEmoji.className = 'star-emoji'; - starEmoji.textContent = '⭐'; + leftSection.appendChild(icon); + leftSection.appendChild(starText); + + // Separator line + const separator = document.createElement('div'); + separator.className = 'github-stars-separator'; + + // Right section with star count + const rightSection = document.createElement('div'); + rightSection.className = 'github-stars-right'; const countSpan = document.createElement('span'); countSpan.className = 'stars-count'; countSpan.textContent = '...'; - iconBox.appendChild(icon); - starsSection.appendChild(starEmoji); - starsSection.appendChild(countSpan); - link.appendChild(iconBox); - link.appendChild(starsSection); + rightSection.appendChild(countSpan); + + link.appendChild(leftSection); + link.appendChild(separator); + link.appendChild(rightSection); container.appendChild(link); return { container, countSpan }; @@ -101,11 +110,8 @@ if (starCount !== null && starCount > 0) { countSpan.textContent = starCount.toLocaleString(); } else { - // Hide stars section if no stars or error - const starsSection = container.querySelector('.stars-section'); - if (starsSection) { - starsSection.style.display = 'none'; - } + // Hide the entire component if no stars or error + container.style.display = 'none'; } } catch (err) { console.error('Failed to initialize GitHub stars:', err); From ecf665991f9158651a7e52ff4738bbe3640b733e Mon Sep 17 00:00:00 2001 From: cappybara12 Date: Thu, 7 Aug 2025 12:56:17 +0530 Subject: [PATCH 3/3] tailwind css for github star --- docusaurus.config.js | 7 +- src/components/GitHubStars.tsx | 140 +++++++++++++++++ src/css/custom.css | 144 ------------------ .../NavbarItem/CustomReactNavbarItem.tsx | 2 +- src/theme/Root.tsx | 37 +++++ static/github-stars.js | 127 --------------- 6 files changed, 180 insertions(+), 277 deletions(-) create mode 100644 src/components/GitHubStars.tsx create mode 100644 src/theme/Root.tsx delete mode 100644 static/github-stars.js diff --git a/docusaurus.config.js b/docusaurus.config.js index f654a9df..5bf98bb5 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -123,10 +123,7 @@ const config = { // async: false, defer: true, // if the script must be executed in order, set async to false }, - { - src: '/github-stars.js', // GitHub stars component script - defer: true, - }, + ], themeConfig: @@ -240,7 +237,7 @@ const config = { { type: 'html', position: 'right', - value: '
', + value: '
', }, { label: 'Talk to us', diff --git a/src/components/GitHubStars.tsx b/src/components/GitHubStars.tsx new file mode 100644 index 00000000..e9c2e20e --- /dev/null +++ b/src/components/GitHubStars.tsx @@ -0,0 +1,140 @@ +import React, { useState, useEffect } from 'react'; + +interface GitHubStarsProps { + repository?: string; + className?: string; +} + +const GitHubStars: React.FC = ({ + repository = 'datazip-inc/olake', + className = '' +}) => { + const [starCount, setStarCount] = useState(null); + const [isLoading, setIsLoading] = useState(true); + const [isDark, setIsDark] = useState(false); + const [isMobile, setIsMobile] = useState(false); + + useEffect(() => { + // Check for dark theme + const checkTheme = () => { + const isDarkTheme = document.documentElement.getAttribute('data-theme') === 'dark'; + setIsDark(isDarkTheme); + }; + + // Check for mobile screen size + const checkMobile = () => { + setIsMobile(window.innerWidth <= 768); + }; + + checkTheme(); + checkMobile(); + + // Listen for theme changes + const observer = new MutationObserver(checkTheme); + observer.observe(document.documentElement, { + attributes: true, + attributeFilter: ['data-theme'] + }); + + // Listen for screen resize + window.addEventListener('resize', checkMobile); + + return () => { + observer.disconnect(); + window.removeEventListener('resize', checkMobile); + }; + }, []); + + useEffect(() => { + const fetchStars = async () => { + try { + const response = await fetch(`https://api.github.com/repos/${repository}`, { + headers: { + 'Accept': 'application/vnd.github.v3+json', + 'User-Agent': 'OLake-Docs' + } + }); + + if (!response.ok) { + if (response.status === 403) { + console.warn('GitHub API rate limited, hiding component'); + setStarCount(null); + return; + } + throw new Error(`GitHub API error: ${response.status}`); + } + + const data = await response.json(); + setStarCount(data.stargazers_count); + } catch (error) { + console.error('Failed to fetch GitHub stars:', error); + setStarCount(null); + } finally { + setIsLoading(false); + } + }; + + fetchStars(); + }, [repository]); + + // Don't render if loading failed or no stars + if (!isLoading && (starCount === null || starCount === 0)) { + return null; + } + + return ( +
+ + {/* Left section with icon and text */} +
+
+ + Star + +
+ + {/* Separator */} + + ); +}; + +export default GitHubStars; \ No newline at end of file diff --git a/src/css/custom.css b/src/css/custom.css index 237ae092..6e3171b9 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -235,151 +235,7 @@ a[class^='footerLogoLink_'] { opacity: 0.8; } -/* GitHub Stars Component Styles */ -.github-stars-container { - display: flex; - align-items: center; - margin-right: 12px; - height: 100%; -} - -.github-stars-link { - display: flex; - align-items: center; - text-decoration: none; - transition: opacity 0.2s ease; - background-color: #f6f8fa; - border: 1px solid #d0d7de; - border-radius: 6px; - overflow: hidden; - height: 32px; -} - -:root[data-theme='dark'] .github-stars-link { - background-color: #21262d; - border-color: #30363d; -} - -.github-stars-link:hover { - opacity: 0.8; - text-decoration: none; - background-color: #f3f4f6; -} - -:root[data-theme='dark'] .github-stars-link:hover { - background-color: #30363d; -} - -.github-stars-left { - display: flex; - align-items: center; - padding: 0 12px; - gap: 8px; - height: 100%; -} - -.github-icon { - width: 16px; - height: 16px; - background-image: url('/img/logo/github-light.svg'); - background-size: cover; - background-repeat: no-repeat; - background-position: center; -} - -:root[data-theme='dark'] .github-icon { - background-image: url('/img/logo/github-dark.svg'); -} - -.star-text { - color: #24292f; - font-size: 14px; - font-weight: 600; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif; - white-space: nowrap; -} -:root[data-theme='dark'] .star-text { - color: #f6f8fa; -} - -.github-stars-separator { - width: 1px; - height: 16px; - background-color: #d0d7de; - margin: 0 1px; -} - -:root[data-theme='dark'] .github-stars-separator { - background-color: #30363d; -} - -.github-stars-right { - display: flex; - align-items: center; - padding: 0 12px; - height: 100%; -} - -.stars-count { - color: #24292f; - font-size: 14px; - font-weight: 600; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif; - white-space: nowrap; -} - -:root[data-theme='dark'] .stars-count { - color: #f6f8fa; -} - -/* Mobile responsive */ -@media (max-width: 768px) { - .github-stars-container { - margin-right: 8px; - } - - .github-stars-link { - height: 28px; - } - - .github-stars-left { - padding: 0 8px; - gap: 6px; - } - - .github-icon { - width: 14px; - height: 14px; - } - - .star-text { - font-size: 12px; - } - - .github-stars-separator { - height: 14px; - } - - .github-stars-right { - padding: 0 8px; - } - - .stars-count { - font-size: 12px; - } -} - -/* Navbar integration */ -.navbar__item .github-stars-container { - margin: 0; - height: auto; -} - -.navbar__item .github-stars-link { - height: 32px; - align-self: center; -} .header-slack-link::before { content: ''; diff --git a/src/theme/NavbarItem/CustomReactNavbarItem.tsx b/src/theme/NavbarItem/CustomReactNavbarItem.tsx index 486c7bf2..92c69cba 100644 --- a/src/theme/NavbarItem/CustomReactNavbarItem.tsx +++ b/src/theme/NavbarItem/CustomReactNavbarItem.tsx @@ -4,7 +4,7 @@ type CustomReactNavbarItemProps = { component: React.ComponentType; }; -export default function CustomReactNavbarItem(props: CustomReactNavbarItemProps) { +export default function CustomReactNavbarItem(props: CustomReactNavbarItemProps): ReactNode { const Component = props.component; return ; } diff --git a/src/theme/Root.tsx b/src/theme/Root.tsx new file mode 100644 index 00000000..d08666c9 --- /dev/null +++ b/src/theme/Root.tsx @@ -0,0 +1,37 @@ +import React, { useEffect } from 'react'; +import { createRoot } from 'react-dom/client'; +import GitHubStars from '@site/src/components/GitHubStars'; + +// This component wraps the entire app and allows us to run initialization code +export default function Root({ children }: { children: React.ReactNode }) { + useEffect(() => { + // Function to try mounting the GitHub stars component + const tryMount = () => { + const container = document.getElementById('github-stars-react-container'); + if (container && !container.hasChildNodes()) { + const root = createRoot(container); + root.render(); + } + }; + + // Try mounting immediately + tryMount(); + + // Set up an observer to watch for the container to appear + const observer = new MutationObserver(() => { + tryMount(); + }); + + observer.observe(document.body, { + childList: true, + subtree: true + }); + + // Clean up + return () => { + observer.disconnect(); + }; + }, []); + + return <>{children}; +} \ No newline at end of file diff --git a/static/github-stars.js b/static/github-stars.js deleted file mode 100644 index 6933cb97..00000000 --- a/static/github-stars.js +++ /dev/null @@ -1,127 +0,0 @@ -// GitHub Stars Component Script -(function() { - 'use strict'; - - // Wait for DOM to be ready - function waitForElement(selector) { - return new Promise(resolve => { - if (document.querySelector(selector)) { - return resolve(document.querySelector(selector)); - } - - const observer = new MutationObserver(mutations => { - if (document.querySelector(selector)) { - observer.disconnect(); - resolve(document.querySelector(selector)); - } - }); - - observer.observe(document.body, { - childList: true, - subtree: true - }); - }); - } - - // Create GitHub Stars Component - function createGitHubStars() { - const container = document.createElement('div'); - container.className = 'github-stars-container'; - - const link = document.createElement('a'); - link.href = 'https://github.com/datazip-inc/olake'; - link.target = '_blank'; - link.rel = 'noopener noreferrer'; - link.className = 'github-stars-link'; - - // Left section with GitHub icon and "Star" text - const leftSection = document.createElement('div'); - leftSection.className = 'github-stars-left'; - - const icon = document.createElement('div'); - icon.className = 'github-icon'; - - const starText = document.createElement('span'); - starText.className = 'star-text'; - starText.textContent = 'Star'; - - leftSection.appendChild(icon); - leftSection.appendChild(starText); - - // Separator line - const separator = document.createElement('div'); - separator.className = 'github-stars-separator'; - - // Right section with star count - const rightSection = document.createElement('div'); - rightSection.className = 'github-stars-right'; - - const countSpan = document.createElement('span'); - countSpan.className = 'stars-count'; - countSpan.textContent = '...'; - - rightSection.appendChild(countSpan); - - link.appendChild(leftSection); - link.appendChild(separator); - link.appendChild(rightSection); - container.appendChild(link); - - return { container, countSpan }; - } - - // Fetch GitHub stars - async function fetchGitHubStars() { - try { - const response = await fetch('https://api.github.com/repos/datazip-inc/olake', { - headers: { - 'Accept': 'application/vnd.github.v3+json', - 'User-Agent': 'OLake-Docs' - } - }); - - if (!response.ok) { - if (response.status === 403) { - console.warn('GitHub API rate limited, showing fallback'); - return null; - } - throw new Error(`GitHub API error: ${response.status}`); - } - - const data = await response.json(); - return data.stargazers_count; - } catch (err) { - console.error('Failed to fetch GitHub stars:', err); - return null; - } - } - - // Initialize GitHub Stars - async function initGitHubStars() { - try { - const targetContainer = await waitForElement('#github-stars-container'); - if (!targetContainer) return; - - const { container, countSpan } = createGitHubStars(); - targetContainer.appendChild(container); - - // Fetch and update star count - const starCount = await fetchGitHubStars(); - if (starCount !== null && starCount > 0) { - countSpan.textContent = starCount.toLocaleString(); - } else { - // Hide the entire component if no stars or error - container.style.display = 'none'; - } - } catch (err) { - console.error('Failed to initialize GitHub stars:', err); - } - } - - // Start the script - if (document.readyState === 'loading') { - document.addEventListener('DOMContentLoaded', initGitHubStars); - } else { - initGitHubStars(); - } -})(); \ No newline at end of file