Use CSS for margin

pester · Jan 3, 2024 · 2f9465f · 2f9465f
1 parent 2f490a7
commit 2f9465f
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 18 deletions.
diff --git a/src/components/Giscus.js → src/components/Giscus/Giscus.js b/src/components/Giscus.js → src/components/Giscus/Giscus.js
@@ -5,6 +5,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Giscus from "@giscus/react";
 import React from 'react';
+import styles from './styles.module.css';
 
 /**
  * Adds a meta-tag to ensure new dicussion always add the canonical link in the initial post.
@@ -30,21 +31,23 @@ export function GiscusComponent() {
   const { colorMode } = useColorMode();
 
   return (
-    <Giscus
-      repo="fflaten/docs"
-      repoId="MDEwOlJlcG9zaXRvcnkzMDY2ODYxNTc"
-      category="Comments"
-      categoryId="DIC_kwDOEkeozc4CWO6M"
-      mapping="pathname"
-      strict="1"
-      reactionsEnabled="1"
-      emitMetadata="0"
-      inputPosition="top"
-      theme={colorMode}
-      lang="en"
-      loading="lazy"
-      crossorigin="anonymous"
-      async
-    />
+    <section className={styles.commentsSection}>
+      <Giscus
+        repo="fflaten/docs"
+        repoId="MDEwOlJlcG9zaXRvcnkzMDY2ODYxNTc"
+        category="Comments"
+        categoryId="DIC_kwDOEkeozc4CWO6M"
+        mapping="pathname"
+        strict="1"
+        reactionsEnabled="1"
+        emitMetadata="0"
+        inputPosition="top"
+        theme={colorMode}
+        lang="en"
+        loading="lazy"
+        crossorigin="anonymous"
+        async
+      />
+    </section>
   );
 }
diff --git a/src/components/Giscus/styles.module.css b/src/components/Giscus/styles.module.css
@@ -0,0 +1,3 @@
+.commentsSection {
+  margin-top: 2rem;
+}
diff --git a/src/theme/DocItem/Layout/index.js b/src/theme/DocItem/Layout/index.js
@@ -20,7 +20,7 @@ import DocBreadcrumbs from '@theme/DocBreadcrumbs';
 import Unlisted from '@theme/Unlisted';
 import styles from './styles.module.css';
 /* Customization start */
-import { GiscusHead, GiscusComponent } from '../../../components/Giscus';
+import { GiscusHead, GiscusComponent } from '../../../components/Giscus/Giscus';
 /* Customization end */
 
 /**
@@ -63,7 +63,6 @@ export default function DocItemLayout({ children }) {
           <DocItemPaginator />
         </div>
         {/* Customization start */}
-        <br />
         <GiscusHead />
         <GiscusComponent />
         {/* Customization end */}