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:
- a page with HTML and styles
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>
Issues
With gitlab pages hosting, we get a http error 401, Request URL is too long (so we host on cloudflare pages).