{"topic":{"id":13872,"title":"关于网络社交软件的开发","slug":"topic","categoryId":60,"createdAt":"2024-11-18 07:41:54.509161","bumpedAt":"2024-11-26 13:29:30.424792","views":425,"postsCount":19,"highestPostNumber":20,"likeCount":25,"closed":false,"pinned":false,"pinnedGlobally":false,"pinnedAt":null,"pinnedUntil":null,"isBanner":false,"excerpt":"你站很少看到有人做实际写代码的事情，写实际有用的项目就更少了，因此我想借助开发网络社交软件这样一个项目，把你站从一个已经死亡的校园论坛 / 本质上是聊天群的网站，转变成开发人员讨论技术的地方. sveltebb 这一初步的尝试目前做到了基本的 CRUD 逻辑，缩进式回复界面，有 bug 的数据同步. 在这个过程中，我有一些思考理清数据同步逻辑为了彻底解决网络连接不稳定的特色问题，这个 forum/BBS/社区/社交软件的重要…","deletedAt":null,"isAnonymous":false,"category":{"id":60,"name":"日志 / 部落格","slug":"journal","color":"F7941D"},"author":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif"},"tags":[]},"posts":[{"id":43338,"postNumber":1,"raw":"你站很少看到有人做实际写代码的事情，写实际有用的项目就更少了，因此我想借助开发网络社交软件这样一个项目，把你站从一个已经死亡的校园论坛 / 本质上是聊天群的网站，转变成开发人员讨论技术的地方.\n\n[sveltebb 这一初步的尝试](https://github.com/fokx/sveltebb) 目前做到了 [基本的 CRUD 逻辑，缩进式回复界面，有 bug 的数据同步](https://east.xjtu.app/).\n\n在这个过程中，我有一些思考 :thinking_face_spider:\n\n1. 理清数据同步逻辑\n 为了彻底解决网络连接不稳定的特色问题，这个 forum/BBS/社区/社交软件的重要特性是**离线优先 (offline-first)**, 这个概念包含了*离线可用*, 数据优先首先保存在每个用户自己的设备上 (浏览器的 indexedDB). \n在基本的数据同步功能实现后，可以增加分布式数据存储，以及 P2P 的数据传输。\nprogressive / lazy & periodic data loading: e.g. 初次访问时，加载部分数据，滚动到最底下，加载更多。在需要显示用户信息的地方，如果本地没有该用户的信息 (在上一次定期数据同步时没有获取到), 展示用户 ID 直到获取到用户信息.\n\n1. 采用现代 UI 框架，在开发上述 sveltebb 的过程中，我发现堆叠基础 html 组件和手写 css 调整界面是一件比较痛苦的事情。\n 我调研了几个:\n * https://flowbite-svelte.com/\n * https://www.shadcn-svelte.com/\n 我对框架的期望是，开源并积极维护 (github 最新一次 commit 应该在 1 周之内), 良好支持 svelte5, 文档网站没有白色背景加黑色代码块这样傻逼的设计\n\n1. 采用 [Tauri](https://tauri.app/) 将这个 Web App 分发成可安装的，可利用设备原生功能特性的跨平台 App. 潜在问题：[Disable SSR](https://v2.tauri.app/start/frontend/sveltekit/#disable-ssr)\n\n1. 用户可以随意操作自己的数据，权限系统 (moderator) 决定了别人看到你的是什么样的; 分类&标签\n 把这些做完就可以将你站的 Discourse 域名换到 west.xjtu.app 并将 east.xjtu.app 尊奉为 xjtu.app 了\n\n---\nThis is not a **plan**, it is what we **do**.\n\nLet's our get hands dirty instead of fiddling around with junky things like study or attending university.\n\nrepo:\n\nhttps://github.com/fokx/svelte-forum","cooked":"

你站很少看到有人做实际写代码的事情，写实际有用的项目就更少了，因此我想借助开发网络社交软件这样一个项目，把你站从一个已经死亡的校园论坛 / 本质上是聊天群的网站，转变成开发人员讨论技术的地方.

sveltebb 这一初步的尝试目前做到了基本的 CRUD 逻辑，缩进式回复界面，有 bug 的数据同步.

在这个过程中，我有一些思考 $\":thinking_face_spider:\"$

\n
理清数据同步逻辑
\n为了彻底解决网络连接不稳定的特色问题，这个 forum/BBS/社区/社交软件的重要特性是离线优先 (offline-first), 这个概念包含了离线可用, 数据优先首先保存在每个用户自己的设备上 (浏览器的 indexedDB).
\n在基本的数据同步功能实现后，可以增加分布式数据存储，以及 P2P 的数据传输。
\nprogressive / lazy & periodic data loading: e.g. 初次访问时，加载部分数据，滚动到最底下，加载更多。在需要显示用户信息的地方，如果本地没有该用户的信息 (在上一次定期数据同步时没有获取到), 展示用户 ID 直到获取到用户信息.
\n
\n
采用现代 UI 框架，在开发上述 sveltebb 的过程中，我发现堆叠基础 html 组件和手写 css 调整界面是一件比较痛苦的事情。
\n我调研了几个:
\n
- https://flowbite-svelte.com/
- The Foundation for your Design System
  \n我对框架的期望是，开源并积极维护 (github 最新一次 commit 应该在 1 周之内), 良好支持 svelte5, 文档网站没有白色背景加黑色代码块这样傻逼的设计
\n
\n
采用 Tauri 将这个 Web App 分发成可安装的，可利用设备原生功能特性的跨平台 App. 潜在问题：Disable SSR
\n
\n
用户可以随意操作自己的数据，权限系统 (moderator) 决定了别人看到你的是什么样的; 分类&标签
\n把这些做完就可以将你站的 Discourse 域名换到 west.xjtu.app 并将 east.xjtu.app 尊奉为 xjtu.app 了
\n

This is not a plan, it is what we do.

Let's our get hands dirty instead of fiddling around with junky things like study or attending university.

repo:

https://github.com/fokx/svelte-forum

","createdAt":"2024-11-18 07:41:54.715103","updatedAt":"2024-12-22 15:15:39.58879","replyToPostNumber":null,"replyCount":0,"likeCount":6,"wordCount":613,"liked":false,"bookmarked":false,"polls":[],"reactions":[{"reaction":"❤️","count":6,"users":[{"id":346,"username":"hoist","name":null},{"id":1929,"username":"Quit","name":"Qwen"},{"id":4113,"username":"filehelper","name":"文件传输助手"},{"id":5151,"username":"Soyo34325","name":"Soyo34325"},{"id":5905,"username":"PipaQinse233","name":"PipaQinse233"},{"id":6205,"username":"uika_winwing","name":null}],"hasReacted":false}],"wiki":false,"version":6,"publicVersion":6,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}},{"id":43340,"postNumber":2,"raw":"学不来前端","cooked":"

学不来前端

\n","createdAt":"2024-11-18 07:52:38.03191","updatedAt":"2024-11-18 07:52:38.03191","replyToPostNumber":null,"replyCount":1,"likeCount":0,"wordCount":5,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":200,"username":"Srotseiticar","name":null,"avatarUrl":"/uploads/image/b1/9c/b19c1e66543642c1f8875cee0af0cf23bc42ced9ab04c26a042f5da02566d26c.avif","admin":false,"moderator":false,"signatureRaw":null,"signatureCooked":null}},{"id":43341,"postNumber":3,"raw":"有什么更有意思的项目吗 :thinking:","cooked":"

有什么更有意思的项目吗 🤔

\n","createdAt":"2024-11-18 08:08:48.575343","updatedAt":"2024-11-18 08:08:48.575343","replyToPostNumber":null,"replyCount":1,"likeCount":0,"wordCount":12,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":340,"username":"卡冈图亚","name":"Breski","avatarUrl":"/uploads/image/ba/d3/bad35303ba63abad7e1347bb429056d369489ab4f0b238ca4c0e464511be73e0.avif","admin":false,"moderator":false,"signatureRaw":null,"signatureCooked":null}},{"id":43345,"postNumber":4,"raw":"这个是前端吗？:rofl:\n光有前端你的程序一般跑不起来 (除非你通过 API 请求存数据)\nsveltekit 是一个前后端一体的框架，虽然你写的都是 js, 但一些 js 在浏览器里跑，一些是服务器上的 node 跑\n\n除此之外，还涉及设计，界面，交互方式\n\n从互动娱乐的角度来看，跟你开发游戏差不多","cooked":"

这个是前端吗？🤣
\n光有前端你的程序一般跑不起来 (除非你通过 API 请求存数据)
\nsveltekit 是一个前后端一体的框架，虽然你写的都是 js, 但一些 js 在浏览器里跑，一些是服务器上的 node 跑

除此之外，还涉及设计，界面，交互方式

从互动娱乐的角度来看，跟你开发游戏差不多

\n","createdAt":"2024-11-18 08:19:11.297708","updatedAt":"2024-12-22 15:15:40.001759","replyToPostNumber":2,"replyCount":0,"likeCount":0,"wordCount":114,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}},{"id":43348,"postNumber":5,"raw":"有没有意思不是谁说了算的，我在写代码的过程中获得了乐趣，虽然累，但是搞到 12 点了还想搞，有点像打游戏，感觉很爽\n自己搞的东西，可以点来点去的，虽然简陋了点，但是有一些没有虚度光阴的成就感\n我个人感觉比刷 leetcode 有意思，leetcode 更像是做题，没有实际意义，你会解题了，so what?","cooked":"

有没有意思不是谁说了算的，我在写代码的过程中获得了乐趣，虽然累，但是搞到 12 点了还想搞，有点像打游戏，感觉很爽
\n自己搞的东西，可以点来点去的，虽然简陋了点，但是有一些没有虚度光阴的成就感
\n我个人感觉比刷 leetcode 有意思，leetcode 更像是做题，没有实际意义，你会解题了，so what?

\n","createdAt":"2024-11-18 08:21:58.425255","updatedAt":"2024-12-22 15:15:40.328368","replyToPostNumber":3,"replyCount":0,"likeCount":4,"wordCount":123,"liked":false,"bookmarked":false,"polls":[],"reactions":[{"reaction":"🥰️","count":2,"users":[{"id":1835,"username":"Dusk","name":"夕大画家"},{"id":6205,"username":"uika_winwing","name":null}],"hasReacted":false},{"reaction":"👍","count":1,"users":[{"id":4668,"username":"IO","name":null}],"hasReacted":false},{"reaction":"❤️","count":4,"users":[{"id":346,"username":"hoist","name":null},{"id":1835,"username":"Dusk","name":"夕大画家"},{"id":1929,"username":"Quit","name":"Qwen"},{"id":6205,"username":"uika_winwing","name":null}],"hasReacted":false}],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}},{"id":43352,"postNumber":6,"raw":"[quote=\"anonymous_coward, post:1, topic:13872\"]\n这个 forum/BBS/社区/社交软件的重要特性是**离线优先 (offline-first)**, 这个概念包含了*离线可用*, 数据优先首先保存在每个用户自己的设备上 (浏览器的 indexedDB).\n[/quote]\n\nadmin 还是对数据离线恋恋不舍啊 :magic_wand_grin:","cooked":"

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\tanonymous_coward:\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t

\n
这个 forum/BBS/社区/社交软件的重要特性是离线优先 (offline-first), 这个概念包含了离线可用, 数据优先首先保存在每个用户自己的设备上 (浏览器的 indexedDB).
\n

\n\t\t\t\t\t\t

admin 还是对数据离线恋恋不舍啊 $\":magic_wand_grin:\"$

\n","createdAt":"2024-11-18 08:56:01.78491","updatedAt":"2024-11-18 08:56:01.78491","replyToPostNumber":null,"replyCount":1,"likeCount":2,"wordCount":78,"liked":false,"bookmarked":false,"polls":[],"reactions":[{"reaction":"❤️","count":2,"users":[{"id":346,"username":"hoist","name":null},{"id":1835,"username":"Dusk","name":"夕大画家"}],"hasReacted":false}],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":5151,"username":"Soyo34325","name":"Soyo34325","avatarUrl":"/uploads/image/9d/e5/9de500d3afb55c0fe71e319832f2af75532222efe94bd3de9aea21f0f5c55707.avif","admin":false,"moderator":false,"signatureRaw":"ぜーんぶ弾けなーい！","signatureCooked":"

ぜーんぶ弾けなーい！

\n"}},{"id":43355,"postNumber":7,"raw":"https://www.bbc.com/news/world-asia-55889565\n\nWhen the network is down, it will be cool if we can still communicate wirelessly. Via bluetooth, personal hotspot / soft AP, WLAN router / Wifi mesh (even if WAN is not connected), we can still form network, though scattered and partitioned.","cooked":"\n

When the network is down, it will be cool if we can still communicate wirelessly. Via bluetooth, personal hotspot / soft AP, WLAN router / Wifi mesh (even if WAN is not connected), we can still form network, though scattered and partitioned.

\n","createdAt":"2024-11-18 09:14:18.531497","updatedAt":"2024-11-18 09:15:31.868382","replyToPostNumber":6,"replyCount":0,"likeCount":0,"wordCount":43,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}},{"id":43356,"postNumber":8,"raw":"https://hack.sveltesociety.dev/2024/rules\n\n是要这个吗","cooked":"\n

是要这个吗

\n","createdAt":"2024-11-18 09:16:45.744726","updatedAt":"2024-11-18 09:16:45.744726","replyToPostNumber":null,"replyCount":1,"likeCount":1,"wordCount":6,"liked":false,"bookmarked":false,"polls":[],"reactions":[{"reaction":"❤️","count":1,"users":[{"id":6205,"username":"uika_winwing","name":null}],"hasReacted":false}],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":200,"username":"Srotseiticar","name":null,"avatarUrl":"/uploads/image/b1/9c/b19c1e66543642c1f8875cee0af0cf23bc42ced9ab04c26a042f5da02566d26c.avif","admin":false,"moderator":false,"signatureRaw":null,"signatureCooked":null}},{"id":43357,"postNumber":9,"raw":"I don't know. Maybe let's have a try.","cooked":"

I don't know. Maybe let's have a try.

\n","createdAt":"2024-11-18 09:19:23.164426","updatedAt":"2024-12-22 15:15:40.755151","replyToPostNumber":8,"replyCount":0,"likeCount":0,"wordCount":8,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}},{"id":43376,"postNumber":10,"raw":"JS 界的 UI framework 真的是看花了眼\n\n* flowbite-svelte: 这个是我看起来最舒服的。虽然自称是 free and open-source UI component library, 但让人看不懂的是支持多种前端框架的 flowbite 有需要花不菲的一笔钱 (CNY 2000, 学生半价) 解锁全部组件的 [pro 版](https://flowbite.com/pro/#pricing),以及这个仓库的 commiter 几乎就是一个人 Shinichi Okada, 从 01/22 年维护至今\n* Tailwind UI 由 tailwind 官方做的，但不支持 svelte 且有些组件需要花钱解锁\n* daisyui 看起来挺好看，但文档自相矛盾，一会说支持 svelte，但浏览组件发现全是面向 React 的 jsx. repo owner 是工作在 Türkiye 的 Iranian\n* [一位老哥 huntbyte](https://github.com/huntabyte) 维护/参与维护了好几个框架：bits-ui, melt-ui, shadcn-svelte, 看提交历史，差不多是另外一个老哥 tglide 在 03/23 创建了 melt-ui, 他在 05/23 创建了把原来面向 React 的 shadcn 框架移植到 svelte 的 shadcn-svelte, 结果在搞一些新组件的过程发现得依赖自己的代码，于是创建了底层基于 melt-ui 的 bits-ui. \nshadcn-svelte 最近几个月的提交有一些社区贡献者。有人搞了一个 shadcn 的 jetbrains 插件.\n* Svelte Material UI 顶部支持 ukraine 是败笔 (so do emberjs)\n* smelte 简陋\n* carbon-components-svelte: IBM 的设计系统。我讨厌顶部给你搞一长条黑色导航栏\n* svelte-headlessui 组件太少\n\n---\n\n我为了比较把一些库克隆下来看看提交历史，发现有个看起来还挺好看的牛逼库 daisyui 高达接近 10GB:\n```\nuil@S /g % clone https://github.com/saadeghi/daisyui \nCloning into 'daisyui'...\nremote: Enumerating objects: 832420, done.\nremote: Counting objects: 100% (35550/35550), done.\nremote: Compressing objects: 100% (21664/21664), done.\nReceiving objects: 1% (16384/832420), 172.68 MiB | 9.56 MiB/s \nremote: Total 832420 (delta 14465), reused 34707 (delta 13733), pack-reused 796870 (from 1)\nReceiving objects: 100% (832420/832420), 8.79 GiB | 9.93 MiB/s, done.\nResolving deltas: 100% (298752/298752), done.\ngit clone --recursive https://github.com/saadeghi/daisyui 145.07s user 36.84s system 19% cpu 15:25.54 total\n```\n其他库大不了十几/几十 M\n\n---\n\n所以最终决定用什么呢？\n~~我准备先试试 flowbite, 如果真的是付费墙就转用 shadcn~~\n\nedit: 今天了解到 flowbite-svelte 的作者正在适配 svelte 5, 为了支持新的 rune 功能，搞了一个新的 UI Lib: https://svelte-5-ui-lib.codewithshin.com/ , 看 git 提交历史，每天都有提交，而老的 flowbite-svelte 上次提交还是 3 周前，所以我应该选择面向未来的 *svelte-5-ui-lib*\n\n这个 app 主要面向手机用户，https://tailwindcss.com/docs/responsive-design#targeting-mobile-screens 非常重\n\nedit2: 大致了解了 shadcn 采取复制代码片段而非 flowbite 这种安装 npm 包的方式增加新组件，这样有利于对功能进行定制和修改，是否应该转用 shadcn?","cooked":"

JS 界的 UI framework 真的是看花了眼

flowbite-svelte: 这个是我看起来最舒服的。虽然自称是 free and open-source UI component library, 但让人看不懂的是支持多种前端框架的 flowbite 有需要花不菲的一笔钱 (CNY 2000, 学生半价) 解锁全部组件的 pro 版,以及这个仓库的 commiter 几乎就是一个人 Shinichi Okada, 从 01/22 年维护至今
Tailwind UI 由 tailwind 官方做的，但不支持 svelte 且有些组件需要花钱解锁
daisyui 看起来挺好看，但文档自相矛盾，一会说支持 svelte，但浏览组件发现全是面向 React 的 jsx. repo owner 是工作在 Türkiye 的 Iranian
一位老哥 huntbyte 维护/参与维护了好几个框架：bits-ui, melt-ui, shadcn-svelte, 看提交历史，差不多是另外一个老哥 tglide 在 03/23 创建了 melt-ui, 他在 05/23 创建了把原来面向 React 的 shadcn 框架移植到 svelte 的 shadcn-svelte, 结果在搞一些新组件的过程发现得依赖自己的代码，于是创建了底层基于 melt-ui 的 bits-ui.
\nshadcn-svelte 最近几个月的提交有一些社区贡献者。有人搞了一个 shadcn 的 jetbrains 插件.
Svelte Material UI 顶部支持 ukraine 是败笔 (so do emberjs)
smelte 简陋
carbon-components-svelte: IBM 的设计系统。我讨厌顶部给你搞一长条黑色导航栏
svelte-headlessui 组件太少

我为了比较把一些库克隆下来看看提交历史，发现有个看起来还挺好看的牛逼库 daisyui 高达接近 10GB:

uil@S /g % clone https://github.com/saadeghi/daisyui           \nCloning into 'daisyui'...\nremote: Enumerating objects: 832420, done.\nremote: Counting objects: 100% (35550/35550), done.\nremote: Compressing objects: 100% (21664/21664), done.\nReceiving objects:   1% (16384/832420), 172.68 MiB | 9.56 MiB/s \nremote: Total 832420 (delta 14465), reused 34707 (delta 13733), pack-reused 796870 (from 1)\nReceiving objects: 100% (832420/832420), 8.79 GiB | 9.93 MiB/s, done.\nResolving deltas: 100% (298752/298752), done.\ngit clone --recursive https://github.com/saadeghi/daisyui  145.07s user 36.84s system 19% cpu 15:25.54 total\n

其他库大不了十几/几十 M

所以最终决定用什么呢？
\n~~我准备先试试 flowbite, 如果真的是付费墙就转用 shadcn~~

edit: 今天了解到 flowbite-svelte 的作者正在适配 svelte 5, 为了支持新的 rune 功能，搞了一个新的 UI Lib: https://svelte-5-ui-lib.codewithshin.com/ , 看 git 提交历史，每天都有提交，而老的 flowbite-svelte 上次提交还是 3 周前，所以我应该选择面向未来的 svelte-5-ui-lib

这个 app 主要面向手机用户，Responsive design - Core concepts 非常重

edit2: 大致了解了 shadcn 采取复制代码片段而非 flowbite 这种安装 npm 包的方式增加新组件，这样有利于对功能进行定制和修改，是否应该转用 shadcn?

\n","createdAt":"2024-11-19 14:26:46.711523","updatedAt":"2024-12-22 15:15:41.350235","replyToPostNumber":null,"replyCount":0,"likeCount":5,"wordCount":671,"liked":false,"bookmarked":false,"polls":[],"reactions":[{"reaction":"❤️","count":5,"users":[{"id":346,"username":"hoist","name":null},{"id":1835,"username":"Dusk","name":"夕大画家"},{"id":4113,"username":"filehelper","name":"文件传输助手"},{"id":5151,"username":"Soyo34325","name":"Soyo34325"},{"id":6205,"username":"uika_winwing","name":null}],"hasReacted":false}],"wiki":false,"version":7,"publicVersion":7,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}},{"id":43377,"postNumber":11,"raw":"![Screenshot_20241119_224537|339x500](/uploads/image/33/23/3323a9e782dd95467922437e7d3f291028b83fe0b20e228c36ae8f716ccc035f.avif)\n\n在我重写界面之前，今日\n* 调整了 post thread 第一个 post 的回复框和 post 文本不在同一行以避免在手机上文本竖排\n* 点击回复按钮展开回复框自动聚焦输入框 (手机上表现为立刻弹出输入法)\n* 显示 post 的发送时间\n* 用户 post 区分 OP 和回复\n数据同步 bug 没有解决，因为我逻辑思维能力很差，每天又浑浑噩噩的，时间又碎片得很，想把这个理清楚有点难 :a_grinning_face_with_sweat:\n\n在写这个的过程中，我发现自己想的做法很原始，例如回复功能，discourse 和小红书都是在点击后在屏幕底部弹出文本编辑器.\n在重写 UI 的时候需要借鉴现有做法。","cooked":"

$\"Screenshot_20241119_224537\"$

在我重写界面之前，今日

调整了 post thread 第一个 post 的回复框和 post 文本不在同一行以避免在手机上文本竖排
点击回复按钮展开回复框自动聚焦输入框 (手机上表现为立刻弹出输入法)
显示 post 的发送时间
用户 post 区分 OP 和回复
\n数据同步 bug 没有解决，因为我逻辑思维能力很差，每天又浑浑噩噩的，时间又碎片得很，想把这个理清楚有点难 $\":a_grinning_face_with_sweat:\"$

在写这个的过程中，我发现自己想的做法很原始，例如回复功能，discourse 和小红书都是在点击后在屏幕底部弹出文本编辑器.
\n在重写 UI 的时候需要借鉴现有做法。

\n","createdAt":"2024-11-19 14:51:56.314186","updatedAt":"2024-12-22 15:15:42.298933","replyToPostNumber":null,"replyCount":0,"likeCount":0,"wordCount":217,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":2,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}},{"id":43401,"postNumber":12,"raw":"选 IconPack 的时候又挑花了眼\nShinichi Okada 为 svelte 适配了很多种 icon pack\nhttps://svelte-svg-icons.codewithshin.com/\n我一一点开进行了比较，并搜索 chat/message/reply 相关图标:\n* https://www.radix-ui.com/icons 图标少，无智能搜索\n* https://heroicons.com/ 由 tailwindcss' makers 制作，无智能搜索\n* https://ionic.io/ionicons Inoic Framework 制作，无智能搜索\n* https://remixicon.com/ 有智能搜索，3020 icons, 支持 brand icon, 所有图标免费且支持商用\n* https://ant.design/components/icon 部分 icon 是动态，无智能搜索\n* https://tabler.io/icons 有智能搜索，5718 icons 支持 brand icon, 免费\n* https://flowbite.com/icons/ 无智能搜索\n* https://lucide.dev/icons 有智能搜索，全都是 outline\n* https://fontawesome.com/icons 最牛逼的 icon 大全 (53,662 Icons), 很多需要付费，免费的有 2,058 Icons, 价格$100/y\n* https://icons.getbootstrap.com/ 有智能搜索\n\n接下来就是在 remix, tabler, bootstrap 里面选\ntabler 搜索后图标下面不显示名字\nremix github commiters' names are mainly hanyu pinyin","cooked":"

选 IconPack 的时候又挑花了眼
\nShinichi Okada 为 svelte 适配了很多种 icon pack

\n\n我一一点开进行了比较，并搜索 chat/message/reply 相关图标:\n* Radix Icons 图标少，无智能搜索\n* Heroicons 由 tailwindcss' makers 制作，无智能搜索\n* Ionicons: The premium icon pack for Ionic Framework Inoic Framework 制作，无智能搜索\n* Remix Icon - Open source icon library 有智能搜索，3020 icons, 支持 brand icon, 所有图标免费且支持商用\n* Icon - Ant Design 部分 icon 是动态，无智能搜索\n* Tabler Icons: 6150+ free vector icons for web design 有智能搜索，5718 icons 支持 brand icon, 免费\n* https://flowbite.com/icons/ 无智能搜索\n* Lucide Icons 有智能搜索，全都是 outline\n* Find Icons with the Perfect Look & Feel | Font Awesome 最牛逼的 icon 大全 (53,662 Icons), 很多需要付费，免费的有 2,058 Icons, 价格$100/y\n* Bootstrap Icons 有智能搜索\n

接下来就是在 remix, tabler, bootstrap 里面选
\ntabler 搜索后图标下面不显示名字
\nremix github commiters' names are mainly hanyu pinyin

\n","createdAt":"2024-11-20 03:15:39.863271","updatedAt":"2024-12-22 15:15:42.61739","replyToPostNumber":null,"replyCount":0,"likeCount":3,"wordCount":218,"liked":false,"bookmarked":false,"polls":[],"reactions":[{"reaction":"❤️","count":3,"users":[{"id":4113,"username":"filehelper","name":"文件传输助手"},{"id":5151,"username":"Soyo34325","name":"Soyo34325"},{"id":6205,"username":"uika_winwing","name":null}],"hasReacted":false}],"wiki":false,"version":3,"publicVersion":3,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}},{"id":43416,"postNumber":13,"raw":"有上交✌️联系我了，好开心啊 :beaming_face:\n\n可是明天又要干一堆杂活 :joy_smiling_face_with_tear:","cooked":"

有上交✌️联系我了，好开心啊 😁

可是明天又要干一堆杂活 $\":joy_smiling_face_with_tear:\"$

\n","createdAt":"2024-11-20 14:42:54.136763","updatedAt":"2024-12-22 15:15:43.235644","replyToPostNumber":null,"replyCount":1,"likeCount":2,"wordCount":26,"liked":false,"bookmarked":false,"polls":[],"reactions":[{"reaction":"wave_gif","count":1,"users":[{"id":30,"username":"一只玉米人","name":"玉米🌽"}],"hasReacted":false},{"reaction":"❤️","count":2,"users":[{"id":30,"username":"一只玉米人","name":"玉米🌽"},{"id":346,"username":"hoist","name":null}],"hasReacted":false}],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}},{"id":43417,"postNumber":14,"raw":"有没有虾饺✌联系你","cooked":"

有没有虾饺✌联系你

\n","createdAt":"2024-11-20 15:50:22.21687","updatedAt":"2024-11-20 15:50:22.21687","replyToPostNumber":13,"replyCount":1,"likeCount":0,"wordCount":9,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":178,"username":"Hypocrisy","name":"rotartsinimdA","avatarUrl":"/uploads/image/ce/f3/cef3773e378e161524cc7523c8a63dff0698d22802b0c1ab669894d395ee36a3.avif","admin":false,"moderator":true,"signatureRaw":null,"signatureCooked":null}},{"id":43418,"postNumber":15,"raw":"[quote=\"rotartsinimdA, post:14, topic:13872, username:Hypocrisy\"]\n虾饺:v:\n[/quote]\n虾饺只有🐭🐭，没有✌🏿吧","cooked":"

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\trotartsinimdA:\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t

\n\t\t\t\t\t\t\t

\n
虾饺✌️
\n

\n\t\t\t\t\t\t

虾饺只有🐭🐭，没有✌🏿吧

\n","createdAt":"2024-11-20 15:54:10.860116","updatedAt":"2024-12-22 15:20:25.928149","replyToPostNumber":14,"replyCount":2,"likeCount":0,"wordCount":17,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}},{"id":43425,"postNumber":17,"raw":"虾饺✌️说笑了😭😭😭\n那🐭🐭我怎么办","cooked":"

虾饺✌️说笑了😭😭😭
\n那🐭🐭我怎么办

\n","createdAt":"2024-11-20 16:48:58.27311","updatedAt":"2024-11-20 16:48:58.27311","replyToPostNumber":15,"replyCount":0,"likeCount":0,"wordCount":13,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":178,"username":"Hypocrisy","name":"rotartsinimdA","avatarUrl":"/uploads/image/ce/f3/cef3773e378e161524cc7523c8a63dff0698d22802b0c1ab669894d395ee36a3.avif","admin":false,"moderator":true,"signatureRaw":null,"signatureCooked":null}},{"id":43439,"postNumber":18,"raw":":shrimp: :dumpling: :mouse: :mouse: :v:","cooked":"

🦐 🥟 🐁 🐁 ✌️

\n","createdAt":"2024-11-21 05:47:56.762924","updatedAt":"2024-12-22 15:15:43.530973","replyToPostNumber":15,"replyCount":0,"likeCount":0,"wordCount":5,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":1,"publicVersion":1,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}},{"id":43444,"postNumber":19,"raw":"![Screenshot_20241121-222507|225x500](/uploads/image/4a/19/4a19b34a3e5e584b9ef4fa456ed6900cf90c776e85749a9eaf1177133451920c.avif)\nboilerplate with no CRUD logic\nhttps://github.com/fokx/svelte-forum/commit/97c33e7f95de988f3c1b338ce48297a16893681b\n\ntodo:\n[x] fix responsiveness problem (tailwindcss)\n\n[x] add sidebar, handle sidebar and hamburger menu carefully\n","cooked":"

$\"Screenshot_20241121-222507\"$
\nboilerplate with no CRUD logic

https://github.com/fokx/svelte-forum/commit/97c33e7f95de988f3c1b338ce48297a16893681b

todo:
\n fix responsiveness problem (tailwindcss)
\nhttps://tailwindcss.com/docs/responsive-design#targeting-mobile-screens
\n add sidebar, handle sidebar and hamburger menu carefully
\nhttps://svelte-5-ui-lib.codewithshin.com/components/sidebar

\n","createdAt":"2024-11-21 14:29:10.139134","updatedAt":"2024-12-22 15:15:43.832042","replyToPostNumber":null,"replyCount":0,"likeCount":0,"wordCount":24,"liked":false,"bookmarked":false,"polls":[],"reactions":[],"wiki":false,"version":3,"publicVersion":3,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}},{"id":43587,"postNumber":20,"raw":"今日探索了很多 Markdown Editor,\n不得不感叹 Discourse 的 Markdown Editor 真的是太完美了，没有找到多么理想的开源 alternative. 所以这一项目最好能和 Discourse 共存，利用 [Discourse API](https://docs.discourse.org/) 进行互操作.\n\n我的需求:\n1. 支持 Latex. 如果可以再支持 tikz, mermaid 就更好了\n2. 对移动装置友好，小屏幕的交互设计很考验开发者\n3. 支持 svelte. 有些仅支持 react, 想要用在 svelte 项目里会影响性能\n4. 界面不能太丑\n5. 易于添加部件，例如保存/发送按钮。支持 dark mode.\n6. 在维护，排除上次 commit 在一年前的 repo\n7. 最好不要是中国人开发的\n\n通过在 github 搜索并按 star 排序\n\n\n\n排除了一些作为独立 App 使用的 repo, 实在是没找到好的\n\n---\n\n今天在 reddit 上找，做了一个各种编辑器 (bytemd carta milkdown quill tipex tiptap typewriter vditor) 的比较:\n\n\n最终 settle down with [Lexical](https://playground.lexical.dev/) (with svelte binding by https://github.com/umaranis/svelte-lexical )\n\n这个 Lexical 是 Facebook 开源的，基于 React, 但并不意味着其他框架以及没有用框架的 webapp 不能用\n\n不得不说 Facebook 开源的产品必然是精品 ( https://xjtu.app/t/topic/1569 ), 这个 Lexical 的界面我觉得和 Discourse 的有的一拼 (一些商业/半开源 MD 编辑器如 CKEditor, TinyMCE 也很不错，但我不喜欢商业软件，而且它们也太贵了)\n\n网友做的 svelte binding 有些缺憾，例如编辑器 + 菜单没有完全实现 Lexical 的全部功能，dependency 是 svelte 4(不过我很轻松地用 sv 工具 migrate to 5)\n\n另外 js 的世界实在是太乱啦，我不能花大把时间在挑选最好的组件上，赶紧写业务逻辑吧","cooked":"

今日探索了很多 Markdown Editor,
\n不得不感叹 Discourse 的 Markdown Editor 真的是太完美了，没有找到多么理想的开源 alternative. 所以这一项目最好能和 Discourse 共存，利用 Discourse API 进行互操作.

我的需求:

支持 Latex. 如果可以再支持 tikz, mermaid 就更好了
对移动装置友好，小屏幕的交互设计很考验开发者
支持 svelte. 有些仅支持 react, 想要用在 svelte 项目里会影响性能
界面不能太丑
易于添加部件，例如保存/发送按钮。支持 dark mode.
在维护，排除上次 commit 在一年前的 repo
最好不要是中国人开发的

通过在 github 搜索并按 star 排序
\nhttps://github.com/search?q=svelte+markdown+editor&type=repositories
\nhttps://github.com/topics/markdown?l=javascript

排除了一些作为独立 App 使用的 repo, 实在是没找到好的

今天在 reddit 上找，做了一个各种编辑器 (bytemd carta milkdown quill tipex tiptap typewriter vditor) 的比较:
\nhttps://github.com/fokx/svelte-markdown-editor-comparison

最终 settle down with Lexical (with svelte binding by GitHub - umaranis/svelte-lexical: Rich text editor for Svelte based on lexical )

这个 Lexical 是 Facebook 开源的，基于 React, 但并不意味着其他框架以及没有用框架的 webapp 不能用

不得不说 Facebook 开源的产品必然是精品 ( 关于美国大互联网公司的感想 ), 这个 Lexical 的界面我觉得和 Discourse 的有的一拼 (一些商业/半开源 MD 编辑器如 CKEditor, TinyMCE 也很不错，但我不喜欢商业软件，而且它们也太贵了)

网友做的 svelte binding 有些缺憾，例如编辑器 + 菜单没有完全实现 Lexical 的全部功能，dependency 是 svelte 4(不过我很轻松地用 sv 工具 migrate to 5)

另外 js 的世界实在是太乱啦，我不能花大把时间在挑选最好的组件上，赶紧写业务逻辑吧

\n","createdAt":"2024-11-25 14:37:41.41292","updatedAt":"2024-12-22 15:15:44.416185","replyToPostNumber":null,"replyCount":0,"likeCount":2,"wordCount":460,"liked":false,"bookmarked":false,"polls":[],"reactions":[{"reaction":"❤️","count":2,"users":[{"id":1411,"username":"lwe","name":null},{"id":6205,"username":"uika_winwing","name":null}],"hasReacted":false}],"wiki":false,"version":4,"publicVersion":4,"deletedAt":null,"isAnonymous":false,"user":{"id":4668,"username":"IO","name":null,"avatarUrl":"/uploads/image/86/f2/86f267c0aaa73835a999b7cc3a7e7a701605574eda9a2c2a56f5ddbbba64d1a9.avif","admin":true,"moderator":false,"signatureRaw":"","signatureCooked":null}}],"hasMore":false,"lastReadPostNumber":12,"hasUrlPostNumber":true}