Add discussion link

src/components/BlogDiscussions/index.js

@@ -1,112 +1,16 @@
 import styles from './styles.module.css';
 
-const FeatureList = [
-  {
-    title: 'Blog',
-    link: 'blog',
-    Svg: require('@site/static/icons/blog.svg').default,
-    description: (
-      <>
-        Some notes, interesting things and projects.
-      </>
-    ),
-  },
-  {
-    title: 'Git',
-    link: 'https://git.nicelycomposed.codes/yehor',
-    Svg: require('@site/static/icons/gitea.svg').default,
-    description: (
-      <>
-        My code
-      </>
-    ),
-  },
-  {
-    title: 'Mastodon',
-    link: 'https://techhub.social/@estevez',
-    Svg: require('@site/static/icons/mastodon.svg').default,
-    description: (
-      <>
-        My micro blog at techhub.social
-      </>
-    ),
-  },
-  {
-    title: 'Matrix',
-    link: 'https://matrix.to/#/@yehor:vi.place',
-    Svg: require('@site/static/icons/matrix.svg').default,
-    description: (
-      <>
-        If you want to chat (with end-to-end encryption)
-      </>
-    ),
-  },
-  {
-    title: 'Pixelfed',
-    link: 'https://pixelfed.social/estevez',
-    Svg: require('@site/static/icons/pixelfed.svg').default,
-    description: (
-      <>
-        For some photography
-      </>
-    ),
-  },
-  {
-    title: 'GitHub',
-    link: 'https://github.com/estevez-dev',
-    Svg: require('@site/static/icons/github.svg').default,
-    description: (
-      <>
-        Some forks and contributions
-      </>
-    ),
-  },
-  {
-    title: 'Untappd',
-    link: 'https://untappd.com/user/estevezz',
-    Svg: require('@site/static/icons/untappd.svg').default,
-    description: (
-      <>
-        Budmo!
-      </>
-    ),
-  },
-  {
-    title: 'Linkedin',
-    link: 'https://www.linkedin.com/in/yehor-vialov-2a362158/',
-    Svg: require('@site/static/icons/linkedin.svg').default,
-    description: (
-      <>
-        They say I need this to find any work
-      </>
-    ),
-  },
-];
-
-function Feature({ Svg, title, link, description }) {
-  return (
-
-    <div className={clsx('col col--3', styles.featureBlock)}>
-      <div className="text--center">
-        <a href={link} target='_blank' className={styles.featureLink}>
-          <Svg fill="currentColor" className={styles.featureSvg} role="img" />
-        </a>
-      </div>
-      <a href={link} className={styles.featureLink}>
-        <div className="text--center padding-horiz--md">
-          <Heading as="h3">{title}</Heading>
-          <p>{description}</p>
-        </div>
-      </a>
-    </div>
-
-  );
-}
-
 export default function BlogDiscussions() {
+  const Svg = require('@site/static/icons/matrix.svg').default;
+
   return (
     <section className={styles.blogDiscussions}>
-      <a href="https://matrix.to/#/%23yevi-org-pub:vi.place" target='_blank'>Join discussion at Matrix</a>
+
+      <a className={styles.blogDiscussions_container} href="https://matrix.to/#/%23yevi-org-pub:vi.place" target='_blank'>
+        <Svg fill="currentColor" className={styles.icon} role="img" />
+        <span className={styles.linkText}>Join discussion at Matrix</span>
+      </a>
+
     </section>
   );
 }

src/components/BlogDiscussions/styles.module.css

@@ -1,6 +1,27 @@
 .blogDiscussions {
   display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding: 1rem 0;
+}
+
+.blogDiscussions_container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
   align-items: center;
-  padding: 2rem 0;
-  width: 100%;
+}
+
+.linkText {
+  width: 12rem;
+}
+
+.icon {
+  width: 3rem;
+  height: 3rem;
+}
+
+.icon path {
+  fill: var(--ifm-link-color) !important;
 }

src/theme/MDXComponents.js

@@ -0,0 +1,13 @@
+import React from 'react';
+// Import the original mapper
+import MDXComponents from '@theme-original/MDXComponents';
+//Import custom component
+import BlogDiscussions from '@site/src/components/BlogDiscussions';
+
+export default {
+    // Re-use the default mapping
+    ...MDXComponents,
+    // Map the "<BlogDiscussions>" tag to our BlogDiscussions component
+    // `BlogDiscussions` will receive all props that were passed to `<BlogDiscussions>` in MDX
+    BlogDiscussions,
+};