Add static rhetoric endpoints

- Add overview to available rhetorics at nav bar
- Add detail view when clicking on a rhetoric on the overview
- Document necessary steps to contribute

README.md

@@ -241,3 +241,49 @@ In a platform where the number of votes determines how much attention something
 Social media can be thought of as a protocol for collaboratively determining what content receives attention. Upvotes and downvotes are how the community expresses their intention. And so it's critical that the outcome of the vote be informed and fair.
 
 -->
+
+
+# Prerequesites
+Last tested with:
+
+```shell
+$ direnv version
+2.35.0
+```
+
+```shell
+$ nix --version
+nix (Nix) 2.24.10
+```
+
+```shell
+$ devbox version
+0.13.6
+```
+
+
+# Getting started
+
+Get the global brain algorithm repo and build the global brain as shared library:
+```shell
+git clone [email protected]:social-protocols/GlobalBrain.jl.git
+cd GlobalBrain.jl
+direnv allow
+just build-shared-library
+```
+
+Checkout the actual jabble code and allow it:
+```shell
+git clone [email protected]:social-protocols/jabble.git
+cd jabble
+direnv allow
+```
+
+Afterwards you can start developing with:
+```shell
+just reset-all # creates social protocols directory
+just dev
+```
+
+This is how it can look like:
+![screenshot of locally running jabble](public/img/jabble-running.png)

app/components/ui/card.tsx

@@ -0,0 +1,80 @@
+import * as React from "react"
+
+import { cn } from '#app/utils/misc.tsx'
+
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

app/root.tsx

@@ -298,6 +298,12 @@ function NavigationMenu() {
 			>
 				<Icon name="chat-bubble">Open Discussions</Icon>
 			</Link>
+			<Link 
+				to="/rhetorics"
+				className={baseNavigationClassName}
+			>
+				<Icon name="hand">Rhetoric</Icon>
+			</Link>
 			{/*<Link
 				to="/fallacy-detection"
 				className={baseNavigationClassName + ' ' + fallacyDetectionClassName}

app/routes/rhetoric.$id.tsx

@@ -0,0 +1,25 @@
+import { json, type LoaderFunctionArgs } from '@remix-run/node'
+import { useLoaderData } from '@remix-run/react'
+import { loadRhetorics, RhetoricalElementDetail, type RhetoricalElement} from './rhetorics.tsx'
+
+export async function loader({ params }: LoaderFunctionArgs) {
+    const id = params.id
+    if (!id) {
+        return json({ id: null })
+    }
+    const response = await loadRhetorics()
+    const rhetorics = await response.json()
+    const rhetoric = rhetorics.find((rhetoric) => rhetoric.id === id)
+    if (!rhetoric) {
+        return json({ id: null })
+    }
+    return json(rhetoric)
+}
+
+export default function RhetoricPage() {
+    const rhetoric = useLoaderData() as RhetoricalElement
+
+    return (
+        <RhetoricalElementDetail {...rhetoric} />
+    )
+}