fix(nx-dev): fix Open Graph image 404s (#32360)

Open Graph images on nx.dev are returning 404 errors for several pages:
- `/ai-chat` and `/changelog` reference non-existent
`/images/nx-media.jpg`
- `/extending-nx` references non-existent
`/images/open-graph/extending-nx.jpg`
- Pages with anchors have broken og:image URLs

All pages should have working Open Graph images for proper social media
sharing.

Fixes DOC-98

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Claude <noreply@anthropic.com>

Author: jaysoo

nx-dev/feature-doc-viewer/src/lib/doc-viewer.tsx

@@ -24,8 +24,8 @@ export function DocViewer({
   widgetData: { githubStarsCount: number };
 }): JSX.Element {
   const router = useRouter();
-  const [currentPath, setCurrentPath] = useState<string>('');
-  const [basePath, setBasePath] = useState<string>('');
+  const [currentPath, setCurrentPath] = useState<string>(router.asPath);
+  const [basePath, setBasePath] = useState<string>(router.basePath);
 
   useEffect(() => {
     setCurrentPath(router.asPath);
@@ -91,8 +91,10 @@ export function DocViewer({
           images: [
             {
               url: `https://nx.dev/images/open-graph/${currentPath
-                .replace('/', '')
-                .replace(/\//gi, '-')}.${
+                .split('#')[0]
+                .split('?')[0]
+                .replace(/^\//, '')
+                .replace(/\//g, '-')}.${
                 vm.mediaImage ? getExtension(vm.mediaImage) : 'jpg'
               }`,
               width: 1600,

nx-dev/nx-dev/pages/_app.tsx

@@ -38,11 +38,11 @@ export default function CustomApp({
             'An AI-first build platform that connects everything from your editor to CI. Helping you deliver fast, without breaking things.',
           images: [
             {
-              url: 'https://nx.dev/images/nx-media.jpg',
+              url: 'https://nx.dev/socials/nx-media.png',
               width: 800,
               height: 421,
               alt: 'Nx: Smart Repos · Fast Builds',
-              type: 'image/jpeg',
+              type: 'image/png',
             },
           ],
           siteName: 'Nx',

nx-dev/nx-dev/pages/ai-chat/index.tsx

@@ -22,6 +22,22 @@ export default function AiDocs(): JSX.Element {
           maxImagePreview: 'none',
           maxVideoPreview: -1,
         }}
+        openGraph={{
+          url: 'https://nx.dev/ai-chat',
+          title: 'Nx AI Chat',
+          description: 'AI chat powered by Nx docs.',
+          images: [
+            {
+              url: 'https://nx.dev/socials/nx-media.png',
+              width: 800,
+              height: 421,
+              alt: 'Nx: Smart Repos · Fast Builds',
+              type: 'image/png',
+            },
+          ],
+          siteName: 'Nx',
+          type: 'website',
+        }}
       />
       <div
         id="shell"

nx-dev/nx-dev/pages/changelog.tsx

@@ -207,11 +207,11 @@ export default function Changelog(props: ChangeLogProps): JSX.Element {
           description: 'Learn about all the changes',
           images: [
             {
-              url: 'https://nx.dev/images/nx-media.jpg',
+              url: 'https://nx.dev/socials/nx-media.png',
               width: 800,
               height: 421,
               alt: 'Nx: Smart Repos · Fast Builds',
-              type: 'image/jpeg',
+              type: 'image/png',
             },
           ],
           siteName: 'Nx',