tg-blog

v1.1.7

Published

9 months ago

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](src/logic/models.ts), and can be generated using [TelegramBackup](https://github.com/one-among-us/Telegram

Downloads

222

0High
0Medium
0Low

hykilpikonna

tg-blog: Display Telegram Channel on Web Page

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.

Support Status

Feature Support

[x] All text formatting (including spoilers)
[x] @username, #hashtag
[x] Forwarded from, reply to (clickable)
[x] Maps! (location sharing)
[x] Polls (show result only, unable to vote)
[x] Contacts
[x] Search, hashtag search

Media Support

[x] Stickers, Animated stickers (webm & tgs)
[x] Custom emojis, animated custom emojis
[x] Videos, gif animations
[x] Files
[x] Audio, voice message (Including an audio player)
[x] Media groups
[x] Image viewing & tiling
[x] Media spoilers (image, video, gif)

Getting Started

Use in Plain HTML

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>

Use in Hexo Blog

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 %}

Use in Vite

You can also use import it into your project using modern build tools like vite:

1. Install dependencies

yarn add tg-blog

2. Import CSS in your `main.ts`

import {createApp, h} from 'vue'
import App from './App.vue'
// Add this:
import 'tg-blog/dist/style.css'

3. In your `vite.config.ts`, you shall configure to dedupe `vue`

export default defineConfig({
  resolve: {
    dedupe: ['vue'],
  },
});

4. Import components

import { TgBlog } from 'tg-blog';

// If you're using Vue-TS Class Component, then add this:
@Options({components: { TgBlog }})
export default class ...

Component Documentation

TgBlog

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>

Props

| Prop | Description | |-------------|-----------------------------------------------| | posts-url | HTTP Link to your blog data posts.json file |

ImageViewer (Internal)

If you only want the image viewer functionality, you can import this module.

TODO: Write more documentation