Setup (#112)

* wip

* wip

* wip3

* chore: utils

* feat: add command

* wip

* fix: key duplicate

* fix: move and check

* fix: use react-use instead

* fix: sidebar

* chore: make dynamic

* chore: tablet mode

* chore: fix padding

* chore: link instead of inbox

* fix: use dnd kit

* feat: add select component

* chore: use atom

* refactor: remove dnd provider

* feat: disabled drag when sort is not manual

* search route

* .

* feat: accessibility

* fix: search

* .

* .

* .

* fix: sidebar collapsed

* ai search layout

* .

* .

* .

* .

* ai responsible content

* .

* .

* .

* .

* .

* global topic route

* global topic correct route

* topic buttons

* sidebar search navigation

* ai

* Update jazz

* .

* .

* .

* .

* .

* learning status

* .

* .

* chore: content header

* fix: pointer none when dragging. prevent auto click after drag end

* fix: confirm

* fix: prevent drag when editing

* chore: remove unused fn

* fix: check propagation

* chore: list

* chore: tweak sonner

* chore: update stuff

* feat: add badge

* chore: close edit when create

* chore: escape on manage form

* refactor: remove learn path

* css: responsive item

* chore: separate pages and topic

* reafactor: remove new-schema

* feat(types): extend jazz type so it can be nullable

* chore: use new types

* fix: missing deps

* fix: link

* fix: sidebar in layout

* fix: quotes

* css: use medium instead semi

* Actual streaming and rendering markdown response

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* chore: metadata

* feat: la-editor

* .

* fix: editor and page

* .

* .

* .

* .

* .

* .

* fix: remove link

* chore: page sidebar

* fix: remove 'replace with learning status'

* fix: link

* fix: link

* chore: update schema

* chore: use new schema

* fix: instead of showing error, just do unique slug

* feat: create slug

* refactor apply

* update package json

* fix: schema personal page

* chore: editor

* feat: pages

* fix: metadata

* fix: jazz provider

* feat: handling data

* feat: page detail

* chore: server page to id

* chore: use id instead of slug

* chore: update content header

* chore: update link header implementation

* refactor: global.css

* fix: la editor use animation frame

* fix: editor export ref

* refactor: page detail

* chore: tidy up schema

* chore: adapt to new schema

* fix: wrap using settimeout

* fix: wrap using settimeout

* .

* .

---------

Co-authored-by: marshennikovaolga <marshennikova@gmail.com>
Co-authored-by: Nikita <github@nikiv.dev>
Co-authored-by: Anselm <anselm.eickhoff@gmail.com>
Co-authored-by: Damian Tarnawski <gthetarnav@gmail.com>

web/app/(pages)/layout.tsx

@@ -0,0 +1,15 @@
+import { Sidebar } from "@/components/custom/sidebar/sidebar"
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+	return (
+		<div className="flex h-full min-h-full w-full flex-row items-stretch overflow-hidden">
+			<Sidebar />
+
+			<div className="flex min-w-0 flex-1 flex-col">
+				<main className="bg-card relative flex flex-auto flex-col place-items-stretch overflow-auto lg:my-2 lg:mr-2 lg:rounded-md lg:border">
+					{children}
+				</main>
+			</div>
+		</div>
+	)
+}

web/app/(pages)/links/page.tsx

@@ -0,0 +1,5 @@
+import { LinkWrapper } from "@/components/routes/link/wrapper"
+
+export default function LinkPage() {
+	return <LinkWrapper />
+}

web/app/(pages)/pages/[id]/page.tsx

@@ -0,0 +1,5 @@
+import { DetailPageWrapper } from "@/components/routes/page/detail/wrapper"
+
+export default function DetailPage({ params }: { params: { id: string } }) {
+	return <DetailPageWrapper pageId={params.id} />
+}

web/app/(pages)/profile/_components/wrapper.tsx

@@ -0,0 +1,14 @@
+"use client"
+
+import { useAccount } from "@/lib/providers/jazz-provider"
+
+export const ProfileWrapper = () => {
+	const account = useAccount()
+
+	return (
+		<div>
+			<h2>{account.me.profile?.name}</h2>
+			<p>Profile Page</p>
+		</div>
+	)
+}

web/app/(pages)/profile/page.tsx

@@ -0,0 +1,5 @@
+import { ProfileWrapper } from "./_components/wrapper"
+
+export default function ProfilePage() {
+	return <ProfileWrapper />
+}

web/app/(pages)/search/page.tsx

@@ -0,0 +1,5 @@
+import { SearchWrapper } from "@/components/routes/search/wrapper"
+
+export default function ProfilePage() {
+	return <SearchWrapper />
+}

web/app/(topics)/[topic]/layout.tsx

@@ -0,0 +1,14 @@
+import { Sidebar } from "@/components/custom/sidebar/sidebar"
+
+export default function TopicsLayout({ children }: { children: React.ReactNode }) {
+	return (
+		<div className="flex h-full min-h-full w-full flex-row items-stretch overflow-hidden">
+			<Sidebar />
+			<div className="flex min-w-0 flex-1 flex-col">
+				<main className="bg-card relative flex flex-auto flex-col place-items-stretch overflow-auto rounded-md border lg:my-2 lg:mr-2">
+					{children}
+				</main>
+			</div>
+		</div>
+	)
+}

web/app/(topics)/[topic]/page.tsx

@@ -0,0 +1,5 @@
+import GlobalTopic from "@/components/routes/globalTopic/globalTopic"
+
+export default function GlobalTopicPage({ params }: { params: { topic: string } }) {
+	return <GlobalTopic topic={params.topic} />
+}

web/app/api/metadata/route.test.ts

@@ -0,0 +1,101 @@
+/**
+ * @jest-environment node
+ */
+import { NextRequest } from "next/server"
+import axios from "axios"
+import { GET } from "./route"
+
+jest.mock("axios")
+const mockedAxios = axios as jest.Mocked<typeof axios>
+
+describe("Metadata Fetcher", () => {
+	beforeEach(() => {
+		jest.clearAllMocks()
+	})
+
+	it("should return metadata when URL is valid", async () => {
+		const mockHtml = `
+      <html>
+        <head>
+          <title>Test Title</title>
+          <meta name="description" content="Test Description">
+          <link rel="icon" href="/favicon.ico">
+        </head>
+      </html>
+    `
+
+		mockedAxios.get.mockResolvedValue({ data: mockHtml })
+
+		const req = {
+			url: process.env.NEXT_PUBLIC_APP_URL + "/api/metadata?url=https://example.com"
+		} as unknown as NextRequest
+
+		const response = await GET(req)
+		const data = await response.json()
+
+		expect(response.status).toBe(200)
+		expect(data).toEqual({
+			title: "Test Title",
+			description: "Test Description",
+			favicon: "https://example.com/favicon.ico",
+			url: "https://example.com"
+		})
+	})
+
+	it("should return an error when URL is missing", async () => {
+		const req = {
+			url: process.env.NEXT_PUBLIC_APP_URL + "/api/metadata"
+		} as unknown as NextRequest
+
+		const response = await GET(req)
+		const data = await response.json()
+
+		expect(response.status).toBe(400)
+		expect(data).toEqual({ error: "URL is required" })
+	})
+
+	it("should return default values when fetching fails", async () => {
+		mockedAxios.get.mockRejectedValue(new Error("Network error"))
+
+		const req = {
+			url: process.env.NEXT_PUBLIC_APP_URL + "/api/metadata?url=https://example.com"
+		} as unknown as NextRequest
+
+		const response = await GET(req)
+		const data = await response.json()
+
+		expect(response.status).toBe(200)
+		expect(data).toEqual({
+			title: "No title available",
+			description: "No description available",
+			favicon: null,
+			url: "https://example.com"
+		})
+	})
+
+	it("should handle missing metadata gracefully", async () => {
+		const mockHtml = `
+      <html>
+        <head>
+        </head>
+      </html>
+    `
+
+		mockedAxios.get.mockResolvedValue({ data: mockHtml })
+
+		const req = {
+			url: process.env.NEXT_PUBLIC_APP_URL + "/api/metadata?url=https://example.com"
+		} as unknown as NextRequest
+
+		const response = await GET(req)
+		const data = await response.json()
+
+		expect(response.status).toBe(200)
+		expect(data).toEqual({
+			title: "No title available",
+			description: "No description available",
+			favicon: null,
+			url: "https://example.com"
+		})
+	})
+})

web/app/api/metadata/route.ts

@@ -0,0 +1,63 @@
+import { NextRequest, NextResponse } from "next/server"
+import axios from "axios"
+import * as cheerio from "cheerio"
+
+interface Metadata {
+	title: string
+	description: string
+	favicon: string | null
+	url: string
+}
+
+const DEFAULT_VALUES = {
+	TITLE: "No title available",
+	DESCRIPTION: "No description available",
+	IMAGE: null,
+	FAVICON: null
+}
+
+export async function GET(request: NextRequest) {
+	const { searchParams } = new URL(request.url)
+	const url = searchParams.get("url")
+
+	if (!url) {
+		return NextResponse.json({ error: "URL is required" }, { status: 400 })
+	}
+
+	try {
+		const { data } = await axios.get(url, {
+			timeout: 5000,
+			headers: {
+				"User-Agent":
+					"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36"
+			}
+		})
+
+		const $ = cheerio.load(data)
+
+		const metadata: Metadata = {
+			title: $("title").text() || $('meta[property="og:title"]').attr("content") || DEFAULT_VALUES.TITLE,
+			description:
+				$('meta[name="description"]').attr("content") ||
+				$('meta[property="og:description"]').attr("content") ||
+				DEFAULT_VALUES.DESCRIPTION,
+			favicon:
+				$('link[rel="icon"]').attr("href") || $('link[rel="shortcut icon"]').attr("href") || DEFAULT_VALUES.FAVICON,
+			url: url
+		}
+
+		if (metadata.favicon && !metadata.favicon.startsWith("http")) {
+			metadata.favicon = new URL(metadata.favicon, url).toString()
+		}
+
+		return NextResponse.json(metadata)
+	} catch (error) {
+		const defaultMetadata: Metadata = {
+			title: DEFAULT_VALUES.TITLE,
+			description: DEFAULT_VALUES.DESCRIPTION,
+			favicon: DEFAULT_VALUES.FAVICON,
+			url: url
+		}
+		return NextResponse.json(defaultMetadata)
+	}
+}

web/app/api/search-stream/route.ts

@@ -0,0 +1,43 @@
+import { NextRequest, NextResponse } from "next/server"
+
+export async function POST(request: NextRequest) {
+	let data: unknown
+	try {
+		data = (await request.json()) as unknown
+	} catch (error) {
+		return new NextResponse("Invalid JSON", { status: 400 })
+	}
+
+	if (typeof data !== "object" || !data) {
+		return new NextResponse("Missing request data", { status: 400 })
+	}
+
+	if (!("question" in data) || typeof data.question !== "string") {
+		return new NextResponse("Missing `question` data field.", { status: 400 })
+	}
+
+	const chunks: string[] = [
+		"# Hello",
+		" from th",
+		"e server",
+		"\n\n your question",
+		" was:\n\n",
+		"> ",
+		data.question,
+		"\n\n",
+		"**good bye!**"
+	]
+
+	const stream = new ReadableStream<string>({
+		async start(controller) {
+			for (const chunk of chunks) {
+				controller.enqueue(chunk)
+				await new Promise(resolve => setTimeout(resolve, 1000))
+			}
+
+			controller.close()
+		}
+	})
+
+	return new NextResponse(stream)
+}

web/app/globals.css

@@ -1,28 +1,89 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-:root {
-	--foreground-rgb: 0, 0, 0;
-	--background-start-rgb: 214, 219, 220;
-	--background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-	:root {
-		--foreground-rgb: 255, 255, 255;
-		--background-start-rgb: 0, 0, 0;
-		--background-end-rgb: 0, 0, 0;
-	}
-}
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
 
 body {
-	color: rgb(var(--foreground-rgb));
-	background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
+	font-family: "Inter", sans-serif;
 }
 
-@layer utilities {
-	.text-balance {
-		text-wrap: balance;
+@layer base {
+	body {
+		@apply bg-background text-foreground;
+		font-feature-settings:
+			"rlig" 1,
+			"calt" 1;
+		text-rendering: optimizeLegibility;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		overflow-x: hidden;
+		min-height: 100vh;
+		line-height: 1.5;
+	}
+}
+
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 240 10% 3.9%;
+		--card: 0 0% 100%;
+		--card-foreground: 240 10% 3.9%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 240 10% 3.9%;
+		--primary: 240 5.9% 10%;
+		--primary-foreground: 0 0% 98%;
+		--secondary: 240 4.8% 95.9%;
+		--secondary-foreground: 240 5.9% 10%;
+		--muted: 240 4.8% 95.9%;
+		--muted-foreground: 240 3.8% 46.1%;
+		--accent: 240 4.8% 95.9%;
+		--accent-foreground: 240 5.9% 10%;
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 240 5.9% 90%;
+		--input: 240 5.9% 90%;
+		--ring: 240 10% 3.9%;
+		--radius: 0.5rem;
+		--chart-1: 12 76% 61%;
+		--chart-2: 173 58% 39%;
+		--chart-3: 197 37% 24%;
+		--chart-4: 43 74% 66%;
+		--chart-5: 27 87% 67%;
+	}
+
+	.dark {
+		--background: 240 10% 3.9%;
+		--foreground: 0 0% 98%;
+		--card: 240 10% 3.9%;
+		--card-foreground: 0 0% 98%;
+		--popover: 240 10% 3.9%;
+		--popover-foreground: 0 0% 98%;
+		--primary: 0 0% 98%;
+		--primary-foreground: 240 5.9% 10%;
+		--secondary: 240 3.7% 15.9%;
+		--secondary-foreground: 0 0% 98%;
+		--muted: 240 3.7% 15.9%;
+		--muted-foreground: 240 5% 64.9%;
+		--accent: 240 3.7% 15.9%;
+		--accent-foreground: 0 0% 98%;
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 0 0% 98%;
+		--border: 240 3.7% 15.9%;
+		--input: 240 3.7% 15.9%;
+		--ring: 240 4.9% 83.9%;
+		--chart-1: 220 70% 50%;
+		--chart-2: 160 60% 45%;
+		--chart-3: 30 80% 55%;
+		--chart-4: 280 65% 60%;
+		--chart-5: 340 75% 55%;
+	}
+}
+
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
 	}
 }

web/app/layout.tsx

@@ -1,8 +1,23 @@
 import type { Metadata } from "next"
+// import { Inter as FontSans } from "next/font/google"
 import { Inter } from "next/font/google"
+import { cn } from "@/lib/utils"
+import { ThemeProvider } from "@/lib/providers/theme-provider"
 import "./globals.css"
+import { JazzProvider } from "@/lib/providers/jazz-provider"
+import { JotaiProvider } from "@/lib/providers/jotai-provider"
+import { Toaster } from "@/components/ui/sonner"
+import { ConfirmProvider } from "@/lib/providers/confirm-provider"
 
-const inter = Inter({ subsets: ["latin"] })
+// const fontSans = FontSans({
+//   subsets: ["latin"],
+//   variable: "--font-sans"
+// })
+
+const inter = Inter({
+	subsets: ["latin"],
+	variable: "--font-sans"
+})
 
 export const metadata: Metadata = {
 	title: "Learn Anything",
@@ -15,8 +30,19 @@ export default function RootLayout({
 	children: React.ReactNode
 }>) {
 	return (
-		<html lang="en">
-			<body className={inter.className}>{children}</body>
+		<html lang="en" className="h-full w-full">
+			<body className={cn("h-full w-full font-sans antialiased", inter.variable)}>
+				<JazzProvider>
+					<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+						<JotaiProvider>
+							<ConfirmProvider>
+								{children}
+								<Toaster />
+							</ConfirmProvider>
+						</JotaiProvider>
+					</ThemeProvider>
+				</JazzProvider>
+			</body>
 		</html>
 	)
 }

web/app/page.tsx

@@ -1,5 +1,12 @@
-"use client"
+import { Button } from "@/components/ui/button"
+import Link from "next/link"
 
-export default function Home() {
-	return <div></div>
+export default function HomePage() {
+	return (
+		<div className="flex min-h-full items-center justify-center">
+			<Link href="/links">
+				<Button>Go to main page</Button>
+			</Link>
+		</div>
+	)
 }