Publishing org-roam-ui #109
Replies: 15 comments 43 replies
-
|
Honestly I'd imagined it would look just like my website now (https://braindump.jethro.dev/) but with a tab to access the graph and to navigate with it. I gave this an attempt briefly and it worked somewhat, but needed to change some things (e.g. removing the websocket related code from the graph). I don't know if you ever intend to be able to parse and load Org files in the graph, but it looks like you can simply glue together the work by @rasendubi on org-braindump (https://org-braindump.vercel.app/) and the work already done here.
|
Beta Was this translation helpful? Give feedback.
-
|
Parsing and viewing org-files was added a couple of days ago actually! Cool, that aligns with what I'm thinking as well. Some people expressed some interest in being able to use the graph as a separate thing but I don't think it's realistic to be able to do accommodate so many different workflows. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
Being able to statically export the graph would be very welcome, but if so I'd also really like the ability to exclude specified directories within the org-roam directory. I'd rather not include my journal, among other things, in the export if possible. |
Beta Was this translation helpful? Give feedback.
-
|
A use case that I've got in mind would be an archive for a influential French philosophical/psychoanalytical magazine from the 1970s, which involved a lot of concepts, projects and people that could each be a node. Basically, I wouldn't want to expose any editing capabilities or reference to emacs, just have the interactive node graph and pages for each node 'set in stone' for publishing as a static site. Everything would be put together by an editor locally and then pushed to a Github Pages or Netlify, etc. Also a search function would be really helpful. Would be amazing if something like that was possible! |
Beta Was this translation helpful? Give feedback.
-
|
Hi,
However, I found that util/webSocketFunctions.js performs the AJAX calls, however I am unsure how to proceed from here. Best regards, |
Beta Was this translation helpful? Give feedback.
-
Hey thanks for this tremendous effort! Could you please provide steps for publishing it on github pages? I successfully exported the site as you mentioned above but I think I put the "out" file in a wrong place. All my javascript files are missing when I look at the concole in my browser. Even though I put the "out" folder content as is. Here is my broken page. and here is my repo of gh page. I know I'm missing a simple detail but I never worked with javascript before. Any suggestion would be helpful thanks! |
Beta Was this translation helpful? Give feedback.
-
+1 for fundraising (for a static, 100% JavaScript-free version) |
Beta Was this translation helpful? Give feedback.
-
Considering this thread is about exporting the org-roam-ui graph, which uses JavaScript quite exstensively, I think a JavaScript-free version is rather out of scope for how much work would be involved to make an exporter that produces a usable result. And it's not like JavaScript is evil or anything, you can use HTML and CSS for bad things too, it's just a matter of how it's implemented. Personally, I am perfectly fine with a JavaScript based graph and thought it was somewhat implicit in regards to what the thread is discussing. |
Beta Was this translation helpful? Give feedback.
-
|
While I would love a 100% javascript-free version, first I'd like to avoid org-roam export being vaporware and have the javascript version in hand 😄 |
Beta Was this translation helpful? Give feedback.
-
|
I'm very much in favour of a version of org-roam-ui that can be made available on the web so that org-roam users can publish their maps. Unless there is some fundamental problem with the Javascript version (which i doubt), then I would be very much in favour of sticking with the technology that is already working. |
Beta Was this translation helpful? Give feedback.
-
|
Hello All I would like to be able to publish the concept map. Ideally this would be pretty much like giving web users the ORUI screen, but of course it wouldn't be connected to Emacs. I found this thread. I'm not entirely sure if what is being discussed is what I'm envisaging. The discussion is a bit web technical for this C++ programmer, and I may not have understood everything. It mentions a 'static' site, but the ORUI screen itself is of course very much dynamic / interactive. Perhaps what I envisage could be done with a 'point and clicky' graph component embedded in an otherwise static web page.
Any thoughts much appreciated. PS: you can see my project here: https://www.simsoup.info/SimSoup/News.html |
Beta Was this translation helpful? Give feedback.
-
|
So does any body know how to publish the org-roam-ui? |
Beta Was this translation helpful? Give feedback.
-
|
As far as I'm aware, the closest as of yet is the one @savolla provided further up the thread. |
Beta Was this translation helpful? Give feedback.
-
the node preview function is good enough for a static web site even without the graph view.Hope one day devs have time to add export function |
Beta Was this translation helpful? Give feedback.
-
|
It's a refreshing and necessary feature. It means that I can use my mobile phone to review and learn knowledge points anytime and anywhere. |
Beta Was this translation helpful? Give feedback.
-
|
I am using my forked repo with addition of implementing publishing to github. I don't know elisp, so the implementation is not appropriate, but it seems to work fine. my example page: https://o8vm.github.io/ |
Beta Was this translation helpful? Give feedback.
-
|
That looks pretty great, thanks for sharing! I wouldn't worry too much about using elisp only for this if there's some other language that fits better. |
Beta Was this translation helpful? Give feedback.
-
|
That is awesome! Thanks so much for getting something working and providing the code to replicate it 😍 |
Beta Was this translation helpful? Give feedback.
-
|
Yes. Brilliant - Thanks Hayato. The next problem for me is to figure out how to use it. I am an Emacs user and C++ programmer, but I have no idea how to run the github actions mentioned. I'll probably figure it out eventually, but in the meantime any pointers would be really helpful. A link to a relevant reference manual would probably be enough to get me started. |
Beta Was this translation helpful? Give feedback.
-
|
This is wonderful! However, github pages seems to be unable to properly load the _next/css directory. Any ideas why that might be the case? I'm also curious what the files that are generating the html and static js files into /out are |
Beta Was this translation helpful? Give feedback.
-
|
Hey, thanks for that. I did a small script to filter the nodes by a list of tags, it is very manual now, later when I try to automatize the process I will try to filter it in elisp instead of filtering the json (use org-roam-ui-export in this root) The files are package.json {
"name": "filter-nodes",
"version": "1.0.0",
"description": "",
"main": "filter.ts",
"scripts": {
"filter": "ts-node src/filter.ts -- "
},
"author": "Laura Viglioni",
"dependencies": {
"@types/ramda": "^0.29.1",
"fp-ts": "^2.14.0",
"ramda": "^0.29.0",
"ts-node": "^10.9.1"
},
"devDependencies": {
"@types/node": "^20.0.0"
}
}tsconfig.json {
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "node",
"declaration": true,
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"target": "ES2019",
"lib": ["ES2019"],
"sourceMap": true,
"outDir": "./dist",
"incremental": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"strict": true
},
"include": ["./src/**/*", "./test/**/*"],
"exclude": ["node_modules"]
}and the src/filter.ts file import * as f from 'fp-ts/lib/function'
import * as R from 'ramda'
import graphdata from '../graphdata.json'
import * as fs from 'fs'
type DataNode = {
tags: (string | null)[]
properties: {
CATEGORY: string
ID: string
BLOCKED: string
ALLTAGS: string
FILE: string
PRIORITY: string
ITEM: string
}
}
type DataLink = {
type: string
target: string
source: string
}
type GraphData = {
type: string
data: {
nodes: DataNode[]
links: DataLink[]
tags: string[]
}
}
const graph = graphdata as GraphData
const tags = R.drop(3, process.argv)
const nodeHasAtLeastOneTag =
(tags: string[]) =>
(node: DataNode): boolean =>
f.pipe(
node.tags,
R.map(nodeTag => nodeTag !== null && tags.includes(nodeTag)),
bools => bools.some(Boolean),
)
const filterByTags = (tags: string[]): GraphData => {
const nodesLens = R.lensPath<GraphData, DataNode[]>(['data', 'nodes'])
return f.pipe(
graph,
R.view(nodesLens),
A.filter(nodeHasAtLeastOneTag(tags)),
nodes => R.set(nodesLens, nodes, graph),
)
}
fs.writeFile(
'./graphdata.json',
JSON.stringify(filterByTags(tags)),
'utf8',
() => console.log('finished!'),
)Usage:
For instance, for my math files |
Beta Was this translation helpful? Give feedback.
-
|
As expected, it was easier with elisp Created this function to get the nodes already filtered by a list of tags (defun org-roam-ui--get-nodes-by-tags (&optional tags)
"Return all nodes that contain at least one tag in TAGS."
(if tags
(eval
`(org-roam-db-query [:select [id
file
title
level
pos
olp
properties
(funcall group-concat tag
(emacsql-escape-raw \\\, ))]
:as tags
:from nodes
:left-join tags
:on (= id node_id)
:where (in tag [,@tags])
:group :by id]))
(org-roam-ui--get-nodes)))and use it in the existing functions: (defun org-roam-ui--make-graphdata (&optional tags) ;; added tags here
"Get roam data and make JSON."
(let* ((nodes-names
[id
file
title
level
pos
olp
properties
tags])
(old (not (fboundp 'org-roam-db-map-citations)))
(links-db-rows (if old
(org-roam-ui--separate-ref-links
(org-roam-ui--get-links old))
(seq-concatenate
'list
(org-roam-ui--separate-ref-links
(org-roam-ui--get-cites))
(org-roam-ui--get-links))))
(links-with-empty-refs (org-roam-ui--filter-citations links-db-rows))
(empty-refs (delete-dups (seq-map
(lambda (link)
(nth 1 link))
links-with-empty-refs)))
(nodes-db-rows (org-roam-ui--get-nodes-by-tags tags)) ;; used function here
;; ... rest of the function and here (defun org-roam-ui-export (&optional tags) ;; added tags here
"Export `org-roam-ui's-data for usage as static webserver.
Get only nodes that has at least one tag of TAGS.
If none is provided, get all nodes."
(interactive "sTags to filter: "). ;; and here
(let* ((dir (read-file-name "Specify output directory:"))
(graphdata-file (concat (file-name-as-directory dir) "graphdata.json"))
(notes-dir (concat (file-name-as-directory dir) "notes/")))
(org-roam-ui--export-graphdata graphdata-file
(and (not (string= "" tags)) (split-string tags " "))) ;; and here
(make-directory notes-dir :parents)
(mapcar (lambda (id)
(let* ((cid (car id))
(content (org-roam-ui--get-text cid)))
(write-region content nil (concat notes-dir cid) 'append)))
(org-roam-db-query "select id from nodes;")))) |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the snippet. I implemented these changes with few changes barslmn@689c1cb. Best, B |
Beta Was this translation helpful? Give feedback.
-
|
Hi, thanks for the effort to all and @jgru. I got your version up and running. One thing, that i think that would be cool is to have it work with existing org-publish functions and have it linked somehow? Edit 22062023: I consolidated changes made by @jgru, @viglioni and @o8vm and added some (very, very) non-optimal stuff of my own. But, I can export with a single command. It reads the publish directory and tags to publish with (which also filters the note files too) and path to this repo from variables. I still couldn't find a way to bind the orui export to org-publish-all. I noticed again that org-publish has the project-alist while fiddling. Maybe it can be an entry in this project-alist something like this: |
Beta Was this translation helpful? Give feedback.
-
|
nice :)) I will try later one thing that happened to me on the way i was doing is some of the nodes aren't clickable, idk why |
Beta Was this translation helpful? Give feedback.
-
|
Very late to the party. But I already added new patchsets to improve the exported app. This can be seen at my website https://zettelkasten.uncomfyhalomacro.pl/ You can see the branch here https://github.com/uncomfyhalomacro/org-roam-ui/tree/feature/add-export-functionality This is an improvement from @jgru with slight modifications after reading some code. My next plan is to rewrite and add the elisp function |
Beta Was this translation helpful? Give feedback.
-
|
I tried reproducing it with the Then I ran |
Beta Was this translation helpful? Give feedback.
-
|
@akash-g0807 I think I missed something in my previous comment. The relevant line Did you see this when you exported? Running the script |
Beta Was this translation helpful? Give feedback.
-
|
Hello, Yes, when I export, I get the following And when I run I get the following tree But when I run I attached the image the following way in my org document
Did you attach the image some other way, using org-download or something?? Many thanks |
Beta Was this translation helpful? Give feedback.
-
|
looking at your stuff... it means your images are in not locally exported. i believe if i do
hmm i believe u have to add those images to e.g. |
Beta Was this translation helpful? Give feedback.
-
|
Hello, That makes sense. Using URL's worked. I like to have local images incase the images get taken down but this is fine for now Many thanks for helping out |
Beta Was this translation helpful? Give feedback.
-
|
This would be a great addition for many of us. I used to use mind maps instead of presentations in slides and after org-roam and org-oram-ui, I have switched to this. But exporting them to standalone, static html would be ideal. Thank you to everyone who is working on this! Is there a potential timeline for this? |
Beta Was this translation helpful? Give feedback.
-
|
Give me a bit after valentines day. Thanks |
Beta Was this translation helpful? Give feedback.
-
|
Hello All I have produces a utility, Org-roam2html, that converts an Org-roam project to HTML. The Org-roam network is automatically drawn using Graphviz visualisation software which outputs SVG files. These are directly included in the HTML. There are two diagram views, Local and Extended. In addition to supporting diagrams and standard text, Org-roam2html also supports footnotes and citations. There is also a feature enabling some links to be excluded from diagrams but retained in the text where this helps clarity. You can see example diagrams and text at: https://www.simsoup.info/OoLMap/ool.html Any comments you may have are welcome! Chris Gordon-Smith |
Beta Was this translation helpful? Give feedback.
-
|
Hello All An updated release of the utility Org-roam2html that converts an Org-roam project to HTML is available at: You can see example diagrams and text at: https://www.simsoup.info/OoLMap/ool.html Any comments, questions or bug reports welcome! Chris Gordon-Smith |
Beta Was this translation helpful? Give feedback.
-
|
Referring to #109 (comment), I am creating Actions that generating a static site from org and db files managed on GitHub. It's still in the process of creation and not great, but if you want to do something similar, please give it a try. |
Beta Was this translation helpful? Give feedback.
-
It would be really cool if you were able to click a button (or run a function in emacs) and generate a static site of org-roam-ui.
This should not be that difficult to make work hackily, but I would like to explore what kind of expectation people would have for such functionality. I obviously can't account for all workflows, but I would like to at least accommodate the most common usecases, so please share what kind of functionality you would like to see here!
I've got some ideas from this discussion on reddit, but I still need your input!
@jethrokuan you were the first to propose this, do you have any specific ideas about what this would look like?
Beta Was this translation helpful? Give feedback.
All reactions