cannibalox / logtools

Logtools: utilities for Logseq (kanban, image gallery, priority matrix, ...)

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Logtools - productivity pack :

a collection of css-based tools and plugins for Logseq.

Kanban

tag a block with #.v-kanban or #.v-kanban-wide (more samples here https://discuss.logseq.com/t/css-trigger-columns-kanban-view-with-tags/390) - - see the related Template below

  • options:
    • -w100, -w150, -w200, -w300,-w400 : adjust width of each column (fixed numbers in px)
    • -small : smaller fonts to fit more columns
    • -wide : force the use of full-width and horizontal scroll if needed demo: #.v-kanban

- Kanban starter templates: replace the titles and catagories to your liking, invoke with `/kanban` ``` - a Kanban #.v-kanban template:: kanban - `TO DO` - 1 - 2 - `IN PROGRESS` - 1 - 2 - `DONE` - 1 - 2 - Wide Kanban #.v-kanban-wide template:: kanban-wide - `UNDER REVIEW` - 1 - 2 - `RETAKE` - 1 - 2 - `APPROVED` - 1 - 2 - `ARCHIVED` - 1 - 2 - `DROPPED` - 1 - 2 ```

Eisenhower Matrix

tag a block with #.v-eisenhower (https://discuss.logseq.com/t/css-template-eisenhower-matrix/526)

Priority Matrix #.v-eisenhower-matrix

  • use this template for easy invoke via slash command /eisenhower-matrix :
    - #.v-eisenhower-matrix
    template:: eisenhower-matrix
    	- [[TODO]]
    		-
    		-
    		-
    	- [[DECIDE]]
    		-
    		-
    		-
    	- [[DELEGATE]]
    		-
    		-
    		-
    	- [[ELIMINATE]]
    		-
    		-
    		-
    

Numbered lists

tag a block with #.v-numlist (https://discuss.logseq.com/t/css-numbered-lists/387/5) to repace children bullets with incremental numbers (works on 2 sub-levels max for now)

Border

a utility tag to create borders around blocks. use #.v-self-border; #.v-border-child or #.v-self-border-child to add a frame/border around blocks. Great to highlight important blocks or to make cards or tables with the kanban or columns tags

demo :

Gallery

tag a parent block with #.v-gallery and put links to images in separate children blocks (by default the images are displayed as 200x200px)

  • options:
    • -col2 to -col7 : defnine the number of columns, images size will auto adjust
    • -w100, -w200, -w300,-w400 : adjust width of each pic (fixed numbers in px)
    • -fit : fit width
    • -h300 or -h400 to change the height, default is 200px
    • append these suffixes to the main tag, so for instance : #.v-gallery-col5 creates a grid of 5 columns, #.v-gallery-w300 creates a gallery where each pic is 300 pixels wide, etc
  • demo: #.v-gallery-fit

Like-Dislike (Pro-Cons)

tag a bock with #like or #dislike for reviews or comparisons: it will replace the bullets by + and - . see the related Template below demo #Like and #Dislike (with #.v-kanban applied)

  • pros and cons template(used for reviews or comparisons, works well in conjunction with the #.v-kanban tags)
     - procons #.v-kanban
     template:: procons
     	- #like
     		-
     	- #dislike
     		-
    

Columns view

usage: #.v-columns- followed by a number of columns between 2 and 6. eg #.v-columns-2, #.v-columns-4, etc... a complement to Kanban and Gallery. Useful to span content across multiple columns to create a newspaper-like layout or make long lists easier to browse.

  • demo #.v-columns-4 columns
  • .v-columns-2 : a 2 columns, newspapaer-style maybe be easier to browse ss_Logseq_quadrant-framing_20230120_CGvxP6OuPR

INSTALL

  • via the Marketplace
  • alternatively download the zip and unpack it in a folder of your choice, then in logseq, go to the main menu > plugins, then click on Load unpacked plugin and point it to the folder logtools-css-productivitypack (not the parent folder)
  • for use via CUSTOM.CSS or on mobile, you can also download the zip, open the index.js and copy only the css rules from line3 /* -- like dislike ----------------------------------------- */ til /*==== ls-border end ====== */ included and paste them inside you /logseq/custom.css file

TIPS :

  • Try to combine the tags to uncover more possibilities : eg combine Kanban + Borders to create a table with a single tag #.v-kanban-border-children or with separate tags #.V-kanban #.v-border-children
  • the css was packaged as a plugin in order to auto-update via the marketplace, however, the css rules can also be used in custom.css (that's my prefererd way to use it as it works on mobile)
  • use the provided starter templates to easily invoke the tools and tags. I usually save all my templates in a dedicated page called ls-templates.md for easy management and modification.

Thank you for trying my mod, if you like the plugin and want to buy me a coffee, hit the button : ko-fi

About

Logtools: utilities for Logseq (kanban, image gallery, priority matrix, ...)

License:MIT License


Languages

Language:JavaScript 98.5%Language:HTML 1.5%