feat: add some design and broken links

apps/kampus/app/odin/page.tsx

@@ -3,11 +3,11 @@ import { BookOpenCheckIcon } from "lucide-react";
 
 export default function OdinHome() {
   return (
-    <Box>
+    <Box m="5">
       <WallOfText />
       <Flex mt="4" justify="center">
         <Link href="odin/seruvenler">
-          <Button className="flex gap-2">
+          <Button size="4" className="flex gap-2">
             <BookOpenCheckIcon size={16} />
             Çevirilere göz at
           </Button>

apps/kampus/app/odin/seruvenler/page.tsx

@@ -1,29 +1,20 @@
 import { Flex } from "@radix-ui/themes";
 
+import curriculumList from "../curriculum-list";
 import { HelpNeededJourney, Journey } from "./Journey";
 
-const paths = [
-  {
-    title: "Temel Bilgiler Serüveni",
-    description:
-      "İşte her şeyin başladığı yer! Gerçek, çalışan web siteleri oluşturmak için ihtiyacınız olan temel araçların hepsine pratik bir giriş. Web geliştiricilerinin aslında ne yaptığını ve sonraki kurslar için ihtiyacınız olan temelleri öğreneceksiniz.",
-    enabled: true,
-    url: "/odin/temel-bilgiler-seruveni",
-  },
-  {
-    title: "Full Stack JavaScript Serüveni",
-    description: `Bu yolculuk, sizi JavaScript müfredatımızın tamamından geçirir. 
-      Kurslar, görüntülendikleri sırayla alınmalıdır. 
-      JavaScript ve NodeJS kullanarak sıfırdan güzel, duyarlı web siteleri oluşturmak 
-      için bilmeniz gereken her şeyi öğreneceksiniz.`,
-    enabled: false,
-    url: "https://github.com/kamp-us/monorepo/tree/dev/content/odin/intermediate_html_css",
-  },
-];
+const paths = Object.values(curriculumList).map((curriculum) => {
+  return {
+    title: curriculum.name,
+    description: curriculum.description,
+    enabled: curriculum.enabled,
+    url: curriculum.url,
+  };
+});
 
 export default function SeruvenlerPage() {
   return (
-    <Flex direction="column" gap="4">
+    <Flex direction="column" gap="4" my="4">
       {paths.map((path) =>
         path.enabled ? (
           <Journey

apps/kampus/app/odin/temel-bilgiler-seruveni/CurriculumContent.tsx

@@ -6,8 +6,9 @@ interface CurriculumSectionProps {
   section: Section;
 }
 
-export const CurriculumSection = (props: CurriculumSectionProps) => {
+export const CurriculumSection = (props: CurriculumSectionProps & { curriculumUrl: string }) => {
   const { lessons, header } = props.section;
+  const { curriculumUrl } = props;
   return (
     <Flex direction="column" gap="4">
       <Card size="3" variant="classic">
@@ -18,7 +19,7 @@ export const CurriculumSection = (props: CurriculumSectionProps) => {
             const color = url === "#" ? "orange" : "teal";
             return (
               <Card color={color} size="1" key={index}>
-                <Link color={color} href={url === "#" ? "#" : `temel-bilgiler-seruveni/${url}`}>
+                <Link color={color} href={url === "#" ? "#" : `${curriculumUrl}/${url}`}>
                   {title}
                 </Link>
               </Card>

apps/kampus/app/odin/temel-bilgiler-seruveni/[...lesson]/OdinLessonActions.tsx

@@ -1,8 +1,52 @@
+import {
+  ArrowRightIcon,
+  ExclamationTriangleIcon,
+  GitHubLogoIcon,
+  RocketIcon,
+} from "@radix-ui/react-icons";
+import { Box, Button, Card, Flex, Separator } from "@radix-ui/themes";
 import { graphql, useFragment } from "react-relay";
 
 import { getOdinGithubEditUrl, getOdinGithubIssueUrl } from "~/features/kampus-url/kampus-github";
+import curriculumList, { Curriculum } from "../../curriculum-list";
 import { type OdinLessonActions_path$key } from "./__generated__/OdinLessonActions_path.graphql";
 
+const getNextLesson = (currentTitle: string) => {
+  let currentCurriculumUrl = null;
+  let nextLessonUrl = null;
+
+  for (let curriculumName in curriculumList) {
+    const curriculumItem = (curriculumList as { [key: string]: Curriculum })[curriculumName];
+    if (curriculumItem) {
+      const lessons = (curriculumItem.sections || []).flatMap((section) =>
+        section.lessons.map((lesson) => {
+          if (lesson.title === currentTitle) {
+            currentCurriculumUrl = `/odin/${curriculumItem.url}`;
+          }
+          return {
+            title: lesson.title,
+            url: lesson.url,
+          };
+        })
+      );
+
+      let currentLessonIndex = lessons.findIndex((lesson) => lesson.title === currentTitle);
+
+      if (currentLessonIndex !== -1) {
+        while (lessons[currentLessonIndex + 1]?.url === "#") {
+          currentLessonIndex++;
+        }
+        nextLessonUrl = `${currentCurriculumUrl}/${lessons[currentLessonIndex + 1]?.url}`;
+        if (currentLessonIndex === lessons.length - 1) {
+          nextLessonUrl = null;
+        }
+        break;
+      }
+    }
+  }
+
+  return { nextLessonUrl, currentCurriculumUrl };
+};
 interface Props {
   lesson: OdinLessonActions_path$key | null;
 }
@@ -25,16 +69,52 @@ export const OdinLessonActions = (props: Props) => {
   const contributionUrl = getOdinGithubEditUrl(lesson.path);
   const issueUrl = getOdinGithubIssueUrl({ title: lesson.title, path: lesson.path });
 
+  const currentTitle = lesson.title;
+
+  const { nextLessonUrl, currentCurriculumUrl } = getNextLesson(currentTitle);
+
   return (
-    <div className="border-t-border border-t-2 pt-4">
-      <ul className="flex gap-10">
-        <li>
-          <a href={contributionUrl}>Katkıda bulun</a>
-        </li>
-        <li>
-          <a href={issueUrl}>Bir sorun bildir</a>
-        </li>
-      </ul>
-    </div>
+    <Box>
+      <Separator orientation="horizontal" size="4" />
+      <Flex justify="center" my="4">
+        <Flex align="center" m="4">
+          <GitHubLogoIcon className="mx-1 h-4 w-4" />
+          <a href={contributionUrl || undefined} target="_blank" rel="noopener noreferrer">
+            Katkıda Bulunun
+          </a>
+        </Flex>
+        <Flex align="center" m="4">
+          <ExclamationTriangleIcon className="mx-1 h-4 w-4" />
+          <a href={issueUrl || undefined} target="_blank" rel="noopener noreferrer">
+            Bir sorun bildir
+          </a>
+        </Flex>
+      </Flex>
+      <Card my="4">
+        <Flex
+          direction={{
+            initial: "column",
+            xs: "row",
+          }}
+          justify={"center"}
+          p="4"
+        >
+          <Box p="5" m="4" asChild>
+            <Button size="3">
+              <RocketIcon className="h-8 w-8" />
+              <a href={currentCurriculumUrl || undefined}>Serüvene dön</a>
+            </Button>
+          </Box>
+          {nextLessonUrl && (
+          <Box p="5" m="4" asChild>
+            <Button size="3">
+              <ArrowRightIcon className="h-8 w-8" />
+              <a href={nextLessonUrl || undefined}>Sonraki Ders</a>
+            </Button>
+            </Box>
+          )}
+        </Flex>
+      </Card>
+    </Box>
   );
 };

apps/kampus/app/odin/temel-bilgiler-seruveni/[...lesson]/OdinLessonBody.tsx

@@ -1,5 +1,5 @@
 import { graphql, useFragment } from "react-relay";
-
+import { useEffect, useState } from 'react';
 import { type OdinLessonBody_body$key } from "./__generated__/OdinLessonBody_body.graphql";
 
 interface Props {
@@ -18,11 +18,42 @@ const useOdinLessonBodyFragment = (key: OdinLessonBody_body$key | null) =>
 
 export const OdinLessonBody = (props: Props) => {
   const body = useOdinLessonBodyFragment(props.body);
+  const [subtitles, setSubtitles] = useState<{ id: string, text: string }[]>([]);
+
+  useEffect(() => {
+    if (body?.html) {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(body.html, 'text/html');
+      const h3Elements = doc.querySelectorAll('h3');
+      const h3Texts = Array.from(h3Elements).map(h3 => ({ id: h3.id, text: h3.textContent || '' }));
+      setSubtitles(h3Texts);
+    }
+  }, [body?.html]);
 
   return (
-    <div
-      className="prose dark:prose-invert hover:prose-a:text-blue-500"
-      dangerouslySetInnerHTML={{ __html: body?.html ?? "" }}
-    />
+    <div className="flex flex-row justify-center xl:justify-between mb-7">
+      <div
+        className="prose dark:prose-invert hover:prose-a:text-blue-500"
+        dangerouslySetInnerHTML={{ __html: body?.html ?? "" }}
+      >    
+      </div>
+  <div className="hidden xl:block w-44">
+
+          <div className="sticky top-20">
+            <h3 className="text-md pb-4 prose dark:prose-invert hover:prose-a:text-blue-500">Ders içeriği</h3>
+
+            <ul className="border-l-4">
+            {subtitles.map((subtitle, index) => (
+              <li className="p-2" key={index}>
+                <p>
+                  {subtitle.text}
+                </p>
+              </li>
+            ))}
+            </ul>
+          </div>
+      </div>
+    </div>
+
   );
 };

apps/kampus/app/odin/temel-bilgiler-seruveni/[...lesson]/OdinLessonTitle.tsx

@@ -2,6 +2,25 @@ import { graphql, useFragment } from "react-relay";
 
 import { type OdinLessonTitle_title$key } from "./__generated__/OdinLessonTitle_title.graphql";
 
+import curriculumList, { Curriculum } from "../../curriculum-list";
+
+const getCurrentCurriculum = (currentTitle: string): { name: string, url: string } | null => {
+  for (let curriculumName in curriculumList) {
+    const curriculumItem = (curriculumList as {[key: string]: Curriculum})[curriculumName];
+    if (curriculumItem) {
+      for (let section of curriculumItem.sections) {
+        for (let lesson of section.lessons) {
+          if (lesson.title === currentTitle) {
+            return { name: curriculumItem.name, url: curriculumItem.url };
+          }
+        }
+      }
+    }
+  }
+  return null;
+};
+
+
 interface Props {
   lesson: OdinLessonTitle_title$key | null;
 }
@@ -18,6 +37,26 @@ const useOdinLessonTitleFragment = (key: OdinLessonTitle_title$key | null) =>
 
 export const OdinLessonTitle = (props: Props) => {
   const lesson = useOdinLessonTitleFragment(props.lesson);
+  const currentTitle = lesson ? lesson.title : null;
+
+  let currentCurriculumUrl = null;
+  let currentCurriculumName = null;
+  if (currentTitle) {
+    const currentCurriculum = getCurrentCurriculum(currentTitle);
+    currentCurriculumUrl = currentCurriculum?.url;
+    currentCurriculumName = currentCurriculum?.name;
+  }
 
-  return <h2 className="text-3xl font-bold">{lesson?.title}</h2>;
+  return <header className="mb-10 mt-2">
+      <div className="flex flex-col items-center mb-2 space-y-4 xl:space-y-0 xl:space-x-4 xl:flex-row
+       xl:justify-start">
+      <a href={`/odin/${currentCurriculumUrl || undefined}`} className="flex items-center justify-center w-24 h-24 bg-gray-200 rounded-full">
+        <img src="https://github.com/kamp-us/monorepo/assets/107408663/7317463f-fb13-403a-bf46-7db7fd734266" alt="Lesson Icon" />
+      </a>
+      <div className="text-center xl:text-left">
+          <h2 className="text-3xl font-bold">{lesson?.title}</h2>
+          <a className="text-lg font-light" href={`/odin/${currentCurriculumUrl || undefined}`}>{currentCurriculumName}</a>
+        </div>
+      </div>
+    </header>
 };

apps/kampus/app/odin/temel-bilgiler-seruveni/page.tsx

@@ -4,22 +4,22 @@ import curriculumList from "../curriculum-list";
 import { CurriculumSection } from "./CurriculumContent";
 
 export default function TemelBilgilerSeruveni() {
-  const { description, sections } = curriculumList.foundationsCurriculum;
+  const temelBilgiler = curriculumList.foundationsCurriculum;
 
   return (
-    <div>
+    <div className="my-10">
       <Flex direction="column" gap="6">
         <Flex gap="4" align="center">
-          <Text size="8">Temel Bilgiler Serüveni</Text>
+          <Text size="8">{temelBilgiler?.name}</Text>
           <Text size="2" color="gray">
-            {sections.length} bölüm
+            {temelBilgiler?.sections.length} bölüm
           </Text>
         </Flex>
-        <Text size="4">{description}</Text>
-        {sections.map((section, index) => {
-          return <CurriculumSection key={index} section={section} />;
+        <Text size="4">{temelBilgiler?.description}</Text>
+        {temelBilgiler?.sections.map((section, sectionIndex) => {
+          return <CurriculumSection curriculumUrl={temelBilgiler?.url} key={sectionIndex} section={section} />;
         })}
-      </Flex>
+        </Flex>
     </div>
-  );
+  )
 }