diff --git a/packages/app/package.json b/packages/app/package.json index fe0cedd..ea388f4 100644 --- a/packages/app/package.json +++ b/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", diff --git a/packages/app/src/lib/getMDXContent.ts b/packages/app/src/lib/getMDXContent.ts index 51b2b21..4eea4cb 100644 --- a/packages/app/src/lib/getMDXContent.ts +++ b/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 }; diff --git a/packages/app/src/pages/_app.tsx b/packages/app/src/pages/_app.tsx index 9deff50..5d0e284 100644 --- a/packages/app/src/pages/_app.tsx +++ b/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 ( - - + + - + {router.asPath !== '/' ? ( + + + + ) : ( - + )} - - + + ); } diff --git a/packages/app/styles/globals.css b/packages/app/styles/globals.css index 058ae27..469a0bd 100644 --- a/packages/app/styles/globals.css +++ b/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; +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4480440..daf6589 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,7 +11,7 @@ importers: packages/app: specifiers: '@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/eslint-plugin-next': 13.0.7 @@ -52,6 +52,7 @@ importers: 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 @@ -88,6 +89,7 @@ importers: react-hotjar: 5.3.0 react-icons: 4.7.1_react@18.2.0 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 @@ -3413,6 +3415,14 @@ packages: resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==} dev: true + /@types/parse5/6.0.3: + resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==} + dev: false + + /@types/prismjs/1.26.0: + resolution: {integrity: sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==} + dev: false + /@types/prop-types/15.7.5: resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==} @@ -5182,6 +5192,19 @@ packages: dependencies: function-bind: 1.1.1 + /hast-util-from-parse5/7.1.0: + resolution: {integrity: sha512-m8yhANIAccpU4K6+121KpPP55sSl9/samzQSQGpb0mTExcNh2WlvjtMwSWFhg6uqD4Rr6Nfa8N6TMypQM51rzQ==} + dependencies: + '@types/hast': 2.3.4 + '@types/parse5': 6.0.3 + '@types/unist': 2.0.6 + hastscript: 7.1.0 + property-information: 6.2.0 + vfile: 5.3.6 + vfile-location: 4.0.1 + web-namespaces: 2.0.1 + dev: false + /hast-util-has-property/2.0.0: resolution: {integrity: sha512-4Qf++8o5v14us4Muv3HRj+Er6wTNGA/N9uCaZMty4JWvyFKLdhULrv4KE1b65AthsSO9TXSZnjuxS8ecIyhb0w==} dev: false @@ -5255,6 +5278,16 @@ packages: resolution: {integrity: sha512-Pkw+xBHuV6xFeJprJe2BBEoDV+AvQySaz3pPDRUs5PNZEMQjpXJJueqrpcHIXxnWTcAGi/UOCgVShlkY6kLoqg==} dev: false + /hastscript/7.1.0: + resolution: {integrity: sha512-uBjaTTLN0MkCZxY/R2fWUOcu7FRtUVzKRO5P/RAfgsu3yFiMB1JWCO4AjeVkgHxAira1f2UecHK5WfS9QurlWA==} + dependencies: + '@types/hast': 2.3.4 + comma-separated-tokens: 2.0.3 + hast-util-parse-selector: 3.1.0 + property-information: 6.2.0 + space-separated-tokens: 2.0.2 + dev: false + /hoist-non-react-statics/3.3.2: resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==} dependencies: @@ -6510,6 +6543,14 @@ packages: lines-and-columns: 1.2.4 dev: true + /parse-numeric-range/1.3.0: + resolution: {integrity: sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==} + dev: false + + /parse5/6.0.1: + resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==} + dev: false + /path-exists/4.0.0: resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==} engines: {node: '>=8'} @@ -6704,6 +6745,15 @@ packages: loose-envify: 1.4.0 dev: false + /refractor/4.8.0: + resolution: {integrity: sha512-SVOnWUJiEBFNiBlHbudSpSpDfDhDY1UHF0CMKgdvPsMYNQQ4rnqFxyGvP07UmteNC8V12mTF2c0lEsGS7lKaGw==} + dependencies: + '@types/hast': 2.3.4 + '@types/prismjs': 1.26.0 + hastscript: 7.1.0 + parse-entities: 4.0.0 + dev: false + /regenerate-unicode-properties/10.1.0: resolution: {integrity: sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==} engines: {node: '>=4'} @@ -6771,6 +6821,26 @@ packages: unist-util-visit: 4.1.1 dev: false + /rehype-parse/8.0.4: + resolution: {integrity: sha512-MJJKONunHjoTh4kc3dsM1v3C9kGrrxvA3U8PxZlP2SjH8RNUSrb+lF7Y0KVaUDnGH2QZ5vAn7ulkiajM9ifuqg==} + dependencies: + '@types/hast': 2.3.4 + hast-util-from-parse5: 7.1.0 + parse5: 6.0.1 + unified: 10.1.2 + dev: false + + /rehype-prism-plus/1.5.0: + resolution: {integrity: sha512-KNJYMQHqN+53ZbT5Pa/lO7uorMpBIR3x9RjFeG1lPlQherZDZiPqyOFS464L4BniZ4VG5PnG5DXVqjGtwxWJew==} + dependencies: + hast-util-to-string: 2.0.0 + parse-numeric-range: 1.3.0 + refractor: 4.8.0 + rehype-parse: 8.0.4 + unist-util-filter: 4.0.0 + unist-util-visit: 4.1.1 + dev: false + /rehype-slug/5.1.0: resolution: {integrity: sha512-Gf91dJoXneiorNEnn+Phx97CO7oRMrpi+6r155tTxzGuLtm+QrI4cTwCa9e1rtePdL4i9tSO58PeSS6HWfgsiw==} dependencies: @@ -7395,7 +7465,6 @@ packages: /unified/9.2.2: resolution: {integrity: sha512-Sg7j110mtefBD+qunSLO1lqOEKdrwBFBrR6Qd8f4uwkhWNlbkaqwHse6e7QvD3AP/MNoJdEDLaf8OxYyoWgorQ==} dependencies: - '@types/unist': 2.0.6 bail: 1.0.5 extend: 3.0.2 is-buffer: 2.0.5 @@ -7414,6 +7483,14 @@ packages: '@types/unist': 2.0.6 dev: false + /unist-util-filter/4.0.0: + resolution: {integrity: sha512-H4iTOv2p+n83xjhx7eGFA3zSx7Xcv3Iv9lNQRpXiR8dmm9LtslhyjVlQrZLbkk4jwUrJgc8PPGkOOrfhb76s4Q==} + dependencies: + '@types/unist': 2.0.6 + unist-util-is: 5.1.1 + unist-util-visit-parents: 5.1.1 + dev: false + /unist-util-generated/1.1.6: resolution: {integrity: sha512-cln2Mm1/CZzN5ttGK7vkoGw+RZ8VcUH6BtGbq98DDtRGquAAOXig1mrBQYelOwMXYS8rK+vZDyyojSjp7JX+Lg==} dev: false @@ -7600,6 +7677,10 @@ packages: graceful-fs: 4.2.10 dev: false + /web-namespaces/2.0.1: + resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==} + dev: false + /web-streams-polyfill/3.2.1: resolution: {integrity: sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==} engines: {node: '>= 8'}