TW-Shiraz plugin 2.1.0: Stable release

[Mohammad]

Announcement:Shiraz plugin

Date: Mar 23rd, 2020

Release: 2.1.0

Status: Stable

Shiraz is now a mature and quite powerful plugin and it can be used as a useful addition to Tiddlywiki empty edition.

This stable release focuses on dynamic tables, documentation improvement and distributing under Kookma Plugin Library.

For easy installation drag and drop the attached .tid and use the plugin library as described below.

Star it if you like it and send your feedback!

Documentation proof reading for English is welcome!

--Mohammad

Shiraz Plugin

23rd March 2020 at 6:16pm

start

Tiddlywiki5.1.21+

 

LicenseMIT

 

Release2.1.0

 

Statusstable

What is Shiraz plugin?

Shiraz Shiraz is a small framework including stylesheets, templates and macros to create stylish contents in Tiddlywiki. It uses modified CSS classes from Bootstrap 4.3.1. Shiraz has customized elements like alerts, cards, panels, images, static tables, dynamic tables, badges, texts, ...

Shiraz release 2 is a rewrite of Shiraz 1.2 and aims to be a micro TW (CSS+macro) framework

Tutorials

The Shiraz Tutorial is the starting point to learn more about plugin features, help, demo and examples. See below for online pages.

Install

From the below three methods for installing shiraz plugin, select any suitable method you like.

I. Use plugin library

The simplest method is to have the Kookma Plugin Library which acts exactly like Official Plugin Library

1. Drag and drop $:/config/KookmaPluginLibrary into your wiki
2. Open $:/ControlPanel, Plugins tab and the click on big button Get more plugins
3. Click open library under Kookma Plugin Library
4. Find shiraz and click install, or reinstall if you update shiraz
5. Save and reload your wiki

II. Standalone configuration

Follow these instructions when using Tiddlywiki as a standalone HTML file:

1. Drag and drop $:/plugins/kookma/shiraz into your wiki
2. Save and reload your wiki

III. Client-Server configuration

Follow these instructions when using Tiddlywiki under Node.js:

1. Download the shiraz folder and put it in your Tiddlywiki plugins folder
   • To download you can go to https://github.com/kookma/TW-Shiraz, and click on Clone or download
   • After downloaing the source code, take the plugin from source folder and copy and paste it into your Tiddlywiki plugins folder
2. Quit the server if it is running
3. Add it to your wiki of choice
   1. Edit the tiddlywiki.info file (it is in JSON format) and locate the plugins section (see below)
   2. Add entries corresponding to the plugins you wish to add. Here add shiraz
   3. Take care to retain commas to separate items, but do not terminate the last item in a list with a comma
4. Restart the server

{
	"plugins": [
		"tiddlywiki/codemirror",
		"shiraz"
	],
	"themes": [
		"tiddlywiki/vanilla",
		"tiddlywiki/snowwhite"
	],
    "languages": [
        "en-EN"
    ]
}

For local installation under Node.js,
i. quit the server if it is runing,
ii. put the shiraz folder into your local plugins folder under your wiki folder,
iii. restart the server.

Code and demo

• Demo: https://kookma.github.io/TW-Shiraz
• Code: https://github.com/kookma/TW-Shiraz

It is highly recommended to backup your data before trying any new plugin! Do it before installing shiraz.

More information

• Installing a plugin from the plugin library
• Installing custom plugins on Node.js
• Uninstalling a plugin

History

Revision 2.1.0

• Date: [23rd Mar 2020]
• [NEW] updated to TW 5.1.22pre
• [FIXED] documentation improved

For all changes see ChangeLog

Acknowledgement

• The images for avatars have beeg taken from https://www.w3schools.com/
• Many of CSS are courtesy from Bootstrp 4.3.1
• Dynamic table got several ideas and templates from TiddlyTables by Alan Aldrich
• The list-search was originally developed by Tobias Beer

References

Center image

https://www.w3.org/Style/Examples/007/center.en.html

Multi column layout

https://www.smashingmagazine.com/2019/01/css-multiple-column-layout-multicol/

https://css-tricks.com/guide-responsive-friendly-css-columns/

Flexbox layout

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

W3C CSS: em, px, pt units

https://www.w3.org/Style/Examples/007/units.en.html

Flexbox cheatsheet

http://yoksel.github.io/flex-cheatsheet/

[Ken Gray]

This is amazing!  is there anyway I can get the tutorial to my local system?

[Mark S.]

It looks like if you click on the "doc" tag pill, you can drag and drop it into your own TW file (drag and hover over top of TW until green bar appears. Release. From resulting import tiddler, click "Import"). There will be a lot of tiddlers.

[Mark S.]

P.S. It's been awhile since we've heard from Mohammad. Hope you're doing OK out there, Mohammad!

[Ken Gray]

Perfect Thanks!

[TW Tones]

Mark,

Yes, I noticed too, I expect world politics is disconnecting him from us. 

Sad

Tony