Write Down

A simple markdown blog app built with React.

The article in Write Down are using markdown to write. The markdown here is based on GFM, and it supports some additional features, like emoji, subscript, superscript and etc. (You can see those in the full feature example in Demo.)

README 中文

Table of Contents

• Motivation
• Demo
• Feature List
• Showcase
• Other resources
• Built with
• Scripts
• License
• Acknowledgements

Motivation

I want to make something that I have never made it before. Meanwhile, I want to practise what I learn from React by making Write Down.

Demo

Demo Link

Only after logging in, you can see the editing option and create a new article. The following is the testing account:

Article List

Article Reading Page

Feature List

Article System

• Edit article
  • Edit markdown
    • [x] Toggle editing and preview mode
    • [x] Sync scrolling of editing and preview panels
    • [x] Highlight the code of markdown according to its usage (I made the CodeMirror color theme)
    • [x] Prompt to save markdown after editing
    • [ ] Support some built-in snippets for markdown
  • Edit other elements
    • [x] Set the tags of article
    • [x] Set the title and excerpt of article
    • [x] Search the heading image based on keyword and set it (The heading image is also the cover of it in the article list)
    • [x] Preview the article info (Hovering on the info setting button)
• Manage article
  • [x] Create new article
  • [x] Publish article/save as draft
  • [x] Update article
  • [x] Removed article
• Export article
  • [x] Markdown file
  • [x] Styled HTML file
• Store article
  • [x] Local storage

User System

• [x] User login/logout (Now it only supports specified user to log in)

Showcase

Article List

User Login

Article Editing Page

Article Editing Other Header Buttons

Article Editing Info Setting

Article Editing Info Setting Photo Search

Other resources

• Some questions you may want to ask
• Data in Write Down - ProcessOn

Built With

• JS framework - React
• UI components - Ant Design
• State manager - Redux
• Front-end router - React-Router
• Text editor - CodeMirror
• markdown parser - markdown-it
• Code highlighting - Prism
• Local storage - PouchDB
• Photo search - Unsplash
• Photo display (like Pinterest) - react-stack-grid
• File export - File Saver
• Time transformation - DayJS

Scripts

Run

npm run start

Build

npm run build

License

MIT © Neven Leung

Acknowledgments

• The scroll-sync and toggling display mode features of article editing page are inspired by StackEdit.
• The photo search feature and the style of article reading page are inspired by Medium.