Skip to content

NevenLeung/write-down

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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:

username password
test 123456

Articles List

Article List


Article Reading Page

Article Reading Page

Feature List

Article System

  • 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)
  • 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 System

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

Showcase

Articles List

Article List


User Login

User Login


Article Editing Page

Article Editing Page


Article Editing Other Header Buttons

Article Editing Other Header Buttons


Article Editing Info Setting

Article Editing Info Setting


Article Editing Info Setting Photo Search

Article Editing Info Setting Photo Search

Other resources

Built With

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.