From b7881487c6ce1180f9fc95e39cd9d6ad999019e6 Mon Sep 17 00:00:00 2001 From: superezz <248160976+superezz@users.noreply.github.com> Date: Sun, 12 Jul 2026 21:24:20 +0530 Subject: [PATCH 1/2] feat: add premium GitHub star CTA component Signed-off-by: superezz <248160976+superezz@users.noreply.github.com> --- .../GitHubStarButton/GitHubStarButton.js | 164 ++++++++++++++++++ src/sections/Meshery/index.js | 35 ++-- 2 files changed, 186 insertions(+), 13 deletions(-) create mode 100644 src/components/GitHubStarButton/GitHubStarButton.js diff --git a/src/components/GitHubStarButton/GitHubStarButton.js b/src/components/GitHubStarButton/GitHubStarButton.js new file mode 100644 index 0000000000000..d9563f9457fd8 --- /dev/null +++ b/src/components/GitHubStarButton/GitHubStarButton.js @@ -0,0 +1,164 @@ +import React, { useState, useEffect } from "react"; +import { FaGithub } from "@react-icons/all-files/fa/FaGithub"; +import { FaStar } from "@react-icons/all-files/fa/FaStar"; +import styled from "styled-components"; + +const StyledButton = styled.a` + box-sizing: border-box; + + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + + min-width: 170px; + padding: 14px 16px; + + border: 0; + border-radius: 5px; + + font-family: inherit; + font-size: 16px; + font-weight: 500; + line-height: 1.2; + + text-decoration: none; + text-transform: capitalize; + + color: ${({ theme }) => theme.white}; + background: ${({ theme }) => theme.secondaryColor}; + + position: relative; + transition: 450ms all; + + &:hover { + color: ${({ theme }) => theme.white}; + background: ${({ theme }) => theme.activeColor}; + box-shadow: 0 2px 10px ${({ theme }) => theme.whiteFourToBlackFour}; + } + + &:active { + transform: scale(0.98); + box-shadow: 0 2px 10px ${({ theme }) => theme.blackFourToWhiteFour}; + } + + &:focus { + outline: none; + } + + &:focus-visible { + outline: 2px solid ${({ theme }) => theme.activeColor}; + outline-offset: 2px; + } + + &:visited { + color: ${({ theme }) => theme.white}; + } + + svg:first-child { + margin-right: 8px; + flex-shrink: 0; + } + + .star-count { + display: inline-flex; + align-items: center; + + margin-left: 8px; + padding: 2px 6px; + + border-radius: 3px; + + background: rgba(255, 255, 255, 0.18); + + font-size: 12px; + font-weight: 600; + line-height: 1; + + svg { + margin-right: 4px; + } + } + + @media (max-width: 768px) { + min-width: 150px; + padding: 12px 14px; + font-size: 15px; + } +`; + +const GitHubStarButton = ({ + repo = "meshery/meshery", + url = "https://github.com/meshery/meshery", + className, + ...props +}) => { + const [stars, setStars] = useState(null); + const [loading, setLoading] = useState(true); + + useEffect(() => { + const cacheKey = `gh_stars_${repo.replace("/", "_")}`; + const cached = localStorage.getItem(cacheKey); + + if (cached) { + try { + const { count, timestamp } = JSON.parse(cached); + if (Date.now() - timestamp < 3600000) { + setStars(count); + setLoading(false); + return; + } + } catch { + localStorage.removeItem(cacheKey); + } + } + + fetch(`https://api.github.com/repos/${repo}`) + .then((res) => { + if (!res.ok) throw new Error("GitHub API error"); + return res.json(); + }) + .then((data) => { + if (data.stargazers_count !== undefined) { + const count = data.stargazers_count; + localStorage.setItem( + cacheKey, + JSON.stringify({ count, timestamp: Date.now() }), + ); + setStars(count); + } + }) + .catch(() => { + // silent fail + }) + .finally(() => setLoading(false)); + }, [repo]); + + const formatCount = (num) => { + if (num >= 1000) return (num / 1000).toFixed(1) + "k"; + return num; + }; + + return ( + + + Star + {!loading && stars !== null && ( + + + {formatCount(stars)} + + )} + {loading && …} + + ); +}; + +export default GitHubStarButton; diff --git a/src/sections/Meshery/index.js b/src/sections/Meshery/index.js index ef159481dc370..7f00d207524c2 100644 --- a/src/sections/Meshery/index.js +++ b/src/sections/Meshery/index.js @@ -4,7 +4,6 @@ import Button from "../../reusecore/Button"; import { FiDownloadCloud } from "@react-icons/all-files/fi/FiDownloadCloud"; import { GiClockwork } from "@react-icons/all-files/gi/GiClockwork"; -import { FaGithub } from "@react-icons/all-files/fa/FaGithub"; import FeaturesTable from "./Features-Col"; import mesheryDemo from "../../../static/video/meshery/dashboard.webm"; @@ -16,6 +15,7 @@ import Features from "./Meshery-features"; import InlineQuotes from "../../components/Inline-quotes"; import Maximiliano from "../../collections/members/maximiliano-churichi/Maximiliano-Churichi.webp"; import Nic from "../../collections/members/nicholas-jackson/nic-jackson.webp"; +import GitHubStarButton from "../../components/GitHubStarButton/GitHubStarButton"; const MesheryPage = () => { return ( @@ -25,32 +25,39 @@ const MesheryPage = () => {

Wrangle your infrastructure

-

collaboratively

+

+ {" "} + collaboratively +

{/* Meshery is the cloud native manager.
*/} - Confidently design, deploy, and operate your infrastructure and workloads with Meshery. + Confidently design, deploy, and operate your infrastructure and + workloads with Meshery.

- - - @@ -65,7 +72,10 @@ const MesheryPage = () => { image={Nic} />
-

Manage your clusters with features you won't find anywhere else.

+

+ {" "} + Manage your clusters with features you won't find anywhere else. +

@@ -79,7 +89,6 @@ const MesheryPage = () => { /> - ); }; From d060563d0017a35a4f6206d701a7bf7ab8b20098 Mon Sep 17 00:00:00 2001 From: superezz <248160976+superezz@users.noreply.github.com> Date: Tue, 14 Jul 2026 05:15:18 +0530 Subject: [PATCH 2/2] Refine GitHub star button styling Signed-off-by: superezz <248160976+superezz@users.noreply.github.com> --- .../GitHubStarButton/GitHubStarButton.js | 124 +++++++++++------- 1 file changed, 77 insertions(+), 47 deletions(-) diff --git a/src/components/GitHubStarButton/GitHubStarButton.js b/src/components/GitHubStarButton/GitHubStarButton.js index d9563f9457fd8..84b58b1c6c5bb 100644 --- a/src/components/GitHubStarButton/GitHubStarButton.js +++ b/src/components/GitHubStarButton/GitHubStarButton.js @@ -8,14 +8,13 @@ const StyledButton = styled.a` cursor: pointer; display: inline-flex; - align-items: center; + align-items: stretch; justify-content: center; min-width: 170px; - padding: 14px 16px; border: 0; - border-radius: 5px; + border-radius: 6px; font-family: inherit; font-size: 16px; @@ -23,67 +22,99 @@ const StyledButton = styled.a` line-height: 1.2; text-decoration: none; - text-transform: capitalize; - - color: ${({ theme }) => theme.white}; - background: ${({ theme }) => theme.secondaryColor}; + text-transform: none; position: relative; - transition: 450ms all; + transition: 250ms ease; - &:hover { - color: ${({ theme }) => theme.white}; - background: ${({ theme }) => theme.activeColor}; - box-shadow: 0 2px 10px ${({ theme }) => theme.whiteFourToBlackFour}; - } + /* --- Core segment: GitHub-style outlined button, not a filled CTA --- */ + .star-action { + display: inline-flex; + align-items: center; + gap: 8px; - &:active { - transform: scale(0.98); - box-shadow: 0 2px 10px ${({ theme }) => theme.blackFourToWhiteFour}; - } + padding: 11px 16px; - &:focus { - outline: none; - } + background: ${({ theme }) => theme.githubButtonBg || "#ffffff"}; + color: ${({ theme }) => theme.githubButtonText || "#24292f"}; + border: 1px solid ${({ theme }) => theme.githubButtonBorder || "#24292f"}; + border-right: none; - &:focus-visible { - outline: 2px solid ${({ theme }) => theme.activeColor}; - outline-offset: 2px; - } - - &:visited { - color: ${({ theme }) => theme.white}; - } + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; - svg:first-child { - margin-right: 8px; - flex-shrink: 0; + svg:first-child { + flex-shrink: 0; + fill: currentColor; + } } + /* --- Count segment: separated, badge-like, GitHub convention --- */ .star-count { display: inline-flex; align-items: center; + justify-content: center; + gap: 4px; - margin-left: 8px; - padding: 2px 6px; + padding: 11px 14px; + min-width: 48px; - border-radius: 3px; + background: ${({ theme }) => theme.githubCountBg || "#f6f8fa"}; + color: ${({ theme }) => theme.githubButtonText || "#24292f"}; + border: 1px solid ${({ theme }) => theme.githubButtonBorder || "#24292f"}; - background: rgba(255, 255, 255, 0.18); + border-top-right-radius: 6px; + border-bottom-right-radius: 6px; - font-size: 12px; + font-size: 14px; font-weight: 600; line-height: 1; svg { - margin-right: 4px; + flex-shrink: 0; + fill: currentColor; + } + } + + &:hover { + .star-action { + background: ${({ theme }) => theme.githubButtonHoverBg || "#f3f4f6"}; + } + .star-count { + background: ${({ theme }) => theme.githubCountHoverBg || "#eaeef2"}; } + // box-shadow: 0 1px 4px rgba(27, 31, 36, 0.15); + transition: + background 0.25s ease, + border-color 0.25s ease, + box-shadow 0.25s ease; + } + + &:active { + transform: scale(0.98); + } + + &:focus { + outline: none; + } + + &:focus-visible { + outline: 2px solid ${({ theme }) => theme.activeColor}; + outline-offset: 2px; + } + + &:visited { + color: ${({ theme }) => theme.githubButtonText || "#24292f"}; } @media (max-width: 768px) { min-width: 150px; - padding: 12px 14px; font-size: 15px; + + .star-action, + .star-count { + padding: 12px 12px; + } } `; @@ -148,15 +179,14 @@ const GitHubStarButton = ({ className={className} {...props} > - - Star - {!loading && stars !== null && ( - - - {formatCount(stars)} - - )} - {loading && …} + + + Star + + + + {loading ? "…" : stars !== null ? formatCount(stars) : "Star"} + ); };