Hot-Reloading Feature Implementation

mohamedsalem401 commented 11 months ago

Overview

The "flowershow" project currently lacks hot-reloading when editing files in the content directory. This issue is for planning and tracking the implementation of this feature.

Proposed Changes

I am working on implementing hot-reloading in the "markdowndb" library using "chokidar.js." The proposed changes include:

[x] Using chokidar.js
[x] Utilize the --watch flag to initially index the folder and continuously monitor it for file changes.
[x] Compare changes with the existing data, updating only the modified sections.
[x] Achieve hot-reloading upon adding, editing, or deleting files, tags, or links.
[x] Maintain a list of broken links and exclude them from the database.
[x] If a new file matches the path of a broken link, move this matching link from the broken list to the functioning list and add the new file to the database.
[x] Update documentation
[x] Update tests

Two approaches for "flowershow" to refresh the page after changing the markdown.db file

There are two potential approaches for refreshing the file content when changes occur. I would need to discuss these approaches and decide upon them.

[ ] Exclusively during the development phase, introduce a WebSocket server to enable real-time content updates whenever files change.
[ ] Alternatively, during development only, implement client-side data fetching at regular intervals (e.g., every 5 seconds). In production, data fetching will continue to occur on the server side.

Here's a demo of the hot-reloading:

https://github.com/datopian/flowershow/assets/67981832/3b663a57-f562-4332-be88-080f34a74002

rufuspollock commented 11 months ago

@mohamedsalem401 this is great - as per thread on discord. You could also paste your video here!

In the first instance i'd implement the automatic rebuild in markdowndb and then evaluate where we are - e.g. it may be that works quite well even without a rebuild on nextjs side.

mohamedsalem401 commented 8 months ago

FIXED. https://github.com/datopian/flowershow/pull/620

datopian / flowershow