Toc as the sidebar

cqroot · 2020-12-28T12:06:35.034Z

Added.

MisterKelly · 2020-12-29T13:18:14.079Z

I have been using the userchrome style suggestions to make a TOC and it has one obvious disadvantage: I have to remember to add [toc] at the top of every note where I want one. And this then appears at the top of my notes on mobile devices.

I have loaded the plugin and I now have a possibly stupid question. On the screenshot above the heading ("Outline") and the toc itself are both in a clear sans serif bold. When I load the plug in they are both in a smaller rather ugly serif font. I am using Windows 10. Why do I have serif fonts?

I thought about going into the plugin and changing the css there. Then I remembered that this is what the plugin is supposed to make redundant so I thought I would ask here instead

I am also personally not a fan of the green text colour. Could we have a setting to change this at some point?

cqroot · 2020-12-29T13:52:54.975Z

I accept your opinion. I will add the settings section as soon as possible to give users the right to choose the appearance. I think this will be done soon.

MisterKelly · 2020-12-29T14:20:35.273Z

Thanks. There sounds excellent.

What about the differences between the way the plugin looks on your screenshot and the way it appears on mine? This is what I see:

which is very different from your screenshot. Mine is sad serif. Yours is groovy non-serif More importantly perhaps this font does not match the rest of the Joplin window and looks wrong.

Is that a Windows issue or what?

cqroot · 2020-12-29T14:25:51.573Z

Now the font-family of the plugin panel is var(--joplin-font-family). This is the reason for the difference.

cqroot · 2020-12-30T13:22:28.321Z

v1.0.3. Now you can set the font, color and font size on the settings page. Settings will be applied when you refresh the outline panel (such as switching notes).

jb261 · 2020-12-30T15:01:35.747Z

A very minor tweak suggestion - for those who keep the TOC sidebar very narrow (e.g., when using Joplin in split screen and having 5 columns - notebook list, note list, markdown editor, rendered view, TOC sidebar), small bullet points in front of the TOC headers in various colors (different color for h1, h2, h3, etc.) might make it easier to see at a glance where each header sits in the outline hierarchy. Just a suggestion. Love the this plugin!

MisterKelly · 2020-12-30T15:08:25.802Z

Fantastic!!!

I shall check this out immediately

symisz · 2020-12-30T18:38:00.957Z

Thanks for the plugin. I've reverted back to using v1.02, since the font-family won't load for some reason. Also for people unfamiliar with CSS. The font size is followed by a unit, 1.2em for example. Looking forward in seeing more options.

cqroot · 2020-12-31T02:06:59.499Z

At present, only the configuration of css has been added to the settings, which may be convenient for users who are familiar with css. But this is not easy for everyone, so I will optimize it.

The font size may be set like other software in the future, the default unit is pt.

The problem that font-family cannot be loaded does not appear here. Maybe you need to switch notes to reload the outline window or restart joplin. If you still have problems with font-family, can you give me the details and screenshots.

cqroot · 2020-12-31T03:26:48.257Z

I probably understand what you mean, but I can't imagine how it should be. Can you give me a picture or a similar design in other software.

symisz · 2020-12-31T08:01:52.857Z

I got the font working. I assumed a font family name was correct, it wasn't and changed to a default serif font.

Ari · 2021-01-01T23:30:44.732Z

Below is a solarized-dark version of @moonlygreat code.

Hoping that this (or some other expandable + floating TOC variant) will make it into a standard feature of Joplin. It's one of the features I miss from Zim.

Is there a way to prevent the TOC placeholder from being converted into hard links every time the WYSIWYG is used to modify the note? I find this kind of annoying / major usability problem (for my simple use case, where I stay most of the time on WYSIWYG and some very large notes that need TOC)

nav.table-of-contents ul {
	list-style-type: none;
	margin-top: 0px;
	margin-bottom: 0px;
}

nav.table-of-contents>ul {

	top: 5px;
	right: 0px;
	z-index: 99;
	
	font-size: 12px;
	position: fixed;
	padding: 15px;
	
	border-radius: 10px 0px 0px 10px;
	margin: 0px;
	
	overflow: hidden;
	height: 90%;
	width: 5px;
	transition: .2s;
}

nav.table-of-contents::after {
	content: "[TOC - move your cursor to the right edge]";
	color: black;
}

nav.table-of-contents>ul:hover {
	background: #073642;
	box-shadow: -5px 0px 10px 0px rgba(0,0,0,0.15);

	width: 30%;
	color: none;
	overflow: scroll;
}

nav.table-of-contents>ul:hover::before {
	content: "TABLE OF CONTENTS"
}

nav.table-of-contents>ul:hover li {
	display: list-item;
}

nav.table-of-contents li {
	display: none;
	white-space: nowrap;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}


	#rendered-md {
	width: 100%;
	}
}

symisz · 2021-01-05T14:49:09.907Z

~~I'm also unable getting this CSS to work.~~
~~I've added the stylesheets to the file userstyle.css and it seems not working even after restarting Joplin.~~

I wasn't aware that you need to write down [toc] inside the document to get this to work.

symisz · 2021-01-10T20:56:57.322Z

I modified the CSS found here and created another dark mode version, I tried to create a tree-list type navigation with a minimal look.

Instructions:
add [toc] in your Joplin document
copy the CSS into userstyle.css found under Options > Appearance
close all instances of Joplin and relaunch & move the mouse cursor to the upper corner in the read panel (just under the first heading)

nav.table-of-contents ul {
	margin-top: 0px;
	margin-bottom: 0px;
}

nav.table-of-contents>ul {
 	top: 41px;
	right: 0px;
	z-index: 99;
	
	font-size: 12px;
	position: fixed;
	padding: 15px;
	
	border-radius: 3px 0px 0px 3px;
	margin: 0px;
	
	overflow: hidden;
	min-height: 15%;
	width: 5px;
	transition: .2s;
}

nav.table-of-contents::after {
    content: ' \25C4';
    color: #555555;
    right: 0;
    position: absolute;
    top: 28px;
}

nav.table-of-contents>ul:hover {
	background: #1d2024e3;
	box-shadow: -5px 0px 10px 0px rgba(0,0,0,0.15);

	min-width: 260px;
	color: none;
	overflow: scroll;
}

nav.table-of-contents>ul:hover::before {
	content: "TABLE OF CONTENTS"
}

nav.table-of-contents>ul:hover li {
	display: list-item;
	list-style-position: inside;
	line-height: 1.3em;
}

nav.table-of-contents li {
	display: none;
	white-space: nowrap;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}

ul li {
    display: list-item;
	list-style-position: inside;
	line-height: 1.3em;
}

nav.table-of-contents ul {
	margin-left: 1.01em;
}

nav.table-of-contents>ul {
    list-style-type: none;
}

/*
nav.table-of-contents>ul {
    list-style-type: '┏ ';
}
*/

nav.table-of-contents>ul ul {
    list-style-type: '┣ ';
}

nav.table-of-contents>ul ul li:last-child {
    list-style-type: '┣ ';
}

nav.table-of-contents>ul ul ul {
    list-style-type: '┣ ';
}

nav.table-of-contents>ul ul ul li:last-child {
    list-style-type: '┗ ';
}



/* 
nav.table-of-contents>ul {
    list-style-type: '┏ ';
}


ul ul::before {
	content: ' \00A0';
    letter-spacing: 0.9em;
    position: absolute;
    margin-left: -7px;
    margin-top: 0.2em;
    text-decoration: overline;
}
*/

nav.table-of-contents li a {
    text-decoration: none;
}

nav.table-of-contents li a:hover {
    text-decoration: underline;
}

cypherbits · 2021-06-22T12:16:51.403Z

Awesome! Thanks for this

pointyendup · 2021-10-22T16:25:45.233Z

Yes! Thanks to everyone for this. Seeing what can be done here with Joplin and some CSS, I'm super sad that I'm so bloody horrible at it. Well, anything front end anyways.

But my back end brain has been grinding on this for about 2 months now, trying to figure how I can get this round peg into my square box of a project I wanna attempt. So, I'm hoping that some of the CSS wizards here could weigh in on a few questions:

This TOC is clearly linked to the active note but is it possible to link to a different data source? Specifically, I've structured my 'framework' (very loosely used term in this case) such that each note will have a parent that is accessible via a backlink. Think of it as a web of notes, child notes being the tasks of parent notes broken down into greater detail, eventually being Complete (haven't figured out if that is just a checkbox or disappears).

As such, I've been able to hide both the sidebar and note list giving me a massive amount of workspace. I do have the tabs plug in running a strip along the top that basically gets my 1st tier notebooks and room enough to pin my current focus area. However it would be really nice to be able to just hover over the left side and have a ToC for Notebooks to pop out.

There will need to be another piece, which is have that ToC to drill down to the note level, which I would suspect is already present.
Final question, currently the ToC, whether floating or standard, is just a normal 'in doc' link of exact implemented like Heading Title. Now what if that heading were itself a link, implemented as so:

## [Heading Title](link-to-other-location/note/file/hyperlink)

Is there a way, through CSS, for it to build the ToC links as it does, but if the navigation destination is itself a link, to make it link to that link's destination?

I played with the @cyr06 's awesome $<toc{"level":[2,3],"listType":"ul"}> enough that in order to not make any breaking changes, 'heading' links that point to these links could be marked with 5 #s? Just spitballing and don't want to need configuration panels or heavy dev to make this work if possible (and now that I see just how powerful CSS really is).

Sorry if my terminology is incorrect and if I'm not being clear enough.

Thanks in advance for your time and effort.

ammm · 2022-07-07T07:06:33.503Z

How to quickly return to the top of the article when viewing the directory
I encountered the same problem, '[toc]' grammar is suitable for completing the article, but it is not very friendly to the writing process.

ammm · 2022-07-07T07:14:18.465Z

That outline plugin is not easy to use.

ammm · 2022-07-07T07:18:08.987Z

https://discourse.joplinapp.org/t/add-an-outline-to-your-app-and-suggestions-for-page-introduction-design/26298?u=ammm