Toc as the sidebar

cqroot · 31 December 2020 03:26

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 · 31 December 2020 08:01

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

Ari · 1 January 2021 23:30

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 · 5 January 2021 14:49

~~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 · 10 January 2021 20:56

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 · 22 June 2021 12:16

Awesome! Thanks for this

pointyendup · 22 October 2021 16:25

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 · 7 July 2022 07:06

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 · 7 July 2022 07:14

That outline plugin is not easy to use.

ammm · 7 July 2022 07:18

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

amzon-ex · 22 August 2022 07:53

Is there any way these features get integrated into the original TOC plugin? They are really helpful features, and adding out-of-the-box support would, in my opinion, be nice.

rlee · 14 January 2024 13:08

Rather late to the show here, but I've had serious problems with the outline plugin, and I've gone back to this, which works beautifully. Many kudos, it has solved my problem as well as if not better than the original, as being more economical of screen real estate.

Topic		Replies	Views
The realise of floating table of Contents Features	1	707	13 May 2023
Sidebar "no wrap" option and tooltip for notebook and notes titles Features	5	795	14 September 2023
Generate List/TOC of Note Titles in Notebook? Support	7	774	17 September 2021
TOC: Minimum level to apply anchors Features	4	1165	13 July 2019
CSS/HTML dropdown support in notes Features	2	1081	8 July 2019

Toc as the sidebar

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

Related Topics