TODO

Frontend

Set up basic Tailwind CSS
- Set up theme
Convert Markdown to HTML
- Fix code highlighting
- Style the generated HTML
Plan for building the blog admin frontend panel
Switch to using React Query
Switch to using Zustand

Backend

... currently seem to be ok

development logs

1. add basic frontend and backend functions

added several mouths ago

2. set up Chevereto image hosting

Choosing to use docker to set up Chevereto, then dockerized frontend and backend, add nginx-proxy to take over the requests redirection

3. optimize the docker deployment experiences

configure CI/CD using GitHub Actions (not perfect yet)
- and it takes a little bit longer to connect VPS with SSH
- it caused by port mapping while VPS SSH port is customized but GitHub Actions'port is using the default. (actually it's stupid)
add configuration setting example to README.md file in case to forget how to initial docker setup
frontend's nginx didn't works as expect, it turn out that the conf file is not copied into docker conf to override it.

4. prune backend code, add React Suspense and fix django admin panel issues

simplified backend code by removing redundant code

implemented lazy loading and data fetching with React Suspense

Example:

<Suspense fallback={<LoadingSpinner />}>
  {" "}
  <LazyLoadedComponent />{" "}
</Suspense>

implemented code splitting in the frontend by Route-based Splitting and Bundle Splitting

5. fix frontend route to django admin panel issue

complete the .env file rules when it's using in docker
create static files's volume which is generated by collectstatic for sharing between frontend and backend docker container in production environment (when DEBUG=False, Django would not provide static files itself)

6. implement dark mode function and update design

implement basic theme switch functionality as only one light and dark mode button
style for dark mode
use basically only two background color like bgprimary and bgsecondary
update design with a punch-hole-like navbar
fix POUC(Flash of Unstyled Content)
add copyright and move dark mode button within new-added footer

7. rendering md article and gradually support mdx article

support code syntax highlight with rehype and shiki tooling
Rendering markdown using customized styles with rehype-react
https://github.com/rehypejs/rehype-autolink-headings and https://github.com/rehypejs/rehype-slug
implement back to top button while adding side bar
solved FOUC by useLayoutEffect, shout out to the goat on stackoverflow

现代化响应式SPA博客网站的特点(TODO)

极致的性能体验快速初始加载：通过代码分割、懒加载减少首屏资源

流畅的页面切换：路由切换无刷新，添加加载状态和过渡动画

智能预加载：预测用户行为，提前加载可能访问的页面资源

PWA支持：支持离线访问、添加到主屏幕等特性

优秀的响应式设计移动优先：从小屏幕开始设计，逐步增强到大屏幕

自适应布局：使用CSS Grid、Flexbox实现灵活的布局系统

响应式图片：根据设备尺寸和分辨率加载合适的图片版本

触摸友好：按钮和交互元素大小适合手指操作

现代化的用户界面简洁直观的导航：清晰的菜单结构和面包屑导航

深色/浅色主题：支持系统主题检测和手动切换

微交互反馈：悬停效果、加载动画、操作确认等细节

无障碍访问：支持键盘导航、屏幕阅读器，符合WCAG标准

丰富的内容展示代码高亮：为技术博客提供美观的代码展示

数学公式支持：使用MathJax或KaTeX渲染公式

图片灯箱：点击图片放大查看，支持画廊模式

强大的内容管理标签和分类系统：多维度的内容组织方式

全文搜索：客户端或服务端搜索，快速定位内容

文章推荐：基于标签、分类的相关文章推荐

阅读进度：显示当前阅读进度和预估阅读时间

社交和互动功能评论系统：集成第三方（如Gitalk、Utterances）或自建评论

社交分享：一键分享到各大社交平台

订阅功能：RSS订阅和邮件 Newsletter

访客统计：文章阅读量、点赞收藏功能

FilesExpand file tree

dev_logs.md

Latest commit

History