Fun with static pages
265 views
Skip to first unread message
David Gifford
Nov 27, 2015, 11:01:59 AM11/27/15
to TiddlyWiki
Hi all
Just wanted to show you all what I did for my Spanish web publishing with TiddlyWiki:
I used a TiddlyWiki to generate this as a long static tiddler of transcluded tiddlers with html anchors and page breaks. This has the advantage of being light and mobile friendly (the above file is 146kb), is easy to navigate, allows for some control on printing results, and allows me to update easily by editing the transcluded tiddlers, then exporting the big tiddler as static again.
In the table of contents of the static tiddler, each section has a link to an anchor, and the page # in parenthesis for the printed version.
Then the tiddler for each section is transcluded into the main tiddler with 4 items:
1. The first line below is the anchor referenced from the table of contents.
2. The first part of the second line is a section heading.
3. The second part of the second line is a link to the table of contents anchor, so one can quickly navigate back up.
4. The third line (which I only include where necessary) is a page break to aid when printing.
One odd thing is that the indenting of the transcluded tiddler works correctly in my local file, but when I turn it into a static, the tiddler contents move flush left, lined up with the section header rather than indented slightly. Not sure why that is.
If you try this, remember that clicking on an anchor link in your TiddlyWiki will open a tiddler with the anchor name, rather than the anchor. The anchors only kick in correctly after you generate the static tiddler.
Also, one drawback is that if I add pages toward the beginning, I will need to manually update the page numbers in the table of contents. But in this case, I m pretty much done, so this is not a problem.
Maybe for some of you, this is not a big deal, and maybe you can think of 15 easier ways to do this (feel free to share them!), but for me this is the culmination of what I want to do with my Spanish resources from here on out. Something light, printable, navigatable, and fairly easy to update. Just wanted to share my joy with you guys. Feel like I achieved what I wanted, and didn't even need to ask a ton of questions around here to get it done.
Blessings
Dave
Just wanted to show you all what I did for my Spanish web publishing with TiddlyWiki:
I used a TiddlyWiki to generate this as a long static tiddler of transcluded tiddlers with html anchors and page breaks. This has the advantage of being light and mobile friendly (the above file is 146kb), is easy to navigate, allows for some control on printing results, and allows me to update easily by editing the transcluded tiddlers, then exporting the big tiddler as static again.
In the table of contents of the static tiddler, each section has a link to an anchor, and the page # in parenthesis for the printed version.
*Section A ''<a href="#section.a">(3)</a>''Then the tiddler for each section is transcluded into the main tiddler with 4 items:
1. The first line below is the anchor referenced from the table of contents.
2. The first part of the second line is a section heading.
3. The second part of the second line is a link to the table of contents anchor, so one can quickly navigate back up.
4. The third line (which I only include where necessary) is a page break to aid when printing.
<a name="section.a"></a>
!!Section A header <a href="#toc">{{$:/core/images/chevron-up}}</a>
<p class="indent1"><$transclude tiddler="Tiddler for section A" mode="block"></$transclude></p>
<html><p style= "page-break-after:always; "></p></html>One odd thing is that the indenting of the transcluded tiddler works correctly in my local file, but when I turn it into a static, the tiddler contents move flush left, lined up with the section header rather than indented slightly. Not sure why that is.
If you try this, remember that clicking on an anchor link in your TiddlyWiki will open a tiddler with the anchor name, rather than the anchor. The anchors only kick in correctly after you generate the static tiddler.
Also, one drawback is that if I add pages toward the beginning, I will need to manually update the page numbers in the table of contents. But in this case, I m pretty much done, so this is not a problem.
Maybe for some of you, this is not a big deal, and maybe you can think of 15 easier ways to do this (feel free to share them!), but for me this is the culmination of what I want to do with my Spanish resources from here on out. Something light, printable, navigatable, and fairly easy to update. Just wanted to share my joy with you guys. Feel like I achieved what I wanted, and didn't even need to ask a ton of questions around here to get it done.
Blessings
Dave
Tobias Beer
Nov 27, 2015, 11:32:04 AM11/27/15
to TiddlyWiki
Hi Dave,
Looks really good... professional, I must say.
May I ask, what method did you use to produce the altering table colours?
It would be great to peak into and fiddle around the (a working demo of) the underlying wiki a bit.
Best wishes,
Tobias.
David Gifford
Nov 27, 2015, 11:55:02 AM11/27/15
to tiddl...@googlegroups.com
Hi Tobias
Should have thought of uploading the TW file before. Here it is:
http://recursos.giffmex.org/3.juan.b2b.html
http://recursos.giffmex.org/3.juan.b2b.html
The long tiddler with the transclusions, etc, is 3 Juan: un manual de recursos
As for the altering table colors:
/*TABLES BLUEALTROWS*/
html body.tc-body .bluealtrows table {border: 2px solid white;}
html body.tc-body .bluealtrows th {padding: 15px; vertical-align:top;font-weight:normal;text-align:left;border: 2px solid white;}
html body.tc-body .bluealtrows td {padding: 15px; vertical-align:top;border: 2px solid white;}
html body.tc-body .bluealtrows tr:nth-child(even) td {background-color:#CDF;}
html body.tc-body .bluealtrows tr:nth-child(odd) td {background-color:#dae9fe;}Dave
--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/E2HtX1i0Aho/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/6f71f09e-f923-4ff9-9720-27cc0f2c5337%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
--
David Gifford
Christian Reformed World Missions, Mexico City
Christian Reformed World Missions, Mexico City
David Gifford
Nov 27, 2015, 11:59:41 AM11/27/15
to TiddlyWiki
One more note: I stuck this at the top of the tiddler I exported, in order to get the Merriweather font.
<html><link href='https://fonts.googleapis.com/css?family=Merriweather:400,400italic,700,700italic' rel='stylesheet' type='text/css'></html>
Dave
<html><link href='https://fonts.googleapis.com/css?family=Merriweather:400,400italic,700,700italic' rel='stylesheet' type='text/css'></html>
Dave
Jeremy Ruston
Nov 27, 2015, 12:02:34 PM11/27/15
to tiddl...@googlegroups.com
Hi Dave
Congratulations, it looks great, as Tobias says, highly professional and readable.
There is in fact a way to produce those internal anchor links automatically from internal tiddler links. The trick is that you can control how the link widget generates a link with the "tv-wikilink-template” variable. If defined, it is taken as a template for rendering links as anchor tags. You can see it in action in the StaticRiver exporter template:
There is documentation here:
The other part of the puzzle is that the static tiddler template includes an anchor tag before the view template:
Unlike your example, the static river view shows each tiddler in a frame, with margins in between.
Best wishes
Jeremy.
--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
Jeremy Ruston
Nov 27, 2015, 12:03:45 PM11/27/15
to tiddl...@googlegroups.com
Hi Dave
On 27 Nov 2015, at 16:59, David Gifford <dgif...@crcna.org> wrote:One more note: I stuck this at the top of the tiddler I exported, in order to get the Merriweather font.
Rather than putting it in the tiddler you exported, you could include the font declaration in your custom template.
Best wishes
Jeremy.
David Gifford
Nov 27, 2015, 1:41:49 PM11/27/15
to TiddlyWiki
Thanks for the kind words and advice, Jeremy!
Dave
Dave
David Gifford
Nov 28, 2015, 10:12:16 AM11/28/15
to TiddlyWiki
Hi Jeremy
Looking at doing this (http://tiddlywiki.com/#Generating%20Static%20Sites%20with%20TiddlyWiki - Wiki Snapshot with Internal Links) instead of all the tiring transclusions. This would save me work, but also allow for jumping back and forth with internal links rather than adding an anchor everytime I want to do that.
I imagine that I could adjust the CSS to make it look roughly like it does now - no frames and margins between and around tiddlers. I could put page breaks at the end of certain tiddlers to aid in printing correctly, and @media do not print to hide the viewtoolbar and other items when printing.
Questions:
1. Did you take "export river as static" out of regular TiddlyWiki and move it to node.js only? Or is there still a way to do that without me having to invest a lot of time to relearn node.js?
2. Is there a widget or some other way to open all tiddlers, with two or three particular tiddlers at the top of the river, and the rest of them open alphabetically? If I were to do this as a static river, I would need a quick easy way to open all the tiddlers.
Blessings
Dave
Looking at doing this (http://tiddlywiki.com/#Generating%20Static%20Sites%20with%20TiddlyWiki - Wiki Snapshot with Internal Links) instead of all the tiring transclusions. This would save me work, but also allow for jumping back and forth with internal links rather than adding an anchor everytime I want to do that.
I imagine that I could adjust the CSS to make it look roughly like it does now - no frames and margins between and around tiddlers. I could put page breaks at the end of certain tiddlers to aid in printing correctly, and @media do not print to hide the viewtoolbar and other items when printing.
Questions:
1. Did you take "export river as static" out of regular TiddlyWiki and move it to node.js only? Or is there still a way to do that without me having to invest a lot of time to relearn node.js?
2. Is there a widget or some other way to open all tiddlers, with two or three particular tiddlers at the top of the river, and the rest of them open alphabetically? If I were to do this as a static river, I would need a quick easy way to open all the tiddlers.
Blessings
Dave
David Gifford
Nov 28, 2015, 2:23:41 PM11/28/15
to TiddlyWiki
Hi Jeremy
My apologies to you for wasting your time and attention. The answers were easy to find!
1. In default tiddlers I put [[Table of contents]] [[Instructions]] [!is[system]is[tiddler]sort[title]] so they all load on opening.
2. I always forget about the tools tab since I never use it. There was 'export all,' waiting for me!
Thanks for this awesome tool that never ceases to amaze me...
My apologies to you for wasting your time and attention. The answers were easy to find!
1. In default tiddlers I put [[Table of contents]] [[Instructions]] [!is[system]is[tiddler]sort[title]] so they all load on opening.
2. I always forget about the tools tab since I never use it. There was 'export all,' waiting for me!
Thanks for this awesome tool that never ceases to amaze me...
Dave
On Friday, November 27, 2015 at 11:02:34 AM UTC-6, Jeremy Ruston wrote:
David Gifford
Nov 28, 2015, 3:49:11 PM11/28/15
to TiddlyWiki
Well, that worked splendidly! This is even better than the 3 Juan file I shared recently!
Here is the source file: http://recursos.giffmex.org/experiments/test.tw.river.html
And here is the static html file I created from it (a mere 69kb): http://recursos.giffmex.org/experiments/test.staticriver.html
1. All tiddlers open in the tw file upon startup, with the start and instructions tiddlers at the top.
2. Prints with no borders and frames etc - that was already set up in tw, there was no need for me to do anything.
3. Links work great.
4. Light and ideal for mobile.
5. No need to do laborious transclusions or anchors.
6. I can add page breaks at the end of specific tiddlers to ensure that the next tiddler's title will start on a new page when printing.
7. CSS the way I want it.
The loss of searching and the loss of tag pill dropdowns is offset greatly by the small file size. Most people in Mexico are going to open these files from phones and tablets, not computers, on potentially slow wifi connections. So opening a 69kb file vs opening a 1.5MB file is a big plus for my audience. And for those who need the full TW file, to enable searching, I can upload that too and put a link to it from the static file. I am happy.
One question: why does the "home" button (my own conconction, $:/.button/home) appear to the left of the tiddler title when exported? It is in the correct place in the tw file.
Dave
Here is the source file: http://recursos.giffmex.org/experiments/test.tw.river.html
And here is the static html file I created from it (a mere 69kb): http://recursos.giffmex.org/experiments/test.staticriver.html
1. All tiddlers open in the tw file upon startup, with the start and instructions tiddlers at the top.
2. Prints with no borders and frames etc - that was already set up in tw, there was no need for me to do anything.
3. Links work great.
4. Light and ideal for mobile.
5. No need to do laborious transclusions or anchors.
6. I can add page breaks at the end of specific tiddlers to ensure that the next tiddler's title will start on a new page when printing.
7. CSS the way I want it.
The loss of searching and the loss of tag pill dropdowns is offset greatly by the small file size. Most people in Mexico are going to open these files from phones and tablets, not computers, on potentially slow wifi connections. So opening a 69kb file vs opening a 1.5MB file is a big plus for my audience. And for those who need the full TW file, to enable searching, I can upload that too and put a link to it from the static file. I am happy.
One question: why does the "home" button (my own conconction, $:/.button/home) appear to the left of the tiddler title when exported? It is in the correct place in the tw file.
Dave
On Friday, November 27, 2015 at 10:01:59 AM UTC-6, David Gifford wrote:
HansWobbe
Nov 28, 2015, 5:10:11 PM11/28/15
to TiddlyWiki
Dave:
Just a quick not to say that I really appreciate this (ultra) lite approach since I've started working on phones a lot more. I've been so accustomed to good desktops and large monitors that they almost became a "dependency".
You solution is a real treat!
Thanks for sharing.
Cheers and Belssings,
Hans
Just a quick not to say that I really appreciate this (ultra) lite approach since I've started working on phones a lot more. I've been so accustomed to good desktops and large monitors that they almost became a "dependency".
You solution is a real treat!
Thanks for sharing.
Cheers and Belssings,
Hans
On Saturday, November 28, 2015 at 3:49:11 PM UTC-5, David Gifford wrote:
Well, that worked splendidly! This is even better than the 3 Juan file I shared recently!
...
Dave
David Gifford
Nov 29, 2015, 8:13:18 AM11/29/15
to tiddl...@googlegroups.com
You're welcome, Hans!
--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/E2HtX1i0Aho/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/4b149390-3652-4242-822e-7ae1c0230dcd%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
David Gifford
Nov 30, 2015, 12:02:36 PM11/30/15
to TiddlyWiki
Hi all
A big thanks to Jeremy, for the shout out on the last hangout.
I mentioned earlier in this thread that I managed to find an easier, more TiddlyWiki way to do static publishing like I did with the Spanish, 3 John resource. I wanted to let you all see something I did with it. Another Spanish static resource, this time on John the Baptist: http://recursos.giffmex.org/bi/juan.bautista.movil.html
Here is the link to the TW file I used to create it: http://recursos.giffmex.org/experiments/juan.bautista.html#.Inicio
A big thanks to Jeremy, for the shout out on the last hangout.
I mentioned earlier in this thread that I managed to find an easier, more TiddlyWiki way to do static publishing like I did with the Spanish, 3 John resource. I wanted to let you all see something I did with it. Another Spanish static resource, this time on John the Baptist: http://recursos.giffmex.org/bi/juan.bautista.movil.html
Here is the link to the TW file I used to create it: http://recursos.giffmex.org/experiments/juan.bautista.html#.Inicio
Dave
On Friday, November 27, 2015 at 10:01:59 AM UTC-6, David Gifford wrote:
Tobias Beer
Dec 1, 2015, 7:49:26 AM12/1/15
to TiddlyWiki
Hi Dave,
I mentioned earlier in this thread that I managed to find an easier, more TiddlyWiki way to do static publishing like I did with the Spanish, 3 John resource.
Great to see you take on this road!
It will be much easier for you to manage
than to manually add the required controls and anchors
to each individual tiddler ...correctly.
Best wishes,
Tobias.
Reply all
Reply to author
Forward
0 new messages