[LFF] [Discussion] Using the layout switching mecanism to host a landingpage on the tiddlywiki website.

[Odin]

Hello everyone,

I spent some time learning the Tailwind CSS framework and made a concept of a landing page for TiddlyWiki. A landing page is something that has come up earlier in this forum as something that could improve the new user experience (1). PM mario has made a proposal earlier (2), but I couldn't find any follow-up on this.

TiddlyWIki 5.1.23 introduced a page-layout switching mechanism that I used to include the landing page inside TiddlyWiki. This allows visitors to switch instantly from the landing page to the normal TiddlyWiki website. So with this proposal, we keep all the documentation within a press of a button. (Jeremy used this for the TiddlyWiki-on-fission project to make a login screen).

Furthermore, I think having a landing page as a layout opens up the possibility to use TiddlyWikis power to have content dynamically generated on the landing page. It would also be really cool to showcase some widgets and macros and have the user be able to interact with them inside the landing page. For example the section 'get started' uses transclusion to use the saving tiddler (the one that has the grid of cards with saving options). 

I am hoping to spark some discussion on this idea. Is it will be feasible to use? If so, I am looking for feedback on the landing page. I used a standard color scheme that comes with TailwindCSS, but it is of course possible to insert another color scheme.
What kind of sections do you think would help TiddlyWiki's visibility? How can we include more complicated widgets and macros within HTML without it breaking?

I've hosted the file on tiddlyhost so you can take a look: https://landingpage-example.tiddlyhost.com/

pros:

* A pretty landing page is a welcoming experience for new users. Other 'competitors' have landing pages as well that look really aesthetically pleasing. It could help grow the TiddlyWiki community grow.

* It is built inside the TiddyWiki website. Pressing the `documentation` button or the `try it out` button instantly switches the view to the normal TiddlyWiki layout.

* It may be possible to include content dynamically on the landing page via list widgets. 

* (if it works) We could showcase the powers of widgets, macros etc. right on the landing page. Although I ran into some issues (see the WikiText section) and haven't figured out how to work around this.

* No worries about multiple URLs

* Using tailwind CSS helps create a contemporary looking website

Cons:

* adds an extra 0.3 mb to the website going from 5.8 mb to 6.1 mb.

* The navigation links in the navbar also open up non-existent tiddlers in the background. After switching to the normal layout, these will be on top of the story river.

1) https://groups.google.com/g/tiddlywiki/c/gH7u07ar_KI/m/LzARDYqZAAAJ
2) https://groups.google.com/g/tiddlywiki/c/QW7QMfr0kA0/m/8Zq-xTxsBwAJ

[Jeremy Ruston]

Hi Odin

I spent some time learning the Tailwind CSS framework and made a concept of a landing page for TiddlyWiki. A landing page is something that has come up earlier in this forum as something that could improve the new user experience (1). PM mario has made a proposal earlier (2), but I couldn't find any follow-up on this.

Great stuff. I’ve attached a screenshot below for ease of reference.

TiddlyWIki 5.1.23 introduced a page-layout switching mechanism that I used to include the landing page inside TiddlyWiki. This allows visitors to switch instantly from the landing page to the normal TiddlyWiki website. So with this proposal, we keep all the documentation within a press of a button. (Jeremy used this for the TiddlyWiki-on-fission project to make a login screen).

Very nicely done.

Furthermore, I think having a landing page as a layout opens up the possibility to use TiddlyWikis power to have content dynamically generated on the landing page. It would also be really cool to showcase some widgets and macros and have the user be able to interact with them inside the landing page. For example the section 'get started' uses transclusion to use the saving tiddler (the one that has the grid of cards with saving options). 

Yes indeed, I like the model of TiddlyWiki masquerading as a one page static site, progressively disclosing the interactive functionality as usrs click around.

I am hoping to spark some discussion on this idea. Is it will be feasible to use? If so, I am looking for feedback on the landing page. I used a standard color scheme that comes with TailwindCSS, but it is of course possible to insert another color scheme.
What kind of sections do you think would help TiddlyWiki's visibility? How can we include more complicated widgets and macros within HTML without it breaking?

I've hosted the file on tiddlyhost so you can take a look: https://landingpage-example.tiddlyhost.com/

pros:

* A pretty landing page is a welcoming experience for new users. Other 'competitors' have landing pages as well that look really aesthetically pleasing. It could help grow the TiddlyWiki community grow.

* It is built inside the TiddyWiki website. Pressing the `documentation` button or the `try it out` button instantly switches the view to the normal TiddlyWiki layout.

* It may be possible to include content dynamically on the landing page via list widgets. 

* (if it works) We could showcase the powers of widgets, macros etc. right on the landing page. Although I ran into some issues (see the WikiText section) and haven't figured out how to work around this.

* No worries about multiple URLs

* Using tailwind CSS helps create a contemporary looking websit

Cons:

* adds an extra 0.3 mb to the website going from 5.8 mb to 6.1 mb.

* The navigation links in the navbar also open up non-existent tiddlers in the background. After switching to the normal layout, these will be on top of the story river.

Indeed. The extra weight could be avoided by using a static rendering but we’d lose the interactive features.

I think the main thing that we need to figure out is how to link the page layout mechanism with the navigation mechanism, so that linking directly to a tiddler will bring it up with the appropriate page layout. That may be part of some long overdue work to open up the navigation process to make it more customisable.

Anyhow, I’m very interested to hear peoples views, and thank you for making the prototype,

Best wishes

Jeremy

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/9d24e3f7-bb35-4246-b63f-5332b11a7c9an%40googlegroups.com.

[Odin]

Hi Jeremy,

" I’ve attached a screenshot below for ease of reference. Anyhow, I’m very interested to hear peoples views, and thank you for making the prototype."

Thanks for replying! It was a lot of fun learning Tailwindcss. What the screenshot doesn't capture is that it should also be fully responsive to smaller screens.

"I think the main thing that we need to figure out is how to link the page layout mechanism with the navigation mechanism, so that linking directly to a tiddler will bring it up with the appropriate page layout. That may be part of some long overdue work to open up the navigation process to make it more customisable."

I think an example for this is the list of links in the footer under 'about'. these are generated with <$list filter="[tag[About]]"> and thus link to the tiddler. But that tiddler is then only viewable if a user switches layout. Adding functionality to links to have an option to also switch layouts would be great in such a situation.

Odin

Op vrijdag 23 april 2021 om 16:55:48 UTC+2 schreef jeremy...@gmail.com:

[Mohammad Rahmani]

Hi Odin,

 Great job! I hope we can have a great Tiddlywiki landing page!

 Go with Jeremy and hopefully TW 5.1.24 has such a landing page!

Best wishes

Mohammad

[jtech108]

Hi there Odin,

Oh wow!

Classy and clever...that will certainly be nice to have 

for the next version of TW. Hopefully you and Jeremy 

can figure something out.

There's nothing like an enticing landing page to attract 

prospective new users.

Beautiful stuff Odin!

Best regards,

Julio

[Álvaro]

Hi Odin

Great work! It looks great.And the idea of use other layout is wonderful.

Tailwind (Bootstrap, ...) is a great tool for prototyping a webpage. But I don't like it because, as you said, you need add extra load to the webpage, and also you add a lof of noise in html. You need add too many classes for each element, and it is very similar to use inline styles but with shortcuts. (I know it, I am sometime too purist/perfectionist)

Regards,

Álvaro

[Odin]

Hi Alvaro,

Thanks for replying! 
TailwindCSS includes a script that purges all unused CSS from the CSS file, which is really handy. So the extra CSS for this landing page is about 11kb. All in all, it adds 0,3MB to the TiddlyWiki website file. Which isn't that bad I think.

"...   you add a lof of noise in html. You need add too many classes for each element, and it is very similar to use inline styles but with shortcuts. (I know it, I am sometime too purist/perfectionist)"

This is off-topic, but I think it is just a difference in design philosophy. After a while, it is easy to read the classes, and this way you don't have to ever see the CSS file. (google object/component-orientated CSS vs utility-first CSS).

[Jeremy Ruston]

Hi Odin

The use of TailWind might be a distraction. It’s a great framework, but if we went with this landing page approach I would want to take our usual approach to CSS. I don’t think that’s a problem, what matters is that it’s great to have a concrete, tangible prototype to play with.

Best wishes

Jeremy.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/5cac5806-c119-4a07-a6e9-8fb73c908e36n%40googlegroups.com.

[Joshua Fontany]

Really good work. I think that as we are now able to manage the Layout dynamically, each layout should be aware of the $:/Storylist and render its own story river, however that should look depending on the active layout.

For example, an implementation of the Muuri view as a Layout would render the Storylist out as a grid.

An implementation of the Mentat "virtual HUD" plugin would have its own drag-able window that renders the Storylist according the the current setting (as a regular Storylist view, as a Muuri grid, etc).

An implementation of the Landing Page layout would allow the storyview to be collapsed sticky-notes, etc.

Best,
Joshua Fontany

[Álvaro]

Hi Odin

I think I explained really badly, for trying not to sound too blunt.

The file size is less important than clean html, IMHO. If we add many CSS classes, in the future it will do more difficult do changes, in a landing page maybe is irrelevant but it breaks some "consistency".

.

As I said " I am sometime too purist/perfectionist" but the reason is avoid extra work in the future.