social-protocols · isaias-b · Nov 11, 2024 · Dec 15, 2024 · Dec 21, 2024
diff --git a/README.md b/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)
diff --git a/annotate0.html b/annotate0.html
@@ -0,0 +1,49 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Annotate</title>
+    <style>
+        .highlight {
+            background-color: yellow;
+        }
+    </style>
+</head>
+<body>
+    <h1>Hello World</h1>
+    <p>
+        arbitrary text selection works on simple text
+    </p>
+    <h2>posted text</h2>
+    <p id="text">
+        This 
+        is 
+        a 
+        simple 
+        text 
+        to 
+        experiment 
+        with 
+        text 
+        range 
+        selection 
+        and 
+        highlighting.
+    </p>
+    <button onclick="highlightSelection()">Highlight Selection</button>
+
+    <script>
+        function highlightSelection() {
+            const selection = window.getSelection();
+            if (selection.rangeCount > 0) {
+                const range = selection.getRangeAt(0);
+                const span = document.createElement('span');
+                span.className = 'highlight';
+                range.surroundContents(span);
+            }
+        }
+    </script>
+</body>
+</html>
diff --git a/annotate1.html b/annotate1.html
@@ -0,0 +1,50 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Annotate</title>
+    <style>
+        .highlight {
+            background-color: yellow;
+        }
+    </style>
+</head>
+<body>
+    <h1>Hello World</h1>
+    <p>
+        arbitrary text selection breaks on text with spans, but still works for word selections but not cross word selections
+    </p>
+    <h2>posted text</h2>
+    <p id="text">
+        <span>This </span>
+        <span>is </span>
+        <span>a </span>
+        <span>simple </span>
+        <span>text </span>
+        <span>to </span>
+        <span>experiment </span>
+        <span>with </span>
+        <span>text </span>
+        <span>range </span>
+        <span>selection </span>
+        <span>and </span>
+        <span>highlighting.</span>
+    </p>
+    <button onclick="highlightSelection()">Highlight Selection</button>
+
+
+    <script>
+        function highlightSelection() {
+            const selection = window.getSelection();
+            if (selection.rangeCount > 0) {
+                const range = selection.getRangeAt(0);
+                const span = document.createElement('span');
+                span.className = 'highlight';
+                range.surroundContents(span);
+            }
+        }
+    </script>
+</body>
+</html>
diff --git a/annotate2.html b/annotate2.html
@@ -0,0 +1,60 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Annotate</title>
+    <style>
+        .highlight {
+            background-color: yellow;
+        }
+    </style>
+</head>
+<body>
+    <h1>Hello World</h1>
+    <p>
+        arbitrary text selection breaks on text with spans, but can be restored by using the cloneContents method
+    </p>
+    <h2>posted text</h2>
+    <p id="text">
+        <span id="word1">This </span>
+        <span id="word2">is </span>
+        <span id="word3">a </span>
+        <span id="word4">simple </span>
+        <span id="word5">text </span>
+        <span id="word6">to </span>
+        <span id="word7">experiment </span>
+        <span id="word8">with </span>
+        <span id="word9">text </span>
+        <span id="word10">range </span>
+        <span id="word11">selection </span>
+        <span id="word12">and </span>
+        <span id="word13">highlighting.</span>
+    </p>
+    <button onclick="highlightSelection()">Highlight Selection</button>
+    <p id="selectedRange"></p>
+    <script>
+        document.addEventListener('selectionchange', () => {
+            const selection = window.getSelection();
+            if (selection.rangeCount > 0) {
+                const range = selection.getRangeAt(0);
+                const selectedText = range.toString();
+                document.getElementById('selectedRange').textContent = selectedText;
+            }
+        });
+        function highlightSelection() {
+            const selection = window.getSelection();
+            if (selection.rangeCount > 0) {
+                const range = selection.getRangeAt(0);
+                const span = document.createElement('span');
+                span.className = 'highlight';
+                const contents = range.cloneContents();
+                span.appendChild(contents);
+                range.deleteContents();
+                range.insertNode(span);
+            }
+        }
+    </script>
+</body>
+</html>
diff --git a/app/components/ui/badge.tsx b/app/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '#app/utils/misc.tsx'
+
+const badgeVariants = cva(
+	'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+	{
+		variants: {
+			variant: {
+				default:
+					'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+				secondary:
+					'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+				destructive:
+					'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+				outline: 'text-foreground',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+)
+
+export interface BadgeProps
+	extends React.HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+	return (
+		<div className={cn(badgeVariants({ variant }), className)} {...props} />
+	)
+}
+
+export { Badge, badgeVariants }
diff --git a/app/components/ui/card.tsx b/app/components/ui/card.tsx
@@ -0,0 +1,79 @@
+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 }
diff --git a/app/components/ui/collapsible.tsx b/app/components/ui/collapsible.tsx
@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/app/components/ui/radio-group.tsx b/app/components/ui/radio-group.tsx
@@ -0,0 +1,48 @@
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import * as React from 'react'
+// import { Circle } from "lucide-react"
+
+import { cn } from '#app/utils/misc.tsx'
+import { Icon } from './icon.tsx'
+
+const RadioGroup = React.forwardRef<
+	React.ElementRef<typeof RadioGroupPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+	return (
+		<RadioGroupPrimitive.Root
+			className={cn('grid gap-2', className)}
+			{...props}
+			ref={ref}
+		/>
+	)
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+	React.ElementRef<typeof RadioGroupPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+	return (
+		<RadioGroupPrimitive.Item
+			ref={ref}
+			className={cn(
+				'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+				className,
+			)}
+			{...props}
+		>
+			<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+				<Icon
+					name="chevron-right"
+					size="sm"
+					className="h-2.5 w-2.5 fill-current text-current"
+				/>
+				{/* <Circle className="h-2.5 w-2.5 fill-current text-current" /> */}
+			</RadioGroupPrimitive.Indicator>
+		</RadioGroupPrimitive.Item>
+	)
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }