This is a front-end for displaying telegram (or any compatible) channel data as an interactive web page. The data format is specified in models.ts, and can be generated using TelegramBackup.
Demo: https://test-tg.one-among.us/test
You can also check out Azalea's Blog for a demo.
- All text formatting (including spoilers)
- @username, #hashtag
- Forwarded from, reply to (clickable)
- Maps! (location sharing)
- Polls (show result only, unable to vote)
- Contacts
- Search, hashtag search
- Stickers, Animated stickers (webm & tgs)
- Custom emojis, animated custom emojis
- Videos, gif animations
- Files
- Audio, voice message (Including an audio player)
- Media groups
- Image viewing & tiling
- Media spoilers (image, video, gif)
You can use it in plain HTML without a modern web build tool:
<html lang="en">
<head>
<title>My Blog</title>
<!-- 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 -->
<style>
body { font-family: Avenir, Helvetica, Arial, sans-serif }
</style>
</head>
<body>
<!-- Template setup (Paste your data url here) -->
<div id="app">
<tg-blog posts-url="https://profile-api.hydev.org/exports/hykilp/posts.json"></tg-blog>
</div>
<!-- Vue js setup -->
<script>
Vue.createApp().component("tg-blog", TgBlog.TgBlog).mount('#app')
</script>
</body>
</html>You can also use it in a Hexo blog like in Linda's Blog (source code)
Depending on the css of your theme, it might need some modifications to work. For example, these modifications were needed for the Icalm theme.
However, you can add the page as a markdown in the following format:
---
title: 'Telegram Blog'
date: 2023-01-13
---
{% raw %}
<!-- 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 }
/* Icalm Fix: Override img max-width: 100% set in layout.styl */
#tg-blog-app img { max-width: unset; }
/* Icalm 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="YOUR-POSTS-URL-HERE!"></tg-blog>
</div>
<!-- Vue js setup -->
<script>
const app = Vue.createApp().component("tg-blog", TgBlog.TgBlog)
app.mount('#tg-blog-app')
// Hexo patch: Destroy app when page switched
const interval = setInterval(() => {
if (!document.getElementById('tg-blog-app'))
{
app.unmount()
clearInterval(interval)
}
}, 1000)
</script>
{% endraw %}You can also use import it into your project using modern build tools like vite:
yarn add tg-blog
import {createApp, h} from 'vue'
import App from './App.vue'
// Add this:
import 'tg-blog/dist/style.css'export default defineConfig({
resolve: {
dedupe: ['vue'],
},
});import { TgBlog } from 'tg-blog';
// If you're using Vue-TS Class Component, then add this:
@Options({components: { TgBlog }})
export default class ...There is only one option that you need to specify: posts-url, which should point to the posts.json of your blog data.
You can generate posts.json using TelegramBackup
<tg-blog posts-url="https://profile-api.hydev.org/exports/hykilp/posts.json"></tg-blog>| Prop | Description |
|---|---|
posts-url |
HTTP Link to your blog data posts.json file |
If you only want the image viewer functionality, you can import this module.
TODO: Write more documentation