{"id":15048720,"url":"https://gitlab.com/sctlib/space-element","last_synced_at":"2025-04-10T01:33:55.144Z","repository":{"id":52442325,"uuid":"35878918","full_name":"sctlib/space-element","owner":"sctlib","description":"https://sctlib.gitlab.io/space-element/#input=hello is web-component space-element that generates a simple web-space, which DOM and content are stored in the URL, as encoded data, as well as in sharable QR code (and \"printable\" version).","archived":false,"fork":false,"pushed_at":null,"size":null,"stargazers_count":1,"open_issues_count":6,"forks_count":0,"subscribers_count":null,"default_branch":"main","last_synced_at":"2025-03-31T04:01:44.676Z","etag":null,"topics":["HTML/CSS","goog-space","markdown","qr-code","serverless","space-element","url","url-first","web-components"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://gitlab.com/uploads/-/system/project/avatar/35878918/web-site.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-04T12:38:33.778Z","updated_at":"2024-03-05T09:51:57.189Z","dependencies_parsed_at":"2022-08-23T10:50:19.224Z","dependency_job_id":null,"html_url":"https://gitlab.com/sctlib/space-element","commit_stats":null,"previous_names":["sctlib/space-element","sctlib/site-element"],"tags_count":1,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repositories/sctlib%2Fspace-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repositories/sctlib%2Fspace-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repositories/sctlib%2Fspace-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repositories/sctlib%2Fspace-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/owners/sctlib","download_url":"https://gitlab.com/sctlib/space-element/-/archive/main/space-element-main.zip","host":{"name":"gitlab.com","url":"https://gitlab.com","kind":"gitlab","repositories_count":4518607,"owners_count":6922,"icon_url":"https://github.com/gitlab.png","version":null,"created_at":"2022-05-30T11:31:42.605Z","updated_at":"2024-07-18T11:24:13.055Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/gitlab.com/owners"}},"keywords":["HTML/CSS","goog-space","markdown","qr-code","serverless","space-element","url","url-first","web-components"],"created_at":"2024-09-24T21:15:43.520Z","updated_at":"2025-04-10T01:33:55.124Z","avatar_url":"https://gitlab.com/uploads/-/system/project/avatar/35878918/web-site.png","language":null,"readme":"# space-element (goog.space)\n\n\u003e Generate a website, which content (a combination of: plaintext,\n\u003e markdown, HTML) are stored in the URL (as encoded data), and shared\n\u003e as QR code (pointing to the goog.space instance; and having the data in the URL).\n\nAn instance of this webcomponent is available at [goog.space](https://goog.space).\n\n## Features\n\n- content can be in markdown\n- content can contain HTML elements, and `\u003cstyle\u003e\u003c/style\u003e` tags\n- change to the content generates a new QR-code linking to the content\n- the URL contain all the content of the page (the QR-code therefore also does)\n- the `\u003cspace-element/\u003e` is a web component container the logic\n- content is sanitized (twice, with DOMpurify \u0026\u0026 rehypeSanitize)\n- some \"web components are white listed\" (`\u003cmatrix-room-element/\u003e`\n  [see docs](https://sctlib.gitlab.io/mwc/) , `\u003cqr-code/\u003e` etc.)\n\nIt also allows, experimental, and maybe not here to stay:\n- [p2p WebRTC](https://gitlab.com/sctlib/rtc) connection\n- [yjs document](https://github.com/yjs/yjs) editing\n\nThe RTC code (ours) has dependency to matrix-room-element as well\n(code is currently in double, nee to work with peer\ndependencies). Also the RTCCode and QRCode have a dependency to wasm\nmode `zbar` to decode the qrcodes from images/videos (and that is\nheavy). So we gotta reflect on the trade offs.\n\n## Examples\n\nIn all examples, the \"data of the site\", is stored 100% in the URL (no server needed). This is why the URLs are so long!\n\n- a basic page:\n\nhttps://goog.space/#data=eyJ0eXBlIjoidGV4dCIsInZhbHVlIjoiIyBIZWxsbyB3b3JsZCFcblxuVGhpcyBpcyBhIGRlZmF1bHQgcGFnZSwgd2l0aCBjb250ZW50IG9ubHkhXG5cbiMjIFVzYWdlXG5cbi0gdGhlcmUgaXMgYSBcIm1lbnVcIiBidXR0b24gKHdlYnNpdGUgbmF2aWdhdGlvbiksIGF0IHRoZSBib3R0b20gb2YgdGhlIHBhZ2Vcbi0gZG91YmxlIGNsaWNrL3RhZyB0aGUgcGFnZSB0byBnbyBpbnRvIGVkaXQgbW9kZSwgb3Igb3V0IG9mIGl0IChpbnRvIFwicmVuZGVyXCIgbW9kZSlcbi0geW91IGNhbiBtYWtlIGEgcHJpbnQgdmVyc2lvbiBvZiB0aGUgcGFnZSAocHJpbnQgcGFnZSB0byBwZGYgaW4geW91ciBicm93c2VyKTsgaWYgeW91IG9wZW4gdGhlIG1lbnUsIHRoZSBxciBjb2RlIHdpbGwgYmUgcHJpbnRlZCB0b28hXG5cbiMjIE1hcmtkb3duXG5cbi0gbWFya2Rvd24gZm9ybWF0ICoqaXMgc3VwcG9ydGVkIGluIHRoZSBwYWdlKipcbi0gYXMgd2VsbCBhcyBIVE1MIGluc2lkZSB0aGUgbWFya2Rvd25cbi0gcG9zc2libGUgdG8gbWFrZSBsaW5rcyEgW2dvb2cuc3BhY2VdKGdvb2cuc3BhY2UpXG5cbiMjIFRoZXJlIGlzIG1vcmUhXG5cbi0gW3Zpc2l0IHRoZSBwcm9qZWN0J3MgY29kZSByZXBvc2l0b3J5XShodHRwczovL2dpdGxhYi5jb20vc2N0bGliL3NwYWNlLWVsZW1lbnQpXG5cblxuPiBUaGFua3MgZm9yIHJlYWRpbmchIn0%3D\n\n- a page with HTML and styles\n\nhttps://goog.space/#data=eyJ0eXBlIjoidGV4dCIsInZhbHVlIjoiIyBNeSB3ZWJzaXRlXG5cbjxoZWFkZXI%2BXG5cbldlbGNvbWUgdG8gbXkgd2VicGFnZSFcblxuWW91IGNhbiBhY3R1YWxseSBlZGl0IGl0LCBhbmQgbWFrZSBpdCB5b3VyIG93bi5cblxuSnVzdCBkb3VibGUgY2xpY2sgdGhlIHBhZ2UsIG9yIGNsaWNrIHRoZSBtZW51IGJ1dHRvbiBhdCB0aGUgYm90dG9tIGNlbnRlciBvZiB0aGlzIHBhZ2UuXG5cbjwvaGVhZGVyPlxuXG5cbjxkZXRhaWxzPlxuPHN1bW1hcnk%2BV2FudCB0byBzdGFydCBhIHdlYnNpdGUgZm9yIHlvdXJzZWxmPyE8L3N1bW1hcnk%2BXG5cbldlbGwgdGhlbjpcbi0gdmlzaXQgW2dvb2cuc3BhY2VdKGdvb2cuc3BhY2UpXG4tIHN0YXJ0IHR5cGluZyBjb250ZW50XG4tIHNoYXJlIHRoZSBVUkwgb2YgdGhlIHBhZ2UsIG9yIHRoZSBRUiBjb2RlIHRvIHlvdXIgY29tbXVuaXRpZXNcbi0geW91IGNhbiBhbHNvIHVzZSBhIFtcImxpbmsgbWluaWZpZXIgc2VydmljZV0oaHR0cHM6Ly9iaXRseS5jb20pLCB0byBzaGFyZSBhIGxpbmsgeW91IGhhdmUgY29udHJvbCBvbiAoYW5kIGNhbiB1cGRhdGUhKSBcbjwvZGV0YWlscz5cblxuXG48c3R5bGU%2BXG4vKiB0aGUgOmhvc3QgcmVmZXJlbmNlcywgaW4gQ1NTLCB0aGUgd2ViLWNvbXBvbmVudCB0b3AgcGFyZW50IHRoYXQgY2FuIGJlIGVkaXRlZCAqL1xuOmhvc3Qge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiBncmVlbjtcbn1cbmgxIHtcbiAgZm9udC1zaXplOiAxMHZoO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG59XG5oZWFkZXIge1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG59XG5zcGFjZS1zaXRlIHtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGRpc3BsYXk6IGZsZXg7XG59XG48L3N0eWxlPiJ9\n\n## Import in a site\n\nIf you would like to use this project on your own website, it is possible to import the project from npm or a cdn\n\n```html\n\u003cscript src=\"https://unpkg.com/@sctlib/space-element\" type=\"module\"\u003e\u003c/script\u003e\n\u003cspace-element\u003e\u003c/space-element\u003e\n\u003cstyle\u003e\n\t/* for a full height space-element */\n\thtml,\n\tbody {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tflex-grow: 1;\n\t}\n\thtml {\n\t\tmin-height: 100%;\n\t}\n\u003c/style\u003e\n```\n\nhttps://goog.space/#data=eyJ0eXBlIjoidGV4dCIsInZhbHVlIjoiIyBFeGFtcGxlIHVzYWdlIGluIGEgSFRNTCBmaWxlLlxuXG4tIGltcG9ydCB0aGUgc2NyaXB0XG4tIGluc2VydCB0aGUgYDxzcGFjZS1lbGVtZW50Lz5gIHdlYiBjb21wb25lbnRcbi0gc3R5bGUgdGhlIHN1cnJvdW5kaW5nIGFwcGxpY2F0aW9uLCB0byBnaXZlIGl0IHNwYWNlIHRvIGdyb3dcblxuYGBgaHRtbFxuPHNjcmlwdCBzcmM9XCJodHRwczovL3VucGtnLmNvbS9Ac2N0bGliL3NpdGUtZWxlbWVudFwiIHR5cGU9XCJtb2R1bGVcIj48L3NjcmlwdD5cbjxzcGFjZS1lbGVtZW50Pjwvc3BhY2UtZWxlbWVudD5cbjxzdHlsZT5cbiAgaHRtbCwgYm9keSB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGZsZXgtZ3JvdzogMTtcbiAgfVxuICBodG1sIHtcbiAgICBtaW4taGVpZ2h0OiAxMDAlO1xuICB9XG48L3N0eWxlPlxuYGBgIn0%3D\n\n# Issues\n\nWith gitlab pages hosting, we get a http error 401, Request URL is too long (so we host on cloudflare pages).\n\n# URL APIs\n\n- `#input=` with a string of text as input\n- `#data=` with a goog.space encoded data (see #data-encoding)\n\n# About\n## `goog`\nThe `goog`(ol) is a [large number (wikipedia)](https://en.wikipedia.org/wiki/Googol).\n\n## the data encoding\n\nThe encoding is here to stay, and **should never change** to keep the\n\"old URL data\" decodable.\n\nFrom the `space-element.js` code:\n\n```js\n/**\n * Unicode to ASCII (encode data to Base64)\n * @param {string} data\n * @return {string}\n\t https://base64.guru/developers/javascript/examples/unicode-strings\n\t It preserves all unicodes characters (including emojis) when in a URL parameter\n */\nfunction decode(data) {\n\treturn decodeURIComponent(escape(atob(data)));\n}\nfunction encode(data) {\n\treturn btoa(unescape(encodeURIComponent(data)));\n}\n```\n\n\nIf this one day changed, we should keep backward compatibility with\n\"migrations\", but hoping we never have to.\n## app minimalism\nSomehow, maybe this application should be rewritten with a `\u003cbody\ncontenteditable/\u003e`, and `edit.goog.space` subdomain, so the resulting\nHTML is as clean as possible (and archive.is or archive.org can almost\nhave the \"raw user content\" withtout any goog.space content).\n## archiving an URL to archive.is\n\nArchive.is is free, works from the URL, is super practical, works with\ngoog.space (archive.org had troubles with web components, and very slow URLs).\n\n- https://mementoweb.org/\n- many other services follow memento protocol https://mementoweb.org/depot/\n## sharing a space-element goog-space to matrix\n## mime types \u0026 URL Search Params\nThe application, as \"simple\" as it is, tries to define the inputs and\noutputs it can accept and provide, and its mime type \"as a protocol\".\n\nThe idea is to somehow get a clear and predictable pattern to\ncommunicate with the URL API of a goog-space application.\n\nThe `protocol` is `space.goog` following the JAVA (and Matrix.org;\nreversed domain name) naming conventions, so it can be written\n`space.goog:` (as in `new URL().protocol` format).\n\nGoog.space accepts currently two forms of input, \"unencode text data\"\nand \"raw text data\".\n\n- the `#input=` url search (hash) param for user text, e.g.: `hello world`.\n- the `#data=` for the encoded data, decode to the user text, e.g.:\n  `eyJ2YWx1ZSI6ImhlbGxvIHdvcmxkIn0%3D`\n\t\n\u003e For more information on them see the rest of the documentation.\n\nWe could therefore imagine representing the user `input` URL content\n(in a JSON \"event file\" format) as:\n\n```json\n{\n  \"mimetype\": \"space.goog://input+text\",\n  \"space.goog://input+text\": \"hello world\"\n}\n```\n\nAs for the encoded `data` representation, since its decoded result\ninfered from the mimetype URL schema \"space.goog:\" of type \"data\",\nthrefore encoded:\n\n```json\n{\n  \"mimetype\": \"space.goog://data+json\",\n  \"space.goog://data+json\": \"eyJ2YWx1ZSI6ImhlbGxvIHdvcmxkIn0%3D\"\n}\n```\n\n\u003e For `encoding` and `decoding` functions, see docs section.\n\n\n\u003e Note: the \"file event\" representation is an inspired variant of a\n\u003e [matrix event\n\u003e specification](https://www.ietf.org/id/draft-ralston-mimi-matrix-message-format-01.html)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/gitlab.com%2Fsctlib%2Fspace-element","html_url":"https://awesome.ecosyste.ms/projects/gitlab.com%2Fsctlib%2Fspace-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/gitlab.com%2Fsctlib%2Fspace-element/lists"}