Skip to content

Website: Implement dynamic GitHub star fetching (#3624) #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

Open
Ashish241 wants to merge 4 commits into
base: master
Choose a base branch
from
+168 −5
Open

Website: Implement dynamic GitHub star fetching (#3624) #4326

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 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
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
122 changes: 96 additions & 26 deletions assets/scss/_styles_project.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
padding-left: 0;
padding-right: 0;
}

.td-sidebar {
background-color: $td-sidebar-bg-color;
}
Expand All @@ -62,14 +63,17 @@
background-color: $td-sidebar-bg-color;
height: unset;
}

.td-sidebar,
.td-sidebar-toc {
background-color: unset;
}

.td-main {
padding-left: 0;
padding-right: 0;
}

main {
background-color: $body-bg;
}
Expand Down Expand Up @@ -101,6 +105,7 @@
// - there is a left sidebar for md and above
// - there is a right sidebar for xl and above
margin-left: 0;

@include media-breakpoint-up(xl) {
margin-right: 0;
}
Expand Down Expand Up @@ -247,6 +252,7 @@ footer {
@include media-breakpoint-down(md) {
padding-left: 0.75rem;
padding-right: 0.75rem;

.td-search {
padding-right: 0.25rem;
}
Expand All @@ -255,6 +261,7 @@ footer {
@include media-breakpoint-up(md) {
padding-left: 0;
padding-right: 0;

.td-search {
padding-right: 0.5rem;
}
Expand Down Expand Up @@ -304,8 +311,10 @@ nav.foldable-nav .without-child {

// style the sidebar like a folder tree
nav.foldable-nav {

// apply styles to the main sidebar sections
.ul-1 {

// reduce padding of the sidebar links
.with-child {
padding-left: 1.5rem;
Expand All @@ -324,12 +333,12 @@ nav.foldable-nav {
}

// bold the chain of pages leading to the active page
.with-child.active-path > label a {
.with-child.active-path>label a {
font-weight: 700;
}

// show a border on the left of open sections
.with-child > input:checked ~ ul {
.with-child>input:checked~ul {
border-left: 0.1rem dotted $td-sidebar-left-stroke-color;

// round the bottom left corner
Expand All @@ -342,29 +351,29 @@ nav.foldable-nav {
}

// color the border for the active path
.with-child.active-path > ul {
.with-child.active-path>ul {
border-left: 0.1rem solid $td-sidebar-left-stroke-active-color !important;
}

// make the arrow for the non-active sections gray
.with-child > label:before {
.with-child>label:before {
color: $td-sidebar-closed-color;
}

// make the arrow for open non-active sections gray
.with-child > input:checked ~ label:before {
.with-child>input:checked~label:before {
color: $td-sidebar-closed-color;
}

// make the arrow for open active sections blue
.with-child.active-path > input:checked ~ label:before {
.with-child.active-path>input:checked~label:before {
color: $primary;
}
}
}

// prevent overflow of long names in sidebar
.td-sidebar-nav__section > ul {
.td-sidebar-nav__section>ul {
overflow-wrap: break-word;
}

Expand All @@ -373,11 +382,11 @@ nav.foldable-nav {
// --------------------------------------------------
@media (hover: hover) and (pointer: fine) {
nav.foldable-nav {
.ul-1 .with-child > label:hover:before {
.ul-1 .with-child>label:hover:before {
transition: transform 0.3s;
}

.ul-1 .with-child > input:checked ~ label:hover:before {
.ul-1 .with-child>input:checked~label:hover:before {
transition: transform 0.3s;
}
}
Expand All @@ -402,7 +411,8 @@ nav.foldable-nav {
background-color: rgba(255, 255, 255, 0.3);
align-self: center;
margin: 0 0.5rem;
@include media-breakpoint-down(md){

@include media-breakpoint-down(md) {
rotate: 90deg;
}
}
Expand Down Expand Up @@ -497,6 +507,7 @@ nav.foldable-nav {
// Home page
// --------------------------------------------------
.td-home {

// make sure kubeflow title is white
.display-1 {
color: $white;
Expand Down Expand Up @@ -603,10 +614,59 @@ nav.foldable-nav {
margin: 0 0 1.5em 1.5em;
}

#overview, #pageContent, #cncf, #community, #adopters {
#overview,
#pageContent,
#cncf,
#community,
#adopters {
padding: 4rem 0 4rem 0 !important;
}

#pageContent {
.argo-github-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: #f8f9fa !important;
text-decoration: none !important;
transition: all 0.2s ease-in-out;
font-weight: 600;
font-size: 1.1rem;
border-bottom: none !important;

i {
transition: inherit;
}

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

.fa-star {
font-size: 1.1rem;
margin-left: 0.2rem;
margin-right: -0.2rem;
}

&:hover {
color: #ef7b4d !important;
transform: translateY(-2px);
}
}

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

&:hover {
transform: scale(1.2);
color: #ffffff !important;
border-bottom: none !important;
}
}
}

#overview {
padding: 3rem 0 3rem 0 !important;
}
Expand Down Expand Up @@ -718,26 +778,29 @@ nav.foldable-nav {
margin: 0 1.5em 3em 1.5em;
}

#pageContent .lead > .image {
#pageContent .lead>.image {
padding: 0 1.5em;
max-width: 60%;
margin-bottom: 1.5em;
}

#pageContent .lead > .text p {
#pageContent .lead>.text p {
font-size: 1em;
}

@include media-breakpoint-up(sm) {

#overview,
#community {
font-size: 1.125em;
}
#pageContent .lead > .image {

#pageContent .lead>.image {
max-width: 35%;
margin-bottom: 3em;
}
#pageContent .lead > .text p {

#pageContent .lead>.text p {
font-size: 1em;
}
}
Expand All @@ -756,28 +819,34 @@ nav.foldable-nav {
-ms-flex-align: stretch;
align-items: stretch;
}
#pageContent .lead > * {

#pageContent .lead>* {
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
#pageContent .lead > .image {

#pageContent .lead>.image {
display: block;
margin: 0 auto;
max-width: 100%;
}
#pageContent .lead > .image > img {

#pageContent .lead>.image>img {
max-width: 80%;
margin: 0 auto;
}
#pageContent .lead > .text {

#pageContent .lead>.text {
-ms-flex-preferred-size: 70%;
flex-basis: 70%;
}
#pageContent .lead:nth-child(2n + 0) > .image {

#pageContent .lead:nth-child(2n + 0)>.image {
-ms-flex-order: 2;
order: 2;
}
#pageContent .lead:nth-child(2n + 0) > .text {

#pageContent .lead:nth-child(2n + 0)>.text {
-ms-flex-order: 1;
order: 1;
}
Expand Down Expand Up @@ -835,8 +904,8 @@ nav.foldable-nav {
border-bottom: none !important;
}

.td-content > ul li,
.td-content > ol li.nav-item {
.td-content>ul li,
.td-content>ol li.nav-item {
margin-bottom: 0px;
}

Expand Down Expand Up @@ -879,9 +948,10 @@ nav.foldable-nav {
// code styling
// --------------------------------------------------
.td-content {

// set the background color of inline code
p code,
li > code,
li>code,
table code {
background-color: $code-inline-bg;
}
Expand All @@ -892,7 +962,7 @@ nav.foldable-nav {
}

// ensure links with code in them have the correct color
a > code {
a>code {
color: unset;
}
}
Expand All @@ -902,4 +972,4 @@ nav.foldable-nav {
// --------------------------------------------------
.alert {
background-color: $alert-bg;
}
}
Loading
Loading