Skip to content

Add changes for new branding #2478

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
ctauchen wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Add changes for new branding #2478

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f62ef8c
Update Tigera and Calico logos
ctauchen Jan 14, 2026
c801c94
Remove icons from best fit section
ctauchen Jan 22, 2026
95f8793
Remove icons from CalicoProducts
ctauchen Jan 22, 2026
f742ae1
Update icon for Kapa widget
ctauchen Jan 22, 2026
7a10a3e
Update landing header
ctauchen Jan 23, 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
3 changes: 2 additions & 1 deletion __tests__/crawler.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,8 @@ test('Crawl the docs and execute tests', async () => {
'https://istio.io/v1.15/docs/reference/config/security/peer_authentication/',
'https://istio.io/v1.15/docs/setup/install/',
'https://sysctl-explorer.net/net/ipv4/fib_multipath_hash_policy/',
'https://calico-docs.mcp.kapa.ai'
'https://calico-docs.mcp.kapa.ai',
'https://docs.tigera.io/img/calico-logo-2026-badge.png'
Copy link

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This skipList entry uses lowercase calico-logo-2026-badge.png but the actual filename added in this PR is Calico-logo-2026-badge.png (with capital C). If this URL is meant to skip link checking for the new favicon, the case should match the actual filename. Otherwise, the link checker may not properly skip this URL.

Suggested change
'https://docs.tigera.io/img/calico-logo-2026-badge.png'
'https://docs.tigera.io/img/Calico-logo-2026-badge.png'

Copilot uses AI. Check for mistakes.
];

const lc = linkChecker();
Expand Down
12 changes: 6 additions & 6 deletions docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,12 @@ export default async function createAsyncConfig() {
},
},
title: 'Calico Documentation',
tagline: 'Active, zero-trust based security for containers and Kubernetes',
tagline: 'Unified network security and observability for Kubernetes',
url: 'https://docs.tigera.io',
baseUrl: '/',
onBrokenAnchors: 'ignore',
onBrokenLinks: 'throw',
favicon: 'img/favicon.png',
favicon: 'img/calico-logo-2026-badge.png',
Copy link

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The file reference uses lowercase calico-logo-2026-badge.png but the actual filename added in this PR is Calico-logo-2026-badge.png (with capital C). This case mismatch will cause the favicon to fail loading on case-sensitive file systems (like Linux servers). The reference should match the exact case of the filename, or the filename should be renamed to use lowercase to match existing naming conventions in the repository.

Suggested change
favicon: 'img/calico-logo-2026-badge.png',
favicon: 'img/Calico-logo-2026-badge.png',

Copilot uses AI. Check for mistakes.
markdown: {
hooks: {
onBrokenMarkdownLinks: 'throw',
Expand All @@ -51,7 +51,7 @@ export default async function createAsyncConfig() {
'data-website-id': '578b0d26-ff67-42e3-b465-5839865a7471',
'data-project-name': 'Calico',
'data-project-color': '#F89C1D',
'data-project-logo': 'https://www.tigera.io/app/uploads/2021/06/Tigera-orange.png',
'data-project-logo': '/img/tigera-logo-2026.png',
Copy link

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The file reference uses lowercase tigera-logo-2026.png but the actual filename added in this PR is capitalized. While this specific reference might work due to URL encoding or server configuration, it's best practice to match the exact case of the filename. The reference should be updated to match the actual filename case, or filenames should follow consistent lowercase naming conventions seen elsewhere in the repository.

Suggested change
'data-project-logo': '/img/tigera-logo-2026.png',
'data-project-logo': '/img/Tigera-logo-2026.png',

Copilot uses AI. Check for mistakes.
'data-modal-disclaimer':
"The Calico Docs AI answers questions based on what it finds in our product documentation. As with all AI solutions, it's a good idea to verify answers in the source material. ",
//"data-modal-example-questions": "Docs Calico use eBPF?,Get started with egress gateways",
Expand Down Expand Up @@ -95,7 +95,7 @@ export default async function createAsyncConfig() {
themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
{
image: 'img/favicon.png',
image: 'img/calico-logo-2026-badge.png',
Copy link

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The file reference uses lowercase calico-logo-2026-badge.png but the actual filename added in this PR is Calico-logo-2026-badge.png (with capital C). This case mismatch will cause the image to fail loading on case-sensitive file systems. The reference should match the exact case of the filename.

Copilot uses AI. Check for mistakes.
metadata: [
{
name: 'keywords',
Expand All @@ -119,8 +119,8 @@ export default async function createAsyncConfig() {
},
navbar: {
logo: {
src: 'img/tigera-logo-black.png',
srcDark: 'img/tigera-logo-white.png',
src: 'img/tigera-logo-2026-black-text.svg',
Copy link

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The file reference uses lowercase tigera-logo-2026-black-text.svg but the actual filename added in this PR is Tigera-logo-2026-black-text.svg (with capital T). This case mismatch will cause the logo to fail loading on case-sensitive file systems. The reference should match the exact case of the filename.

Suggested change
src: 'img/tigera-logo-2026-black-text.svg',
src: 'img/Tigera-logo-2026-black-text.svg',

Copilot uses AI. Check for mistakes.
srcDark: 'img/tigera-logo-2026-white-text.svg',
Copy link

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The file reference uses lowercase tigera-logo-2026-white-text.svg but the actual filename added in this PR is Tigera-logo-2026-white-text.svg (with capital T). This case mismatch will cause the dark mode logo to fail loading on case-sensitive file systems. The reference should match the exact case of the filename.

Suggested change
srcDark: 'img/tigera-logo-2026-white-text.svg',
srcDark: 'img/Tigera-logo-2026-white-text.svg',

Copilot uses AI. Check for mistakes.
},
items: [
{
Expand Down
9 changes: 0 additions & 9 deletions src/___new___/components/CalicoProductCard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,6 @@ const CalicoProductCard: React.FC<CalicoProductCardProps> = ({
}) => <Card
sx={cardStyles}
>
<Center py={5}>
<Image
src={imageSrc}
alt={alt}
boxSize={imageSize ?? '120px'}
maxHeight='120px'
/>
</Center>

<CardHeader pt={2} pb={0}>
<Heading as="h5" size="md" fontWeight="bold">
{title}
Expand Down
21 changes: 4 additions & 17 deletions src/___new___/components/CalicoProducts/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,24 @@ import { gridStyles } from './styles';
export type CalicoProduct = {
title: string,
description: string,
Copy link

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The CalicoProduct type definition has been updated to remove imageSrc, alt, and imageSize properties. However, the CalicoProductCard component that consumes this type still attempts to destructure these properties in its props. This will cause TypeScript compilation errors. The component file should be updated to remove references to these removed properties.

Suggested change
description: string,
description: string,
imageSrc?: string,
alt?: string,
imageSize?: string,

Copilot uses AI. Check for mistakes.
imageSrc: string,
alt: string,
imageSize?: string;
}

const products: CalicoProduct[] = [
{
title: 'Calico Open Source',
description: 'Open-source networking and security for containers and Kubernetes',
imageSrc: '/img/calico-logo-badge.svg',
alt: 'Calico Open Source icon',
description: 'Open-source networking and security for containers and Kubernetes'
},
{
title: 'Calico Cloud Free Tier',
description: 'Observability & policy management for a single cluster',
imageSrc: '/img/calico-cloud-free-logo-badge.svg',
alt: 'Calico Cloud Free Tier icon',
imageSize: '130px',
description: 'Observability & policy management for a single cluster'
},
{
title: 'Calico Cloud',
description: 'SaaS platform for Kubernetes networking and security',
imageSrc: '/img/calico-cloud-logo-badge.svg',
alt: 'Calico Cloud icon',
imageSize: '130px'
description: 'SaaS platform for Kubernetes networking and security'
},
{
title: 'Calico Enterprise',
description: 'Self-managed platform for Kubernetes networking and security',
imageSrc: '/img/calico-enterprise-logo-badge.svg',
alt: 'Calico Enterprise icon',
description: 'Self-managed platform for Kubernetes networking and security'
},
];

Expand Down
14 changes: 13 additions & 1 deletion src/___new___/components/HomepageHeader/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { Flex, Text, Box, Heading, SystemStyleObject } from '@chakra-ui/react';
import { Image, Flex, Text, Box, Heading, SystemStyleObject } from '@chakra-ui/react';

import {
heroContainerStyles,
Expand All @@ -21,8 +21,20 @@ const HomepageHeader: React.FC<HeroBannerProps> = ({ sx, siteConfig, isDarkMode,
return (
<Flex
sx={{ ...heroContainerStyles, ...sx }}
flexDirection="row"
alignItems="center"
gap={{ base: 4, md: 8 }}
{...rest}
>
<Image
src="/img/Calico-logo-2026-badge.svg"
alt="Calico logo"
boxSize={{ base: "60px", md: "100px", lg: "120px" }}
objectFit="contain"
flexShrink={0}
// -------------------------------
/>

<Flex sx={heroInnerContainerStyles}>
<Flex sx={heroTextContentStyles}>
<Box sx={heroTextInnerContentStyles}>
Expand Down
8 changes: 0 additions & 8 deletions src/___new___/components/ProductComparison/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,14 +51,6 @@ const ProductComparison: React.FC<ProductComparisonProps> = ({ isDarkMode, ...re
{compareInfo.bestFit.map((info, index) => (
<Tr key={index}>
<Td sx={{ textAlign: 'center' }}>
<Box sx={iconContainerStyle}>
<Image
src={info.image}
alt={info.alt}
sx={iconStyle}
loading='lazy'
/>
</Box>
{info.title}
</Td>
<Td>
Expand Down
3 changes: 0 additions & 3 deletions src/___new___/data/compareInfo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,15 +44,13 @@ export default {
title: 'Calico Open Source',
costSupport: ['Free, self-managed'],
target: 'Users',
image: 'img/calico-logo-badge.svg',
alt: 'Calico Open Source logo',
Comment on lines 44 to 47
Copy link

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The image property has been removed from the data but the TypeScript type definition likely still includes this property. If there's a type definition for the bestFit array items, it should be updated to reflect that the image property is no longer required. This ensures type safety and prevents confusion about which properties are expected.

Copilot uses AI. Check for mistakes.

bestFit: [' - Who want best-in-class networking and network policy capabilities.'],
},
{
title: 'Calico Enterprise',
costSupport: ['Paid, self-managed'],
image: '/img/calico-enterprise-logo-badge.svg',
alt: 'Calico Enterprise logo',
Comment on lines 51 to 54
Copy link

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The image property has been removed from the Calico Enterprise data object. Similar to the Calico Open Source entry, if there's a type definition for these data objects, it should be updated to reflect that the image property is no longer required.

Copilot uses AI. Check for mistakes.

target: 'Enterprise teams',
Expand All @@ -67,7 +65,6 @@ export default {
{
title: 'Calico Cloud',
costSupport: ['Pay-as-you-go, SaaS'],
image: '/img/calico-cloud-logo-badge.svg',
alt: 'Calico Cloud logo',
Comment on lines 65 to 68
Copy link

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The image property has been removed from the Calico Cloud data object. Consistent with the other entries, if there's a type definition for these data objects, it should be updated to reflect that the image property is no longer required.

Copilot uses AI. Check for mistakes.

target: 'Small teams',
Expand Down
6 changes: 3 additions & 3 deletions src/___new___/data/selectDocsInfo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,19 @@ export default {
{
title: 'Calico Open Source',
link: '/calico/latest/about/',
image: 'img/calico-logo-badge.svg',
image: 'img/Calico-logo-2026-badge.svg',
Copy link

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The file reference uses Calico-logo-2026-badge.svg (with capital C) which matches the actual filename added in this PR. However, this is inconsistent with the repository's existing naming convention where image files use lowercase names (e.g., calico-logo-badge.svg). Consider renaming the new image files to follow the existing lowercase convention for consistency across the codebase.

Copilot uses AI. Check for mistakes.
alt: 'Calico logo',
},
{
title: 'Calico Enterprise',
link: '/calico-enterprise/latest/about/',
image: '/img/calico-enterprise-logo-badge.svg',
image: '/img/Calico-logo-2026-badge.svg',
Copy link

Copilot AI Jan 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The file reference uses Calico-logo-2026-badge.svg with a leading slash, while line 8 doesn't have a leading slash. This inconsistency could lead to path resolution issues depending on the context. Ensure consistent path formatting across all image references - either always include the leading slash or never include it.

Copilot uses AI. Check for mistakes.
alt: 'Calico Enterprise logo',
},
{
title: 'Calico Cloud',
link: 'calico-cloud/about',
image: '/img/calico-cloud-logo-badge.svg',
image: '/img/Calico-logo-2026-badge.svg',
alt: 'Calico Cloud logo',
},
],
Expand Down
Binary file added static/img/Calico-logo-2026-badge.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions static/img/Calico-logo-2026-badge.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions static/img/Calico-logo-2026-black-text.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions static/img/Tigera-logo-2026-black-text.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading