TiddlyWiki5 plugin.
crazko / krystal Goto Github PK
View Code? Open in Web Editor NEWTiddlyWiki5 plugin - Horizontal Story River
Home Page: https://crazko.github.io/krystal
TiddlyWiki5 plugin - Horizontal Story River
Home Page: https://crazko.github.io/krystal
TiddlyWiki5 plugin.
Here is an attempt to make krystal and multicolumn plug in work together.
This is done using the ensemble feature of multicolumn - you can save a particular layout, storyview, stylesheets tiddlers, pagetemplate to a particular ensemble. So when we load that particular ensemble, all these will be automatically loaded.
Check this demo - https://multicolumn-krystal.tiddlyhost.com/
But I encountered one problem -
Is this related to krystal plug in.
Installing plugin into a node-based tw created w/ 5.2.1 results in the following rendering error:
Steps to reproduce.
tiddlywiki mynewwiki --init server
I confirmed that if I downgrade to TW 5.1.23, the sidebar is working correctly. I assume that this is a minor incompatibility issue, but I am new to the TW world and haven't been able to track down a changelog that would help me start looking for discrepencies.
My current TW is made based on Krystal. I love your concept. Full width view has made it even better.
Only thing I find lacking is its difficult to compare two related Tiddlers side by side. This may be done by introducing something similar to two story view or Muuritouch. A button can be added in the top menu to switch between the horizontal story river and two-story view or something like Muuritouch view. Or else an additional button can be provided in the view toolbar of the tiddlers for shifting their position.
I don't have much technical knowledge in this matter. These are just a few suggestion. Don't know whether its implementable or not.
It would be great if we could adjust the width of all panes via a setting in the control panel. There is an option for theme tweaks, and you've already created a tab for Krystal, so it would make sense to allow the pixel width for the panes to be set there without having to edit a shadow tiddler.
I love this theme! Thank you for making it. ๐ I'm going to include this by default to all users of https://learnawesome.org
Any chance that showing tiddler preview on hover will be supported in future? Here's an example of it.
This happened to me when I tried to import an image
When I install tiddlyclip plug-in in Krystal, the bottom part of the tiddler gets cut short. I have attached a screenshot and demo file here
Krystal + tiddlyclip.html.zip
Look at the change in colour at the bottom of the screenshot because the tiddlers are cut short.
There is a need for a better referencing or linking than the default linking in Krystal.
I will give some examples using 4 different linking plug ins for the same tiddlers
Here there is backlinks, free links, tags and keywords with pop up showing highlighting of linked words and ability to collapse the reference. But there pop up could be implemented better I guess.
Here they provide 4 types of references - tags, direct backlink, mention in the title of a note, mention in the body text of a node and each of them are colour coded. Then there is pop up mechanism using tobibeer preview on hovering over the links.
I was just sharing my thoughts. I prefer something which is a mix of TWCrosslinks or tiddlyresearch. But tobibeer preview plug in is not compatible with Krystal if we open more than two tidldlers. Hope you can make a better referencing in Krystal.
As soon as more tiddlers are opened than fit onto the screen, the view remains focussed on the current tiddler instead of moving further to the right. In other words, the newly opened tiddlers are not visible unless one scrolls manually further to the right.
For example, at https://notes.andymatuschak.org/ the view moves automatically further to the right which I think would make a lot of sense.
PS: I really love your implementation so far!
PPS: I just discovered that the newly opened page is scrolled into view if the link is clicked a second time. Clicking it once opens the page. Clicking it a second time scrolls it into view. I'm not sure if this is intentional
After install a plugin, Tiddlywiki show a notification to save and reload, but this notification hide the main toolbar in the top including save button. The user have to close the notification to click the save button.
Hello,
I'm not good at English so please see my gif.
This is steps to reproduce:
Just wanted to say thank you for this theme. Fantastic work
I really like the horizontal view but one of its downsides is that it heavily relies on the bottom scroll bar.
When having more than 3 documents opened it would be great if you could navigate using the left/right arrow keys, something like this https://github.com/MaxGyver83/tw5-keyboard-navigation
Let me know what you think!
After the update, my wiki was looking like this. I had to remove the $:/tags/PageTemplate
from the $:/plugins/rmnvsl/krystal/header-small
to get it removed.
I had done some tweaks in my wiki to make Krystal and captivate theme compatible. Can that be responsible for this. You can see a test wiki at this site - https://krystal.tiddlyhost.com/
Some shortcuts are put on the header to replicate Tiddlywiki Sidebar items like
When user click on them and open one of them he/she sees something like below
Look at the ugly tiddler title. In original design of Tiddlywiki, these titles are replaced by captions when they are open at the sidebar
Workaround
Open
instead of $:/core/ui/SideBar/Open
as belowOpen
$:/tags/SideBar
{{$:/core/ui/SideBar/Open}}
Solution
The sidebar items need to be treated in a better way. In other words Sidebar items should not be opened like an ordinary tiddler in the story river
Firefox seems not reading the container's scrollWidth
correctly, hence every time I scroll from left to right, the story river's scrollWidth
increases; and everytime I scroll from right to left, the story river's scrollWidth
decreses.
As the screen recording shows, this inconsistent scrollWidth
property break the tiddler navigation. i.e. clicking on a stacked tiddler on the right won't navigate to and unfold the tiddler. Tiddler navigation works when clicking on a stacked tiddler on the left, but not the other way around.
Interestingly, I found a hack for it, simply add a placeholder after the ending tiddler with following content:
<section style="position: relative;width: 1px;height: 1px;border: 1px solid #bbb;" id="hack_firefox_horizontal_scroll">
</section>
right before the section.story-frontdrop
under section.tc-story-river
, would solve the issue. The place holder must have some width & height. I tried, and found out that it won't work if the border is removed (which then has width 0 and height 0).
I have no idea why Firefox behaves like this, and why this hack works out of the box... I'm just guessing it's related to position: sticky
and the fix works by adding something with position: relative
, which kind of sounds like float
and clear: both
thing.
I have been using tiddlywiki for the last 6 months regularly and i mostly use Krystal plug in for the story view. Here are some of the things which i observed during my regular use that may help to increase the functionality
Sorry for the lengthy post. I think i have mentioned these things in some other places also. I am posting all these together here for easy reference. If you can start the "Discussion" thread of github, i can shift this to discussions.
While Krystal works best on Large screen, it seems under width=960px Krystal uses vertical layout! Headers accumulate the center in several rows! I may suggest to use a top or bottom row to arrange few header items as in Notebook!
Workaround
I am not able to maximize the tiddler when whitespce theme is active in my wiki.
See a demo here.
I really like this theme, but it seems that the exported html file is not functional. (links give wrong results, etc) Would you please take a look? Thanks
Steps to reproduce :
The problem seems to come from the removed sidebar, and tc-sidebar-scrollable
element
I love this template: it is so fun to use! But I am having difficulty viewing plugins that should appear in the top header. For example, the favorite plugin, does not show up beside the Open/Recent/More tab options. The theme seems to not allow tabbed subheadings. Is this a design of the template or something that can be modified to allow?
I am using a hack given by Nicolas Petton in TW google group to enable his NoteBook theme only in mobile (not in desktops). But the header of Krystal is persisting and partly hiding the sidebar when I open the sidebar in mobile (with notebook theme active). Is there any way to hide the header only in mobiles ? I am attaching a demo wiki with relevant tiddlers set as default home page tiddlers.
The search box at top right move left when user starts entering keywords and TW found some tiddlers on deleting the inputs the searchbox get smaller again! This expanding/contracting is annoying see below gif.
Suggestion
Use fixed width search box and dropdown or relocate the searchbox as Notebook from Nicolas Petton
https://nicolas.petton.fr/tw/notebook.html
Still loving the theme, by the way. The thought crossed my mind today, though, to raise an issue for a potential enhancement. It's not a major thing, but I thought I'd share and see if it was something you also thought beneficial.
I think it would make my use cases better if I could manually reorder the tiddlers in my river.
Currently, I use Krystal set to not close tiddlers to the right. I often want several related tiddlers open that contain notes and fragments while I'm writing in another tiddler. The ability to move them around in order would be a great benefit so I could compare two specific ones side by side without having to close several and reopen them in a different order.
Optionally, I could switch the setting to close tiddlers to the right if there was an option to override this behavior with a keyboard shortcut (like shift+click). In other words, the default action would be to close tiddlers to the right when clicking a link in a tiddler, but if I had a list of tiddlers and wanted them all open, I could shift+click on each entry in the list and they would all open in the order I clicked.
Let me know if that needs further clarification. I don't know if you would see that as an improvement in behavior, or if it's even possible to implement. But, it crossed my mind today, and I wanted to share.
Thanks again for your work on this!
I would recommend to enable the Discussion board for krystal
I have been using this plugin for markdown, but krystal isn't going along with it.
https://github.com/anstosa/tw5-markdown
Can you please look into it?
Hey,
Awesome theme! Have you thought about an easy way to integrate the preview feature from Andy's version? You can see a similar implementation on Anne-Laure's site. If you don't currently have the bandwidth, I'd be open to taking a stab at it.
Would it be possible to add a tickbox in plugin' settings to disable backlinks display ($:/plugins/rmnvsl/krystal/references
) ?
This can conflict with other plugins that also offer this feature, and is quite independent from the other features of this plugin.
When multiple tiddlers are opened, stacking of tiddlers on the left side doesn't reveal the tiddlers title unlike on the right side.
I am attaching some images for reference.
This third image is showing that one tiddler stacked on the right is not showing its title (third one from the right) because I had scrolled to the bottom of that tiddler before moving to another tiddler.
Can this be corrected?
It's the first Tiddly theme that actually looks functional and pleasing to the eye. I added the theme to my node install and it all just works:
https://glitch.com/~helpful-foil-exhaust
Would love to help out / learn more or just generally cheer you on as you build this out. I don't know much about Tiddly but excited to learn and experiment with it.
Feature request:
Option for maximizing column (so it takes full screen width) would be useful for writing longer tiddlers (especially with preview since TW show preview in vertical split)
The inner scrollbars are thick and not compatible with palette color. A stylesheet can be used to set the scrollbar thickness and possibly to follow the color palettes.
See:
Any one help me figure out wtf I'm actually doing
Hi! Love this, thank you for doing this. Would you consider doing 2d navigation? Imagine if every time you clicked on a page link, it was added vertically into the slot to the right, instead of straight up replacing everything that was already to the right. https://www.freecodecamp.org/news/lossless-web-navigation-spatial-model-37f83438201d/
First of all, thank you for your amazing work. I love this plugin.
I took a short break from using it and when I re-enabled it, I got this weird bug. When I open more than two tiddlers, the right side of the screen gets cut off:
I was unable to reproduce it with a newly downloaded copy of tw but a fried who just started using it a month ago had the same thing happen.
Since I helped set up my friend's tw, we have the same plugins and we're both using github to save. So I wondered whether one of our plugins was the culprit. But after disabling them all, the problem persisted.
Any suggestions for what to try next/any idea what's going on?
Thanks!
Hello thank you for your awesome work !
In term of layout this is my best experience so far in TW world !
This is why I ask if it could be possible to separate both features (making 2 plugins)
From my point of view I do not need back links.
Thank you
Hi! Wondering if anyone has gotten a map/connected graph view working with this plugin.
I've tried TiddlyMap but it ended up breaking the behavior. If anyone has any workarounds or alternatives, it would be much appreciated ๐
TiddlyWiki now has support for custom page layouts:
https://tiddlywiki.com/#Alternative%20page%20layouts
It'd be great if Krystal were a page layout I could switch to with the page layout shortcut
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.