twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-08-17 18:00:29 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
The code is in a bad state, this is just fixing it but not improving the
structure
This commit is contained in:
Félix Malfait 2024-06-18 18:40:19 +02:00 committed by GitHub
parent 6b1548ebbe
commit dbaa787d19
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 66 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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}`}
/>
);

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

@ -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>

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

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

29
packages/twenty-website/src/app/_components/playground/rest-api-wrapper.tsx Normal file
View File

@ -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>
);
};

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

@ -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} />;
};

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

@ -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,
}: {

2
packages/twenty-website/src/app/developers/page.tsx
View File

@ -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);

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

@ -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 (
<div
style={{
height: 'calc(100vh - var(--ifm-navbar-height) - 45px)',
width: '100%',
overflow: 'auto',
}}
>
<API apiDescriptionDocument={JSON.stringify(openApiJson)} router="hash" />
</div>
);
};
if (!isClient) {
return null;
}
const restApi = () => {
const [openApiJson, setOpenApiJson] = useState({});
const children = <RestApiComponent openApiJson={openApiJson} />;
const children = <RestApiWrapper openApiJson={openApiJson} />;
return (
<div style={{ width: '100vw' }}>
@ -47,4 +30,4 @@ const restApi = () => {
);
};
export default restApi;
export default RestApi;

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

@ -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 (
<div
style={{
height: 'calc(100vh - var(--ifm-navbar-height) - 45px)',
overflow: 'auto',
}}
>
<API apiDescriptionDocument={JSON.stringify(openApiJson)} router="hash" />
</div>
);
};
import { RestApiWrapper } from '@/app/_components/playground/rest-api-wrapper';
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

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

@ -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,
}: {

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

@ -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,
}: {

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

@ -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);

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

@ -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,
}: {

2
packages/twenty-website/src/shared-utils/getCardPath.tsx
View File

@ -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')) {

22
yarn.lock
View File

@ -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":
version: 1.0.30001568
resolution: "caniuse-lite@npm:1.0.30001568"
checksum: 13f01e5a2481134bd61cf565ce9fecbd8e107902927a0dcf534230a92191a81f1715792170f5f39719c767c3a96aa6df9917a8d5601f15bbd5e4041a8cfecc99
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
"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.30001636
resolution: "caniuse-lite@npm:1.0.30001636"
checksum: e5f965b4da7bae1531fd9f93477d015729ff9e3fa12670ead39a9e6cdc4c43e62c272d47857c5cc332e7b02d697cb3f2f965a1030870ac7476da60c2fc81ee94
languageName: node
linkType: hard