From ca4fbfae29618888b7236b2f564224fe24865a46 Mon Sep 17 00:00:00 2001 From: Maarten van den Hoven Date: Wed, 29 May 2024 15:39:18 +0200 Subject: [PATCH] Explorer Media SSR (#2206) --- .changeset/shy-pianos-own.md | 5 ++++ packages/apps/explorer/package.json | 1 + .../explorer/src/components/layout/media.ts | 13 +++++++++++ packages/apps/explorer/src/pages/_app.tsx | 23 +++++++++++-------- pnpm-lock.yaml | 14 ++++++++++- 5 files changed, 45 insertions(+), 11 deletions(-) create mode 100644 .changeset/shy-pianos-own.md create mode 100644 packages/apps/explorer/src/components/layout/media.ts diff --git a/.changeset/shy-pianos-own.md b/.changeset/shy-pianos-own.md new file mode 100644 index 0000000000..ee6361122e --- /dev/null +++ b/.changeset/shy-pianos-own.md @@ -0,0 +1,5 @@ +--- +"@kadena/explorer": patch +--- + +Add Media for SSR diff --git a/packages/apps/explorer/package.json b/packages/apps/explorer/package.json index 49670a964e..8da5e3bcaf 100644 --- a/packages/apps/explorer/package.json +++ b/packages/apps/explorer/package.json @@ -25,6 +25,7 @@ }, "dependencies": { "@apollo/client": "~3.9.11", + "@artsy/fresnel": "^7.1.4", "@graphql-yoga/apollo-link": "~3.3.0", "@kadena/graph": "workspace:*", "@kadena/react-icons": "workspace:*", diff --git a/packages/apps/explorer/src/components/layout/media.ts b/packages/apps/explorer/src/components/layout/media.ts new file mode 100644 index 0000000000..700f78b9e5 --- /dev/null +++ b/packages/apps/explorer/src/components/layout/media.ts @@ -0,0 +1,13 @@ +import { createMedia } from '@artsy/fresnel'; + +const AppMedia = createMedia({ + breakpoints: { + none: 0, + xs: 0, + sm: 640, + md: 768, + lg: 1024, + }, +}); + +export const { Media, MediaContextProvider } = AppMedia; diff --git a/packages/apps/explorer/src/pages/_app.tsx b/packages/apps/explorer/src/pages/_app.tsx index c9c63edb4d..17d1bc4225 100644 --- a/packages/apps/explorer/src/pages/_app.tsx +++ b/packages/apps/explorer/src/pages/_app.tsx @@ -1,6 +1,7 @@ // load global styles from @kadena/react-ui import '@kadena/react-ui/global'; +import { MediaContextProvider } from '@/components/layout/media'; import type { NormalizedCacheObject } from '@apollo/client'; import { ApolloClient, @@ -58,17 +59,19 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element { return ( - - K:Explorer - - + + + K:Explorer + + -
- -
+
+ +
+ ); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d993d563a6..5566222131 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -443,6 +443,9 @@ importers: '@apollo/client': specifier: ~3.9.11 version: 3.9.11(@types/react@18.2.79)(graphql-ws@5.16.0)(graphql@16.8.1)(react-dom@18.2.0)(react@18.2.0) + '@artsy/fresnel': + specifier: ^7.1.4 + version: 7.1.4(react@18.2.0) '@graphql-yoga/apollo-link': specifier: ~3.3.0 version: 3.3.0(@apollo/client@3.9.11)(@types/node@20.12.7)(graphql@16.8.1) @@ -3510,6 +3513,15 @@ packages: - encoding dev: true + /@artsy/fresnel@7.1.4(react@18.2.0): + resolution: {integrity: sha512-qbUdxzlcI9Q9Ez+HfYDq7hlLoeFKC8EKcCckW+EltWu9SWL3px4QZIkr7NwYEz13q/nLvAlHMnbJ3TpSEEZ1zg==} + engines: {node: '>=12.20.2', yarn: 1.x.x} + peerDependencies: + react: '>=18.0.0' + dependencies: + react: 18.2.0 + dev: false + /@assemblyscript/loader@0.9.4: resolution: {integrity: sha512-HazVq9zwTVwGmqdwYzu7WyQ6FQVZ7SwET0KKQuKm55jD0IfUpZgN0OPIiZG3zV1iSrVYcN0bdwLRXI/VNCYsUA==} dev: false @@ -16518,7 +16530,7 @@ packages: chalk: 4.1.2 debug: 4.3.4(supports-color@5.5.0) loader-utils: 2.0.4 - webpack: 5.88.2(@swc/core@1.3.80) + webpack: 5.88.2(webpack-cli@4.9.2) transitivePeerDependencies: - '@types/node' - less