feat: spectrocloud branding

Signed-off-by: will <[email protected]>

Author: wcrum

docs/docs/installation/helm.md

@@ -81,7 +81,7 @@ replicaCount: 2
 
 image:
   repository: ghcr.io/wcrum/imageshift
-  tag: v1.0.0
+  tag: <version>  # Replace with desired version from https://github.com/wcrum/imageshift/releases
   pullPolicy: IfNotPresent
 
 controller:

docs/docs/installation/kustomize.md

@@ -140,7 +140,7 @@ resources:
 images:
   - name: controller
     newName: ghcr.io/wcrum/imageshift
-    newTag: v1.0.0
+    newTag: <version>  # Replace with desired version from https://github.com/wcrum/imageshift/releases
 ```
 
 ## Development Installation

docs/docusaurus.config.js

@@ -54,6 +54,10 @@ const config = {
             position: 'left',
             label: 'Documentation',
           },
+          {
+            type: 'custom-versionBadge',
+            position: 'right',
+          },
           {
             href: 'https://github.com/wcrum/imageshift',
             label: 'GitHub',

docs/src/components/VersionBadge.js

@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from 'react';
+
+export default function VersionBadge() {
+  const [version, setVersion] = useState('');
+
+  useEffect(() => {
+    fetch('https://api.github.com/repos/wcrum/imageshift/releases/latest')
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.tag_name) {
+          setVersion(data.tag_name);
+        }
+      })
+      .catch(() => {
+        // Silently fail - badge just won't show
+      });
+  }, []);
+
+  if (!version) {
+    return null;
+  }
+
+  return (
+    <a
+      href="https://github.com/wcrum/imageshift/releases"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="navbar__link version-badge"
+    >
+      {version}
+    </a>
+  );
+}

docs/src/css/custom.css

@@ -103,3 +103,37 @@ table th {
 .homepage-section:nth-child(even) {
   background-color: var(--ifm-background-surface-color);
 }
+
+/* Theme-aware images */
+[data-theme='light'] .logo-dark {
+  display: none;
+}
+
+[data-theme='dark'] .logo-light {
+  display: none;
+}
+
+/* Partner logo styling */
+.partner-logo {
+  max-width: 300px;
+  height: auto;
+  margin: 1rem 0;
+}
+
+/* Navbar version badge */
+.version-badge {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--ifm-navbar-link-color);
+  text-decoration: none;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  background-color: var(--ifm-color-emphasis-200);
+  transition: background-color 0.2s ease;
+}
+
+.version-badge:hover {
+  color: var(--ifm-navbar-link-hover-color);
+  background-color: var(--ifm-color-emphasis-300);
+  text-decoration: none;
+}

docs/src/pages/index.js

@@ -3,6 +3,7 @@ import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import CodeBlock from '@theme/CodeBlock';
+import ThemedImage from '@theme/ThemedImage';
 
 import styles from './index.module.css';
 
@@ -21,8 +22,7 @@ function HeroSection() {
           </Link>
           <Link
             className="button button--secondary button--lg"
-            href="https://github.com/wcrum/imageshift"
-            style={{ marginLeft: '1rem' }}>
+            href="https://github.com/wcrum/imageshift">
             GitHub
           </Link>
         </div>
@@ -111,6 +111,27 @@ function UseCasesSection() {
   );
 }
 
+function PartnerSection() {
+  return (
+    <section className={styles.partner}>
+      <div className="container">
+        <h2 className={styles.sectionTitle}>Proudly Developed At</h2>
+        <div className={styles.partnerLogo}>
+          <Link href="https://www.spectrocloud.com/solutions/government">
+            <ThemedImage
+              alt="Spectro Cloud Government"
+              sources={{
+                light: '/img/Government_SpectroCloud_Horizontal_light-bkgd_RGB.png',
+                dark: '/img/Government_SpectroCloud_Horizontal_dark-bkgd_RGB.png',
+              }}
+            />
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}
+
 const quickStartYaml = `# 1. Label your namespace
 kubectl label namespace default imageshift.dev=enabled
 
@@ -164,6 +185,7 @@ export default function Home() {
       <main>
         <FeatureSection />
         <UseCasesSection />
+        <PartnerSection />
         <QuickStartSection />
       </main>
     </Layout>

docs/src/pages/index.module.css

@@ -47,6 +47,22 @@
   color: var(--ifm-color-primary);
 }
 
+.partner {
+  padding: 4rem 0;
+}
+
+.partnerLogo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 2rem;
+}
+
+.partnerLogo img {
+  max-width: 350px;
+  height: auto;
+}
+
 .quickStart {
   padding: 4rem 0;
 }
@@ -76,4 +92,5 @@
   .buttons {
     flex-direction: column;
   }
+
 }

docs/src/theme/NavbarItem/ComponentTypes.js

@@ -0,0 +1,7 @@
+import ComponentTypes from '@theme-original/NavbarItem/ComponentTypes';
+import VersionBadge from '@site/src/components/VersionBadge';
+
+export default {
+  ...ComponentTypes,
+  'custom-versionBadge': VersionBadge,
+};