@sctlib/site-element v0.0.4

site-element (goog.space)

Generate a website, which content (a combination of: plaintext, markdown, HTML) are stored in the URL (as encoded data), and shared as QR code (pointing to the goog.space instance; and having the data in the URL).

An instance of this webcomponent is available at goog.space.

Features

• content can be in markdown
• content can contain HTML elements, and <style></style> tags
• change to the content generates a new QR-code linking to the content
• the URL contain all the content of the page (the QR-code therefore also does)
• the <site-element/> is a web component containing the append
• content is sanitized (twice, with DOMpurify && rehypeSanitize)

Examples

In all examples, the "data of the site", is stored 100% in the URL (no server needed). This is why the URLs are so long!

• a basic page:

https://goog.space/?data=eyJ0eXBlIjoidGV4dCIsInZhbHVlIjoiIyBIZWxsbyB3b3JsZCFcblxuVGhpcyBpcyBhIGRlZmF1bHQgcGFnZSwgd2l0aCBjb250ZW50IG9ubHkhXG5cbiMjIFVzYWdlXG5cbi0gdGhlcmUgaXMgYSBcIm1lbnVcIiBidXR0b24gKHdlYnNpdGUgbmF2aWdhdGlvbiksIGF0IHRoZSBib3R0b20gb2YgdGhlIHBhZ2Vcbi0gZG91YmxlIGNsaWNrL3RhZyB0aGUgcGFnZSB0byBnbyBpbnRvIGVkaXQgbW9kZSwgb3Igb3V0IG9mIGl0IChpbnRvIFwicmVuZGVyXCIgbW9kZSlcbi0geW91IGNhbiBtYWtlIGEgcHJpbnQgdmVyc2lvbiBvZiB0aGUgcGFnZSAocHJpbnQgcGFnZSB0byBwZGYgaW4geW91ciBicm93c2VyKTsgaWYgeW91IG9wZW4gdGhlIG1lbnUsIHRoZSBxciBjb2RlIHdpbGwgYmUgcHJpbnRlZCB0b28hXG5cbiMjIE1hcmtkb3duXG5cbi0gbWFya2Rvd24gZm9ybWF0ICoqaXMgc3VwcG9ydGVkIGluIHRoZSBwYWdlKipcbi0gYXMgd2VsbCBhcyBIVE1MIGluc2lkZSB0aGUgbWFya2Rvd25cbi0gcG9zc2libGUgdG8gbWFrZSBsaW5rcyEgW2dvb2cuc3BhY2VdKGdvb2cuc3BhY2UpXG5cbiMjIFRoZXJlIGlzIG1vcmUhXG5cbi0gW3Zpc2l0IHRoZSBwcm9qZWN0IHJlcG9zaXRvcnldKGh0dHBzOi8vZ2l0bGFiLmNvbS9zY3RsaWIvc2l0ZS1lbGVtZW50Ly0vdHJlZS9tYWluKVxuXG5cbj4gVGhhbmtzIGZvciByZWFkaW5nISJ9

• a page with HTML and styles

https://goog.space/?data=eyJ0eXBlIjoidGV4dCIsInZhbHVlIjoiIyBNeSB3ZWJzaXRlXG5cbjxoZWFkZXI%2BXG5cbldlbGNvbWUgdG8gbXkgd2VicGFnZSFcblxuWW91IGNhbiBhY3R1YWxseSBlZGl0IGl0LCBhbmQgbWFrZSBpdCB5b3VyIG93bi5cblxuSnVzdCBkb3VibGUgY2xpY2sgdGhlIHBhZ2UsIG9yIGNsaWNrIHRoZSBtZW51IGJ1dHRvbiBhdCB0aGUgYm90dG9tIGNlbnRlciBvZiB0aGlzIHBhZ2UuXG5cbjwvaGVhZGVyPlxuXG5cbjxkZXRhaWxzPlxuPHN1bW1hcnk%2BV2FudCB0byBzdGFydCBhIHdlYnNpdGUgZm9yIHlvdXJzZWxmPyE8L3N1bW1hcnk%2BXG5cbldlbGwgdGhlbjpcbi0gdmlzaXQgW2dvb2cuc3BhY2VdKGdvb2cuc3BhY2UpXG4tIHN0YXJ0IHR5cGluZyBjb250ZW50XG4tIHNoYXJlIHRoZSBVUkwgb2YgdGhlIHBhZ2UsIG9yIHRoZSBRUiBjb2RlIHRvIHlvdXIgY29tbXVuaXRpZXNcbi0geW91IGNhbiBhbHNvIHVzZSBhIFtcImxpbmsgbWluaWZpZXIgc2VydmljZV0oaHR0cHM6Ly9iaXRseS5jb20pLCB0byBzaGFyZSBhIGxpbmsgeW91IGhhdmUgY29udHJvbCBvbiAoYW5kIGNhbiB1cGRhdGUhKSBcbjwvZGV0YWlscz5cblxuXG48c3R5bGU%2BXG4vKiB0aGUgOmhvc3QgcmVmZXJlbmNlcywgaW4gQ1NTLCB0aGUgd2ViLWNvbXBvbmVudCB0b3AgcGFyZW50IHRoYXQgY2FuIGJlIGVkaXRlZCAqL1xuOmhvc3Qge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiBncmVlbjtcbn1cbmgxIHtcbiAgZm9udC1zaXplOiAxMHZoO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG59XG5oZWFkZXIge1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG59XG5zaXRlLWVsZW1lbnQtc3BhY2Uge1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgZGlzcGxheTogZmxleDtcbn1cbjwvc3R5bGU%2BIn0%3D

Import in your site

If you would like to use this project on your own website, it is possible to import the project from npm or a cdn

<script src="https://unpkg.com/@sctlib/site-element" type="module"></script>
<site-element></site-element>
<style>
/* for a full height site-element */
html, body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
html {
  min-height: 100%;
}
</style>

https://goog.space/?data=eyJ0eXBlIjoidGV4dCIsInZhbHVlIjoiIyBFeGFtcGxlIHVzYWdlIGluIGEgSFRNTCBmaWxlLlxuXG4tIGltcG9ydCB0aGUgc2NyaXB0XG4tIGluc3RhbmNpYXRlIHRoZSA8c2l0ZS1lbGVtZW50Lz4gd2ViIGNvbXBvbmVudFxuLSBzdHlsZSB0aGUgc3Vycm91bmRpbmcgYXBwbGljYXRpb24sIHRvIGdpdmUgaXQgc3BhY2UgdG8gZ3Jvdy5cblxuYGBgaHRtbFxuPHNjcmlwdCBzcmM9XCJodHRwczovL3VucGtnLmNvbS9Ac2N0bGliL3NpdGUtZWxlbWVudFwiIHR5cGU9XCJtb2R1bGVcIj48L3NjcmlwdD5cbjxzaXRlLWVsZW1lbnQ%2BPC9zaXRlLWVsZW1lbnQ%2BXG48c3R5bGU%2BXG4gIGh0bWwsIGJvZHkge1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBmbGV4LWdyb3c6IDE7XG4gIH1cbiAgaHRtbCB7XG4gICAgbWluLWhlaWdodDogMTAwJTtcbiAgfVxuPC9zdHlsZT5cbmBgYCJ9

Issues

With gitlab pages hosting, we get a http error 401, Request URL is too long (so we host on cloudflare pages).