T-blog project: Traditional blogs / Disqus integration / 5 themes.

[Riz]

Gentlemen,

TW5 as a static site generator has not been seen put into use much. So here is something for you to see.

https://ibnishak.github.io/t-blog/.

You can see demo of blogs created with tiddlywiki there. All of them has disqus comment system integrated to them.

If you are interested to try, clone/download the repo from here.  https://github.com/ibnishak/t-blog

Each blog theme is a separate Node JS Tiddlywiki.

• Download and launch them as usual.
• Create a new tiddler with some content and set the type to "blog/blog-post".
• Open up another terminal and build with `cd /path/to/wiki && tiddlywiki --build`.
• Now from the blog folder, open the index.html and you can see your post published at the top.

You can find a much more detailed documentation top to bottom in here: T blogs Documentation. The documentation webpages are also created using TW5.

Let me know your feedback. The  blog-edition of TW5 has had no much documentation for long. I hope we can discuss about some standardisation/guidelines in case anyone else wants to create more themes for the platform.

Also, let me know if you want a particular blog-theme in the platform. I will give a try as and when I get spare time and if community is interested.

Finally, in an unrelated announcement, I am stepping down a the moderator of r/Tiddlywiki5 in a week. Basically this means no large changes. The subreddit is still going to be open and people can still post their work there. I strongly suggest you do that, for someone new coming in and asking "Hey, what all plugins are available for this platform" has more chances of finding it there than here, via virtue of tagging. Here is what is going to change. Right now I can elevate anyone to a moderater will full privileges. Once I step down and the sub becomes moderater-less, you will have to go to reddit site admins to get that. They need not necessarily award you the same, or in the worst case scenario some teen wanting to learn how moderating/CSS works will get lucky and be granted the privileges. If anyone is interested in becoming a mod or stand in mod till someone really interested comes, let me know.

[sini-Kit]

Where can I download single TW5 file  like empty.html on tiddlywiki.com, but with your blog styles?

And will Disqus work in this variant?

пятница, 3 февраля 2017 г., 22:15:29 UTC+3 пользователь Riz написал:

[Tobias Beer]

Hi Riz,

Great work on all the themes.

Do you have any intentions
of starting from a more barebones "edition" / theme?

From a functional perspective,
I'm not sure I am following all of this,
too much template html, so to speak. ;-)

For example, that pagination ...is it static?
...did you define it by hand?

Sometimes, it also appears that links are not working,
e.g. I saw some link to "TiddlyWiki" ...but it didn't open anything.

Are tags working with this? ...and if yes,
would there be an index page for each tag?

I guess what I'm hinting at is that looks are not everything.
A blog's gotta work well from a functional perspective,
so it's easy to see how things work and be able to extend on that
rather than that it looks pretty but is difficult to adapt to ones needs.

Say I wanted to create a fancy menu component,
a component that conditionally shows things
depending on how a page is tagged,
etc... how would I be doing that?
Would that go into that index or blog post template?

Best wishes,

Tobias.

[Riz]

Hi Sini Kit,

Once you download the repo, open a themes open a themes folder, say Attila

1. Open the folder "blog" and delete all the html files under that.
2. Open the folder "blog>images" and delete all the images under that
3. Open the folder "tiddlers" and delete the "demo" folder under that.

There you have your empty edition.

[Riz]

Hi Tobias

Great work on all the themes.

Thanks :)

See, as I said, there are no documentation or guidelines regarding such a effort. So rather than telling me looks are not everything, may be we should discuss what functionality should be part of such endeavours.

Do you have any intentions of starting from a more barebones "edition" / theme?

No

that pagination ...is it static? ...did you define it by hand?

 

would there be an index page for each tag?

I will answer both these together.  As you can see from the roadmap I laid out here, category indexes are next in line to be added. Here are the issues I face and how I intend to possibly tackle it.

A blog post need only be rendered once. Even if you have a 100 blog-posts, they need not be rendered over and over again, only the changed or modified ones. I have actually set a limit of last 10 changed posts to be rendered when a build command is given. Indexes on the other hand must be rendered continuously. All indexes. I can actually code for an index page to be created as an when the user adds a new tag automatically. But when the blog grows into a 50 something tags, it would mean a great delay in every time user gives a build command.

There are two ways it can be taken further from here

• One is to filter out all the tags of last 10 modified posts and re-render the corresponding index pages for those tags only.
• The other is to let user define if they need an index page for that tag at all. If they do, they create an empty tiddler with a "system tag" and mention the tag to be indexed in the text field. This way the end user has more control.

As for the main index pages, I have not yet figured out a way to let the user define how many pages they should have. The problem is, the first page of index is coded as "sort all the blog posts by modification date and show the first 10". The second page becomes "sort all the blog posts by modification date, discard the first 10 and show the next 10". The third will discard the first 20 and so on. The thing is, I do not know a way in the core to increment the "discard" element.

The pagination is something that should be taken apart and coded differently. However this would mean index pages must be somehow identifiable from the rest. I have not yet reached a decision as what will separate the index pages from the rest. The "next page" button will show up in all but last and the "last page" button showing up in all but first. Now this part is simple, but before that, the last issue must be tackled first.

Sometimes, it also appears that links are not working, e.g. I saw some link to "TiddlyWiki" ...but it didn't open anything

That comment would have been more useful had you pointed out where is that link. The tag links and author links are not yet defined a target yet. They are left to user to define. They can create a page using blog/misc type and define that target to the modifier link.

Say I wanted to create a fancy menu component, a component that conditionally shows things depending on how a page is tagged, etc... how would I be doing that? Would that go into that index or blog post template?

 I would say if one has enough knowledge of TW5 to create a fancy component, he can probably edit the post template and create a conditional filter to show it depending on the tag of the current post.

A blog's gotta work well from a functional perspective

No arguments there. But historically neither has a product been appealed to masses by looking ugly. I am trying to bring in visual choices and possibly making it possible to a commoner to use the static page functionality with least minimum knowledge as possible. Even then I would object to categorising it as merely an attempt to look nice.

As I said, such a endeavour, if anyone takes it further, would benefit with a set of best practices.

Riz

[sini-Kit]

I don't use tiddlywiki under node.js

In your folders in GitHub I found many tid files. But I don't understand how to install them to get one tw5 html.

something like that http://heeg.ru/heeg5.1.1.zip

суббота, 4 февраля 2017 г., 3:42:58 UTC+3 пользователь Riz написал:

[Mat]

WOW - Riz, that is just fantastic!

It's hard to believe it is based on TW - and that is both a compliment and a request;

As Tobias and sini-Kit imply, it is difficult for us because it abandons the familiar TW UI. It would be really valuable if it is possible for the administrator to have a more typical TW UI that we are all familiar with.

BTW, I have created the #tw-admin plugin which is a semi-hidden "settings area" to e.g toggle between templates or other admin controls. I have no idea if it is applicable in your context.

Thank you for your wonderful creations Riz!

<:-)

[Riz]

hmm, see - it was built the NodeJS side on mind. You can try to drag and drop all folders except demo tiddlers, eventually build it with loading the single html file with the correct build targets as specified in the .info file of the respective file.

Honestly it is far easier to use the Node. Tell me if you want any assistance in that aspect. No if you are adamant on using it in single file version, give me a day, I ll test it myself before coming back with a more detailed set of instructions.

It is although fundamentally different from what you achieved. You have radically changed the face of tiddlywiki itself to a point no one ever achieved in known archives. I am approaching the whole matter of web-pages from other end of matter. Partly because it is difficult to achieve a level of result you achieved consistently over many designs. Here the end user is not using Tiddlywiki at all. He wouldn't even know of its existence if it is not for the meta tag generator="Tiddlywiki" identifying it as the source. It is the same way hugo or django-bakery wouldn't expose the program to the user, just the web files it created.

Meanwhile you should really consider writing some kind of documentation for the benefit of us all.

[Riz]

WOW - Riz, that is just fantastic!

 

Thank you!!

because it abandons the familiar TW UI

Err, I seem to be missing your point, because I have not added anything to the TW UI. For proof I am attaching the TW I use to create the Attila blog posts as of right now :-)

As I told sini-kit, since we are not exposing the tiddlywiki to anyone, we need not make the  admin portal a secret per se. But I am interested in your model. If there is enough forward momentum, we could probably re-factor the approach to create a similar stuff on the html side, with .htaccess files and  a host that supports restricted access folders I guess.

[Mat]

Hi again Riz,

because it abandons the familiar TW UI

Err, I seem to be missing your point, because I have not added anything to the TW UI.

Ok, I take back my points. I don't use node.js so I just assumed that what was shown in the demos was also (somehow) the TW UI. Is it possible at all to have this function in vanilla TW5?

<:-)

[jwd]

Very interesting once again - well done. Going to need to investigate this development more deeply. To me this seems like a lightweight WordPress. As someone struggling to wrap my head around how to do in WordPress what I can imagine relatively easily doing in TiddlyWiki this has promise.The 'Category Indexes and Search Functionality in your roadmap seem key to making that lightweight WordPress leap.

One note: on the github page both the Demo and Documentation links in README.md go to the demo page.

[Riz]

Is it possible at all to have this function in vanilla

Yeah, I ll see what I can do. :-)

[Riz]

Yes!!! Exactly!!. That is exactly what I intended. It is lighter from the get go becoz you do not need to set up the whole LAMP stack shebang, and also because beyond a mindless consumer it allows you to template with just wikitext, not having to learn a separate programming language like python or Go.

The 'Category Indexes and Search Functionality in your roadmap seem key to making that lightweight WordPress leap.

I know!!. Category indexes are semi done and can be rolled out in a week. I will get to search functionality asap. I need to expand the admin page to prompt user to enter some user bio and stuff so that when they click on the modifier tab, that will go directly to the author page. Currently archives is the only special page I set up.

 on the github page both the Demo and Documentation links in README.md go to the demo page.

Thank you, Corrected. 

[Riz]

Is it possible at all to have this function in vanilla TW5?

 Hi Mat and Sini-kit

See the attached zip file.

Extract it, open Minions.html and create a tiddler with some content. Set the tiddler type to blog/blog-post.
Open up your terminal, and type

cd Minions && tiddlywiki --load Minions.html --build

[Riz]

Of course, you need Node JS for this too, I cannot see how that can be avoided. But I feel more stuff needs to happen in the NodeJS side as TW5 as a NodeJs application is far more powerful than the single html file edition.

Once you type in that command, go to blog folder and open the index.html

[Mat]

Of course, you need Node JS for this too,

Ok, thanks Riz and you're right that TW on node.js needs more attention.
Personally, I'll have to pass on node.js stuff for now because I'm too involved in other stuff.

<:-)

[jwd]

After investigating a little further I am a bit confused Riz. Perhaps I am just not understanding your intention, or the limitations of static file creation, or I just have a fundamental misunderstanding of what you mean by a 'theme'. Can you help me understand?

I cloned the git t-blog repo and looked at the contents of each of the themes you have created so far. Each one has, for example, a Second_Short_Post.tid; and sometimes several versions as seen by `find . -name 'Second_Short_Post*'`, e.g., Posts Set[234]/Second_Short_Post.tid. The other, what I would call 'content' tiddlers, are (essentially) duplicated as well - some have more dummy text than others. I leave the question of why there are different Posts Sets to another time. The key observation is there does not seem to be anything theme specific in any of those tiddlers; they are just standard tiddler fields, text, and I imagine could also have TiddlyWiki markup.

What I expected was that blog 'content' (tiddlers the user adds to their blog as 'posts') would be kept separate from the presentation aspects provided by a theme - the layout, font selection, etc. So that for example there would be one directory containing tiddlers of blog content, sort of like the 'demo' directories that are in each theme directory now, but stored somewhere like the Documentation directory is now; and that's where new blog posts would be stored. Making an analogy with WordPress, tiddlers would be equivalent to post records in the WordPress MySQL database.

I expected there would also be Astrid, Attila, Illdy, ... directories that have tiddlers that provide design, layout, and other presentation aspects of a blog. Again, the analogy to the WordPress world would be wp-content/themes/Astrid, Attila, ... I would expect to find tiddlers in these directories such as the Siderbar/, HeaderNav/ , and Tab contents - but no actual user content. Maybe at most some documentation.tid that provides theme specific details.

So I expected there might be a BlogContent directory where blog entry tiddlers are stored - initially empty except for a few example blog posts the user could delete once they get the idea. The reason for this separation would be so that when users are ready to publish they probably want an easy way to exclude the Documentation, that helped them get that far, from the rest of the world reading their blog.

That way, if a user wanted to change themes, it might be as easy as changing the configuration of the BlogContents/tiddlywiki.ifo file to specify they wanted to switch from using, e.g., Attila to Minions. Finally when the user is ready to "publish" they would `tiddlywiki t-blog/BlogContent --build` The resulting static files of blog entries would then all get the current theme applied in the generated html, css, etc. files. (Switching themes assumes a theme does not require adding any extra stuff, e.g., additional fields in content tiddlers. That problem would be similar to the way you can get kind of tied to a particular WordPress theme; but users of a theme could always make that choice, however.)  Basically the Separation of presentation and content principle

Is it just early days in the development of t-blog? Does this notion fit into your roadmap? I admit I'm not sure how to make it simple for users - generally adverse to command lines - to switch themes. Or how you get `tiddlywiki --server` to adapt to a new theme - short of stopping the server, editing the content of tiddlywiki.info and starting the server again. Nor have I used static file generation with TW5 enough to know if that is even possible. I do like the idea of transforming tiddlywiki content into a set of static files for a variety of reasons. Even if this separation of presentation and content notion is not on your roadmap thank you for this implementation that has given me a lot of food for thought.

[sini-Kit]

Hi! I put this folder to my node.js folder, run

tiddlywiki mynewwiki   --server

then I visit http://127.0.0.1:8080/ and saw gettingStarted2.0 with different blog settings. Then I change blog title and make new blog Post

and were I can see (make) static variant of this blog like in your demo?

___________________

Oh! " tiddlywiki --build " works good and static files appear

and tiddlywiki --load Minions.html --build works too with non node.js variant

воскресенье, 5 февраля 2017 г., 8:49:47 UTC+3 пользователь Riz написал:

[Riz]

Hi jwd

Wow!! This is the kinda discussion I was hoping would ensue. Your suggestions make perfect sense. I must admit I was looking at the whole scenario like this - user would pick a theme and create a blog out of it. If they want to change the theme they will copy the entire blog-post tiddlers to a different theme folder. But what your approach is a better way I must admit.

A central folder with all blog posts. The theme can be brought in with an includewiki field in tiddlywiki.info. That way if the user wants to change the theme, all he has to do is change the single field. Yes, that is more elegant.

The folder structure would be something like
    myParentFolder
        themes
            ThemeA
            ThemeB
        tiddlers -containing all the blog-posts.
        tiddlywiki.info




Yeah, it might be a little scary. But look at it this way, if there is enough traction for the "tiddlywiki as a static site generator" - we can probably put together a simple app or something that can manipulate tiddlywiki.info. A getting started kinda stuff, where user can choose a theme from a dropdown.


Also where will the final output go? A folder at the level of themes and tiddlers? Or a subfolder under each theme. Each has its own merits. If it is at the level of themes - user can set that folder up as a github repo and update his blog as usual, even if he changes the theme entirely. The other approach will make sure that even if we mess up the change of theme, our old blog posts are still there in a different folder.

Your counter-point also gives an insight - what if the new template/theme demands a different set of configurations. The user cannot be expected to go back and add the new settings to all the blog-post tiddlers. I guess we can tackle this with some kind of rule set that defines what all configurations can a theme have.

This is exciting.

> I leave the question of why there are different Post Sets to another time. The key observation is there does not seem to be anything theme specific in any of those tiddlers.

Do not worry about the demo tiddlers. I merely wanted to see how the blogs would look if there are lot of tiddlers. So I decided to create a lot of blog posts. But I was lazy, I automated the process of creating copy of tiddlers with terminal. This is what resulted in "Post sets". As I said, do not pay any heed to them.

[Riz]

hi sini-Kit,

Seems like you figured it out.

[Mat]

On Monday, February 6, 2017 at 4:09:32 AM UTC+1, Riz wrote:

[...]

A central folder with all blog posts. The theme can be brought in with an includewiki field in tiddlywiki.info. That way if the user wants to change the theme, all he has to do is change the single field. Yes, that is more elegant.

Sorry if my point doesn't fit the premises (I don't know), but don't forget the standard UI to change themes in TW via the Controlpanel.

<:-)

[Riz]

Hi Mat

Sorry if my point doesn't fit the premises (I don't know), but don't forget the standard UI to change themes in TW via the Controlpanel.

<:-)

Hi Mat,

Actually we are not trying to create themes - we are trying to create custom export format. Let me demonstrate it a bit. Drag and drop the attached JSON to one of your tiddlywikis (the usual html tiddlywiki). Now pick a tiddler in your tiddlywiki randomly - and export the tiddler. From the export dropdown, select the option "Attila Blog Template". As you can probably see, it will be styled as a blog post html file. This is what we are trying to achieve. 

[Josiah]

Whoa! Brilliant!

I'm a gonna play with this and hope to give you more detailed feedback in a few days when I understand it better.

It's a VERY interesting experiment in using TW to produce elegant output pages without cruft. That is a huge potential userbase.

Best wishes
Josiah

[Mat]

Actually we are not trying to create themes - we are trying to create custom export format. Let me demonstrate it a bit. Drag and drop the attached JSON to one of your tiddlywikis (the usual html tiddlywiki). Now pick a tiddler in your tiddlywiki randomly - and export the tiddler. From the export dropdown, select the option "Attila Blog Template". As you can probably see, it will be styled as a blog post html file. This is what we are trying to achieve. 

WHAT THE...!!! :-D :-D

I did not realize that was possible! It doesn't only create a styled post but the surrounding environment too.

But then this should work on vanilla TW; i.e export a (full) filtered list of tiddlers by means of the AdvancedSearch >Filter. In other words, really the whole blog (surrounding + posts) is updated when a new post is added.

Actually... and this may well be what you've done... the "surrounding" can probably simply be a stylesheet tiddler, and perhaps some other function tiddlers.

Very interesting!

<:-)

[Riz]

Whoa! Brilliant!

Thank you :-)

 I'm a gonna play with this and hope to give you more detailed feedback in a few days when I understand it better.

Please do. Remember we are doing a major revamping in a few days which might include category indexes - whereby you can click on a tag and see the index of posts with that tag, in the model of Jekyll platform. This is not a grand and exciting feature for TW5 users, but given that tags in static pages created by TW5 were usually just decorative pieces, this is a step forward for the project.

It's a VERY interesting experiment in using TW to produce elegant output pages without cruft. That is a huge potential userbase.

Yeah. The templating in wikitext would be much easier  pickup than other platforms - because it uses only 2 widgets throughout (atleast in these 5 themes I haven't used any other widget.) So even a total beginner would be able to pick up and create themes given he has like an hour or so to put in.

[Riz]

@Mat

There you are! Now you are on track. Yes, what you said is totally possible and essentially explains the method to do it in vanilla TW5. Your assumptions regarding the stylesheets are right.  Here is what NodeJS brings to the table

 - you can choose your output folder - not just download folder
 - you can overwrite the modified tiddlers, rather than naming them as index(1).html, index(2).html ...
 - when we are done changing the folder structure as jwd's pointed out, it will make it unnecessary to load all the themes at a point. Only load the tiddlers of theme you need, change them whenever you want to.

[Sylvain Naudin]

Hello Riz,

I'll have a look at t-blog :)

I've used Federatial's Jeremy work to publish static work for french BiblioBox (example 1 and example 2).
The second example work with Discourse integration for post comment. The great thing with Discourse, is that the post is create automatically when you visit first time the html file, and it's great for me to publish static howto. And if you visit the post from forum, it look like great too.

But your work seem to bo more reusable and looks promising.

NB : I have don't find the first time my export with --build.
I retry today, and I've error when I'm already in for example home/sylvain/nodejs/t-blog/Documentation folder :

$ tiddlywiki t-blog/Documentation --build
$:/core/modules/commands/build.js:27
    var buildTargets = $tw.boot.wikiInfo.build;
TypeError: Cannot read property 'build' of null
    at Command.execute ($:/core/modules/commands/build.js:27:38)
    at Commander.executeNextCommand ($:/core/modules/commander.js:82:14)
    at Commander.execute ($:/core/modules/commander.js:46:7)
    at Object.exports.startup ($:/core/modules/startup/commands.js:34:12)
    at $tw.boot.executeNextStartupTask (/usr/lib/node_modules/tiddlywiki/boot/boot.js:1965:10)
    at $tw.boot.executeNextStartupTask (/usr/lib/node_modules/tiddlywiki/boot/boot.js:1963:21)
    at $tw.boot.executeNextStartupTask (/usr/lib/node_modules/tiddlywiki/boot/boot.js:1963:21)
    at $tw.boot.executeNextStartupTask (/usr/lib/node_modules/tiddlywiki/boot/boot.js:1963:21)
    at $tw.boot.executeNextStartupTask (/usr/lib/node_modules/tiddlywiki/boot/boot.js:1963:21)
    at $tw.boot.startup (/usr/lib/node_modules/tiddlywiki/boot/boot.js:1916:11)

If I'm outside from t-blog, (home/sylvain/nodejs) it work and generate html files.


Cheers,
Sylvain

[Riz]

Hi Sylvain,

Documentation folder was not meant as a template!! Its build targets are different from the other folders.

However, if you want to create HTML files in that style, try following these steps and let me know.

In terminal, type:

cd home/sylvain/nodejs/t-blog/Documentation
tiddlywiki --server

Now as usual - go to 127.0.0.1:8080 in browser and you should see and normal tiddlywiki - seemingly empty. Create a new tiddler and tag it TableOfContents. Add some content to it and save.

Now open a second terminal and build with

tiddlywiki --build

In the blog folder, you should have the html file.


Let me know if it works.

[Sylvain Naudin]

OK Riz, I understand that I had to run server first. It works.

Now I have to figure out how to adapt a new theme :)

[Riz]

On Tuesday, 14 February 2017 01:24:38 UTC+5:30, Sylvain Naudin wrote:

OK Riz, I understand that I had to run server first. It works.

Now I have to figure out how to adapt a new theme :)

https://ibnishak.github.io/t-blog/Documentation/Installation.html#Downloading%20the%20theme