Merge pull request #66 from hykilpikonna/master

[F] Fix blog embedding

source/tg-channel.md

@@ -8,6 +8,41 @@ date: 2023-01-13
 
 {% raw %}
 
-<iframe src="https://tg.1mether.me/" frameborder="0" scrolling="yes" seamless="seamless" style="display:block; width:100%; height:90vh;"></iframe>
+<!-- Import Libraries -->
+<script src="https://unpkg.com/vue@3"></script>
+<script src="https://unpkg.com/tg-blog"></script>
+<link rel="stylesheet" href="https://unpkg.com/tg-blog/dist/style.css">
+
+<!-- Styles & Patches -->
+<style>
+    #tg-blog-app { font-family: Avenir, Helvetica, Arial, sans-serif }
+
+    /* Fix: Override img max-width: 100% set in layout.styl */
+    #tg-blog-app img { max-width: unset; }
+
+    /* Fix: overflow-x: hidden breaks infinite scroll */
+    .container { overflow-x: unset !important; }
+    body { overflow-x: unset !important; }
+</style>
+
+<!-- Template setup (Paste your data url here) -->
+<div id="tg-blog-app">
+    <tg-blog posts-url="https://tg.1mether.me/posts.json"></tg-blog>
+</div>
+
+<!-- Vue js setup -->
+<script>
+const app = Vue.createApp().component("tg-blog", TgBlog.TgBlog)
+app.mount('#tg-blog-app')
+
+// Destroy app when page switched
+const interval = setInterval(() => {
+    if (!document.getElementById('tg-blog-app')) 
+    {
+        app.unmount()
+        clearInterval(interval)
+    }
+}, 1000)
+</script>
 
 {% endraw %}