website / Fix broken links, slow loading, and prod errors (#5932)

The code is in a bad state, this is just fixing it but not improving the
structure

packages/twenty-website/src/app/_components/docs/AlgoliaDocSearch.tsx

@@ -47,8 +47,8 @@ export const AlgoliaDocSearch = ({ pathname }: AlgoliaDocSearchProps) => {
           </a>
         </section>
       )}
-      appId={process.env.NEXT_PUBLIC_ALGOLIA_APP_ID as string}
-      apiKey={process.env.NEXT_PUBLIC_ALGOLIA_API_KEY as string}
+      appId={process.env.NEXT_PUBLIC_ALGOLIA_APP_ID ?? ''}
+      apiKey={process.env.NEXT_PUBLIC_ALGOLIA_API_KEY ?? ''}
       indexName={`twenty-${indexName}`}
     />
   );

packages/twenty-website/src/app/_components/docs/DocsCard.tsx

@@ -1,12 +1,14 @@
 'use client';
 import styled from '@emotion/styled';
-import { usePathname, useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 
 import { Theme } from '@/app/_components/ui/theme/theme';
 import { DocsArticlesProps } from '@/content/user-guide/constants/getDocsArticles';
 import { getCardPath } from '@/shared-utils/getCardPath';
 
-const StyledContainer = styled.div`
+const StyledContainer = styled(Link)`
+  text-decoration: none;
   color: ${Theme.border.color.plain};
   border: 2px solid ${Theme.border.color.plain};
   border-radius: ${Theme.border.radius.md};
@@ -58,13 +60,12 @@ export default function DocsCard({
   card: DocsArticlesProps;
   isSection?: boolean;
 }) {
-  const router = useRouter();
   const pathname = usePathname();
   const path = getCardPath(card, pathname, isSection);
 
   if (card.title) {
     return (
-      <StyledContainer onClick={() => router.push(path)}>
+      <StyledContainer href={path}>
         <StyledImage src={card.image} alt={card.title} />
         <StyledHeading>{card.title}</StyledHeading>
         <StyledSubHeading>{card.info}</StyledSubHeading>

packages/twenty-website/src/app/_components/docs/DocsContent.tsx

@@ -149,6 +149,7 @@ export default function DocsContent({ item }: { item: FileContent }) {
                 style={{ objectFit: 'cover' }}
                 onLoad={() => setImageLoaded(true)}
                 loaded={imageLoaded.toString()}
+                unoptimized
               />
             )}
           </StyledImageContainer>

packages/twenty-website/src/app/_components/playground/rest-api-wrapper.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect } from 'react';
+// @ts-expect-error Migration loader as text not passing warnings
+import { API } from '@stoplight/elements';
+
+// @ts-expect-error Migration loader as text not passing warnings
+import spotlightTheme from '!css-loader!@stoplight/elements/styles.min.css';
+
+export const RestApiWrapper = ({ openApiJson }: { openApiJson: any }) => {
+  // We load spotlightTheme style using useEffect as it breaks remaining docs style
+  useEffect(() => {
+    const styleElement = document.createElement('style');
+    styleElement.innerHTML = spotlightTheme.toString();
+    document.head.append(styleElement);
+
+    return () => styleElement.remove();
+  }, []);
+
+  return (
+    <div
+      style={{
+        height: 'calc(100vh - var(--ifm-navbar-height) - 45px)',
+        width: '100%',
+        overflow: 'auto',
+      }}
+    >
+      <API apiDescriptionDocument={JSON.stringify(openApiJson)} router="hash" />
+    </div>
+  );
+};

packages/twenty-website/src/app/_components/ui/layout/PostImage.tsx

@@ -1,5 +1,3 @@
-import Image from 'next/image';
-
 export const PostImage = ({
   sources,
   style,
@@ -7,5 +5,5 @@ export const PostImage = ({
   sources: { light: string; dark: string };
   style?: React.CSSProperties;
 }) => {
-  return <Image src={sources.light} style={style} alt={sources.light} />;
+  return <img src={sources.light} style={style} alt={sources.light} />;
 };