Skip to content

yo-goto/obsidian-card-view-mode

 
 

Repository files navigation

Obsidian Card View Mode

GitHub release (latest SemVer) GitHub All Releases

main screen shot

Feature.1 Card View

This plugin is inspired by Scrapbox (a web-based wiki tool) & Zettelkasten method (Slip box) by Niklas Luhmann.

I found all of the notes are not in the same stage while developing. We need some ways to distinguish the stages. The card view feature is one way to weigh notes and express them. You can assess whether your notes are atomic, then, if you feel your note is longer and not atomic, you can divide or extract the contents.

The vertical size of each note (a.k.a card) can be extended or reduced based on the amount of content on them. At a glance, you can easily find how mature your note is at the early stage of note-taking, note-making, or eventually note-developing.

I highly recommend you to use this plugin with the Sliding Pane plugin. I made this to be compatible with that and the Embedded Note Titles plugin.

Feature.2 Attention Pane

Another feature is “Attention Pane”. An active pane card is highlighted and the others are grayed out. This enables you to find an active pane easily and focus on the note. You can pay attention to the specific pane among many notes!!

Active and non-active cards are rendered with different RGB color values. You can set the value difference in the setting tab. Set the value 0 if you want to disable this feature.

Demo

Screenshot

Settings

Card colors, background color, card shapes are configurable in the settings tab.

setting 1

setting 2

  • You can globally turn on/off this plugin with a command at any time.
  • You can customize the card design(colors, corner radius, drop shadow).

Compatibility

Development

Roadmap

How to install manually

  • Clone this repo
  • npm i or yarn to install dependencies
  • npm run dev to compile
  • Copy manifiest.json, main.js and styles.css to a subfolder of your plugins folder
  • Reload obsidian to see changes

Special Thanks

Special thanks to these amazing plugins! I used these plugins as a reference for developing my first public plugin. The plugin basic structure is mainly based on the Sliding Pane. I referred to other plugins to build the color configuration system.

Original CSS

I've developed this plugin from a custom CSS snippet but I changed it into an SCSS file. If you get interested in the CSS style, you can see the original snippet linked below.

Gist Link

About

Obsidian Card View Mode Plugin

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 60.2%
  • SCSS 38.4%
  • JavaScript 1.4%