fixed the layout

packages/app/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@amplitude/analytics-browser": "1.6.6",
-    "@code-hike/mdx": "^0.7.4",
+    "@code-hike/mdx": "0.7.4",
     "@cube-dev/ui-kit": "0.11.1",
     "@mdx-js/loader": "2.2.1",
     "@next/mdx": "13.0.7",
@@ -40,6 +40,7 @@
     "react-hotjar": "5.3.0",
     "react-icons": "^4.7.1",
     "rehype-autolink-headings": "6.1.1",
+    "rehype-prism-plus": "1.5.0",
     "rehype-slug": "5.1.0",
     "remark-gfm": "^3.0.1",
     "shiki": "^0.11.1",

packages/app/src/lib/getMDXContent.ts

@@ -1,8 +1,8 @@
-import { remarkCodeHike } from '@code-hike/mdx';
 import { Octokit } from 'octokit';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypeSlug from 'rehype-slug';
 import { bundle } from './bundler/bundler';
+import remarkCodeHike from '@code-hike/mdx';
 import theme from 'shiki/themes/material-palenight.json';
 
 async function getMdxContent(
@@ -13,25 +13,29 @@ async function getMdxContent(
 ) {
   const octokit = new Octokit({ auth: process.env.GITHUB_PAT });
   let route = `/${path}/${page}.mdx`;
-  const { data }: any = await octokit.rest.repos.getContent({
-    owner: owner,
-    repo: repoName,
-    path: route,
-  });
-  let mdx;
+  try {
+    const { data }: any = await octokit.rest.repos.getContent({
+      owner: owner,
+      repo: repoName,
+      path: route,
+    });
+    let mdx;
+    if (Array.isArray(data)) {
+      mdx = Buffer.from(data[0].content!, 'base64').toString('utf-8');
+    } else {
+      mdx = Buffer.from(data?.content, 'base64').toString('utf-8');
+    }
 
-  if (Array.isArray(data)) {
-    mdx = Buffer.from(data[0].content!, 'base64').toString('ascii');
-  } else {
-    mdx = Buffer.from(data?.content, 'base64').toString('ascii');
+    let pageContent = await bundle(mdx, {
+      rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings],
+      // remarkPlugins: [remarkCodeHike, { showCopyButton: true, theme }],
+      remarkPlugins: [],
+      headerDepth: 3,
+    });
+    return pageContent;
+  } catch (err) {
+    console.log(err);
   }
-
-  let pageContent = await bundle(mdx, {
-    rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings],
-    remarkPlugins: [[remarkCodeHike, { showCopyButton: true, theme }]],
-    headerDepth: 3,
-  });
-  return pageContent;
 }
 
 export { getMdxContent };

packages/app/src/pages/_app.tsx

@@ -2,18 +2,23 @@ import '../../styles/globals.css';
 import type { AppProps } from 'next/app';
 import { BreakpointsProvider, Root, SSRProvider } from '@cube-dev/ui-kit';
 import Layout from '../components/shared/Layouts/Layout';
-import '@code-hike/mdx/dist/index.css';
-
+import { useRouter } from 'next/router';
 export default function App({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+
   return (
-    <Root bodyStyles={{ 'background-color': '#121312' }}>
-      <SSRProvider>
+    <SSRProvider>
+      <Root bodyStyles={{ 'background-color': '#121312' }}>
         <BreakpointsProvider value={[1140, 900, 500]}>
-          <Layout>
+          {router.asPath !== '/' ? (
+            <Layout>
+              <Component {...pageProps} />
+            </Layout>
+          ) : (
             <Component {...pageProps} />
-          </Layout>
+          )}
         </BreakpointsProvider>
-      </SSRProvider>
-    </Root>
+      </Root>
+    </SSRProvider>
   );
 }

packages/app/styles/globals.css

@@ -83,3 +83,13 @@ a:hover {
 .ch-codeblock:hover .ch-code-button {
   display: block;
 }
+
+code {
+  color: #f2f2f2 !important;
+}
+pre {
+  background: #171817 !important;
+  border: 1px solid #3e3e3e !important;
+  border-radius: 1rem;
+  padding: 0.5rem 1rem;
+}