From 59cc4da1f53b0ef841c2a6bb96b61416ec13e8e7 Mon Sep 17 00:00:00 2001 From: taranbeer Date: Thu, 22 Dec 2022 18:54:07 +0530 Subject: [PATCH 1/6] fixed the layout --- packages/app/src/pages/_app.tsx | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/app/src/pages/_app.tsx b/packages/app/src/pages/_app.tsx index 9deff50..b9c1752 100644 --- a/packages/app/src/pages/_app.tsx +++ b/packages/app/src/pages/_app.tsx @@ -3,17 +3,24 @@ 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 !== '/' ? ( + + + + ) : ( - + )} - - + + ); } From 9da3a764ca31726c27982dc5eebbedb5732c7ddc Mon Sep 17 00:00:00 2001 From: taranbeer Date: Thu, 22 Dec 2022 22:28:05 +0530 Subject: [PATCH 2/6] testing without codehike --- packages/app/src/lib/getMDXContent.ts | 37 +++++++++++++++------------ 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/packages/app/src/lib/getMDXContent.ts b/packages/app/src/lib/getMDXContent.ts index 51b2b21..05f6569 100644 --- a/packages/app/src/lib/getMDXContent.ts +++ b/packages/app/src/lib/getMDXContent.ts @@ -13,25 +13,28 @@ 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('ascii'); + } else { + mdx = Buffer.from(data?.content, 'base64').toString('ascii'); + } - 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: [], + headerDepth: 3, + }); + return pageContent; + } catch (err) { + return err; } - - let pageContent = await bundle(mdx, { - rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings], - remarkPlugins: [[remarkCodeHike, { showCopyButton: true, theme }]], - headerDepth: 3, - }); - return pageContent; } export { getMdxContent }; From f1ec9809617e029470101753278b02ed093f6218 Mon Sep 17 00:00:00 2001 From: taranbeer Date: Thu, 22 Dec 2022 22:42:08 +0530 Subject: [PATCH 3/6] testing without codehike --- packages/app/src/lib/getMDXContent.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/app/src/lib/getMDXContent.ts b/packages/app/src/lib/getMDXContent.ts index 05f6569..67d2e7a 100644 --- a/packages/app/src/lib/getMDXContent.ts +++ b/packages/app/src/lib/getMDXContent.ts @@ -21,14 +21,14 @@ async function getMdxContent( }); let mdx; if (Array.isArray(data)) { - mdx = Buffer.from(data[0].content!, 'base64').toString('ascii'); + mdx = Buffer.from(data[0].content!, 'base64').toString('utf-8'); } else { - mdx = Buffer.from(data?.content, 'base64').toString('ascii'); + mdx = Buffer.from(data?.content, 'base64').toString('utf-8'); } let pageContent = await bundle(mdx, { rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings], - remarkPlugins: [], + remarkPlugins: [[remarkCodeHike, { showCopyButton: true, theme }]], headerDepth: 3, }); return pageContent; From 800871add4add7eed56b45924ec6cf50c934f6f3 Mon Sep 17 00:00:00 2001 From: taranbeer Date: Fri, 23 Dec 2022 09:26:53 +0530 Subject: [PATCH 4/6] removed codehike --- packages/app/src/lib/getMDXContent.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/app/src/lib/getMDXContent.ts b/packages/app/src/lib/getMDXContent.ts index 67d2e7a..9d6448c 100644 --- a/packages/app/src/lib/getMDXContent.ts +++ b/packages/app/src/lib/getMDXContent.ts @@ -28,7 +28,8 @@ async function getMdxContent( let pageContent = await bundle(mdx, { rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings], - remarkPlugins: [[remarkCodeHike, { showCopyButton: true, theme }]], + // remarkPlugins: [[remarkCodeHike, { showCopyButton: true, theme }]], + remarkPlugins: [], headerDepth: 3, }); return pageContent; From 4a2ae171d522d8794e06bb66824c9350e1682110 Mon Sep 17 00:00:00 2001 From: taranbeer Date: Fri, 23 Dec 2022 13:26:33 +0530 Subject: [PATCH 5/6] testing canary version of codehike --- packages/app/package.json | 3 ++- packages/app/src/lib/getMDXContent.ts | 12 ++++++------ packages/app/src/pages/_app.tsx | 2 -- packages/app/styles/globals.css | 4 ++++ 4 files changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/app/package.json b/packages/app/package.json index fe0cedd..7b7b7cb 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.8.0--canary.308.cc62796.0", "@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 9d6448c..423fd7c 100644 --- a/packages/app/src/lib/getMDXContent.ts +++ b/packages/app/src/lib/getMDXContent.ts @@ -1,9 +1,9 @@ -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 theme from 'shiki/themes/material-palenight.json'; +import remarkCodeHike from '@code-hike/mdx'; async function getMdxContent( owner: string, @@ -21,20 +21,20 @@ async function getMdxContent( }); let mdx; if (Array.isArray(data)) { - mdx = Buffer.from(data[0].content!, 'base64').toString('utf-8'); + mdx = Buffer.from(data[0].content!, 'base64').toString('ascii'); } else { - mdx = Buffer.from(data?.content, 'base64').toString('utf-8'); + mdx = Buffer.from(data?.content, 'base64').toString('ascii'); } let pageContent = await bundle(mdx, { rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings], - // remarkPlugins: [[remarkCodeHike, { showCopyButton: true, theme }]], - remarkPlugins: [], + remarkPlugins: [[remarkCodeHike, { showCopyButton: true, theme }]], + // remarkPlugins: [], headerDepth: 3, }); return pageContent; } catch (err) { - return err; + console.log(err); } } diff --git a/packages/app/src/pages/_app.tsx b/packages/app/src/pages/_app.tsx index b9c1752..5d0e284 100644 --- a/packages/app/src/pages/_app.tsx +++ b/packages/app/src/pages/_app.tsx @@ -2,9 +2,7 @@ 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(); diff --git a/packages/app/styles/globals.css b/packages/app/styles/globals.css index 058ae27..eb9c34c 100644 --- a/packages/app/styles/globals.css +++ b/packages/app/styles/globals.css @@ -83,3 +83,7 @@ a:hover { .ch-codeblock:hover .ch-code-button { display: block; } + +code { + color: #f2f2f2 !important; +} From 7165facb8bdecc4e21ba95403c5e26bbd93a2883 Mon Sep 17 00:00:00 2001 From: taranbeer Date: Fri, 23 Dec 2022 15:35:03 +0530 Subject: [PATCH 6/6] removed codehike --- packages/app/package.json | 2 +- packages/app/src/lib/getMDXContent.ts | 10 ++-- packages/app/styles/globals.css | 6 ++ pnpm-lock.yaml | 85 ++++++++++++++++++++++++++- 4 files changed, 95 insertions(+), 8 deletions(-) diff --git a/packages/app/package.json b/packages/app/package.json index 7b7b7cb..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.8.0--canary.308.cc62796.0", + "@code-hike/mdx": "0.7.4", "@cube-dev/ui-kit": "0.11.1", "@mdx-js/loader": "2.2.1", "@next/mdx": "13.0.7", diff --git a/packages/app/src/lib/getMDXContent.ts b/packages/app/src/lib/getMDXContent.ts index 423fd7c..4eea4cb 100644 --- a/packages/app/src/lib/getMDXContent.ts +++ b/packages/app/src/lib/getMDXContent.ts @@ -2,8 +2,8 @@ import { Octokit } from 'octokit'; import rehypeAutolinkHeadings from 'rehype-autolink-headings'; import rehypeSlug from 'rehype-slug'; import { bundle } from './bundler/bundler'; -import theme from 'shiki/themes/material-palenight.json'; import remarkCodeHike from '@code-hike/mdx'; +import theme from 'shiki/themes/material-palenight.json'; async function getMdxContent( owner: string, @@ -21,15 +21,15 @@ async function getMdxContent( }); let mdx; if (Array.isArray(data)) { - mdx = Buffer.from(data[0].content!, 'base64').toString('ascii'); + mdx = Buffer.from(data[0].content!, 'base64').toString('utf-8'); } else { - mdx = Buffer.from(data?.content, 'base64').toString('ascii'); + mdx = Buffer.from(data?.content, 'base64').toString('utf-8'); } let pageContent = await bundle(mdx, { rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings], - remarkPlugins: [[remarkCodeHike, { showCopyButton: true, theme }]], - // remarkPlugins: [], + // remarkPlugins: [remarkCodeHike, { showCopyButton: true, theme }], + remarkPlugins: [], headerDepth: 3, }); return pageContent; diff --git a/packages/app/styles/globals.css b/packages/app/styles/globals.css index eb9c34c..469a0bd 100644 --- a/packages/app/styles/globals.css +++ b/packages/app/styles/globals.css @@ -87,3 +87,9 @@ a:hover { 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'}