Skip to content

Commit

Permalink
Docs scaffolding ands tart
Browse files Browse the repository at this point in the history
  • Loading branch information
wileymc committed Dec 19, 2024
1 parent ee4e8a1 commit 9fb7e0a
Show file tree
Hide file tree
Showing 18 changed files with 1,474 additions and 39 deletions.
2 changes: 1 addition & 1 deletion components/CodeBlock/CodeBlock.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
font-size: 0.9em;
letter-spacing: -0.05em;
word-break: normal;
padding: 0 !important;
padding: 0.25rem !important;
margin: 0 !important;
}
}
59 changes: 23 additions & 36 deletions components/CodeBlock/CodeBlock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,17 @@ import { toast } from "react-toastify";
import hljs from "highlight.js";
import { useEffect } from "react";

function CodeBlock({
language,
setLanguage,
snippets,
}: {
language: "html" | "react" | "nextjs";
setLanguage: (language: "html" | "react" | "nextjs") => void;
snippets: { html: string; react: string; nextjs: string };
}) {
const text = snippets[language];
// Get all supported languages from highlight.js
type HljsLanguage = ReturnType<typeof hljs.listLanguages>[number];

interface CodeBlockProps {
code: string;
language: HljsLanguage;
}

function CodeBlock({ code, language }: CodeBlockProps) {
const handleCopy = () => {
void navigator.clipboard.writeText(text);
void navigator.clipboard.writeText(code);
toast("Copied to clipboard", {
position: "bottom-right",
type: "success",
Expand All @@ -26,34 +24,23 @@ function CodeBlock({

useEffect(() => {
hljs.highlightAll();
}, [language]);
}, [code, language]);

return (
<>
<div className={styles.container}>
<div className={styles.actions}>
<small>
<select
value={language}
onChange={(e) => setLanguage(e.target.value as "html" | "react")}
>
<option value="html">HTML</option>
<option value="react">React</option>
<option value="nextjs">Next.js</option>
</select>
</small>
<Button
variant="primary"
size="small"
onClick={handleCopy}
label="Copy"
/>
</div>
<pre>
<code className={language === "html" ? "html" : "jsx"}>{text}</code>
</pre>
<div className={styles.container}>
<div className={styles.actions}>
<small>{language}</small>
<Button
variant="primary"
size="small"
onClick={handleCopy}
label="Copy"
/>
</div>
</>
<pre>
<code className={language}>{code}</code>
</pre>
</div>
);
}

Expand Down
59 changes: 58 additions & 1 deletion components/EmbedCodeBlock/EmbedCodeBlock.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,63 @@
import { Box } from "components/Box/Box";
import { CodeBlock } from "components/CodeBlock/CodeBlock";
import { useState } from "react";
import { Button } from "components/Button/Button";
import styles from "../CodeBlock/CodeBlock.module.scss";
import { toast } from "react-toastify";
import hljs from "highlight.js";
import { useEffect } from "react";

function CodeBlock({
language,
setLanguage,
snippets,
}: {
language: "html" | "react" | "nextjs";
setLanguage: (language: "html" | "react" | "nextjs") => void;
snippets: { html: string; react: string; nextjs: string };
}) {
const text = snippets[language];

const handleCopy = () => {
void navigator.clipboard.writeText(text);
toast("Copied to clipboard", {
position: "bottom-right",
type: "success",
autoClose: 2000,
});
};

useEffect(() => {
hljs.highlightAll();
}, [language]);

return (
<>
<div className={styles.container}>
<div className={styles.actions}>
<small>
<select
value={language}
onChange={(e) => setLanguage(e.target.value as "html" | "react")}
>
<option value="html">HTML</option>
<option value="react">React</option>
<option value="nextjs">Next.js</option>
</select>
</small>
<Button
variant="primary"
size="small"
onClick={handleCopy}
label="Copy"
/>
</div>
<pre>
<code className={language === "html" ? "html" : "jsx"}>{text}</code>
</pre>
</div>
</>
);
}

export function EmbedCodeBlock({ id }: { id: string }) {
const [language, setLanguage] = useState<"html" | "react" | "nextjs">("html");
Expand Down
6 changes: 5 additions & 1 deletion pages/dashboard/[dashboardSlug]/conversations/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { useForm } from "react-hook-form";
import { useQueryClient } from "@tanstack/react-query";
import { DashboardTopNav } from "..";
import { ContentTypeNav } from "components/EmbedIndex/EmbedIndex";
import Link from "next/link";

export const getServerSideProps: GetServerSideProps = async (ctx) => {
const { locale } = ctx;
Expand Down Expand Up @@ -115,7 +116,10 @@ export default function ConversationsIndexPage() {
<div>
<DashboardTopNav />
<ContentTypeNav embedType="conversation" />
<h2>Conversations</h2>
<div className={styles.flexLeft}>
<h2>Conversations</h2>
<Link href={`/docs/conversations/overview`}>Info</Link>
</div>
<Button
onClick={() =>
router.push(
Expand Down
Loading

0 comments on commit 9fb7e0a

Please sign in to comment.