add disqus and apply to article

.vitepress/theme/index.js

@@ -56,6 +56,7 @@ import MyLayout from "./MyLayout.vue";
 // register components globally
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import CardComponent from "../../src/vue-components/Card.vue";
+import Disqus from "../../src/vue-components/Disqus.vue";
 import FeatureComponent from "../../src/vue-components/Feature.vue";
 import FooterComponent from "../../src/vue-components/Footer.vue";
 import ImageComponent from "../../src/vue-components/Image.vue";
@@ -76,6 +77,7 @@ export default {
     Layout: MyLayout,
     enhanceApp({ app }) {
         app.component("CardComponent", CardComponent);
+        app.component("Disqus", Disqus);
         app.component("FeatureComponent", FeatureComponent);
         app.component("FooterComponent", FooterComponent);
         app.component("ImageComponent", ImageComponent);

src/docs/articles/taytay-sings-the-budget-blues.md

@@ -151,6 +151,8 @@ And if you have questions about how your data is used and where it's processed:
 -   [Terms and conditions](/terms-and-conditions#describo-cloud)
 -   [Where your data is processed](/docs/guide/data-processing)
 
+<Disqus />
+
 <script setup>
     import { faSearch} from "@fortawesome/free-solid-svg-icons";
 </script>

src/vue-components/Disqus.vue

@@ -0,0 +1,29 @@
+<template>
+    <div id="disqus_thread"></div>
+    <noscript
+        >Please enable JavaScript to view the
+        <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript
+    >
+</template>
+
+<script setup>
+/**
+ *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
+ *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */
+/*
+    var disqus_config = function () {
+    this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
+    this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
+    };
+    */
+(function () {
+    if (process.env.NODE_ENV !== "development") {
+        // DON'T EDIT BELOW THIS LINE
+        var d = document,
+            s = d.createElement("script");
+        s.src = "https://describo.disqus.com/embed.js";
+        s.setAttribute("data-timestamp", +new Date());
+        (d.head || d.body).appendChild(s);
+    }
+})();
+</script>