Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add frontend #16

Merged
merged 17 commits into from
Aug 8, 2024
Merged

Add frontend #16

merged 17 commits into from
Aug 8, 2024

Conversation

shaokeyibb
Copy link
Member

Add frontend project, use yarn dev for test (Vite will proxy local cloudflare-worker server to /api path).

Usage:
Import review.js as ES Module, then call setupReview with options.

Other changes:

  • Update wrangler to latest
  • Cloudflare workers now accpet cross origin request from oi-wiki.org

@Enter-tainer
Copy link
Member

抱歉最近比较忙没有review,我今天看一下

@shaokeyibb shaokeyibb force-pushed the hikarilan branch 2 times, most recently from f0d8049 to 5c39aa3 Compare August 5, 2024 07:00
@Enter-tainer
Copy link
Member

本地玩了一下新版 感觉挺好的。看到一些小问题:

  1. XSS 攻击。建议把 html sanitize 一遍
  2. 图标包体积比较大,如果我们用的图标不是特别多的话,可以考虑直接inline。比如这种 https://www.npmjs.com/package/@material-icons/svg?activeTab=readme 。可以直接 import 一个 svg 进来。如果不含图标。现在的包大小是这样的,感觉还挺不错的:
dist/review.js  11.22 kB │ gzip: 3.29 kB

@shaokeyibb shaokeyibb force-pushed the hikarilan branch 4 times, most recently from 699d128 to deaedbe Compare August 6, 2024 08:53
@Enter-tainer
Copy link
Member

image

一个小问题,我发现有时候点这个按钮会没有用。排查了一下发现是这个按钮的点击区太小了,只有图标是可以点的。这里还有个hover弹出的动画,就会容易点不到。maybe可以考虑优化一下

Copy link
Member

@Enter-tainer Enter-tainer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

其他地方LGTM

@shaokeyibb
Copy link
Member Author

image

一个小问题,我发现有时候点这个按钮会没有用。排查了一下发现是这个按钮的点击区太小了,只有图标是可以点的。这里还有个hover弹出的动画,就会容易点不到。maybe可以考虑优化一下

不太好改,因为这里是一个通用的组件,只有按钮那块能响应事件... 其实我也注意到这个问题了,所以我专门把这个 hover 动画的幅度改小了些。个人感觉问题不大,实在不行就把 hover 给删了,我是觉得好看才加的(

@Enter-tainer
Copy link
Member

我们先把hover动画删了吧~

frontend/lib/main.ts Show resolved Hide resolved
frontend/lib/main.ts Outdated Show resolved Hide resolved
@shaokeyibb
Copy link
Member Author

找了一圈没找到比较合适的包,索性直接手动 inline 了,这是前后的包体积对比:
iconify-icon:
image
inline icon:
image

@CoelacanthusHex
Copy link
Member

CoelacanthusHex commented Aug 8, 2024

是否可以考虑 U+1F5E8 或者 U+1F4AC?

@shaokeyibb
Copy link
Member Author

是否可以考虑 U+1F5E8?

那这个得考虑到不同设备(字体)的展示效果问题了,个人不建议

@Enter-tainer
Copy link
Member

14k变4k了,挺好的 👍

import { GetCommentBody, GetCommentRespBody, PostCommentBody, PutCommitHashBody, ResponseBody } from './types';
import { getComment, postComment } from './db';
import { validateSecret, setCommitHash, compareCommitHash } from './administration';
import { matchCommentCache, purgeAllCommentCache, purgeCommentCache, putCommentCache } from './cache';

const router = AutoRouter();
const { preflight, corsify } = cors({
origin: 'https://oi-wiki.org',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

突然想到一个问题,我们还有一堆镜像站.. https://oi.wiki/intro/mirrors/ 要不把这个list里面的都加上

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

omg,那感觉应该是要加的吧

@Enter-tainer Enter-tainer merged commit 3a7df7e into master Aug 8, 2024
4 checks passed
@shaokeyibb shaokeyibb deleted the hikarilan branch August 9, 2024 07:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants