Update APIs and Fonts

Author: AttAditya

src/App.jsx

@@ -21,7 +21,7 @@ export function App() {
   const switchContent = useCallback((item) => {
     setLoading(true);
     setContent(null);
-    getContent(item.url, (content) => {
+    getContent(item, (content) => {
       setEditUrl(remoteUrl(item.path));
       setContent(content);
       setLoading(false);

src/components/Content/index.jsx

@@ -30,7 +30,10 @@ export function Content({ content, loading }) {
       </a>);
     }
 
-    return (<div key={key} className={content.type}>
+    return (<div key={key} className={[
+      content.type,
+      `depth-${content.depth}`,
+    ].join(" ")}>
       { decoded.map((item) => item) }
     </div>);
   }

src/components/Content/style.css

@@ -47,14 +47,28 @@
   flex-direction: column;
   gap: 1rem;
   font-size: 1rem;
+  font-weight: 200;
+  line-height: 1.5;
 }
 
-.content .heading {
+.content .heading.depth-1 {
   font-size: 2rem;
   margin-top: 2rem;
   font-weight: 600;
 }
 
+.content .heading.depth-2 {
+  font-size: 1.5rem;
+  margin-top: 1.5rem;
+  font-weight: 600;
+}
+
+.content .heading.depth-3 {
+  font-size: 1.25rem;
+  margin-top: 1.25rem;
+  font-weight: 600;
+}
+
 .content .heading:first-child {
   margin-top: 0;
 }

src/styles/index.css

@@ -11,6 +11,7 @@
   color: var(--color-white);
   user-select: none;
   -webkit-user-select: none;
+  font-family: inherit;
   transition:
     transform 0.3s ease-in-out,
     filter 0.3s ease-in-out,

src/utils/api.js

@@ -2,7 +2,7 @@ import { useCallback } from "react";
 import { unified } from "unified";
 import remarkParse from "remark-parse";
 
-import { getTree } from "./github";
+import { getTree, rawContentUrl } from "./github";
 
 export const useApi = () => {
   const getTopics = useCallback(async () => {
@@ -17,6 +17,7 @@ export const useApi = () => {
       const sectionName = sectionParts.join(" ");
 
       sections[item.path] = {
+        path: item.path,
         title: sectionName,
         order: sectionOrder,
         items: [],
@@ -57,11 +58,11 @@ export const useApi = () => {
     );
   }, []);
 
-  const getContent = useCallback(async (topicUrl, successCallback) => {
-    const topicResp = await fetch(topicUrl);
-    const topicData = await topicResp.json();
-    const decoded = decodeURIComponent(escape(atob(topicData.content)));
+  const getContent = useCallback(async (section, successCallback) => {
+    const contentResp = await fetch(rawContentUrl(section.path));
+    const decoded = await contentResp.text();
     const content = unified().use(remarkParse).parse(decoded);
+    console.log(content);
 
     await new Promise((resolve) => {
       setTimeout(resolve, 1000);

src/utils/github.js

@@ -2,15 +2,17 @@ const orgName = "GraphScript-Labs";
 const repo = "guidebook";
 const branch = "main";
 const apiUrl = "https://api.github.com";
+const rawUrl = "raw.githubusercontent.com";
 
 const githubUrl = `${apiUrl}/repos/${orgName}/${repo}/branches/${branch}`;
+const headers = {}
 
 export const getTree = async () => {
-  const repoDetailResp = await fetch(githubUrl);
+  const repoDetailResp = await fetch(githubUrl, { headers });
   const repoDetail = await repoDetailResp.json();
 
   const treeUrl = repoDetail.commit.commit.tree.url;
-  const treeResp = await fetch(`${treeUrl}?recursive=1`);
+  const treeResp = await fetch(`${treeUrl}?recursive=1`, { headers });
   const treeData = await treeResp.json();
 
   return treeData.tree;
@@ -20,3 +22,7 @@ export const remoteUrl = (path) => {
   return `https://github.com/${orgName}/${repo}/blob/${branch}/${path}`;
 }
 
+export const rawContentUrl = (path) => {
+  return `https://${rawUrl}/${orgName}/${repo}/refs/heads/${branch}/${path}`;
+}
+