Add discussion link

blog/2018-06-21-making-a-wifi-enabled-smart-air-humidifier/index.md

@@ -117,3 +117,5 @@ binary_sensor:
       number: D5
       mode: INPUT
 ```
+
+<BlogDiscussions/>

blog/2019-02-15-smart-doorbell-with-xiaomi-aqara-button-and-google-home/index.md

@@ -50,3 +50,5 @@ Now we need to create a handler of the Aqara button in `automations.yaml`:
       message: "Someone near your front door"
     service: notify.push
 ```
+
+<BlogDiscussions/>

blog/2019-02-21-home-assistant-presence-detection-with-google-wifi/index.md

@@ -135,3 +135,5 @@ Now we can rely on that group’s state to check if there is nobody home. I’ve
 ```
 
 That is all for now. Thanks for reading.
+
+<BlogDiscussions/>

blog/2020-11-10-using-variables-as-configuration-for-home-assistant-automation/index.md

@@ -209,3 +209,5 @@ Also, this automation should be able to run in parallel to make it possible to h
   mode: parallel
   max: 10
 ```
+
+<BlogDiscussions/>

blog/2020-12-29-bed-presence-detection-with-aqara-window-and-door-sensor-and-a-cheap-car-part/index.md

@@ -41,3 +41,5 @@ binary_sensor:
         device_class: occupancy
         value_template: "{{is_state('binary_sensor.bed_occupancy_door_side', 'off') or is_state('binary_sensor.bed_occupancy_window_side', 'off')}}"
 ```
+
+<BlogDiscussions/>

blog/2021-01-06-send-and-receive-sms-in-home-assistant-with-gsm-modem/index.md

@@ -43,3 +43,5 @@ action:
 ![Parsing action](parse_action.png)
 
 Here we are checking for the `engine is off` text in incoming SMS to perform some action. For example, to set the value of some `input_boolean`.
+
+<BlogDiscussions/>

blog/2021-01-13-adding-wifi-power-control-to-an-integrated-amplifier/index.md

@@ -105,3 +105,5 @@ switch:
 ```
 
 That’s it for today. Thanks for reading.
+
+<BlogDiscussions/>

blog/2021-01-13-building-wifi-ir-remote-control-for-any-tv-with-esp8266-wemos-d1-mini-and-esphome/index.md

@@ -238,3 +238,5 @@ Before placing our power supply inside the TV we need to make sure it is isolate
 So the overall picture is looking like this:
 
 ![](overview.png)
+
+<BlogDiscussions/>

blog/2021-01-15-ir-code-reader-with-esp8266-wemos-d1-mini-and-esphome/index.md

@@ -86,3 +86,5 @@ Compile, flash, open logs and start firing into our device with your IR remote.
 ```
 
 You can now use this data with the ESPHome [Remote Transmitter](https://esphome.io/components/remote_transmitter.html) component to build, for example, something like [this](/2021-01-13-building-wifi-ir-remote-control-for-any-tv-with-esp8266-wemos-d1-mini-and-esphome/index.md).
+
+<BlogDiscussions/>

blog/2021-01-15-using-stepper-motor-to-control-amplifier-volume-knob/index.md

@@ -121,3 +121,5 @@ service: esphome.amplifier_set_volume
 data:
   target: -50
 ```
+
+<BlogDiscussions/>

blog/2023-10-31-hosting-ghost-blog-on-synology-nas/index.md

@@ -120,3 +120,5 @@ You'll get an email notification on the address added here when there will be ti
 After certificate generation, we should open Settings on the same Certificates tab, find our domain service, and choose the newly generated certificate for it.
 
 That's it!
+
+<BlogDiscussions/>

blog/2023-12-19-monitor-usb-ups-connected-to-synology-nas-in-home-assistant/index.md

@@ -44,3 +44,5 @@ In your Home Assistant go to _Settings -> Devices & services_ and click the _"Ad
 In the configuration window that appeared you need to set your NAS's local IP address as a _Host_ and leave the _Port_ number unchanged.
 
 Hit _Submit_ and you are done.
+
+<BlogDiscussions/>

blog/2023-12-19-restart-or-shutdown-your-proxmox-node-from-home-assistant-automation/index.md

@@ -55,3 +55,5 @@ The authorization header should have the next format: `PVEAPIToken=<proxmox user
 You can use `shutdown` or `reboot` as a `command`.
 
 After restarting Home Assistant you will have a new service available. In our example, it would be `rest_command.spacedock_one_shutdown`. Calling it will do the trick.
+
+<BlogDiscussions/>

blog/2025-02-15-wireguard-tunnel-from-ubuntu-vps-to-homelab-through-unifi-vpn-server/index.md

@@ -106,3 +106,5 @@ sudo systemctl start wg-quick@wg0 && sudo systemctl enable wg-quick@wg0
 ```
 
 Further interface control should be performed through `systemctl` as well like `systemctrl stop`, `systemctl restart` or `systemctl status`.
+
+<BlogDiscussions/>

blog/2025-05-21-make-one-proxmox-node-to-wol-another/index.md

@@ -99,3 +99,5 @@ Cron job line to add:
 ```
 @reboot sleep 30s && /usr/sbin/etherwake -i vmbr0 <mac_address>
 ```
+
+<BlogDiscussions/>

blog/2025-10-07-proxmox-ve-on-hetzner-dedicated-server/index.md

@@ -184,4 +184,4 @@ Have no idea why everyone wants to write a conclusion for each post nowadays. It
 
 Have a nice tinkering.
 
-import BrowserWindow from '@site/src/components/BlogDiscussions';
+<BlogDiscussions/>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "yevi-org",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",

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;
-  align-items: center;
-  padding: 2rem 0;
-  width: 100%;
+  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;
+}
+
+.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,
+};