showr – demo post

Avris

Published: 2019-04-10 23:43:46 Last update: 2019-04-25 18:36:51


#

Easily share content...

#

Need to send someone a nicely formatted text accessible via a simple link? Look no further. Simply add text, headers, images, tables, videos, quotes, code, etc. – and publish it with one click.

#

Anonymously...

#

No need to run a blog or have a social media account – using showr you can put content on the Internet without registering, and just post the link wherever and however you want.

#

With a self-destruct...

#

Sometimes you want things to be more volatile. Showr lets you set a time limit and limit of unique visitors – after either of them is reached, your content will just self-destruct.

#

* * *

#

Made in Rotterdam 😍
(Photo: @TMalenkowicz)

#

Available block types:

#
  • Header (H1, H2, H3, H4, H5, H6)
  • Paragraph
  • List (ordered, unordered)
  • Checklist
  • Image (upload by pasting an image, pasting a link, selecting a file or by drag&drop)
  • Code
  • Link
  • Quote
  • Delimiter
  • Table
  • Embed (CodePen, Coub, Imgur, Gfycat, Twitch, Vimeo, Youtube) – just paste a link!
#

Hint: check out the very bottom of the post – you'll find more options there: Edit & Remove your posts, Edit history, Report inappropriate content & JSON version.

#

* * *

#

Tools used:

#
  1. Symfony
  2. Bootstrap
  3. Editor.js
  4. Icons from FontAwesome
  5. Web fonts from Google
  6. Emojis from Twitter
#

Author:

#

Content type examples:

#

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante velit. Suspendisse nibh nibh, ullamcorper ac mi vel, lobortis fermentum sem. Aenean in justo ante. Duis id augue orci. Sed vel lacus non erat consectetur vehicula ac et mauris. Praesent neque sem, lobortis a porttitor sit amet, interdum id lorem. Proin efficitur semper augue, non condimentum nisl elementum sit amet. Curabitur eu molestie ex, ac sollicitudin erat. Mauris molestie molestie lacus, sed sodales sapien varius ac. Etiam fringilla aliquam diam ut lacinia. Praesent eu enim eu dolor viverra hendrerit. Vestibulum tempus pulvinar velit ut mollis. Nam porttitor scelerisque ullamcorper.

#

“Is that vodka?" Margarita asked weakly.
The cat jumped up in his seat with indignation.
"I beg pardon, my queen," he rasped, "Would I ever allow myself to offer vodka to a lady? This is pure alcohol!”

Mikhail Bulgakov, The Master and Margarita
#

youtu.be/S_GVbuddri8 That's damn impressive!

#

Vanillin.js

window._each = (obj, callable) => {
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            callable(obj[key], key);
        }
    }
};

window._el = (html) => {
    const div = document.createElement('div');
    div.innerHTML = html.trim();

    return div.firstChild;
};

window._sel = (selector, startNode = document) => startNode.querySelector(selector);

window._selAll = (selector, startNode = document) => [...startNode.querySelectorAll(selector)];

window._findParent = (el, selector) => {
    do {
        if (el.matches(selector)) {
            return el;
        }
        el = el.parentNode;
    } while (el && el.matches);
};

window._on = (selector, event, handler) => {
    document.addEventListener(event, function (e) {
        const match = _findParent(e.target, selector);
        if (match) {
            const result = handler.apply(match, [e]);
            if (result === false) {
                e.preventDefault();
                e.stopPropagation();
            }
        }
    });
};

window._request = (method, url, data, headers) => {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open(method, url, true);
        _each(headers || {}, (val, key) => xhr.setRequestHeader(key, val));
        xhr.onload = () => {
            if (xhr.status >= 400) {
                reject(xhr);
            } else {
                resolve(xhr.responseText, xhr);
            }
        };
        xhr.onerror = () => reject(xhr);

        let formData;
        if (data instanceof HTMLElement) {
            formData = new FormData(data);
        } else if (data instanceof FormData) {
            formData = data;
        } else {
            formData = new FormData();
            _each(data, (val, key) => formData.append(key, val));
        }

        xhr.send(formData);
    });
};

window._extend = (out, ...args) => {
    out = out || {};

    for (let i = 1; i < args.length; i++) {
        const obj = args[i];
        if (!obj) {
            continue;
        }

        _each(obj, (val, key) => {
            out[key] = val;
        });
    }

    return out;
};
#

PS You can also <?php include 'code.php' inline.

#
Ordinal number Capital letter Small letter
1 A a
2 B b
3 C c
4 D d
5 E e
#

Things to do:

#
  • A done thing
  • An even more done thing
  • A not-so-much done thing
  • A not-even-started thing