feat: init

2026-05-13 15:09:12 +00:00 · 2024-08-04 20:42:51 +08:00
commit c39ab2d528
45 changed files with 12703 additions and 0 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false
--- a/.env.example
+++ b/.env.example
@@ -0,0 +1,23 @@
+CHANNEL=Broadcast_Channel_Blog
+
+LOCALE=zh-cn
+TIMEZONE="Asia/Shanghai"
+
+TELEGRAM=ccbikai
+TWITTER=ccbikai
+GITHUB=ccbikai
+DISCORD=https://DISCORD.com
+PODCASRT=https://PODCASRT.com
+
+FOOTER_INJECT=FOOTER_INJECT
+HEADER_INJECT=HEADER_INJECT
+
+NO_FOLLOW=false
+NO_INDEX=false
+
+SENTRY_AUTH_TOKEN=SENTRY_AUTH_TOKEN
+SENTRY_DSN=SENTRY_DSN
+SENTRY_PROJECT=SENTRY_PROJECT
+
+HOST="telegram.dog"
+STATIC_PROXY=""
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
--- a/.node-version
+++ b/.node-version
@@ -0,0 +1 @@
+v20
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1,49 @@
+{
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off", "fixable": true },
+    { "rule": "format/*", "severity": "off", "fixable": true },
+    { "rule": "*-indent", "severity": "off", "fixable": true },
+    { "rule": "*-spacing", "severity": "off", "fixable": true },
+    { "rule": "*-spaces", "severity": "off", "fixable": true },
+    { "rule": "*-order", "severity": "off", "fixable": true },
+    { "rule": "*-dangle", "severity": "off", "fixable": true },
+    { "rule": "*-newline", "severity": "off", "fixable": true },
+    { "rule": "*quotes", "severity": "off", "fixable": true },
+    { "rule": "*semi", "severity": "off", "fixable": true }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml",
+    "xml",
+    "gql",
+    "graphql",
+    "astro",
+    "css",
+    "less",
+    "scss",
+    "pcss",
+    "postcss"
+  ]
+}
--- a/README.md
+++ b/README.md
@@ -0,0 +1,81 @@
+# BroadcastChannel
+
+**Turn your Telegram Channel into a MicroBlog.**
+
+---
+
+English | [简体中文](./README.zh-cn.md)
+
+## ✨ Features
+
+- **Turn your Telegram Channel into a MicroBlog**
+- **SEO friendly**
+- **0 JS on the browser side**
+- **RSS and RSS JSON**
+
+## 🪧 Demo
+
+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](https://docs.astro.build/en/guides/deploy/).
+
+1. [Cloudflare](https://broadcast-channel.pages.dev/)
+2. [Netlify](https://broadcast-channel.netlify.app/)
+3. [Vercel](https://broadcast-channel.vercel.app/)
+
+## 🧱 Tech Stack
+
+- Framework: [Astro](https://astro.build/)
+- CMS: [Telegram Channels](https://telegram.org/tour/channels)
+- Template: [Sepia](https://github.com/Planetable/SiteTemplateSepia)
+
+## 🏗️ Deployment
+
+1. [Fork](https://github.com/ccbikai/BroadcastChannel/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).
+
+## ⚒️ Configuration
+
+```env
+## Telegram channel name, required
+CHANNEL=Broadcast_Channel_Blog
+
+## 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=ccbikai
+TWITTER=ccbikai
+GITHUB=ccbikai
+
+## 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
+
+## 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=""
+```
+
+## ☕ Sponsor
+
+1. [Follow me on Telegram](https://t.me/miantiao_me)
+2. [Follow me on 𝕏](https://x.com/0xKaiBi)
+3. [Sponsor me on Github](https://github.com/sponsors/ccbikai)
--- a/README.zh-cn.md
+++ b/README.zh-cn.md
@@ -0,0 +1,81 @@
+# 广播频道
+
+**将你的 Telegram Channel 转为微博客。**
+
+---
+
+[English](./README.md) | 简体中文
+
+## ✨ 特性
+
+- **将 Telegram Channel 转为微博客**
+- **SEO 友好**
+- **浏览器端 0 JS**
+- **提供 RSS 和 RSS JSON**
+
+## 🪧 演示
+
+广播频道支持部署在 Cloudflare、Netlify、Vercel 等支持 Node.js SSR 的无服务器平台或者 VPS。
+具体教程见[部署你的 Astro 站点](https://docs.astro.build/zh-cn/guides/deploy/)。
+
+1. [Cloudflare](https://broadcast-channel.pages.dev/)
+2. [Netlify](https://broadcast-channel.netlify.app/)
+3. [Vercel](https://broadcast-channel.vercel.app/)
+
+## 🧱 技术栈
+
+- 框架：[Astro](https://astro.build/)
+- 内容管理系统：[Telegram Channels](https://telegram.org/tour/channels)
+- 模板: [Sepia](https://github.com/Planetable/SiteTemplateSepia)
+
+## 🏗️ 部署
+
+1. [Fork](https://github.com/ccbikai/BroadcastChannel/fork) 此项目到你 Github
+2. 在 Cloudflare/Netlify/Vercel 创建项目
+3. 选择 `BroadcastChannel` 项目和 `Astro` 框架
+4. 配置环境变量 `CHANNEL` 为你的频道名称。此为最小化配置，更多配置见下面的配置项
+5. 保存并部署
+6. 绑定域名（可选）。
+
+## ⚒️ 配置
+
+```env
+## Telegram 频道名称，必须配置
+CHANNEL=Broadcast_Channel_Blog
+
+## 语言和时区设置，语言选项见[dayjs](https://github.com/iamkun/dayjs/tree/dev/src/locale)
+LOCALE=zh-cn
+TIMEZONE="Asia/Shanghai"
+
+## 社交媒体用户名
+TELEGRAM=ccbikai
+TWITTER=ccbikai
+GITHUB=ccbikai
+
+## 下面两个社交媒体需要为 URL
+DISCORD=https://DISCORD.com
+PODCASRT=https://PODCASRT.com
+
+## 头部尾部代码注入，支持 HTML
+FOOTER_INJECT=FOOTER_INJECT
+HEADER_INJECT=HEADER_INJECT
+
+## SEO 配置项，可不让搜索引擎索引内容
+NO_FOLLOW=false
+NO_INDEX=false
+
+## Sentry 配置项，收集服务端报错
+SENTRY_AUTH_TOKEN=SENTRY_AUTH_TOKEN
+SENTRY_DSN=SENTRY_DSN
+SENTRY_PROJECT=SENTRY_PROJECT
+
+## Telegram 主机名称和静态资源代理，不建议修改
+HOST="telegram.dog"
+STATIC_PROXY=""
+```
+
+## ☕ 赞助
+
+1. [在 Telegram 关注我](https://t.me/miantiao_me)
+2. [在 𝕏 上关注我](https://x.com/ccbikai)
+3. [在 Github 赞助我](https://github.com/sponsors/ccbikai)
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -0,0 +1,86 @@
+import process from 'node:process'
+import { defineConfig } from 'astro/config'
+import vercel from '@astrojs/vercel/serverless'
+import cloudflare from '@astrojs/cloudflare'
+import netlify from '@astrojs/netlify'
+import node from '@astrojs/node'
+import { provider } from 'std-env'
+import sentry from '@sentry/astro'
+
+const providers = {
+  vercel: vercel({
+    edgeMiddleware: false,
+  }),
+  cloudflare_pages: cloudflare(),
+  netlify: netlify({
+    cacheOnDemandPages: true,
+    edgeMiddleware: false,
+  }),
+  node: node({
+    mode: 'standalone',
+  }),
+}
+
+const adapterProvider = process.env.SERVER_ADAPTER || provider
+
+// https://astro.build/config
+export default defineConfig({
+  output: 'hybrid',
+  adapter: providers[adapterProvider] || providers.node,
+  integrations: [
+    ...process.env.SENTRY_DSN
+      ? [
+          sentry({
+            enabled: {
+              client: false,
+              server: process.env.SENTRY_DSN,
+            },
+            dsn: process.env.SENTRY_DSN,
+            sourceMapsUploadOptions: {
+              enabled: process.env.SENTRY_PROJECT && process.env.SENTRY_AUTH_TOKEN,
+              project: process.env.SENTRY_PROJECT,
+              authToken: process.env.SENTRY_AUTH_TOKEN,
+            },
+          }),
+        ]
+      : [],
+  ],
+  vite: {
+    ssr: {
+      external: [
+        ...adapterProvider === 'cloudflare_pages'
+          ? [
+              'module',
+              'url',
+              'events',
+              'worker_threads',
+              'async_hooks',
+              'node:diagnostics_channel',
+              'node:net',
+              'node:tls',
+              'node:worker_threads',
+              'node:util',
+              'node:fs',
+              'node:path',
+              'node:process',
+              'node:buffer',
+              'node:string_decoder',
+              'node:readline',
+              'node:events',
+              'node:stream',
+              'node:assert',
+              'node:os',
+              'node:crypto',
+              'node:zlib',
+              'node:http',
+              'node:https',
+              'node:url',
+              'node:querystring',
+              'node:child_process',
+              'node:inspector',
+            ]
+          : [],
+      ],
+    },
+  },
+})
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,9 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  formatters: true,
+  astro: true,
+  rules: {
+    'no-console': ['error', { allow: ['info', 'warn', 'error'] }],
+  },
+})
--- a/package.json
+++ b/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "broadcast-channel",
+  "type": "module",
+  "version": "0.1.0",
+  "private": true,
+  "packageManager": "pnpm@9.5.0",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "postinstall": "simple-git-hooks"
+  },
+  "dependencies": {
+    "@astrojs/rss": "^4.0.7",
+    "@sentry/astro": "^8.22.0",
+    "astro": "^4.12.3",
+    "astro-seo": "^0.8.4",
+    "cheerio": "1.0.0-rc.12",
+    "dayjs": "^1.11.12",
+    "lru-cache": "^11.0.0",
+    "ofetch": "^1.3.4"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^2.24.1",
+    "@astrojs/cloudflare": "^11.0.1",
+    "@astrojs/netlify": "^5.4.0",
+    "@astrojs/node": "^8.3.2",
+    "@astrojs/vercel": "^7.7.2",
+    "astro-eslint-parser": "^1.0.2",
+    "autoprefixer": "^10.4.20",
+    "cssnano": "^7.0.4",
+    "eslint": "9.5.0",
+    "eslint-plugin-astro": "^1.2.3",
+    "eslint-plugin-format": "^0.1.2",
+    "lint-staged": "^15.2.8",
+    "prettier-plugin-astro": "^0.14.1",
+    "simple-git-hooks": "^2.11.1",
+    "std-env": "^3.7.0"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "pnpm lint-staged"
+  },
+  "lint-staged": {
+    "*": "eslint --fix"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer'),
+    require('cssnano'),
+  ],
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="currentColor" d="M5.719 14.75a.997.997 0 0 1-.664-.252L-.005 10l5.341-4.748a1 1 0 0 1 1.328 1.495L3.005 10l3.378 3.002a1 1 0 0 1-.664 1.748zm8.945-.002L20.005 10l-5.06-4.498a.999.999 0 1 0-1.328 1.495L16.995 10l-3.659 3.252a1 1 0 0 0 1.328 1.496zm-4.678 1.417 2-12a1 1 0 1 0-1.972-.329l-2 12a1 1 0 1 0 1.972.329z"></path></svg>
--- a/src/assets/discord.svg
+++ b/src/assets/discord.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<title>discord</title>
+<path d="M20.992 20.163c-1.511-0.099-2.699-1.349-2.699-2.877 0-0.051 0.001-0.102 0.004-0.153l-0 0.007c-0.003-0.048-0.005-0.104-0.005-0.161 0-1.525 1.19-2.771 2.692-2.862l0.008-0c1.509 0.082 2.701 1.325 2.701 2.847 0 0.062-0.002 0.123-0.006 0.184l0-0.008c0.003 0.050 0.005 0.109 0.005 0.168 0 1.523-1.191 2.768-2.693 2.854l-0.008 0zM11.026 20.163c-1.511-0.099-2.699-1.349-2.699-2.877 0-0.051 0.001-0.102 0.004-0.153l-0 0.007c-0.003-0.048-0.005-0.104-0.005-0.161 0-1.525 1.19-2.771 2.692-2.862l0.008-0c1.509 0.082 2.701 1.325 2.701 2.847 0 0.062-0.002 0.123-0.006 0.184l0-0.008c0.003 0.048 0.005 0.104 0.005 0.161 0 1.525-1.19 2.771-2.692 2.862l-0.008 0zM26.393 6.465c-1.763-0.832-3.811-1.49-5.955-1.871l-0.149-0.022c-0.005-0.001-0.011-0.002-0.017-0.002-0.035 0-0.065 0.019-0.081 0.047l-0 0c-0.234 0.411-0.488 0.924-0.717 1.45l-0.043 0.111c-1.030-0.165-2.218-0.259-3.428-0.259s-2.398 0.094-3.557 0.275l0.129-0.017c-0.27-0.63-0.528-1.142-0.813-1.638l0.041 0.077c-0.017-0.029-0.048-0.047-0.083-0.047-0.005 0-0.011 0-0.016 0.001l0.001-0c-2.293 0.403-4.342 1.060-6.256 1.957l0.151-0.064c-0.017 0.007-0.031 0.019-0.040 0.034l-0 0c-2.854 4.041-4.562 9.069-4.562 14.496 0 0.907 0.048 1.802 0.141 2.684l-0.009-0.11c0.003 0.029 0.018 0.053 0.039 0.070l0 0c2.14 1.601 4.628 2.891 7.313 3.738l0.176 0.048c0.008 0.003 0.018 0.004 0.028 0.004 0.032 0 0.060-0.015 0.077-0.038l0-0c0.535-0.72 1.044-1.536 1.485-2.392l0.047-0.1c0.006-0.012 0.010-0.027 0.010-0.043 0-0.041-0.026-0.075-0.062-0.089l-0.001-0c-0.912-0.352-1.683-0.727-2.417-1.157l0.077 0.042c-0.029-0.017-0.048-0.048-0.048-0.083 0-0.031 0.015-0.059 0.038-0.076l0-0c0.157-0.118 0.315-0.24 0.465-0.364 0.016-0.013 0.037-0.021 0.059-0.021 0.014 0 0.027 0.003 0.038 0.008l-0.001-0c2.208 1.061 4.8 1.681 7.536 1.681s5.329-0.62 7.643-1.727l-0.107 0.046c0.012-0.006 0.025-0.009 0.040-0.009 0.022 0 0.043 0.008 0.059 0.021l-0-0c0.15 0.124 0.307 0.248 0.466 0.365 0.023 0.018 0.038 0.046 0.038 0.077 0 0.035-0.019 0.065-0.046 0.082l-0 0c-0.661 0.395-1.432 0.769-2.235 1.078l-0.105 0.036c-0.036 0.014-0.062 0.049-0.062 0.089 0 0.016 0.004 0.031 0.011 0.044l-0-0.001c0.501 0.96 1.009 1.775 1.571 2.548l-0.040-0.057c0.017 0.024 0.046 0.040 0.077 0.040 0.010 0 0.020-0.002 0.029-0.004l-0.001 0c2.865-0.892 5.358-2.182 7.566-3.832l-0.065 0.047c0.022-0.016 0.036-0.041 0.039-0.069l0-0c0.087-0.784 0.136-1.694 0.136-2.615 0-5.415-1.712-10.43-4.623-14.534l0.052 0.078c-0.008-0.016-0.022-0.029-0.038-0.036l-0-0z"></path>
+</svg>
--- a/src/assets/github.svg
+++ b/src/assets/github.svg
@@ -0,0 +1,3 @@
+<svg width="64px" height="64px" viewBox="0 0 64 64" id="i-github" xmlns="http://www.w3.org/2000/svg">
+    <path stroke-width="0" fill="currentColor" d="M32 0 C14 0 0 14 0 32 0 53 19 62 22 62 24 62 24 61 24 60 L24 55 C17 57 14 53 13 50 13 50 13 49 11 47 10 46 6 44 10 44 13 44 15 48 15 48 18 52 22 51 24 50 24 48 26 46 26 46 18 45 12 42 12 31 12 27 13 24 15 22 15 22 13 18 15 13 15 13 20 13 24 17 27 15 37 15 40 17 44 13 49 13 49 13 51 20 49 22 49 22 51 24 52 27 52 31 52 42 45 45 38 46 39 47 40 49 40 52 L40 60 C40 61 40 62 42 62 45 62 64 53 64 32 64 14 50 0 32 0 Z" />
+</svg>
--- a/src/assets/global.css
+++ b/src/assets/global.css
@@ -0,0 +1,117 @@
+@view-transition {
+  navigation: auto;
+}
+
+.site-title {
+  view-transition-name: site-title;
+  transition: 0.2s ease;
+}
+
+.item {
+  transition: 0.2s ease;
+}
+
+[popover]:not(:popover-open):not(dialog[open]) {
+  display: none;
+}
+
+.image-preview-wrap {
+  display: block;
+}
+
+.image-preview-button {
+  -webkit-appearance: none;
+  outline: none;
+  border: none;
+  background: transparent;
+  padding: 0;
+  margin-bottom: 16px;
+}
+
+.modal {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(20px);
+}
+
+.modal-img {
+  margin: auto;
+  max-width: calc(100% - 40px);
+  max-height: calc(100% - 40px);
+  border-radius: var(--media-border-radius);
+  border: 1px solid var(--border-color);
+  box-shadow: var(--shadows);
+  cursor: pointer;
+}
+.search-icon {
+  position: absolute;
+  top: 20px;
+  right: 0px;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+
+  &::after {
+    content: '🔍';
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: var(--background-color);
+    text-align: center;
+    vertical-align: middle;
+    line-height: 24px;
+  }
+}
+
+.search-icon:checked + .search-form {
+  display: block !important;
+}
+.search-form {
+  display: none;
+  background: rgba(255, 255, 255, 0.75);
+  padding: 8px;
+  position: sticky;
+  top: 60px;
+  border-radius: var(--box-border-radius);
+
+  > input {
+    border: 1px solid var(--background-color);
+    border-radius: var(--box-border-radius);
+    outline: none;
+    font-size: 12px;
+    line-height: 2.4;
+    padding: 0 0.5em;
+    box-sizing: border-box;
+    width: 100%;
+  }
+}
+
+.copyright-wrap {
+  position: sticky;
+  top: 120px;
+  color: #666;
+  line-height: 1.5;
+  font-size: 14px;
+  display: none;
+}
+
+@media screen and (min-width: 600px) {
+  .search-form {
+    display: block;
+  }
+
+  .search-icon {
+    display: none;
+  }
+
+  .copyright-wrap {
+    display: block;
+  }
+}
--- a/src/assets/normalize.css
+++ b/src/assets/normalize.css
@@ -0,0 +1,351 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+     ========================================================================== */
+
+/**
+   * Remove the margin in all browsers.
+   */
+
+body {
+  margin: 0;
+}
+
+/**
+   * Render the `main` element consistently in IE.
+   */
+
+main {
+  display: block;
+}
+
+/**
+   * Correct the font size and margin on `h1` elements within `section` and
+   * `article` contexts in Chrome, Firefox, and Safari.
+   */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+     ========================================================================== */
+
+/**
+   * 1. Add the correct box sizing in Firefox.
+   * 2. Show the overflow in Edge and IE.
+   */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+     ========================================================================== */
+
+/**
+   * Remove the gray background on active links in IE 10.
+   */
+
+a {
+  background-color: transparent;
+}
+
+/**
+   * 1. Remove the bottom border in Chrome 57-
+   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+   */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+   * Add the correct font weight in Chrome, Edge, and Safari.
+   */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+   * 1. Correct the inheritance and scaling of font size in all browsers.
+   * 2. Correct the odd `em` font sizing in all browsers.
+   */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+   * Add the correct font size in all browsers.
+   */
+
+small {
+  font-size: 80%;
+}
+
+/**
+   * Prevent `sub` and `sup` elements from affecting the line height in
+   * all browsers.
+   */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+     ========================================================================== */
+
+/**
+   * Remove the border on images inside links in IE 10.
+   */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+     ========================================================================== */
+
+/**
+   * 1. Change the font styles in all browsers.
+   * 2. Remove the margin in Firefox and Safari.
+   */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+   * Show the overflow in IE.
+   * 1. Show the overflow in Edge.
+   */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+   * Remove the inheritance of text transform in Edge, Firefox, and IE.
+   * 1. Remove the inheritance of text transform in Firefox.
+   */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+   * Correct the inability to style clickable types in iOS and Safari.
+   */
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
+}
+
+/**
+   * Remove the inner border and padding in Firefox.
+   */
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+   * Restore the focus styles unset by the previous rule.
+   */
+
+button:-moz-focusring,
+[type='button']:-moz-focusring,
+[type='reset']:-moz-focusring,
+[type='submit']:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+   * Correct the padding in Firefox.
+   */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+   * 1. Correct the text wrapping in Edge and IE.
+   * 2. Correct the color inheritance from `fieldset` elements in IE.
+   * 3. Remove the padding so developers are not caught out when they zero out
+   *    `fieldset` elements in all browsers.
+   */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+   */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+   * Remove the default vertical scrollbar in IE 10+.
+   */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+   * 1. Add the correct box sizing in IE 10.
+   * 2. Remove the padding in IE 10.
+   */
+
+[type='checkbox'],
+[type='radio'] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+   * Correct the cursor style of increment and decrement buttons in Chrome.
+   */
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+   * 1. Correct the odd appearance in Chrome and Safari.
+   * 2. Correct the outline style in Safari.
+   */
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+   * Remove the inner padding in Chrome and Safari on macOS.
+   */
+
+[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+   * 1. Correct the inability to style clickable types in iOS and Safari.
+   * 2. Change font properties to `inherit` in Safari.
+   */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+     ========================================================================== */
+
+/*
+   * Add the correct display in Edge, IE 10+, and Firefox.
+   */
+
+details {
+  display: block;
+}
+
+/*
+   * Add the correct display in all browsers.
+   */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+     ========================================================================== */
+
+/**
+   * Add the correct display in IE 10+.
+   */
+
+template {
+  display: none;
+}
+
+/**
+   * Add the correct display in IE 10.
+   */
+
+[hidden] {
+  display: none;
+}
--- a/src/assets/podcast.svg
+++ b/src/assets/podcast.svg
@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="12" cy="11" r="1" />
+  <path d="M17.03 18.46a9 9 0 10-10.02.03" />
+  <path d="M16.06 13.91a5 5 0 10-7.97.2" />
+  <path d="M11.11 17a.9.9 0 111.78 0l-.52 4.67a.37.37 0 01-.74 0l-.52-4.68z" />
+</svg>
--- a/src/assets/rss.svg
+++ b/src/assets/rss.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 310 310" style="enable-background:new 0 0 310 310;" xml:space="preserve">
+<g>
+	<path d="M90.244,264.828C90.244,240.11,70.139,220,45.427,220c-24.715,0-44.822,20.11-44.822,44.828
+		c0,24.714,20.107,44.82,44.822,44.82C70.139,309.648,90.244,289.542,90.244,264.828z"/>
+	<path d="M5.648,169.43c35.961,0,69.782,14.066,95.231,39.605c25.45,25.583,39.467,59.648,39.467,95.92
+		c0,2.762,2.238,5,5,5h57.486c2.762,0,5-2.238,5-5c0-111.952-90.699-203.031-202.185-203.031c-2.762,0-5,2.238-5,5v57.505
+		C0.648,167.191,2.887,169.43,5.648,169.43z"/>
+	<path id="XMLID_791_" d="M5.726,0c-2.762,0-5,2.238-5,5v57.495c0,2.762,2.238,5,5,5c130.24,0,236.199,106.544,236.199,237.505
+		c0,2.762,2.238,5,5,5h57.471c2.762,0,5-2.238,5-5C309.396,136.822,173.17,0,5.726,0z"/>
+</g>
+</svg>
--- a/src/assets/style.css
+++ b/src/assets/style.css
@@ -0,0 +1,890 @@
+:root {
+  --background-color: #f4f1ec;
+  --foreground-color: #000000;
+  --highlight-color: orangered;
+  --box-border-radius: 3px;
+  --media-border-radius: 8px;
+  --dot-size: 8px;
+  --shadows: 0 1px 2px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.02),
+    0 4px 8px rgba(0, 0, 0, 0.02), 0 8px 16px rgba(0, 0, 0, 0.02);
+  --box-margin: 10px;
+  --border-color: rgba(0, 0, 0, 0.05);
+  --link-color: var(--highlight-color);
+  --icon-hover-filter: invert(51%) sepia(0%) saturate(0%) hue-rotate(23deg)
+    brightness(90%) contrast(90%);
+  --icon-secondary-filter: invert(97%) sepia(0%) saturate(0%) hue-rotate(129deg)
+    brightness(86%) contrast(88%);
+  --cell-background-color: #fff;
+  --code-background-color: #f9f9f9;
+  --secondary-color: #999;
+}
+
+body {
+  background-color: var(--background-color);
+  color: var(--foreground-color);
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Helvetica Neue,
+    Arial,
+    Noto Sans,
+    sans-serif,
+    Apple Color Emoji,
+    Segoe UI Emoji,
+    Segoe UI Symbol,
+    Noto Color Emoji;
+}
+
+#wrapper {
+  margin-left: 20px;
+  margin-right: 20px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
+#modal {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  display: none;
+}
+
+#modal-img {
+  margin: auto;
+  max-width: calc(100% - 40px);
+  max-height: calc(100% - 40px);
+  border-radius: var(--media-border-radius);
+  border: 1px solid var(--border-color);
+  box-shadow: var(--shadows);
+  cursor: pointer;
+}
+
+a:link,
+a:visited {
+  color: #778087;
+  text-decoration: none;
+  line-break: loose;
+}
+
+a:hover {
+  color: #4d5256;
+  text-decoration: underline;
+  text-underline-offset: 0.2rem;
+}
+
+a.site-title:link,
+a.site-title:visited {
+  color: #333;
+  text-decoration: none;
+}
+
+a.site-title:hover {
+  color: #000;
+  text-decoration: underline;
+}
+
+a.item-link:link,
+a.item-link:visited {
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+a.item-link:hover {
+  text-decoration: underline;
+}
+
+#container {
+  width: 100%;
+  max-width: 800px;
+  margin: 0px auto 0px auto;
+  display: flex;
+}
+
+#main-container {
+  flex: 1;
+  padding-top: 20px;
+  padding-right: 30px;
+  padding-bottom: 20px;
+  margin-right: 20px;
+  border-right: 1px solid var(--border-color);
+}
+
+#header {
+  padding: 10px 10px 10px 10px;
+  margin-bottom: 10px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+}
+
+.header-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 100%;
+  border: 3px solid #fff;
+  box-shadow: var(--shadows);
+  display: block;
+}
+
+.header-title {
+  flex: 1;
+  font-size: 20px;
+  margin-left: 10px;
+  padding-right: 10px;
+}
+
+.header-icons {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.social-icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: bottom;
+  filter: var(--icon-secondary-filter);
+}
+
+.social-icon:hover {
+  filter: var(--icon-hover-filter);
+}
+
+#breadcrumb {
+  padding: 10px 0px 10px 0px;
+  margin-bottom: 20px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+}
+
+.breadcrumb-avatar {
+  width: 20px;
+  height: 20px;
+  border-radius: 100%;
+  border: 2px solid #fff;
+  box-shadow: var(--shadows);
+  display: block;
+}
+
+.breadcrumb-title {
+  flex: 1;
+  font-size: 14px;
+  margin-left: 10px;
+}
+
+hr {
+  border: none;
+  height: 2px;
+  color: var(--border-color);
+  background-color: var(--border-color);
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+.page-title {
+  padding: 10px 10px 10px 10px;
+  margin-bottom: 10px;
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 1;
+}
+
+#main-content {
+  font-size: 17px;
+  line-height: 24px;
+}
+
+#site-intro {
+  padding: 10px 20px 10px 20px;
+  background-color: #fff;
+  font-size: 16px;
+  line-height: 1.6;
+  border-radius: var(--box-border-radius);
+  box-shadow: var(--shadows);
+  margin-bottom: 20px;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 600;
+  padding: 0px 20px 0px 20px;
+}
+
+.items {
+  margin-top: 20px;
+  margin-left: 28px;
+}
+
+.item {
+}
+
+.image-box,
+.video-box,
+.audio-box,
+.attachment-box {
+  border-left: 2px solid var(--border-color);
+  padding: 30px 0px 30px 30px;
+  display: flex;
+  margin-left: 3px;
+}
+
+.attachment-box {
+  box-sizing: border-box;
+  max-width: 100%;
+  display: grid;
+  align-items: center;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+}
+
+.attachment-box img {
+  width: 100%;
+  aspect-ratio: 1/1;
+  object-fit: cover;
+  border-radius: var(--media-border-radius);
+  border: 1px solid var(--border-color);
+  box-shadow: var(--shadows);
+}
+
+.image-box > img {
+  display: block;
+  width: calc(100% - 1px);
+  height: auto;
+  max-height: initial;
+  border-radius: var(--media-border-radius);
+  margin-bottom: 10px;
+  box-shadow: var(--shadows);
+  border: 1px solid var(--border-color);
+}
+
+.video-box video {
+  max-width: 100%;
+  border-radius: var(--media-border-radius);
+  box-shadow: var(--shadows);
+  border: 1px solid var(--border-color);
+}
+
+audio::-webkit-media-controls-play-button {
+  color: #000;
+}
+
+audio::-webkit-media-controls-panel {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+.audio-box audio {
+  width: 100%;
+  border-radius: var(--media-border-radius);
+  box-shadow: var(--shadows);
+  border: 1px solid var(--border-color);
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+.title-box {
+  border-left: 2px solid var(--border-color);
+  padding: 30px 0px 0px 30px;
+  font-size: 24px;
+  line-height: 1.2;
+  font-weight: 800;
+  margin-left: 3px;
+}
+
+.title-box:last-child {
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+
+.tag-box {
+  border-left: 2px solid var(--border-color);
+  padding: 0px 0px 30px 30px;
+  font-size: 14px;
+  line-height: 1.6;
+  margin-left: 3px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.tag-box:last-child {
+  padding-bottom: 20px;
+}
+
+.text-box {
+  border-left: 2px solid var(--border-color);
+  padding: 30px 0px 30px 30px;
+  font-size: 16px;
+  line-height: 1.6;
+  margin-left: 3px;
+}
+
+.text-box p:first-child {
+  margin-top: 0px;
+}
+
+.text-box p:last-child {
+  margin-bottom: 0px;
+}
+
+.time-box {
+  padding: 0px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+}
+
+.time-box > .dot {
+  width: var(--dot-size);
+  height: var(--dot-size);
+  border-radius: var(--dot-size);
+  background-color: var(--link-color);
+}
+
+.time-box > .time {
+  flex: 1;
+  color: var(--link-color);
+  font-size: 14px;
+  font-weight: 500;
+  padding-left: 10px;
+}
+
+#aside-container {
+  padding-bottom: 20px;
+  width: 200px;
+  min-width: 200px;
+}
+
+#aside-container .nav {
+  padding-top: 20px;
+  position: sticky;
+  top: 0;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--box-margin);
+}
+
+.nav-icon {
+}
+
+.nav-link:link,
+.nav-link:visited {
+  flex: 1;
+  text-decoration: none;
+  color: #333;
+  padding: 5px 10px 5px 10px;
+  border-radius: var(--box-border-radius);
+  display: inline-block;
+  transition:
+    background-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+}
+
+.nav-link.current {
+  background-color: rgba(255, 255, 255, 0.75);
+  box-shadow: var(--shadows);
+}
+
+.nav-link:hover {
+  background-color: rgba(255, 255, 255, 0.65);
+  box-shadow: var(--shadows);
+}
+
+/* START: archive */
+
+.archive-container {
+  margin: 0px auto 40px auto;
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: 1em;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+
+.archive-title {
+  font-size: 2em;
+  font-weight: 500;
+}
+
+.archive-count {
+  font-size: 0.8em;
+  color: var(--foreground-secondary-color);
+}
+
+.archive-list {
+  column-count: 2;
+  column-rule: 1px solid var(--border-color);
+  column-gap: 40px;
+  line-height: 1.2;
+  margin-top: 20px;
+}
+
+.archive-list-item {
+  display: block;
+  font-size: 1em;
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  margin-bottom: 10px;
+  padding-left: 20px;
+}
+
+.archive-list-header {
+  display: block;
+  font-size: 1.1em;
+  font-weight: 500;
+  margin-bottom: 10px;
+  margin-top: 20px;
+  color: var(--foreground-secondary-color);
+  padding-left: 20px;
+}
+
+.archive-list-header:first-child {
+  margin-top: 0px;
+}
+
+.archive-list-item a {
+  line-break: initial;
+}
+
+/* END: archive */
+
+/* START: tag */
+
+.tag-icon {
+  width: 16px;
+  height: 16px;
+  background-size: 16px 16px;
+  opacity: 0.25;
+  background-image: url('tags.png');
+  background-repeat: no-repeat;
+  display: inline-block;
+}
+
+.tag:link,
+.tag:visited {
+  color: var(--secondary-color);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  padding: 2px 10px 2px 10px;
+  text-decoration: none;
+}
+
+.tag:hover {
+  color: var(--link-color);
+  border-color: var(--link-color);
+  text-decoration: none;
+}
+
+.tag-container {
+  margin: 0px auto 40px auto;
+  border-bottom: 1px solid var(--border-color);
+  padding-bottom: 1em;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+
+.tag-caption {
+  font-size: 0.8em;
+  display: flex;
+  gap: 0.5em;
+  align-items: center;
+}
+
+.tag-title {
+  font-size: 2em;
+  font-weight: 500;
+}
+
+.tag-count {
+  font-size: 0.8em;
+  color: var(--foreground-secondary-color);
+}
+
+.tags-container {
+  font-size: 0.8em;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1em;
+  color: var(--foreground-secondary-color);
+  align-items: center;
+}
+
+.tags {
+  flex: 1;
+  display: flex;
+  gap: 0.5em;
+  flex-wrap: wrap;
+}
+
+.tag-cloud {
+  column-count: 2;
+  column-rule: 1px solid var(--border-color);
+  column-gap: 40px;
+  line-height: 2;
+  margin-top: 20px;
+}
+
+.tag-cloud-item {
+  display: block;
+  font-size: 1em;
+  padding-left: 20px;
+}
+
+.tag-cloud-item-count {
+  display: inline-block;
+  background-color: var(--border-color);
+  font-size: 0.75em;
+  color: var(--background-color);
+  padding: 1px 4px 1px 4px;
+  border-radius: 20px;
+  line-height: 1;
+  vertical-align: middle;
+  margin-left: 0.5em;
+}
+
+.tag-item {
+  display: inline-block;
+  padding: 0.2em 0.5em 0.2em 0.5em;
+  border-radius: 4px;
+  border: 1px solid var(--border-color);
+}
+
+.tag-item:hover {
+  text-decoration: none;
+  border-color: var(--link-color);
+  box-shadow: 0px 1px 2px var(--border-color);
+}
+
+/* END: tag */
+
+/* START: Markdown tags */
+
+.content h1 {
+  font-size: 24px;
+}
+
+.content h2 {
+  font-size: 20px;
+  margin-top: 1.5em;
+}
+
+.content h3 {
+  font-size: 16px;
+  margin-top: 1.5em;
+}
+
+.content h4 {
+  font-size: 14px;
+  margin-top: 1.5em;
+}
+
+.content h5 {
+  font-size: 12px;
+  margin-top: 1.5em;
+}
+
+.content h6 {
+  font-size: 10px;
+  margin-top: 1.5em;
+}
+
+.content ul:first-child,
+.content ol:first-child,
+.content p:first-child,
+.content h1:first-child,
+.content h2:first-child,
+.content h3:first-child,
+.content h4:first-child,
+.content h5:first-child,
+.content h6:first-child {
+  margin-top: 0px;
+}
+
+.content ul:last-child,
+.content ol:last-child,
+.content p:last-child,
+.content h1:last-child,
+.content h2:last-child,
+.content h3:last-child,
+.content h4:last-child,
+.content h5:last-child,
+.content h6:last-child {
+  margin-bottom: 0px;
+}
+
+.content li {
+  line-break: anywhere;
+}
+
+.content img {
+  max-width: calc(100% - 1px);
+  max-height: initial;
+  border-radius: var(--media-border-radius);
+  border: 1px solid var(--border-color);
+  box-shadow: var(--shadows);
+}
+
+.content a:link,
+.content a:visited {
+  line-break: anywhere;
+}
+
+.content pre {
+  font-size: 0.9em;
+  white-space: pre-wrap;
+  padding: 10px;
+  border-radius: var(--media-border-radius);
+  border: 1px solid var(--border-color);
+  box-shadow: var(--shadows);
+  background-color: rgba(255, 255, 240, 0.2);
+}
+
+.content code {
+  line-break: anywhere;
+}
+
+.content figure {
+  margin-inline-start: 0px;
+  margin-inline-end: 10px;
+}
+
+.content figcaption {
+  color: #666;
+  font-size: 0.8em;
+}
+
+.content > iframe {
+  max-width: calc(100% - 1px);
+  border-radius: var(--media-border-radius);
+  border: 1px solid var(--border-color);
+  box-shadow: var(--shadows);
+}
+
+/* END: Markdown tags */
+
+/* START: pages */
+
+.pages-container {
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.pages-info {
+  flex: 1;
+  text-align: center;
+  vertical-align: middle;
+  color: var(--secondary-color);
+  font-weight: 500;
+  font-size: 12px;
+}
+
+a.page:link,
+a.page:visited {
+  color: var(--secondary-color);
+  padding: 5px 15px 5px 15px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 30px;
+  border: 1px solid var(--secondary-color);
+}
+
+a.page:hover {
+  color: var(--link-color);
+  text-decoration: none;
+}
+
+.page-placeholder {
+  width: 34px;
+}
+
+/* END: pages */
+
+/* START: table */
+
+.content table {
+  table-layout: auto;
+  width: 100%;
+  padding: 0;
+  border-collapse: collapse;
+  box-shadow: var(--shadows);
+}
+
+.content table tr {
+  border-top: 1px solid var(--border-color);
+  background-color: var(--cell-background-color);
+  margin: 0;
+  padding: 0;
+}
+
+.content table tr:nth-child(2n) {
+  background-color: var(--code-background-color);
+}
+
+.content table tr th {
+  font-weight: bold;
+  border: 1px solid var(--border-color);
+  margin: 0;
+  padding: 6px 12px;
+  background-color: var(--code-background-color);
+}
+
+.content table tr td {
+  border: 1px solid var(--border-color);
+  margin: 0;
+  padding: 6px 12px;
+  line-break: anywhere;
+}
+
+.content table tr th :first-child,
+.content table tr td :first-child {
+  margin-top: 0;
+}
+
+.content table tr th :last-child,
+.content table tr td :last-child {
+  margin-bottom: 0;
+}
+
+/* END: table */
+
+/* START: To Do Items */
+
+ul:has(input[type='checkbox']) {
+  padding-inline-start: 0px;
+}
+
+li input[type='checkbox'] {
+  display: none;
+}
+
+li:has(input[type='checkbox']) {
+  list-style-type: none;
+  margin-left: 0px;
+  pointer-events: none;
+}
+
+li:has(input[type='checkbox']:not(:checked):disabled)::before {
+  background-image: url('./circle.svg');
+  background-repeat: no-repeat;
+  content: '';
+  display: inline-block;
+  vertical-align: text-top;
+  width: 1.25em;
+  height: 1em;
+  background-size: 1em 1em;
+  margin-top: 2px;
+  filter: var(--icon-hover-filter);
+  pointer-events: all;
+}
+
+li:has(input[type='checkbox']:checked:disabled)::before {
+  background-image: url('./checkmark.circle.fill.svg');
+  background-repeat: no-repeat;
+  content: '';
+  display: inline-block;
+  vertical-align: text-top;
+  width: 1.25em;
+  height: 1em;
+  background-size: 1em 1em;
+  margin-top: 1px;
+  pointer-events: all;
+}
+
+/* END: To Do Items */
+
+@media screen and (max-width: 799px) {
+  #container {
+    width: 100%;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  #container {
+    display: flex;
+    width: 100%;
+    flex-direction: column-reverse;
+  }
+
+  #main-container {
+    padding-right: 0px;
+    margin-right: 0px;
+    width: 100%;
+    border-right: none;
+    padding-top: 10px;
+  }
+
+  #header {
+    padding: 0px;
+  }
+
+  .items {
+    margin-left: 0px;
+  }
+
+  #aside-container {
+    width: 100%;
+    border-bottom: 1px solid var(--border-color);
+    padding-bottom: 10px;
+    background-color: var(--background-color);
+    position: sticky;
+    top: 0;
+    box-shadow: 0px 4px 16px -16px rgba(0, 0, 0, 0.5);
+  }
+
+  #aside-container .nav {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2px;
+  }
+
+  #aside-container .nav-item {
+    font-size: 14px;
+    line-height: 1;
+  }
+
+  .section-title {
+    padding: 10px 0px 0px 0px;
+  }
+
+  .tag-cloud {
+    margin-top: 20px;
+  }
+
+  .tag-cloud-item {
+    padding-left: 0px;
+  }
+
+  .archive-list {
+    margin-top: 20px;
+  }
+
+  .archive-list-item {
+    padding-left: 0px;
+  }
+
+  .archive-list-header {
+    padding-left: 0px;
+  }
+
+  #site-intro {
+    margin-left: 0px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+}
--- a/src/assets/tags.png
+++ b/src/assets/tags.png
--- a/src/assets/telegram.svg
+++ b/src/assets/telegram.svg
@@ -0,0 +1 @@
+<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m20.665 3.717-17.73 6.837c-1.21.486-1.203 1.161-.222 1.462l4.552 1.42 10.532-6.645c.498-.303.953-.14.579.192l-8.533 7.701h-.002l.002.001-.314 4.692c.46 0 .663-.211.921-.46l2.211-2.15 4.599 3.397c.848.467 1.457.227 1.668-.785l3.019-14.228c.309-1.239-.473-1.8-1.282-1.434z"/></svg>
--- a/src/assets/twitter.svg
+++ b/src/assets/twitter.svg
@@ -0,0 +1,3 @@
+<svg width="64px" height="64px" viewBox="0 0 64 64" id="i-twitter" xmlns="http://www.w3.org/2000/svg">
+    <path stroke-width="0" fill="currentColor" d="M60 16 L54 17 L58 12 L51 14 C42 4 28 15 32 24 C16 24 8 12 8 12 C8 12 2 21 12 28 L6 26 C6 32 10 36 17 38 L10 38 C14 46 21 46 21 46 C21 46 15 51 4 51 C37 67 57 37 54 21 Z" />
+</svg>
--- a/src/assets/void.png
+++ b/src/assets/void.png
--- a/src/components/header.astro
+++ b/src/components/header.astro
@@ -0,0 +1,135 @@
+---
+import { getEnv } from '../lib/env'
+import voidFile from '../assets/void.png'
+import rss from '../assets/rss.svg'
+import podcast from '../assets/podcast.svg'
+import twitter from '../assets/twitter.svg'
+import github from '../assets/github.svg'
+import discord from '../assets/discord.svg'
+import telegram from '../assets/telegram.svg'
+
+const { SITE_URL } = Astro.locals
+const { channel } = Astro.props
+
+const PODCASRT = getEnv(import.meta.env, Astro, 'PODCASRT')
+const TWITTER = getEnv(import.meta.env, Astro, 'TWITTER')
+const GITHUB = getEnv(import.meta.env, Astro, 'GITHUB')
+const TELEGRAM = getEnv(import.meta.env, Astro, 'TELEGRAM')
+const DISCORD = getEnv(import.meta.env, Astro, 'DISCORD')
+
+const staticProxy = getEnv(import.meta.env, Astro, 'STATIC_PROXY') ?? '/static/'
+---
+
+<div id="header">
+  <a href={SITE_URL} title={channel?.title}>
+    <img
+      src={channel?.avatar?.startsWith('http')
+        ? staticProxy + channel?.avatar
+        : voidFile.src}
+      alt={channel?.title}
+      class="header-avatar"
+    />
+  </a>
+  <div class="header-title">
+    <a href={SITE_URL} class="site-title" title={channel?.title}>
+      {channel?.title}
+    </a>
+  </div>
+  <div class="header-icons">
+    <a
+      href={`${SITE_URL}rss.xml`}
+      target="_blank"
+      rel="alternate"
+      type="application/rss+xml"
+      title="RSS Feed"
+    >
+      <img {...rss} alt="RSS" class="social-icon" width="1em" />
+    </a>
+
+    {
+      PODCASRT && (
+        <a href={PODCASRT} target="_blank" title="Podcast">
+          <img {...podcast} alt="Podcast" class="social-icon" width="1em" />
+        </a>
+      )
+    }
+
+    {
+      TWITTER && TWITTER.length > 0 && (
+        <a
+          href={`https://twitter.com/${TWITTER}`}
+          title="Twitter"
+          target="_blank"
+        >
+          <img
+            {...twitter}
+            alt={`twitter.com/${TWITTER}`}
+            class="social-icon"
+            width="1em"
+          />
+        </a>
+      )
+    }
+
+    {
+      GITHUB && GITHUB.length > 0 && (
+        <a href={`https://github.com/${GITHUB}`} title="Github" target="_blank">
+          <img
+            {...github}
+            alt={`github.com/${GITHUB}`}
+            class="social-icon"
+            width="1em"
+          />
+        </a>
+      )
+    }
+
+    {
+      TELEGRAM && TELEGRAM.length > 0 && (
+        <a href={`https://t.me/${TELEGRAM}`} title="Telegram" target="_blank">
+          <img
+            {...telegram}
+            alt={`t.me/${TELEGRAM}`}
+            class="social-icon"
+            width="1em"
+          />
+        </a>
+      )
+    }
+
+    {
+      DISCORD && DISCORD.length > 0 && (
+        <a href={DISCORD} title="Discord" target="_blank">
+          <img
+            {...discord}
+            alt="Discord Invite"
+            class="social-icon"
+            width="1em"
+          />
+        </a>
+      )
+    }
+  </div>
+</div>
+
+{
+  channel?.description && channel?.description.length > 0 && (
+    <div class="text-box" id="site-intro">
+      {channel?.description}
+    </div>
+  )
+}
+
+<style>
+  #site-intro {
+    color: var(--secondary-color);
+  }
+
+  .social-icon {
+    padding: 4px;
+  }
+
+  .header-icons {
+    gap: 2px;
+  }
+</style>
--- a/src/components/item.astro
+++ b/src/components/item.astro
@@ -0,0 +1,177 @@
+---
+import dayjs from '../lib/dayjs'
+import { getEnv } from '../lib/env'
+
+const locale = getEnv(import.meta.env, Astro, 'LOCALE')
+const timezone = getEnv(import.meta.env, Astro, 'TIMEZONE')
+
+locale && dayjs.locale(locale)
+
+const { SITE_URL } = Astro.locals
+const { post } = Astro.props
+
+const datetime = dayjs(post.datetime).tz(timezone)
+const timeago = datetime.isBefore(dayjs().subtract(1, 'w'))
+  ? datetime.format('HH:mm · ll · ddd')
+  : datetime.fromNow()
+---
+
+<div class="item" style={{ 'view-transition-name': `post-${post.id}` }}>
+  <div class="time-box">
+    <div class="dot"></div>
+    <div class="time">
+      <a
+        href={`${SITE_URL}posts/${post.id}`}
+        title={post.datetime}
+        class="item-link">{timeago}</a
+      >
+    </div>
+  </div>
+  {
+    post.content.length > 0 && (
+      <div class={`text-box content`} set:html={post.content} />
+    )
+  }
+  {
+    post.tags.length > 0 && (
+      <div
+        class="tag-box"
+        style={post.content.length === 0 ? 'padding-top: 30px;' : ''}
+      >
+        <div class="tag-icon" />
+        {post.tags.map((tag) => (
+          <a href={`/search/%23${tag}`} title={tag} class="tag">
+            {tag}
+          </a>
+        ))}
+      </div>
+    )
+  }
+</div>
+
+<style>
+  .content {
+    word-break: break-word;
+  }
+  .content :global(img) {
+    width: calc(100% - var(--box-margin));
+  }
+  .content :global(.tgme_widget_message_link_preview) {
+    margin-top: 16px;
+    display: none;
+
+    .link_preview_site_name,
+    .link_preview_title,
+    .link_preview_description {
+      display: none;
+    }
+  }
+
+  .content
+    :global(.tgme_widget_message_link_preview):has(.link_preview_site_name) {
+    display: block;
+    background: var(--cell-background-color);
+    border-left: 3px solid var(--highlight-color);
+    padding: 6px;
+    padding-left: 10px;
+    border-radius: var(--box-border-radius);
+
+    .link_preview_title {
+      display: block;
+      font-size: 1em;
+      font-weight: bolder;
+      line-height: 2;
+    }
+
+    .link_preview_description {
+      display: block;
+      font-size: 0.8em;
+      line-height: 1.5;
+    }
+  }
+
+  .content :global(.tgme_widget_message_video) {
+    aspect-ratio: 1 / 1;
+  }
+
+  .content :global(.tgme_widget_message_link_preview):has(.link_preview_image) {
+    display: flex;
+    position: relative;
+    border: none;
+    padding: 0;
+    background: transparent;
+
+    .link_preview_image {
+      aspect-ratio: 1200 / 630;
+      object-fit: cover;
+    }
+
+    .link_preview_site_name {
+      display: block;
+      position: absolute;
+      bottom: var(--box-margin);
+      left: var(--box-margin);
+      padding-left: 4px;
+      padding-right: 4px;
+      background-color: rgba(0, 0, 0, 0.66);
+      font-size: 14px;
+      color: #fff;
+      line-height: 1.5;
+      border-radius: var(--box-border-radius);
+      text-overflow: ellipsis;
+      max-width: calc(100% - 28px);
+      white-space: nowrap;
+      overflow: hidden;
+    }
+
+    .link_preview_title,
+    .link_preview_description {
+      display: none;
+    }
+  }
+
+  .content :global(blockquote) {
+    margin: 16px 0;
+    font-size: 0.8em;
+    background: var(--cell-background-color);
+    border-left: 3px solid var(--highlight-color);
+    padding: 6px;
+    padding-left: 10px;
+    border-radius: var(--box-border-radius);
+  }
+
+  .content :global(.tgme_widget_message_sticker) {
+    display: block;
+  }
+
+  .item :global(.content):has(.tgme_widget_message_user_photo) {
+    display: flex;
+
+    .tgme_widget_message_user_photo {
+      width: 60px;
+      height: 60px;
+    }
+  }
+
+  .content :global(.tgme_widget_message_voice) {
+    display: block !important;
+  }
+
+  .content :global(.tgme_widget_message_poll_options) {
+    display: block;
+
+    .tgme_widget_message_poll_option_percent {
+      float: left;
+      margin-right: 8px;
+    }
+  }
+
+  .content :global(.tgme_widget_message_location_wrap) {
+    display: block;
+    .tgme_widget_message_location {
+      padding-top: 50%;
+      background: no-repeat center;
+      background-size: cover;
+    }
+  }
+</style>
--- a/src/components/list.astro
+++ b/src/components/list.astro
@@ -0,0 +1,49 @@
+---
+import Layout from '../layouts/base.astro'
+import Header from '../components/header.astro'
+import Item from '../components/item.astro'
+
+const { SITE_URL } = Astro.locals
+const { channel, before = true, after = true } = Astro.props
+const posts = channel.posts ?? []
+
+const beforeCursor = posts[posts.length - 1]?.id
+const afterCursor = posts[0]?.id
+// const cursor = +Astro.params.cursor
+---
+
+<Layout channel={channel} id="main-container">
+  <slot name="header">
+    <Header channel={channel} />
+  </slot>
+  <div class="items">
+    {posts.map((post) => <Item post={post} />)}
+  </div>
+
+  <div class="pages-container">
+    {
+      before && beforeCursor > 20 ? (
+        <a
+          href={`${SITE_URL}before/${beforeCursor}`}
+          title="Before"
+          class="page"
+        >
+          Before
+        </a>
+      ) : (
+        <span class="page-placeholder">&nbsp;</span>
+      )
+    }
+
+    <div class="pages-info"></div>
+    {
+      after && afterCursor ? (
+        <a href={`${SITE_URL}after/${afterCursor}`} title="After" class="page">
+          After
+        </a>
+      ) : (
+        <span class="page-placeholder">&nbsp;</span>
+      )
+    }
+  </div>
+</Layout>
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="astro/client" />
+declare namespace App {
+  interface Locals {
+    SITE_URL: string,
+  }
+}
--- a/src/layouts/base.astro
+++ b/src/layouts/base.astro
@@ -0,0 +1,124 @@
+---
+import '../assets/normalize.css'
+import '../assets/style.css'
+import '../assets/global.css'
+import { SEO } from 'astro-seo'
+import { getEnv } from '../lib/env'
+
+const { SITE_URL } = Astro.locals
+const { channel } = Astro.props
+
+const locale = getEnv(import.meta.env, Astro, 'LOCALE')
+
+const seo = channel?.seo
+const canonical = SITE_URL.startsWith('http')
+  ? new URL(SITE_URL).origin + Astro.url.pathname
+  : Astro.url.origin + Astro.url.pathname
+const origin = new URL(canonical).origin
+const twitter = getEnv(import.meta.env, Astro, 'TWITTER')
+
+const seoParams = {
+  title: seo?.title,
+  description: seo?.text ?? channel?.description,
+  canonical,
+  noindex: getEnv(import.meta.env, Astro, 'NOINDEX'),
+  nofollow: getEnv(import.meta.env, Astro, 'NOFOLLOW'),
+  openGraph: {
+    basic: {
+      type: 'website',
+      title: channel?.title ?? '',
+      url: canonical,
+      image: channel?.avatar ? channel.avatar : origin + '/favicon.ico',
+    },
+    optional: {
+      description: seo?.text ?? channel?.description,
+      locale: getEnv(import.meta.env, Astro, 'LOCALE'),
+    },
+  },
+  extend: {
+    link: [{ rel: 'icon', href: '/favicon.svg' }],
+  },
+}
+
+const HEADER_INJECT = getEnv(import.meta.env, Astro, 'HEADER_INJECT')
+const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT')
+---
+
+<!doctype html>
+<html lang={locale ?? 'en'}>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#f4f1ec" />
+    <link
+      rel="alternate"
+      type="application/rss+xml"
+      title={channel?.title}
+      href={origin + '/rss.xml'}
+    />
+    <SEO
+      charset="utf-8"
+      titleTemplate={`%s | ${channel?.title}`}
+      titleDefault={[channel?.title, seoParams.description]
+        .filter(Boolean)
+        .join(' - ')}
+      twitter={{
+        card: 'summary_large_image',
+        creator: twitter ? `@${twitter}` : undefined,
+      }}
+      {...seoParams}
+    />
+    <Fragment set:html={HEADER_INJECT} />
+  </head>
+  <body>
+    <div id="wrapper">
+      <div id="container">
+        <div id="main-container">
+          <slot />
+        </div>
+        <div id="aside-container">
+          <slot name="aside">
+            <div class="nav">
+              <div class="nav-item">
+                <a
+                  href={SITE_URL}
+                  title={channel?.title}
+                  class={`nav-link current`}>Home</a
+                >
+              </div>
+            </div>
+            <input
+              class="search-icon"
+              name="icon"
+              type="checkbox"
+              placeholder="Search"
+            />
+            <form class="search-form" action="/search/result" method="get">
+              <input type="text" name="q" placeholder="Search" />
+            </form>
+            <div class="copyright-wrap">
+              Powered by
+              <a
+                href="https://github.com/ccbikai/BroadcastChannel"
+                title="BroadcastChannel"
+                target="_blank"
+                rel="noopener"
+              >
+                BroadcastChannel
+              </a> &
+              <a
+                href="https://github.com/Planetable/SiteTemplateSepia"
+                title="Sepia"
+                target="_blank"
+                rel="noopener"
+              >
+                Sepia
+              </a>
+            </div>
+          </slot>
+        </div>
+      </div>
+    </div>
+
+    <Fragment set:html={FOOTER_INJECT} />
+  </body>
+</html>
--- a/src/lib/dayjs.js
+++ b/src/lib/dayjs.js
@@ -0,0 +1,158 @@
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import updateLocale from 'dayjs/plugin/updateLocale'
+import localizedFormat from 'dayjs/plugin/localizedFormat'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
+
+import 'dayjs/locale/af'
+import 'dayjs/locale/am'
+import 'dayjs/locale/ar-dz'
+import 'dayjs/locale/ar-iq'
+import 'dayjs/locale/ar-kw'
+import 'dayjs/locale/ar-ly'
+import 'dayjs/locale/ar-ma'
+import 'dayjs/locale/ar-sa'
+import 'dayjs/locale/ar-tn'
+import 'dayjs/locale/ar'
+import 'dayjs/locale/az'
+import 'dayjs/locale/be'
+import 'dayjs/locale/bg'
+import 'dayjs/locale/bi'
+import 'dayjs/locale/bm'
+import 'dayjs/locale/bn-bd'
+import 'dayjs/locale/bn'
+import 'dayjs/locale/bo'
+import 'dayjs/locale/br'
+import 'dayjs/locale/bs'
+import 'dayjs/locale/ca'
+import 'dayjs/locale/cs'
+import 'dayjs/locale/cv'
+import 'dayjs/locale/cy'
+import 'dayjs/locale/da'
+import 'dayjs/locale/de-at'
+import 'dayjs/locale/de-ch'
+import 'dayjs/locale/de'
+import 'dayjs/locale/dv'
+import 'dayjs/locale/el'
+import 'dayjs/locale/en-au'
+import 'dayjs/locale/en-ca'
+import 'dayjs/locale/en-gb'
+import 'dayjs/locale/en-ie'
+import 'dayjs/locale/en-il'
+import 'dayjs/locale/en-in'
+import 'dayjs/locale/en-nz'
+import 'dayjs/locale/en-sg'
+import 'dayjs/locale/en-tt'
+import 'dayjs/locale/en'
+import 'dayjs/locale/eo'
+import 'dayjs/locale/es-do'
+import 'dayjs/locale/es-mx'
+import 'dayjs/locale/es-pr'
+import 'dayjs/locale/es-us'
+import 'dayjs/locale/es'
+import 'dayjs/locale/et'
+import 'dayjs/locale/eu'
+import 'dayjs/locale/fa'
+import 'dayjs/locale/fi'
+import 'dayjs/locale/fo'
+import 'dayjs/locale/fr-ca'
+import 'dayjs/locale/fr-ch'
+import 'dayjs/locale/fr'
+import 'dayjs/locale/fy'
+import 'dayjs/locale/ga'
+import 'dayjs/locale/gd'
+import 'dayjs/locale/gl'
+import 'dayjs/locale/gom-latn'
+import 'dayjs/locale/gu'
+import 'dayjs/locale/he'
+import 'dayjs/locale/hi'
+import 'dayjs/locale/hr'
+import 'dayjs/locale/ht'
+import 'dayjs/locale/hu'
+import 'dayjs/locale/hy-am'
+import 'dayjs/locale/id'
+import 'dayjs/locale/is'
+import 'dayjs/locale/it-ch'
+import 'dayjs/locale/it'
+import 'dayjs/locale/ja'
+import 'dayjs/locale/jv'
+import 'dayjs/locale/ka'
+import 'dayjs/locale/kk'
+import 'dayjs/locale/km'
+import 'dayjs/locale/kn'
+import 'dayjs/locale/ko'
+import 'dayjs/locale/ku'
+import 'dayjs/locale/ky'
+import 'dayjs/locale/lb'
+import 'dayjs/locale/lo'
+import 'dayjs/locale/lt'
+import 'dayjs/locale/lv'
+import 'dayjs/locale/me'
+import 'dayjs/locale/mi'
+import 'dayjs/locale/mk'
+import 'dayjs/locale/ml'
+import 'dayjs/locale/mn'
+import 'dayjs/locale/mr'
+import 'dayjs/locale/ms-my'
+import 'dayjs/locale/ms'
+import 'dayjs/locale/mt'
+import 'dayjs/locale/my'
+import 'dayjs/locale/nb'
+import 'dayjs/locale/ne'
+import 'dayjs/locale/nl-be'
+import 'dayjs/locale/nl'
+import 'dayjs/locale/nn'
+import 'dayjs/locale/oc-lnc'
+import 'dayjs/locale/pa-in'
+import 'dayjs/locale/pl'
+import 'dayjs/locale/pt-br'
+import 'dayjs/locale/pt'
+import 'dayjs/locale/rn'
+import 'dayjs/locale/ro'
+import 'dayjs/locale/ru'
+import 'dayjs/locale/rw'
+import 'dayjs/locale/sd'
+import 'dayjs/locale/se'
+import 'dayjs/locale/si'
+import 'dayjs/locale/sk'
+import 'dayjs/locale/sl'
+import 'dayjs/locale/sq'
+import 'dayjs/locale/sr-cyrl'
+import 'dayjs/locale/sr'
+import 'dayjs/locale/ss'
+import 'dayjs/locale/sv-fi'
+import 'dayjs/locale/sv'
+import 'dayjs/locale/sw'
+import 'dayjs/locale/ta'
+import 'dayjs/locale/te'
+import 'dayjs/locale/tet'
+import 'dayjs/locale/tg'
+import 'dayjs/locale/th'
+import 'dayjs/locale/tk'
+import 'dayjs/locale/tl-ph'
+import 'dayjs/locale/tlh'
+import 'dayjs/locale/tr'
+import 'dayjs/locale/tzl'
+import 'dayjs/locale/tzm-latn'
+import 'dayjs/locale/tzm'
+import 'dayjs/locale/ug-cn'
+import 'dayjs/locale/uk'
+import 'dayjs/locale/ur'
+import 'dayjs/locale/uz-latn'
+import 'dayjs/locale/uz'
+import 'dayjs/locale/vi'
+import 'dayjs/locale/x-pseudo'
+import 'dayjs/locale/yo'
+import 'dayjs/locale/zh-cn'
+import 'dayjs/locale/zh-hk'
+import 'dayjs/locale/zh-tw'
+import 'dayjs/locale/zh'
+
+dayjs.extend(updateLocale)
+dayjs.extend(relativeTime)
+dayjs.extend(localizedFormat)
+dayjs.extend(utc)
+dayjs.extend(timezone)
+
+export default dayjs
--- a/src/lib/env.js
+++ b/src/lib/env.js
@@ -0,0 +1,3 @@
+export function getEnv(env, Astro, name) {
+  return env[name] ?? Astro.locals?.runtime?.env?.[name]
+}
--- a/src/lib/telegram/index.js
+++ b/src/lib/telegram/index.js
@@ -0,0 +1,146 @@
+import { $fetch } from 'ofetch'
+import * as cheerio from 'cheerio'
+import { LRUCache } from 'lru-cache'
+import { getEnv } from '../env'
+
+const cache = new LRUCache({
+  ttl: 1000 * 60 * 5, // 5 minutes
+  maxSize: 50 * 1024 * 1024, // 50MB
+  sizeCalculation: (item) => {
+    return JSON.stringify(item).length
+  },
+})
+
+function getImages($, item, { staticProxy, id, index, title }) {
+  return $(item).find('.tgme_widget_message_photo_wrap')?.map((_index, photo) => {
+    const url = $(photo).attr('style').match(/url\(["'](.*?)["']/)?.[1]
+    const popoverId = `modal-${id}-${_index}`
+    return `
+      <button class="image-preview-button image-preview-wrap" popovertarget="${popoverId}" popovertargetaction="show">
+        <img src="${staticProxy + url}" alt="${title}" loading="${index > 15 ? 'eager' : 'lazy'}" />
+      </button>
+      <button class="image-preview-button modal" id="${popoverId}" popovertarget="${popoverId}" popovertargetaction="hide" popover>
+        <img class="modal-img" src="${staticProxy + url}" alt="${title}" loading="${index > 15 ? 'eager' : 'lazy'}" />
+      </button>
+    `
+  })?.get()?.join('')
+}
+
+function getVideo($, item, { staticProxy, index }) {
+  const video = $(item).find('.tgme_widget_message_video_wrap video')
+  video?.attr('src', staticProxy + video?.attr('src'))?.attr('controls', true)?.attr('preload', index > 15 ? 'auto' : 'metadata')
+  return $.html(video)
+}
+
+function getLinkPreview($, item, { staticProxy, index }) {
+  const link = $(item).find('.tgme_widget_message_link_preview')
+  const title = $(item).find('.link_preview_title')?.text() || $(item).find('.link_preview_site_name')?.text()
+  const description = $(item).find('.link_preview_description')?.text()
+
+  link?.attr('target', '_blank').attr('rel', 'noopener').attr('title', description)
+
+  const image = $(item).find('.link_preview_image')
+  const src = image?.attr('style')?.match(/url\(["'](.*?)["']/i)?.[1]
+  const imageSrc = src ? staticProxy + src : ''
+  image?.replaceWith(`<img class="link_preview_image" alt="${title}" src="${imageSrc}" loading="${index > 15 ? 'eager' : 'lazy'}" />`)
+  return $.html(link)
+}
+
+function getPost($, item, { channel, staticProxy, index = 0 }) {
+  item = item ? $(item).find('.tgme_widget_message') : $('.tgme_widget_message')
+  const content = $(item).find('.tgme_widget_message_bubble > .tgme_widget_message_text')
+  const title = content?.text()?.match(/[^。\n]*(?=[。\n]|http)/g)?.[0] ?? content?.text() ?? ''
+  const id = $(item).attr('data-post')?.replace(`${channel}/`, '')
+
+  $(content).find('a').each((_index, a) => {
+    $(a).attr('title', $(a).text())
+  })
+
+  return {
+    id,
+    title,
+    type: $(item).attr('class')?.includes('service_message') ? 'service' : 'text',
+    datetime: $(item).find('.tgme_widget_message_date time')?.attr('datetime'),
+    tags: $(item).find('a[href^="?q"]')?.map((_index, item) => $(item).text()?.replace('#', ''))?.get(),
+    text: content?.text(),
+    content: [
+      getImages($, item, { staticProxy, id, index, title }),
+      getVideo($, item, { staticProxy, id, index, title }),
+      content?.html(),
+      // $(item).find('.tgme_widget_message_sticker_wrap')?.html(),
+      $(item).find('.tgme_widget_message_poll')?.html(),
+      $.html($(item).find('.tgme_widget_message_document_wrap')),
+      $.html($(item).find('.tgme_widget_message_roundvideo')?.attr('controls', true)),
+      $.html($(item).find('.tgme_widget_message_voice')?.attr('controls', true)),
+      $.html($(item).find('.tgme_widget_message_location_wrap')),
+      $.html($(item).find('.tgme_widget_message_reply .tgme_widget_message_text')?.wrapInner('<blockquote></blockquote>')),
+      getLinkPreview($, item, { staticProxy, index }),
+    ].filter(Boolean).join('').replace(/(url\(["'])((https?:)?\/\/)/g, (match, p1, p2, _p3) => {
+      if (p2 === '//') {
+        p2 = 'https://'
+      }
+      if (p2?.startsWith('t.me')) {
+        return false
+      }
+      return `${p1}${staticProxy}${p2}`
+    }),
+  }
+}
+
+const unnessaryHeaders = ['host', 'cookie', 'origin', 'referer']
+
+export async function getChannelInfo(Astro, { before = '', after = '', q = '', id = '' } = {}) {
+  const cacheKey = JSON.stringify({ before, after, q, id })
+  const cachedResult = cache.get(cacheKey)
+
+  if (cachedResult) {
+    console.info('Macth Cache', { before, after, q, id })
+    return JSON.parse(JSON.stringify(cachedResult))
+  }
+
+  // Where t.me can also be telegram.me, telegram.dog
+  const host = getEnv(import.meta.env, Astro, 'HOST') ?? 't.me'
+  const channel = getEnv(import.meta.env, Astro, 'CHANNEL')
+  const staticProxy = getEnv(import.meta.env, Astro, 'STATIC_PROXY') ?? '/static/'
+
+  const url = id ? `https://${host}/${channel}/${id}?embed=1&mode=tme` : `https://${host}/s/${channel}`
+  const headers = Object.fromEntries(Astro.request.headers)
+
+  Object.keys(headers).forEach((key) => {
+    if (unnessaryHeaders.includes(key)) {
+      delete headers[key]
+    }
+  })
+
+  console.info('Fetching', url, { before, after, q, id })
+  const html = await $fetch(url, {
+    headers,
+    query: {
+      before: before || undefined,
+      after: after || undefined,
+      q: q || undefined,
+    },
+    retry: 3,
+    retryDelay: 100,
+  })
+
+  const $ = cheerio.load(html, {}, false)
+  if (id) {
+    const post = getPost($, null, { channel, staticProxy })
+    cache.set(cacheKey, post)
+    return post
+  }
+  const posts = $('.tgme_channel_history  .tgme_widget_message_wrap')?.map((index, item) => {
+    return getPost($, item, { channel, staticProxy, index })
+  })?.get()?.reverse().filter(post => ['text'].includes(post.type) && post.id && post.content)
+
+  const channelInfo = {
+    posts,
+    title: $('.tgme_channel_info_header_title')?.text(),
+    description: $('.tgme_channel_info_description')?.text(),
+    avatar: $('.tgme_page_photo_image img')?.attr('src'),
+  }
+
+  cache.set(cacheKey, channelInfo)
+  return channelInfo
+}
--- a/src/middleware.js
+++ b/src/middleware.js
@@ -0,0 +1,4 @@
+export function onRequest(context, next) {
+  context.locals.SITE_URL = `${import.meta.env.SITE ?? ''}${import.meta.env.BASE_URL}`
+  return next()
+};
--- a/src/pages/after/[cursor].astro
+++ b/src/pages/after/[cursor].astro
@@ -0,0 +1,12 @@
+---
+import List from '../../components/list.astro'
+import { getChannelInfo } from '../../lib/telegram'
+
+const channel = await getChannelInfo(Astro, {
+  after: Astro.params.cursor,
+})
+
+export const prerender = false
+---
+
+<List channel={channel} />
--- a/src/pages/before/[cursor].astro
+++ b/src/pages/before/[cursor].astro
@@ -0,0 +1,12 @@
+---
+import List from '../../components/list.astro'
+import { getChannelInfo } from '../../lib/telegram'
+
+const channel = await getChannelInfo(Astro, {
+  before: Astro.params.cursor,
+})
+
+export const prerender = false
+---
+
+<List channel={channel} />
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -0,0 +1,12 @@
+---
+import List from '../components/list.astro'
+import { getChannelInfo } from '../lib/telegram'
+
+const channel = await getChannelInfo(Astro, {
+  q: Astro.url.searchParams.get('q') || '',
+})
+
+export const prerender = false
+---
+
+<List channel={channel} after={false} />
--- a/src/pages/posts/[id].astro
+++ b/src/pages/posts/[id].astro
@@ -0,0 +1,26 @@
+---
+import List from '../../components/list.astro'
+import { getChannelInfo } from '../../lib/telegram'
+
+const { SITE_URL } = Astro.locals
+
+const channel = await getChannelInfo(Astro)
+
+const post = await getChannelInfo(Astro, {
+  id: Astro.params.id,
+})
+
+channel.posts = [post]
+channel.seo = post
+
+export const prerender = false
+---
+
+<List channel={channel} before={false} after={false}>
+  <div slot="header" id="breadcrumb">
+    <img src={channel.avatar} class="breadcrumb-avatar" />
+    <div class="breadcrumb-title">
+      <a href={SITE_URL} class="site-title">{channel.title}</a>
+    </div>
+  </div>
+</List>
--- a/src/pages/rss.json.js
+++ b/src/pages/rss.json.js
@@ -0,0 +1,28 @@
+import { getChannelInfo } from '../lib/telegram'
+
+export const prerender = false
+
+export async function GET(Astro) {
+  const request = Astro.request
+  const { SITE_URL } = Astro.locals
+  const channel = await getChannelInfo(Astro)
+  const posts = channel.posts || []
+
+  const url = new URL(request.url)
+  url.pathname = SITE_URL
+
+  return Response.json({
+    version: 'https://jsonfeed.org/version/1.1',
+    title: channel.title,
+    description: channel.description,
+    home_page_url: url.toString(),
+    items: posts.map(item => ({
+      url: `${url.toString()}posts/${item.id}`,
+      title: item.title,
+      description: item.description,
+      date_published: new Date(item.datetime),
+      tags: item.tags,
+      content_html: item.content,
+    })),
+  })
+}
--- a/src/pages/rss.xml.js
+++ b/src/pages/rss.xml.js
@@ -0,0 +1,28 @@
+import rss from '@astrojs/rss'
+
+import { getChannelInfo } from '../lib/telegram'
+
+export const prerender = false
+
+export async function GET(Astro) {
+  const request = Astro.request
+  const { SITE_URL } = Astro.locals
+  const channel = await getChannelInfo(Astro)
+  const posts = channel.posts || []
+
+  const url = new URL(request.url)
+  url.pathname = SITE_URL
+
+  return rss({
+    title: channel.title,
+    description: channel.description,
+    site: url.origin,
+    items: posts.map(item => ({
+      link: `posts/${item.id}`,
+      title: item.title,
+      description: item.description,
+      pubDate: new Date(item.datetime),
+      content: item.content,
+    })),
+  })
+}
--- a/src/pages/search/[q].astro
+++ b/src/pages/search/[q].astro
@@ -0,0 +1,12 @@
+---
+import List from '../../components/list.astro'
+import { getChannelInfo } from '../../lib/telegram'
+
+const channel = await getChannelInfo(Astro, {
+  q: Astro.url.searchParams.get('q') || Astro.params.q,
+})
+
+export const prerender = false
+---
+
+<List channel={channel} before={false} after={false} />
--- a/src/pages/static/[...url].js
+++ b/src/pages/static/[...url].js
@@ -0,0 +1,18 @@
+const targetWhitelist = [
+  't.me',
+  'telegram.org',
+  'telegram.me',
+  'telegram.dog',
+  'cdn-telegram.org',
+]
+
+export const prerender = false
+
+export async function GET(Astro) {
+  const { request, params, url } = Astro
+  const target = new URL(params.url + url.search)
+  if (!targetWhitelist.some(host => target.host.endsWith(host))) {
+    return Astro.redirect(target.toString(), 302)
+  }
+  return fetch(target.toString(), request)
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/base"
+}
				`@@ -0,0 +1 @@`
				`<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="currentColor" d="M5.719 14.75a.997.997 0 0 1-.664-.252L-.005 10l5.341-4.748a1 1 0 0 1 1.328 1.495L3.005 10l3.378 3.002a1 1 0 0 1-.664 1.748zm8.945-.002L20.005 10l-5.06-4.498a.999.999 0 1 0-1.328 1.495L16.995 10l-3.659 3.252a1 1 0 0 0 1.328 1.496zm-4.678 1.417 2-12a1 1 0 1 0-1.972-.329l-2 12a1 1 0 1 0 1.972.329z"></path></svg>`
				`@@ -0,0 +1 @@`
				`<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m20.665 3.717-17.73 6.837c-1.21.486-1.203 1.161-.222 1.462l4.552 1.42 10.532-6.645c.498-.303.953-.14.579.192l-8.533 7.701h-.002l.002.001-.314 4.692c.46 0 .663-.211.921-.46l2.211-2.15 4.599 3.397c.848.467 1.457.227 1.668-.785l3.019-14.228c.309-1.239-.473-1.8-1.282-1.434z"/></svg>`