Skip to content

Latest commit

 

History

History
184 lines (134 loc) · 4.66 KB

README.md

File metadata and controls

184 lines (134 loc) · 4.66 KB
Raw

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

  • 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

Media Support

  • 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)

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