beggin/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新版ui

Browse Source
This commit is contained in:
21 Guns
2026-07-08 18:11:58 +08:00
parent 4fe81f1e48
commit bbacb11bce
7 changed files with 149 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
astro.config.mjs
View File

@@ -1,5 +1,5 @@
// @ts-check // @ts-check
import { defineConfig } from 'astro/config'; import {defineConfig} from 'astro/config';
import solidJs from '@astrojs/solid-js'; import solidJs from '@astrojs/solid-js';
import node from '@astrojs/node'; import node from '@astrojs/node';
@@ -7,6 +7,9 @@ import node from '@astrojs/node';
export default defineConfig({ export default defineConfig({
site: 'https://ua42.com', site: 'https://ua42.com',
output: 'server', output: 'server',
server: {
host: "0.0.0.0",
},
integrations: [solidJs()], integrations: [solidJs()],
adapter: node({ adapter: node({
mode: 'standalone' mode: 'standalone'

2
src/components/BaseFooter.astro
View File

@@ -4,7 +4,7 @@
height: 70px; height: 70px;
overflow: hidden; overflow: hidden;
flex-shrink: 0; flex-shrink: 0;
box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 2px;
} }
.content { .content {

25
src/components/BaseHeader.astro
View File

@@ -8,7 +8,7 @@ import { metadata } from "../consts";
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 99999; z-index: 99999;
box-shadow: rgba(17, 17, 26, 0.1) 0 1px 0; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
flex-shrink: 0; flex-shrink: 0;
background: #fff; background: #fff;
} }
@@ -23,6 +23,12 @@ import { metadata } from "../consts";
justify-content: space-between; justify-content: space-between;
} }
@media (max-width: 768px) {
.main-nav{
padding: 16px;
}
}
.main-nav h1 { .main-nav h1 {
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
@@ -37,11 +43,16 @@ import { metadata } from "../consts";
align-items: center; align-items: center;
} }
.menu-item{
text-align: center;
}
.main-nav .menu-item a { .main-nav .menu-item a {
text-decoration: none; text-decoration: none;
} }
.main-nav .menu-item a:hover { .main-nav .menu-item a:hover {
color: #64748b;
} }
</style> </style>
@@ -50,11 +61,11 @@ import { metadata } from "../consts";
<h1> <h1>
<a href="/">{metadata.siteTitle}</a> <a href="/">{metadata.siteTitle}</a>
</h1> </h1>
<!--<ul class="menu">--> <ul class="menu">
<!-- <li class="menu-item"><a href="/">首页</a></li>--> <li class="menu-item"><a href="/">首页</a></li>
<!-- <li class="menu-item"><a href="/">文章</a></li>--> <!--<li class="menu-item"><a href="/">文章</a></li>-->
<!-- <li class="menu-item"><a href="/">分类</a></li>--> <li class="menu-item"><a href="/">分类</a></li>
<!-- <li class="menu-item"><a href="/">关于</a></li>--> <!--<li class="menu-item"><a href="/">关于</a></li>-->
<!--</ul>--> </ul>
</nav> </nav>
</header> </header>

85
src/pages/index.astro
View File

@@ -14,24 +14,27 @@ interface Post {
} }
const {list} = await http.get<ApiPageResponse<Post>>("post"); const {list} = await http.get<ApiPageResponse<Post>>("post");
list.map((post) => {
post.published_at = formatDatetime(post.published_at, 'YYYY 年 M 月 D 日')
})
--- ---
<Layout> <Layout>
<div class="posts"> <div class="posts">
{ {
list.map((post) => ( list.map((post) => (
<a <a class="post" href={`/posts/${post.slug}`}>
class="post" <div class="published-at">{post.published_at}</div>
href={`/posts/${post.slug}`} <div class="category-name">{post.category_name}</div>
> <div class="post-title">{post.title}</div>
<div class="cover"> <div class="link">
<img src={post.cover} alt={post.title}/> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
</div> stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
<div class="post-content"> class="lucide lucide-arrow-up-right-icon lucide-arrow-up-right">
<h2>{post.title}</h2> <path d="M7 7h10v10"/>
<p class="summary">summary:{post.summary}</p> <path d="M7 17 17 7"/>
<p class="summary">category_name:{post.category_name}</p> </svg>
<div>{formatDatetime(post.published_at, 'YYYY 年 MM 月 DD 日')}</div>
</div> </div>
</a> </a>
)) ))
@@ -50,31 +53,59 @@ const {list} = await http.get<ApiPageResponse<Post>>("post");
background: #fff; background: #fff;
padding: 16px; padding: 16px;
border-radius: 12px; border-radius: 12px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 2px 14px -4px; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
display: flex; display: flex;
gap: 20px; align-items: center;
transition: transform 0.2s linear;
} }
.post-content { .post:hover {
box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}
.published-at {
white-space: nowrap;
font-size: 14px;
color: #4b5563;
min-width: 130px;
margin-right: 20px;
}
.category-name {
border-radius: 999px;
background: #fceeda;
padding: 4px 12px;
font-size: 14px;
margin-right: 24px;
}
.post-title {
flex: 1; flex: 1;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
.summary { .link {
font-size: 16px;
color: rgb(66, 63, 63);
} }
.cover { .link svg {
width: 250px; width: 16px;
height: 150px; height: 16px;
border-radius: 8px; color: #6b7280;
overflow: hidden;
} }
.cover img { @media (max-width: 640px) {
width: 100%; .posts {
height: 100%; gap: 12px;
object-fit: cover; }
.published-at {
margin-right: 8px;
}
.category-name {
display: none;
}
} }
</style> </style>

105
src/pages/posts/[...slug].astro
View File

@@ -10,73 +10,80 @@ import {formatDatetime} from "@/lib/format.ts";
const {slug} = Astro.params; const {slug} = Astro.params;
interface Post { interface Post {
title: string; title: string;
summary: string; summary: string;
slug: string; slug: string;
cover: string; cover: string;
published_at: string; published_at: string;
content: string; content: string;
} }
const {data} = await http.get<ApiResponse<Post>>(`post/${slug}`); const {data} = await http.get<ApiResponse<Post>>(`post/${slug}`);
const content = await highlightHtmlWithJsdom(data.content) const content = await highlightHtmlWithJsdom(data.content)
data.published_at = formatDatetime(data.published_at, 'YYYY 年 M 月 D 日')
--- ---
<Layout> <Layout>
<h1 class="post-title">{data.title}</h1> <h1 class="post-title">{data.title}</h1>
<div class="published-at"> <div class="published-at">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" <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" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-calendar-days-icon lucide-calendar-days"> class="lucide lucide-calendar-days-icon lucide-calendar-days">
<path d="M8 2v4"/> <path d="M8 2v4"/>
<path d="M16 2v4"/> <path d="M16 2v4"/>
<rect width="18" height="18" x="3" y="4" rx="2"/> <rect width="18" height="18" x="3" y="4" rx="2"/>
<path d="M3 10h18"/> <path d="M3 10h18"/>
<path d="M8 14h.01"/> <path d="M8 14h.01"/>
<path d="M12 14h.01"/> <path d="M12 14h.01"/>
<path d="M16 14h.01"/> <path d="M16 14h.01"/>
<path d="M8 18h.01"/> <path d="M8 18h.01"/>
<path d="M12 18h.01"/> <path d="M12 18h.01"/>
<path d="M16 18h.01"/> <path d="M16 18h.01"/>
</svg> </svg>
{formatDatetime(data.published_at,'YYYY 年 MM 月 DD 日')} {data.published_at}
</div> </div>
<div class="post markdown-body" set:html={content}></div> <div class="post markdown-body" set:html={content}></div>
</Layout> </Layout>
<style> <style>
.post-title{ .post-title {
margin-bottom: 16px; margin-bottom: 16px;
} font-size: 24px;
}
@media (max-width: 768px) { .published-at {
.post-title { display: flex;
font-size: 24px; align-items: center;
} gap: 8px;
} color: #6b7280;
font-size: 14px;
margin-bottom: 20px;
}
.published-at{ .published-at svg {
display: flex; width: 18px;
align-items: center; height: 18px;
gap: 8px; }
color: #6b7280;
font-size: 16px;
margin-bottom: 24px;
}
.published-at svg{ .post {
width: 18px; background: #fff;
height: 18px; border-radius: 16px;
overflow: auto;
padding: 24px;
box-shadow: rgba(149, 157, 165, 0.2) 0 2px 14px -4px;
}
@media (max-width: 768px) {
.post-title {
font-size: 20px;
} }
.post { .post {
background: #fff; padding: 12px;
border-radius: 16px;
overflow: auto;
padding: 24px;
box-shadow: rgba(149, 157, 165, 0.2) 0 2px 14px -4px;
} }
}
</style> </style>

5
src/styles/github-markdown.css
View File

@@ -16,3 +16,8 @@ h1{
border-bottom: none ; border-bottom: none ;
} }
@media (max-width: 768px) {
.markdown-body pre code{
font-size: inherit;
}
}

8
src/styles/global.css
View File

@@ -24,4 +24,10 @@ main {
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
padding: 32px; padding: 32px;
} }
@media (max-width: 768px) {
main{
padding: 16px;
}
}