ikoamu / publish-org-roam-ui

Generates a static site for org-roam-ui from org-roam files managed on GitHub. And it is easy to publish to GitHub Pages.

🐄

publish-org-roam-ui's Issues

Action fails with Type 'string' is not assignalbe to type 'string[] | null.'

Thanks for writing and sharing this action going to be so useful to have the notes hosted on GitHub pages and updated when pushes are made.

I've had a go at setting things up but the action fails (full failed job log).

It may be an upstream issue but on reading carefully I think it might have something to do with the headers I have in my files as whilst the final reported error is as per the title (Type 'string' is not assignable to type 'string[] | null'.) I see there are a number of fields that are undefined (TITLE, FILE, CTIME, MTIME, ROAM_ALIASES and 4 more, one of which I can hazard a guess will be FILETAGS).

./pages/index.tsx:351:23
Type error: Argument of type '{ nodes: ({ tags: string[]; properties: { CATEGORY: string; CTIME: string; MTIME: string; ID: string; BLOCKED: string; ALLTAGS: string; PRIORITY: string; ITEM?: undefined; FILE?: undefined; ROAM_ALIASES?: undefined; ... 4 more ...; TITLE?: undefined; }; ... 5 more ...; id: string; } | ... 18 more ... | { ...; })[]; ...' is not assignable to parameter of type 'OrgRoamGraphReponse'.
  Types of property 'nodes' are incompatible.
    Type '({ tags: string[]; properties: { CATEGORY: string; CTIME: string; MTIME: string; ID: string; BLOCKED: string; ALLTAGS: string; PRIORITY: string; ITEM?: undefined; FILE?: undefined; ROAM_ALIASES?: undefined; ... 4 more ...; TITLE?: undefined; }; ... 5 more ...; id: string; } | ... 18 more ... | { ...; })[]' is not assignable to type 'OrgRoamNode[]'.
      Type '{ tags: string[]; properties: { CATEGORY: string; CTIME: string; MTIME: string; ID: string; BLOCKED: string; ALLTAGS: string; PRIORITY: string; ITEM?: undefined; FILE?: undefined; ROAM_ALIASES?: undefined; ... 4 more ...; TITLE?: undefined; }; ... 5 more ...; id: string; } | ... 18 more ... | { ...; }' is not assignable to type 'OrgRoamNode'.
        Type '{ tags: string[]; properties: { CATEGORY: string; ID: string; BLOCKED: string; ALLTAGS: string; PRIORITY: string; ITEM: string; CTIME?: undefined; MTIME?: undefined; FILE?: undefined; ROAM_ALIASES?: undefined; ... 4 more ...; TITLE?: undefined; }; ... 5 more ...; id: string; }' is not assignable to type 'OrgRoamNode'.
          Types of property 'olp' are incompatible.
            Type 'string' is not assignable to type 'string[] | null'.

  349 |   useEffect(() => {
  350 |     if (!graphData) {
> 351 |       updateGraphData(graphDataJson.data)
      |                       ^
  352 |       return
  353 |     }
  354 |     currentGraphDataRef.current = graphData
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
yarn run v1.22.22
$ next export -o standalone/out/
info  - Loaded env from /home/runner/work/org-roam/org-roam/ui/.env
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
info  - using build directory: /home/runner/work/org-roam/org-roam/ui/build
Error: Could not find a production build in the '/home/runner/work/org-roam/org-roam/ui/build' directory. Try building your app with 'next build' before starting the static export. https://nextjs.org/docs/messages/next-export-no-build-id
    at /home/runner/work/org-roam/org-roam/ui/node_modules/next/dist/export/index.js:158:19
    at async Span.traceAsyncFn (/home/runner/work/org-roam/org-roam/ui/node_modules/next/dist/telemetry/trace/trace.js:60:20)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
patching file ../pages/index.tsx
Hunk #2 succeeded at 347 (offset 1 line).
Hunk #3 succeeded at 429 (offset 1 line).
patching file ../util/uniorg.tsx
Hunk #1 succeeded at 37 (offset 1 line).
patching file ../components/Sidebar/Link.tsx
Hunk #1 succeeded at 151 (offset -1 lines).
patching file ../components/Sidebar/OrgImage.tsx
patching file ../components/Tweaks/Behavior/BehaviorPanel.tsx
patching file ../components/contextmenu.tsx
Run touch ./standalone/out/.nojekyll
touch: cannot touch './standalone/out/.nojekyll': No such file or directory
Error: Process completed with exit code 1.

The MTIME and CTIME stem from use of org-roam-timestamps and I'll typically set #+TITLE: and #+FILETAGS: in every file to aid categorisation and finding things, e.g.

:PROPERTIES:
:ID:       0e6300c6-7025-4f45-820d-4d9da82b41a6
:mtime:    20240304160438 20240302204630 20240121200503 20240121115714 20240107103825 20231219213305 20231126221347 20231121204845 20231120130321 20231015172332 20231005133759 20230926220759 20230917083604 20230905212306 20230724174038
:ctime:    20230724174038
:END:
#+TITLE: Linux
#+FILETAGS: :linux:computing:foss:opensource:

Types for TITLE and FILETAGS should be strings MTIME and CTIME notionally strings but they could perhaps be Date() (not too hot on TypeScript I'm afraid).

org-cite pages not linking

Hi my repo can be found at https://github.com/MElemental/MElemental.github.io
and the page here:
https://melemental.github.io/#6e922ae1-6967-4ba7-b96b-972e006bab3b

Expected Behavior

org-cite links to corresponding org-mode file if it exists. the original org-roam-ui does this.

Actual Behavior

org-cite links don't link on publish-org-roam-ui and the pages of the citations become orphaned.
It might have to do with some lack of association to the .bib file
my bib file can be found at
https://github.com/MElemental/MElemental.github.io/blob/main/references/zoteromain.bib

Org-verbatim style

I noticed that only the org-code had a special inline style, however the org-verbatim didn't have it. The src looks like that:

~chroot~ 需要指定根目录（也就是 =mnt= ）和要运行的命令，这个命令是在新的根文件系统下的。

The deployment results looks like that:

The =mnt= is same as normal text.

Is it convenient to add a style for org-verbatim to distinguish it? Thanks for your development.

Select search results by tab or enter key.

[feature request] Import/Export settings

would it be possible to add import/export buttons to the settings menu? A possible extension to this would be presets for the settings.

Disappearing Images: Not allowed to load local resource

After one of the recent pushes, I realized that the images in the org-mode's were not displaying properly. After opening the browser console, the following error is reported:

Not allowed to load local resource: file:///img/2024-04-11_08-19-52_screenshot.png

The link corresponding to this image looks like this in org-mode:

[[file:img/2024-04-11_08-19-52_screenshot.png]]

I'm guessing it's because of the file: words in the link. Because when I change the link to the following form, it displays the image properly:

[[img/2024-04-11_08-19-52_screenshot.png]]

But since I utilize org-download to download images, my links to images are basically in the form of [[file:xxxx]].

Do you have any idea how to make the link with the word file work, as it did before. The link I'm testing with is this one. By the way, your URL function works really well!

It doesn't matter if for some reason the fix doesn't work, I can replace all links without file and set org-download to not use file. Thanks for your continued development of this project!

Focus search results

#4 (comment)

Application error: a client-side exception has occurred

The generated website loads correctly, but after a few clicks the following error appears:

Application error: a client-side exception has occurred (see the browser console for more information).

The generated website loads correctly, but after a few clicks the following error appears: If we go to the console it shows us this error in several lines:

TypeError: a.slice is not a function

Thks

image with attachment link does not work

When a page with attachment link is rendered (from graph or link preview), the page would crash, showing Application error: a client-side exception has occurred (see the browser console for more information). In console it says TypeError: Arguments to path.join must be strings

example:
https://hermanhel.codeberg.page/braindump-ui/#655c0a49-1b15-431f-ba4d-aebc87b90bd2

context:

• It works perfectly in org-roam-ui locally
• I think that the probelmatic path.join should be in https://github.com/rasendubi/uniorg/tree/master/packages/uniorg-attach, as in there it is possible to have only number as a node in path /65/5c....

Add style for table and inline code

org-roam-ui doesn't seem to have sytle configured for table and code, so I added the following code to any css file in the path /org-roam-ui/out/_next/static/css/.

table {
    border-style: hidden;
}

th, tr, td {
    padding: 0px 4px;
    border-width: 1px;
    border-color: gray;
    border-style: dashed;
}

code.inline-code, code.inline-verbatim {
    border-radius: 5px;
    border: 1px solid #BCBEC0;
    padding: 2px;
}

It has the following effects:

table

code

Can you add this to your fork's org-roam-ui? I can also accept that you don't have to make any changes, because the way I do it, I modify the out folder directly, without modifying the source code. Or maybe you want to be as consistent as possible with upstream. I fully understand and respect your decision!

Thank you for maintaining this action!

Search feature

search for nodes based on their titles or contents

Inhibit the uncorrect subsript

org-roam-ui treats all strings followed by "_" as subscripts.

the source org-mode is

But showed like that

Search feature performance improvement

Hi and thanks again for all your work on this great project.

I have an org-roam dataset of about 3700 nodes and I can notice the search feature is having quite a hard time when trying to do live completion.

I have looked at the way it is currently done and if I am correct there is code that generates a JSON file with all the entries (generate_searchdata.mjs). Then the search feature will use the JSON file to do its live completion.

I was wondering if we could improve the performances by using the binary version of the JSON format, i.e. BSON file format instead.

It seems there is a JS library available to do this.

    import BSON from 'bson';
//...
    const bsonData = BSON.serialize(searchData);

You can test my network of nodes at https://elitedangereuse.github.io/LoreExplorer/ and check the search performances there.
Other than the search feature, the rest is super smooth.

This is just a suggestion, and you might come up with a far better implementation.

I was also considering the use of a xapian index and I can see there is a Node implementation of it: https://github.com/mtibeica/node-xapian#readme

Thanks a lot for considering this improvement.

Context menu value for `--menu-bg` is overridden as `#fff` instead of the value of the theme

Hi and thanks for this awesome GitHub action!

The default CSS provides a context menu with white background and light grey text which is very hard to read and differs from the original org-roam-ui chakra CSS.

Expected output:

It seems the background value is set to var(--menu-bg) in the chakra-menu__menuitem class. So far, so good.

.css-18esm8n {
	text-decoration: none;
	color: inherit;
	user-select: none;
	display: flex;
	width: 100%;
	-moz-box-align: center;
	align-items: center;
	text-align: start;
	flex: 0 0 auto;
	outline: transparent solid 2px;
	outline-offset: 2px;
	padding-top: var(--chakra-space-1-5);
	padding-bottom: var(--chakra-space-1-5);
	padding-inline-start: var(--chakra-space-3);
	padding-inline-end: var(--chakra-space-3);
	transition-property: var(--chakra-transition-property-background);
	transition-duration: var(--chakra-transition-duration-ultra-fast);
	transition-timing-function: var(--chakra-transition-easing-ease-in);
	background: var(--menu-bg);
}

It seems the --menu-bg value is defined to --chakra-colors-gray-100

.css-18esm8n:focus, .css-18esm8n[data-focus] {
	--menu-bg: var(--chakra-colors-gray-100);
}

This value seems to be overridden for the chakra-menu__menu-list.
Here --menu-bg is set to #fff;

.css-q87w88 {
	outline: transparent solid 2px;
	outline-offset: 2px;
	--menu-bg: #fff;
	--menu-shadow: var(--chakra-shadows-sm);
	min-width: var(--chakra-sizes-3xs);
	padding-top: var(--chakra-space-2);
	padding-bottom: var(--chakra-space-2);
	border-radius: var(--chakra-radii-md);
	border-width: 1px;
	background-position-x: ;
	background-position-y: ;
	background-repeat: ;
	background-attachment: ;
	background-image: ;
	background-size: ;
	background-origin: ;
	background-clip: ;
	z-index: var(--chakra-zIndices-overlay);
	background-color: var(--chakra-colors-white);
	color: var(--chakra-colors-black);
	position: absolute;
	left: 1120px;
	top: 419px;
	font-size: var(--chakra-fontSizes-xs);
	box-shadow: var(--chakra-shadows-xl);
}

I was able to find such a mention in one of the js chunks in org-roam-ui/out/_next/static/chunks when I build with the local.sh script, but the --bg-menu value seems to be generated with some code as it is not directly present in the js file.

Should we add some new CSS definition into the index.html to unset these values for the chakra-menu__menu-list?
I'm not sure of the best way to proceed, as I'm not able to really find the source of this extraneous --bg-menu addition.

Thanks!

Image width

When I insert an image using [[[./img/test.png]] it adapts to the width of the tab so that it occupies the entire width of the tab. How can I set a maximum width for the image?

I tried inserting this but it doesn't work.

#+ATTR_HTML: :width 300px
[[./img/org-roam.png]]

Scrollbar in search modal is not displayed

Modify font size in code block

Change to 14px, the same as normal text.

The number of nodes displayed is less than the actual number of nodes.

Thanks for writing this Github Action, deploying org-roam-ui is very easy.

But it seems that I can only show 4 nodes, actually I have 5 nodes.

The 4 nodes:

I expected 5 nodes(Locally, it behaves normally.):

My repository is here. My deploy site is here. My config of org-roam at below. I used multiple browsers for testing and the results are not favorable.

(use-package org-roam
  :straight (:host github :repo "org-roam/org-roam"
                   :files (:defaults "extensions/*"))
  :custom
  (org-roam-directory "~/blog/source/roam/")
  (org-roam-db-location "~/blog/source/roam/org-roam.db")
  (org-roam-v2-ack t)
  (org-roam-completion-everywhere t)

  :bind (("C-c n l" . org-roam-buffer-toggle)
         ("C-c n f" . org-roam-node-find)
         ("C-c n g" . org-roam-graph)
         ("C-c n i" . org-roam-node-insert)
         ("C-c n c" . org-roam-capture)
         ;; Dailies
         ("C-c n j" . org-roam-dailies-capture-today))
  :config
  ;; If you're using a vertical completion framework, you might want a more informative completion interface
  (setq org-roam-node-display-template (concat "${title:*} " (propertize "${tags:10}" 'face 'org-tag)))
  (org-roam-db-autosync-mode)
  (setq org-roam-mode-sections
        (list #'org-roam-backlinks-section
              #'org-roam-unlinked-references-section
              ))
  ;; If using org-roam-protocol
  (require 'org-roam-protocol)
  )

Thanks again for developing this Action.

View all the TODOs in roam at once

Serve locally instead of on Github?

Hello and thank you for putting in the work to do this. I would like to check if it is possible to deploy/serve locally almost similar to org-roam-ui instead of onto Github. There are a couple of reasons I ask for this,

1. I tend to use org-roam-ui as a means of presentation nowadays, but when I wish to jump to a node through the browser, the lack of search means I need to switch to Emacs and then switch back to the browser. The search you have provided is a boon for this too.
2. Additionally, I have some notes that I would rather not have published externally, they are only for me to view (on the go as well). Therefore, I wish to publish it behind a simple .htaccess or a similar very elementary method. In order to do so, it would be nice to decouple it from publishing to github.

Support code highlighting

I think it could be supported on a static site.
org-roam/org-roam-ui#159

Give each node a specific url

Currently the entire org-roam-ui shares a single url, which makes it difficult to share a specific node like a blog. It would be much more efficient if each node was given a specific url.

This feature may not matter to local users, as there are good node search tools available on emacs locally. But on a website, this feature can be very useful.

Thank you very much for your persistent development! The user experience of the software you develop is getting better and better.