feat(odin): use monorepo contents/odin (#713)

# Description

Please describe your changes. Be descriptive enough to reduce churn for
review process.

### Checklist

- [ ] discord username: `username#0001`
- [ ] Closes #<issue-number>
- [ ] PR must be created for an issue from issues under "In progress"
column from [our project
board](https://github.com/orgs/kamp-us/projects/2/views/1).
- [ ] A descriptive and understandable title: The PR title should
clearly describe the nature and purpose of the changes. The PR title
should be the first thing displayed when the PR is opened. And it should
follow the semantic commit rules, and should include the
app/package/service name in the title. For example, a title like
"docs(@kampus-apps/pano): Add README.md" can be used.
- [ ] Related file selection: Only relevant files should be touched and
no other files should be affected.
- [ ] I ran `npx turbo run` at the root of the repository, and build was
successful.
- [ ] I installed the npm packages using `npm install --save-exact
<package>` so my package is pinned to a specific npm version. Leave
empty if no package was installed. Leave empty if no package was
installed with this PR.

### How were these changes tested?

Please describe the tests you did to test the changes you made. Please
also specify your test configuration.

---------

Co-authored-by: Can Sirin <8138047+cansirin@users.noreply.github.com>

apps/gql/loaders/odin.ts

@@ -21,6 +21,7 @@ export const transformOdinLesson = (lesson: Lesson) => {
     __typename: "OdinLesson" as const,
     id: lesson.id,
     title: lesson.title,
+    path: lesson.path,
     body: {
       raw: lesson.body.raw,
       html: lesson.html,

apps/gql/schema/resolvers/index.ts

@@ -201,7 +201,8 @@ export const resolvers = {
     },
   },
   OdinLesson: {
-    id: (lesson) => stringify("OdinLesson", lesson.id),
+    id: (lesson) => lesson.id,
+    path: (lesson) => lesson.path,
     title: (lesson) => lesson.title,
     body: (lesson) => lesson.body,
   },

apps/gql/schema/schema.graphql

@@ -316,6 +316,7 @@ type OdinQuery {
 type OdinLesson implements Node {
   id: ID!
   title: String!
+  path: String!
   body: OdinLessonBody!
 }
 

apps/gql/schema/types.generated.ts

@@ -127,6 +127,7 @@ export type OdinLesson = Node & {
   __typename?: "OdinLesson";
   body: OdinLessonBody;
   id: Scalars["ID"]["output"];
+  path: Scalars["String"]["output"];
   title: Scalars["String"]["output"];
 };
 
@@ -843,6 +844,7 @@ export type OdinLessonResolvers<
 > = ResolversObject<{
   body: Resolver<ResolversTypes["OdinLessonBody"], ParentType, ContextType>;
   id: Resolver<ResolversTypes["ID"], ParentType, ContextType>;
+  path: Resolver<ResolversTypes["String"], ParentType, ContextType>;
   title: Resolver<ResolversTypes["String"], ParentType, ContextType>;
   __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
 }>;

apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLesson.tsx

@@ -6,6 +6,7 @@ import { type SerializablePreloadedQuery } from "@kampus/relay";
 import useSerializablePreloadedQuery from "@kampus/relay/use-serializable-preloaded-query";
 
 import { type OdinLessonQuery } from "~/app/odin/mufredat/[[...lesson]]/__generated__/OdinLessonQuery.graphql";
+import { OdinLessonActions } from "./OdinLessonActions";
 import { OdinLessonBody } from "./OdinLessonBody";
 import { OdinLessonTitle } from "./OdinLessonTitle";
 
@@ -25,6 +26,7 @@ export const OdinLessonContainer = (props: Props) => {
               ...OdinLessonBody_body
             }
             ...OdinLessonTitle_title
+            ...OdinLessonActions_path
           }
         }
       }
@@ -38,6 +40,7 @@ export const OdinLessonContainer = (props: Props) => {
     <>
       <OdinLessonTitle lesson={data.odin.lesson} />
       <OdinLessonBody body={lesson?.body ?? null} />
+      <OdinLessonActions lesson={data.odin.lesson} />
     </>
   );
 };

apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLessonActions.tsx

@@ -0,0 +1,40 @@
+import { graphql, useFragment } from "react-relay";
+
+import { getOdinGithubEditUrl, getOdinGithubIssueUrl } from "~/features/kampus-url/kampus-github";
+import { type OdinLessonActions_path$key } from "./__generated__/OdinLessonActions_path.graphql";
+
+interface Props {
+  lesson: OdinLessonActions_path$key | null;
+}
+
+const useOdinLessonActionsFragment = (key: OdinLessonActions_path$key | null) =>
+  useFragment(
+    graphql`
+      fragment OdinLessonActions_path on OdinLesson {
+        title
+        path
+      }
+    `,
+    key
+  );
+
+export const OdinLessonActions = (props: Props) => {
+  const lesson = useOdinLessonActionsFragment(props.lesson);
+  if (!lesson?.path) return null;
+  // https://github.com/kamp-us/monorepo/edit/dev/contents/odin/foundations/installations/installation_overview.md
+  const contributionUrl = getOdinGithubEditUrl(lesson.path);
+  const issueUrl = getOdinGithubIssueUrl({ title: lesson.title, path: lesson.path });
+
+  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>
+  );
+};

apps/kampus/app/odin/mufredat/[[...lesson]]/layout.tsx

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
 
 export default function OdinLessonLayout({ children }: { children: ReactNode }) {
-  return <main className="container flex min-h-screen flex-col">{children}</main>;
+  return <main className="container flex mx-auto flex-col">{children}</main>;
 }

apps/kampus/features/kampus-url/kampus-github.ts

@@ -0,0 +1,37 @@
+const branchName = "dev";
+const baseUrl = "https://github.com/kamp-us/monorepo/";
+
+export const getOdinGithubUrl = ({ edit }: { edit: boolean }) => {
+  let url = baseUrl;
+  if (edit) {
+    url = url + "edit";
+  } else {
+    url = url + "blob";
+  }
+
+  return `${url}/${branchName}/contents/odin`;
+};
+
+export const getOdinGithubEditUrl = (path = "") => {
+  path = path.replaceAll("-", "_");
+  if (path.endsWith(".mdx")) {
+    path = path.replace(".mdx", ".md");
+  }
+
+  return `${getOdinGithubUrl({ edit: true })}/${path}`;
+};
+
+interface Lesson {
+  title: string;
+  path: string;
+}
+
+export const getOdinGithubIssueUrl = (lesson: Lesson) => {
+  const params = {
+    template: "suggestion.yaml",
+    title: `${lesson.title}: <Önerinizin kısa bir açıklaması>`,
+    "lesson-link": lesson.path,
+  };
+
+  return `${baseUrl}/issues/new?${new URLSearchParams(params).toString()}`;
+};

package.json

@@ -9,7 +9,7 @@
   ],
   "scripts": {
     "gql": "turbo dev --filter=@kampus-apps/gql",
-    "web": "turbo dev --filter=@kampus-apps/*",
+    "web": "NODE_ENV=development turbo dev --filter=@kampus-apps/*",
     "dev": "turbo dev",
     "build": "turbo run build",
     "prettier": "prettier --write .",

packages/odin-content/contentlayer.config.ts

@@ -4,6 +4,8 @@ import { getMDXComponent } from "mdx-bundler/client/index.js";
 import * as ReactDOMServer from "react-dom/server";
 import wikiLinkPlugin from "remark-wiki-link-plus";
 
+import { buildPublicOdinLessonID, getPublicOdinPath, slugifyTurkishTitle } from "./utils";
+
 const mdxToHtml = async (mdxSource: string) => {
   const { code } = await bundleMDX({
     source: mdxSource,
@@ -31,7 +33,7 @@ const mdxToHtml = async (mdxSource: string) => {
 
 const Lesson = defineDocumentType(() => ({
   name: "Lesson",
-  filePathPattern: "**/*.mdx",
+  filePathPattern: "**/*.md",
   fields: {
     title: {
       type: "string",
@@ -42,7 +44,11 @@ const Lesson = defineDocumentType(() => ({
   computedFields: {
     id: {
       type: "string",
-      resolve: (doc) => doc._raw.flattenedPath,
+      resolve: (doc) => buildPublicOdinLessonID(doc._raw.sourceFilePath, doc.title),
+    },
+    path: {
+      type: "string",
+      resolve: (doc) => doc._raw.sourceFilePath,
     },
     html: {
       type: "string",
@@ -52,6 +58,6 @@ const Lesson = defineDocumentType(() => ({
 }));
 
 export default makeSource({
-  contentDirPath: "curriculum",
+  contentDirPath: "../../contents/odin",
   documentTypes: [Lesson],
 });