[TW5] How to create a basic plugin that bundles some content?

[Jeff Vance]

Maybe this is a really basic question, but I did some searching and I'm having a hard time finding some basic steps on how to create a plugin.  I'm not doing anything advanced with javascript, etc.  I just have a bunch of tiddlers with some custom content, some images, and some macros I created that I want to bundle together.  Is there straight forward way to put all this into a plugin that I can share?  I also want to include some various customizations I've made to some system tiddlers.  Is this possible?  For example, I modified the new journal button to do some extra things.  I appreciate any guidance on this or links to more info.

Cheers,

Jeff

[David Szego]

Don't have it handy since I'm on mobile, but go search for the Tinka plugin. It lets you select a bunch of Tiddlers, set all the right fields, and generate a plugin package. Great stuff.

[Jeff Vance]

Ah, thanks for the tip!  I did some searching and I found the Tinka plugin, although it was a bit hard at first since it is no longer available where it was originally posted. I tried it out and it seems to be working really well.  I only have one problem so far:  one of my tiddlers I want to include is a style sheet tiddler (tagged $:/tags/Stylesheet). I noticed that after packaging this into the plugin, it no longer applies the style sheet modifications.  For example it modifies the color of the site title, changes the font for headings, etc.  Any ideas on why this happens?

[TheDiveO]

Packaging stylesheet tiddlers should work; I'm doing this with my TW5FontAwesome plugin. Diagnosing this without an example may be difficult. So, did you check that your stylesheet tiddler is actually included in the plugin? Did you install your plugin into a fresh TW5? Can you find the tiddler in the sidebar view of shadow tiddlers?

[Andreas Hahn]

Hi Jeff,

when TW packages a plugin, the tiddlers get "transformed" into shadow
tiddlers, which basically means that they will no longer work until the
wiki is reloaded completely, so that the newly packaged plugin gets
loaded properly. Therefore, it is completely normal for stylesheets to
disappear, but they should be incorporated into the plugin just fine and
should be active again, once the wiki is reloaded.

The "Packaging successful" message that pops up does include a warning
about this and recommends to reload the wiki in order to prevent
unwanted or surprising behaviour. Since that means that plugin creation
also comes with a lot of reloading, which also gets rid of the current
StoryList (depending on your setup), Tinka includes a "Help Tab" option
to have a handy way of accessing plugin you're currently working on. You
can read more about that feature in the documentation that comes with Tinka.

I hope this is the behaviour you're seeing as well and that your
stylesheet tiddlers aren't disappearing into nothingness.

/Andreas

> --

[Jed Carty]

I have a bundle tiddlers widget I made to do exactly this. It is part of twederation but I am split it off into its own plugin and just uploaded the demo wiki to http://ooktech.com/TiddlyWiki/TiddlerBundles/

The code will be up on GitHub in a minute.

[Jeff Vance]

Hi Andreas,

Thanks for the explanation of the shadow tiddler transformation, however I think there is something more going on here that is messing up the stylesheet.  Not only did I make sure to save and refresh after creating the plugin, I also downloaded a fresh empty TW and copied the plugin over to it, then saved and refreshed.  Looking more closely, it looks like only some of the stylesheet changes are applied and some aren't.  For example, see below for a sample of some of the changes.  The heading font change is actually being applied. However the other 2 are not (changing site title color and removing borders around inline code).  What's even more strange to me is if I then simply clone the stylesheet tiddler and save it (without making any other changes to it), everything suddenly works.

h1, h2, h3, h4, h5{font-family: "Trebuchet MS";}
.tc-site-title {color: #ff6600;}

code {
    border-radius: 0;
    border: 0;
    background: transparent;
}

[Ton Gerner]

Hi Jeff,

The ordering of all stylesheets can be of importance in case you want to overwrite styles.

$:/core/ui/PageStylesheet (the main stylesheet) uses:

<$list filter="[all[shadows+tiddlers]tag[$:/tags/Stylesheet]]"/>

To test it, go to the filter tab in Advanced search and enter the following as a filter:

[all[shadows+tiddlers]tag[$:/tags/Stylesheet]]

This will give you the order in which the stylesheets will be processed.

With help of a list-after field in your stylesheet, you can rearrange the order, e.g. a list-after field containing $:/themes/tiddlywiki/vanilla/base will process your stylesheet after $:/themes/tiddlywiki/vanilla/base so to overwrite 'vanilla' styles.

Cheers,

Ton

[Jeff Vance]

Thanks Ton!  That was exactly the problem.  The vanilla style was being applied after mine.  I added the list-after field and it works now.

Cheers,

Jeff

[TheDiveO]

 In case you can't live with the dependeny on a specific theme, you can try to use the "!important" booster in CSS declarations as another resort.

[PMario]

On Monday, February 27, 2017 at 5:11:25 PM UTC+1, TheDiveO wrote:

.. booster in CSS declarations as another resort.

IMO the absolutely last resort. Have a look at this talk. It explains why.

-m

[Thomas Elmiger]

Hi all,

As I was not aware of the list-after trick for CSS-tiddlers until now, I have used another method to overcome the effect: specifity.
In CSS the most specific definition wins. In my cases I usually added some super- or middle-classes to my definition. This makes them not only win over less specific definitions, it adds also security to target the desired elements only.

Example: Instead of

.tc-search-drop-down a.tc-tiddlylink:hover { …

I used an additional class from a surrounding element:

.tc-sidebar-lists .tc-search-drop-down a.tc-tiddlylink:hover { …

Good night and good luck!
Thomas

[TheDiveO]

Same here too. I was throwing !important before, so I'm glad this thread showed a better way than !important or renaming stylesheet tiddlers to use stupid alphabetical names, such as aaa, and zzz.

[PMario]

On Tuesday, February 28, 2017 at 6:08:48 PM UTC+1, TheDiveO wrote:

.. use stupid alphabetical names, such as aaa, and zzz.

Oh, that's a simple and battle tested way, from the days of zzConfig ;)

Now slightly adapted to system tiddlers: $:/_mySystemTiddler ... because the underline will push them to the top of the list \o/

-m