面条 6ec262d8cf refactor: migrate to Tailwind CSS v4 and TypeScript
Replaces PostCSS-based styling with Tailwind CSS v4 via Vite plugin
Converts all .js files to .ts with proper type annotations
Adds comprehensive type definitions for Telegram data structures
Extracts reusable UI components and standardizes class utilities

Improves maintainability by eliminating custom CSS in favor of
Tailwind utilities and design tokens
Enhances type safety across Telegram parsing, env access, and API routes
Centralizes agent guidelines in AGENTS.md following repository standards
Upgrades iconography to astro-icon with Remix Icon integration

Expands accessible HTML patterns including ARIA labels, semantic
navigation, and keyboard interaction support
Refactors static proxy logic into shared utility functions
Consolidates modal and image preview markup for consistency
2026-03-26 21:11:11 +08:00
2024-08-04 20:42:51 +08:00
2024-08-04 20:42:51 +08:00
2025-11-15 19:46:00 +08:00
2025-11-15 19:46:00 +08:00
2024-08-04 21:01:52 +08:00
2025-11-15 19:46:00 +08:00
2024-08-04 20:42:51 +08:00

BroadcastChannel

Turn your Telegram Channel into a MicroBlog.


English | 简体中文

Features

  • Turn your Telegram Channel into a MicroBlog
  • SEO friendly /sitemap.xml
  • 0 JS on the browser side
  • RSS and RSS JSON /rss.xml /rss.json

🪧 Demo

Real users

Platform

  1. Cloudflare
  2. Netlify
  3. Vercel

BroadcastChannel supports deployment on serverless platforms like Cloudflare, Netlify, Vercel that support Node.js SSR, or on a VPS. For detailed tutorials, see Deploy your Astro site.

🧱 Tech Stack

🏗️ Deployment

Docker

  1. docker pull ghcr.io/miantiao-me/broadcastchannel:main
  2. docker run -d --name broadcastchannel -p 4321:4321 -e CHANNEL=miantiao_me ghcr.io/miantiao-me/broadcastchannel:main

Serverless

  1. Fork this project to your GitHub
  2. Create a project on Cloudflare/Netlify/Vercel
  3. Select the BroadcastChannel project and the Astro framework
  4. Configure the environment variable CHANNEL with your channel name. This is the minimal configuration, for more configurations see the options below
  5. Save and deploy
  6. Bind a domain (optional).
  7. Update code, refer to the official GitHub documentation Syncing a fork branch from the web UI.

⚒️ Configuration

## Telegram Channel Username, must be configured. The string of characters following t.me/
CHANNEL=miantiao_me

## Language and timezone settings, language options see [dayjs](https://github.com/iamkun/dayjs/tree/dev/src/locale)
LOCALE=en
TIMEZONE=America/New_York

## Social media usernames
TELEGRAM=miantiao-me
TWITTER=miantiao-me
GITHUB=miantiao-me
MASTODON=mastodon.social/@Mastodon
BLUESKY=bsky.app

## The following two social media need to be URLs
DISCORD=https://DISCORD.com
PODCAST=https://PODCAST.com

## Header and footer code injection, supports HTML
FOOTER_INJECT=FOOTER_INJECT
HEADER_INJECT=HEADER_INJECT

## SEO configuration options, can prevent search engines from indexing content
NO_FOLLOW=false
NO_INDEX=false

## Hide Telegram channel description
HIDE_DESCRIPTION=false

## Sentry configuration options, collect server-side errors
SENTRY_AUTH_TOKEN=SENTRY_AUTH_TOKEN
SENTRY_DSN=SENTRY_DSN
SENTRY_PROJECT=SENTRY_PROJECT

## Telegram host name and static resource proxy, not recommended to modify
HOST=telegram.dog
STATIC_PROXY=

## Enable Google Site Search
GOOGLE_SEARCH_SITE=memo.miantiao.me

## Enable tags page, separate tags with commas
TAGS=tag1,tag2,tag3

## Show comments
COMMENTS=true

## Show reactions
REACTIONS=true

## List of links in the Links page, Separate using commas and semicolons
LINKS=Title1,URL1;Title2,URL3;Title3,URL3;

## Sidebar Navigation Item, Separate using commas and semicolons
NAVS=Title1,URL1;Title2,URL3;Title3,URL3;

## Enable RSS beautify
RSS_BEAUTIFY=true

🙋🏻 FAQs

  1. Why is the content empty after deployment?
    • Check if the channel is public, it must be public
    • The channel username is a string, not a number
    • Turn off the "Restricting Saving Content" setting in the channel
    • Redeploy after modifying environment variables
    • Telegram blocks public display of some sensitive channels, you can verify by visiting https://t.me/s/channelusername.

Sponsor

  1. Follow me on Telegram
  2. Follow me on 𝕏
  3. Sponsor me on GitHub
Description
Turn your Telegram Channel into a MicroBlog.
Readme AGPL-3.0 915 KiB
Languages
TypeScript 34.3%
Astro 26.2%
XSLT 19.4%
CSS 17%
JavaScript 2.5%
Other 0.6%