Better API

Author: AttAditya

src/App.css

@@ -25,12 +25,8 @@
   align-items: center;
   justify-content: center;
   border-radius: 0.5rem;
-  background: linear-gradient(
-    to bottom right,
-    var(--color-primary),
-    var(--color-secondary),
-    var(--color-tertiary)
-  );
+  background: var(--gradient);
+  color: var(--color-gradient);
   cursor: pointer;
   opacity: 0.5;
   box-shadow: 0 0 0.5rem #00000000;

src/components/Content/style.css

@@ -34,12 +34,8 @@
   aspect-ratio: 1;
   border-radius: 0.5rem;
   animation: spinner 1s linear infinite;
-  background: linear-gradient(
-    to bottom right,
-    var(--color-primary),
-    var(--color-secondary),
-    var(--color-tertiary)
-  );
+  background: var(--gradient);
+  color: var(--color-gradient);
 }
 
 .content .root {
@@ -108,12 +104,8 @@
   aspect-ratio: 1;
   rotate: 45deg;
   border-radius: 0.25rem;
-  background: linear-gradient(
-    to bottom right,
-    var(--color-primary),
-    var(--color-secondary),
-    var(--color-tertiary)
-  );
+  background: var(--gradient);
+  color: var(--color-gradient);
 }
 
 .content .root:empty {
@@ -130,7 +122,7 @@
 }
 
 .content .code {
-  background: #ffffff33;
+  background: var(--color-white);
   padding: 1rem;
   border-radius: 0.5rem;
   font-family: "JetBrains Mono", monospace;
@@ -150,7 +142,7 @@
 }
 
 .content .inlineCode {
-  background: #ffffff33;
+  background: var(--color-white);
   padding: 0.125rem 0.25rem;
   border-radius: 0.25rem;
   font-family: "JetBrains Mono", monospace;
@@ -171,12 +163,8 @@
   aspect-ratio: 1;
   border-radius: 0.5rem;
   padding: 0.5rem;
-  background: linear-gradient(
-    to bottom right,
-    var(--color-primary),
-    var(--color-secondary),
-    var(--color-tertiary)
-  );
+  background: var(--gradient);
+  color: var(--color-gradient);
 }
 
 .no-content-icon > * {

src/components/Navbar/style.css

@@ -14,12 +14,8 @@
   left: 0;
   width: 100%;
   height: 0.25rem;
-  background: linear-gradient(
-    to right,
-    var(--color-primary),
-    var(--color-secondary),
-    var(--color-tertiary)
-  );
+  background: var(--gradient);
+  color: var(--color-gradient);
 }
 
 .navbar-container {
@@ -52,15 +48,11 @@
   align-items: center;
   justify-content: center;
   border-radius: 0.5rem;
-  background: linear-gradient(
-    to bottom right,
-    var(--color-primary),
-    var(--color-secondary),
-    var(--color-tertiary)
-  );
+  background: var(--gradient);
   cursor: pointer;
   opacity: 0.5;
   box-shadow: 0 0 0.5rem #00000000;
+  color: var(--color-gradient);
 }
 
 .navbar-home:hover {

src/components/Sidebar/style.css

@@ -3,12 +3,8 @@
   margin: 2rem;
   overflow: hidden;
   border-radius: 1rem;
-  background: linear-gradient(
-    to bottom right,
-    var(--color-primary),
-    var(--color-secondary),
-    var(--color-tertiary)
-  );
+  background: var(--gradient);
+  color: var(--color-gradient);
 }
 
 .sidebar {

src/styles/index.css

@@ -8,7 +8,7 @@
   box-sizing: border-box;
   cursor: inherit;
   background: transparent;
-  color: var(--color-white);
+  color: inherit;
   user-select: none;
   -webkit-user-select: none;
   font-family: inherit;
@@ -37,7 +37,7 @@ html, body, #root {
   height: 100%;
   cursor: default;
   background-color: var(--color-background);
-  color: var(--color-white);
+  color: var(--color-text);
   overflow-y: auto;
   transition: none;
   font-family:

src/styles/variables.css

@@ -11,5 +11,14 @@
   --color-success: #4CAF50;
   --color-warning: #FF9800;
 
-  --color-background: #111111;
+  --color-background: #E0E0E0;
+  --color-text: #111111;
+  --color-gradient: #FFFFFF;
+
+  --gradient: linear-gradient(
+    to bottom right,
+    var(--color-primary),
+    var(--color-secondary),
+    var(--color-tertiary)
+  );
 }

src/utils/api.js

@@ -62,7 +62,6 @@ export const useApi = () => {
     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

@@ -1,18 +1,17 @@
 const orgName = "GraphScript-Labs";
 const repo = "guidebook";
 const branch = "main";
-const apiUrl = "https://api.github.com";
+const apiUrl = "https://gh-api.adityaprasaddash-official.workers.dev";
 const rawUrl = "raw.githubusercontent.com";
 
 const githubUrl = `${apiUrl}/repos/${orgName}/${repo}/branches/${branch}`;
-const headers = {}
 
 export const getTree = async () => {
-  const repoDetailResp = await fetch(githubUrl, { headers });
+  const repoDetailResp = await fetch(githubUrl);
   const repoDetail = await repoDetailResp.json();
 
   const treeUrl = repoDetail.commit.commit.tree.url;
-  const treeResp = await fetch(`${treeUrl}?recursive=1`, { headers });
+  const treeResp = await fetch(`${treeUrl}?recursive=1`);
   const treeData = await treeResp.json();
 
   return treeData.tree;