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}
+      appId={process.env.NEXT_PUBLIC_ALGOLIA_APP_ID ?? ''}
-      apiKey={process.env.NEXT_PUBLIC_ALGOLIA_API_KEY as string}
+      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} />;
 };

packages/twenty-website/src/app/developers/[slug]/page.tsx

@@ -5,8 +5,6 @@ import DocsContent from '@/app/_components/docs/DocsContent';
 import { fetchArticleFromSlug } from '@/shared-utils/fetchArticleFromSlug';
 import { formatSlug } from '@/shared-utils/formatSlug';
 
-export const dynamic = 'force-dynamic';
-
 export async function generateMetadata({
   params,
 }: {

packages/twenty-website/src/app/developers/page.tsx

@@ -7,8 +7,6 @@ export const metadata = {
   icons: '/images/core/logo.svg',
 };
 
-export const dynamic = 'force-dynamic';
-
 export default async function DocsHome() {
   const filePath = 'src/content/developers/';
   const docsArticleCards = getDocsArticles(filePath);

packages/twenty-website/src/app/developers/rest-api/core/page.tsx

@@ -1,40 +1,23 @@
 'use client';
-import React, { useEffect, useState } from 'react';
+
-// @ts-expect-error Migration loader as text not passing warnings
+import { useEffect, useState } from 'react';
-import { API } from '@stoplight/elements';
 
 import Playground from '@/app/_components/playground/playground';
+import { RestApiWrapper } from '@/app/_components/playground/rest-api-wrapper';
 
-// @ts-expect-error Migration loader as text not passing warnings
+const RestApi = () => {
-import spotlightTheme from '!css-loader!@stoplight/elements/styles.min.css';
+  const [openApiJson, setOpenApiJson] = useState({});
+  const [isClient, setIsClient] = useState(false);
 
-const RestApiComponent = ({ openApiJson }: { openApiJson: any }) => {
-  // We load spotlightTheme style using useEffect as it breaks remaining docs style
   useEffect(() => {
-    const styleElement = document.createElement('style');
+    setIsClient(true);
-    styleElement.innerHTML = spotlightTheme.toString();
-    document.head.append(styleElement);
-
-    return () => styleElement.remove();
   }, []);
 
-  return (
+  if (!isClient) {
-    <div
+    return null;
-      style={{
+  }
-        height: 'calc(100vh - var(--ifm-navbar-height) - 45px)',
-        width: '100%',
-        overflow: 'auto',
-      }}
-    >
-      <API apiDescriptionDocument={JSON.stringify(openApiJson)} router="hash" />
-    </div>
-  );
-};
 
-const restApi = () => {
+  const children = <RestApiWrapper openApiJson={openApiJson} />;
-  const [openApiJson, setOpenApiJson] = useState({});
-
-  const children = <RestApiComponent openApiJson={openApiJson} />;
 
   return (
     <div style={{ width: '100vw' }}>
@@ -47,4 +30,4 @@ const restApi = () => {
   );
 };
 
-export default restApi;
+export default RestApi;

packages/twenty-website/src/app/developers/rest-api/metadata/page.tsx

@@ -1,39 +1,22 @@
 'use client';
 import React, { useEffect, useState } from 'react';
-// @ts-expect-error Migration loader as text not passing warnings
-import { API } from '@stoplight/elements';
 
 import Playground from '@/app/_components/playground/playground';
-
+import { RestApiWrapper } from '@/app/_components/playground/rest-api-wrapper';
-// @ts-expect-error Migration loader as text not passing warnings
-import spotlightTheme from '!css-loader!@stoplight/elements/styles.min.css';
-
-const RestApiComponent = ({ 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)',
-        overflow: 'auto',
-      }}
-    >
-      <API apiDescriptionDocument={JSON.stringify(openApiJson)} router="hash" />
-    </div>
-  );
-};
 
 const restApi = () => {
   const [openApiJson, setOpenApiJson] = useState({});
+  const [isClient, setIsClient] = useState(false);
 
-  const children = <RestApiComponent openApiJson={openApiJson} />;
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  if (!isClient) {
+    return null;
+  }
+
+  const children = <RestApiWrapper openApiJson={openApiJson} />;
 
   return (
     <Playground

packages/twenty-website/src/app/developers/section/[folder]/page.tsx

@@ -6,8 +6,6 @@ import { getDocsArticles } from '@/content/user-guide/constants/getDocsArticles'
 import { fetchArticleFromSlug } from '@/shared-utils/fetchArticleFromSlug';
 import { formatSlug } from '@/shared-utils/formatSlug';
 
-export const dynamic = 'force-dynamic';
-
 export async function generateMetadata({
   params,
 }: {

packages/twenty-website/src/app/user-guide/[slug]/page.tsx

@@ -5,8 +5,6 @@ import DocsContent from '@/app/_components/docs/DocsContent';
 import { fetchArticleFromSlug } from '@/shared-utils/fetchArticleFromSlug';
 import { formatSlug } from '@/shared-utils/formatSlug';
 
-export const dynamic = 'force-dynamic';
-
 export async function generateMetadata({
   params,
 }: {

packages/twenty-website/src/app/user-guide/page.tsx

@@ -8,8 +8,6 @@ export const metadata = {
   icons: '/images/core/logo.svg',
 };
 
-export const dynamic = 'force-dynamic';
-
 export default async function UserGuideHome() {
   const filePath = 'src/content/user-guide/';
   const docsArticleCards = getDocsArticles(filePath);

packages/twenty-website/src/app/user-guide/section/[folder]/[documentation]/page.tsx

@@ -5,8 +5,6 @@ import DocsContent from '@/app/_components/docs/DocsContent';
 import { fetchArticleFromSlug } from '@/shared-utils/fetchArticleFromSlug';
 import { formatSlug } from '@/shared-utils/formatSlug';
 
-export const dynamic = 'force-dynamic';
-
 export async function generateMetadata({
   params,
 }: {

packages/twenty-website/src/shared-utils/getCardPath.tsx

@@ -16,7 +16,7 @@ export const getCardPath = (
   if (isPlayground.includes(card.fileName)) {
     const apiType = card.fileName.includes('rest') ? 'rest-api' : 'graphql';
     const apiName = card.fileName.includes('core') ? 'core' : 'metadata';
-    return `${basePath}/${apiType}/${apiName}`;
+    return `/developers/${apiType}/${apiName}`;
   } else if (card.fileName.includes('storybook')) {
     return 'https://storybook.twenty.com';
   } else if (card.fileName.includes('components')) {

yarn.lock

@@ -22527,24 +22527,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001538, caniuse-lite@npm:^1.0.30001565":
+"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001406, caniuse-lite@npm:^1.0.30001538, caniuse-lite@npm:^1.0.30001565, caniuse-lite@npm:^1.0.30001587":
-  version: 1.0.30001568
+  version: 1.0.30001636
-  resolution: "caniuse-lite@npm:1.0.30001568"
+  resolution: "caniuse-lite@npm:1.0.30001636"
-  checksum: 13f01e5a2481134bd61cf565ce9fecbd8e107902927a0dcf534230a92191a81f1715792170f5f39719c767c3a96aa6df9917a8d5601f15bbd5e4041a8cfecc99
+  checksum: e5f965b4da7bae1531fd9f93477d015729ff9e3fa12670ead39a9e6cdc4c43e62c272d47857c5cc332e7b02d697cb3f2f965a1030870ac7476da60c2fc81ee94
-  languageName: node
-  linkType: hard
-
-"caniuse-lite@npm:^1.0.30001406":
-  version: 1.0.30001571
-  resolution: "caniuse-lite@npm:1.0.30001571"
-  checksum: 632f476e39febbfb5dc91c236981f3d518dc0cf55c42cc2bba431a6b6f4cceae3f9cd74d26312f30e9de65a3cc92ccf80d964ba8de061e25f37b7f0518303dad
-  languageName: node
-  linkType: hard
-
-"caniuse-lite@npm:^1.0.30001587":
-  version: 1.0.30001589
-  resolution: "caniuse-lite@npm:1.0.30001589"
-  checksum: 20debfb949413f603011bc7dacaf050010778bc4f8632c86fafd1bd0c43180c95ae7c31f6c82348f6309e5e221934e327c3607a216e3f09640284acf78cd6d4d
   languageName: node
   linkType: hard