zamsyt / obsidian-snippets

CSS snippets for Obsidian
The Unlicense
99 stars 5 forks source link

Easy Multi Column Notes - Marking the start & end #5

Open caglarongan opened 1 year ago

caglarongan commented 1 year ago

Is it possible to mark start and end of this multi-columns ?

So we can have notes like this: notion like columns

It's like the only thing I miss from notion.


There are other snippets does this BUT I really like that this snippet doesn't leave any non-markdown-native or plugin-specific traces behind.

I wonder if something like this can be achieved with H6 headings? Because I never use them and they can naturally separate themselves from previous text; since they're... headings...

I'm not a dev, so I may be talking nonsense :')

zamsyt commented 1 year ago

This was discussed in #4. The two current solutions are callouts and embeds. You can add columns to all callout types. You can use additional snippets to hide styles from a callout or embed (let me know if you need help customizing these).[^1]

I have experimented with marker elements for this, but there are reasons why that has issues. It at least doesn't seem possible to have multiple separate multi-column areas in one document without callouts/embeds/something similar. Some limited functionality to perhaps mark individual paragraphs to expand to full width might be doable. Would that be helpful?

[^1]: Sidenote/tangent/ramble: I'm all for removing any extraneous markup from documents (that isn't personally meaningful to the user). I'm not much into snippets requiring specific magic words in documents. I've been entertaining the idea of a kind of snippet builder system, where the snippets would attach functionality to markup the user chooses, instead of requiring people to conform to the markup decided by the snippet. (Don't expect this any time soon though. And it's not like this would allow for any fundamentally new functionality. I might just start making a whole new app before this, sigh.. In the meantime, I'm always open for questions.)

caglarongan commented 1 year ago

We're totally on the same page with this approach. That future/maybe plugin sounds awesome btw. It may be stronger than the native flavouring Obsidian team and other devs do. Or it may act as a translator between plugin developers and users' choices. Again,

I'm not a dev, so I may be talking nonsense :')


In the meantime I did what you suggested, created a transparent callout type:

.callout[data-callout="mcol"] { 
--callout-color: transparent; 
--callout-icon: none;
   padding: 0;
 }

.callout[data-callout="mcol"] .callout-title {
        visibility: hidden;

And created a template, so it can come as divided:

> [!mcol] 
>  <% tp.file.cursor(0) %>
> 
> ---
> ---
> 

And to automate cursor jump, created a Commander macro.

Looks like this:

Screenshot 2023-04-09 at 07 32 26

I'm happy with the result at the moment :)

zamsyt commented 1 year ago

The "snippet builder" as I'm currently thinking could be a preprocessor (could be used as a web app). People would create templates in some standard format, and it would allow users to use and combine the features from the template, but add their own parameters (like the callout type). A CSS file would be generated from this, giving the user their own personalized snippet.


Great!

Btw:

zamsyt commented 1 year ago

Also: My snippet sets multi-column notes to be full-width automatically. You could add similar selectors to make some automatic modifications to the document styles based on the existence of your custom callout (like increasing the width, not necessarily to 100%)

caglarongan commented 1 year ago

GUI for customizing, especially between different plugins/snippets, is what Obsidian lacks at the moment. A lot of people would benefit such an app. Especially if we consider that team is working on gui for frontmatter and dataview's dev is working on some query interface called datacore.


I changed the visibility as you said. Couldn't make a working transparency . I googled for solutions but it seems like obsidian doesn't accept rgba ? I feel like not fixing something not broken :D

Well, I'll probably only use 2 column for callouts. If I use 3, it'll be for simple lists. I tried some variations before writing here, default width for document seems enough for 3-column-simple-lists.


First column's bullets are not visible though, any ideas why? It's not the case with numbered lists :D Not a big deal, just curious.

image

zamsyt commented 1 year ago

There's no issue with rgba. But you can't add a fourth number to --callout-color due to how the variable is used. Here's how the background color of callouts is set in the default theme:

.callout {
  background-color: rgba(var(--callout-color), 0.1);
}

It references the variable, and adds an opacity value after it. If you were to add a fourth number to --callout-color, you actually end up with five numbers here. You could instead overwrite the background-color directly. But I guess there might be nothing wrong with just setting an invalid rgb value either.


That list marker behavior is odd. I'm able to reproduce it, but I have no idea why it's doing that. Might take me a while to debug it. I'll add a bugfix once I do.

caglarongan commented 1 year ago

Thanks for everything ! 🍫