TiddlyWiki / TiddlyWiki/TiddlyWiki5

Extend widgets with "static mode"

Open
#1,237 20 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

improvement
Dominant language
JavaScript
Stars
8.7k
Forks
1.3k
Avg merge
3d 4h
Merged PRs (30d)
12

Description

When generating static files, the output of interactive widgets like <$reveal> is frozen - it simply generates or suppresses its content. The resulting output can't easily be made interactive.

It is proposed to introduce a new widget variable tv-static-output that indicates that static rendering is being performed when it is set to "yes".

The button and reveal widgets will be extended so that optionally they can generate suitable markup for a progressive enhancement via JavaScript. This special behaviour would need to be explicitly enabled via an attribute on the widget.

For example, take the following wikitext:

<$button set=<<qualify "$:/state/mySlider" setTo="show">Show me</$button>
<$button set=<<qualify "$:/state/mySlider" setTo="hide">Hide me</$button>

<$reveal type="match" state=<<qualify "$:/state/mySlider" text="show">

! This is the revealed content
And this is some text

</$reveal>

Currently, it generates the following static HTML:

<p><button class=''>Show me</button> <button class=''>Hide me</button></p><div class=' tc-reveal' hidden='true'></div>

The proposed output would be something like this:

<p>
<button class='' data-state-id="$:/state/mySlider-2063431451" data-state-set="show">Show me</button>
<button class='' data-state-id="$:/state/mySlider-2063431451" data-state-set="hide">Hide me</button>
</p>
<div class=' tc-reveal' hidden='true' data-state-id="$:/state/mySlider-2063431451">
<h1 class=''>This is the revealed content</h1>
<p>And this is some text </p>
</div>

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the button and reveal widget entry points and the static-rendering path described in the issue. Compare their current output with the proposed markup, then verify that the tv-static-output signal and opt-in attribute produce progressive-enhancement data only when enabled.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.