mirror of
https://github.com/twentyhq/twenty.git
synced 2024-10-27 03:33:21 +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>
|
</a>
|
||||||
</section>
|
</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}`}
|
indexName={`twenty-${indexName}`}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
@ -1,12 +1,14 @@
|
|||||||
'use client';
|
'use client';
|
||||||
import styled from '@emotion/styled';
|
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 { Theme } from '@/app/_components/ui/theme/theme';
|
||||||
import { DocsArticlesProps } from '@/content/user-guide/constants/getDocsArticles';
|
import { DocsArticlesProps } from '@/content/user-guide/constants/getDocsArticles';
|
||||||
import { getCardPath } from '@/shared-utils/getCardPath';
|
import { getCardPath } from '@/shared-utils/getCardPath';
|
||||||
|
|
||||||
const StyledContainer = styled.div`
|
const StyledContainer = styled(Link)`
|
||||||
|
text-decoration: none;
|
||||||
color: ${Theme.border.color.plain};
|
color: ${Theme.border.color.plain};
|
||||||
border: 2px solid ${Theme.border.color.plain};
|
border: 2px solid ${Theme.border.color.plain};
|
||||||
border-radius: ${Theme.border.radius.md};
|
border-radius: ${Theme.border.radius.md};
|
||||||
@ -58,13 +60,12 @@ export default function DocsCard({
|
|||||||
card: DocsArticlesProps;
|
card: DocsArticlesProps;
|
||||||
isSection?: boolean;
|
isSection?: boolean;
|
||||||
}) {
|
}) {
|
||||||
const router = useRouter();
|
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const path = getCardPath(card, pathname, isSection);
|
const path = getCardPath(card, pathname, isSection);
|
||||||
|
|
||||||
if (card.title) {
|
if (card.title) {
|
||||||
return (
|
return (
|
||||||
<StyledContainer onClick={() => router.push(path)}>
|
<StyledContainer href={path}>
|
||||||
<StyledImage src={card.image} alt={card.title} />
|
<StyledImage src={card.image} alt={card.title} />
|
||||||
<StyledHeading>{card.title}</StyledHeading>
|
<StyledHeading>{card.title}</StyledHeading>
|
||||||
<StyledSubHeading>{card.info}</StyledSubHeading>
|
<StyledSubHeading>{card.info}</StyledSubHeading>
|
||||||
|
@ -149,6 +149,7 @@ export default function DocsContent({ item }: { item: FileContent }) {
|
|||||||
style={{ objectFit: 'cover' }}
|
style={{ objectFit: 'cover' }}
|
||||||
onLoad={() => setImageLoaded(true)}
|
onLoad={() => setImageLoaded(true)}
|
||||||
loaded={imageLoaded.toString()}
|
loaded={imageLoaded.toString()}
|
||||||
|
unoptimized
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</StyledImageContainer>
|
</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 = ({
|
export const PostImage = ({
|
||||||
sources,
|
sources,
|
||||||
style,
|
style,
|
||||||
@ -7,5 +5,5 @@ export const PostImage = ({
|
|||||||
sources: { light: string; dark: string };
|
sources: { light: string; dark: string };
|
||||||
style?: React.CSSProperties;
|
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 { fetchArticleFromSlug } from '@/shared-utils/fetchArticleFromSlug';
|
||||||
import { formatSlug } from '@/shared-utils/formatSlug';
|
import { formatSlug } from '@/shared-utils/formatSlug';
|
||||||
|
|
||||||
export const dynamic = 'force-dynamic';
|
|
||||||
|
|
||||||
export async function generateMetadata({
|
export async function generateMetadata({
|
||||||
params,
|
params,
|
||||||
}: {
|
}: {
|
||||||
|
@ -7,8 +7,6 @@ export const metadata = {
|
|||||||
icons: '/images/core/logo.svg',
|
icons: '/images/core/logo.svg',
|
||||||
};
|
};
|
||||||
|
|
||||||
export const dynamic = 'force-dynamic';
|
|
||||||
|
|
||||||
export default async function DocsHome() {
|
export default async function DocsHome() {
|
||||||
const filePath = 'src/content/developers/';
|
const filePath = 'src/content/developers/';
|
||||||
const docsArticleCards = getDocsArticles(filePath);
|
const docsArticleCards = getDocsArticles(filePath);
|
||||||
|
@ -1,40 +1,23 @@
|
|||||||
'use client';
|
'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 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(() => {
|
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 (
|
return (
|
||||||
<div style={{ width: '100vw' }}>
|
<div style={{ width: '100vw' }}>
|
||||||
@ -47,4 +30,4 @@ const restApi = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default restApi;
|
export default RestApi;
|
||||||
|
@ -1,39 +1,22 @@
|
|||||||
'use client';
|
'use client';
|
||||||
import React, { useEffect, useState } from 'react';
|
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 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 restApi = () => {
|
||||||
const [openApiJson, setOpenApiJson] = useState({});
|
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 (
|
return (
|
||||||
<Playground
|
<Playground
|
||||||
|
@ -6,8 +6,6 @@ import { getDocsArticles } from '@/content/user-guide/constants/getDocsArticles'
|
|||||||
import { fetchArticleFromSlug } from '@/shared-utils/fetchArticleFromSlug';
|
import { fetchArticleFromSlug } from '@/shared-utils/fetchArticleFromSlug';
|
||||||
import { formatSlug } from '@/shared-utils/formatSlug';
|
import { formatSlug } from '@/shared-utils/formatSlug';
|
||||||
|
|
||||||
export const dynamic = 'force-dynamic';
|
|
||||||
|
|
||||||
export async function generateMetadata({
|
export async function generateMetadata({
|
||||||
params,
|
params,
|
||||||
}: {
|
}: {
|
||||||
|
@ -5,8 +5,6 @@ import DocsContent from '@/app/_components/docs/DocsContent';
|
|||||||
import { fetchArticleFromSlug } from '@/shared-utils/fetchArticleFromSlug';
|
import { fetchArticleFromSlug } from '@/shared-utils/fetchArticleFromSlug';
|
||||||
import { formatSlug } from '@/shared-utils/formatSlug';
|
import { formatSlug } from '@/shared-utils/formatSlug';
|
||||||
|
|
||||||
export const dynamic = 'force-dynamic';
|
|
||||||
|
|
||||||
export async function generateMetadata({
|
export async function generateMetadata({
|
||||||
params,
|
params,
|
||||||
}: {
|
}: {
|
||||||
|
@ -8,8 +8,6 @@ export const metadata = {
|
|||||||
icons: '/images/core/logo.svg',
|
icons: '/images/core/logo.svg',
|
||||||
};
|
};
|
||||||
|
|
||||||
export const dynamic = 'force-dynamic';
|
|
||||||
|
|
||||||
export default async function UserGuideHome() {
|
export default async function UserGuideHome() {
|
||||||
const filePath = 'src/content/user-guide/';
|
const filePath = 'src/content/user-guide/';
|
||||||
const docsArticleCards = getDocsArticles(filePath);
|
const docsArticleCards = getDocsArticles(filePath);
|
||||||
|
@ -5,8 +5,6 @@ import DocsContent from '@/app/_components/docs/DocsContent';
|
|||||||
import { fetchArticleFromSlug } from '@/shared-utils/fetchArticleFromSlug';
|
import { fetchArticleFromSlug } from '@/shared-utils/fetchArticleFromSlug';
|
||||||
import { formatSlug } from '@/shared-utils/formatSlug';
|
import { formatSlug } from '@/shared-utils/formatSlug';
|
||||||
|
|
||||||
export const dynamic = 'force-dynamic';
|
|
||||||
|
|
||||||
export async function generateMetadata({
|
export async function generateMetadata({
|
||||||
params,
|
params,
|
||||||
}: {
|
}: {
|
||||||
|
@ -16,7 +16,7 @@ export const getCardPath = (
|
|||||||
if (isPlayground.includes(card.fileName)) {
|
if (isPlayground.includes(card.fileName)) {
|
||||||
const apiType = card.fileName.includes('rest') ? 'rest-api' : 'graphql';
|
const apiType = card.fileName.includes('rest') ? 'rest-api' : 'graphql';
|
||||||
const apiName = card.fileName.includes('core') ? 'core' : 'metadata';
|
const apiName = card.fileName.includes('core') ? 'core' : 'metadata';
|
||||||
return `${basePath}/${apiType}/${apiName}`;
|
return `/developers/${apiType}/${apiName}`;
|
||||||
} else if (card.fileName.includes('storybook')) {
|
} else if (card.fileName.includes('storybook')) {
|
||||||
return 'https://storybook.twenty.com';
|
return 'https://storybook.twenty.com';
|
||||||
} else if (card.fileName.includes('components')) {
|
} else if (card.fileName.includes('components')) {
|
||||||
|
22
yarn.lock
22
yarn.lock
@ -22527,24 +22527,10 @@ __metadata:
|
|||||||
languageName: node
|
languageName: node
|
||||||
linkType: hard
|
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
|
languageName: node
|
||||||
linkType: hard
|
linkType: hard
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user