From dbaa787d191f08cd0ff27989e506ee6d636cb9af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Tue, 18 Jun 2024 18:40:19 +0200 Subject: [PATCH] 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 --- .../app/_components/docs/AlgoliaDocSearch.tsx | 4 +- .../src/app/_components/docs/DocsCard.tsx | 9 ++-- .../src/app/_components/docs/DocsContent.tsx | 1 + .../playground/rest-api-wrapper.tsx | 29 +++++++++++++ .../app/_components/ui/layout/PostImage.tsx | 4 +- .../src/app/developers/[slug]/page.tsx | 2 - .../src/app/developers/page.tsx | 2 - .../src/app/developers/rest-api/core/page.tsx | 41 ++++++------------- .../app/developers/rest-api/metadata/page.tsx | 39 +++++------------- .../app/developers/section/[folder]/page.tsx | 2 - .../src/app/user-guide/[slug]/page.tsx | 2 - .../src/app/user-guide/page.tsx | 2 - .../section/[folder]/[documentation]/page.tsx | 2 - .../src/shared-utils/getCardPath.tsx | 2 +- yarn.lock | 22 ++-------- 15 files changed, 66 insertions(+), 97 deletions(-) create mode 100644 packages/twenty-website/src/app/_components/playground/rest-api-wrapper.tsx diff --git a/packages/twenty-website/src/app/_components/docs/AlgoliaDocSearch.tsx b/packages/twenty-website/src/app/_components/docs/AlgoliaDocSearch.tsx index 17e2e1db62..160f4c15c5 100644 --- a/packages/twenty-website/src/app/_components/docs/AlgoliaDocSearch.tsx +++ b/packages/twenty-website/src/app/_components/docs/AlgoliaDocSearch.tsx @@ -47,8 +47,8 @@ export const AlgoliaDocSearch = ({ pathname }: AlgoliaDocSearchProps) => { )} - 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}`} /> ); diff --git a/packages/twenty-website/src/app/_components/docs/DocsCard.tsx b/packages/twenty-website/src/app/_components/docs/DocsCard.tsx index 3c3164e0cf..c5eeff85a2 100644 --- a/packages/twenty-website/src/app/_components/docs/DocsCard.tsx +++ b/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 ( - router.push(path)}> + {card.title} {card.info} diff --git a/packages/twenty-website/src/app/_components/docs/DocsContent.tsx b/packages/twenty-website/src/app/_components/docs/DocsContent.tsx index eb46ee97a4..5d4c6c9260 100644 --- a/packages/twenty-website/src/app/_components/docs/DocsContent.tsx +++ b/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 /> )} diff --git a/packages/twenty-website/src/app/_components/playground/rest-api-wrapper.tsx b/packages/twenty-website/src/app/_components/playground/rest-api-wrapper.tsx new file mode 100644 index 0000000000..cd2da8ea8e --- /dev/null +++ b/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 ( +
+ +
+ ); +}; diff --git a/packages/twenty-website/src/app/_components/ui/layout/PostImage.tsx b/packages/twenty-website/src/app/_components/ui/layout/PostImage.tsx index b5bc150d7c..00e215aa77 100644 --- a/packages/twenty-website/src/app/_components/ui/layout/PostImage.tsx +++ b/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 {sources.light}; + return {sources.light}; }; diff --git a/packages/twenty-website/src/app/developers/[slug]/page.tsx b/packages/twenty-website/src/app/developers/[slug]/page.tsx index 05cc57264a..47efae7158 100644 --- a/packages/twenty-website/src/app/developers/[slug]/page.tsx +++ b/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, }: { diff --git a/packages/twenty-website/src/app/developers/page.tsx b/packages/twenty-website/src/app/developers/page.tsx index eb425f467b..c2de5a6f7a 100644 --- a/packages/twenty-website/src/app/developers/page.tsx +++ b/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); diff --git a/packages/twenty-website/src/app/developers/rest-api/core/page.tsx b/packages/twenty-website/src/app/developers/rest-api/core/page.tsx index ae245a9959..4c211c3ec4 100644 --- a/packages/twenty-website/src/app/developers/rest-api/core/page.tsx +++ b/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 { API } from '@stoplight/elements'; + +import { useEffect, useState } from 'react'; 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 RestApi = () => { + 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'); - styleElement.innerHTML = spotlightTheme.toString(); - document.head.append(styleElement); - - return () => styleElement.remove(); + setIsClient(true); }, []); - return ( -
- -
- ); -}; + if (!isClient) { + return null; + } -const restApi = () => { - const [openApiJson, setOpenApiJson] = useState({}); - - const children = ; + const children = ; return (
@@ -47,4 +30,4 @@ const restApi = () => { ); }; -export default restApi; +export default RestApi; diff --git a/packages/twenty-website/src/app/developers/rest-api/metadata/page.tsx b/packages/twenty-website/src/app/developers/rest-api/metadata/page.tsx index c49726892b..e76cadc93b 100644 --- a/packages/twenty-website/src/app/developers/rest-api/metadata/page.tsx +++ b/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'; - -// @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 ( -
- -
- ); -}; +import { RestApiWrapper } from '@/app/_components/playground/rest-api-wrapper'; const restApi = () => { const [openApiJson, setOpenApiJson] = useState({}); + const [isClient, setIsClient] = useState(false); - const children = ; + useEffect(() => { + setIsClient(true); + }, []); + + if (!isClient) { + return null; + } + + const children = ; return (