lotso styling

content/training/building/_index.md

@@ -1,3 +1,7 @@
 +++
 title = "Building and Deploying"
+
+
+[extra]
+pos = [300, 400]
 +++

content/training/cameras/_index.md

@@ -1,3 +1,6 @@
 +++
 title = "Cameras"
+
+[extra]
+pos = [0, 400]
 +++

content/training/project-config/_index.md

@@ -1,4 +1,7 @@
 +++
 title = "Project Configuration"
 sort_by = "weight"
+
+[extra]
+pos = [300, 50]
 +++

content/training/rust/_index.md

@@ -1,4 +1,7 @@
 +++
 title = "Learning Rust"
 sort_by = "weight"
+
+[extra]
+pos = [0, 0]
 +++

graph-ui/components/page.tsx

@@ -0,0 +1,20 @@
+import React, { memo } from 'react';
+import { Handle, Position } from 'reactflow';
+
+function Page({ data }: any) {
+    return (
+        <a href={data.path}>
+            <div className="w-48 px-4 py-1 shadow-lg rounded-lg bg-gray-400 border-2 border-stone-400">
+                <div className="flex">
+                    <div className="ml-2">
+                        <div className="text-sm text-black">{data.label}</div>
+                    </div>
+                </div>
+                <Handle type="target" position={Position.Top} className="w-16 bg-transparent border-0 pointer-events-auto cursor-auto" />
+                <Handle type="source" position={Position.Bottom} className="w-16 bg-transparent border-0 pointer-events-auto cursor-auto" />
+            </div>
+        </a>
+    );
+}
+
+export default memo(Page);

graph-ui/components/section.tsx

@@ -0,0 +1,19 @@
+import React, { memo } from 'react';
+import { Handle, Position } from 'reactflow';
+
+function Section({ data }: any) {
+    let height = (data.children + 1) * 50;
+    let height_class = `h-[${height}px]`;
+    let section_class = `w-60 ${height_class} px-4 py-1 shadow-lg rounded-lg bg-slate-800 border-4 border-stone-700`;
+    return (
+        <div className={section_class}>
+            <div className="flex">
+                <div className="ml-2">
+                    <div className="text-md font-bold text-gray-300">{data.label}</div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default memo(Section);

graph-ui/package.json

@@ -20,8 +20,8 @@
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "14.2.4",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.4",
     "typescript": "^5"
   }
-}
+}

graph-ui/pages/_app.tsx

@@ -0,0 +1,6 @@
+import "@/styles/globals.css";
+import type { AppProps } from "next/app";
+
+export default function App({ Component, pageProps }: AppProps) {
+    return <Component {...pageProps} />;
+}