first commit

src/components/HomepageFeatures/index.js

@@ -0,0 +1,98 @@
+import clsx from 'clsx';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+
+const FeatureList = [
+  {
+    title: '1960s',
+    description: (
+      <>
+        The 1960s were mainly the years of mainframes and minicomputers. It saw the rise of DEC minicomputers like PDP-1, PDP-4, PDP-7, PDP-9, PDP-15, PDP-5, PDP-8, PDP-12 and the PDP-11. There were many interesting operating systems made for these computers.
+      </>
+    ),
+    link: '/1960s',
+    buttontext: "Let's Go!",
+  },
+  {
+    title: '1970s',
+    description: (
+      <>
+        1970s were the age in which microcomputers evolved, but many of the operating systems we are going to cover are still minicomputer ones. This decade saw the rise of many historic operating systems including Unix, Alto OS, Apple DOS, VAX/VMS and CP/M.
+      </>
+    ),
+    link: '/1970s',
+    buttontext: "Let's Go!",
+  },
+  {
+    title: '1980s',
+    description: (
+      <>
+        The 1980s were the years of personal computing. The release of IBM PC in 1981 started a new era. There were also many other famous microcomputers which came out in this decade, like the Commodore 64, BBC Micro and the Tandy 2000. There were many OSs for these systems.
+      </>
+    ),
+    link: '#',
+    buttontext: 'Coming Soon!',
+  },
+  {
+    title: '1990s',
+    description: (
+      <>
+        Done with the 80s? Let's go explore the newer versions of those OS and software which survived to the new decade and the ones which were newly introduced. This was the decade in which Windows evolved from a shell on top of DOS to a full fledged OS.
+      </>
+    ),
+    link: '#',
+    buttontext: 'Coming Soon!',
+  },
+  {
+    title: '2000s',
+    description: (
+      <>
+        Operating Systems released in 2000s are not really "old", so we are not going to cover proprietary operating systems from that era, but we are going to cover the open source ones. This includes Linux distros and other modern FOSS versions of the classic OSs.
+      </>
+    ),
+    link: '#',
+    buttontext: 'Coming Soon!',
+  },
+  {
+    title: 'Apps',
+    description: (
+      <>
+        Using Operating Systems with built-in apps only is boring. See our tutorials on how to install different third-party apps from on different operating systems. Explore the old <em>killer</em> apps like Visicalc and Word Star and feel their power.
+      </>
+    ),
+    link: '#',
+    buttontext: 'Coming Soon!',
+  },
+];
+
+function Feature({title, description, link, buttontext}) {
+  return (
+    <div className={clsx('col col--4')}>
+      <div className="text--center padding-horiz--md padding-vert--md">
+        <Heading as="h2">{title}</Heading>
+        <p>{description}</p>
+        <div className={styles.buttons}>
+          <a
+            className="button button--primary button--md"
+            href={link}>
+            {buttontext}
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepageFeatures() {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+        <div className="row">
+          {FeatureList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/HomepageFeatures/styles.module.css

@@ -0,0 +1,17 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/css/custom.css

@@ -0,0 +1,90 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #2e8555;
+  --ifm-color-primary-dark: #29784c;
+  --ifm-color-primary-darker: #277148;
+  --ifm-color-primary-darkest: #205d3b;
+  --ifm-color-primary-light: #33925d;
+  --ifm-color-primary-lighter: #359962;
+  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme='dark'] {
+  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-light: #29d5b0;
+  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-lightest: #4fddbf;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
+
+.header-github-link::before {
+  content: '';
+  width: 20px;
+  height: 20px;
+  display: flex;
+  background-color: var(--ifm-navbar-link-color);
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22'/%3E%3C/svg%3E");
+  transition: background-color var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+.header-github-link:hover::before {
+  background-color: var(--ifm-navbar-link-hover-color);
+}
+
+.header-twitter-link::before {
+  content: '';
+  width: 20px;
+  height: 20px;
+  display: flex;
+  background-color: var(--ifm-navbar-link-color);
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z'/%3E%3C/svg%3E");
+  transition: background-color var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+.header-twitter-link:hover::before {
+  background-color: var(--ifm-navbar-link-hover-color);
+}
+
+.header-youtube-link::before {
+  content: '';
+  width: 20px;
+  height: 20px;
+  display: flex;
+  background-color: var(--ifm-navbar-link-color);
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z'/%3E%3Cpolygon points='9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02'/%3E%3C/svg%3E");
+  transition: background-color var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+.header-youtube-link:hover::before {
+  background-color: var(--ifm-navbar-link-hover-color);
+}
+
+.header-telegram-link::before {
+  content: '';
+  width: 20px;
+  height: 20px;
+  display: flex;
+  background-color: var(--ifm-navbar-link-color);
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E");
+  transition: background-color var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+.header-telegram-link:hover::before {
+  background-color: var(--ifm-navbar-link-hover-color);
+}

src/pages/about.md

@@ -0,0 +1,38 @@
+---
+title: About VirtualHub
+description: Learn more about VirtualHub, the repository of tutorials on how to install old operating systems in different VMs and emulators.
+---
+import styles from './logo.module.css';
+
+# About VirtualHub
+
+<p className='text--center'><img className={styles.logo} alt="VirtualHub logo" src="/img/logo.webp" width="150"/></p>
+
+:::tip
+
+Visit [VirtualHub Blog](/blog) to know more about the fascinating history and stories about VirtualHub.
+
+:::
+
+<div className="text--center container">
+  <p>We love to chat with people who love old software. Come join us on discord:</p>
+  <p>
+    <a href="https://chat.virtualhub.eu.org">
+      <img width="320" height="76" src="https://discordapp.com/api/guilds/1176107431013646357/widget.png?style=banner2" alt="Discord Banner"/>
+    </a>
+  </p>
+</div>
+
+VirtualHub is a repository of tutorials and resources on how to install old operating systems and apps in virtual machines and emulators. We believe that *everyone* should learn about the heritage of computing. What is the best way to learn how the classical operating systems used to look and behave? What is the best way to learn what the users of those systems felt? To run those systems and apps yourself, of course.
+
+We help you do that by providing you clear guidance on how to start running those systems and apps on the emulator or VM software of your choice. We believe that each emulator and VM software has their own advantage. So, we cover installing the same operating system on many of them.
+
+We provide many resources to help you learn how to use the OSs and apps too. We provide links to many sites and third-party tutorials related to the OS or app. One of the characteristic features of the old software were their manuals. We provide links to PDF copies of the documentation manuals of those OS and apps, if available, so that you can have the same learning experience as the people in that age.
+
+We also provide tutorials on how to install the emulators themselves, but since they are modern software and ever-changing, those tutorials need to be updated very frequently. Hence, we host those on a separate site: [https://setup.virtualhub.eu.org](https://setup.virtualhub.eu.org).
+
+Though we believe that everyone should *run* these operating systems and apps themselves to feel their real power, we know that not everyone has time or resources to do so. That's why we have a separate site with screenshots of these operating systems and apps: [https://screenshots.virtualhub.eu.org](https://screenshots.virtualhub.eu.org).
+
+While the computing history is diverse, the majority of desktop apps made after 1980 run on DOS or Windows. Though we can run those on the emulated operating systems, we can also run them in a better way using software such as [DOSBox-X](https://dosbox-x.com/) or [WINE](https://www.winehq.org/). Most old apps made for Windows can also directly run on modern Windows. We will soon launch a separate website with tutorials on how to run such apps via these methods.
+
+VirtualHub is a volunteer project. We do *not* display any advertisement or track you in any way. We do not have any income from the VirtualHub project. While we use only free tools to make and host these websites, so we don't have any expenses, our work is still unpaid. You can help us by [contributing to VirtualHub](https://github.com/InstallerLegacy/virtualhub.eu.org/blob/main/CONTRIBUTING.md).

src/pages/contact.md

@@ -0,0 +1,32 @@
+---
+title: Contact
+description: Contact Us.
+---
+import styles from './contact.module.css';
+
+# Contact
+
+<form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field">
+  <div className={styles.formInner}>
+    <div className={styles.hidden}>
+        <p>Don’t fill this out if you’re human: </p>
+        <input name="bot-field" />
+    </div>
+    <p>Your Name: </p>
+    <input type="text" name="name" />
+    <p>Your Email: </p>
+    <input type="email" name="email" />
+    <p>Message: </p>
+    <textarea name="message" rows="5"></textarea>
+    <button className={styles.greenButton} type="submit" id="btnSubmit">Submit</button>
+  </div>
+</form>
+
+<div className="text--center container">
+  <p>You can also chat with us on Discord:</p>
+  <p>
+    <a href="https://chat.virtualhub.eu.org">
+      <img width="320" height="76" src="https://discordapp.com/api/guilds/1176107431013646357/widget.png?style=banner2" alt="Discord Banner"/>
+    </a>
+  </p>
+</div>

src/pages/contact.module.css

@@ -0,0 +1,39 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.formInner {
+padding: 40px;
+}
+.formInner input,
+.formInner textarea {
+display: block;
+width: 100%;
+padding: 15px;
+margin-bottom: 10px;
+border: none;
+border-radius: 20px;
+background: #dff5e5;
+color: black;
+}
+.formInner textarea {
+resize: none;
+}
+.greenButton {
+width: 100%;
+padding: 10px;
+margin-top: 20px;
+border-radius: 20px;
+border: none;
+background: #15ba47;
+font-size: 16px;
+font-weight: 400;
+color: #fff;
+}
+.greenButton:hover {
+background: #00581b;
+}
+.hidden {
+display: none;
+}

src/pages/index.js

@@ -0,0 +1,53 @@
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import HomepageFeatures from '@site/src/components/HomepageFeatures';
+
+import Heading from '@theme/Heading';
+import styles from './index.module.css';
+
+function HomepageHeader() {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <header className={styles.heroBanner}>
+      <div className="container">
+        <img className={styles.logo} alt="VirtualHub logo" src="/img/logo.webp" width="180" height="180"/>
+        <Heading as="h1" className="hero__title">
+          Welcome to {siteConfig.title}!
+        </Heading>
+        <p className="hero__subtitle">
+          Want to experience old operating systems without purchasing old computers? You have come to the right place! Browse our library of tutorials on how to install legacy operating systems in virtual machines and emulators and feel the power of old.
+        </p>
+        <div className={styles.buttons}>
+          <Link
+            className="button button--primary button--lg"
+            to="/start-here">
+            Get Started
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default function Home() {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <Layout
+      title={`${siteConfig.title} - ${siteConfig.tagline}`}
+      description="Want to experience old operating systems without purchasing old computers? You have come to the right place! Browse our library of tutorials on how to install legacy operating systems in virtual machines and emulators and feel the power of old.">
+      <HomepageHeader />
+      <main>
+        <HomepageFeatures />
+        <section className={styles.content}>
+          <div className="text--center">
+            <p>Come, chat with us:</p>
+            <a href="https://chat.virtualhub.eu.org"><img width="320" height="76" src="https://discordapp.com/api/guilds/1176107431013646357/widget.png?style=banner2" alt="Discord Banner"/></a>
+                  <p className="meta" {...{ 'xmlns:cc': "http://creativecommons.org/ns#" }} {...{ 'xmlns:dct': "http://purl.org/dc/terms/" }}><a property="dct:title" rel="cc:attributionURL" href="https://virtualhub.eu.org">VirtualHub</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://twitter.com/Virtua1Hub">Legacy Installer</a> is licensed under <a className={styles.cc} href="http://creativecommons.org/licenses/by-nc-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer">CC BY-NC-SA 4.0 <img className={styles.ccimages} src="/img/cc.svg" alt="cc" width="22" height="22"/><img className={styles.ccimages} src="/img/by.svg" alt="by" width="22" height="22"/><img className={styles.ccimages} src="/img/nc.svg" alt="nc" width="22" height="22"/><img className={styles.ccimages} src="/img/sa.svg" alt="sa" width="22" height="22"/></a></p>
+          </div>
+        </section>
+      </main>
+    </Layout>
+  );
+}

src/pages/index.module.css

@@ -0,0 +1,43 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  align-items: center;
+  display: flex;
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.content {
+  padding-bottom: 2rem;
+}
+
+.logo {
+  border-radius: 50%
+}
+
+.cc {
+  display: inline-block
+}
+
+.ccimages {
+ height: 22px !important;
+ margin-left: 3px;
+ vertical-align: text-bottom;
+}

src/pages/logo.module.css

@@ -0,0 +1,8 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.logo {
+  border-radius: 50%
+}

src/pages/other-websites.md

@@ -0,0 +1,27 @@
+---
+title: Our Other Websites
+description: Learn more about other VirtualHub websites, from setting up to screenshots.
+---
+import styles from './logo.module.css';
+import Admonition from '@theme/Admonition';
+
+# Our Other Websites
+
+<p className='text--center'><img className={styles.logo} alt="VirtualHub logo" src="/img/logo.webp" width="150"/></p>
+
+<div className="text--center container">
+  <p>We love to chat with people who love old software. Come join us on discord:</p>
+  <p>
+    <a href="https://chat.virtualhub.eu.org">
+      <img width="320" height="76" src="https://discordapp.com/api/guilds/1176107431013646357/widget.png?style=banner2" alt="Discord Banner"/>
+    </a>
+  </p>
+</div>
+
+<Admonition type="tip" icon="👉" title="VirtualHub Setup">
+  [https://setup.virtualhub.eu.org](https://setup.virtualhub.eu.org): Set up your system for VirtualHub.
+</Admonition>
+
+<Admonition type="tip" icon="👉" title="VirtualHub Screenshots">
+  [https://screenshots.virtualhub.eu.org](https://screenshots.virtualhub.eu.org) - Screenshots of old Software.
+</Admonition>

src/theme/BlogPostItem/Content/index.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import clsx from 'clsx';
+import {blogPostContainerID} from '@docusaurus/utils-common';
+import {useBlogPost} from '@docusaurus/theme-common/internal';
+import MDXContent from '@theme/MDXContent';
+import Giscus from '@giscus/react';
+import { useColorMode } from '@docusaurus/theme-common';
+export default function BlogPostItemContent({children, className}) {
+  const {isBlogPostPage} = useBlogPost();
+  const { colorMode } = useColorMode();
+  const giscus = (
+    <React.Fragment>
+      <Giscus
+        id="comments"
+        repo="InstallerLegacy/virtualhub.eu.org"
+        repoId="R_kgDOH8Gw8w"
+        category="Comments"
+        categoryId="DIC_kwDOH8Gw884CRQXl"
+        mapping="pathname"
+        strict="1"
+        reactionsEnabled="1"
+        emitMetadata="0"
+        inputPosition="top"
+        theme={colorMode}
+        lang="en"
+        loading="lazy"
+      />
+    </React.Fragment>
+  )
+  const discord = (
+    <div class="text--center">
+      <p>
+        Tell us about what you liked/disliked about this page on Discord.
+        Are you facing any problem in following any of the tutorials? We will help you.
+        We love to chat with people interested in old software:
+      </p>
+      <p>
+        <a href="https://chat.virtualhub.eu.org">
+          <img width="320" height="76" src="https://discordapp.com/api/guilds/1176107431013646357/widget.png?style=banner2" alt="Discord Banner"/>
+        </a>
+      </p>
+    </div>
+  )
+  return (
+    <div
+      // This ID is used for the feed generation to locate the main content
+      id={isBlogPostPage ? blogPostContainerID : undefined}
+      className={clsx('markdown', className)}
+      itemProp="articleBody">
+      <MDXContent>
+        {children}
+        {isBlogPostPage && discord}
+        {isBlogPostPage && giscus}
+      </MDXContent>
+    </div>
+  );
+}

src/theme/DocItem/Layout/index.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useWindowSize} from '@docusaurus/theme-common';
+import {useDoc} from '@docusaurus/theme-common/internal';
+import DocItemPaginator from '@theme/DocItem/Paginator';
+import DocVersionBanner from '@theme/DocVersionBanner';
+import DocVersionBadge from '@theme/DocVersionBadge';
+import DocItemFooter from '@theme/DocItem/Footer';
+import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
+import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
+import DocItemContent from '@theme/DocItem/Content';
+import DocBreadcrumbs from '@theme/DocBreadcrumbs';
+import Unlisted from '@theme/Unlisted';
+import styles from './styles.module.css';
+import Giscus from '@giscus/react';
+import { useColorMode } from '@docusaurus/theme-common';
+/**
+ * Decide if the toc should be rendered, on mobile or desktop viewports
+ */
+function useDocTOC() {
+  const {frontMatter, toc} = useDoc();
+  const windowSize = useWindowSize();
+  const hidden = frontMatter.hide_table_of_contents;
+  const canRender = !hidden && toc.length > 0;
+  const mobile = canRender ? <DocItemTOCMobile /> : undefined;
+  const desktop =
+    canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
+      <DocItemTOCDesktop />
+    ) : undefined;
+  return {
+    hidden,
+    mobile,
+    desktop,
+  };
+}
+export default function DocItemLayout({children}) {
+  const docTOC = useDocTOC();
+  const { colorMode } = useColorMode();
+  const giscus = (
+    <React.Fragment>
+      <Giscus
+        id="comments"
+        repo="InstallerLegacy/virtualhub.eu.org"
+        repoId="R_kgDOH8Gw8w"
+        category="Comments"
+        categoryId="DIC_kwDOH8Gw884CRQXl"
+        mapping="pathname"
+        strict="1"
+        reactionsEnabled="1"
+        emitMetadata="0"
+        inputPosition="top"
+        theme={colorMode}
+        lang="en"
+        loading="lazy"
+      />
+    </React.Fragment>
+  )
+  const {
+    metadata: {unlisted},
+  } = useDoc();
+  return (
+    <div className="row">
+      <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
+        {unlisted && <Unlisted />}
+        <DocVersionBanner />
+        <div className={styles.docItemContainer}>
+          <article>
+            <DocBreadcrumbs />
+            <DocVersionBadge />
+            {docTOC.mobile}
+            <DocItemContent>{children}</DocItemContent>
+            <br></br>
+            <div class="text--center">
+              <p>
+                Tell us about what you liked/disliked about this page on Discord.
+                Are you facing any problem in following any of the tutorials? We will help you.
+                We love to chat with people interested in old software:
+              </p>
+              <p>
+                <a href="https://chat.virtualhub.eu.org">
+                  <img width="320" height="76" src="https://discordapp.com/api/guilds/1176107431013646357/widget.png?style=banner2" alt="Discord Banner"/>
+                </a>
+              </p>
+            </div>
+            {giscus}
+            <DocItemFooter />
+          </article>
+          <DocItemPaginator />
+        </div>
+      </div>
+      {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
+    </div>
+  );
+}

src/theme/DocItem/Layout/styles.module.css

@@ -0,0 +1,10 @@
+.docItemContainer header + *,
+.docItemContainer article > *:first-child {
+  margin-top: 0;
+}
+
+@media (min-width: 997px) {
+  .docItemCol {
+    max-width: 75% !important;
+  }
+}