| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,8 @@ | ||
| title: $:/snippets/paletteswitcher | ||
|
|
||
| <$linkcatcher to="$:/palette"> | ||
| <div class="tc-chooser"><$list filter="[all[shadows+tiddlers]tag[$:/tags/Palette]sort[description]]"><$set name="cls" filter="[all[current]prefix{$:/palette}]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item"><div class=<<cls>>><$link to={{!!title}}>''<$view field="name" format="text"/>'' - <$view field="description" format="text"/>{{||$:/snippets/currpalettepreview}}</$link> | ||
| </div></$set> | ||
| </$list> | ||
| </div> | ||
| </$linkcatcher> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| title: $:/snippets/peek-stylesheets | ||
|
|
||
| \define expandable-stylesheets-list() | ||
| <ol> | ||
| <$list filter="[all[shadows+tiddlers]tag[$:/tags/Stylesheet]!has[draft.of]]"> | ||
| <$vars state=<<qualify "$:/config/peek-stylesheets/open/">>> | ||
| <$set name="state" value={{{ [<state>addsuffix<currentTiddler>] }}}> | ||
| <li> | ||
| <$reveal type="match" state=<<state>> text="yes" tag="span"> | ||
| <$button set=<<state>> setTo="no" class="tc-btn-invisible"> | ||
| {{$:/core/images/down-arrow}} | ||
| </$button> | ||
| </$reveal> | ||
| <$reveal type="nomatch" state=<<state>> text="yes" tag="span"> | ||
| <$button set=<<state>> setTo="yes" class="tc-btn-invisible"> | ||
| {{$:/core/images/right-arrow}} | ||
| </$button> | ||
| </$reveal> | ||
| <$link> | ||
| <$view field="title"/> | ||
| </$link> | ||
| <$reveal type="match" state=<<state>> text="yes" tag="div"> | ||
| <$set name="source" tiddler=<<currentTiddler>>> | ||
| <$wikify name="styles" text=<<source>>> | ||
| <pre> | ||
| <code> | ||
| <$text text=<<styles>>/> | ||
| </code> | ||
| </pre> | ||
| </$wikify> | ||
| </$set> | ||
| </$reveal> | ||
| </li> | ||
| </$set> | ||
| </$vars> | ||
| </$list> | ||
| </ol> | ||
| \end | ||
|
|
||
| \define stylesheets-list() | ||
| <ol> | ||
| <$list filter="[all[shadows+tiddlers]tag[$:/tags/Stylesheet]!has[draft.of]]"> | ||
| <li> | ||
| <$link> | ||
| <$view field="title"/> | ||
| </$link> | ||
| <$set name="source" tiddler=<<currentTiddler>>> | ||
| <$wikify name="styles" text=<<source>>> | ||
| <pre> | ||
| <code> | ||
| <$text text=<<styles>>/> | ||
| </code> | ||
| </pre> | ||
| </$wikify> | ||
| </$set> | ||
| </li> | ||
| </$list> | ||
| </ol> | ||
| \end | ||
|
|
||
| <$vars modeState=<<qualify "$:/config/peek-stylesheets/mode/">>> | ||
|
|
||
| <$reveal type="nomatch" state=<<modeState>> text="expanded" tag="div"> | ||
| <$button set=<<modeState>> setTo="expanded" class="tc-btn-invisible">{{$:/core/images/chevron-right}} {{$:/language/ControlPanel/Stylesheets/Expand/Caption}}</$button> | ||
| </$reveal> | ||
| <$reveal type="match" state=<<modeState>> text="expanded" tag="div"> | ||
| <$button set=<<modeState>> setTo="restored" class="tc-btn-invisible">{{$:/core/images/chevron-down}} {{$:/language/ControlPanel/Stylesheets/Restore/Caption}}</$button> | ||
| </$reveal> | ||
|
|
||
| <$reveal type="nomatch" state=<<modeState>> text="expanded" tag="div"> | ||
| <<expandable-stylesheets-list>> | ||
| </$reveal> | ||
| <$reveal type="match" state=<<modeState>> text="expanded" tag="div"> | ||
| <<stylesheets-list>> | ||
| </$reveal> | ||
|
|
||
| </$vars> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,2 @@ | ||
| title: $:/tags/EditorToolbar | ||
| list: $:/core/ui/EditorToolbar/paint $:/core/ui/EditorToolbar/opacity $:/core/ui/EditorToolbar/line-width $:/core/ui/EditorToolbar/rotate-left $:/core/ui/EditorToolbar/clear $:/core/ui/EditorToolbar/bold $:/core/ui/EditorToolbar/italic $:/core/ui/EditorToolbar/strikethrough $:/core/ui/EditorToolbar/underline $:/core/ui/EditorToolbar/superscript $:/core/ui/EditorToolbar/subscript $:/core/ui/EditorToolbar/mono-line $:/core/ui/EditorToolbar/mono-block $:/core/ui/EditorToolbar/quote $:/core/ui/EditorToolbar/list-bullet $:/core/ui/EditorToolbar/list-number $:/core/ui/EditorToolbar/heading-1 $:/core/ui/EditorToolbar/heading-2 $:/core/ui/EditorToolbar/heading-3 $:/core/ui/EditorToolbar/heading-4 $:/core/ui/EditorToolbar/heading-5 $:/core/ui/EditorToolbar/heading-6 $:/core/ui/EditorToolbar/link $:/core/ui/EditorToolbar/excise $:/core/ui/EditorToolbar/picture $:/core/ui/EditorToolbar/stamp $:/core/ui/EditorToolbar/size $:/core/ui/EditorToolbar/editor-height $:/core/ui/EditorToolbar/more $:/core/ui/EditorToolbar/preview $:/core/ui/EditorToolbar/preview-type |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,8 @@ | ||
| title: $:/snippets/themeswitcher | ||
|
|
||
| <$linkcatcher to="$:/theme"> | ||
| <div class="tc-chooser"><$list filter="[plugin-type[theme]sort[title]]"><$set name="cls" filter="[all[current]field:title{$:/theme}] [[$:/theme]!has[text]addsuffix[s/tiddlywiki/vanilla]field:title<currentTiddler>] +[limit[1]]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item"><div class=<<cls>>><$link to={{!!title}}>''<$view field="name" format="text"/>'' <$view field="description" format="text"/></$link></div> | ||
| </$set> | ||
| </$list> | ||
| </div> | ||
| </$linkcatcher> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,18 @@ | ||
| title: $:/snippets/viewswitcher | ||
|
|
||
| \define icon() | ||
| $:/core/images/storyview-$(storyview)$ | ||
| \end | ||
| <$linkcatcher to="$:/view"> | ||
| <div class="tc-chooser"> | ||
| <$list filter="[storyviews[]]" variable="storyview"> | ||
| <$set name="cls" filter="[<storyview>prefix{$:/view}]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item"><div class=<<cls>>> | ||
| <$link to=<<storyview>>> | ||
| <$transclude tiddler=<<icon>>/> | ||
| <$text text=<<storyview>>/> | ||
| </$link> | ||
| </div> | ||
| </$set> | ||
| </$list> | ||
| </div> | ||
| </$linkcatcher> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| title: $:/config/DefaultSidebarTab | ||
|
|
||
|
|
||
| $:/codemirrordemo/sidebar/cheatsheet | ||
|
|
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,43 @@ | ||
| title: HelloThere | ||
|
|
||
| This is a demo of [[TiddlyWiki5|https://tiddlywiki.com]] incorporating a plugin for the [[CodeMirror|http://codemirror.net/]] text editor for the web. | ||
|
|
||
| The ~CodeMirror plugin can be extended with ~AddOns for more functionality: | ||
|
|
||
| * Search and Replace | ||
| * Text - Autocompletion | ||
| * Syntax highlighting | ||
| * Fullscreen editing | ||
| * Keymaps in the style of Emacs, Sublime Text or Vim | ||
| * Closing Brackets | ||
| * Closing Tags | ||
|
|
||
| NOTE: This demo has the ''Sublime Text'' keymap installed. | ||
|
|
||
| !!!Try editing the tiddler [[Draft of 'LoremIpsum']] to try out the editor. | ||
|
|
||
| Some commands and functions to try: | ||
|
|
||
| * Ctrl+F : Search panel to search for expressions | ||
| * Ctrl+H (sublime text shortcut, default is Ctrl+Shift+R) : Search and Replace | ||
| * Ctrl+Space : Triggers Autocompletion | ||
| * typing an opening bracket like `{` automatically creates the closing bracket `}` | ||
| * tiddlers with type `application/javascript`, `application/json`, `text/css`, `text/html`, `text/xml`, `text/x-markdown` and `text/x-tiddlywiki` have Syntax Highlighting | ||
| * tiddlers with type `text/html` automatically close tags like `<div>` when the closing `>` gets typed | ||
| * Multiple cursors: holding Ctrl pressed while selecting words results in multiple cursors. If you type, all selections will update | ||
|
|
||
| This demo uses the ''Sublime Text Keymap'' - See the Sidebar Tab ''Keymap'' or the [[Sublime Text Keymap Readme|$:/plugins/tiddlywiki/codemirror-keymap-sublime-text/readme]] for all available keyboard shortcuts | ||
|
|
||
| To add the base plugin to your own ~TiddlyWiki5, just drag this link to the browser window: | ||
|
|
||
| [[$:/plugins/tiddlywiki/codemirror]] | ||
|
|
||
| [[CodeMirror plugin Readme|$:/plugins/tiddlywiki/codemirror/readme]] | ||
|
|
||
| [[CodeMirror plugin Usage|$:/plugins/tiddlywiki/codemirror/usage]] | ||
|
|
||
| To add ~AddOns to your ~CodeMirror plugin, go to ~ControlPanel - Plugins and drag the desired ~AddOn to your wiki browser window | ||
|
|
||
| The configuration for ~AddOns is done automatically, configuration for sensible settings can be done in ~ControlPanel - Settings - ~CodeMirror | ||
|
|
||
|
|
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| title: $:/config/codemirror/keyMap | ||
| type: string | ||
|
|
||
| sublime |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| caption: Keymap | ||
| tags: $:/tags/SideBar | ||
| title: $:/codemirrordemo/sidebar/cheatsheet | ||
|
|
||
|
|
||
| |Shortcut |Function |h | ||
| |Shift-Tab |indentLess | | ||
| |Shift-Ctrl-K |deleteLine | | ||
| |Alt-Q |wrapLines | | ||
| |Alt-T |transposeChars | | ||
| |Alt-Left |goSubwordLeft | | ||
| |Alt-Right |goSubwordRight | | ||
| |Ctrl-Up |scrollLineUp | | ||
| |Ctrl-Down |scrollLineDown | | ||
| |Alt-L |selectLine | | ||
| |Shift-Alt-L |splitSelectionByLine | | ||
| |Ctrl-Esc |singleSelectionTop | | ||
| |Shift-Enter |insertLineAfter | | ||
| |Shift-Ctrl-Enter |insertLineBefore | | ||
| |Ctrl-D |selectNextOccurrence | | ||
| |Shift-Ctrl-Space |selectScope | | ||
| |Shift-Ctrl-M |selectBetweenBrackets | | ||
| |Alt-M |goToBracket | | ||
| |Shift-Ctrl-Up |swapLineUp | | ||
| |Shift-Ctrl-Down |swapLineDown | | ||
| |Ctrl-/ |toggleCommentIndented | | ||
| |Ctrl-J |joinLines | | ||
| |Shift-Ctrl-D |duplicateLine | | ||
| |F9 |sortLines | | ||
| |Ctrl-F9 |sortLinesInsensitive | | ||
| |F2 |nextBookmark | | ||
| |Shift-F2 |prevBookmark | | ||
| |Ctrl-F2 |toggleBookmark | | ||
| |Shift-Ctrl-F2 |clearBookmarks | | ||
| |Alt-F2 |selectBookmarks | | ||
| |Backspace |smartBackspace | | ||
| |Ctrl-K Ctrl-K |delLineRight | | ||
| |Ctrl-K Alt-U |upcaseAtCursor | | ||
| |Ctrl-K Alt-L |downcaseAtCursor | | ||
| |Ctrl-K Ctrl-Space |setSublimeMark | | ||
| |Ctrl-K Ctrl-A |selectToSublimeMark | | ||
| |Ctrl-K Alt-D |deleteToSublimeMark | | ||
| |Ctrl-K Ctrl-X |swapWithSublimeMark | | ||
| |Ctrl-K Ctrl-Y |sublimeYank | | ||
| |Ctrl-K Ctrl-C |showInCenter | | ||
| |Ctrl-K Ctrl-G |clearBookmarks | | ||
| |Ctrl-K Ctrl-Backspace |delLineLeft | | ||
| |Ctrl-K Ctrl-0 |unfoldAll | | ||
| |Ctrl-K Ctrl-J |unfoldAll | | ||
| |Ctrl-Alt-Up |addCursorToPrevLine | | ||
| |Ctrl-Alt-Down |addCursorToNextLine | | ||
| |Ctrl-F3 |findUnder | | ||
| |Shift-Ctrl-F3 |findUnderPrevious | | ||
| |Shift-Ctrl-[ |fold | | ||
| |Shift-Ctrl-] |unfold | | ||
| |Ctrl-H |replace | | ||
|
|
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| title: $:/SiteSubtitle | ||
|
|
||
| ~CodeMirror plugins for ~TiddlyWiki |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,3 @@ | ||
| title: $:/SiteTitle | ||
|
|
||
| ~CodeMirror Demo |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| title: $:/themes/codemirror/tiddlywiki | ||
| tags: $:/tags/Stylesheet | ||
| module-type: codemirror-theme | ||
| name: tiddlywiki | ||
|
|
||
| .cm-s-tiddlywiki { | ||
| font-size: 1em; | ||
| line-height: 1.5em; | ||
| letter-spacing: 0.3px; | ||
| word-spacing: 1px; | ||
| background: <<colour page-background>>; | ||
| color: <<colour foreground>>; | ||
| } | ||
| .cm-s-tiddlywiki .CodeMirror-lines { | ||
| padding: 8px 0; | ||
| } | ||
| .cm-s-tiddlywiki .CodeMirror-gutters { | ||
| background-color: <<colour page-background>>; | ||
| padding-right: 10px; | ||
| z-index: 3; | ||
| border: none; | ||
| } | ||
| .cm-s-tiddlywiki div.CodeMirror-cursor { | ||
| border-left: 3px solid <<colour very-muted-foreground>>; | ||
| } | ||
| .cm-s-tiddlywiki .CodeMirror-activeline-background { | ||
| background: <<colour tiddler-editor-fields-even>>; | ||
| } | ||
| .cm-s-tiddlywiki .CodeMirror-selected { | ||
| background: <<colour muted-foreground>>; | ||
| } | ||
| .cm-s-tiddlywiki .cm-comment { | ||
| font-style: italic; | ||
| color: <<colour muted-foreground>>; | ||
| } | ||
| .cm-s-tiddlywiki .CodeMirror-linenumber { | ||
| color: italic; | ||
| } | ||
|
|
||
| .cm-s-tiddlywiki span.cm-atom, .cm-s-tiddlywiki span.cm-number, .cm-s-tiddlywiki span.cm-keyword, .cm-s-tiddlywiki span.cm-variable, .cm-s-tiddlywiki span.cm-attribute, .cm-s-tiddlywiki span.cm-quote, .cm-s-tiddlywiki-light span.cm-hr, .cm-s-tiddlywiki-light span.cm-link { color: #063289; } | ||
|
|
||
| .cm-s-tiddlywiki span.cm-property { color: #b29762; } | ||
| .cm-s-tiddlywiki span.cm-punctuation, .cm-s-tiddlywiki span.cm-unit, .cm-s-tiddlywiki span.cm-negative { color: #063289; } | ||
| .cm-s-tiddlywiki span.cm-string, .cm-s-tiddlywiki span.cm-operator { color: #1659df; } | ||
| .cm-s-tiddlywiki span.cm-positive { color: #896724; } | ||
|
|
||
| .cm-s-tiddlywiki span.cm-variable-2, .cm-s-tiddlywiki span.cm-variable-3, .cm-s-tiddlywiki span.cm-type, .cm-s-tiddlywiki span.cm-string-2, .cm-s-tiddlywiki span.cm-url { color: #896724; } | ||
| .cm-s-tiddlywiki span.cm-def, .cm-s-tiddlywiki span.cm-tag, .cm-s-tiddlywiki span.cm-builtin, .cm-s-tiddlywiki span.cm-qualifier, .cm-s-tiddlywiki span.cm-header, .cm-s-tiddlywiki span.cm-em { color: #2d2006; } | ||
| .cm-s-tiddlywiki span.cm-bracket, .cm-s-tiddlywiki span.cm-comment { color: #b6ad9a; } | ||
|
|
||
| /* using #f00 red for errors, don't think any of the colorscheme variables will stand out enough, ... maybe by giving it a background-color ... */ | ||
| /* .cm-s-tiddlywiki span.cm-error { background: #896724; color: #728fcb; } */ | ||
| .cm-s-tiddlywiki span.cm-error, .cm-s-tiddlywiki span.cm-invalidchar { color: #f00; } | ||
|
|
||
| .cm-s-tiddlywiki span.cm-header { font-weight: normal; } | ||
| .cm-s-tiddlywiki .CodeMirror-matchingbracket { text-decoration: underline; color: #faf8f5 !important; } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| title: $:/config/codemirror/theme | ||
|
|
||
| tiddlywiki |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| title: $:/config/codemirror/lineNumbers | ||
| type: bool | ||
|
|
||
| true |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| title: $:/themes/tiddlywiki/vanilla/options/sidebarlayout | ||
|
|
||
| fluid-fixed |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| title: $:/config/codemirror/styleActiveLine | ||
| type: bool | ||
|
|
||
| true |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| created: 20180104155916980 | ||
| modified: 20180104160025999 | ||
| tags: HookMechanism | ||
| title: Hook: th-page-refreshed | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| This hook notifies plugins that a page refresh has just occurred. It is typically used to apply post-rendering effects. | ||
|
|
||
| Hook function parameters: | ||
|
|
||
| * (none) | ||
|
|
||
| Return value: | ||
|
|
||
| * (none) |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| created: 20180409142128584 | ||
| modified: 20180409142128584 | ||
| tags: HookMechanism | ||
| title: Hook: th-server-command-post-start | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| This hook allows plugins to extend the TiddlyWiki server command after it initializes. The two | ||
| most obvious use cases are adding routes (such as an attachments folder for external files) | ||
| to the SimpleServer instance and adding a websockets handler to the HTTP server. | ||
|
|
||
| Hook function parameters: | ||
|
|
||
| * SimpleServer instance | ||
| ** Defined in core/modules/commands/server.js | ||
| * NodeJS HTTP Server instance | ||
| ** See the NodeJS docs at [ext[https://nodejs.org/docs/latest-v8.x/api/http.html#http_class_http_server]] | ||
|
|
||
| Return value is ignored. |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| title: $:/ContributionBanner | ||
| tags: $:/tags/EditTemplate | ||
| list-after: $:/core/ui/EditTemplate/title | ||
|
|
||
| \define makeGitHubLink() | ||
| https://github.com/Jermolene/TiddlyWiki5/edit/master/editions/dev/tiddlers/$(githubLink)$ | ||
| \end | ||
| \define innerMakeGitHubLink(linkText) | ||
| <$set name="githubLink" value={{$:/config/OriginalTiddlerPaths##$(draftOfTiddler)$}}> | ||
| <a href=<<makeGitHubLink>> class="tc-tiddlylink-external" target="_blank" rel="noopener noreferrer">$linkText$</a> | ||
| </$set> | ||
| \end | ||
| \define outerMakeGitHubLink(linkText) | ||
| <$set name="draftOfTiddler" value={{$(currentTiddler)$!!draft.of}}> | ||
| <<innerMakeGitHubLink "$linkText$">> | ||
| </$set> | ||
| \end | ||
| <div class="tc-improvement-banner"> | ||
| {{$:/core/images/star-filled}} Can you help us improve this documentation? [ext[Find out how|https://tiddlywiki.com/#Improving%20TiddlyWiki%20Documentation]] to edit <<outerMakeGitHubLink "this tiddler on ~GitHub">> | ||
| </div> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| title: $:/editions/tw5.com/TiddlerInfo/Sources | ||
| tags: $:/tags/TiddlerInfo | ||
| caption: Sources | ||
|
|
||
| \define github-link-base() | ||
| https://github.com/Jermolene/TiddlyWiki5/blob/master/editions/dev/tiddlers/$(title)$ | ||
| \end | ||
|
|
||
| \define make-github-link() | ||
| <$set name="title" value={{$:/config/OriginalTiddlerPaths##$(currentTiddler)$}}> | ||
| <$set name="title" filter="[<title>encodeuricomponent[]]" select="0"> | ||
| <a href=<<github-link-base>> class="tc-tiddlylink-external" target="_blank" rel="noopener noreferrer"><$text text=<<github-link-base>>/></a> | ||
| </$set> | ||
| </$set> | ||
| \end | ||
|
|
||
| <$list filter="[all[current]!is[system]!is[shadow]]"> | ||
|
|
||
| Help us to improve the documentation by sending a ~GitHub pull request for this tiddler: | ||
|
|
||
| * <<make-github-link>> | ||
|
|
||
| </$list> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| caption: 5.1.17 | ||
| created: 20180425155658451 | ||
| modified: 20180425155658451 | ||
| tags: ReleaseNotes | ||
| title: Release 5.1.17 | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| //[[See GitHub for detailed change history of this release|https://github.com/Jermolene/TiddlyWiki5/compare/v5.1.16...v5.1.17]]// | ||
|
|
||
| !! New and Improved Plugins | ||
|
|
||
| * | ||
|
|
||
| !! Translation Improvements | ||
|
|
||
| New and improved translations: | ||
|
|
||
| * | ||
|
|
||
| !! Usability Improvements | ||
|
|
||
| * | ||
|
|
||
| !! Hackability Improvements | ||
|
|
||
| * | ||
|
|
||
| !! Bug Fixes | ||
|
|
||
| * | ||
|
|
||
| !! Developer Bug Fixes and Improvements | ||
|
|
||
| * | ||
|
|
||
|
|
||
| ! Contributors | ||
|
|
||
| [[@Jermolene|https://github.com/Jermolene]] would like to thank the contributors to this release who have generously given their time to help improve TiddlyWiki: | ||
|
|
||
| * [[@example|https://github.com/example]] | ||
|
|
||
|
|
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| created: 20171212104509964 | ||
| modified: 20171212104733995 | ||
| tags: Resources | ||
| title: Plugins by Uwe Stuehler | ||
| type: text/vnd.tiddlywiki | ||
| url: https://ustuehler.github.io | ||
|
|
||
| A collection of plugins from Uwe Stuehler, including: | ||
|
|
||
| * Material Edition, a theme based on Google's "material" design language | ||
| * A wrapper for the [[MUURI plugin|https://github.com/haltu/muuri]], bringing complex "masonry"-style layouts to TiddlyWiki | ||
|
|
||
| {{!!url}} |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| created: 20180320020552940 | ||
| modified: 20180320020554172 | ||
| tags: Resources | ||
| title: TW5-SingleExecutable by Jed Carty | ||
| type: text/vnd.tiddlywiki | ||
| url: https://github.com/OokTech/TW5-SingleExecutable | ||
|
|
||
| TiddlyWiki5 Packaged with the multi-user plugin in a single executable file. | ||
|
|
||
| {{!!url}} | ||
|
|
||
| <<< | ||
| Tiddlywiki, node js, multiuser plugin - all packaged into a single file so user can just download the file and run it and not have to install anything else. Versions available for windows, osx, and linux. | ||
| <<< |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| created: 20180309162923236 | ||
| modified: 20180309164105386 | ||
| tags: Resources | ||
| title: Widdly by Opennota | ||
| type: text/vnd.tiddlywiki | ||
| url: https://github.com/opennota/widdly | ||
|
|
||
| A cross platform server application that can save tiddlers to a local database | ||
|
|
||
| {{!!url}} | ||
|
|
||
| <<< | ||
| a minimal self-hosted app, written in Go, that can serve as a backend for a personal TiddlyWiki. | ||
| <<< |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| created: 20171219171531482 | ||
| modified: 20171219171730344 | ||
| tags: Resources | ||
| title: "ATWiki" by Lamusia Project | ||
| type: text/vnd.tiddlywiki | ||
| url: https://lamusia.github.io/#ATWiki | ||
|
|
||
| A desktop application for TiddlyWiki, running on Windows. | ||
|
|
||
| {{!!url}} | ||
|
|
||
| <<< | ||
| TiddlyWiki for Windows. A unique non-linear notebook for capturing, organising and sharing complex information. | ||
| <<< |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| created: 20180309160958926 | ||
| modified: 20180309160118848 | ||
| tags: Resources | ||
| title: "Dynamic Tables" by Jed Carty | ||
| type: text/vnd.tiddlywiki | ||
| url: http://ooktech.com/jed/ExampleWikis/DynamicTables/ | ||
|
|
||
| //''Dynamic Tables''// is a set of macros that allow you to create tables where the rows are created from tiddlers and the columns from the tiddler fields, or where the columns are created from tiddlers and the rows from their fields. Individual cells can be edited on the fly. Row tables can be sorted by columns and column tables can be sorted by rows. | ||
|
|
||
| {{!!url}} |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| created: 20171115160958926 | ||
| modified: 20171115161136049 | ||
| tags: Resources | ||
| title: "Tekan: Kanban that stays with you" by Riz | ||
| type: text/vnd.tiddlywiki | ||
| url: https://ibnishak.github.io/Tesseract/projects/tekan/Tekan.html | ||
|
|
||
| A Kanban implementation for TiddlyWiki with a familiar look and feel (see the [[demo|https://ibnishak.github.io/Tesseract/projects/tekan/]]). | ||
|
|
||
| {{!!url}} | ||
|
|
||
| <<< | ||
| This is Tekan, a TW based kanban. The easiest way to know tekan is to use it. So let us begin, shall we? | ||
| <<< | ||
|
|
||
|
|
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| caption: file-backups | ||
| created: 201711161655 | ||
| delivery: Browser Extension | ||
| description: Browser extension for Firefox | ||
| method: save | ||
| modified: 201711161655 | ||
| tags: Firefox Saving Resources plugins | ||
| title: "file-backups" Extension for Firefox by pmario | ||
| type: text/vnd.tiddlywiki | ||
| url: https://github.com/pmario/file-backups | ||
|
|
||
| An extension for Mozilla Firefox that smoothes out some of the friction from ~TiddlyWiki's built-in [[HTML5 fallback saver|Saving with the HTML5 fallback saver]], making it almost as easy to use as ~TiddlyFox. The workflow is intended to work out of the box, without configuration. | ||
|
|
||
| https://github.com/pmario/file-backups which contains links to the documentation and introduction video(s). | ||
|
|
||
| A chrome version is planned! |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| created: 20171219165418434 | ||
| modified: 20171219165845495 | ||
| tags: Resources | ||
| title: "muritest" by Simon Huber | ||
| type: text/vnd.tiddlywiki | ||
| url: http://muritest.tiddlyspot.com | ||
|
|
||
| A terrific demo of drag and drop, pan and zoom, and other sophisticated touch effects. Based on the [[muuri plugin by Uwe Stuehler|Plugins by Uwe Stuehler]]. | ||
|
|
||
| {{!!url}} |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| created: 20180306113011255 | ||
| modified: 20180306161225140 | ||
| tags: Concepts | ||
| title: DefaultTiddlers | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| "Default tiddlers" refers to the list of tiddlers that is opened at startup in the browser if the address bar does not include a [[permalink|PermaLinks]]). | ||
|
|
||
| At startup, the text of the system tiddler [[$:/DefaultTiddlers]] is retrieved and evaluated as a [[filter expression|Filter Expression]]. The resulting list of titles is then inserted into the [[story river|Story River]]. | ||
|
|
||
| The [[control panel|$:/ControlPanel]] ''info/basics'' tab includes a text box for direct access to [[$:/DefaultTiddlers]]. | ||
|
|
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,14 @@ | ||
| created: 20180113144350185 | ||
| modified: 20180113153832195 | ||
| tags: Concepts | ||
| title: SystemTiddlers | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| Tiddlers are classified as system tiddlers if their title starts with the special string `$:/`. The only difference from ordinary tiddlers is that they are hidden from most searches and lists in the sidebar. (In particular, system tiddlers are shown in the "More/System" list). | ||
|
|
||
| System tiddlers provide a simple way to hide the internal components of TiddlyWiki so that they don't clutter things up, getting in the way of the users content. | ||
|
|
||
| Many of the system tiddlers follow the convention of using further slashes to delineate the components of the title. For example: `$:/config/BitmapEditor/LineWidth`. | ||
|
|
||
| You don't need to create your own system tiddlers, but it can be useful when customising TiddlyWiki. For example, if you create a custom palette you might call it `$:/_MyPalette` so that (a) it is hidden from searches/lists and (b) it will appear at the top of the system tiddler list for easy reference. | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| created: 20180305174809089 | ||
| modified: 20180306161405033 | ||
| tags: [[Customise TiddlyWiki]] | ||
| title: Configuring startup tiddlers | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| You can configure ~TiddlyWiki to start up using whatever individual or group of tiddlers you want using the [[default tiddlers|DefaultTiddlers]] mechanism. | ||
|
|
||
| In the control panel under the info tab is an input field labeled "Choose which tiddlers are displayed at startup". You can list whatever tiddlers you want to open at startup. Use double square brackets for titles containing spaces. For example: | ||
|
|
||
| ``` | ||
| FirstTiddler | ||
| SecondTiddler | ||
| [[Third Tiddler]] | ||
| ``` | ||
|
|
||
| You can also use [[filter expressions|Filter Expression]] to open more than one tiddler. For example: | ||
|
|
||
| ``` | ||
| [tag[HelloThere]] | ||
| ``` | ||
|
|
||
| will open all tiddlers tagged as <<tag HelloThere>>. | ||
|
|
||
| You can also use this technique to [[preserve open tiddlers at startup|Preserving open tiddlers at startup]] |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,9 @@ | ||
| created: 20130830084200000 | ||
| modified: 20180421162644074 | ||
| tags: Definitions | ||
| title: TiddlySpace | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| TiddlySpace was a public TiddlyWiki hosting service that operated from 2010 until 2016. | ||
|
|
||
| TiddlySpace, and the underlying TiddlyWeb, was originally sponsored by [[Osmosoft]] at [[BT]]. |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| created: 20180222072026299 | ||
| list: [[Apple 6]] [[Apple 7]] [[Apple 8]] [[Apple 9]] [[Apple 10]] [[Apple 20]] [[Apple 30]] [[Apple 100]] | ||
| modified: 20180222072215582 | ||
| tags: | ||
| title: Apple | ||
|
|
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| title: GroupedLists | ||
| tags: ListWidget Lists | ||
| created: 20150106180000000 | ||
| modified: 20150221230117000 | ||
|
|
||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| title: SampleTiddlerFirst | ||
| tags: sampletag1 sampletag2 | ||
|
|
||
| This is a test tiddler called SampleTiddlerFirst. |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| title: SampleTiddlerSecond | ||
| tags: sampletag1 sampletag2 | ||
|
|
||
| This test tiddler is called SampleTiddlerSecond. |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| title: SampleTiddlerThird | ||
| tags: sampletag1 sampletag2 | ||
|
|
||
| This tiddler SampleTiddlerThird is the third test tiddler. |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| created: 20180307153530187 | ||
| modified: 20180307153530187 | ||
| tags: Learning | ||
| title: TaskManagementExample (Draggable) | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| This is a version of the TaskManagementDemo enhanced with the ability to drag and drop the task list to re-order them. | ||
|
|
||
| ! Outstanding tasks | ||
|
|
||
| //Drag the tasks to re-order them// | ||
|
|
||
| <<list-tagged-draggable tag:"task" subFilter:"!has[draft.of]!tag[done]" itemTemplate:"TaskManagementExampleDraggableTemplate" emptyMessage:"You don't have any active tasks">> | ||
|
|
||
| ! Completed tasks | ||
|
|
||
| //(Listed in reverse order of completion)// | ||
|
|
||
| <$list filter="[!has[draft.of]tag[task]tag[done]sort[created]]"> | ||
| <div> | ||
| <$checkbox tag="done"> ~~<$link to={{!!title}}><$view field="title"/></$link>~~</$checkbox> | ||
| </div> | ||
| </$list> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| created: 20180307153530187 | ||
| modified: 20180307153530187 | ||
| tags: Learning | ||
| title: TaskManagementExampleDraggableTemplate | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| <$checkbox tag="done"> <$link to={{!!title}}><$view field="title"/></$link></$checkbox> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| created: 20180323092308399 | ||
| modified: 20180323092547312 | ||
| tags: Features | ||
| title: StartupActions | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| During startup, TiddlyWiki executes any ActionWidgets found in tiddlers with the following system tags: | ||
|
|
||
| * <<tag "$:/tags/StartupAction">> (executed on all platforms) | ||
| * <<tag "$:/tags/StartupAction/Browser">> (only executed when running in the browser) | ||
| * <<tag "$:/tags/StartupAction/Node">> (only executed when running under Node.js) | ||
|
|
||
| Startup actions are useful for customising TiddlyWiki according to environmental factors such as the screen size. For example, the following action widgets when placed in a tiddler tagged <<tag "$:/tags/StartupAction/Browser">> will cause the sidebar to be hidden by default when the screen width is less than 1000 pixels: | ||
|
|
||
| ``` | ||
| <$reveal type="lt" state="$:/info/browser/screen/width" text="3000"> | ||
| <$action-setfield $tiddler="$:/state/sidebar" $value="no"/> | ||
| </$reveal> | ||
|
|
||
| <$reveal type="gteq" state="$:/info/browser/screen/width" text="3000"> | ||
| <$action-setfield $tiddler="$:/state/sidebar" $value="yes"/> | ||
| </$reveal> | ||
| ``` | ||
|
|
||
| Note that global macros are not available within startup action tiddlers by default. If you need to access them then you'll need to explicitly include them: | ||
|
|
||
| ``` | ||
| <$importvariables filter="[[$:/core/ui/PageMacros]] [all[shadows+tiddlers]tag[$:/tags/Macro]!has[draft.of]]"> | ||
| ...actions that depend upon global macros... | ||
| </$importvariables> | ||
| ``` |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| created: 20180222071947788 | ||
| modified: 20180222072601161 | ||
| tags: [[sortan Operator]] [[Operator Examples]] | ||
| title: sortan Operator (Examples) | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| These examples make use of the [[Apple]] tiddler. | ||
|
|
||
| <<.operator-example 1 "[list[Apple]sortan[]]">> | ||
| <<.operator-example 2 "[list[Apple]!sortan[]]">> | ||
| <<.operator-example 3 "App-10-A App-9-B App-10-B App-9-A +[sortan[]]">> | ||
|
|
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| created: 20180403164143915 | ||
| modified: 20180403164257147 | ||
| tags: [[plugintiddlers Operator]] [[Operator Examples]] | ||
| title: subtiddlerfields Operator (Examples) | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| <<.operator-example 1 "[[$:/core/copyright.txt]subtiddlerfields[$:/core]]">> | ||
|
|
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| caption: sortan | ||
| created: 20180222071605739 | ||
| modified: 20180223012553446 | ||
| op-input: a [[selection of titles|Title Selection]] | ||
| op-neg-output: the input, likewise sorted into descending order | ||
| op-output: the input, sorted into ascending order by field <<.field F>>, treating field values as alphanumerics | ||
| op-parameter: the name of a [[field|TiddlerFields]], defaulting to <<.field title>> | ||
| op-parameter-name: F | ||
| op-purpose: sort the input by text field considering them as alphanumerics | ||
| tags: [[Filter Operators]] [[Common Operators]] [[Field Operators]] [[Order Operators]] [[Negatable Operators]] | ||
| title: sortan Operator | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| The difference between uppercase and lowercase letters is ignored. | ||
|
|
||
| <<.operator-examples "sortan">> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| caption: subtiddlerfields | ||
| created: 20180403164138703 | ||
| modified: 20180403164644231 | ||
| op-input: a [[selection|Title Selection]] of tiddler titles | ||
| op-output: all field names present in the selected tiddlers within the plugin named <<.place P>> | ||
| op-parameter: the title of a plugin | ||
| op-parameter-name: P | ||
| op-purpose: select all fields present in the selected tiddlers within a plugin | ||
| tags: [[Filter Operators]] [[Special Operators]] | ||
| title: subtiddlerfields Operator | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| <<.operator-examples "subtiddlerfields">> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| title: HelloThumbnail - TiddlyFox Apocalypse | ||
| tags: HelloThumbnail | ||
| color: #B7D5EA | ||
| background-color: #fff | ||
| caption: ~TiddlyFox Apocalypse | ||
| link: TiddlyFox Apocalypse | ||
| image: TiddlyFox Apocalypse.png |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| created: 201712032331 | ||
| modified: 201712032331 | ||
| tags: [[Hidden Settings]] | ||
| title: Hidden Setting: Tags Minimum Length | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| <<.from-version "5.1.16">> Tag Dropdown: Controls the minimum length of an input string before results are displayed. | ||
|
|
||
| Defaults to "0". | ||
|
|
||
| $:/config/Tags/MinLength |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| created: 201804111739 | ||
| modified: 201804111739 | ||
| tags: [[How to apply custom styles]] | ||
| title: Custom styles by data-tiddler-title | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| ! Attribute: data-tiddler-title | ||
|
|
||
| <<.from-version "5.1.16">> | ||
|
|
||
| The ~TiddlyWiki core adds several `attributes` to the rendered content. With those attributes it's possible to apply custom styles to the tiddler content. | ||
|
|
||
| For example this tiddler is named: "{{!!title}}" so the attribute looks like this: | ||
|
|
||
| ``` | ||
| data-tiddler-title="Custom styles by title" | ||
| ``` | ||
|
|
||
| !! Examples | ||
|
|
||
| The following CSS is defined in [[Custom data-styles]] and creates a blue border for exactly this tiddler. | ||
|
|
||
| ``` | ||
| [data-tiddler-title="Custom styles by title"] { | ||
| border: 1px solid blue; | ||
| } | ||
| ``` | ||
|
|
||
| To create a green border for every tiddler that starts with `$:/` aka system tiddlers, you'd need to use CSS like so: (not applied here but you can experiment with it! ) | ||
|
|
||
| ``` | ||
| [data-tiddler-title^="$:/"] { | ||
| border: 1px solid green; | ||
| } | ||
| ``` | ||
|
|
||
| !! More Possibilities | ||
|
|
||
| {{Attribute Selectors}} |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| created: 201804111739 | ||
| modified: 201804111739 | ||
| title: Custom styles by user-class | ||
| tags: [[How to apply custom styles]] | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| ''Tiddler Field: `class`'' <<.from-version "5.1.16">> | ||
|
|
||
| The [[tag manager|$:/TagManager]] allows us to set a tiddler `color` field, that is used to define the "tag-pill" colour. Since: <<.from-version "5.1.16">> we can define a `class` field, that is directly inserted into the [[ViewTemplate|$:/core/ui/ViewTemplate]] and it can be used for styling: | ||
|
|
||
| """ | ||
| title: `anyName` | ||
| tags: `$:/tags/Stylesheet` | ||
| class: `myClass` | ||
| """ | ||
|
|
||
| Every tiddler, that has a `class` field can be styled that way! | ||
|
|
||
| ``` | ||
| .myClass { | ||
| border: 2px solid blue; | ||
| } | ||
|
|
||
| ``` | ||
|
|
||
| Learn more at: [[How to apply custom styles]] |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| created: 20170126152839462 | ||
| modified: 201804111739 | ||
| tags: [[Custom data-styles]] | ||
| title: Attribute Selectors | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| ;[attr] | ||
| :Represents an element with an attribute name of attr. | ||
|
|
||
| ;[attr="value"] | ||
| :Represents an element with an attribute name of attr and whose value is exactly "value". | ||
|
|
||
| ;[attr~="value"] | ||
| :Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly "value". | ||
|
|
||
| ;[attr|="value"] | ||
| :Represents an element with an attribute name of attr. Its value can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D). It can be used for language subcode matches. | ||
|
|
||
| ;[attr^="value"] | ||
| :Represents an element with an attribute name of attr and whose first value is prefixed by "value". | ||
|
|
||
| ;[attr$="value"] | ||
| :Represents an element with an attribute name of attr and whose last value is suffixed by "value". | ||
|
|
||
| ;[attr*="value"] | ||
| :Represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring. | ||
|
|
||
| ;[attr "operator value" i] | ||
| :Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range). | ||
|
|
||
| Learn more at: [[Attribute selectors - CSS|https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors]] or [[CSS-Specification|https://www.w3.org/TR/CSS22/selector.html#attribute-selectors]] |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| modified: 201804111739 | ||
| created: 201804111739 | ||
| title: Custom Styles FAQ | ||
| tags: [[How to apply custom styles]] FAQ-group | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| <<.from-version "5.1.16">> | ||
|
|
||
| <<list-links "[tag[Custom Styles FAQ]]">> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| created: 201804111739 | ||
| modified: 201804111739 | ||
| tags: data-tags-styles [[How to apply custom styles]] $:/tags/Stylesheet | ||
| title: Custom data-styles | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| [data-tiddler-title="Custom styles by title"] { | ||
| border: 1px solid blue; | ||
| } | ||
|
|
||
| [data-tags*="example-test"] { | ||
| border: 2px solid pink; | ||
| } | ||
|
|
||
| [data-tags*="example-hardlinebreaks"] .tc-tiddler-body { | ||
| word-break: normal; | ||
| word-wrap: break-word; | ||
| white-space: pre-wrap; | ||
| } | ||
|
|
||
| [data-tags*="data-tags-styles"] .tc-tiddler-body { | ||
| display: block; | ||
| padding: 14px; | ||
| margin-top: 1em; | ||
| margin-bottom: 1em; | ||
| word-break: normal; | ||
| word-wrap: break-word; | ||
| white-space: pre-wrap; | ||
| background-color: #f5f5f5; | ||
| border: 1px solid #cccccc; | ||
| padding: 0 3px 2px; | ||
| border-radius: 3px; | ||
| font-family: Monaco, Consolas, "Lucida Console", "DejaVu Sans Mono", monospace; | ||
| } | ||
|
|
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| created: 20170124132500000 | ||
| modified: 201804111739 | ||
| tags: example-test [[How to apply custom styles]] | ||
| title: Custom styles by data-tags | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| ! Attribute: data-tags | ||
|
|
||
| <<.from-version "5.1.16">> | ||
|
|
||
| The ~TiddlyWiki core adds several `attributes` to the rendered content. With those attributes it's possible to apply custom styles to the tiddler content. | ||
|
|
||
| For example this tiddler is tagged: <<tag "How to apply custom styles">> and <<tag "example-test">> so the attribute looks like this: | ||
|
|
||
| ``` | ||
| data-tags="[[How to apply custom styles]] example-test" | ||
| ``` | ||
|
|
||
| ''Important:'' Tiddler tags are ''not'' sorted, so the order in the rendered output may be different! | ||
|
|
||
| !! Examples | ||
|
|
||
| The following CSS is defined in [[Custom data-styles]] and creates a pink border for exactly this tiddler. | ||
|
|
||
| ``` | ||
| [data-tags*="example-test"] { | ||
| border: 2px solid pink; | ||
| } | ||
| ``` | ||
|
|
||
| !!! Styling Stylesheets | ||
|
|
||
| So to display tiddlers tagged: `data-tags-styles` in a decent way we can use the following code. (I could have used: `$:/tags/Stylesheet`, but that would affect all stylesheets in this wiki, which is not intended. amt ;) | ||
|
|
||
| ''Important:'' Don't forget the `.tc.tiddler.body`, otherwise the whole tiddler, including the title will be changed! see: [[Custom data-styles]] | ||
|
|
||
| ``` | ||
| [data-tags*="data-tags-styles"] .tc-tiddler-body { | ||
| display: block; | ||
| padding: 14px; | ||
| margin-top: 1em; | ||
| margin-bottom: 1em; | ||
| word-break: normal; | ||
| word-wrap: break-word; | ||
| white-space: pre-wrap; | ||
| background-color: #f5f5f5; | ||
| border: 1px solid #cccccc; | ||
| padding: 0 3px 2px; | ||
| border-radius: 3px; | ||
| font-family: Monaco, Consolas, "Lucida Console", "DejaVu Sans Mono", monospace; | ||
| } | ||
| ``` | ||
|
|
||
| !! Hard Linebreaks | ||
|
|
||
| This mechanism may be handy for users, who want to write prose text! see: [[Hard Linebreaks with CSS]] | ||
|
|
||
| !! More Possibilities | ||
|
|
||
| {{Attribute Selectors}} |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| created: 20170126174506507 | ||
| modified: 20170126211042714 | ||
| tags: [[Hard Linebreaks in WikiText]] | ||
| title: Hard Linebreaks with CSS | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| Since TiddlyWiki Version 5.1.16, it's possible to apply customs styles with `data-` attributes. see: [[How to apply custom styles]] | ||
|
|
||
| The [[Custom data-styles]] stylesheet tiddler contains the following definition: | ||
|
|
||
| ``` | ||
| [data-tags*="example-hardlinebreaks"] .tc-tiddler-body { | ||
| word-break: normal; | ||
| word-wrap: break-word; | ||
| white-space: pre-wrap; | ||
| } | ||
| ``` | ||
|
|
||
| If rendered without the tag, the content of "Hard Linebreaks with CSS - Example" will be shown like this: | ||
|
|
||
| >{{Hard Linebreaks with CSS - Example}} | ||
|
|
||
| ---- | ||
|
|
||
| Open the tiddler to see the custom CSS rules applied: [[Hard Linebreaks with CSS - Example]] | ||
|
|
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| created: 20170126161803543 | ||
| modified: 20170126211025840 | ||
| tags: example-hardlinebreaks [[Hard Linebreaks in WikiText]] | ||
| title: Hard Linebreaks with CSS - Example | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| The following text is rendered without any special WikiText syntax. So most of the ~WikiText functionality will be accessible. | ||
|
|
||
| This is a line | ||
| and this is a new line | ||
| while this is yet another line | ||
| and this is the final one | ||
| apart from this one | ||
|
|
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| created: 20141001132300000 | ||
| list: [[Custom styles by data-tags]] [[Custom styles by title]] | ||
| modified: 201804111740 | ||
| tags: [[Customise TiddlyWiki]] | ||
| title: How to apply custom styles | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| At the moment there are several ways to apply custom styles. | ||
|
|
||
| <<list-links filter:"[tag[How to apply custom styles]]">> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| created: 20180309232911422 | ||
| modified: 20180310201216266 | ||
| tags: Learning | ||
| title: How to hide the author's and other fields with CSS | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| Sometimes you might want to save some screen space by hiding away the author's name in all tiddlers. Here's a quick way to do it: | ||
|
|
||
| * Create a new tiddler with any title you want. | ||
| * Give the tiddler the tag `$:/tags/Stylesheet` | ||
| * In the text field of the tiddler put: | ||
|
|
||
| ``` | ||
| .tc-subtitle .tc-tiddlylink {display:none;} | ||
| ``` | ||
|
|
||
| * Save the tiddler. The author's name field should no longer appear. | ||
|
|
||
| Similarly, the entire subtitle field including author and date can be removed with: | ||
|
|
||
| ``` | ||
| .tc-subtitle {display:none;} | ||
| ``` | ||
|
|
||
| Unfortunately, you can't hide just the date without also hiding the author using CSS. | ||
|
|
||
| And finally, for a truly minimalist look, you can remove the title with: | ||
|
|
||
| ``` | ||
| h2.tc-title {display:none;) | ||
| ``` |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| created: 20180310002601813 | ||
| modified: 20180310003428093 | ||
| tags: Learning | ||
| title: Simple ways to write protect tiddlers | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| Sometimes you want to protect individual tiddlers from accidental changes, either from yourself or guests to your ~TiddlyWiki file. Here's a couple simple approaches. Note that these do not provide hardened protection against a wilful attack. | ||
|
|
||
| !! Using a stylesheet to lock tiddlers by tag name | ||
|
|
||
| Create a tiddler with the following contents and tag it as `$:/tags/Stylesheet` : | ||
|
|
||
| ``` | ||
| .tc-tagged-Locked button[title="Edit this tiddler"] {display: none;} | ||
|
|
||
| ``` | ||
|
|
||
| If your TW language isn't English, then you'll need to change the text in 'title="...."' to whatever the text is when you hover over the edit button. | ||
|
|
||
| Now any tiddler you tag as "Locked" will have the edit button hidden. To get it back you will need to open the stylesheet tiddler and change "none" to "inline". | ||
|
|
||
| !! Using transclusion to hide your tiddler in a system tiddler | ||
|
|
||
| * Open your tiddler for editing. | ||
| * Select the title and copy. | ||
| * Select all the tiddler text. | ||
| * Click on the excise tool. | ||
| * In the title box, type `$:/` and then paste the original title. | ||
| * Use the defaults to excise and and leave a transclusion | ||
|
|
||
| Now you can view the contents of your original tiddler, but to edit them your will have to find the the tiddler with the `$:/` prefix. |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| created: 201804111739 | ||
| modified: 201804111739 | ||
| title: Q: Is there a way to create dynamic stylesheets? | ||
| tags: [[Custom Styles FAQ]] | ||
|
|
||
| ''Answer:'' <<.from-version "5.1.16">> | ||
|
|
||
| Yes, see: [[Q: How can I use a custom field to style a tiddler?]] |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| created: 201804111739 | ||
| modified: 201804111739 | ||
| title: Q: How can I use a custom field to style a tiddler? | ||
| tags: [[Custom Styles FAQ]] | ||
|
|
||
|
|
||
| ''Consider the following usecase:'' <<.from-version "5.1.16">> | ||
|
|
||
| There is a field named: `rank`, which can hold different values eg: `species`. | ||
|
|
||
| ''Answer:'' | ||
|
|
||
| The idea is now: We dynamically create the stylesheet. The style-sheet can look like this: | ||
|
|
||
| """ | ||
| title: `myStyles` | ||
| tags: `$:/tags/Stylesheet` | ||
| """ | ||
|
|
||
| ``` | ||
| <$list filter="[rank[species]]"> | ||
| [data-tiddler-title^="<$view field=title/>"] .tc-tiddler-body { | ||
| column-count: 2; | ||
| } | ||
| </$list> | ||
| ``` | ||
|
|
||
| This creates a CSS rule for every tiddler-title, that has a field `rank` and value `species`. | ||
|
|
||
| [[Learn more about possible attributes!|Attribute Selectors]] |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| created: 201804111739 | ||
| modified: 201804111739 | ||
| title: Q: What if a tiddler has no tags? | ||
| tags: [[Custom Styles FAQ]] | ||
|
|
||
| ''Answer:'' <<.from-version "5.1.16">> | ||
|
|
||
| * If a tiddler has no tags, but needs styling use: `data-tiddler-title` as CSS selector | ||
| ** There is only one tiddler | ||
|
|
||
| * If a user wants to style system tiddlers in a custom way: use: `[data-tiddler-title^="$:"/]` as a selector | ||
| ** using the TW namespace functionality | ||
|
|
||
| * If the user wants special behaviour for tagged tiddlers. eg: Learning | ||
| ** use: `[data-tags*="Learning"]` as CSS selector. | ||
|
|
||
| The names I'm using are only used for documentation purpose, without changing the existing wiki. I don't want, that the docs has side effects. | ||
|
|
||
| [[Learn more about possible attributes!|Attribute Selectors]] |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| created: 201804111739 | ||
| modified: 201804111739 | ||
| title: Q: How can I style a tiddler if it has "this" AND "that" tag? | ||
| tags: [[Custom Styles FAQ]] | ||
|
|
||
| ''Answer:'' <<.from-version "5.1.16">> | ||
|
|
||
| If tiddler has both: `this` AND tag `that` create an orange border. | ||
|
|
||
| ``` | ||
| [data-tags*="bar"][data-tags*="froz"] { | ||
| border: 2px solid orange; | ||
| } | ||
| ``` | ||
|
|
||
| ''If your CSS looks like this: '' | ||
|
|
||
| ``` | ||
| [data-tags~="this"] { | ||
| border: 2px solid blue; | ||
| } | ||
|
|
||
| [data-tags~="that"] { | ||
| border: 2px solid red; | ||
| } | ||
| ``` | ||
|
|
||
| `this` creates a blue border | ||
| `that` creates a red border | ||
| If you swap positions, you get it the other way around. | ||
|
|
||
|
|
||
| [[Learn more about possible attributes!|Attribute Selectors]] |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| created: 201804111739 | ||
| modified: 201804111739 | ||
| title: Q: How can I style a tiddler if it has "this" OR "that" tag? | ||
| tags: [[Custom Styles FAQ]] | ||
|
|
||
| ''Answer:'' <<.from-version "5.1.16">> | ||
|
|
||
| Either tag `this` or tag `that` create a red border. | ||
|
|
||
| ``` | ||
| [data-tags~="this"], | ||
| [data-tags~="that"] { | ||
| border: 2px solid red; | ||
| } | ||
| ``` | ||
|
|
||
| [[Learn more about possible attributes!|Attribute Selectors]] |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| title: TiddlyFox Apocalypse.png | ||
| type: image/png | ||
| tags: picture |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| created: 20171212175130471 | ||
| modified: 20171212175139631 | ||
| tags: Learning | ||
| title: Introduction to Lists | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| Making lists of items plays a central role in working with TiddlyWiki. The following is a brief run-through of some of the more common techniques. | ||
|
|
||
| ~TiddlyWiki [[uses|The Extended Listops Filters]] lists [[internally|ListField]] for many purposes so the word can have several meanings. Here we are concerned with displaying sequences of items, but not necessarily presented as a conventional bullet list. | ||
|
|
||
| ! Manually Typed Lists | ||
|
|
||
| !! ~WikiText | ||
|
|
||
| WikiText lists are manually typed lists that use a special character to specify what sort of list it is and how it should be displayed. | ||
|
|
||
| Examples include bullet lists created with asterisks (*) and numbered lists (#). Behind the scenes, ~WikiText lists are based on the standard `<ul>` and `<li>` HTML elements. For more information see [[Lists in WikiText]]. | ||
|
|
||
| An example of a typed list in WikiText: | ||
|
|
||
| <<wikitext-example-without-html """* Greatest Movies of All Time | ||
| ** Casa Blanca | ||
| ** Pride and Prejudice and Zombies""">> | ||
|
|
||
| ! Generated Lists | ||
|
|
||
| Lists can be automatically generated with the ListWidget using [[filters|Filters]] in which [[filter operators|Filter Operators]] | ||
| specify criteria for selecting which tiddlers are desired as output. Shortcut macros are provided for some common types of list. | ||
|
|
||
| !! ~ListWidget | ||
|
|
||
| The ListWidget is the most powerful tool for creating lists. It allows the filtered output to be manipulated and styled into forms that may not seem to resemble lists at all, for example tables or complex texts. For more details, see [[ListWidget]]. | ||
|
|
||
| An example to show all tiddlers tagged with "HelloThere" might look like: | ||
|
|
||
| <<wikitext-example-without-html """<$list filter="[tag[HelloThere]]"><$view field="title"/><br/></$list>""">> | ||
|
|
||
| <<.tip """Even tiddlers themselves are made with the ~ListWidget. The [[ViewTemplate|$:/core/ui/ViewTemplate]] makes use of the ListWidget to fetch all specified templates that are used to show a tiddlers title, tags, text and more.""">> | ||
|
|
||
| !! Filtered transclusion | ||
|
|
||
| The syntax for filtered transclusion `{{{...}}}` takes a filter as input and outputs a linked list of matching titles. You can also apply a [[template|Transclusion with Templates]], for example: | ||
|
|
||
| <<wikitext-example-without-html """{{{ [tag[HelloThere]] || $:/core/ui/TagTemplate }}}""">> | ||
|
|
||
| !! list-links Macro | ||
|
|
||
| The [[list-links|list-links Macro]] macro gives a preformatted list, typically a bullet list, in a more simplified way than by using the ListWidget. Behind the scenes it really is the ListWidget applying a default template to each list item. | ||
|
|
||
| <$macrocall $name="wikitext-example-without-html" src="""<<list-links "[tag[HelloThere]]">>"""/> | ||
|
|
||
| !Other “list related” features | ||
|
|
||
| [[list|ListField]], [[list-before|Order of Tagged Tiddlers]] and [[list-after|Order of Tagged Tiddlers]] are all field names to control the position of tiddlers in a list. [[Fields|TiddlerFields]] are a way to add additional bits of structured information to a tiddler such as date, quantity, category, etc. | ||
|
|
||
| [[list|list Operator]] and [[listed|listed Operator]] are //filter operators// to, respectively, select and find titles in lists. |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| caption: copy-to-clipboard | ||
| created: 20171216104754967 | ||
| modified: 20171216104941967 | ||
| tags: Macros [[Core Macros]] | ||
| title: copy-to-clipboard Macro | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| The <<.def copy-to-clipboard>> [[macro|Macros]] displays a button that copies specified text to the clipboard. A notification is displayed if the operation is successful; some browsers do not permit the operation. | ||
|
|
||
| !! Parameters | ||
|
|
||
| ;src | ||
| : The text to be copied to the clipboard | ||
| ;class | ||
| : Optional CSS classes to be assigned to the button (defaults to `tc-btn-invisible`) | ||
| ;style | ||
| : Optional CSS styles to be assigned to the button | ||
|
|
||
| <<.macro-examples "copy-to-clipboard">> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| created: 20171216104946277 | ||
| modified: 20171216105109641 | ||
| tags: [[copy-to-clipboard Macro]] [[Macro Examples]] | ||
| title: copy-to-clipboard Macro (Examples) | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| <$macrocall $name=".example" n="1" eg="""<<copy-to-clipboard "Mary had a little lamb">>"""/> | ||
| <$macrocall $name=".example" n="2" eg="""<$macrocall $name="copy-to-clipboard" src={{$:/SiteTitle}}/>"""/> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| caption: jsontiddler | ||
| created: 20170317140130417 | ||
| modified: 20170317140226040 | ||
| tags: Macros [[Core Macros]] | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| caption: tm-copy-to-clipboard | ||
| created: 20171215150056004 | ||
| modified: 20171215150600888 | ||
| tags: Messages | ||
| title: WidgetMessage: tm-copy-to-clipboard | ||
| type: text/vnd.tiddlywiki | ||
|
|
||
| The "copy to clipboard" message attempts to copy the specified text to the clipboard. If it succeeds, the tiddler [[$:/language/Notifications/CopiedToClipboard/Succeeded]] is displayed as a notification. If the browser doesn't permit the operation, the tiddler [[$:/language/Notifications/CopiedToClipboard/Failed]] is displayed instead. | ||
|
|
||
| It requires the following properties on the `event` object: | ||
|
|
||
| |!Name |!Description | | ||
| |param |Text to be copied to the clipboard | | ||
|
|
||
| This message is usually generated with the ButtonWidget. It is handled by the TiddlyWiki core. | ||
|
|
||
| ! Example | ||
|
|
||
| This example copies the current time to the clipboard: | ||
|
|
||
| <$macrocall $name='wikitext-example-without-html' | ||
| src='<$button message="tm-copy-to-clipboard" param=<<now>>> | ||
| Copy date to clipboard | ||
| </$button>'/> | ||
|
|
