logseq-publish icon indicating copy to clipboard operation
logseq-publish copied to clipboard

Question: Static build of logseq via converting SPA

Open Xuanwo opened this issue 3 years ago • 7 comments

This issue is a follow up of https://github.com/pengx17/logseq-publish/issues/32

Hi, I'm not familiar with the front end.

Is it possible to convert the SPA to static sites?

For example:

  • https://note.xuanwo.io/#/page/rust => https://note.xuanwo.io/rust

Xuanwo avatar May 21 '22 04:05 Xuanwo

I guess you what you proposed is to pre-build each pages as static pages and so that they can be visited via file paths? The issue is that the real content of each page will still be empty when arrived at the user side, since React have not started rendering yet.

There is a common strategy which is called SSR in React eco-system, which takes any SPA rendering into in two passes, one in the server and another one (which is called hydration) in the browser client (to bind event handlers etc). However this solution requires some serious changes in the Logseq codebase. I am not sure what issues will be surfaced because most SSR apps are building with frameworks like Next.js; enabling SSR without a framwork is in fact an error prone task.

I guess another solution might be:

  • running an Logseq instance
  • crawling every pages in Playwright
    • also make sure the page finishes rendering, and there is no lazily rendered content

pengx17 avatar May 21 '22 05:05 pengx17

crawling every page in Playwright

Based on your experience, is it challenging to implement it?

Xuanwo avatar May 21 '22 06:05 Xuanwo

Based on your experience, is it challenging to implement it?

I would say it is more alike simulating SSR outside of the codebase. In the client side, the browser still needs to bind event listeners etc. It is still very challenging, I guess even more chanlleging than implement a new parsing/rendering strategy from the ground up.

pengx17 avatar May 21 '22 08:05 pengx17

It is still very challenging, I guess even more chanlleging than implement a new parsing/rendering strategy from the ground up.

Sad.

Logseq's publish is really sucking- -

I don't know how could they achieve the vision with current publishing.

A local-first, non-linear, outliner notebook for organizing and sharing your personal knowledge base.

To me, everyone who visits note.xuanwo.io has to download the whole database (700KiB for db, 1.5MiB for main.js). Not to mention SEO, RSS and Sitemap...

Xuanwo avatar May 21 '22 08:05 Xuanwo

A year ago one member of the Logseq team was working on it, but the work has been suspended ever since. I believe they still have the eadger to make a lightweight publish solution, but they do not have the resource at the moment.

pengx17 avatar May 21 '22 08:05 pengx17

Logseq's publish is really sucking- -

After trying other similar products (RoamResearch, Obsidian, TiddlyWiki, Notion, ...), I have to admit that LogSeq is still the best choice for me. This fact makes me even angrier: Why I don't understand Clojure, Javascript...

Xuanwo avatar May 22 '22 16:05 Xuanwo

Logseq's publish is really sucking- -

After trying other similar products (RoamResearch, Obsidian, TiddlyWiki, Notion, ...), I have to admit that LogSeq is still the best choice for me. This fact makes me even angrier: Why I don't understand Clojure, Javascript...

I believe it will come eventually, but not right now ...

pengx17 avatar May 23 '22 01:05 pengx17

I'm not interested in this issue, let's close.

Xuanwo avatar Sep 15 '22 13:09 Xuanwo

Hi all, thought I'd mention what I'm working on as it's relevant to this question.

I also wanted to move away from a single-page application and use a static site generator, and additionally I wanted to decouple the UI of my published notes from Logseq's UI, but still maintain all the structure from Logseq (block references, backlinks, etc). So I am working on this publishing flow:

  1. Extract complete JSON of Logseq notes
  2. Use a script to convert the public pages and blocks in the JSON to a Hugo friendly structure of files
  3. Publish with Hugo

I am currently trying to modify the Github Action in this repo to handle step 1 (on my local machine I'm using https://github.com/cldwalker/logseq-query which works well but wasn't easy for me to set up on a server since it seems to require the desktop version of Logseq?). Steps 2 and 3 I have working remotely. I'm using this system to publish my notes here: https://denizay.org.

Let me know if you have questions or want to support any flow like this down the line, I'd be happy to discuss it. And thanks for your work on your publishing flow, it's been great!

daydemir avatar Sep 18 '22 14:09 daydemir

@daydemir Hi, thanks for sharing your interesting approach!

pengx17 avatar Sep 19 '22 06:09 pengx17

@daydemir Hi, thanks for the sharing, and your website looks beautiful!

(on my local machine I'm using https://github.com/cldwalker/logseq-query which works well but wasn't easy for me to set up on a server since it seems to require the desktop version of Logseq?)

You can use https://github.com/logseq/nbb-logseq to parse the blocks (db) from markdown/org files without requiring the desktop app. This is an example to build a db from files and enable queries remotely.

tiensonqin avatar Sep 19 '22 06:09 tiensonqin

@daydemir https://github.com/logseq/graph-validator is another good example as it demonstrates using nbb-logseq from a github action. You may also be interested in https://github.com/dom8509/logseq-to-markdown which is using nbb-logseq to export to hugo. Also Durham represent 😄

logseq-cldwalker avatar Sep 19 '22 14:09 logseq-cldwalker

@tiensonqin @logseq-cldwalker thanks so much for these pointers! I didn't know about nbb-logseq, will take a look at that and the graph-validator.

I also hadn't seen this specific md conversion before so I'll need to take a look (looks like it might be related to logseq-schrodinger), but everywhere I've seen conversions to md files for Hugo it misses a couple things that I wanted to support:

  • Unique urls for blocks
  • Showing block references

This requires a pretty specific md file structure for Hugo. For example, here is a link to a block on one of my pages, you can see the breadcrumbs for that block and the references to that block (you can see that it uses the Logseq block UUID as the url for the block): https://denizay.org/graph/building-a-knowledge-graph-in-logseq/6279582c-50d4-45fd-8074-14d506e7520f/. Some sort of block-level permalink is an interesting prototype for one day linking across different people's knowledge graphs...

I still need to improve a bunch of the interactions and UI but this basic organization is working. When I get this flow stable I'll publish it more formally and see if there are other ways to improve it too, or see if these other Logseq publishing tools could integrate this flow.

Durham, renowned around the world... 😃

daydemir avatar Sep 19 '22 19:09 daydemir