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:
Félix Malfait
2024-06-18 18:40:19 +02:00
committed by GitHub
parent 6b1548ebbe
commit dbaa787d19
15 changed files with 66 additions and 97 deletions

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

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

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;

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

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