Skip to content

yuchen1204/Daylo

Repository files navigation

Daylo: A Local-First, Versatile Note-Taking App Built For You

Daylo: 专为你打造的本地优先、多功能笔记应用

Daylo is a Progressive Web App (PWA) that integrates Markdown editing, freeform canvas, and mind mapping. Daylo 是一款集 Markdown 编辑、自由画布、思维导图于一体的渐进式网络应用(PWA)。

It follows a "local-first" principle, combining the lightning speed of a local application with the convenience of cloud synchronization. 它贯彻“本地优先”原则,兼具本地应用的极速响应和云端同步的便捷。

Daylo aims to be your second brain for capturing inspiration and organizing thoughts. Daylo 致力于成为你捕捉灵感、整理思绪的第二大脑。


🌟 Why Choose Daylo?

🌟 为什么选择 Daylo?

In an era dominated by cloud services, Daylo takes a different path, giving you back ownership and privacy of your data. 在云服务盛行的时代,Daylo 反其道而行,将数据的所有权和隐私权交还给你。

  • Speed and Peace of Mind: All data is first stored on your device. You can access and edit all your notes at lightning speed, whether you are online or not. This design not only gives you an unparalleled smooth experience but also fundamentally ensures data privacy.

  • 速度与安全感:所有数据首先存储在你的设备上。无论在线与否,你都能飞快地访问、编辑所有笔记。这种设计不仅带给你无与伦比的流畅体验,更从根本上保证了数据的私密性。

  • More Than Just Text: Inspiration shouldn't be limited by format. In addition to a powerful Markdown editor, Daylo also offers an infinite canvas and mind mapping. Whether you're doodling, drawing diagrams, or organizing complex logical relationships, you can do it all in one place.

  • 不止于文字:灵感不应被格式所限。除了强大的 Markdown 编辑器,Daylo 还提供无限画布和思维导图。无论是随手涂鸦、绘制图表,还是梳理复杂的逻辑关系,你都能在同一个地方完成。

  • Your Data, Your Rules: You can use Daylo purely locally and enjoy a 100% offline experience. At the same time, we also provide an optional cloud synchronization feature based on Firebase, allowing you to switch seamlessly between different devices and provide a secure cloud backup for your data.

  • 你的数据,你做主:你可以纯粹在本地使用 Daylo,享受 100% 的离线体验。同时,我们也提供了基于 Firebase 的可选云同步功能,让你在不同设备间无缝切换,并为数据提供一个安全的云端备份。

(It is recommended to add a GIF animation here showing the core functions of the application, such as switching between Markdown, canvas, and mind mapping) (建议在此处添加一张展示应用核心功能,如 Markdown、画布、思维导图切换的 GIF 动图)


✨ Core Features

✨ 核心特色

  • 📝 Powerful Markdown Editor

  • 📝 强大的 Markdown 编辑器

    • Supports GitHub Flavored Markdown (GFM) standard syntax.
    • 支持 GitHub Flavored Markdown (GFM) 标准语法。
    • Provides a What You See Is What You Get editing experience, allowing you to focus on content creation.
    • 提供所见即所得的编辑体验,让你专注于内容创作。
    • Use slash commands to quickly insert elements and improve writing efficiency.
    • 通过斜杠命令(Slash Commands)快速插入元素,提升写作效率。
  • 🎨 Infinite Canvas

  • 🎨 无限画布

    • Freely draw, doodle, and take notes without being constrained by linear text.
    • 自由绘制、涂鸦、做笔记,不受线性文本的束缚。
    • An excellent tool for visual thinking, brainstorming, and class notes.
    • 是视觉思考、头脑风暴和课堂笔记的绝佳工具。
  • 🧠 Structured Mind Mapping

  • 🧠 结构化思维导图

    • Easily create, organize, and visualize your ideas.
    • 轻松创建、组织和可视化你的想法。
    • Very suitable for project planning, study summaries, and organizing thoughts.
    • 非常适合用于项目规划、学习总结和思路梳理。
  • 🚀 Local-First Architecture

  • 🚀 本地优先架构

    • All operations are completed locally, with fast response and support for full offline use.
    • 所有操作在本地完成,响应迅速,支持完全离线使用。
    • Uses IndexedDB to store data, which is stable and reliable.
    • 使用 IndexedDB 存储数据,稳定可靠。
  • ☁️ Optional Cloud Sync

  • ☁️ 可选的云端同步

    • Real-time data synchronization between your various devices via Firebase.
    • 通过 Firebase 在你的各个设备之间实时同步数据。
    • Your notes can be easily restored even if you change devices.
    • 即使更换设备,你的笔记也能轻松恢复。
  • 📚 Efficient Organization

  • 📚 高效的组织方式

    • Categorize with notebooks, supports nesting.
    • 通过笔记本进行分类,支持嵌套。
    • Supports drag-and-drop to reorder notes and notebooks.
    • 支持拖拽调整笔记和笔记本的顺序。
  • ⏪ Version History and Comparison

  • ⏪ 版本历史与对比

    • Automatically records the modification history of notes, you can view or restore to a previous version at any time.
    • 自动记录笔记的修改历史,你可以随时查看或恢复到之前的版本。
    • Provides a visual comparison function, allowing you to clearly see the differences between two modifications.
    • 提供可视化对比功能,让你清晰地看到两次修改之间的差异。
  • 📱 PWA Support

  • 📱 PWA 支持

    • Can be installed on your computer or mobile phone like a native app, providing an immersive experience.
    • 可像原生 App 一样安装在你的电脑或手机上,提供沉浸式体验。
  • 🌗 Light and Dark Themes

  • 🌗 明亮与黑暗主题

    • Built-in exquisite light and dark modes to adapt to usage preferences in different environments.
    • 内置精致的明亮和黑暗模式,适应不同环境下的使用偏好。

🛠️ Tech Stack

🛠️ 技术栈

  • Frontend: React 19, TypeScript, Vite
  • 前端: React 19, TypeScript, Vite
  • UI/Styling: Tailwind CSS, Headless UI, Lucide React (Icons)
  • UI/样式: Tailwind CSS, Headless UI, Lucide React (图标)
  • Routing: React Router DOM
  • 路由: React Router DOM
  • Data Storage:
  • 数据存储:
    • Local: IndexedDB (idb wrapper)
    • 本地: IndexedDB (idb 封装)
    • Cloud: Firebase (Firestore, Authentication)
    • 云端: Firebase (Firestore, Authentication)
  • Markdown Parsing: remark, rehype
  • Markdown 解析: remark, rehype
  • PWA: vite-plugin-pwa
  • PWA: vite-plugin-pwa
  • Deployment: Vercel
  • 部署: Vercel

🚀 Getting Started

🚀 快速开始

Prerequisites

环境要求

  • Node.js (v18 or higher)
  • Node.js (v18 或更高版本)
  • npm or pnpm
  • npm 或 pnpm

Installation & Running

安装与运行

  1. Clone the repository

  2. 克隆仓库

    git clone https://github.com/yuchen1204/daylo.git
    cd daylo
  3. Install dependencies

  4. 安装依赖

    npm install
  5. Configure Firebase (Optional)

  6. 配置 Firebase (可选) If you need to use the cloud sync feature, please perform the following configuration: 如果你需要使用云同步功能,请进行以下配置:

    • Go to the Firebase Console to create a new project.
    • 前往 Firebase 控制台 创建一个新项目。
    • Enable Authentication (Google login provider is recommended) and Firestore Database in your project.
    • 在项目中启用 Authentication (推荐使用 Google 登录提供商) 和 Firestore Database
    • In the project settings, register a new web application to get your Firebase configuration information.
    • 在项目设置中,注册一个新的 Web 应用,获取你的 Firebase 配置信息。
    • Create a .env.local file in the project root directory and fill in your configuration:
    • 在项目根目录创建一个 .env.local 文件,并填入你的配置:
      VITE_FIREBASE_API_KEY=your_api_key
      VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
      VITE_FIREBASE_PROJECT_ID=your_project_id
      VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
      VITE_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
      VITE_FIREBASE_APP_ID=your_app_id
      

    You can also modify the configuration directly in the src/services/firebase.ts file, but this is not recommended for open source projects. 你也可以直接在 src/services/firebase.ts 文件中修改配置,但这不推荐用于开源项目。

  7. Start the development server

  8. 启动开发服务器

    npm run dev
  9. Build for production

  10. 构建生产版本

    npm run build

📄 License

📄 开源许可证

This project is open-sourced under the MIT License. 本项目基于 MIT 许可证开源。

About

Simple Note

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages