feat: ruler components, demo tutorial and some more docs

Author: julia-script

.changeset/eighty-pumas-drive.md

@@ -0,0 +1,5 @@
+---
+"@coord/graph": minor
+---
+
+Implements Ruler component

packages/core/src/math/vec2.ts

@@ -77,6 +77,15 @@ export class Vec2 {
   abs() {
     return point(Math.abs(this.x), Math.abs(this.y));
   }
+
+  normalize() {
+    const length = this.length();
+    return point(this.x / length, this.y / length);
+  }
+
+  normal() {
+    return point(-this.y, this.x);
+  }
 }
 
 export function point(x: number, y: number) {

packages/docs/next.config.mjs

@@ -1,6 +1,7 @@
 import rehypeMdxCodeProps from "rehype-mdx-code-props";
 import remarkGfm from "remark-gfm";
-
+import rehypeKatex from "rehype-katex";
+import remarkMath from "remark-math";
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   experimental: {
@@ -10,8 +11,8 @@ const nextConfig = {
 import mdx from "@next/mdx";
 const withMDX = mdx({
   options: {
-    remarkPlugins: [remarkGfm],
-    rehypePlugins: [rehypeMdxCodeProps],
+    remarkPlugins: [remarkGfm, remarkMath],
+    rehypePlugins: [rehypeMdxCodeProps, rehypeKatex],
     useDynamicImport: true,
   },
 });

packages/docs/package.json

@@ -15,13 +15,16 @@
     "@mdx-js/react": "^2.3.0",
     "@next/mdx": "^13.4.4",
     "@types/mdx": "^2.0.5",
+    "katex": "^0.16.7",
     "next": "^13.4.4",
     "next-mdx-remote": "^4.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.9.0",
+    "rehype-katex": "^6.0.3",
     "rehype-mdx-code-props": "^1.0.0",
-    "remark-gfm": "^3.0.1"
+    "remark-gfm": "^3.0.1",
+    "remark-math": "^5.1.1"
   },
   "devDependencies": {
     "@coord/graph": "workspace:*",

packages/docs/src/app/graph/docs/[[...slug]]/layout.tsx

@@ -1,6 +1,8 @@
 import { Sidebar } from "@/components/Sidebar";
 import { getRoute, getRoutes } from "@/content/graph/docs/routeMaps";
+
 import Link from "next/link";
+import "katex/dist/katex.min.css";
 
 import { GoChevronRight, GoChevronLeft } from "react-icons/go";
 
@@ -16,7 +18,7 @@ export default function Layout(props: {
   const prevRoute = routeDetails.prev ? getRoute(routeDetails.prev) : null;
 
   return (
-    <div className="mx-auto flex h-full w-full max-w-6xl flex-grow flex-col md:flex-row ">
+    <div className="mx-auto flex h-full w-full max-w-6xl flex-grow flex-col md:flex-row [&_.math]:text-white">
       <Sidebar items={getRoutes()} />
       <div className="mx-auto flex w-full max-w-6xl">
         <div className="w-full px-4 py-4">

packages/docs/src/components/PreMdx.tsx

@@ -8,6 +8,7 @@ export function PreMdx({
 }: {
   children: React.ReactNode;
   live?: boolean;
+  previewOnly?: boolean;
   collapsed?: boolean;
   className?: string;
 }) {