Skip to content

Commit

Permalink
fix syntax highlighting
Browse files Browse the repository at this point in the history
  • Loading branch information
michaelglass committed Mar 1, 2024
1 parent 78d99f3 commit 20f620c
Show file tree
Hide file tree
Showing 6 changed files with 56 additions and 59 deletions.
4 changes: 2 additions & 2 deletions packages/website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
"type": "module",
"dependencies": {
"@mdx-js/react": "^3.0.1",
"@mdx-js/rollup": "^3.0.1",
"@nlxai/chat-core": "*",
"@nlxai/chat-react": "*",
"@nlxai/chat-widget": "*",
Expand All @@ -27,12 +26,13 @@
},
"devDependencies": {
"@babel/core": "^7.23.3",
"@mdx-js/rollup": "^3.0.1",
"@tailwindcss/typography": "^0.5.10",
"@types/mdx": "^2.0.11",
"@types/ramda": "0.29.1",
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@types/react-syntax-highlighter": "^15.5.10",
"@types/react": "^18.2.15",
"@types/tinycolor2": "^1.4.2",
"@vitejs/plugin-react": "^4.0.3",
"autoprefixer": "^10.4.16",
Expand Down
80 changes: 34 additions & 46 deletions packages/website/src/components/PageContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,52 +41,40 @@ export const Prose: FC<{ children: ReactNode; className?: string }> = ({
</div>
);

export const PageContent: FC<{ md: string; children?: React.ReactNode }> = ({
md,
children,
}) => (
export const CodeComponents = {
pre({ children }: React.HTMLAttributes<HTMLPreElement>) {
return <pre className="relative group !font-mono">{children}</pre>;
},
code({ children, className, ...rest }: React.HTMLAttributes<HTMLElement>) {
const match = /language-(\w+)/.exec(className || "");
const lines = String(children).replace(/\n$/, "");
return (
<>
<CopyToClipboardButton
text={lines}
className="absolute top-1.5 right-1.5 hidden group-hover:block"
/>
{match ? (
<SyntaxHighlighter
children={lines}
style={{}}
useInlineStyles={false}
showLineNumbers={true}
language={match[1]}
PreTag="div"
/>
) : (
<code {...rest} className={className}>
{children}
</code>
)}
</>
);
},
};

export const PageContent: FC<{ md: string }> = (props) => (
<Prose>
<MDXProvider
components={{
pre({ children }: React.HTMLAttributes<HTMLPreElement>) {
return <pre className="relative group !font-mono">{children}</pre>;
},
code({
children,
className,
...rest
}: React.HTMLAttributes<HTMLElement>) {
const match = /language-(\w+)/.exec(className || "");
const lines = String(children).replace(/\n$/, "");
return (
<>
<CopyToClipboardButton
text={lines}
className="absolute top-1.5 right-1.5 hidden group-hover:block"
/>
{match ? (
<SyntaxHighlighter
children={lines}
style={{}}
useInlineStyles={false}
showLineNumbers={true}
language={match[1]}
PreTag="div"
/>
) : (
<code {...rest} className={className}>
{children}
</code>
)}
</>
);
},
}}
>
<Markdown>{md}</Markdown>
<main>{children}</main>
</MDXProvider>
<Markdown components={CodeComponents}>{props.md}</Markdown>
</Prose>
);

export default PageContent;
6 changes: 3 additions & 3 deletions packages/website/src/content/01-01-getting-started.mdx
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import React from "react";
import { PageTitle } from "../components/PageTitle";
import { PageContent } from "../components/PageContent";
import { Prose } from "../components/PageContent";
import { packageUrls } from "../constants";


<PageTitle pretitle="Introduction" title="Getting started" />

<PageContent>
<Prose>
This is the official JavaScript SDK to communicate with conversational bots created using NLX Dialog Studio. It contains the following packages:
* [@nlxai/chat-widget](${packageUrls.chatWidget}): the official out-of-the-box, themeable NLX widget.
* [@nlxai/chat-react](${packageUrls.chatReact}): React custom hook for building chat widgets.
* [@nlxai/chat-preact](${packageUrls.chatPreact}): Preact custom hook for building chat widgets.
* [@nlxai/chat-core](${packageUrls.chatCore}): vanilla JavaScript SDK for creating fully custom chat widgets.
* [@nlxai/voice-compass](${packageUrls.voiceCompass}): multimodal capabilities.
</PageContent>
</Prose>
8 changes: 3 additions & 5 deletions packages/website/src/content/01-02-installation.mdx
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import React from "react";
import { PageTitle } from "../components/PageTitle";
import { PageContent } from "../components/PageContent";
import { Prose } from "../components/PageContent"
import { umdScriptTags, packageUrls } from "../constants";


<PageTitle pretitle="Install" title="Installation" />
<PageContent>
<Prose>
SDK packages can be installed as follows:

## Using script tags
Expand Down Expand Up @@ -50,4 +48,4 @@ npm install @nlxai/chat-core
# Voice Compass
npm install @nlxai/voice-compass
~~~
</PageContent>
</Prose>
6 changes: 5 additions & 1 deletion packages/website/src/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { Header } from "./components/Header";
import { Hero } from "./components/Hero";
import { Nav, MobileNav } from "./components/Nav";
import { ContentRoutes } from "./routes";
import { CodeComponents } from "./components/PageContent";
import { MDXProvider } from "@mdx-js/react";

const App: FC<{}> = () => {
const [mobileMenuExpanded, setMobileMenuExpanded] = useState<boolean>(false);
Expand All @@ -25,7 +27,9 @@ const App: FC<{}> = () => {
<Nav />
<div className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
<article>
<ContentRoutes />
<MDXProvider components={CodeComponents}>
<ContentRoutes />
</MDXProvider>
</article>
</div>
</div>
Expand Down
11 changes: 9 additions & 2 deletions packages/website/vite.config.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import mdx from "@mdx-js/rollup";
import react from "@vitejs/plugin-react";
import remarkGfm from "remark-gfm";

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
{ enforce: "pre", ...mdx({ remarkPlugins: [remarkGfm] }) },
{
enforce: "pre",
...mdx({
remarkPlugins: [remarkGfm],
providerImportSource: "@mdx-js/react",
}),
},
react({ include: /\.(mdx|js|jsx|ts|tsx)$/ }),
],
define: {},
Expand All @@ -18,6 +24,7 @@ export default defineConfig({
include: ["@nlxai/chat-core", "@nlxai/chat-react", "@nlxai/chat-widget"],
},
build: {
sourcemap: true,
commonjsOptions: {
include: [/node_modules/, /chat-core/, /chat-react/, /chat-widget/],
},
Expand Down

0 comments on commit 20f620c

Please sign in to comment.