)
diff --git a/src/app/content/views/Header/index.tsx b/src/app/content/views/Header/index.tsx
index 1c39af8..2a70687 100644
--- a/src/app/content/views/Header/index.tsx
+++ b/src/app/content/views/Header/index.tsx
@@ -11,9 +11,6 @@ const Header: FC = () => {
const siteInfo = getSiteInfo()
const roomDomain = useRemeshDomain(RoomDomain())
const peerList = useRemeshQuery(roomDomain.query.PeerListQuery())
- // const peerList = ['1', '2', '3']
- console.log('peerList', peerList)
- console.log(111)
return (
diff --git a/src/app/content/views/Main/index.tsx b/src/app/content/views/Main/index.tsx
index f4ff9c2..62e9c44 100644
--- a/src/app/content/views/Main/index.tsx
+++ b/src/app/content/views/Main/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, type FC, useRef } from 'react'
+import { type FC } from 'react'
import { useRemeshDomain, useRemeshQuery, useRemeshSend } from 'remesh-react'
import MessageList from '../../components/MessageList'
diff --git a/src/app/content/views/Setup/index.tsx b/src/app/content/views/Setup/index.tsx
new file mode 100644
index 0000000..6d5efe6
--- /dev/null
+++ b/src/app/content/views/Setup/index.tsx
@@ -0,0 +1,108 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/Avatar'
+import { Button } from '@/components/ui/Button'
+import { MAX_AVATAR_SIZE } from '@/constants/config'
+import MessageListDomain, { Message } from '@/domain/MessageList'
+import UserInfoDomain, { UserInfo } from '@/domain/UserInfo'
+import { checkSystemDarkMode, generateRandomAvatar, generateRandomName } from '@/utils'
+import { UserIcon } from 'lucide-react'
+import { nanoid } from 'nanoid'
+import { FC, useEffect, useState } from 'react'
+import { useRemeshDomain, useRemeshSend } from 'remesh-react'
+import Timer from '@resreq/Timer'
+import ExampleImage from '@/assets/images/example.jpg'
+
+const mockTextList = [
+ `你問我支持不支持，我說我支持`,
+ `我就明確告訴你，你們啊，我感覺你們新聞界還要學習一個，你們非常熟悉西方的那一套`,
+ `你們畢竟還 too young`,
+ `明白我的意思吧？`,
+ `我告訴你們我是身經百戰了，見得多了`,
+ `西方的那個國家我沒去過？`,
+ `媒體他們...你們要知道美國的華萊士，比你們不知道高到哪裏去了，我跟他談笑風生`,
+ `其實媒體呀，還是要提高自己的知識水平，識得唔識得呀？`,
+ `你們有一個好，全世界跑到什么地方，你們比其他的西方記者跑得還快`,
+ `但是呢問來問去的問題呀`,
+ `都 too simple sometimes naive`,
+ `懂了沒啊，識得唔識得呀？`,
+ `我很抱歉，我今天是作爲一個長者給你們講`,
+ `我不是新聞工作者，但是我見得太多了`,
+ `我有這個必要好告訴你們一點人生的經驗`,
+ ``
+]
+
+const generateUserInfo = async (): Promise
=> {
+ return {
+ id: nanoid(),
+ name: generateRandomName(),
+ avatar: await generateRandomAvatar(MAX_AVATAR_SIZE),
+ createTime: Date.now(),
+ themeMode: checkSystemDarkMode() ? 'dark' : 'system'
+ }
+}
+
+const generateMessage = async (): Promise => {
+ const userAvatar = await generateRandomAvatar(MAX_AVATAR_SIZE)
+ const username = generateRandomName()
+ const userId = nanoid()
+ return {
+ id: nanoid(),
+ body: mockTextList.shift()!,
+ date: Date.now(),
+ userId,
+ username,
+ userAvatar,
+ likeUsers: mockTextList.length ? [] : [{ userId, username, userAvatar }],
+ hateUsers: []
+ }
+}
+
+const Setup: FC = () => {
+ const send = useRemeshSend()
+ const userInfoDomain = useRemeshDomain(UserInfoDomain())
+ const messageListDomain = useRemeshDomain(MessageListDomain())
+
+ const [userInfo, setUserInfo] = useState()
+ const handleSetup = () => {
+ send(userInfoDomain.command.UpdateUserInfoCommand(userInfo!))
+ send(messageListDomain.command.ClearListCommand())
+ }
+
+ const refreshUserInfo = async () => setUserInfo(await generateUserInfo())
+ const createMessage = async () => {
+ const message = await generateMessage()
+ send(messageListDomain.command.CreateItemCommand(message))
+ }
+
+ useEffect(() => {
+ send(messageListDomain.command.ClearListCommand())
+ const userInfoTimer = new Timer(refreshUserInfo, { delay: 2000, immediate: true })
+ const messageTimer = new Timer(createMessage, { delay: 2000, immediate: true, limit: mockTextList.length })
+
+ userInfoTimer.start()
+ messageTimer.start()
+ return () => {
+ userInfoTimer.stop()
+ messageTimer.stop()
+ }
+ }, [])
+ return (
+
+
+
+
+
+
+
+
+
@{userInfo?.name}
+
+
+
{
type="button"
size="xs"
className="mx-auto flex items-center gap-x-2"
- onClick={handleRandomAvatar}
+ onClick={handleRefreshAvatar}
>
Ugly Avatar
diff --git a/src/assets/images/example.jpg b/src/assets/images/example.jpg
new file mode 100644
index 0000000..ed20e47
Binary files /dev/null and b/src/assets/images/example.jpg differ
diff --git a/src/assets/react.svg b/src/assets/react.svg
deleted file mode 100644
index 8e0e0f1..0000000
--- a/src/assets/react.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/src/assets/you.jpg b/src/assets/you.jpg
deleted file mode 100644
index db1b91b..0000000
Binary files a/src/assets/you.jpg and /dev/null differ
diff --git a/src/components/ui/Markdown.tsx b/src/components/ui/Markdown.tsx
index a9f2772..b876098 100644
--- a/src/components/ui/Markdown.tsx
+++ b/src/components/ui/Markdown.tsx
@@ -10,9 +10,40 @@ export interface MarkdownProps {
className?: string
}
+const safeProtocol = /^(https?|ircs?|mailto|xmpp|data)$/i
+
+/**
+ * https://github.com/remarkjs/react-markdown/blob/baad6c53764e34c4ead41e2eaba176acfc87538a/lib/index.js#L293
+ */
+const urlTransform = (value: string) => {
+ // Same as:
+ //
+ // But without the `encode` part.
+ const colon = value.indexOf(':')
+ const questionMark = value.indexOf('?')
+ const numberSign = value.indexOf('#')
+ const slash = value.indexOf('/')
+
+ if (
+ // If there is no protocol, it’s relative.
+ colon < 0 ||
+ // If the first colon is after a `?`, `#`, or `/`, it’s not a protocol.
+ (slash > -1 && colon > slash) ||
+ (questionMark > -1 && colon > questionMark) ||
+ (numberSign > -1 && colon > numberSign) ||
+ // It is a protocol, it should be allowed.
+ safeProtocol.test(value.slice(0, colon))
+ ) {
+ return value
+ }
+
+ return ''
+}
+
const Markdown: FC = ({ children = '', className }) => {
return (
(
@@ -60,6 +91,12 @@ const Markdown: FC = ({ children = '', className }) => {
)
},
pre: ({ className, ...props }) => ,
+ /**
+ * TODO: Code highlight
+ * @see https://github.com/remarkjs/react-markdown/issues/680
+ * @see https://shiki.style/guide/install#usage
+ *
+ */
code: ({ className, ...props }) => (