Use branded GitHub and npm buttons

Author: devwebxyn

apps/frontend/app/globals.css

@@ -152,6 +152,35 @@ pre {
   gap: 0.8rem;
 }
 
+.repo-button-badge {
+  display: inline-grid;
+  place-items: center;
+  min-width: 34px;
+  height: 34px;
+  padding: 0 0.35rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.repo-button-badge-npm {
+  background: rgba(255, 255, 255, 0.14);
+}
+
+.button-brand-icon {
+  display: block;
+}
+
+.button-brand-icon-github {
+  width: 16px;
+  height: 16px;
+  color: #ffffff;
+}
+
+.button-brand-icon-npm {
+  width: 30px;
+  height: 12px;
+}
+
 .repo-button {
   display: inline-flex;
   align-items: center;
@@ -289,6 +318,7 @@ pre {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: 0.55rem;
   min-height: 48px;
   padding: 0 1.15rem;
   border-radius: 999px;
@@ -323,6 +353,21 @@ pre {
   box-shadow: 0 16px 32px rgba(203, 56, 55, 0.22);
 }
 
+.button-inline-icon {
+  flex: none;
+  display: block;
+}
+
+.button-inline-icon-github {
+  width: 16px;
+  height: 16px;
+}
+
+.button-inline-icon-npm {
+  width: 30px;
+  height: 12px;
+}
+
 .hero-proof {
   display: flex;
   flex-wrap: wrap;
@@ -1151,12 +1196,28 @@ pre {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: 0.6rem;
   min-height: 46px;
   padding: 0 1rem;
   border-radius: 999px;
   font-weight: 800;
 }
 
+.footer-button-icon {
+  flex: none;
+  display: block;
+}
+
+.footer-button-icon-github {
+  width: 16px;
+  height: 16px;
+}
+
+.footer-button-icon-npm {
+  width: 30px;
+  height: 12px;
+}
+
 .footer-button-primary {
   background: linear-gradient(135deg, #0f8d67, #0b6c54);
   color: white;

apps/frontend/app/page.tsx

@@ -1,6 +1,7 @@
 import { getProjectMeta } from "../lib/project-meta";
 import Link from "next/link";
 
+import { GitHubMarkIcon, NpmWordmarkIcon } from "../components/brand-icons";
 import { siteConfig } from "../lib/site-config";
 import { docs } from "../lib/site";
 
@@ -39,11 +40,13 @@ export default async function HomePage() {
               </Link>
               {siteConfig.repoConfigured ? (
                 <a className="button button-tertiary" href={siteConfig.repoUrl ?? undefined} target="_blank" rel="noreferrer">
+                  <GitHubMarkIcon className="button-inline-icon button-inline-icon-github" />
                   Go to Repo
                 </a>
               ) : null}
               {siteConfig.npmConfigured ? (
                 <a className="button button-npm" href={siteConfig.npmUrl ?? undefined} target="_blank" rel="noreferrer">
+                  <NpmWordmarkIcon className="button-inline-icon button-inline-icon-npm" />
                   npm Package
                 </a>
               ) : null}

apps/frontend/components/brand-icons.tsx

@@ -0,0 +1,28 @@
+export function GitHubMarkIcon({ className = "" }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      className={className}
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M12 .296C5.373.296 0 5.67 0 12.295c0 5.303 3.438 9.8 8.205 11.387.6.111.82-.26.82-.578 0-.286-.01-1.044-.016-2.05-3.338.726-4.042-1.61-4.042-1.61-.546-1.386-1.333-1.755-1.333-1.755-1.089-.744.083-.729.083-.729 1.205.085 1.84 1.237 1.84 1.237 1.07 1.833 2.809 1.304 3.495.997.108-.775.42-1.305.763-1.605-2.665-.303-5.467-1.333-5.467-5.93 0-1.31.467-2.381 1.235-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.267 1.984-.4 3.004-.404 1.02.004 2.047.137 3.006.404 2.29-1.552 3.296-1.23 3.296-1.23.655 1.653.244 2.874.12 3.176.77.84 1.233 1.911 1.233 3.22 0 4.61-2.807 5.624-5.48 5.921.431.372.815 1.104.815 2.226 0 1.607-.014 2.904-.014 3.299 0 .321.216.694.825.576C20.565 22.09 24 17.594 24 12.295 24 5.67 18.627.296 12 .296Z" />
+    </svg>
+  );
+}
+
+export function NpmWordmarkIcon({ className = "" }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 64 24"
+      aria-hidden="true"
+      className={className}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="0.75" y="3.25" width="62.5" height="17.5" rx="2.75" fill="#CB3837" stroke="rgba(255,255,255,0.18)" strokeWidth="1.5" />
+      <path d="M8 8H20V16H24V8H32V16H36V12H40V16H44V8H56V12H52V16H48V12H44V16H40V12H36V8H28V16H24V12H20V16H8V8Z" fill="white" />
+    </svg>
+  );
+}

apps/frontend/components/footer.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 
 import { siteConfig } from "../lib/site-config";
+import { GitHubMarkIcon, NpmWordmarkIcon } from "./brand-icons";
 
 export function Footer() {
   const repoConfigured = siteConfig.repoConfigured;
@@ -41,6 +42,7 @@ export function Footer() {
                   target="_blank"
                   rel="noreferrer"
                 >
+                  <GitHubMarkIcon className="footer-button-icon footer-button-icon-github" />
                   {siteConfig.repoLabel}
                 </a>
               ) : (
@@ -59,6 +61,7 @@ export function Footer() {
                   target="_blank"
                   rel="noreferrer"
                 >
+                  <NpmWordmarkIcon className="footer-button-icon footer-button-icon-npm" />
                   {siteConfig.npmLabel}
                 </a>
               ) : (

apps/frontend/components/header.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 
 import { siteConfig } from "../lib/site-config";
+import { GitHubMarkIcon, NpmWordmarkIcon } from "./brand-icons";
 import { Logo } from "./logo";
 
 export function Header() {
@@ -34,11 +35,17 @@ export function Header() {
               target="_blank"
               rel="noreferrer"
             >
+              <span className="repo-button-badge" aria-hidden="true">
+                <GitHubMarkIcon className="button-brand-icon button-brand-icon-github" />
+              </span>
               <span>{siteConfig.repoLabel}</span>
               <span className="repo-button-icon" aria-hidden="true">↗</span>
             </a>
           ) : (
             <span className="repo-button repo-button-disabled" aria-disabled="true" title="Set NEXT_PUBLIC_REPO_URL to enable this button.">
+              <span className="repo-button-badge" aria-hidden="true">
+                <GitHubMarkIcon className="button-brand-icon button-brand-icon-github" />
+              </span>
               <span>{siteConfig.repoLabel}</span>
               <span className="repo-button-icon" aria-hidden="true">↗</span>
             </span>
@@ -51,13 +58,19 @@ export function Header() {
               target="_blank"
               rel="noreferrer"
             >
+              <span className="repo-button-badge repo-button-badge-npm" aria-hidden="true">
+                <NpmWordmarkIcon className="button-brand-icon button-brand-icon-npm" />
+              </span>
               <span>{siteConfig.npmLabel}</span>
-              <span className="repo-button-icon npm-button-icon" aria-hidden="true">N</span>
+              <span className="repo-button-icon npm-button-icon" aria-hidden="true">↗</span>
             </a>
           ) : (
             <span className="repo-button repo-button-disabled npm-button" aria-disabled="true" title="Set NEXT_PUBLIC_NPM_URL to enable this button.">
+              <span className="repo-button-badge repo-button-badge-npm" aria-hidden="true">
+                <NpmWordmarkIcon className="button-brand-icon button-brand-icon-npm" />
+              </span>
               <span>{siteConfig.npmLabel}</span>
-              <span className="repo-button-icon npm-button-icon" aria-hidden="true">N</span>
+              <span className="repo-button-icon npm-button-icon" aria-hidden="true">↗</span>
             </span>
           )}
         </div>