clone/afilmory
1
0
Fork 0
mirror of https://github.com/Afilmory/afilmory synced 2026-02-01 22:48:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add avatar support and update dependencies

Browse Source 
- Added avatar configuration to the author section in config.example.json and README.md.
- Integrated @radix-ui/react-avatar package for avatar rendering in the MasonryHeaderMasonryItem component.
- Updated pnpm-lock.yaml and package.json to include @radix-ui/react-avatar dependency.
- Removed loading text from index.html for a cleaner UI.
- Adjusted photo-loader.ts to use the workdir for manifest path.

Signed-off-by: Innei <tukon479@gmail.com>
This commit is contained in:
Innei
2025-06-11 01:11:56 +08:00
parent 491e8ddb6e
commit ccfb313038
7 changed files with 81 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@@ -130,13 +130,14 @@ cp config.example.json config.json
"title": "我的照片画廊",
"description": "记录生活中的美好瞬间",
"url": "https://gallery.example.com",
"accentColor": "#007bff",
"accentColor": "#007bff", // 可选, 设置主题色
"author": {
"name": "Your Name",
"url": "https://example.com"
"name": "Your Name", // 必填, 设置作者名称
"url": "https://example.com", // 可选, 设置作者主页
"avatar": "https://example.com/avatar.png" // 可选, 设置作者头像
},
"social": {
"twitter": "@yourusername"
"twitter": "@yourusername" // 可选, 设置社交账号
}
}
```

14
apps/web/index.html
View File

@@ -260,20 +260,6 @@
"
></div>
</div>
<!-- 加载文字 -->
<p
style="
color: #666;
font-size: 0.8rem;
margin: 0;
font-weight: 500;
letter-spacing: 0.05em;
animation: loadingText 2s ease-in-out infinite;
"
>
LOADING
</p>
</div>
</div>

1
apps/web/package.json
View File

@@ -21,6 +21,7 @@
"@headlessui/react": "2.2.4",
"@photo-gallery/data": "workspace:*",
"@photo-gallery/webgl-viewer": "workspace:*",
"@radix-ui/react-avatar": "1.1.10",
"@radix-ui/react-context-menu": "2.2.15",
"@radix-ui/react-dropdown-menu": "2.1.15",
"@radix-ui/react-popover": "1.1.14",

27
apps/web/src/modules/gallery/MasonryHeaderMasonryItem.tsx
View File

@@ -1,5 +1,6 @@
import { siteConfig } from '@config'
import { photoLoader } from '@photo-gallery/data'
import * as AvatarPrimitive from '@radix-ui/react-avatar'
import { clsxm } from '~/lib/cn'
@@ -25,8 +26,30 @@ export const MasonryHeaderMasonryItem = ({
>
{/* Header section with clean typography */}
<div className="px-6 pt-8 pb-6 text-center">
<div className="from-accent to-accent/80 mb-4 inline-flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br shadow-lg">
<i className="i-mingcute-camera-2-line text-2xl text-white" />
<div className="flex items-center justify-center">
<div className="relative">
{siteConfig.author.avatar && (
<AvatarPrimitive.Root>
<AvatarPrimitive.Image
src={siteConfig.author.avatar}
className="size-16 rounded-full"
/>
<AvatarPrimitive.Fallback>
<div />
</AvatarPrimitive.Fallback>
</AvatarPrimitive.Root>
)}
<div
className={clsxm(
'from-accent to-accent/80 inline-flex items-center justify-center rounded-2xl bg-gradient-to-br shadow-lg',
siteConfig.author.avatar
? 'size-8 rounded absolute bottom-0 -right-3'
: 'size-16 mb-4',
)}
>
<i className="i-mingcute-camera-2-line text-2xl text-white" />
</div>
</div>
</div>
<h2 className="mb-1 text-2xl font-semibold text-gray-900 dark:text-white">

3
config.example.json
View File

@@ -6,7 +6,8 @@
"accentColor": "#007bff",
"author": {
"name": "Photo Gallery",
"url": "https://innei.in/"
"url": "https://innei.in/",
"avatar": "//cdn.jsdelivr.net/gh/Innei/static@master/avatar.png"
},
"social": {
"twitter": "@__oQuery"

45
pnpm-lock.yaml generated
View File

@@ -121,6 +121,9 @@ importers:
'@photo-gallery/webgl-viewer':
specifier: workspace:*
version: link:../../packages/webgl-viewer
'@radix-ui/react-avatar':
specifier: 1.1.10
version: 1.1.10(@types/react-dom@19.1.6(@types/react@19.1.7))(@types/react@19.1.7)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
'@radix-ui/react-context-menu':
specifier: 2.2.15
version: 2.2.15(@types/react-dom@19.1.6(@types/react@19.1.7))(@types/react@19.1.7)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -1600,6 +1603,19 @@ packages:
'@types/react-dom':
optional: true
'@radix-ui/react-avatar@1.1.10':
resolution: {integrity: sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==}
peerDependencies:
'@types/react': '*'
'@types/react-dom': '*'
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
'@types/react-dom':
optional: true
'@radix-ui/react-collection@1.1.7':
resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
peerDependencies:
@@ -1872,6 +1888,15 @@ packages:
'@types/react':
optional: true
'@radix-ui/react-use-is-hydrated@0.1.0':
resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==}
peerDependencies:
'@types/react': '*'
react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
peerDependenciesMeta:
'@types/react':
optional: true
'@radix-ui/react-use-layout-effect@1.1.1':
resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
peerDependencies:
@@ -8115,6 +8140,19 @@ snapshots:
'@types/react': 19.1.7
'@types/react-dom': 19.1.6(@types/react@19.1.7)
'@radix-ui/react-avatar@1.1.10(@types/react-dom@19.1.6(@types/react@19.1.7))(@types/react@19.1.7)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
dependencies:
'@radix-ui/react-context': 1.1.2(@types/react@19.1.7)(react@19.1.0)
'@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.6(@types/react@19.1.7))(@types/react@19.1.7)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
'@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.7)(react@19.1.0)
'@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.1.7)(react@19.1.0)
'@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.7)(react@19.1.0)
react: 19.1.0
react-dom: 19.1.0(react@19.1.0)
optionalDependencies:
'@types/react': 19.1.7
'@types/react-dom': 19.1.6(@types/react@19.1.7)
'@radix-ui/react-collection@1.1.7(@types/react-dom@19.1.6(@types/react@19.1.7))(@types/react@19.1.7)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
dependencies:
'@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.7)(react@19.1.0)
@@ -8396,6 +8434,13 @@ snapshots:
optionalDependencies:
'@types/react': 19.1.7
'@radix-ui/react-use-is-hydrated@0.1.0(@types/react@19.1.7)(react@19.1.0)':
dependencies:
react: 19.1.0
use-sync-external-store: 1.5.0(react@19.1.0)
optionalDependencies:
'@types/react': 19.1.7
'@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.7)(react@19.1.0)':
dependencies:
react: 19.1.0

4
scripts/photo-loader.ts
View File

@@ -1,6 +1,8 @@
import { readFileSync } from 'node:fs'
import { join } from 'node:path'
import { workdir } from '../packages/builder/src/path.js'
interface PhotoManifest {
id: string
title: string
@@ -26,7 +28,7 @@ class BuildTimePhotoLoader {
constructor() {
try {
const manifestPath = join(process.cwd(), 'src/data/photos-manifest.json')
const manifestPath = join(workdir, 'src/data/photos-manifest.json')
const manifestContent = readFileSync(manifestPath, 'utf-8')
this.photos = JSON.parse(manifestContent) as PhotoManifest[]