An open API service indexing awesome lists of open source software.

https://github.com/bonniesimon/preview-mark

Just a side project to write, render, preview and share Markdown🗒
https://github.com/bonniesimon/preview-mark

hacktoberfest marked-js reactjs tailwind-css typescript

Last synced: 4 days ago
JSON representation

Just a side project to write, render, preview and share Markdown🗒

Awesome Lists containing this project

README

        

# Preview-mark

PreviewMark enables you to write, render, preview and share the markdown that you write.
**Work in progress 👷**

## Learnings

- Configuring a React project using Typescript
- Using typescript for react
- Using TailwindCSS to create UI's.
- HTML converts multiple newline into a single whitespace. This doesn't allow use to use newline in textarea and use it for the preview since HTML converts the newlines into whitespace. [source](https://stackoverflow.com/questions/29574876/line-breaks-not-working-in-textarea-output)
- Adding custom renderer to *marked*. This was required since tailwind defaults all the heading tags. Used the [docs](https://marked.js.org/using_pro#use) of *marked*.
- Using localStorage to persist browser state
- Solved the gh-pages issue with react-router using [source](https://medium.com/@Dragonza/react-router-problem-with-gh-pages-c93a5e243819)
- Learned about the usecase of HashRouter. And the incompetence of react routing which creates confusion between server side and client side routing.

## Tech Stack

**Client:** React+Typescript, TailwindCSS
**API:** Deta Micro


## Authors

- [@bonniesimon](https://www.github.com/bonniesimon)