Outline in HTML Fixed Sidebar

ShiJianhui · December 21, 2021, 1:43pm

Hi!
Is it possible to embed the outline of notes inside HTML Fixed Sidebar? I’ve only succeeded with creating the sidebar divided into three parts: Parent, Siblings, and Children, but this solution makes navigation between notes disorienting for me (not to mention people who would see exported file for the first time). I would like to have an outline in a sidebar similar to that in TB “Outline View”, it doesn’t even need to be collapsible. I’m a very beginner in HTML/CSS and TB export code, so any tips on how to do it will be much appriciated! (File: tbx_file_outline.tbx (122.0 KB))

HTML page Template

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>^title^</title>
<style type="text/css">
	 ^text("CSSSample")^
</style>

</head>
<!-- Side navigation -->

<div class="sidenav">
		^ancestors(<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">Parent</p><ul>,,, </ul>)^
<hr>
		^siblings(<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">Siblings</p><ul>,,, </ul>)^
<hr>
		^ChildLinks(<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">Children</p><ul>,,, </ul>)^
</div>

<!-- Page content -->
<div class="main">
  
<body>
<!--   ** Standard Tinderbox Template [section page] **  -->

<h1>^title^</h1>
^text^
^children(/Templates/HTML page/HTML item)
</body>
</div>
</html>

HTML item Template

<br>
^text
^children(/Templates/HTML page/HTML item)

and CSSSample template (just in case)

  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 20%;
  position: fixed;
  z-index: 1;
  top: 20px;
  left: 10px;
  background: #eee;
  overflow-x: hidden;
  padding: 8px 0;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 12px;
  color: #2196F3;
  display: block;
}

.sidenav a:hover {
  color: #064579;
}

.main {
  margin-left: 20%; 
  font-size: 23px; 
  padding: 0px 10px;
}

satikusala · December 21, 2021, 2:19pm

Can you explain your use case? Are you looking for this to be a navigation utility for after exporting your data out of Tinderbox, e.g a template to apply for publication or a utility that you want to use within Tinderbox for some purpose?

Also, I suspect that you would NOT want to always publish your entire document, but select sections, no? For example, chapters. In which case, the use of boolean attributes and conditions in the export code will be very useful.

ShiJianhui · December 21, 2021, 4:20pm

That’s exactly what I’m looking for.

Yes, but I can handle this problem with boolean attributes and conditions, just like you said. Writing code for navigation template is a much bigger problem. Any thoughts?

eastgate · December 21, 2021, 4:58pm

Yes, this should be straightforward. I would recommend doing this in three steps.

Write export templates to export your document as an outline:

<ul>
<li> item 1</li>
<li> item 2
   <ul>
   <li> item 2.1 </li>
   </ul>
</li>
</ul>

If the above is greek to you, you’ll want to spend an afternoon or so learning more about HTML.

Once you’ve got the outline export down, you’d simply ^include the outline in the sidebar of your page template.

satikusala · December 21, 2021, 5:51pm

How about something like this?

TBX L - Simple Div Publication Format.tbx (206.5 KB) (Updated 12/22/21)

ShiJianhui · December 21, 2021, 6:16pm

Thank you @eastgate - approaching the problem by breaking it into smaller pieces!

Yeah, something like this. I will study your file this evening and try to apply it to my project! Many thanks!

satikusala · December 21, 2021, 6:36pm

Cool. There is A LOT more we could do with this, e.g. add conditionals to include and not include stuff, pull in images, and quotes, format the nav bar, number the sections, include an automatic bibliography, etc. Happy to bound ideas around.

satikusala · December 22, 2021, 3:55am

Hey there, here is a second option. I’ve modified the nav outline as well as changed the layout CSS method. Also, the header and footer text are pulled from the Publication note.

.

TBX L - Simple Div Publication FormatR2.tbx (218.2 KB)

UPDATE (12/22/21): I figured out the issues I was having and have updated the file. The problem listed below is no longer an issue. Solution: I needed to create an interim variable and pass the value.

@mwra, I’m running into an export issue. If I try to export the above the links don’t work as they don’t have the full path to the files. I’m not sure how to give a relative path and when I try to give an absolute path with fOutline2() I’m getting an escape error. If you’re around at some point I’d love to discuss this with you. Try to figure out what I’m doing wrong in either more code or approach.

.

ShiJianhui · December 22, 2021, 7:07am

Sounds great! But because I’m not a TB Pro, I’m taking ‘small steps’ approach trying to make nav bar working first.

Your second file looks nice! Even better than the first one, which IMO has one issue i.e. I have to edit function with new $Name of some notes every time when setting it up in the new project. Of course, the latest version has also indents that make the ouline look more like an outline (and easier to navigate )

TomD · December 22, 2021, 11:45am

Would Hook help here? It specializes in giving relative links to the file system.
Tom

satikusala · December 22, 2021, 1:13pm

???This should not be the case. You might be experiencing a typo that I had in the first file, the OnAdd was not working. I fixed it.

Here is the updated original file:
TBX L - Simple Div Publication Format.tbx (206.5 KB)

satikusala · December 22, 2021, 1:15pm

No, it is an action code issue that I need help with.

ShiJianhui · December 22, 2021, 1:35pm

Thanks for the updated file, it’s working now!

Please keep us updated!

satikusala · December 22, 2021, 2:24pm

See above, I figured out the issue. I passed the action code a variable, which made the instructions to TBX more explicit.

satikusala · December 22, 2021, 3:01pm

To be clear, the “fix” you were looking for was NOT the action code issue, but a typo in the OnAdd.

eastgate · December 22, 2021, 3:50pm

Suggestion on the side-bar: modify the sidebar css to give the outline a few pixels of margin-left, and perhaps 1em of margin-top.

satikusala · December 22, 2021, 5:14pm

Agreed, want to make sure I have the process/workflow elements down first and then will work on making it pretty.

satikusala · December 22, 2021, 6:12pm

I would like to throw out a question to the community. If the R2 demo I’ve created, the export seems to only work when publishing the entire document. I’m unable to figure out how to publish just a section, e.g. one chapter. I tried using action code to enable and disable $HTMLDontExport, but that did not seem to work. I’ll keep laying and let you know what I come up with.

To be clear, exporting the entire document is not necessarily a bad thing, I’m just looking for ways to publish to part of the document. I’d also like to see if there is a way to export a document with relative paths.

eastgate · December 22, 2021, 11:26pm

I believe where you have written

<a href="/Publication.html">Home</a><br>...

You want relative links

<a href="^root^Publication.html">Home</a><br>...

I think that using <ul> rather than trying to indent using non-breaking spaces gives you much nicer markup

satikusala · December 23, 2021, 12:28am

I like the idea, but alas, it did not work for me. , I get this.

I tried to feed it as a variable, but I get the same result.

I agree RE using the <ul>, I just don’t have time right now. I was going for proving the idea and understand the mechanics first, then I’ll work on pretty.