mirror of
https://github.com/twentyhq/twenty.git
synced 2024-09-11 15:35:36 +03:00
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
This commit is contained in:
parent
6b1548ebbe
commit
dbaa787d19
@ -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}`}
|
||||
/>
|
||||
);
|
||||
|
@ -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>
|
||||
|
@ -149,6 +149,7 @@ export default function DocsContent({ item }: { item: FileContent }) {
|
||||
style={{ objectFit: 'cover' }}
|
||||
onLoad={() => setImageLoaded(true)}
|
||||
loaded={imageLoaded.toString()}
|
||||
unoptimized
|
||||
/>
|
||||
)}
|
||||
</StyledImageContainer>
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
@ -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} />;
|
||||
};
|
||||
|
@ -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,
|
||||
}: {
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
|
@ -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
|
||||
|
@ -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,
|
||||
}: {
|
||||
|
@ -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,
|
||||
}: {
|
||||
|
@ -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);
|
||||
|
@ -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,
|
||||
}: {
|
||||
|
@ -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
22
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":
|
||||
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
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user