{"id":15662966,"url":"https://github.com/gildas-lormeau/polyglot-html-zip-png","last_synced_at":"2025-04-04T15:06:55.266Z","repository":{"id":241424026,"uuid":"806794162","full_name":"gildas-lormeau/Polyglot-HTML-ZIP-PNG","owner":"gildas-lormeau","description":"Learn How to Create HTML/ZIP/PNG Polyglot Files!","archived":false,"fork":false,"pushed_at":"2025-01-01T01:18:54.000Z","size":36248,"stargazers_count":222,"open_issues_count":0,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-28T14:06:14.483Z","etag":null,"topics":["html","javascript","pdf","png","polyglot-files","self-extracting-zip","single-file","zip"],"latest_commit_sha":null,"homepage":"https://gildas-lormeau.github.io/Polyglot-HTML-ZIP-PNG/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gildas-lormeau.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-27T23:19:41.000Z","updated_at":"2025-03-10T12:09:42.000Z","dependencies_parsed_at":"2024-06-27T02:13:22.339Z","dependency_job_id":"ff9653b6-fddd-4344-bbb9-46027f46866b","html_url":"https://github.com/gildas-lormeau/Polyglot-HTML-ZIP-PNG","commit_stats":null,"previous_names":["gildas-lormeau/polyglot-html-zip-png"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gildas-lormeau%2FPolyglot-HTML-ZIP-PNG","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gildas-lormeau%2FPolyglot-HTML-ZIP-PNG/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gildas-lormeau%2FPolyglot-HTML-ZIP-PNG/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gildas-lormeau%2FPolyglot-HTML-ZIP-PNG/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gildas-lormeau","download_url":"https://codeload.github.com/gildas-lormeau/Polyglot-HTML-ZIP-PNG/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247198449,"owners_count":20900079,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","javascript","pdf","png","polyglot-files","self-extracting-zip","single-file","zip"],"created_at":"2024-10-03T13:35:05.479Z","updated_at":"2025-04-04T15:06:55.243Z","avatar_url":"https://github.com/gildas-lormeau.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Learn How to Create HTML/ZIP/PNG Polyglot Files in JavaScript\n\n## Table of Contents\n\n- [Introduction](#introduction)\n- [Presentation](#presentation)\n- [TL;DR](#tldr)\n  - [Resulting File](#resulting-file)\n  - [Summary](#summary)\n  - [File Compatibility](#file-compatibility)\n  - [Fun Fact](#fun-fact)\n- [Viewing the Presentation in Chromium (and WebKit) Browsers](#viewing-the-presentation-in-chromium-and-webkit-browsers)\n- [Creation of Polyglot Files with SingleFile](#creation-of-polyglot-files-with-singlefile)\n- [Known Issues](#known-issues)\n- [Thank You](#thank-you)\n\n## Introduction\n\nImagine a digital chameleon: a file that combines ZIP, HTML, and PNG into one versatile format. It can be displayed as a web page, unzipped to obtain all the page's resources, or viewed as an image. \n\nDiscover an innovative approach to sharing and storing web content, and learn how to create these polyglot files in JavaScript!\n\n## Presentation\n\nYou can view the web presentation in:\n - [english](https://gildas-lormeau.github.io/Polyglot-HTML-ZIP-PNG/en-EN/dist/presentation-polyglot-png-zip-html_en-EN.html) ([download](https://github.com/gildas-lormeau/Polyglot-HTML-ZIP-PNG/raw/main/en-EN/dist/presentation-polyglot-png-zip-html_en-EN.html))\n - [french](https://gildas-lormeau.github.io/Polyglot-HTML-ZIP-PNG/fr-FR/dist/presentation-polyglot-png-zip-html_fr-FR.html) ([download](https://github.com/gildas-lormeau/Polyglot-HTML-ZIP-PNG/raw/main/fr-FR/dist/presentation-polyglot-png-zip-html_fr-FR.html)) ([video](https://www.youtube.com/watch?v=XjOGPnPP6eQ))\n\nPress `F1` during the presentation to see the keyboard shortcuts.\n\n## TL;DR\n\n### Resulting File\n\n- download file: [demo.png.zip.html](https://github.com/gildas-lormeau/Polyglot-HTML-ZIP-PNG/raw/main/demo.png.zip.html)\n- view page: [demo.png.zip.html](https://gildas-lormeau.github.io/Polyglot-HTML-ZIP-PNG/demo.png.zip.html)\n\n### Summary\n\n - [english](SUMMARY.md) ([pdf](https://github.com/gildas-lormeau/Polyglot-HTML-ZIP-PNG/raw/main/SUMMARY.pdf))\n - [french](./fr-FR/RESUME.md) ([pdf](https://github.com/gildas-lormeau/Polyglot-HTML-ZIP-PNG/raw/main/fr-FR/RESUME.pdf))\n\n### File Compatibility\n\nThis file and the presentation files are compatible with: \n - HTML (displays the extracted page in [no-quirks mode](https://dom.spec.whatwg.org/#concept-document-no-quirks))\n - ZIP (contains the displayed page and its resources) - rename the file to `.zip` and view it with [ZIP Manager](https://gildas-lormeau.github.io/zip-manager/)\n - PNG - rename the file to `.png` and view it with [PNG file chunk inpector](https://www.nayuki.io/page/png-file-chunk-inspector)\n\nIf you are intrigued or more curious, you can also view it with [HexEd.it](https://hexed.it).\n\nThe presentation explains how to generate this file and the technical challenges involved.\n\n### Fun Fact\n\nThe image displayed at the center of the page [demo.png.zip.html](https://gildas-lormeau.github.io/Polyglot-HTML-ZIP-PNG/demo.png.zip.html) is the page itself, but interpreted as a PNG file (cf. the `\u003cimg src=\"#\" ...\u003e` tag).\n\n## Viewing the Presentation in Chromium (and WebKit) Browsers\n\nYou should [install the extension](https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked) from the zip file located in [util/web-extension](https://github.com/gildas-lormeau/Polyglot-HTML-ZIP-PNG/tree/main/util/web-extension) in order to add the support of `file://` URIs in the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and run the first examples from the presentation. \n\nAlternatively, you can view the examples via an HTTP server. \n\nThis issue is addressed in the subsequent examples of the presentation.\n\n## Creation of Polyglot Files with SingleFile\n\n- from the browser\n\nInstall [SingleFile](https://github.com/gildas-lormeau/SingleFile?tab=readme-ov-file#install), select in the options page `File format \u003e format \u003e self-extracting ZIP (universal)` and enable `File format \u003e format \u003e embed image`.\n\n- from the command line interface\n\nInstall [`single-file-cli`](https://www.npmjs.com/package/single-file-cli) from NPM and run `single-file` as shown below.\n\n```sh\nnpm install single-file-cli\nnpx single-file \\\n  --compress-content \\\n  --self-extracting-archive \\\n  --embedded-image=./image.png \\\n  --dump-content \\\n  https://www.example.com \u003e output.png.zip.html\n```\n\n## Known Issues\n\n - A bug in \"Archive Utility\" on macOS prevents it from decompressing the resulting file. You can use `unzip` to get around this issue.\n - The HTML page cannot be viewed when opened from the filesystem on iOS because the page is displayed by default in a viewer which does not support JavaScript. Installing a third-party browser can help you get around this problem.\n - Depending on the browser you're using, the presentation may be a little slow.\n\n## Thank You\n\nThis presentation is dedicated to my biggest supporter on this project. Many thanks [@ljonathanl](https://github.com/ljonathanl), we miss your enthusiasm and creativity.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgildas-lormeau%2Fpolyglot-html-zip-png","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgildas-lormeau%2Fpolyglot-html-zip-png","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgildas-lormeau%2Fpolyglot-html-zip-png/lists"}