Tbx to website generator

Hi all, potentially of interest to those who wish to generate a website from a collection of linked notes.

tbx_to_website_generator.tbx (91.3 KB)

This TBX template exports notes placed under its Home page (Display name = ‘Read Me First’ ) into a self-contained Website - header/3-column/footer - preserving all types of links.

Links displayed are;

  • hierarchical ( right column and breadcrumb below the header )
  • inbound/outbound ( left column )
  • textural links (within main content of middle column )
  • similar-to pages ( below hierarchical in the right column.)

Basic Structure

  • A header displays the $DisplayName ( with $Name as a reference underneath), the date of creation of the TBX page, and the TBX file the site is derived from. Note links use $Name, so links to ‘this’ note will use ‘Home’ and not ‘Read Me First.’
  • Left column ( Links as above )
  • The Middle column contains the $Text of the note
  • Right column ( Links as above )
  • The footer contains the number of words in the page and a WordCloud type output

More in the Read Me First Page inside

Hope this is useful to some of you

Best Wishes

Mark O’Connor

4 Likes

Thank you @Markoconnor! It’s good to see a new example of creating websites from Tinderbox.

I have a few sites that I’ve been generating from Tinderbox for many years, and I always enjoy using Tinderbox’ HTML export to produce them. Of course, for made-with-Tinderbox inspiration we also have @mwra’s A Tinderbox Reference File (source here). And Mark Bernstein’s personal blog. There are many others.

Thanks for sharing. I appreciate the thought and work that’s gone into the file you’ve kindly shared.

I’ve a few (well-intentioned) thoughts:

  • Use a CSS file. This isn’t a Tinderbox issue rather than a web one. Hard-coding the CSS means every tweak to a the CSS requires changing every HTML page. Exporting CSS is actually very easy do. To save a small essay of explanation - take a look at the aTbRef TBX file to see how.
  • ‘similar-to’ pages. This feature works but is on the maintenance spike as it doesn’t cope well when exporting large files (I had to disable it in aTbRef). I’m sure this will get fixed, but just be aware that is you use a lot of links and export takes much longer than before as you add notes, be open to commenting out the ^similarTo()^ calls in case that’s the cause.

As I said at open. Thanks - genuinely. Tinderbox is very flexible but building a ‘just’ exports file can be an intimidating challenge when starting out. Finished examples like this are useful - thinking back to when i first started using Tinderbox.

Thanks Mark,

I have a version with a css file but for the life of me couldn’t get the columns to work. I’ll stick it up when I get home. Interesting about the ‘similar to’ issue as the export for the large writing course file I am working on is taking an age to export

Best Wishes

Mark

One issue with external CSS is that I believe you need to export the TBX once before preview will work internally - or at least for the CSS-file based styling to preview correctly and the preview pane will look to the exported CSS file and not to the TBX note that exports it.

If you will never export your TBX but wish to use in-doc HTML preview then inline CSS in every note('s template) may be a better solution. If you’re going to export the benefit flips as the whole point of CSS files is they reduce page size (bandwidth) and make edit-once/fix-many pages far easier.

Thanks

^root^ and ^url are causing a mild headache

Which to use in the <link rel=stylesheet" type=“css/text” href="???" >

^root^folder/file.css
or ^url(“filename”)^

Can’t get either to work at the moment but url seem to force an html extension?

Checking with my aTbRef TBX’s templates, the HTML pages call:

<link rel="stylesheet" type="text/css" href="^root^^value($CSSTemplate(CSS))^">

where ‘CSS’ is a root-level container that emits the folder holding the CSS file(s). I do this so I can use one or more CSS files without clogging up the export base folder with support files (CSS, JS, etc.).

The value of $CSSTemplate in note ‘CSS’ is:

css/styles.css

That value routes around issue you mentioned re ^url^ and assumed linked file extensions. Having checked, it is mentioned here in aTbRef.

Do please feel free to re-use code or patterns from the aTbRef TBX (available here) as that’s one of the reasons I make it available. :slight_smile: