From 7896e90c9204741d880ab5164dc5500d6380213a Mon Sep 17 00:00:00 2001 From: sy Date: Tue, 6 Aug 2024 13:00:40 +0800 Subject: [PATCH 01/18] feat: support Mastodon/BlueSky social button --- .env.example | 2 ++ README.md | 2 ++ src/assets/bluesky.svg | 4 ++++ src/assets/mastodon.svg | 4 ++++ src/components/header.astro | 34 ++++++++++++++++++++++++++++++++++ 5 files changed, 46 insertions(+) create mode 100644 src/assets/bluesky.svg create mode 100644 src/assets/mastodon.svg diff --git a/.env.example b/.env.example index 3d10b6a..33b14e7 100644 --- a/.env.example +++ b/.env.example @@ -8,6 +8,8 @@ TWITTER=ccbikai GITHUB=ccbikai DISCORD=https://DISCORD.com PODCASRT=https://PODCASRT.com +MASTODON=mastodon.social/@Mastodon +BLUESKY=bsky.app FOOTER_INJECT=FOOTER_INJECT HEADER_INJECT=HEADER_INJECT diff --git a/README.md b/README.md index 89816be..ffac977 100644 --- a/README.md +++ b/README.md @@ -60,6 +60,8 @@ TIMEZONE="America/New_York" TELEGRAM=ccbikai TWITTER=ccbikai GITHUB=ccbikai +MASTODON=mastodon.social/@Mastodon +BLUESKY=bsky.app ## The following two social media need to be URLs DISCORD=https://DISCORD.com diff --git a/src/assets/bluesky.svg b/src/assets/bluesky.svg new file mode 100644 index 0000000..c605d10 --- /dev/null +++ b/src/assets/bluesky.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/mastodon.svg b/src/assets/mastodon.svg new file mode 100644 index 0000000..730bf5c --- /dev/null +++ b/src/assets/mastodon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/components/header.astro b/src/components/header.astro index 85eba8e..e3d2a58 100644 --- a/src/components/header.astro +++ b/src/components/header.astro @@ -7,6 +7,8 @@ import twitter from '../assets/twitter.svg' import github from '../assets/github.svg' import discord from '../assets/discord.svg' import telegram from '../assets/telegram.svg' +import mastodon from '../assets/mastodon.svg' +import bluesky from '../assets/bluesky.svg' const { SITE_URL } = Astro.locals const { channel } = Astro.props @@ -16,6 +18,8 @@ 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 MASTODON = getEnv(import.meta.env, Astro, 'MASTODON') +const BLUESKY = getEnv(import.meta.env, Astro, 'BLUESKY') const staticProxy = getEnv(import.meta.env, Astro, 'STATIC_PROXY') ?? '/static/' --- @@ -110,6 +114,36 @@ const staticProxy = getEnv(import.meta.env, Astro, 'STATIC_PROXY') ?? '/static/' ) } + + { + MASTODON && MASTODON.length > 0 && ( + + + + ) + } + + { + BLUESKY && BLUESKY.length > 0 && ( + + + + ) + } From c19b401e4d7ea45d2f9fbe71b33d42f935257ff4 Mon Sep 17 00:00:00 2001 From: Charles Chin Date: Tue, 6 Aug 2024 13:16:34 +0800 Subject: [PATCH 02/18] feat: add new real user resource Added a new link to a blog discovery platform under the Real users section in both English and Chinese README files, enhancing resource visibility and accessibility for users. * https://memo.eallion.com/ --- README.md | 1 + README.zh-cn.md | 1 + 2 files changed, 2 insertions(+) diff --git a/README.md b/README.md index ce14139..03ebeee 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,7 @@ English | [简体中文](./README.zh-cn.md) - [Memos 广场 🎪](https://now.memobbs.app/) - [APPDO 数字生活指南](https://mini.appdo.xyz/) - [85.60×53.98卡粉订阅/提醒](https://tg.docofcard.com/) +- [Charles Chin's Whisper](https://memo.eallion.com/) ### Platform diff --git a/README.zh-cn.md b/README.zh-cn.md index a67db90..c817e33 100644 --- a/README.zh-cn.md +++ b/README.zh-cn.md @@ -21,6 +21,7 @@ - [Memos 广场 🎪](https://now.memobbs.app/) - [APPDO 数字生活指南](https://mini.appdo.xyz/) - [85.60×53.98卡粉订阅/提醒](https://tg.docofcard.com/) +- [Charles Chin's Whisper](https://memo.eallion.com/) ### 平台 From 5230428b4b7dad92b14680b8e492c810ceb50979 Mon Sep 17 00:00:00 2001 From: cy Date: Tue, 6 Aug 2024 13:26:55 +0800 Subject: [PATCH 03/18] feat: add new real user resource --- README.md | 1 + README.zh-cn.md | 1 + 2 files changed, 2 insertions(+) diff --git a/README.md b/README.md index ce14139..69f1751 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,7 @@ English | [简体中文](./README.zh-cn.md) - [Memos 广场 🎪](https://now.memobbs.app/) - [APPDO 数字生活指南](https://mini.appdo.xyz/) - [85.60×53.98卡粉订阅/提醒](https://tg.docofcard.com/) +- [PlayStation 新闻转发](https://playstationnews.pages.dev) ### Platform diff --git a/README.zh-cn.md b/README.zh-cn.md index a67db90..17678c4 100644 --- a/README.zh-cn.md +++ b/README.zh-cn.md @@ -21,6 +21,7 @@ - [Memos 广场 🎪](https://now.memobbs.app/) - [APPDO 数字生活指南](https://mini.appdo.xyz/) - [85.60×53.98卡粉订阅/提醒](https://tg.docofcard.com/) +- [PlayStation 新闻转发](https://playstationnews.pages.dev) ### 平台 From 39e3532f7b2e45591dd0d8846b05689cc7cad1e4 Mon Sep 17 00:00:00 2001 From: hk Date: Tue, 6 Aug 2024 13:56:08 +0800 Subject: [PATCH 04/18] feat: add new real user resource --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index 3390102..397853d 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,11 @@ English | [简体中文](./README.zh-cn.md) - [85.60×53.98卡粉订阅/提醒](https://tg.docofcard.com/) - [Charles Chin's Whisper](https://memo.eallion.com/) - [PlayStation 新闻转发](https://playstationnews.pages.dev) +- [Yu's Life](https://daily.pseudoyu.com/) +- [Leslie 和朋友们](https://tg.imlg.co/) +- [OKHK 分享](https://tg.okhk.net/) +- [新闻在花频道](https://tg.istore.app/) +- [gledos 的微型博客](https://microblogging.gledos.science) ### Platform From a9f870f5abf3c7a0129747034ddf7bbe55a5b465 Mon Sep 17 00:00:00 2001 From: nicad <36125594+PBnicad@users.noreply.github.com> Date: Tue, 6 Aug 2024 15:35:22 +0800 Subject: [PATCH 05/18] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 3390102..90e022a 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,7 @@ English | [简体中文](./README.zh-cn.md) - [85.60×53.98卡粉订阅/提醒](https://tg.docofcard.com/) - [Charles Chin's Whisper](https://memo.eallion.com/) - [PlayStation 新闻转发](https://playstationnews.pages.dev) +- [LiFePO4:沙雕吐槽](https://lifepo4.top) ### Platform From 39917a256c9a5d56d572c7da466d3a2da60fa668 Mon Sep 17 00:00:00 2001 From: nicad <36125594+PBnicad@users.noreply.github.com> Date: Tue, 6 Aug 2024 15:35:38 +0800 Subject: [PATCH 06/18] Update README.zh-cn.md --- README.zh-cn.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.zh-cn.md b/README.zh-cn.md index 48894d0..ccef1fc 100644 --- a/README.zh-cn.md +++ b/README.zh-cn.md @@ -23,6 +23,7 @@ - [85.60×53.98卡粉订阅/提醒](https://tg.docofcard.com/) - [Charles Chin's Whisper](https://memo.eallion.com/) - [PlayStation 新闻转发](https://playstationnews.pages.dev) +- [LiFePO4:沙雕吐槽](https://lifepo4.top) ### 平台 From bd7bba2f06a2d992a991b563bcb7543b6e8b05f8 Mon Sep 17 00:00:00 2001 From: ccbikai Date: Tue, 6 Aug 2024 19:02:56 +0800 Subject: [PATCH 07/18] feat: enhance CSS handling and optimize global styles - Enabled PostCSS nesting with specific configuration for modern compatibility - Added global CSS reset for consistent tap highlights across browsers - Optimized package configuration for broader browser support - Refactored and streamlined global CSS, removing redundant styles for better maintainability - Integrated additional CSS import in component for modular styling approach --- package.json | 5 +- postcss.config.cjs | 5 +- src/assets/global.css | 58 ++--------- src/assets/item.css | 208 ++++++++++++++++++++++++++++++++++++++ src/components/item.astro | 143 +------------------------- src/lib/telegram/index.js | 12 ++- 6 files changed, 234 insertions(+), 197 deletions(-) create mode 100644 src/assets/item.css diff --git a/package.json b/package.json index 1481943..72b70c8 100644 --- a/package.json +++ b/package.json @@ -47,5 +47,8 @@ }, "lint-staged": { "*": "eslint --fix" - } + }, + "browserslist": [ + "defaults" + ] } diff --git a/postcss.config.cjs b/postcss.config.cjs index ef22201..9e6cc3f 100644 --- a/postcss.config.cjs +++ b/postcss.config.cjs @@ -1,6 +1,9 @@ module.exports = { plugins: [ - // require('postcss-nesting'), + require('postcss-nesting')({ + edition: '2021', + noIsPseudoSelector: true, + }), require('autoprefixer'), require('cssnano'), ], diff --git a/src/assets/global.css b/src/assets/global.css index 1af9f8a..3104f5f 100644 --- a/src/assets/global.css +++ b/src/assets/global.css @@ -1,3 +1,7 @@ +* { + -webkit-tap-highlight-color: transparent; +} + .site-title { view-transition-name: site-title; transition: 0.2s ease; @@ -7,55 +11,6 @@ transition: 0.2s ease; } -[popover] { - display: none; - &:popover-open { - display: block; - } -} - -.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) !important; - max-height: calc(100% - 40px) !important; - border-radius: var(--media-border-radius); - border: 1px solid var(--border-color); - box-shadow: var(--shadows); - cursor: pointer; - object-fit: scale-down; -} - -@media screen and (min-width: 600px) { - .modal-img { - max-width: calc(100% - 80px) !important; - max-height: calc(100% - 80px) !important; - } -} - .search-icon { position: absolute; top: 20px; @@ -63,8 +18,10 @@ width: 24px; height: 24px; padding: 4px; + appearance: none; + outline: none; - &::after { + &:after { content: '🔍'; width: 100%; height: 100%; @@ -81,6 +38,7 @@ .search-icon:checked + .search-form { display: block !important; } + .search-form { display: none; background: rgba(255, 255, 255, 0.75); diff --git a/src/assets/item.css b/src/assets/item.css new file mode 100644 index 0000000..4d16117 --- /dev/null +++ b/src/assets/item.css @@ -0,0 +1,208 @@ +.content { + word-break: break-word; + + img { + width: calc(100% - var(--box-margin)); + } + + .tgme_widget_message_link_preview { + margin-top: 16px; + display: none; + + .link_preview_site_name, + .link_preview_title, + .link_preview_description { + display: none; + } + } + + .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; + } + } + + .tgme_widget_message_video, + .tgme_widget_message_roundvideo { + aspect-ratio: 1 / 1; + } + + .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; + } + } + + 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); + } + + .tgme_widget_message_sticker { + display: block; + } + + &:has(.tgme_widget_message_user_photo) { + display: flex; + + .tgme_widget_message_user_photo { + width: 60px; + height: 60px; + } + } + + .tgme_widget_message_voice { + display: block !important; + } + + .tgme_widget_message_poll_options { + display: block; + + .tgme_widget_message_poll_option_percent { + float: left; + margin-right: 8px; + } + } + + .tgme_widget_message_location_wrap { + display: block; + .tgme_widget_message_location { + padding-top: 50%; + background: no-repeat center; + background-size: cover; + } + } + + .emoji { + font-style: normal; + margin-right: 2px; + } + + .sticker { + box-shadow: none; + border: none; + } + + .spoiler-button { + cursor: pointer; + + input { + display: none; + } + + tg-spoiler { + color: #ccc; + background: repeating-conic-gradient(#000 0 0.0001%, #0000 0 0.0002%) 60% + 60% / 3000px 3000px; + } + + input:checked + tg-spoiler { + background: unset; + color: unset; + } + } +} + +.tag-box { + flex-wrap: wrap; +} + +[popover] { + display: none; + &:popover-open { + display: block; + } +} + +.image-preview-wrap { + display: block; +} + +.image-preview-button { + 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) !important; + max-height: calc(100% - 40px) !important; + border-radius: var(--media-border-radius); + border: 1px solid var(--border-color); + box-shadow: var(--shadows); + cursor: pointer; + object-fit: scale-down; +} + +@media screen and (min-width: 600px) { + .modal-img { + max-width: calc(100% - 80px) !important; + max-height: calc(100% - 80px) !important; + } +} diff --git a/src/components/item.astro b/src/components/item.astro index 5a846ad..bb49ece 100644 --- a/src/components/item.astro +++ b/src/components/item.astro @@ -1,4 +1,5 @@ --- +import '../assets/item.css' import dayjs from '../lib/dayjs' import { getEnv } from '../lib/env' @@ -48,145 +49,3 @@ const timeago = datetime.isBefore(dayjs().subtract(1, 'w')) ) } - - diff --git a/src/lib/telegram/index.js b/src/lib/telegram/index.js index 87c0235..53ca3e9 100644 --- a/src/lib/telegram/index.js +++ b/src/lib/telegram/index.js @@ -76,17 +76,23 @@ function getLinkPreview($, item, { staticProxy, index }) { return $.html(link) } -function modifyHTMLContent($, content) { +function modifyHTMLContent($, content, { index } = {}) { + $(content).find('.emoji')?.attr('style', '') $(content).find('a')?.each((_index, a) => { $(a)?.attr('title', $(a)?.text()) }) - $(content).find('.emoji')?.attr('style', '') + $(content).find('tg-spoiler')?.each((_index, spoiler) => { + const id = `spoiler-${index}-${_index}` + $(spoiler)?.attr('id', id) + ?.wrap('') + ?.before(``) + }) return content } function getPost($, item, { channel, staticProxy, index = 0 }) { item = item ? $(item).find('.tgme_widget_message') : $('.tgme_widget_message') - const content = modifyHTMLContent($, $(item).find('.tgme_widget_message_text')) + const content = modifyHTMLContent($, $(item).find('.tgme_widget_message_text'), { index }) const title = content?.text()?.match(/[^。\n]*(?=[。\n]|http)/g)?.[0] ?? content?.text() ?? '' const id = $(item).attr('data-post')?.replace(`${channel}/`, '') From d7eeca2b16d5700b0894672e1a2137142fa7c796 Mon Sep 17 00:00:00 2001 From: ccbikai Date: Tue, 6 Aug 2024 19:12:51 +0800 Subject: [PATCH 08/18] feat: add background color to spoiler for consistency --- src/assets/item.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/assets/item.css b/src/assets/item.css index 4d16117..21bbc62 100644 --- a/src/assets/item.css +++ b/src/assets/item.css @@ -143,6 +143,7 @@ tg-spoiler { color: #ccc; + background-color: #ccc; background: repeating-conic-gradient(#000 0 0.0001%, #0000 0 0.0002%) 60% 60% / 3000px 3000px; } From 2a23887e7cbd42893ac3dd247dc90f2454f0c8c9 Mon Sep 17 00:00:00 2001 From: ccbikai Date: Tue, 6 Aug 2024 19:48:08 +0800 Subject: [PATCH 09/18] feat: enhance spoiler visibility and style consistency Simplified spoiler styling to improve visibility and maintain consistent appearance across different devices and browsers. This change removes the text color and background color overlap, making the spoiler content more accessible and visually appealing. --- src/assets/item.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/assets/item.css b/src/assets/item.css index 21bbc62..0ef2ee7 100644 --- a/src/assets/item.css +++ b/src/assets/item.css @@ -142,10 +142,12 @@ } tg-spoiler { - color: #ccc; - background-color: #ccc; - background: repeating-conic-gradient(#000 0 0.0001%, #0000 0 0.0002%) 60% - 60% / 3000px 3000px; + color: transparent; + background: #ccc 60% 60% / 3000px 3000px; + background-image: repeating-conic-gradient( + #ccc 0 0.0001%, + #000 0 0.0002% + ); } input:checked + tg-spoiler { From d7c11f3c5e6f4e66d4517bf289030422f2674620 Mon Sep 17 00:00:00 2001 From: ccbikai Date: Tue, 6 Aug 2024 19:54:00 +0800 Subject: [PATCH 10/18] feat: update real users list for enhanced visibility Added new entries to the real users list in both English and Chinese versions of the README to showcase more diverse user examples and increase project visibility. --- README.md | 4 +++- README.zh-cn.md | 7 +++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 397853d..68116d7 100644 --- a/README.md +++ b/README.md @@ -17,17 +17,19 @@ English | [简体中文](./README.zh-cn.md) ### Real users +- [面条实验室](https://memo.miantiao.me/) - [Find Blog👁发现博客](https://broadcastchannel.pages.dev/) - [Memos 广场 🎪](https://now.memobbs.app/) - [APPDO 数字生活指南](https://mini.appdo.xyz/) - [85.60×53.98卡粉订阅/提醒](https://tg.docofcard.com/) +- [新闻在花频道](https://tg.istore.app/) - [Charles Chin's Whisper](https://memo.eallion.com/) - [PlayStation 新闻转发](https://playstationnews.pages.dev) - [Yu's Life](https://daily.pseudoyu.com/) - [Leslie 和朋友们](https://tg.imlg.co/) - [OKHK 分享](https://tg.okhk.net/) -- [新闻在花频道](https://tg.istore.app/) - [gledos 的微型博客](https://microblogging.gledos.science) +- [Steve Studio](https://tgc.surgeee.me/) ### Platform diff --git a/README.zh-cn.md b/README.zh-cn.md index 48894d0..4496d3a 100644 --- a/README.zh-cn.md +++ b/README.zh-cn.md @@ -17,12 +17,19 @@ ### 真实用户 +- [面条实验室](https://memo.miantiao.me/) - [Find Blog👁发现博客](https://broadcastchannel.pages.dev/) - [Memos 广场 🎪](https://now.memobbs.app/) - [APPDO 数字生活指南](https://mini.appdo.xyz/) - [85.60×53.98卡粉订阅/提醒](https://tg.docofcard.com/) +- [新闻在花频道](https://tg.istore.app/) - [Charles Chin's Whisper](https://memo.eallion.com/) - [PlayStation 新闻转发](https://playstationnews.pages.dev) +- [Yu's Life](https://daily.pseudoyu.com/) +- [Leslie 和朋友们](https://tg.imlg.co/) +- [OKHK 分享](https://tg.okhk.net/) +- [gledos 的微型博客](https://microblogging.gledos.science) +- [Steve Studio](https://tgc.surgeee.me/) ### 平台 From 69c7eb2da7dad43e7953039ccb61e329015a1d12 Mon Sep 17 00:00:00 2001 From: ccbikai Date: Tue, 6 Aug 2024 19:58:14 +0800 Subject: [PATCH 11/18] chore(css): adjust gradient color for better contrast Improved contrast in item background gradient to enhance visibility. --- src/assets/item.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/item.css b/src/assets/item.css index 0ef2ee7..5ac68e4 100644 --- a/src/assets/item.css +++ b/src/assets/item.css @@ -145,7 +145,7 @@ color: transparent; background: #ccc 60% 60% / 3000px 3000px; background-image: repeating-conic-gradient( - #ccc 0 0.0001%, + #999 0 0.0001%, #000 0 0.0002% ); } From d184a50e2c6af755bc249b75bbd071228ae147fe Mon Sep 17 00:00:00 2001 From: ccbikai Date: Tue, 6 Aug 2024 20:35:26 +0800 Subject: [PATCH 12/18] feat: improve visual consistency in item background Adjusted the repeating-conic-gradient to enhance visual consistency by using a transparent color stop, addressing a subtle visual artifact. --- src/assets/item.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/item.css b/src/assets/item.css index 5ac68e4..79414a2 100644 --- a/src/assets/item.css +++ b/src/assets/item.css @@ -146,7 +146,7 @@ background: #ccc 60% 60% / 3000px 3000px; background-image: repeating-conic-gradient( #999 0 0.0001%, - #000 0 0.0002% + #0000 0 0.0002% ); } From e18cc8e3a8e9d36495fa3c002a22789690d66378 Mon Sep 17 00:00:00 2001 From: ccbikai Date: Tue, 6 Aug 2024 20:46:47 +0800 Subject: [PATCH 13/18] feat: enhance tg-spoiler styling for better integration Improved tg-spoiler component with additional margin and border-radius for enhanced visual consistency and integration within the layout. --- src/assets/item.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/assets/item.css b/src/assets/item.css index 79414a2..43da170 100644 --- a/src/assets/item.css +++ b/src/assets/item.css @@ -143,6 +143,8 @@ tg-spoiler { color: transparent; + margin: auto 2px; + border-radius: var(--box-border-radius); background: #ccc 60% 60% / 3000px 3000px; background-image: repeating-conic-gradient( #999 0 0.0001%, From 877279ac0395df711ff7b217344d2cb5b29a9c7f Mon Sep 17 00:00:00 2001 From: ccbikai Date: Tue, 6 Aug 2024 20:49:24 +0800 Subject: [PATCH 14/18] feat: add meta charset in head for SEO improvement --- src/layouts/base.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layouts/base.astro b/src/layouts/base.astro index a6959b1..a377e81 100644 --- a/src/layouts/base.astro +++ b/src/layouts/base.astro @@ -47,6 +47,7 @@ const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT') + Date: Tue, 6 Aug 2024 14:19:00 +0000 Subject: [PATCH 15/18] chore(typo): "Macth" to "Match" in `lib/telegram/index.js` --- src/lib/telegram/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/telegram/index.js b/src/lib/telegram/index.js index 53ca3e9..dddc5d7 100644 --- a/src/lib/telegram/index.js +++ b/src/lib/telegram/index.js @@ -139,7 +139,7 @@ export async function getChannelInfo(Astro, { before = '', after = '', q = '', t const cachedResult = cache.get(cacheKey) if (cachedResult) { - console.info('Macth Cache', { before, after, q, type, id }) + console.info('Match Cache', { before, after, q, type, id }) return JSON.parse(JSON.stringify(cachedResult)) } From cffd76262e4600eead3c1996dbfb1168015d60f3 Mon Sep 17 00:00:00 2001 From: Charles Chin Date: Tue, 6 Aug 2024 22:19:32 +0800 Subject: [PATCH 16/18] feat: add new real user resource Added a new link to a blog discovery platform under the Real users section in both English and Chinese README files, enhancing resource visibility and accessibility for users. * https://hourly.top/ --- README.md | 1 + README.zh-cn.md | 1 + 2 files changed, 2 insertions(+) diff --git a/README.md b/README.md index f69bc42..6587ec6 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,7 @@ English | [简体中文](./README.zh-cn.md) - [gledos 的微型博客](https://microblogging.gledos.science) - [Steve Studio](https://tgc.surgeee.me/) - [LiFePO4:沙雕吐槽](https://lifepo4.top) +- [Hotspot Hourly](https://hourly.top/) ### Platform diff --git a/README.zh-cn.md b/README.zh-cn.md index 7043967..510916e 100644 --- a/README.zh-cn.md +++ b/README.zh-cn.md @@ -31,6 +31,7 @@ - [gledos 的微型博客](https://microblogging.gledos.science) - [Steve Studio](https://tgc.surgeee.me/) - [LiFePO4:沙雕吐槽](https://lifepo4.top) +- [Hotspot Hourly](https://hourly.top/) ### 平台 From 4fa62bf68d6530dc3c3e7ca2a6f330ba9eb894e0 Mon Sep 17 00:00:00 2001 From: ccbikai Date: Wed, 7 Aug 2024 21:00:55 +0800 Subject: [PATCH 17/18] feat: add sanitize-html for content filtering Enhance RSS feed content safety by integrating sanitize-html to allow specific media tags and attributes, ensuring a secure and controlled presentation of content. --- package.json | 3 ++- pnpm-lock.yaml | 36 ++++++++++++++++++++++++++++++++++-- src/pages/rss.xml.js | 11 +++++++++-- 3 files changed, 45 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 72b70c8..7dd14a2 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,8 @@ "cheerio": "1.0.0-rc.12", "dayjs": "^1.11.12", "lru-cache": "^11.0.0", - "ofetch": "^1.3.4" + "ofetch": "^1.3.4", + "sanitize-html": "^2.13.0" }, "devDependencies": { "@antfu/eslint-config": "^2.24.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e577ddd..fff0b33 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,6 +32,9 @@ importers: ofetch: specifier: ^1.3.4 version: 1.3.4 + sanitize-html: + specifier: ^2.13.0 + version: 2.13.0 devDependencies: '@antfu/eslint-config': specifier: ^2.24.1 @@ -2261,6 +2264,10 @@ packages: deep-is@0.1.4: resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==} + deepmerge@4.3.1: + resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==} + engines: {node: '>=0.10.0'} + defu@6.1.4: resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==} @@ -2407,11 +2414,11 @@ packages: engines: {node: '>=0.8.0'} escape-string-regexp@4.0.0: - resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==} + resolution: {integrity: sha1-FLqDpdNz49MR5a/KKc9b+tllvzQ=} engines: {node: '>=10'} escape-string-regexp@5.0.0: - resolution: {integrity: sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==} + resolution: {integrity: sha1-RoMSa1ALYXYvLb66zhgG6L4xscg=} engines: {node: '>=12'} eslint-compat-utils@0.5.1: @@ -3020,6 +3027,10 @@ packages: resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==} engines: {node: '>=12'} + is-plain-object@5.0.0: + resolution: {integrity: sha1-RCf1CrNCnpAl6n1S6QQ6nvQVk0Q=} + engines: {node: '>=0.10.0'} + is-stream@3.0.0: resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} @@ -3592,6 +3603,9 @@ packages: parse-latin@7.0.0: resolution: {integrity: sha512-mhHgobPPua5kZ98EF4HWiH167JWBfl4pvAIXXdbaVohtK7a6YBOy56kvhCqduqyo/f3yrHFWmqmiMg/BkBkYYQ==} + parse-srcset@1.0.2: + resolution: {integrity: sha1-8r0iH2zJcKk42IVWq8WJyqqiveE=} + parse5-htmlparser2-tree-adapter@7.0.0: resolution: {integrity: sha512-B77tOZrqqfUfnVcOrUvfdLbz4pu4RopLD/4vmu3HUPswwTA8OH0EMW9BlWR2B0RCoiZRAHEUu7IxeP1Pd1UU+g==} @@ -4069,6 +4083,9 @@ packages: safe-buffer@5.2.1: resolution: {integrity: sha1-Hq+fqb2x/dTsdfWPnNtOa3gn7sY=} + sanitize-html@2.13.0: + resolution: {integrity: sha512-Xff91Z+4Mz5QiNSLdLWwjgBDm5b1RU6xBT0+12rapjiaR7SwfRdjw8f+6Rir2MXKLrDicRFHdb51hGOAxmsUIA==} + sass-formatter@0.7.9: resolution: {integrity: sha512-CWZ8XiSim+fJVG0cFLStwDvft1VI7uvXdCNJYXhDvowiv+DsbD1nXLiQ4zrE5UBvj5DWZJ93cwN0NX5PMsr1Pw==} @@ -7019,6 +7036,8 @@ snapshots: deep-is@0.1.4: {} + deepmerge@4.3.1: {} + defu@6.1.4: {} delegates@1.0.0: {} @@ -7978,6 +7997,8 @@ snapshots: is-plain-obj@4.1.0: {} + is-plain-object@5.0.0: {} + is-stream@3.0.0: {} is-unicode-supported@1.3.0: {} @@ -8740,6 +8761,8 @@ snapshots: unist-util-visit-children: 3.0.0 vfile: 6.0.2 + parse-srcset@1.0.2: {} + parse5-htmlparser2-tree-adapter@7.0.0: dependencies: domhandler: 5.0.3 @@ -9243,6 +9266,15 @@ snapshots: safe-buffer@5.2.1: {} + sanitize-html@2.13.0: + dependencies: + deepmerge: 4.3.1 + escape-string-regexp: 4.0.0 + htmlparser2: 8.0.2 + is-plain-object: 5.0.0 + parse-srcset: 1.0.2 + postcss: 8.4.40 + sass-formatter@0.7.9: dependencies: suf-log: 2.5.3 diff --git a/src/pages/rss.xml.js b/src/pages/rss.xml.js index 9adc848..99b3826 100644 --- a/src/pages/rss.xml.js +++ b/src/pages/rss.xml.js @@ -1,5 +1,5 @@ import rss from '@astrojs/rss' - +import sanitizeHtml from 'sanitize-html' import { getChannelInfo } from '../lib/telegram' export const prerender = false @@ -22,7 +22,14 @@ export async function GET(Astro) { title: item.title, description: item.description, pubDate: new Date(item.datetime), - content: item.content, + content: sanitizeHtml(item.content, { + allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img', 'video', 'audio']), + allowedAttributes: { + video: ['src', 'width', 'height', 'poster'], + audio: ['src', 'controls'], + img: ['src', 'width', 'height', 'loading'], + }, + }), })), }) } From 8db461e881a50ad1836b8cf1cd6781b5f9435d32 Mon Sep 17 00:00:00 2001 From: ccbikai Date: Wed, 7 Aug 2024 21:46:08 +0800 Subject: [PATCH 18/18] feat: add audio handling in posts Enhances post rendering by integrating audio element processing, ensuring audio files are correctly proxied and controls are enabled for user interaction. This improvement expands multimedia support within posts, enhancing user experience and engagement. --- src/lib/telegram/index.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/lib/telegram/index.js b/src/lib/telegram/index.js index 53ca3e9..bfe3de8 100644 --- a/src/lib/telegram/index.js +++ b/src/lib/telegram/index.js @@ -62,6 +62,13 @@ function getVideo($, item, { staticProxy, index }) { return $.html(video) + $.html(roundVideo) } +function getAudio($, item, { staticProxy }) { + const audio = $(item).find('.tgme_widget_message_voice') + audio?.attr('src', staticProxy + audio?.attr('src')) + ?.attr('controls', true) + return $.html(audio) +} + 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() @@ -111,13 +118,13 @@ function getPost($, item, { channel, staticProxy, index = 0 }) { $.html($(item).find('.tgme_widget_message_reply')?.wrapInner('')?.wrapInner('
')), getImages($, item, { staticProxy, id, index, title }), getVideo($, item, { staticProxy, id, index, title }), + getAudio($, item, { staticProxy, id, index, title }), content?.html(), getImageStickers($, item, { staticProxy, index }), getVideoStickers($, item, { staticProxy, index }), // $(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_voice')?.attr('controls', true)), $.html($(item).find('.tgme_widget_message_location_wrap')), getLinkPreview($, item, { staticProxy, index }), ].filter(Boolean).join('').replace(/(url\(["'])((https?:)?\/\/)/g, (match, p1, p2, _p3) => {