feat(odin): Pages, routes and links as whole (#722)

LETS GO --------- Co-authored-by: Can Sirin <[email protected]> Co-authored-by: Umut Sirin <[email protected]>
kamp-us · Dec 30, 2023 · 8cd180d · 8cd180d
1 parent f7cb923
commit 8cd180d
Show file tree

Hide file tree

Showing 34 changed files with 801 additions and 364 deletions.
diff --git a/apps/gql/next.config.mjs b/apps/gql/next.config.mjs
@@ -1,6 +1,10 @@
 /** @type {import('next').NextConfig} */
 const config = {
-  transpilePackages: ["@kampus/sozluk-content", "@kampus/odin-content"],
-};
+  transpilePackages: [
+    '@kampus/sozluk-content',
+    '@kampus/odin-content',
+    '@kampus-content/odin',
+  ],
+}
 
 export default config;
diff --git a/apps/kampus/app/odin/curriculum-list.ts b/apps/kampus/app/odin/curriculum-list.ts
@@ -0,0 +1,257 @@
+export interface Curriculum {
+  description: string;
+  sections: Section[];
+}
+
+export interface Section {
+  header: string;
+  lessons: CurriculumLesson[];
+}
+
+interface CurriculumLesson {
+  title: string;
+  url: string;
+}
+
+const foundationsCurriculum = {
+  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.`,
+  sections: [
+    {
+      header: "Başlangıç",
+      lessons: [
+        {
+          title: "Kurs Nasıl Çalışacak?",
+          url: "temel-bilgiler/baslangic/kurs-nasil-calisacak",
+        },
+        {
+          title: "Web Geliştirmeye Giriş",
+          url: "temel-bilgiler/baslangic/web-gelistirmeye-giris",
+        },
+        {
+          title: "Motivasyon ve Düşünce Yapısı",
+          url: "temel-bilgiler/baslangic/motivasyon-ve-dusunce-yapisi",
+        },
+        {
+          title: "Yardım İstemek",
+          url: "temel-bilgiler/baslangic/yardim-istemek",
+        },
+        {
+          title: "Odin Topluluğuna Katıl",
+          url: "temel-bilgiler/baslangic/odin-topluluguna-katil",
+        },
+      ],
+    },
+    {
+      header: "Kurulumlar",
+      lessons: [
+        {
+          title: "Bilgisayar Temelleri",
+          url: "temel-bilgiler/kurulumlar/bilgisayar-temelleri",
+        },
+        {
+          title: "Web Nasıl Çalışır?",
+          url: "temel-bilgiler/kurulumlar/web-nasil-calisir",
+        },
+        {
+          title: "Kuruluma Genel Bakış",
+          url: "temel-bilgiler/kurulumlar/kuruluma-genel-bakis",
+        },
+        {
+          title: "Kurulumlar",
+          url: "temel-bilgiler/kurulumlar/kurulumlar",
+        },
+        {
+          title: "Metin Düzenleyiciler",
+          url: "temel-bilgiler/kurulumlar/metin-duzenleyiciler",
+        },
+        {
+          title: "Komut Satırı Temelleri",
+          url: "temel-bilgiler/kurulumlar/komut-satiri-temelleri",
+        },
+        { title: "Setting up Git - Çeviriye ihtiyaç duyuluyor", url: "#" },
+      ],
+    },
+    {
+      header: "Git Temelleri",
+      lessons: [
+        {
+          title: "Git'le Tanışın",
+          url: "git/git-temelleri/gitle-tanisin",
+        },
+        {
+          title: "Git'e Giriş",
+          url: "git/git-temelleri/gite-giris",
+        },
+      ],
+    },
+    {
+      header: "HTML Temelleri",
+      lessons: [
+        {
+          title: "HTML ve CSS'e Giriş",
+          url: "temel-bilgiler/html-css/html-temelleri/html-ve-csse-giris",
+        },
+        {
+          title: "Elementler ve Etiketler",
+          url: "temel-bilgiler/html-css/html-temelleri/elementler-ve-etiketler",
+        },
+        {
+          title: "HTML Şablonu",
+          url: "temel-bilgiler/html-css/html-temelleri/html-sablonu",
+        },
+        {
+          title: "Metin İle Çalışma",
+          url: "temel-bilgiler/html-css/html-temelleri/metin-ile-calisma",
+        },
+        {
+          title: "Listeler",
+          url: "temel-bilgiler/html-css/html-temelleri/listeler",
+        },
+        {
+          title: "Linkler ve Resimler",
+          url: "temel-bilgiler/html-css/html-temelleri/linkler-ve-resimler",
+        },
+        {
+          title: "Commit Mesajları",
+          url: "git/git-temelleri/commit-mesajlari",
+        },
+        {
+          title: "Proje: Tarifler - Çeviriye ihtiyaç duyuluyor",
+          url: "#",
+        },
+      ],
+    },
+    {
+      header: "CSS Temelleri",
+      lessons: [
+        {
+          title: "CSS'e Giriş",
+          url: "temel-bilgiler/html-css/css-temelleri/csse-giris",
+        },
+        {
+          title: "Basamaklama",
+          url: "temel-bilgiler/html-css/css-temelleri/basamaklama",
+        },
+        {
+          title: "HTML ve CSS İnceleme",
+          url: "temel-bilgiler/html-css/css-temelleri/html-ve-css-inceleme",
+        },
+        {
+          title: "Kutu Modeli",
+          url: "temel-bilgiler/html-css/css-temelleri/kutu-modeli",
+        },
+        {
+          title: "Blok ve Satır İçi Öğeler",
+          url: "temel-bilgiler/html-css/css-temelleri/blok-ve-satir-ici-ogeler",
+        },
+      ],
+    },
+    {
+      header: "Flexbox",
+      lessons: [
+        {
+          title: "Introduction to Flexbox - Çeviriye ihtiyaç duyuluyor",
+          url: "#",
+        },
+        {
+          title: "Grow ve Shrink",
+          url: "temel-bilgiler/html-css/flexbox/grow-ve-shrink",
+        },
+        {
+          title: "Eksenler",
+          url: "temel-bilgiler/html-css/flexbox/eksenler",
+        },
+        {
+          title: "Hizalama",
+          url: "temel-bilgiler/html-css/flexbox/hizalama",
+        },
+        {
+          title: "Project: Landing Page - Çeviriye ihtiyaç duyuluyor",
+          url: "#",
+        },
+      ],
+    },
+    {
+      header: "JavaScript Temelleri",
+      lessons: [
+        {
+          title: "JavaScript Temelleri Bölüm 1",
+          url: "temel-bilgiler/javascript-temelleri/javascript-temelleri-1",
+        },
+        {
+          title: "JavaScript Temelleri Bölüm 2",
+          url: "temel-bilgiler/javascript-temelleri/javascript-temelleri-2",
+        },
+        {
+          title: "JavaScript Geliştirici Araçları",
+          url: "temel-bilgiler/javascript-temelleri/javascript-gelistirici-araclari",
+        },
+        {
+          title: "JavaScript Temelleri Bölüm 3",
+          url: "temel-bilgiler/javascript-temelleri/javascript-temelleri-3",
+        },
+        {
+          title: "Problem Çözme",
+          url: "temel-bilgiler/javascript-temelleri/problem-cozme",
+        },
+        {
+          title: "Hataları Anlama",
+          url: "temel-bilgiler/javascript-temelleri/hatalari-anlama",
+        },
+        {
+          title: "Proje: Taş Kağıt Makas",
+          url: "temel-bilgiler/javascript-temelleri/proje-tas-kagit-makas",
+        },
+        {
+          title: "Temiz Kod",
+          url: "temel-bilgiler/javascript-temelleri/temiz-kod",
+        },
+        {
+          title: "Node.js Setup - Çeviriye ihtiyaç duyuluyor",
+          url: "#",
+        },
+        {
+          title: "JavaScript Temelleri Bölüm 4",
+          url: "temel-bilgiler/javascript-temelleri/javascript-temelleri-4",
+        },
+        {
+          title: "DOM Manipülasyonu ve Eventler",
+          url: "temel-bilgiler/javascript-temelleri/dom-manipulasyonu-ve-eventler",
+        },
+        {
+          title: "Taş Kağıt Makas Projesine Geri Dönüş",
+          url: "temel-bilgiler/javascript-temelleri/tas-kagit-makas-projesine-geri-donus",
+        },
+        {
+          title: "Proje: Çizim Tahtası",
+          url: "temel-bilgiler/javascript-temelleri/proje-cizim-tahtasi",
+        },
+        {
+          title: "JavaScript Temelleri Bölüm 5",
+          url: "temel-bilgiler/javascript-temelleri/javascript-temelleri-5",
+        },
+        {
+          title: "Proje: Hesap Makinesi",
+          url: "temel-bilgiler/javascript-temelleri/proje-hesap-makinesi",
+        },
+      ],
+    },
+    {
+      header: "Her Şeyi Bir Araya Getirme",
+      lessons: [
+        {
+          title: "Her Şeyi Bir Araya Getirme",
+          url: "temel-bilgiler/her-seyi-birlestirme/her-seyi-bir-araya-getirme-sonuc",
+        },
+      ],
+    },
+  ],
+} as Curriculum;
+
+const curriculumList = {
+  foundationsCurriculum,
+};
+
+export default curriculumList;
diff --git a/apps/kampus/app/odin/layout.tsx b/apps/kampus/app/odin/layout.tsx
@@ -1,26 +1,25 @@
 import { type PropsWithChildren } from "react";
+import { Container, Link, Theme } from "@radix-ui/themes";
 
-import { MainNav, MainNavBrand, MainNavLink } from "~/features/main-nav";
+import { MainNav, MainNavBrand } from "~/features/main-nav";
 
 export default function OdinRootLayout({ children }: PropsWithChildren) {
   return (
-    <>
+    <Theme accentColor="teal">
       <MainNav
-        brand={<MainNavBrand>Turkce Odin Project</MainNavBrand>}
-        links={
-          <>
-            <MainNavLink href="/sozluk">sozluk</MainNavLink>
-            <MainNavLink href="/pano">pano</MainNavLink>
-          </>
-        }
+        brand={<MainNavBrand href="/odin">Türkçe Odin Projesi</MainNavBrand>}
+        links={[
+          <Link key={1} href="/sozluk">
+            sozluk
+          </Link>,
+          <Link key={2} href="/pano">
+            pano
+          </Link>,
+        ]}
       />
-      <section
-        aria-label="PanoLayout"
-        role="contentinfo"
-        className="bg-background container mx-auto max-w-5xl py-10"
-      >
+      <Container size="3" mt="3" mb="3">
         {children}
-      </section>
-    </>
+      </Container>
+    </Theme>
   );
 }
diff --git a/apps/kampus/app/odin/page.tsx b/apps/kampus/app/odin/page.tsx
@@ -1,3 +1,68 @@
+import { Box, Button, Flex, Heading, Link, Text } from "@radix-ui/themes";
+import { BookOpenCheckIcon } from "lucide-react";
+
 export default function OdinHome() {
-  return <div>Odin Home</div>;
+  return (
+    <Box>
+      <WallOfText />
+      <Flex mt="4" justify="center">
+        <Link href="odin/seruvenler">
+          <Button className="flex gap-2">
+            <BookOpenCheckIcon size={16} />
+            Çevirilere göz at
+          </Button>
+        </Link>
+      </Flex>
+    </Box>
+  );
 }
+
+const WallOfText = () => {
+  return (
+    <Flex direction="column" gap="4">
+      <Heading size="8">Merhaba!</Heading>
+      <Text as="p" weight="medium">
+        Biz, <Link>kamp.us</Link> olarak,{" "}
+        <Link target="_blank" href="https://www.theodinproject.com/">
+          TheOdinProject
+        </Link>
+        &apos;in Web Geliştirme Yolculuğu&apos;nun Türkçe çevirisini oluşturmak için bir araya
+        geldik. TheOdinProject, dünya genelinde binlerce öğrenciye ücretsiz web geliştirme
+        becerileri kazandırma fırsatı sunan bir kaynaktır. Bu projeyi Türkçe&apos;ye çevirerek, daha
+        fazla kişinin bu değerli kaynağa erişebilmesini amaçlıyoruz.
+      </Text>
+      <Heading>Türkçe çevirinin önemi:</Heading>
+      <Text as="p" weight="medium">
+        Dil Engeli Kaldırma: İngilizce bilmeyen veya yeterince iyi bilmeyen kişiler için,
+        TheOdinProject&apos;e erişmek zor olabilir. Türkçe çeviri, bu engeli kaldırarak daha fazla
+        kişinin web geliştirme becerilerini geliştirmesine olanak tanır.
+      </Text>
+      <Text as="p" weight="medium">
+        Topluluk Katılımı: TheOdinProject&apos;in açık kaynak yapısı sayesinde, herkesin katkıda
+        bulunma fırsatı vardır. Türkçe çeviri yaparak, kamp.us topluluğunun bu projeye katkıda
+        bulunmasına ve içerikleri iyileştirmesine olanak tanınır.
+      </Text>
+      <Text as="p" weight="medium">
+        Eğitim Fırsatları: Türkçe konuşan öğrencilere web geliştirme eğitimi sunmak, kariyerlerini
+        ilerletmelerine ve yeni fırsatlar yaratmalarına yardımcı olabilir.
+      </Text>
+      <Text as="p" weight="medium">
+        Daha Geniş Kitleye Ulaşma: Türkçe çeviri ile, Türkçe konuşan topluluklar arasında
+        TheOdinProject&apos;in bilinirliğini artırabiliriz.
+      </Text>
+      <Text as="p" weight="medium">
+        TheOdinProject Web Geliştirme Yolculuğu&apos;nun Türkçe çevirisi, topluluğumuzun işbirliği
+        ve katkılarıyla gerçekleştirilecektir. Herkesin bu projeye katkıda bulunması, daha fazla
+        kişiye web geliştirme becerileri kazandırmamıza yardımcı olabilir.
+      </Text>
+      <Text as="p" weight="medium">
+        Eğer siz de bu projeye katkıda bulunmak isterseniz,{" "}
+        <Link target="_blank" href="https://github.com/kamp-us/monorepo/tree/dev/content/odin">
+          GitHub{" "}
+        </Link>
+        reposunu ziyaret edebilir ve çeviri sürecine dahil olabilirsiniz. Hep birlikte daha fazla
+        kişiye web geliştirme yolculuğuna başlamalarına ve başarılı olmalarına yardımcı olacağız.
+      </Text>
+    </Flex>
+  );
+};