admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add Algolia Search + other quick improvements to docs (#198)

Browse Source
This commit is contained in:
Félix Malfait
2023-06-05 18:48:12 +02:00
committed by GitHub
parent c70bea9513
commit 3ae6405f4d
11 changed files with 67 additions and 1308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
docs/src/components/HomepageFeatures/index.tsx
View File

@ -1,70 +0,0 @@
import React from 'react';
import clsx from 'clsx';
import styles from './styles.module.css';
type FeatureItem = {
title: string;
Svg: React.ComponentType<React.ComponentProps<'svg'>>;
description: JSX.Element;
};
const FeatureList: FeatureItem[] = [
{
title: 'Easy to Use',
Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
description: (
<>
Docusaurus was designed from the ground up to be easily installed and
used to get your website up and running quickly.
</>
),
},
{
title: 'Focus on What Matters',
Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
description: (
<>
Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
ahead and move your docs into the <code>docs</code> directory.
</>
),
},
{
title: 'Powered by React',
Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
description: (
<>
Extend or customize your website layout by reusing React. Docusaurus can
be extended while reusing the same header and footer.
</>
),
},
];
function Feature({title, Svg, description}: FeatureItem) {
return (
<div className={clsx('col col--4')}>
<div className="text--center">
<Svg className={styles.featureSvg} role="img" />
</div>
<div className="text--center padding-horiz--md">
<h3>{title}</h3>
<p>{description}</p>
</div>
</div>
);
}
export default function HomepageFeatures(): JSX.Element {
return (
<section className={styles.features}>
<div className="container">
<div className="row">
{FeatureList.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</div>
</div>
</section>
);
}

11
docs/src/components/HomepageFeatures/styles.module.css
View File

@ -1,11 +0,0 @@
.features {
display: flex;
align-items: center;
padding: 2rem 0;
width: 100%;
}
.featureSvg {
height: 200px;
width: 200px;
}

15
docs/src/pages/graphql.js → docs/src/pages/graphql.tsx
View File

@ -10,18 +10,25 @@ import 'graphiql/graphiql.css';
// Docusaurus does SSR for custom pages but we need to load GraphiQL in the browser
function GraphiQLComponent() {
if(!window.localStorage.getItem('graphiql:theme') && window.localStorage.getItem('theme') != 'dark') {
window.localStorage.setItem('graphiql:theme', 'light');
}
const fetcher = createGraphiQLFetcher({ url: 'https://api.twenty.com/graphql' });
return <GraphiQL fetcher={fetcher} />;
return (
<div className="fullHeightPlayground">
<GraphiQL fetcher={fetcher} />;
</div>
);
}
export default function graphQL() {
return (
<Layout title="Hello" description="Hello React Page">
<div className="fullHeightPlayground">
<Layout title="GraphQL Playground" description="GraphQL Playground for Twenty">
<BrowserOnly>
{() => <GraphiQLComponent />}
</BrowserOnly>
</div>
</Layout>
);
}