Add live GitHub and npm web CTAs

Author: devwebxyn

apps/frontend/.env

@@ -1,2 +1,3 @@
-NEXT_PUBLIC_REPO_URL=
-NEXT_PUBLIC_PROJECT_CHANNEL=public-preview
+NEXT_PUBLIC_REPO_URL=https://github.com/devwebxyn/securemcp-lite
+NEXT_PUBLIC_NPM_URL=https://www.npmjs.com/package/securemcp-lite
+NEXT_PUBLIC_PROJECT_CHANNEL=public-release

apps/frontend/app/globals.css

@@ -149,6 +149,7 @@ pre {
 .header-actions {
   display: flex;
   align-items: center;
+  gap: 0.8rem;
 }
 
 .repo-button {
@@ -192,6 +193,19 @@ pre {
   cursor: not-allowed;
 }
 
+.npm-button {
+  background: linear-gradient(135deg, #cb3837, #7d1717);
+  border-color: rgba(255, 205, 205, 0.22);
+}
+
+.npm-button:hover {
+  border-color: rgba(255, 228, 228, 0.34);
+}
+
+.npm-button-icon {
+  color: #ffe9e9;
+}
+
 .hero {
   padding: 5.5rem 0 3rem;
 }
@@ -297,6 +311,18 @@ pre {
   color: var(--text);
 }
 
+.button-tertiary {
+  background: rgba(12, 20, 34, 0.08);
+  border: 1px solid rgba(12, 20, 34, 0.1);
+  color: var(--text);
+}
+
+.button-npm {
+  background: linear-gradient(135deg, #cb3837, #8f1f1f);
+  color: white;
+  box-shadow: 0 16px 32px rgba(203, 56, 55, 0.22);
+}
+
 .hero-proof {
   display: flex;
   flex-wrap: wrap;
@@ -1137,6 +1163,12 @@ pre {
   box-shadow: 0 16px 32px rgba(15, 141, 103, 0.2);
 }
 
+.footer-button-npm {
+  background: linear-gradient(135deg, #cb3837, #8f1f1f);
+  color: white;
+  box-shadow: 0 16px 32px rgba(203, 56, 55, 0.18);
+}
+
 .footer-button-secondary {
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.1);

apps/frontend/app/page.tsx

@@ -1,6 +1,7 @@
 import { getProjectMeta } from "../lib/project-meta";
 import Link from "next/link";
 
+import { siteConfig } from "../lib/site-config";
 import { docs } from "../lib/site";
 
 const integrationCards = docs.filter((doc) => doc.category === "Integrations").slice(0, 6);
@@ -36,6 +37,16 @@ export default async function HomePage() {
               <Link className="button button-secondary" href="/docs/compatibility-matrix">
                 Check compatibility
               </Link>
+              {siteConfig.repoConfigured ? (
+                <a className="button button-tertiary" href={siteConfig.repoUrl ?? undefined} target="_blank" rel="noreferrer">
+                  Go to Repo
+                </a>
+              ) : null}
+              {siteConfig.npmConfigured ? (
+                <a className="button button-npm" href={siteConfig.npmUrl ?? undefined} target="_blank" rel="noreferrer">
+                  npm Package
+                </a>
+              ) : null}
             </div>
 
             <div className="hero-proof">

apps/frontend/components/footer.tsx

@@ -4,6 +4,7 @@ import { siteConfig } from "../lib/site-config";
 
 export function Footer() {
   const repoConfigured = siteConfig.repoConfigured;
+  const npmConfigured = siteConfig.npmConfigured;
 
   return (
     <footer className="site-footer">
@@ -51,6 +52,24 @@ export function Footer() {
                   {siteConfig.repoFallbackLabel}
                 </span>
               )}
+              {npmConfigured ? (
+                <a
+                  href={siteConfig.npmUrl ?? undefined}
+                  className="footer-button footer-button-npm"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {siteConfig.npmLabel}
+                </a>
+              ) : (
+                <span
+                  className="footer-button footer-button-disabled"
+                  aria-disabled="true"
+                  title="Set NEXT_PUBLIC_NPM_URL to enable this button."
+                >
+                  {siteConfig.npmFallbackLabel}
+                </span>
+              )}
             </div>
           </div>
         </div>
@@ -78,6 +97,7 @@ export function Footer() {
           <div>
             <div className="footer-heading">External References</div>
             <ul className="footer-links">
+              <li><a href={siteConfig.npmUrl ?? "https://www.npmjs.com/package/securemcp-lite"} target="_blank" rel="noreferrer">npm package page</a></li>
               <li><a href="https://modelcontextprotocol.io/specification/" target="_blank" rel="noreferrer">MCP specification</a></li>
               <li><a href="https://docs.anthropic.com/en/docs/claude-code/mcp" target="_blank" rel="noreferrer">Claude Code MCP docs</a></li>
               <li><a href="https://developers.openai.com/learn/docs-mcp" target="_blank" rel="noreferrer">OpenAI MCP docs</a></li>

apps/frontend/components/header.tsx

@@ -5,6 +5,7 @@ import { Logo } from "./logo";
 
 export function Header() {
   const repoConfigured = siteConfig.repoConfigured;
+  const npmConfigured = siteConfig.npmConfigured;
 
   return (
     <header className="site-header">
@@ -42,6 +43,23 @@ export function Header() {
               <span className="repo-button-icon" aria-hidden="true">↗</span>
             </span>
           )}
+
+          {npmConfigured ? (
+            <a
+              className="repo-button npm-button"
+              href={siteConfig.npmUrl ?? undefined}
+              target="_blank"
+              rel="noreferrer"
+            >
+              <span>{siteConfig.npmLabel}</span>
+              <span className="repo-button-icon npm-button-icon" aria-hidden="true">N</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>{siteConfig.npmLabel}</span>
+              <span className="repo-button-icon npm-button-icon" aria-hidden="true">N</span>
+            </span>
+          )}
         </div>
       </div>
     </header>

apps/frontend/lib/site-config.ts

@@ -1,8 +1,13 @@
 const configuredRepoUrl = process.env.NEXT_PUBLIC_REPO_URL?.trim() || null;
+const configuredNpmUrl = process.env.NEXT_PUBLIC_NPM_URL?.trim() || null;
 
 export const siteConfig = {
   repoUrl: configuredRepoUrl,
   repoConfigured: Boolean(configuredRepoUrl),
   repoLabel: "Go to Repo",
   repoFallbackLabel: "Repo URL pending",
+  npmUrl: configuredNpmUrl,
+  npmConfigured: Boolean(configuredNpmUrl),
+  npmLabel: "View on npm",
+  npmFallbackLabel: "npm URL pending",
 };