Hi,
First of all I would like to say that I’ve hated TiddlyWiki since day 1, but then I got held captive in a forest by a madman called @papiche and he forced me into developing his stupid project of copying the web using TW and IPFS.
So I looked into it a little bit and started with 9gag. By creating a custom stylesheet, I managed to have TW look like 9gag :
(demo) (loading media might takes a few seconds)
Here is the corresponding stylesheet :
corresponding CSS
body.tc-body,
.nc-sidebar,
.nc-bar.nc-topbar {
background-color: hsl(0, 0%, 7.8%);
}
/**
* Sidebar
*/
.nc-sidebar {
border: none;
scrollbar-width: none;
}
/**
* Topbar
*/
.nc-bar.nc-topbar {
border-bottom: 0.0675rem solid hsl(0,0%,30%);
max-width: 100%;
}
@media (min-width: 960px) {
.nc-topbar-wrapper {
left: 0;
}
.nc-sidebar {
top: 52px;
}
}
.nc-topbar .left {
display: flex;
flex-grow: 1;
}
.nc-topbar .left > .tc-keyboard {
flex-basis: 100%;
}
.nc-bar input[type="search"],
.nc-bar input[type="search"]:focus {
width: calc(100% - 20px);
}
.nc-bar .tc-page-controls button[arial-label="recherche avancée"] {
/* padding-left: 1rem;*/
}
.nc-topbar .right {
flex-basis: content;
padding-left: 20px;
}
.nc-topbar .right .tc-page-controls > *:last-child{
margin-right: 0;
}
.nc-topbar .tc-reveal.tc-popup {
left: unset !important;
right: 0;
}
/**
* Tiddler (inc. contenu)
*/
.tc-story-river {
max-width: 640px !important;
}
div.tc-tiddler-frame {
position: relative;
display: flex;
flex-direction: column;
/*padding-top: 2rem;*/
padding: 0;
border-radius: 0;
/*background: black;*/
/*margin-bottom: 3rem;*/
background: transparent;
border: 0 !important;
border-bottom: 0.0675rem solid hsl(0,0%,20%) !important;
margin-bottom: 3rem;
padding-bottom: 3rem;
}
.tc-tiddler-frame > .tc-tiddler-body {
/* contents */
order: 3;
color: hsl(38.8, 5%, 90%);
}
.tc-tiddler-frame .tc-tiddler-body > * {
width: 90%;
margin: auto;
}
.tc-tiddler-frame .tc-tiddler-body > img,
.tc-tiddler-frame .tc-tiddler-body > video,
.tc-tiddler-frame .tc-tiddler-body > svg,
.tc-tiddler-frame .tc-tiddler-body > canvas,
.tc-tiddler-frame .tc-tiddler-body > embed,
.tc-tiddler-frame .tc-tiddler-body > iframe {
width: 100%;
}
/**
* Titre et contrôles d'édition
*/
.tc-tiddler-frame > .tc-tiddler-title {
/* titre et contrôles */
background: transparent;
order: 2;
float: right;
position: absolute;
/*top: 1.5rem;
right: 2rem;*/
top: 0;
right: 0;
}
.tc-tiddler-title:not(.tc-tiddler-edit-title) > .tc-titlebar > span:not(.tc-tiddler-controls) {
/* titre */
display: none;
}
div.tc-tiddler-frame .tc-tiddler-title:not(.tc-tiddler-edit-title) > .tc-titlebar > .tc-tiddler-controls > button {
/*box-sizing: content-box;*/
margin: 0;
width: 2rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
margin-left: 0.25rem;
margin-right: 0.25rem;
border-radius: 0.125rem;
}
div.tc-tiddler-frame .tc-tiddler-title > .tc-titlebar > .tc-tiddler-controls > button:last-of-type {
margin-right: 0;
}
div.tc-tiddler-frame .tc-tiddler-title > .tc-titlebar > .tc-tiddler-controls > button > * {
width: 0.75rem;
}
div.tc-tiddler-frame:not([data-tags*="$:/isAttachment"]) .tc-tiddler-title > .tc-titlebar > .tc-tiddler-controls > button[aria-label="export attachment to IPFS"],
div.tc-tiddler-frame[data-tags*="$:/isAttachment"] .tc-tiddler-title > .tc-titlebar > .tc-tiddler-controls > button[aria-label="export content to IPFS"],
div.tc-tiddler-frame[data-tags*="$:/isAttachment"]:not(.tc-tiddler-system) .tc-tiddler-title > .tc-titlebar > .tc-tiddler-controls > button[aria-label="export to IPFS"],
div.tc-tiddler-frame.tc-tiddler-system .tc-tiddler-title > .tc-titlebar > .tc-tiddler-controls > button[aria-label="export content to IPFS"],
div.tc-tiddler-frame:not(.tc-tiddler-system) .tc-tiddler-title > .tc-titlebar > .tc-tiddler-controls > button[aria-label="export to IPFS"],
div.tc-tiddler-frame.tc-tiddler-system:not([data-tags*="$:/tags/Stylesheet"]):not([data-tiddler-title^="$:/plugins/"][data-tiddler-title$=".js"]) .tc-tiddler-title > .tc-titlebar > .tc-tiddler-controls > button[aria-label="export to IPFS"],
div.tc-tiddler-frame.tc-tiddler-system .tc-tiddler-title > .tc-titlebar > .tc-tiddler-controls > button[aria-label="export content to IPFS"],
div.tc-tiddler-frame.tc-tiddler-system:not([data-tags*="$:/tags/Image"]) .tc-tiddler-title > .tc-titlebar > .tc-tiddler-controls > button[aria-label="export attachment to IPFS"]
{
display: none;
}
div.tc-tiddler-frame[data-tags*="$:/isAttachment"]:not([data-tags*="$:/isIpfs"]) .tc-tiddler-title > .tc-titlebar > .tc-tiddler-controls > button[aria-label="export attachment to IPFS"] {
background: hsl(0,50%,50%);
}
div.tc-tiddler-frame:not([data-tags*="$:/isAttachment"]):not([data-tags*="$:/isIpfs"]) .tc-tiddler-title > .tc-titlebar > .tc-tiddler-controls > button[aria-label="export content to IPFS"],
div.tc-tiddler-frame:not([data-tags*="$:/isAttachment"]):not([data-tags*="$:/isIpfs"]) .tc-tiddler-title > .tc-titlebar > .tc-tiddler-controls > button[aria-label="export to IPFS"] {
background: hsl(0,50%,50%) !important;
}
div.tc-tiddler-frame:not([data-tags*="$:/isAttachment"]):not([data-tags*="$:/isIpfs"]) .tc-tiddler-title > .tc-titlebar > .tc-tiddler-controls > button[aria-label="export content to IPFS"] svg,
div.tc-tiddler-frame:not([data-tags*="$:/isAttachment"]):not([data-tags*="$:/isIpfs"]) .tc-tiddler-title > .tc-titlebar > .tc-tiddler-controls > button[aria-label="export to IPFS"] svg {
fill: white !important;
}
/**
* Nom d'utilisateur
*/
.tc-subtitle > a.tc-tiddlylink {
font-style: normal;
color: white;
font-weight: bold;
}
/**
* Date
*/
.tc-tiddler-frame > :nth-child(3) {
/* date */
order: 1;
text-align: left;
position: relative;
top: 0.5rem;
}
.tc-tiddler-frame > :nth-child(3) .tc-subtitle {
/* date date */
color: hsl(38.8, 5%, 45%);
padding-bottom: 1rem;
}
/**
* Tags
*/
.tc-tiddler-frame > :nth-child(4) {
/* tags */
order: 7;
}
[data-tag-title^="$"] {
display: none;
}
.tc-tiddler-frame > :nth-child(4) > .tc-tags-wrapper {
text-align: left !important;
margin: 0;
margin-right: 0.5rem;
}
.tc-tiddler-frame > :nth-child(4) > .tc-tags-wrapper > .tc-tag-list-item {
margin-top: 0.5rem;
}
button.tc-tag-label,
span.tc-tag-label {
border-style: solid;
/*
background-color: transparent;
border-width: 0.125rem;
border-color: hsl(38.8, 100%, 70%);
border-color: hsl(38.8, 30%, 30%);
color: hsl(38.8, 30%, 30%) !important;
*/
line-height: 2rem;
font-size: 0.875rem;
font-weight: 700;
border-radius: 0.25rem;
border-color: transparent;
background-color: hsl(0,0%,20%);
color: white !important;
padding: 0 0.25rem !important;
}
button.tc-tag-label:hover,
span.tc-tag-label:hover {
background-color: hsl(0,0%,30%);
/*
background-color: hsl(38.8, 100%, 70%);
border-color: hsl(38.8, 100%, 70%);
color: hsl(38.8, 5%, 5%) !important;
*/
}
/**
* Alertes
*/
.tc-alerts {
top: unset;
bottom: 0.5rem;
display: flex;
flex-direction: column-reverse;
max-width: 25vw;
}
.tc-alert {
margin: 0;
margin-top: 0.5rem;
margin-left: 0.5rem;
background-color: hsl(38.8, 5%, 5%);
border-color: hsl(38.8, 15%, 15%);
border-radius: 0.25rem;
}
.tc-alert-subtitle {
color: hsl(38.8, 5%, 35%);
}
.tc-alert-toolbar svg {
fill: hsl(38.8, 25%, 35%);
}
/**
* Paramètres
*/
.tc-icon-ipfs-wrapper {
width: auto;
}
(it’s just a rough draft ; I haven’t worked on responsiveness yet)
I also switched default tiddlers to:
[app[6gag]] +[!nsort[created]]
[tag[Fun]] +[!nsort[created]]
What now?
adding other 9gagS, InstaramS, PinterestS, YoutubeS
Now I would like to be able to add other “accounts” to my tiddlywiki, and that I and other people be able to switch between different accounts, each having a different type of content. For instance, with the Youtube replica: I don’t want to see funny videos when I’m learning code, and I don’t want to see coding videos when I’m trying to unwind.
I had to work hard to configure my Youtube account in order not to be polluted by suggestions:
(screenshot)
(yeah, I know, I could use Unhook – and I do – but it’s not enough)
switching between “virtual tiddlywikis”
I need to be able to switch between what I would call “virtual tiddlywikis”.
Virtual TW have :
- a specific type of content
- a specific theme
For example, I could have :
- two 9gags
- nine youtubes
- etc…
Switching between virtual TW ought be possible both :
- via a menu bar (I saw there already exists a menu bar plugin)
- via a specific URL
default values for tags and custom fields for new tiddlers via attachment imports
I think I need this to switch between virtual TWs.
Could someone point me in the right direction for where to look in the doc to do that?
switching stylesheets
I need to be able to switch between themes or stylesheets, but so far I have close to nothing:
let displayStylesheets = function () {
console.log(document.styleSheets)
}
window.addEventListener('load', function () {
setTimeout(displayStylesheets, 3000)
console.log(document.URL)
});
changing TW behavior when clicking on a tag
I would also like to be able reproduce the behavior of 9gag (and every major platform I can think of) when clicking on a tag.
Instead of having a dropdown menu listing tiddlers tagged with a label, I would like the interface to display tiddlers with that specific tag (sorted by recency).
infinite scroll pagination + lazy load
I would also like some kind pagination of tiddlers (infinite scroll, ideally) or maybe lazy load of media stored on IPFS, because it seems to me that it would diminish load time.
Thanks in advance for the help.
