cannibalox / logseq-custom-files Goto Github PK

View Code? Open in Web Editor NEW

94.0 8.0 17.0 45 KB

logseq custom.js and custom.css utilities : resize query table columns, hide namespaces prefixes, better-sidebar......

License: MIT License

CSS 33.31% JavaScript 66.69%

logseq utilities table resize namespace

logseq-custom-files's Introduction

logseq-custom-files

custom.js and custom.css utilities for Logseq.

Current Version v20240317

Query table view resizer :

Add handles on the query table headers to resize column width

Namespace prefixes collapser :

Collapse namespace prefixes eg: [[prefix/page/test]] becomes [[../test]] (use the hover tootip to see the original name or enter edit mode)

Twitter embeds :

Fetches and embeds tweets and timelines without using logseq's internal syntax {{tweet https://twitter.com/username/status/id}}. Instead, you can just write the tweet url inline.

Benefits:

doesn't add extra markup to the source file
shows the timelines.

A demo with Logtool's kanban css to display latest tweets :

Better sidebar :

Enhance the right sidebar by replacing the vertical scroll with horizontal panes which are collapsible and resizable. Inspired by the sliding panes/matuschak mode with improved usability.

This works in conjunction with a custom.js snippet. If you don't want to use this sidebar mod, you need to REMOVE the better-sidebar javascript (edit the custom.js and comment out or remove the lines)

How-to use/install

No exisiting custom.css/custom.js

If you are not using any custom.js¹ or custom.css, copy the files into your %graph-name%/logseq/ folder.

Existing custom.css/custom.js

Alternatively, if you don't want to overwrite your current files or are only interested in some of the utilites :

Open the desired file with a text editor/code editor
Copy-paste the relevant sections into your own custom.js/custom.css files. Some utilities require to copy sections from both custom.js and custom.css to work. Make sure to include the mutation observer declaration at the start of the custom.js)
Use the search function to find the relevant snippets delimited by comments with descriptive names. For custom.css, it's possible to add @import url("https://cdn.jsdelivr.net/gh/cannibalox/logseq-custom-files@latest/custom.css"); at the beginning of your file.

Help me improve the utilities

I'm glad to accept Pull Requests if you know how to improve or optimize the utilities.
If you find this useful, you can also buy me a coffee :)

More js snippets and css customizations are coming soon, stay tuned

changelog

v20240317 : fix better-sidebar css to work with logseq 0.10.x - depreceting support for older logseq versions
v20230709 : fix better-sidebar's arrow location for logseq 0.9.10
v20230214 : new: add better-sidebar, fix: props data-refs (bg-pic::)
v20220517 : new: add function to add properties to the data-refs attributes; new: add bg-pic attribute
v20220517 : new: add function for tweet embed
v20220331 : fix sorting : resizer handle was overlapping the table headers. moved style to custom.css
v20220329 : fix for advanced queries

- custom.js has been introduced in logseq on 2021-11-10, see details here https://github.com/logseq/logseq/pull/2943
- The custom.js file is not created by the default installer; it has to be created manually in /logseq.
- Before executing the code, the user will be asked for execution permission.
- When the content of the custom.js file is modified, it needs to be restarted or refreshed to take effect.
↩

logseq-custom-files's People

Contributors

Stargazers

Watchers

Forkers

r-hegde idadzie sawhney17 noctis- shenyizong luminary-s bendzg o8r cybaj jameslilkendey candideu elgatopanzon roanosullivan gangulabs sesamie813

logseq-custom-files's Issues

Better Sidebar - slight issue

hello! I just want to first say thank you so much for the better sidebar! It was exactly what I needed!

HOWEVER, For some reason, when I "collapse" a page it will not open again!

I did not previously have a .js file - so I simply downloaded yours and put it in the logseq folder.

I did have a custom.css file for a theme I am using, so I simply copied yours and added it to the bottom.

I have attached the .js & the .css files I am using. I'd appreciate any help!!

====

custom css.txt
custom js.txt

Sidebar not horizontal in 0.10

I know you haven't touched this in a while, but I really like what you did here. Any chance you can fix the sidebar script for it to work in the new version? it looks like this to me:

Thanks in advance, and I understand if you have moved on to other things. I'll be using the tools without the sidebar until then.

How to use the new features?

I was wondering how to add the new features like the background image and properties for references.

Feature request: make non-query tables resizable too

Possible improvement

Hey!

I think that in the script to make the namespaces shorter there is a part which doesn't work.
In the file custom.js at this line you have 'a.page-ref[data-ref*="/"]:not(.hidden-namespace)'. If I understand it correctly, the :not(.hidden-namespace) part should ensure that nodes with that class are not selected.

But when I put a console.log(nmsp) right after that part it logged a NodeList which still included all the nodes with that class.

So I think maybe what happens is that the script processes every node everytime it runs. I'm not entirely sure though, just thought I'd point it out.

consider creating an official plugin that's available from the plugin marketplace

it would be really cool if this was an installable plugin from the logseq plugin marketplace: https://github.com/logseq/marketplace

pics

Feature request: namespace prefixes collapser in left sidebar and for tags

I really love these utilities! The namespace collapser is one that I really needed, and I'm glad I stumbled upon your project.

My only suggestions are the following:

Making the collapser available in the left sidebar:

Activating the collapser for tags

Currently, the presence of a hashtag at the start of a page name (for tags) prevents the collapsing action. I use hashtags/tags for their distinct styling, but would benefit from the collapsing as well.

Add a license

I took some of your code here (mainly the part which makes namespaces more pleasant) and changed it a little for a theme I am working on.

I would like to put my theme on GitHub but unfortunately this repository does not contain a license. Because there is no license, your code is not open source nor free. So I cannot use, redistribute or modify it.

I would recommend that you add an open source license, which would allow me to reuse some of your code while you still retain the copyright. Thank you :)