Merge pull request #325 from vordgi/rd-324

rd-324 implement different containers

packages/robindoc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "robindoc",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "",
   "main": "./lib/index.js",
   "scripts": {

packages/robindoc/src/components/blocks/contents/contents.scss

@@ -10,7 +10,6 @@
   width: 100%;
 
   @media screen and (width >= $lg) {
-    width: 220px;
     padding: 0 12px;
     max-height: calc(100vh - var(--header-height));
     overflow: auto;

packages/robindoc/src/components/elements/blog-container/blog-container.scss

@@ -0,0 +1,15 @@
+@import "src/assets/_vars";
+
+.r-blog-container {
+  min-height: calc(100vh - var(--header-height));
+  overflow-wrap: break-word;
+
+  @media screen and (width >= $lg) {
+    display: grid;
+    justify-content: space-between;
+    column-gap: 40px;
+    grid-template-areas: "breadcrumbs contents" "content contents" "pagination contents";
+    grid-template-columns: 760px 220px;
+    grid-template-rows: auto 1fr auto;
+  }
+}

packages/robindoc/src/components/elements/blog-container/index.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+import { Container } from "@src/components/ui/container";
+
+import "./blog-container.scss";
+
+export const BlogContainer: React.FC<React.PropsWithChildren> = ({ children }) => {
+    return (
+        <Container component="main" className="r-blog-container">
+            {children}
+        </Container>
+    );
+};

packages/robindoc/src/components/elements/main/main.scss → packages/robindoc/src/components/elements/docs-container/docs-container.scss

@@ -1,6 +1,6 @@
 @import "src/assets/_vars";
 
-.r-main {
+.r-docs-container {
   min-height: calc(100vh - var(--header-height));
   overflow-wrap: break-word;
 
@@ -9,14 +9,14 @@
     justify-content: center;
     column-gap: 32px;
     grid-template-areas: "sidebar breadcrumbs" "sidebar contents" "sidebar content" "sidebar pagination";
-    grid-template-columns: auto calc(100% - 248px);
+    grid-template-columns: 1fr calc(100% - 248px);
     grid-template-rows: auto auto 1fr auto;
   }
 
   @media screen and (width >= $lg) {
     column-gap: 40px;
     grid-template-areas: "sidebar breadcrumbs contents" "sidebar content contents" "sidebar pagination contents";
-    grid-template-columns: auto 640px auto;
+    grid-template-columns: 1fr 640px 1fr;
     grid-template-rows: auto 1fr auto;
   }
 }

packages/robindoc/src/components/elements/docs-container/index.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+import { Container } from "@src/components/ui/container";
+
+import "./docs-container.scss";
+
+export const DocsContainer: React.FC<React.PropsWithChildren> = ({ children }) => {
+    return (
+        <Container component="main" className="r-docs-container">
+            {children}
+        </Container>
+    );
+};

packages/robindoc/src/components/elements/sidebar/sidebar.scss

@@ -1,7 +1,6 @@
 @import "src/assets/_vars";
 
 .r-sidebar {
-  width: 220px;
   grid-area: sidebar;
 
   @media screen and (width < $sm) {

packages/robindoc/src/index.tsx

@@ -2,6 +2,7 @@ export { initializeRobindoc } from "./core/utils/initialize-robindoc";
 export { Header } from "./components/elements/header";
 export { Footer } from "./components/elements/footer";
 export { RobinProvider } from "./components/elements/robin-provider";
-export { Main } from "./components/elements/main";
+export { DocsContainer } from "./components/elements/docs-container";
+export { BlogContainer } from "./components/elements/blog-container";
 export { KeylinkToContent } from "./components/elements/keylink-to-content";
 export { KeylinkToNavigation } from "./components/elements/keylink-to-navigation";

site/src/app/docs/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Main, KeylinkToNavigation } from 'robindoc';
+import { DocsContainer, KeylinkToNavigation } from 'robindoc';
 
 import { Sidebar } from "./robindoc";
 
@@ -13,11 +13,11 @@ export const metadata: Metadata = {
 
 const DocsLayout = ({ children }: Readonly<{ children?: JSX.Element }>) => {
     return (
-        <Main>
+        <DocsContainer>
             <Sidebar />
             {children}
             <KeylinkToNavigation />
-        </Main>
+        </DocsContainer>
     );
 }
 

site/src/app/docs/robindoc.ts

@@ -1,6 +1,6 @@
 import { initializeRobindoc } from "robindoc";
 
-export const { Page, Sidebar, getPages, getMeta, getPageContent, getPageData } = initializeRobindoc(async () => ({
+export const { Page, Sidebar, getPages, getMeta, getPageContent, getPageData } = initializeRobindoc({
     configuration: {
         // sourceRoot: 'https://github.com/vordgi/robindoc/tree/main/docs',
         sourceRoot: '../docs',
@@ -20,4 +20,4 @@ export const { Page, Sidebar, getPages, getMeta, getPageContent, getPageData } =
         },
         "auto"
     ],
-}));
+});