Working on UI

website/package.json

@@ -31,6 +31,7 @@
     "react-dom": "^18.2.0",
     "react-fusioncharts": "^4.0.0",
     "react-github-btn": "^1.4.0",
+    "react-markdown": "^9.0.1",
     "react-pro-sidebar": "^1.1.0",
     "react-router-dom": "^6.22.3",
     "react-toastify": "^10.0.5",

website/src/App.css

@@ -3,4 +3,21 @@
     /* Take up all available width */
     height: 100%;
     /* Take up all available height */
+}
+
+.app-container {
+    display: flex;
+    height: 100vh;
+}
+
+.sidebar {
+    flex-shrink: 0;
+    /* Prevent sidebar from shrinking */
+}
+
+.content {
+    flex-grow: 1;
+    /* Expand content to fill remaining space */
+    overflow-y: auto;
+    /* Enable vertical scrolling for content */
 }

website/src/App.tsx

@@ -5,6 +5,7 @@ import MainPage from "./MainPage";
 import TimeSeriesChart from "./TimeSeriesChart";
 import CompareChart from "./CompareChart";
 import CalendarChart from "./CalendarChart";
+import InfoPage from "./InfoPage";
 
 import { Sidebar, Menu, MenuItem } from "react-pro-sidebar";
 import { Routes, Route, Link } from "react-router-dom";
@@ -34,11 +35,12 @@ function App() {
   return (
     <ThemeProvider theme={darkTheme}>
       <CssBaseline />
-      <div style={{ display: "flex", height: "100vh" }}>
+      <div className="app-container">
         <Sidebar
-          className="app"
+          className="sidebar"
           collapsed={collapsed}
           backgroundColor="rgb(51, 117, 117)"
+          width={collapsed ? "70" : "200"}
         >
           <Menu
             menuItemStyles={{
@@ -64,7 +66,7 @@ function App() {
                 </Tooltip>
               }
             >
-              <h2 style={{ color: "black" }}>Repo Stats</h2>
+              <h2 style={{ color: "black" }}>Stars Explorer</h2>
             </MenuItem>
             <MenuItem
               component={<Link to="/starstimeline/:id" className="link" />}
@@ -118,7 +120,7 @@ function App() {
             </MenuItem>
           </Menu>
         </Sidebar>
-        <section style={{ width: "90%", height: "90%" }}>
+        <section className="content">
           <Routes>
             <Route path="/" element={<TimeSeriesChart />} />
             <Route path="/:user/:repository" element={<TimeSeriesChart />} />
@@ -130,6 +132,7 @@ function App() {
               element={<CompareChart />}
             />
             <Route path="/calendar" element={<CalendarChart />} />
+            <Route path="/info" element={<InfoPage />} />
           </Routes>
         </section>
       </div>

website/src/InfoPage.jsx

@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from "react";
+import ReactMarkdown from "react-markdown";
+import { Link } from "react-router-dom";
+import info from "./info.md";
+
+const InfoPage = () => {
+  const [markdownContent, setMarkdownContent] = useState("");
+
+  useEffect(() => {
+    fetch(info) // Fetch the markdown file
+      .then((response) => response.text())
+      .then((text) => setMarkdownContent(text))
+      .catch((error) => console.error(error));
+  }, []);
+
+  const customRenderer = {
+    a: ({ href, children }) => (
+      <Link
+        to={href}
+        style={{ color: "#0366d6", textDecoration: "underlined" }}
+      >
+        {children}
+      </Link>
+    ),
+  };
+
+  return (
+    <div style={{ margin: "20px 20px" }}>
+      <ReactMarkdown components={customRenderer}>
+        {markdownContent}
+      </ReactMarkdown>
+    </div>
+  );
+};
+
+export default InfoPage;

website/vite.config.ts

@@ -5,4 +5,5 @@ import react from '@vitejs/plugin-react'
 export default defineConfig({
   base: '/daily-stars-explorer/',
   plugins: [react()],
+  assetsInclude: ["**/*.md"],
 })