add github badge to landing page and a example button (#16)

* remove package and add github with star count * remove package and add github with star count
tscircuit · Jan 30, 2025 · bcd6dab · bcd6dab
1 parent 4dcd178
commit bcd6dab
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -131,6 +131,36 @@ const graphicsObjects = getGraphicsObjectsFromLogString(logString)
 // Array<GraphicsObject>
 ```
 
+### Example Graphics JSON
+
+An example graphics JSON file is provided in the repository to help you get started quickly.
+
+You can find the example file at [`site/examples/exampleGraphics.json`](site/examples/exampleGraphics.json). This file contains a sample graphics object that you can use to test the functionality of the `graphics-debug` module.
+
+Here is the content of the `exampleGraphics.json` file:
+
+```JSON
+{
+  "title": "Example Usage",
+  "rects": [
+    {
+      "center": { "x": 0, "y": 0 },
+      "width": 100,
+      "height": 100,
+      "fill": "green"
+    }
+  ],
+  "points": [
+    {
+      "x": 50,
+      "y": 50,
+      "color": "red",
+      "label": "Test Output!"
+    }
+  ]
+}
 ```
 
-```
+You can load this example into the application to visualize the graphics objects and understand how the `graphics-debug` module works.
+
+
diff --git a/site/examples/exampleGraphics.json b/site/examples/exampleGraphics.json
@@ -0,0 +1,19 @@
+{
+  "title": "Example Usage",
+  "rects": [
+    {
+      "center": { "x": 0, "y": 0 },
+      "width": 100,
+      "height": 100,
+      "fill": "green"
+    }
+  ],
+  "points": [
+    {
+      "x": 50,
+      "y": 50,
+      "color": "red",
+      "label": "Test Output!"
+    }
+  ]
+}
diff --git a/site/pages/Home.tsx b/site/pages/Home.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from "react"
+import exampleGraphicsJson from "../examples/exampleGraphics.json"
 import {
   getSvgsFromLogString,
   getGraphicsObjectsFromLogString,
@@ -39,9 +40,21 @@ export default function Home() {
 
   return (
     <div className="space-y-8">
-      <div className="prose">
-        <h1>Graphics Debug Viewer</h1>
-        <p>Paste your debug output below to visualize graphics objects.</p>
+      <div className="flex justify-between items-start">
+        <div className="prose">
+          <h1>Graphics Debug Viewer</h1>
+          <p>Paste your debug output below to visualize graphics objects.</p>
+        </div>
+        <a
+          href="https://github.com/tscircuit/graphics-debug"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <img
+            src="https://img.shields.io/github/stars/tscircuit/graphics-debug?style=social"
+            alt="GitHub stars"
+          />
+        </a>
       </div>
       <form onSubmit={handleSubmit} className="space-y-4">
         <textarea
@@ -63,14 +76,12 @@ export default function Home() {
           </button>
           <button
             type="button"
-            onClick={() => {
-              setInput(
-                `:graphics {"title":"Example Usage","rects":[{"center":{"x":0,"y":0},"width":100,"height":100,"color":"green"}],"points":[{"x":50,"y":50,"color":"red","label":"Test Output!"}]} :graphics {"title":"More Example Usage","lines":[{"points":[{"x":0,"y":0},{"x":5,"y":5}]}],"circles":[{"center":{"x":2.5,"y":2.5},"radius":2.5,"color":"blue"}],"points":[{"x":10,"y":10,"color":"red","label":"B"}]}`,
-              )
-            }}
+            onClick={() =>
+              setInput(`:graphics ${JSON.stringify(exampleGraphicsJson)}`)
+            }
             className="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700"
           >
-            See Example
+            Load Example
           </button>
         </div>
       </form>