modify width of post and update readme

README.md

@@ -13,21 +13,21 @@ If you want to host this page on your own you can take our docker image
 
 ## Install
 
-This website uses the [Hugo](https://github.com/spf13/hugo) static site
-generator. If you are planning to contribute you'll want to download and install
-Hugo on your local machine.
+This website uses the [Docusaurus](https://docusaurus.io/) static site
+generator. If you are planning to contribute you'll want to install
+Docusaurus on your local machine.
 
-The installation of Hugo is out of the scope of this document, so please take
-the [official install instructions](https://gohugo.io/overview/installing/) to
-get Hugo up and running.
+The installation of Docusaurus is out of the scope of this document, so please take
+the [official install instructions](https://docusaurus.io/docs/installation) to
+get Docusaurus up and running.
 
 ## Development
 
-To generate the website and serve it on [localhost:1313](http://localhost:1313)
+To generate the website and serve it on [localhost:3000](http://localhost:3000/)
 just execute this command and stop it with `Ctrl+C`:
 
 ```
-make server
+npm run start
 ```
 
 When you are done with your changes just create a pull request, after merging

src/theme/BlogLayout/index.js

@@ -0,0 +1,33 @@
+// Ejected unsafe, need to check if this changes and maintain this component
+// https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-classic/src/theme/BlogLayout/index.tsx
+import React from 'react';
+import clsx from 'clsx';
+import Layout from '@theme/Layout';
+import BlogSidebar from '@theme/BlogSidebar';
+
+// customized:
+// - Use 'col--9' for `main` if there is no toc
+export default function BlogLayout(props) {
+  const {sidebar, toc, children, ...layoutProps} = props;
+  const hasSidebar = sidebar && sidebar.items.length > 0;
+  return (
+    <Layout {...layoutProps}>
+      <div className="container margin-vert--lg">
+        <div className="row">
+          <BlogSidebar sidebar={sidebar} />
+          <main
+            className={clsx('col', {
+              'col--7': hasSidebar,
+              'col--9 col--offset-1': !hasSidebar,
+              'col--9': !toc,
+            })}
+            itemScope
+            itemType="http://schema.org/Blog">
+            {children}
+          </main>
+          {toc && <div className="col col--2">{toc}</div>}
+        </div>
+      </div>
+    </Layout>
+  );
+}

src/theme/BlogListPage/index.js

@@ -18,6 +18,9 @@ import { Chips } from './Chips';
 import styles from './styles.module.css';
 import useGlobalData from '@docusaurus/useGlobalData';
 
+// customized:
+// - Layout
+// - Tags list page
 function BlogListPageMetadata(props) {
   const isTagsPage = props.tag !== undefined;
   const metadata = isTagsPage ? props.listMetadata: props.metadata;

src/theme/BlogPostPage/index.js

@@ -12,8 +12,8 @@ import TOC from '@theme/TOC';
 import styles from './styles.module.css';
 
 // customized:
-// Hide toc
-// Added Cover Image to the post
+// - Hide toc
+// - Added Cover Image to the post
 function BlogPostPageContent({sidebar, children}) {
   const {metadata, toc} = useBlogPost();
   const {nextItem, prevItem, frontMatter, title} = metadata;
@@ -25,6 +25,7 @@ function BlogPostPageContent({sidebar, children}) {
   return (
     <BlogLayout
       sidebar={sidebar}
+      toc={undefined}
     >
       <BlogPostItem>
         {frontMatter.coverImage && <figure>