Lightweight Edition of Tiddlywiki

Charlie_Veniot · May 25, 2022, 8:24pm

Which made me think of, paraphrasing, “I’m crushing your SVG, I’m crushing your SVG…”

telumire · May 25, 2022, 8:28pm

We could use a template to display the wikified SVG icons + a button to export the SVG code, that way they can be edited in a svg editor easily ?

EDIT : Here are some other ways to optimize SVG / Images

The SVG Sprite technique :
- An Overview of SVG Sprite Creation Techniques
- Styling SVG Content with CSS
A curated list of Web Performance Optimization

jeremyruston · May 25, 2022, 8:41pm

Just to point out that we already optimise SVG icons with https://npmjs.org/svgo:

github.com

Jermolene/TiddlyWiki5/blob/master/bin/optimise-svgs.js

#!/usr/bin/env node

/*
Optimise the SVGs in ./core/images using SVGO from https://github.com/svg/svgo

Install SVGO with the following command in the root of the repo:

npm install svgo@2.3.0
*/

"use strict";

var fs = require("fs"),
	path = require("path"),
	{ optimize } = require("svgo"),
	config = {
		plugins: [
			'cleanupAttrs',
			'removeDoctype',
			'removeXMLProcInst',

This file has been truncated. show original

At the moment the processing is manual, so any unoptimised SVGs are a bug and should be reported.

telumire · May 25, 2022, 8:54pm

I spotted a few path some times ago that could be further optimized, however I dont think that’s a bug but rather that SVGO does not always find the best optimization possible. It’s not much, about 50 char gained by manually tweaking the path. I will try to find these icons and submit an improved version if applicable.

EDIT: For example, the path in $:/core/images/add-comment is 329 char. Using SvgPathEditor, it’s possible to get it down to 265 char. by using the “round” option, without visual difference in the output.

optimized :

vs original :

linonetwo · May 26, 2022, 8:56am

I compress my wiki and GitHub - tiddly-gittly/Tiddlywiki-NodeJS-Github-Template: Template to generate a auto-sync-to-github, privatcy-in-mind, freely-deployed TiddlyWiki. using terser GitHub - terser/terser: 🗜 JavaScript parser, mangler and compressor toolkit for ES6+

github.com

linonetwo/wiki/blob/master/html-minifier-terser.config.json

{
  "caseSensitive": true,
  "collapseBooleanAttributes": true,
  "collapseInlineTagWhitespace": false,
  "collapseWhitespace": true,
  "conservativeCollapse": false,
  "continueOnParseError": true,
  "customAttrCollapse": ".*",
  "decodeEntities": true,
  "html5": true,
  "ignoreCustomFragments": ["<#[\\s\\S]*?#>", "<%[\\s\\S]*?%>", "<\\?[\\s\\S]*?\\?>"],
  "includeAutoGeneratedTags": false,
  "keepClosingSlash": false,
  "maxLineLength": 0,
  "minifyCSS": true,
  "minifyJS": true,
  "preserveLineBreaks": false,
  "preventAttributesEscaping": false,
  "processConditionalComments": true,
  "processScripts": ["text/html"],

This file has been truncated. show original

github.com

tiddly-gittly/Tiddlywiki-NodeJS-Github-Template/blob/0145c1182c003bc514ba51a3d48c83ad39c54af1/.github/workflows/gh-pages.yml#L26

    
      
          
          
- name: Cache dependencies
            uses: actions/cache@v3
            with:
              path: |
                **/node_modules
              key: ${{ runner.os }}-${{ hashFiles('**/package.json') }}
          - name: Install Dependency
            run: npm install
          - name: Build
            run: npm run build
          
          
- name: Deploy
            uses: peaceiris/actions-gh-pages@v3
            with:
              github_token: ${{ secrets.GITHUB_TOKEN }}
              publish_dir: ./public-dist

github.com

tiddly-gittly/Tiddlywiki-NodeJS-Github-Template/blob/0145c1182c003bc514ba51a3d48c83ad39c54af1/scripts/build-wiki.js#L48

    
      
            // exclude edit related plugins, make it readonly, and reduce size
            execAndLog(`tiddlywiki ${repoFolder} --build readonlyexternalimages`, { cwd: repoFolder });
            execAndLog(`tiddlywiki ${repoFolder} --build externaljs`, { cwd: repoFolder });
            // npm run build:sitemap
            execAndLog(`tiddlywiki . --rendertiddler sitemap sitemap.xml text/plain && mv ${repoFolder}/output/sitemap.xml ${folderToServe}/sitemap.xml`, {
              cwd: repoFolder,
            });
            // npm run build:minifyHTML
            const htmlMinifyPath = `${repoFolder}/output/index-minify.html`;
            const htmlOutputPath = `${folderToServe}/index.html`;
            execAndLog(`html-minifier-terser -c ./html-minifier-terser.config.json -o ${htmlMinifyPath} ${repoFolder}/output/index.html`, { cwd: repoFolder });
            // build dll.js and config tw to load it
            // original filename contains invalid char, will cause static server unable to load it
            const htmlContent = fs.readFileSync(htmlMinifyPath, 'utf-8');
            const htmlContentWithCorrectJsPath = htmlContent.replaceAll('%24%3A%2Fcore%2Ftemplates%2Ftiddlywiki5.js', 'tiddlywiki5.js');
            fs.writeFileSync(htmlOutputPath, htmlContentWithCorrectJsPath);
            execAndLog(`mv ${repoFolder}/output/tiddlywiki5.js ${folderToServe}/tiddlywiki5.js`, { cwd: repoFolder });
            // npm run build:precache
            execAndLog(`workbox injectManifest workbox-config.js`, { cwd: repoFolder });
          };

linonetwo · May 26, 2022, 8:57am

And removing writing-related plugins is a good option when building read-only blog site

github.com

linonetwo/wiki/blob/2139bb216fdb97ea0acbbd9bb373a2d8fd1ae6ad/tiddlywiki.info#L36

    
      
            "index.html",
            "text/plain"
          ],
          "readonlyexternalimages": [
            "--setfield",
            "[is[binary]] [type[application/msword]]",
            "_canonical_uri",
            "$:/core/templates/canonical-uri-external-image",
            "text/plain",
            "--setfield",
            "[is[binary]] [type[application/msword]] [[$:/plugins/linonetwo/slate-write]] [[$:/plugins/linonetwo/smart-field]] [[$:/plugins/linonetwo/markdown-transformer]] [[$:/plugins/gt6796c/mermaid-tw5]] [[$:/plugins/linonetwo/tw-mobile-sync]] [[$:/plugins/linonetwo/zx-script]] [[$:/plugins/tiddlywiki/highlight]] [[$:/plugins/tiddlywiki/markdown]] [prefix[$:/plugins/tiddlywiki/codemirror]] [[$:/plugins/Gk0Wk/TW5-CodeMirror-Enhanced]] [[$:/plugins/flibbles/relink]] [[$:/plugins/kookma/commander]] [[$:/plugins/kookma/section]]",
            "text",
            "",
            "text/plain",
            "--rendertiddler",
            "$:/core/save/all-external-js",
            "index.html",
            "text/plain"
          ],
          "plugins": [
            "ontology/task-model-ontology"

TW_Tones · May 27, 2022, 2:30am

When considering a Lightweight Edition of Tiddlywiki as usual I would step back and ask why, as well and what you are prepared to give up and what is the reason for this?

Tiddlywiki as Site Generator or Generate alternative tiddlywiki editions

Something that will help you if you find a clear reason to do so is to keep in mind;

TiddlyWiki is a powerful publishing tool, whether it’s different versions of itself such as plain text, static html and more. You can craft the output for publishing, it can be a site generator if you want - step aside WIX and Squarespace. So perhaps generate output rather than minimise.
It’s so east to generate alternative tiddlywiki editions either for publishing or designed to publish.
- The Innerwiki plugin can generate tiddlywiki’s in an iframe including or excluding whatever you want from the parent wiki. If the result is viable you can save a copy. If not viable it wont work.

So tiddlywiki can be a Software Development Environment for versions of itself, another connection with “non-trivial Quines”.

In my view the “raison d’etre” for tiddlywiki is its User Interface allowing it to edit itself and maintain relationships between elements that are always up to date. If you don’t want these then use tiddlywiki to publish different content, or use another tool.

Using another tool like feather wiki is not so bad because there are a lot of ways to interact between full wikis and say feather wiki.

Charlie_Veniot · May 27, 2022, 3:06am

I think that’s an excellent thing to discuss.

Although my pairing is TiddlyWiki and Feather Wiki (well, I’ve got an ecosystem of supporting light tools), the same reasoning would apply to TiddlyWiki paired with a lightweight version of TiddlyWiki for my workflows.

Which is the same reasoning as: why would anybody want both Notepad and Microsoft Word on a Windows computer? There are some tasks just better suited for the lighter tool.

When I want to do some serious intertwingularity mapping, I grab TiddlyWiki.

When I want to just capture a quick note and need some quick and simple formatting to rapidly organise information at that moment as it is flowing fast, I will reach for the lighter tool every time. Feather Wiki does it for me because not only is it tiny and fast, I don’t have to put up with markup, which slows me down when I’m trying to rapidly organise/emphasise the text I’m taking down.

Which I will intertwingularity map the daylights out of later with TiddlyWiki.

I may not be comparing apples with apples, or oranges, or whatever fruit, but I imagine the case for a lightweight TiddlyWiki edition as sidekick for the regular edition could be similar.

Aside:

If anybody is toying with the thought: A “Linux From Scratch” kind of thing for TiddlyWiki, the cost benefit doesn’t make any sense to me.

Recipes for taking (what we have now) empty TiddlyWiki and turning into a solution for something, now that floats my boat something silly.