Near fullscreen view of parsed/embeded files for example PDF

Hi,

Maybe this can be helpful for someone, because I think it can be a common necessity.

I am parsing PDFs files from folders to include them in my wiki. But the resultant tiddlers shows the PDFs with less height than my screen, making difficult to read the PDFs. It can be applied also to different file formats that can be parsed by TiddlyWiki (HTML, …)

Using Custom styles by data-tags

I created a tiddler with this content:

[data-tags*="PDF"] .tc-tiddler-body {
  word-break: normal;
  word-wrap: break-word;
  white-space: pre-wrap;
	width: 100%;
	height: 100vh;
	}
	.tc-tiddler-body > iframe {
	width: 100%;
	height: 100%;
	}
}

This increase the size of the tiddler and PDFs iframe to get a near fullscreen effect (the size only of tiddlers tagged as PDF).

I am also using the plugin tiddler-fullscreen
tiddler-fullscreen to be able to resize to fullscreen a tiddler.

To parse/embed the PDFs I am using (on Node.js TiddlyWiki option) TiddlyWiki Files

Example of tiddlywiki.files to tag as PDF documents related to Git:

{
    "directories": [
        {
            "path": "../../../files/Git",
            "filesRegExp": "^.*\\.pdf$",
            "isTiddlerFile": false,
            "fields": {
		"tags": ["Git","PDF"],
                "title": {"source": "basename-uri-decoded"},
                "created": {"source": "created"},
                "modified": {"source": "modified"},
                "type": "application/pdf",
                "text": "",
                "_canonical_uri": {"source": "filename", "prefix": "./files/Git/"}
            }
        }
    ]
}
3 Likes

Thank you very much! I’m going to borrow steal that!

Is it possible to use a path to web like Google Drive here?