Merge pull request #1 from gtktsc/improve-docs

Improve docs
gtktsc · Oct 27, 2024 · 3f759b6 · 3f759b6
2 parents 9aaed5a + 5aa31b3
commit 3f759b6
Show file tree

Hide file tree

Showing 10 changed files with 166 additions and 53 deletions.
diff --git a/app/documentation/page.tsx b/app/documentation/page.tsx
@@ -35,6 +35,20 @@ const examples = [
     possibleValues: "Boolean (true or false).",
     settings: { showTickLabel: true, width: 60 } as Settings,
   },
+  {
+    id: "bar-chart",
+    title: "Bar chart",
+    description: "Draw bar chart.",
+    possibleValues: "Boolean (true or false).",
+    settings: { barChart: true, width: 60 } as Settings,
+  },
+  {
+    id: "horizontal-bar-chart",
+    title: "Horizontal Bar chart",
+    description: "Draw horizontal bar chart.",
+    possibleValues: "Boolean (true or false).",
+    settings: { horizontalBarChart: true, width: 60 } as Settings,
+  },
   {
     id: "hide-x-axis",
     title: "Hide X-Axis",
@@ -178,7 +192,7 @@ export default function Documentation() {
           <p>
             <strong>Possible Values:</strong> {example.possibleValues}
           </p>
-          <CodeBlock>{chart(input, example.settings)}</CodeBlock>
+          <CodeBlock bash>{chart(input, example.settings)}</CodeBlock>
         </div>
       ))}
     </div>

diff --git a/app/examples/page.tsx b/app/examples/page.tsx
@@ -92,6 +92,36 @@ export default function Examples() {
       ],
       options: { width: 30, height: 10, axisCenter: [0, 0] },
     },
+    {
+      title: "Bar Chart",
+      input: [
+        [-3, -1],
+        [-2, 0],
+        [-1, 1],
+        [0, 2],
+        [1, 3],
+        [2, 5],
+        [3, -7],
+      ],
+      options: { barChart: true, width: 30, height: 20, axisCenter: [0, 0] },
+    },
+    {
+      title: "Horizontal Bar Chart",
+      input: [
+        [-3, -1],
+        [-2, 0],
+        [-1, 1],
+        [0, 2],
+        [1, 3],
+        [2, 5],
+      ],
+      options: {
+        horizontalBarChart: true,
+        width: 30,
+        height: 20,
+        axisCenter: [0, 0],
+      },
+    },
     {
       title: "With Title and Labels",
       input: [
@@ -210,16 +240,18 @@ export default function Examples() {
             <div>
               <div>
                 <strong>Input:</strong>
-                <CodeBlock>{formatCompactInput(example.input)}</CodeBlock>
+                <CodeBlock javascript>
+                  {formatCompactInput(example.input)}
+                </CodeBlock>
               </div>
               <div>
                 <strong>Options:</strong>
-                <CodeBlock>
+                <CodeBlock javascript>
                   {JSON.stringify(example.options, null, 0)}
                 </CodeBlock>
               </div>
             </div>
-            <CodeBlock>{result}</CodeBlock>
+            <CodeBlock bash>{result}</CodeBlock>
             <Link
               href={`/playground?input=${encodeURIComponent(
                 JSON.stringify(example.input)

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,4 +1,6 @@
 import Link from "next/link";
+import Image from "next/image";
+import CodeBlock from "../components/CopyablePlot";
 
 export default function Home() {
   return (
@@ -10,6 +12,53 @@ export default function Home() {
         and customize appearance with settings like colors, formatting, and axis
         labels.
       </p>
+      <div className="chart-gif-wrapper">
+        <Image
+          src="/simple-asci-chart.gif"
+          alt="Simple ASCII Chart"
+          width={742}
+          height={352}
+        />
+      </div>
+      <CodeBlock javascript>
+        {`let step = 0;
+const interval = 0.1;
+const maxPoints = 20;
+const sinPoints: Point[] = [];
+const cosPoints: Point[] = [];
+
+setInterval(() => {
+  console.clear();
+
+  sinPoints.push([step, Math.sin(step)]);
+  cosPoints.push([step, Math.cos(step)]);
+
+  if (sinPoints.length > maxPoints) sinPoints.shift();
+  if (cosPoints.length > maxPoints) cosPoints.shift();
+
+  console.log(
+    plot([sinPoints, cosPoints], {
+      showTickLabel: true,
+      color: ['ansiRed', 'ansiBlue'],
+      width: 120,
+      height: 16,
+      yRange: [-1, 1],
+      xLabel: 'Step (π)',
+      yLabel: 'Amplitude',
+      legend: { position: 'bottom', series: ['Sine', 'Cosine'] },
+      axisCenter: [undefined, 0],
+      formatter: (x, { axis }) => {
+        if (axis === 'y') return x;
+        return \`\${(x / Math.PI).toFixed(1)}π\`;
+      },
+    }),
+  );
+
+  step += interval;
+}, 200);`}
+        `
+      </CodeBlock>
+
       <p>
         With Simple ASCII Chart, you can generate insightful, minimalistic
         charts that work well in terminal environments, making it ideal for

diff --git a/app/usage/page.tsx b/app/usage/page.tsx
@@ -16,11 +16,11 @@ export default function Usage() {
         install it via npm or yarn:
       </p>
 
-      <CodeBlock>npm install simple-ascii-chart</CodeBlock>
-      <CodeBlock>yarn add simple-ascii-chart</CodeBlock>
+      <CodeBlock bash>npm install simple-ascii-chart</CodeBlock>
+      <CodeBlock bash>yarn add simple-ascii-chart</CodeBlock>
 
       <p>Once installed, import and use it in your code like this:</p>
-      <CodeBlock>{`import plot from 'simple-ascii-chart';
+      <CodeBlock javascript>{`import plot from 'simple-ascii-chart';
 
 const input = [
   [1, 1],
@@ -46,10 +46,12 @@ console.log(plot(input, settings));
         .
       </p>
       <p>To install the CLI globally, run:</p>
-      <CodeBlock>npm install -g simple-ascii-chart-cli</CodeBlock>
+      <CodeBlock bash>npm install -g simple-ascii-chart-cli</CodeBlock>
 
       <p>Once installed, you can generate charts directly in your terminal:</p>
-      <CodeBlock>{`simple-ascii-chart "[[1, 1], [2, 4], [3, 8]]" --width 20 --height 10`}</CodeBlock>
+      <CodeBlock
+        bash
+      >{`simple-ascii-chart "[[1, 1], [2, 4], [3, 8]]" --width 20 --height 10`}</CodeBlock>
 
       <p>
         This command will output the chart directly in your terminal. For more
@@ -77,13 +79,13 @@ console.log(plot(input, settings));
         </li>
       </ul>
 
-      <CodeBlock>{`curl -G https://simple-ascii-chart.vercel.app/api \\
+      <CodeBlock bash>{`curl -G https://simple-ascii-chart.vercel.app/api \\
   --data-urlencode 'input=[[1,2],[2,3],[3,4]]' \\
   --data-urlencode 'settings={"width":50,"height":10}'
 `}</CodeBlock>
 
       <p>Example API call response:</p>
-      <CodeBlock>{`  ▲
+      <CodeBlock bash>{`  ▲
  4┤   ┏━━
   │   ┃
  2┤ ┏━┛

diff --git a/components/CopyablePlot.tsx b/components/CopyablePlot.tsx
@@ -1,39 +1,62 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
+import hljs from "highlight.js";
+import "highlight.js/styles/github.css"; // You can choose any Highlight.js theme
 
 type CodeBlockProps = {
   children: React.ReactNode;
+  javascript?: boolean;
+  bash?: boolean;
 };
 
-const CodeBlock: React.FC<CodeBlockProps> = ({ children }) => {
+const CodeBlock: React.FC<CodeBlockProps> = ({
+  children,
+  javascript = false,
+  bash = false,
+}) => {
   const [copied, setCopied] = useState(false);
+  const codeRef = useRef<HTMLElement>(null);
 
-  const handleCopy = () => {
-    if (typeof children !== "string") {
-      return;
+  useEffect(() => {
+    if ((javascript || bash) && codeRef.current) {
+      hljs.highlightElement(codeRef.current); // Apply Highlight.js
     }
+  }, [javascript, bash, children]);
 
-    navigator.clipboard.writeText(children);
+  const handleCopy = () => {
+    if (typeof children === "string") {
+      navigator.clipboard.writeText(children); // Copy directly if it's a string
+    } else if (codeRef.current) {
+      navigator.clipboard.writeText(codeRef.current.innerText); // Otherwise, get the text content
+    }
     setCopied(true);
 
     // Automatically hide the copied message after 2 seconds
     setTimeout(() => setCopied(false), 2000);
   };
 
   const dismissAlert = () => {
-    setCopied(false); // Dismiss the alert manually
+    setCopied(false);
   };
 
+  const languageClass = javascript
+    ? "language-javascript"
+    : bash
+    ? "language-bash"
+    : "";
+
   return (
     <div className="copyable-plot-wrapper">
       <pre
         className="copyable-plot"
         onClick={handleCopy}
         role="button"
-        aria-label="Click to copy the plot"
+        aria-label="Click to copy the code"
       >
-        <code>{children}</code>
+        <code ref={codeRef} className={languageClass}>
+          {children}
+        </code>
       </pre>
 
       {copied && (

diff --git a/components/DynamicEditablePlot.tsx b/components/DynamicEditablePlot.tsx
@@ -131,7 +131,7 @@ export default function EditablePlot({
 
       <div>
         <button onClick={runCode}>Run Code and Plot</button>
-        <CodeBlock>{result}</CodeBlock>
+        <CodeBlock bash>{result}</CodeBlock>
       </div>
     </>
   );

diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.6.0",
+    "highlight.js": "^11.10.0",
     "monaco-editor": "^0.52.0",
     "next": "15.0.1",
     "react": "18.3.1",

diff --git a/public/simple-asci-chart.gif b/public/simple-asci-chart.gif
diff --git a/styles/global.css b/styles/global.css
@@ -6,11 +6,18 @@
   box-sizing: border-box;
 }
 
+.chart-gif-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 1rem 0;
+}
+
 /* Basic global styles */
 body {
   margin: 0;
   padding: 0;
-  background-color: #f9f9f9;
 }
 html {
   overflow-y: scroll;
@@ -24,22 +31,16 @@ html {
 
 /* Style for the plot container */
 .copyable-plot {
-  background-color: #f5f5f5;
   border: 0.0625rem solid #ccc; /* 1px */
-  padding: 0.625rem; /* 10px */
-  font-family: "Courier New", Courier, monospace;
-  white-space: pre-wrap;
-  word-wrap: break-word;
   cursor: pointer;
-  margin-bottom: 1.25rem; /* 20px */
 }
 
 /* Style for the toast notification */
 .toast-notification {
   position: fixed;
   bottom: 1.25rem; /* 20px */
   right: 1.25rem; /* 20px */
-  background-color: #333;
+  background-color: #005cc5;
   color: #fff;
   padding: 0.625rem 1.25rem; /* 10px 20px */
   border-radius: 0.3125rem; /* 5px */
@@ -55,7 +56,12 @@ html {
 }
 
 /* Heading styles with spacing */
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   margin-top: 1.25rem; /* 20px */
   margin-bottom: 0.625rem; /* 10px */
   line-height: 1.2;
@@ -67,7 +73,7 @@ h1, h2, h3, h4, h5, h6 {
 .navbar {
   position: sticky;
   top: 0;
-  background-color: #fff;
+  background-color: white;
   padding: 0.9375rem 1.25rem; /* 15px 20px */
   display: flex;
   justify-content: center;
@@ -84,29 +90,11 @@ h1, h2, h3, h4, h5, h6 {
 
 /* Navbar links styling */
 .navbar-links a {
-  text-decoration: none;
-  margin: 0 0.9375rem; /* 15px */
-  color: #0070f3;
-  font-weight: 600;
-  font-family: inherit; /* Monospaced font for links */
-  transition: color 0.3s ease, background-color 0.3s ease;
   padding: 0.5rem 0.75rem; /* 8px 12px */
-  border-radius: 0.25rem; /* 4px */
-}
-
-.navbar-links a:hover {
-  background-color: rgba(0, 112, 243, 0.1);
-  color: #005bb5;
 }
 
 a {
-  color: #0070f3;
-  text-decoration: none;
-  font-family: inherit;
-}
-
-a:hover {
-  color: #005bb5;
+  color: #005cc5;
 }
 
 /* Spacing for the main content */
@@ -124,7 +112,8 @@ body {
 }
 
 /* Responsive design for smaller screens */
-@media (max-width: 48rem) { /* 768px */
+@media (max-width: 48rem) {
+  /* 768px */
   .navbar-links {
     flex-direction: column;
     align-items: center;
@@ -139,5 +128,3 @@ body {
     padding: 0.9375rem; /* 15px */
   }
 }
-
-
-Original file line number
+Diff line change
@@ Expand Up / @@ -131,7 +131,7 @@ export default function EditablePlot({ @@
           <div>
             <button onClick={runCode}>Run Code and Plot</button>
-            <CodeBlock>{result}</CodeBlock>
+            <CodeBlock bash>{result}</CodeBlock>
           </div>
         </>
       );
@@ Expand Down @@