Skip to content

website: Implement dynamic GitHub star fetching #4326

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
google-oss-prow merged 6 commits into from
Apr 7, 2026
+162 −1
Merged

website: Implement dynamic GitHub star fetching #4326

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dad2a43
Star-count added
Ashish241 Feb 25, 2026
d291ec3
Merge branch 'master' into master
Ashish241 Feb 25, 2026
39bb524
Website: Implement dynamic GitHub star fetching (#3624)
Ashish241 Feb 28, 2026
12270f9
Github_workflow_pr_title
Ashish241 Feb 28, 2026
66e7adc
Fix missing newlines
Ashish241 Mar 27, 2026
258b2e3
website: remove unrelated permissions change from pr_title_check.yaml
Ashish241 Mar 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .github/workflows/pr_title_check.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ on:

jobs:
validate-pr-title:
permissions:
issues: write
Copy link
Copy Markdown
Member

@andreyvelich andreyvelich Mar 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do you need this?

Copy link
Copy Markdown
Contributor Author

@Ashish241 Ashish241 Mar 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Apologies for the confusion. Those lines in pr_title_check.yaml were accidentally included in my commit while resolving a merge/rebase conflict and are not related to my PR. I’ve already removed them in my latest commit. Thanks for catching that!

runs-on: ubuntu-latest
steps:
- name: Check PR Title Format
Expand Down
57 changes: 56 additions & 1 deletion assets/scss/_styles_project.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -607,8 +607,63 @@ nav.foldable-nav {
padding: 4rem 0 4rem 0 !important;
}

#pageContent {
// make card body a flex coloumn so github badge can sit at the bottom
.card-deck .card-body,
.card-columns .card-body {
display: flex;
flex-direction: column;
}

.card-footer-github {
margin-top: auto;
padding-top: 0.75rem;
}

.kf-github-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: rgba(255, 255, 255, 0.55) ;
text-decoration: none ;
transition: all 0.2s ease-in-out;
font-weight: 600;
font-size: 0.95rem;
border-bottom: none ;

i {
transition: inherit;
}

.fa-github {
font-size: 1.2rem;
}

.fa-star {
font-size: 0.85rem;
margin-left: 0.1rem;
}

&:hover {
color: $kf-blue !important;
}
}

.project-github-link {
transition: all 0.2s ease;
display: inline-block;
border-bottom: none ;

&:hover {
transform: scale(1.2);
color: $kf-blue !important;
border-bottom: none;
}
}
}

#overview {
padding: 3rem 0 3rem 0 !important;
padding: 3rem 0 3rem 0;
}

#overview p,
Expand Down
106 changes: 106 additions & 0 deletions content/en/_index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,7 @@ <h3 class="section-head text-center">
<img
src="https://raw.githubusercontent.com/cncf/artwork/3aee90da35b1006585f93d0c66dcef496ec376f8/projects/kubeflow-spark-operator/stacked/png/stacked-color.png"
class="card-img-top"
loading="lazy"
draggable="false"
style="padding: 1rem; height: 250px;"
alt="Spark Operator Logo"
Expand All @@ -148,13 +149,19 @@ <h3 class="section-head text-center">
<p class="card-text">
<a target="_blank" rel="noopener" href="/docs/components/spark-operator/overview/">Kubeflow Spark Operator</a> aims to make specifying and running Spark applications as easy and idiomatic as running other workloads on Kubernetes.
</p>
<div class="card-footer-github"><a href="https://github.com/kubeflow/spark-operator" target="_blank" class="kf-github-btn" title="Github Stars">
<i class="fab fa-github"></i>
<i class="far fa-star"></i>
<span id="star-count-spark-operator">3.1k</span>
</a></div>
</div>
</div>
<div class="card">
<a href="/docs/components/notebooks/overview/" target="_blank" rel="noopener" >
<img
src="https://raw.githubusercontent.com/cncf/artwork/3aee90da35b1006585f93d0c66dcef496ec376f8/projects/kubeflow-notebooks/stacked/color/stacked-color.png"
class="card-img-top"
loading="lazy"
draggable="false"
style="padding: 1rem; height: 250px"
alt="Kubeflow Notebooks Logo"
Expand All @@ -165,13 +172,19 @@ <h3 class="section-head text-center">
<p class="card-text">
<a target="_blank" rel="noopener" href="/docs/components/notebooks/overview/">Kubeflow Notebooks</a> runs interactive development environments for AI, ML, and Data workloads on Kubernetes.
</p>
<div class="card-footer-github"><a href="https://github.com/kubeflow/notebooks" target="_blank" class="kf-github-btn" title="Github Stars">
<i class="fab fa-github"></i>
<i class="far fa-star"></i>
<span id="star-count-notebooks">0.1k</span>
</a></div>
</div>
</div>
<div class="card">
<a href="/docs/components/trainer/overview/" target="_blank" rel="noopener" >
<img
src="https://raw.githubusercontent.com/cncf/artwork/3aee90da35b1006585f93d0c66dcef496ec376f8/projects/kubeflow-trainer/stacked/color/Kubeflow-Trainer-Logo_stacked-color.png"
class="card-img-top"
loading="lazy"
draggable="false"
style="padding: 1rem; height: 250px"
alt="Kubeflow Trainer logo"
Expand All @@ -183,6 +196,11 @@ <h3 class="section-head text-center">
<a href="/docs/components/trainer/overview/" target="_blank" rel="noopener">Kubeflow Trainer</a> is a Kubernetes-native project for LLMs fine-tuning and enabling scalable, distributed training across
a wide range of AI frameworks, including PyTorch, HuggingFace, DeepSpeed, MLX, JAX, XGBoost, and others.
</p>
<div class="card-footer-github"><a href="https://github.com/kubeflow/training-operator" target="_blank" class="kf-github-btn" title="Github Stars">
<i class="fab fa-github"></i>
<i class="far fa-star"></i>
<span id="star-count-training-operator">1.4k</span>
</a></div>
</div>
</div>
<div class="card">
Expand All @@ -200,6 +218,11 @@ <h3 class="section-head text-center">
<p class="card-text">
<a target="_blank" rel="noopener" href="/docs/components/katib/overview/">Kubeflow Katib</a> is a Kubernetes-native project for automated machine learning (AutoML) with support for hyperparameter tuning, early stopping and neural architecture search.
</p>
<div class="card-footer-github"><a href="https://github.com/kubeflow/katib" target="_blank" class="kf-github-btn" title="Github Stars">
<i class="fab fa-github"></i>
<i class="far fa-star"></i>
<span id="star-count-katib">1.4k</span>
</a></div>
</div>
</div>
</div>
Expand All @@ -220,13 +243,19 @@ <h3 class="section-head text-center">
<p class="card-text">
<a href="/docs/components/kserve/introduction/" target="_blank" rel="noopener">KServe</a> is a standardized distributed generative and predictive AI inference platform for scalable, multi-framework deployment on Kubernetes.
</p>
<div class="card-footer-github"><a href="https://github.com/kserve/kserve" target="_blank" class="kf-github-btn" title="Github Stars">
<i class="fab fa-github"></i>
<i class="far fa-star"></i>
<span id="star-count-kserve">2.6k</span>
</a></div>
</div>
</div>
<div class="card">
<a href="/docs/components/model-registry/overview/" target="_blank" rel="noopener" >
<img
src="https://raw.githubusercontent.com/cncf/artwork/3aee90da35b1006585f93d0c66dcef496ec376f8/projects/kubeflow-model-registery/Kubeflow-ModelRegistry-Logo_stacked-color.png"
class="card-img-top"
loading="lazy"
draggable="false"
style="padding: 1rem; height: 250px"
alt="Kubeflow Model Registry logo"
Expand All @@ -238,6 +267,11 @@ <h3 class="section-head text-center">
<a href="/docs/components/model-registry/overview/" target="_blank" rel="noopener">Kubeflow Model Registry</a> is a cloud-native component that provides a single pane of glass for ML model developers to index and manage models, versions, and ML artifacts metadata.
It fills a gap between model experimentation and production activities.
</p>
<div class="card-footer-github"><a href="https://github.com/kubeflow/model-registry" target="_blank" class="kf-github-btn" title="Github Stars">
<i class="fab fa-github"></i>
<i class="far fa-star"></i>
<span id="star-count-model-registry">0.1k</span>
</a></div>
</div>
</div>
<div class="card">
Expand All @@ -255,6 +289,11 @@ <h3 class="section-head text-center">
<p class="card-text">
<a target="_blank" rel="noopener" href="/docs/components/pipelines/overview/">Kubeflow Pipelines</a> (KFP) is a platform for building then deploying portable and scalable machine learning workflows using Kubernetes.
</p>
<div class="card-footer-github"><a href="https://github.com/kubeflow/pipelines" target="_blank" class="kf-github-btn" title="Github Stars">
<i class="fab fa-github"></i>
<i class="far fa-star"></i>
<span id="star-count-pipelines">3.4k</span>
</a></div>
</div>
</div>
<div class="card">
Expand All @@ -272,6 +311,11 @@ <h3 class="section-head text-center">
<p class="card-text">
<a href="/docs/components/central-dash/overview/" target="_blank" rel="noopener">Kubeflow Central Dashboard</a> is our hub which connects the authenticated web interfaces of Kubeflow and other ecosystem components.
</p>
<div class="card-footer-github"><a href="https://github.com/kubeflow/dashboard" target="_blank" class="kf-github-btn" title="Github Stars">
<i class="fab fa-github"></i>
<i class="far fa-star"></i>
<span id="star-count-dashboard">16</span>
</a></div>
</div>
</div>
</div>
Expand Down Expand Up @@ -319,3 +363,65 @@ <h3 class="section-head">
<div class="cncf-title">We are a Cloud Native Computing Foundation project.</div>
</div>
</div>
<script>
/**
* Fetches GitHub star counts for project repositories and updates the UI.
* Uses Session Storage for caching to limit API calls.
*/
async function updateGitHubStars() {
const repos = [
{ id: 'spark-operator', repo: 'kubeflow/spark-operator' },
{ id: 'notebooks', repo: 'kubeflow/notebooks' },
{ id: 'training-operator', repo: 'kubeflow/training-operator' },
{ id: 'katib', repo: 'kubeflow/katib' },
{ id: 'kserve', repo: 'kserve/kserve' },
{ id: 'model-registry', repo: 'kubeflow/model-registry' },
{ id: 'pipelines', repo: 'kubeflow/pipelines' },
{ id: 'dashboard', repo: 'kubeflow/dashboard' }
];

const CACHE_KEY = 'kf_github_stars';
const SESSION_CACHE = JSON.parse(sessionStorage.getItem(CACHE_KEY) || '{}');

// Helper to format star counts (e.g., 1234 -> 1.2k)
const formatStars = (count) => {
if (count >= 1000) {
return (count / 1000).toFixed(1) + 'k';
}
return count.toString();
};

for (const project of repos) {
const starElement = document.getElementById(`star-count-${project.id}`);
if (!starElement) continue;

// Use cached value if available in this session
if (SESSION_CACHE[project.repo]) {
starElement.textContent = formatStars(SESSION_CACHE[project.repo]);
continue;
}

// Fetch from GitHub API
try {
const response = await fetch(`https://api.github.com/repos/${project.repo}`);
if (!response.ok) throw new Error('API request failed');

const data = await response.json();
const stars = data.stargazers_count;

if (typeof stars === 'number') {
starElement.textContent = formatStars(stars);
SESSION_CACHE[project.repo] = stars;
// Update cache after each successful fetch
sessionStorage.setItem(CACHE_KEY, JSON.stringify(SESSION_CACHE));
}
} catch (error) {
console.error(`Error fetching stars for ${project.repo}:`, error);
// Fallback is already set in HTML
}
}
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', updateGitHubStars);
</script>