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.)
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.
Only after logging in, you can see the editing option and create a new article. The following is the testing account:
| username | password |
|---|---|
| test | 123456 |
Article List
Article Reading Page
- Edit article
- Edit markdown
- Toggle editing and preview mode
- Sync scrolling of editing and preview panels
- Highlight the code of markdown according to its usage (I made the CodeMirror color theme)
- Prompt to save markdown after editing
- Support some built-in snippets for markdown
- Edit other elements
- Set the tags of article
- Set the title and excerpt of article
- Search the heading image based on keyword and set it (The heading image is also the cover of it in the article list)
- Preview the article info (Hovering on the info setting button)
- Edit markdown
- Manage article
- Create new article
- Publish article/save as draft
- Update article
- Removed article
- Export article
- Markdown file
- Styled HTML file
- Store article
- Local storage
- User login/logout (Now it only supports specified user to log in)
Article List
User Login
Article Editing Page
Article Editing Other Header Buttons
Article Editing Info Setting
Article Editing Info Setting Photo Search
- 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
Run
npm run start
Build
npm run build
MIT © Neven Leung