Skip to content

Commit 3d918e6

Browse files
dotansimhadotansimha
committed
fixes
1 parent ccb9cf9 commit 3d918e6

File tree

11 files changed

+272
-40
lines changed

11 files changed

+272
-40
lines changed

‎website/.babelrc.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
module.exports = {
2+
presets: [
3+
[
4+
'next/babel',
5+
{
6+
'preset-react': {
7+
runtime: 'automatic',
8+
importSource: '@emotion/react',
9+
},
10+
},
11+
],
12+
],
13+
plugins: ['@emotion/babel-plugin', 'babel-plugin-macros'],
14+
}

‎website/package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,11 @@
4545
"valtio": "1.0.6",
4646
"zustand": "3.5.2"
4747
},
48+
"babelMacros": {
49+
"twin": {
50+
"preset": "emotion"
51+
}
52+
},
4853
"devDependencies": {
4954
"@types/concurrently": "6.2.0",
5055
"@types/fs-extra": "9.0.11",

‎website/src/components/Markdown.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,25 @@
11
import React from 'react';
2-
import ReactMarkdown, { uriTransformer } from 'react-markdown';
2+
import ReactMarkdown from 'react-markdown';
33
import { components } from '@guild-docs/client';
4+
import { chakra } from '@chakra-ui/system';
45

56
export const Markdown: React.FC<{ children: string }> = ({ children }) => {
67
return (
7-
<ReactMarkdown linkTarget="_blank" components={components}>
8+
<ReactMarkdown
9+
linkTarget="_blank"
10+
components={{
11+
...components,
12+
a: chakra('a', {
13+
baseStyle: {
14+
display: 'inline-block !important',
15+
color: '#2f77c9',
16+
_hover: {
17+
textDecoration: 'underline',
18+
},
19+
},
20+
}),
21+
}}
22+
>
823
{children}
924
</ReactMarkdown>
1025
);

‎website/src/components/RemoteGhMarkdown.tsx‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import ReactMarkdown, { uriTransformer } from 'react-markdown';
33
import { components } from '@guild-docs/client';
4+
import { Code, useColorModeValue } from '@chakra-ui/react';
45

56
export const RemoteGHMarkdown: React.FC<{ children: string; repo?: string; directory?: string }> = ({
67
children,
@@ -9,7 +10,26 @@ export const RemoteGHMarkdown: React.FC<{ children: string; repo?: string; direc
910
}) => {
1011
return (
1112
<ReactMarkdown
12-
components={components}
13+
components={{
14+
...components,
15+
pre: props => <div {...props} />,
16+
code: ({ inline, ...props }) => {
17+
const colorScheme = useColorModeValue('blackAlpha', undefined);
18+
19+
return inline ? (
20+
<Code {...props} margin="1px" colorScheme={colorScheme} fontWeight="semibold" fontSize="0.9em" borderRadius={'sm'} />
21+
) : (
22+
<Code
23+
fontSize="0.9rem"
24+
{...props}
25+
colorScheme={colorScheme}
26+
padding={'20px !important'}
27+
width={'100%'}
28+
borderRadius={'sm'}
29+
/>
30+
);
31+
},
32+
}}
1333
linkTarget="_blank"
1434
transformImageUri={src => {
1535
const initial = uriTransformer(src);

‎website/src/components/packageInstall.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export function PackageInstall({ packageName, ...props }: { packageName: string
8080
return setNPM();
8181
}
8282
}}
83-
{...props}
83+
{...(props as any)}
8484
>
8585
<TabList>
8686
<Tab>yarn</Tab>

‎website/src/lib/plugins.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export type Tags =
1313
| 'schema';
1414

1515
export type RawPlugin = {
16+
identifier: string;
1617
title: string;
1718
npmPackage: string;
1819
tags: Tags[];
@@ -22,144 +23,168 @@ export type RawPlugin = {
2223

2324
export const pluginsArr: RawPlugin[] = [
2425
{
26+
identifier: 'use-sentry',
2527
title: 'useSentry',
2628
npmPackage: '@envelop/sentry',
2729
iconUrl: '/assets/logos/sentry.png',
2830
tags: ['tracing', 'metrics', 'error-handling'],
2931
},
3032
{
33+
identifier: 'use-schema',
3134
title: 'useSchema',
3235
npmPackage: '@envelop/core',
3336
iconUrl: '/logo.png',
3437
tags: ['core'],
3538
},
3639
{
40+
identifier: 'use-error-handler',
3741
title: 'useErrorHandler',
3842
npmPackage: '@envelop/core',
3943
iconUrl: '/logo.png',
4044
tags: ['core', 'error-handling'],
4145
},
4246
{
47+
identifier: 'use-masked-errors',
4348
title: 'useMaskedErrors',
4449
npmPackage: '@envelop/core',
4550
iconUrl: '/logo.png',
4651
tags: ['core', 'error-handling', 'security'],
4752
},
4853
{
54+
identifier: 'use-extend-context',
4955
title: 'useExtendContext',
5056
npmPackage: '@envelop/core',
5157
iconUrl: '/logo.png',
5258
tags: ['core', 'utilities'],
5359
},
5460
{
61+
identifier: 'use-logger',
5562
title: 'useLogger',
5663
npmPackage: '@envelop/core',
5764
iconUrl: '/logo.png',
5865
tags: ['core', 'utilities'],
5966
},
6067
{
68+
identifier: 'use-payload-formatter',
6169
title: 'usePayloadFormatter',
6270
npmPackage: '@envelop/core',
6371
iconUrl: '/logo.png',
6472
tags: ['core', 'utilities'],
6573
},
6674
{
75+
identifier: 'use-timing',
6776
title: 'useTiming',
6877
npmPackage: '@envelop/core',
6978
iconUrl: '/logo.png',
7079
tags: ['core', 'tracing', 'utilities'],
7180
},
7281
{
82+
identifier: 'use-graphql-jit',
7383
title: 'useGraphQLJit',
7484
npmPackage: '@envelop/graphql-jit',
7585
iconUrl: '/assets/logos/graphql.png',
7686
tags: ['performance'],
7787
},
7888
{
89+
identifier: 'use-parser-cache',
7990
title: 'useParserCache',
8091
npmPackage: '@envelop/parser-cache',
8192
iconUrl: '/logo.png',
8293
tags: ['performance', 'caching'],
8394
},
8495
{
96+
identifier: 'use-validation-cache',
8597
title: 'useValidationCache',
8698
npmPackage: '@envelop/validation-cache',
8799
iconUrl: '/logo.png',
88100
tags: ['performance', 'caching'],
89101
},
90102
{
103+
identifier: 'use-depth-limit',
91104
title: 'useDepthLimit',
92105
npmPackage: '@envelop/depth-limit',
93106
iconUrl: '/logo.png',
94107
tags: ['performance', 'security'],
95108
},
96109
{
110+
identifier: 'use-data-loader',
97111
title: 'useDataLoader',
98112
npmPackage: '@envelop/dataloader',
99113
iconUrl: '/assets/logos/graphql.png',
100114
tags: ['performance'],
101115
},
102116
{
117+
identifier: 'use-apollo-tracing',
103118
title: 'useApolloTracing',
104119
npmPackage: '@envelop/apollo-tracing',
105120
iconUrl: '/assets/logos/apollo.png',
106121
tags: ['dev-tools'],
107122
},
108123
{
124+
identifier: 'use-open-telemetry',
109125
title: 'useOpenTelemetry',
110126
npmPackage: '@envelop/opentelemetry',
111127
iconUrl: '/assets/logos/opentelemetry.png',
112128
tags: ['tracing', 'metrics', 'error-handling'],
113129
},
114130
{
131+
identifier: 'use-generic-auth',
115132
title: 'useGenericAuth',
116133
npmPackage: '@envelop/generic-auth',
117134
iconUrl: '/assets/logos/generic_auth.png',
118135
tags: ['security', 'authentication', 'authorization'],
119136
},
120137
{
138+
identifier: 'use-auth0',
121139
title: 'useAuth0',
122140
npmPackage: '@envelop/auth0',
123141
iconUrl: '/assets/logos/auth0.png',
124142
tags: ['security', 'authentication', 'authorization'],
125143
},
126144
{
145+
identifier: 'use-graphql-modules',
127146
title: 'useGraphQLModules',
128147
npmPackage: '@envelop/graphql-modules',
129148
iconUrl: 'https://www.graphql-modules.com/img/just-logo.svg',
130149
tags: ['schema', 'utilities', 'dev-tools'],
131150
},
132151
{
152+
identifier: 'use-rate-limiter',
133153
title: 'useRateLimiter',
134154
npmPackage: '@envelop/graphql-middleware',
135155
iconUrl: '/assets/logos/rate_limiter.png',
136156
tags: ['schema', 'utilities', 'security'],
137157
},
138158
{
159+
identifier: 'use-disable-introspection',
139160
title: 'useDisableIntrospection',
140161
npmPackage: '@envelop/disable-introspection',
141162
iconUrl: '/assets/logos/graphql.png',
142163
tags: ['utilities', 'security'],
143164
},
144165
{
166+
identifier: 'use-filter-allowed-operations',
145167
title: 'useFilterAllowedOperations',
146168
npmPackage: '@envelop/filter-operation-type',
147169
iconUrl: '/assets/logos/graphql.png',
148170
tags: ['utilities', 'security'],
149171
},
150172
{
173+
identifier: 'use-preload-assets',
151174
title: 'usePreloadAssets',
152175
npmPackage: '@envelop/preload-assets',
153176
iconUrl: '/assets/logos/assets.png',
154177
tags: ['utilities'],
155178
},
156179
{
180+
identifier: 'use-persisted-operations',
157181
title: 'usePersistedOperations',
158182
npmPackage: '@envelop/persisted-operations',
159183
iconUrl: '/assets/logos/persisted_operations.png',
160184
tags: ['security', 'performance'],
161185
},
162186
{
187+
identifier: 'use-graphql-hive',
163188
title: 'useHive',
164189
npmPackage: '@graphql-hive/client',
165190
iconUrl: 'https://the-guild.dev/static/shared-logos/products/hive.svg',

‎website/src/pages/_app.tsx‎

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,24 @@ import '../../public/style.css';
44
import '../../public/admonitions.css';
55

66
import { appWithTranslation } from 'next-i18next';
7-
import { chakra, Code, Box, extendTheme, Text, theme as chakraTheme, UnorderedList, useColorModeValue } from '@chakra-ui/react';
7+
import {
8+
chakra,
9+
Code,
10+
extendTheme,
11+
Text,
12+
theme as chakraTheme,
13+
UnorderedList,
14+
useColorModeValue,
15+
Center,
16+
Spinner,
17+
} from '@chakra-ui/react';
818
import { mode } from '@chakra-ui/theme-tools';
919
import { CombinedThemeProvider, DocsPage, ExtendComponents, handlePushRoute } from '@guild-docs/client';
1020
import { Footer, Header, Subheader } from '@theguild/components';
11-
import { CopyToClipboard } from '../components/CopyToClipboard';
1221
import { PackageInstall } from '../components/packageInstall';
1322

1423
import type { AppProps } from 'next/app';
24+
import { useRouter } from 'next/router';
1525

1626
ExtendComponents({
1727
a: chakra('a', {
@@ -22,19 +32,16 @@ ExtendComponents({
2232
},
2333
},
2434
}),
25-
pre: props => <div {...props} />,
26-
code: props => {
27-
return (
28-
<Code
29-
fontSize="0.9rem"
30-
colorScheme={'blackAlpha'}
31-
{...props}
32-
padding={'20px !important'}
33-
width={'100%'}
34-
borderRadius={'sm'}
35-
/>
36-
);
37-
},
35+
pre: props => (
36+
<Code
37+
fontSize="0.9rem"
38+
colorScheme={'blackAlpha'}
39+
{...props}
40+
padding={'20px !important'}
41+
width={'100%'}
42+
borderRadius={'sm'}
43+
/>
44+
),
3845
inlineCode: props => {
3946
const colorScheme = useColorModeValue('blackAlpha', undefined);
4047

@@ -87,7 +94,6 @@ const mdxRoutes = { data: serializedMdx && JSON.parse(serializedMdx) };
8794

8895
function AppContent(appProps: AppProps) {
8996
const { Component, pageProps, router } = appProps;
90-
9197
const isDocs = router.asPath.startsWith('/docs');
9298

9399
return (
@@ -149,6 +155,16 @@ const AppContentWrapper = appWithTranslation(function TranslatedApp(appProps) {
149155
});
150156

151157
export default function App(appProps: AppProps) {
158+
const { isReady } = useRouter();
159+
160+
if (!isReady) {
161+
return (
162+
<Center h="300px">
163+
<Spinner size={'xl'} />
164+
</Center>
165+
);
166+
}
167+
152168
return (
153169
<CombinedThemeProvider theme={theme} accentColor={accentColor}>
154170
<AppContentWrapper {...appProps} />

‎website/src/pages/api/plugins.ts‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,22 @@ async function getPackageStats(name: string): Promise<PackageInfo | null> {
1919
}
2020

2121
async function plugins(req: NextApiRequest, res: NextApiResponse) {
22+
const idSpecific = req.query.id as string | null;
23+
let plugins = pluginsArr;
24+
25+
if (idSpecific) {
26+
const rawPlugin = pluginsArr.find(t => t.identifier === idSpecific);
27+
28+
if (!rawPlugin) {
29+
res.json([]);
30+
return;
31+
}
32+
33+
plugins = [rawPlugin];
34+
}
35+
2236
const allPlugins = await Promise.all(
23-
pluginsArr.map(async rawPlugin => {
37+
plugins.map(async rawPlugin => {
2438
const stats = cache.get(rawPlugin.title) || (await getPackageStats(rawPlugin.npmPackage));
2539

2640
if (rawPlugin && !cache.has(rawPlugin.title)) {

0 commit comments

Comments
 (0)