Update OG image for docs with new brand guidelines (#936)

Update the OG image with the new brand guidelines
sourcegraph · Jan 29, 2025 · 1082cb9 · 1082cb9
1 parent 1e755c3
commit 1082cb9
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 62 deletions.
diff --git a/public/sourcegraph-og-nw.png b/public/sourcegraph-og-nw.png
diff --git a/src/app/[...slug]/page.tsx b/src/app/[...slug]/page.tsx
@@ -1,29 +1,30 @@
-import { Breadcrumbs } from '@/components/Breadcrumbs';
+import {Breadcrumbs} from '@/components/Breadcrumbs';
 import MdxComponents from '@/components/MdxComponents';
-import { PrevNextLinks } from '@/components/PrevNextLinks';
-import { Prose } from '@/components/Prose';
-import { TableOfContents } from '@/components/Toc';
-import { allPosts } from 'contentlayer/generated';
-import { getMDXComponent } from 'next-contentlayer/hooks';
-import { notFound } from 'next/navigation';
+import {PrevNextLinks} from '@/components/PrevNextLinks';
+import {Prose} from '@/components/Prose';
+import {TableOfContents} from '@/components/Toc';
+import {allPosts} from 'contentlayer/generated';
+import {getMDXComponent} from 'next-contentlayer/hooks';
+import {notFound} from 'next/navigation';
 
 export const maxDuration = 300;
 
 export const generateStaticParams = async () => {
 	return allPosts.map(post => ({
-		params: { slug: post._raw.flattenedPath.split('/') }
+		params: {slug: post._raw.flattenedPath.split('/')}
 	}));
 };
 
-export const generateMetadata = ({ params }: Props) => {
+export const generateMetadata = ({params}: Props) => {
 	const path = params.slug.join('/');
 	const post = allPosts.find(post => post._raw.flattenedPath === path);
 	if (post && post.headings && post.headings.length > 0) {
-
-		return { 
+		return {
 			title: post.headings[0].title,
 			openGraph: {
-				images: [{url: 'https://sourcegraph.com/docs/sourcegraph-docs-c.png'}]
+				images: [
+					{url: 'https://sourcegraph.com/docs/sourcegraph-og-nw.png'}
+				]
 			}
 		};
 	}
@@ -35,7 +36,7 @@ interface Props {
 	};
 }
 
-const PostLayout = ({ params }: Props) => {
+const PostLayout = ({params}: Props) => {
 	const path = params.slug.join('/');
 	const post = allPosts.find(post => post._raw.flattenedPath === path);
 	if (!post) return notFound();

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,15 +1,14 @@
-import { Providers } from '@/app/providers';
-import { Layout } from '@/components/Layout';
-import { GoogleAnalytics } from '@next/third-parties/google';
+import {Providers} from '@/app/providers';
+import {Layout} from '@/components/Layout';
+import {GoogleAnalytics} from '@next/third-parties/google';
 import clsx from 'clsx';
 import config from 'docs.config';
-import { type Metadata } from 'next';
-import { Inter } from 'next/font/google';
+import {type Metadata} from 'next';
+import {Inter} from 'next/font/google';
 import localFont from 'next/font/local';
-import Chatbot from '@/components/ChatBot';
 
-import '@langbase/components/styles'
 import '@/styles/tailwind.css';
+import '@langbase/components/styles';
 
 const inter = Inter({
 	subsets: ['latin'],
@@ -30,60 +29,60 @@ export const metadata: Metadata = {
 		template: '%s - Sourcegraph docs',
 		default: 'Sourcegraph docs'
 	},
-	description: 'Documentation for Sourcegraph, the code intelligence platform.',
+	description:
+		'Documentation for Sourcegraph, the code intelligence platform.',
 	other: {
-		"docsearch:language": "en",
-		"docsearch:version": `v${config.DOCS_LATEST_VERSION}`
+		'docsearch:language': 'en',
+		'docsearch:version': `v${config.DOCS_LATEST_VERSION}`
 	},
 	alternates: {
 		canonical: '/docs'
 	},
 	openGraph: {
-		images: [{ url: 'https://sourcegraph.com/docs/sourcegraph-docs-c.png' }]
+		images: [{url: 'https://sourcegraph.com/docs/sourcegraph-og-nw.png'}]
 	}
 };
 
-
 // PolySans Variable Font
 const polySansVariable = localFont({
-  src: [
-    {
-      path: '../fonts/PolySans-Neutral.woff',
-      style: 'normal',
-    },
-    {
-      path: '../fonts/PolySans-NeutralItalic.woff',
-      style: 'italic',
-    }
-  ],
-  variable: '--font-polysans'
+	src: [
+		{
+			path: '../fonts/PolySans-Neutral.woff',
+			style: 'normal'
+		},
+		{
+			path: '../fonts/PolySans-NeutralItalic.woff',
+			style: 'italic'
+		}
+	],
+	variable: '--font-polysans'
 });
 
 // PolySans Mono Font
 const polySansMono = localFont({
-  src: [
-    {
-      path: '../fonts/PolySans-NeutralMono.woff',
-      style: 'normal',
-    },
-    {
-      path: '../fonts/PolySans-SlimMono.woff',
-      style: 'normal',
-    }
-  ],
-  variable: '--font-polysans-mono'
+	src: [
+		{
+			path: '../fonts/PolySans-NeutralMono.woff',
+			style: 'normal'
+		},
+		{
+			path: '../fonts/PolySans-SlimMono.woff',
+			style: 'normal'
+		}
+	],
+	variable: '--font-polysans-mono'
 });
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
+export default function RootLayout({children}: {children: React.ReactNode}) {
 	return (
 		<html
 			lang="en"
-			style={{ colorScheme: 'dark' }}
+			style={{colorScheme: 'dark'}}
 			className={clsx(
-        'h-full antialiased',
-        polySansVariable.variable,
-        polySansMono.variable
-      )}
+				'h-full antialiased',
+				polySansVariable.variable,
+				polySansMono.variable
+			)}
 			suppressHydrationWarning
 		>
 			<head>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,17 +1,19 @@
 import MdxComponents from '@/components/MdxComponents';
-import { Prose } from '@/components/Prose';
-import { GoogleAnalytics } from '@next/third-parties/google';
-import { allPosts } from 'contentlayer/generated';
-import { getMDXComponent } from 'next-contentlayer/hooks';
-import { notFound } from 'next/navigation';
+import {Prose} from '@/components/Prose';
+import {GoogleAnalytics} from '@next/third-parties/google';
+import {allPosts} from 'contentlayer/generated';
+import {getMDXComponent} from 'next-contentlayer/hooks';
+import {notFound} from 'next/navigation';
 
 export const generateMetadata = () => {
 	return {
 		openGraph: {
-			images: [{url: 'https://sourcegraph.com/docs/sourcegraph-docs-c.png'}]
+			images: [
+				{url: 'https://sourcegraph.com/docs/sourcegraph-og-nw.png'}
+			]
 		}
-	}
-}
+	};
+};
 
 const PostLayout = () => {
 	const post = allPosts.find(post => post._raw.flattenedPath === '');
@@ -29,7 +31,6 @@ const PostLayout = () => {
 			</div>
 			<GoogleAnalytics gaId="GTM-TB4NLS7" />
 		</>
-
 	);
 };