Docs page

biolab · Oct 19, 2023 · 42d8f0c · 42d8f0c · vercel · Oct 19, 2023
1 parent d68ab35
commit 42d8f0c
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 29 deletions.
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -2,16 +2,30 @@ import Footer from "./Footer/Footer";
 import Navbar from "./Navbar/Navbar";
 import Search from "@components/Search/Search";
 import SearchContextProvider from "./Search/Search.context";
+import styled from "styled-components";
+import { Source_Sans_Pro } from "next/font/google";
+
+const font = Source_Sans_Pro({
+  style: "normal",
+  weight: ["400", "600", "700"],
+  subsets: ["latin"],
+});
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <>
+    <StWrapper className={font.className}>
       <SearchContextProvider>
         <Navbar />
         <main>{children}</main>
         <Footer />
         <Search />
       </SearchContextProvider>
-    </>
+    </StWrapper>
   );
 }
+
+const StWrapper = styled.div`
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+`;
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -4,27 +4,17 @@ import { ThemeProvider } from "styled-components";
 import Layout from "../components/Layout";
 import { GlobalStyle } from "../styles/GlobalStyles";
 import { theme } from "../styles/theme";
-import { Source_Sans_Pro } from "next/font/google";
-
-const font = Source_Sans_Pro({
-  style: "normal",
-  weight: ["400", "600", "700"],
-  subsets: ["latin"],
-});
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <ThemeProvider theme={theme}>
       <GlobalStyle />
-
-      <div className={font.className}>
-        <Layout>
-          <Head>
-            <title>Orange Data Mining</title>
-          </Head>
-          <Component {...pageProps} />
-        </Layout>
-      </div>
+      <Layout>
+        <Head>
+          <title>Orange Data Mining</title>
+        </Head>
+        <Component {...pageProps} />
+      </Layout>
     </ThemeProvider>
   );
 }
diff --git a/pages/docs/index.tsx b/pages/docs/index.tsx
@@ -6,6 +6,9 @@ import fs from "fs";
 import matter from "gray-matter";
 import { serialize } from "next-mdx-remote/serialize";
 import MdContent from "@components/MdContent/MdContent";
+import MainLayout from "@components/UiKit/MainLayout";
+import styled from "styled-components";
+import device from "@styles/utils/breakpoints";
 
 export async function getStaticProps() {
   const mdFiles = getAllMdFilesInDir(path.join("public", "docs"));
@@ -41,19 +44,53 @@ export async function getStaticProps() {
   };
 }
 
-export default function Docs({ sections, index }: { sections: any[]; index: any }) {
+export default function Docs({
+  sections,
+  index,
+}: {
+  sections: any[];
+  index: any;
+}) {
   return (
-    <Adapt $mt>
-      <h1>{index.title}</h1>
-
-      {sections.map(({ title, mdxSource, image }) => (
-        <React.Fragment key={title}>
-          <h2>{title}</h2>
-          <MdContent key={title} content={mdxSource} />
-        </React.Fragment>
-      ))}
+    <MainLayout title={index.title}>
+      <StSectionsWrapper>
+        {sections.map(({ title, mdxSource }) => (
+          <div key={title}>
+            <h2>{title}</h2>
+            <MdContent key={title} content={mdxSource} />
+          </div>
+        ))}
+      </StSectionsWrapper>
 
       <MdContent content={index.mdxSource} />
-    </Adapt>
+    </MainLayout>
   );
 }
+
+const StSectionsWrapper = styled.div`
+  padding: 0 30px;
+  max-width: 1000px;
+  margin: 80px auto;
+  display: flex;
+  justify-content: space-between;
+  column-gap: 40px;
+  row-gap: 60px;
+  flex-wrap: wrap;
+
+  h2 {
+    font-size: 24px;
+    font-weight: 600;
+    margin-bottom: 20px;
+  }
+
+  a {
+    font-size: 18px;
+    font-weight: 600;
+    display: block;
+    width: fit-content;
+  }
+
+  a + a {
+    margin-top: 10px;
+  }
+`;
diff --git a/public/docs/programming.md → public/docs/1programming.md b/public/docs/programming.md → public/docs/1programming.md
diff --git a/public/docs/development.md → public/docs/2development.md b/public/docs/development.md → public/docs/2development.md
diff --git a/public/docs/python_library.md → public/docs/3python_library.md b/public/docs/python_library.md → public/docs/3python_library.md
diff --git a/styles/GlobalStyles.tsx b/styles/GlobalStyles.tsx
@@ -30,6 +30,7 @@ export const GlobalStyle = createGlobalStyle`
 
   main {
     padding-top: 80px;
+    flex: 1;
   }
 
   ol, ul {