d0zingcat/BroadcastChannel
1
0
Fork 0
mirror of https://github.com/d0zingcat/BroadcastChannel.git synced 2026-06-07 15:10:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add tags functionality and UI enhancements

Browse Source
This commit is contained in:
ccbikai
2024-11-04 19:55:58 +08:00
parent d6b3a352c7
commit affd4d2a9b
7 changed files with 80 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.env.example
View File

@@ -20,3 +20,4 @@ NO_INDEX=false
TELEGRAM_HOST=telegram.dog TELEGRAM_HOST=telegram.dog
STATIC_PROXY="" STATIC_PROXY=""
GOOGLE_SEARCH_SITE="" GOOGLE_SEARCH_SITE=""
TAGS=""

3
README.md
View File

@@ -120,6 +120,9 @@ STATIC_PROXY=
## Enable Google Site Search ## Enable Google Site Search
GOOGLE_SEARCH_SITE=memo.miantiao.me GOOGLE_SEARCH_SITE=memo.miantiao.me
## Enable tags page, separate tags with commas
TAGS=tag1,tag2,tag3
``` ```
## 🙋🏻 FAQs ## 🙋🏻 FAQs

3
README.zh-cn.md
View File

@@ -118,6 +118,9 @@ STATIC_PROXY=
## 启用谷歌站内搜索 ## 启用谷歌站内搜索
GOOGLE_SEARCH_SITE=memo.miantiao.me GOOGLE_SEARCH_SITE=memo.miantiao.me
## 启用标签页, 标签使用英文逗号分割
TAGS=标签A,标签B,标签C
``` ```
## 🙋🏻 常问问题 ## 🙋🏻 常问问题

28
src/assets/global.css
View File

@@ -15,6 +15,16 @@ html {
transition: 0.2s ease; transition: 0.2s ease;
} }
#aside-container {
position: sticky;
top: 0;
}
#aside-container .nav {
position: static;
top: unset;
}
.search-icon { .search-icon {
position: absolute; position: absolute;
top: 20px; top: 20px;
@@ -45,15 +55,16 @@ html {
.search-form { .search-form {
display: none; display: none;
background: rgba(255, 255, 255, 0.75); background: var(--code-background-color);
color: var(--secondary-color);
padding: 8px; padding: 8px;
position: sticky;
top: 60px;
border-radius: var(--box-border-radius); border-radius: var(--box-border-radius);
> input { > input {
border: 1px solid var(--background-color); border: 1px solid var(--background-color);
border-radius: var(--box-border-radius); border-radius: var(--box-border-radius);
background: var(--code-background-color);
color: var(--secondary-color);
outline: none; outline: none;
font-size: 12px; font-size: 12px;
line-height: 2.4; line-height: 2.4;
@@ -64,15 +75,20 @@ html {
} }
.copyright-wrap { .copyright-wrap {
position: sticky;
top: 120px;
color: #666; color: #666;
line-height: 1.5; line-height: 1.5;
font-size: 14px; font-size: 14px;
display: none; display: none;
padding: 8px;
} }
@media screen and (min-width: 600px) { @media screen and (min-width: 600px) {
#aside-container {
height: 100vh;
height: 100svh;
overflow-y: auto;
}
.search-form { .search-form {
display: block; display: block;
} }
@@ -91,7 +107,7 @@ html {
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
right: 20px; right: 20px;
background-color: #fff; background: var(--code-background-color);
color: var(--secondary-color); color: var(--secondary-color);
width: 32px; width: 32px;
height: 32px; height: 32px;

1
src/components/item.astro
View File

@@ -1,5 +1,4 @@
--- ---
import '../assets/item.css'
import 'prismjs/themes/prism.css' import 'prismjs/themes/prism.css'
import dayjs from '../lib/dayjs' import dayjs from '../lib/dayjs'
import { getEnv } from '../lib/env' import { getEnv } from '../lib/env'

21
src/layouts/base.astro
View File

@@ -2,6 +2,7 @@
import '../assets/normalize.css' import '../assets/normalize.css'
import '../assets/style.css' import '../assets/style.css'
import '../assets/global.css' import '../assets/global.css'
import '../assets/item.css'
import { SEO } from 'astro-seo' import { SEO } from 'astro-seo'
import { getEnv } from '../lib/env' import { getEnv } from '../lib/env'
import backToTopIcon from '../assets/back-to-top.svg' import backToTopIcon from '../assets/back-to-top.svg'
@@ -15,7 +16,7 @@ const seo = channel?.seo
const canonical = SITE_URL.startsWith('http') const canonical = SITE_URL.startsWith('http')
? new URL(SITE_URL).origin + Astro.url.pathname ? new URL(SITE_URL).origin + Astro.url.pathname
: Astro.url.origin + Astro.url.pathname : Astro.url.origin + Astro.url.pathname
const origin = new URL(canonical).origin const { origin, pathname } = new URL(canonical)
const twitter = getEnv(import.meta.env, Astro, 'TWITTER') const twitter = getEnv(import.meta.env, Astro, 'TWITTER')
const seoParams = { const seoParams = {
@@ -46,6 +47,7 @@ const searchAction = GOOGLE_SEARCH_SITE ? 'https://www.google.com/search' : '/se
const HEADER_INJECT = getEnv(import.meta.env, Astro, 'HEADER_INJECT') const HEADER_INJECT = getEnv(import.meta.env, Astro, 'HEADER_INJECT')
const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT') const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT')
const TAGS = getEnv(import.meta.env, Astro, 'TAGS')
--- ---
<!doctype html> <!doctype html>
@@ -82,8 +84,23 @@ const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT')
<slot name="aside"> <slot name="aside">
<div class="nav"> <div class="nav">
<div class="nav-item"> <div class="nav-item">
<a href={SITE_URL} title={channel?.title} class={`nav-link current`}>Home</a> <a href={SITE_URL} title={channel?.title} class={`nav-link ${pathname === '/' ? 'current' : ''}`}>
Home
</a>
</div> </div>
{
TAGS ? (
<div class="nav-item">
<a
href={`${SITE_URL}tags`}
title="Tags"
class={`nav-link ${pathname === '/tags' ? 'current' : ''}`}
>
Tags
</a>
</div>
) : null
}
</div> </div>
<input class="search-icon" name="icon" type="checkbox" placeholder="Search" /> <input class="search-icon" name="icon" type="checkbox" placeholder="Search" />
<form class="search-form" action={searchAction} method="get"> <form class="search-form" action={searchAction} method="get">

32
src/pages/tags.astro Normal file
View File

@@ -0,0 +1,32 @@
---
import Layout from '../layouts/base.astro'
import Header from '../components/header.astro'
import { getChannelInfo } from '../lib/telegram'
import { getEnv } from '../lib/env'
export const prerender = false
const channel = await getChannelInfo(Astro)
const tags = (getEnv(import.meta.env, Astro, 'TAGS') || '').split(',')
---
<Layout channel={channel} id="main-container">
<slot name="header">
<Header channel={channel} />
</slot>
<div class="section-title">Tags</div>
<div class="tag-cloud">
{
tags.map((tag: string) => (
<div class="tag-cloud-item">
<a href={`/search/%23${tag}`} class="tag">
{tag}
</a>
{/* <span class="tag-cloud-item-count">0</span> */}
</div>
))
}
</div>
</Layout>