index.html

---
layout: home
---

<script src="{{ 'js-base64/base64.js' | node_module_url | relative_url }}"></script>
<script src="{{ 'pako/dist/pako.min.js' | node_module_url | relative_url }}"></script>
<script src="{{ 'showdown/dist/showdown.min.js' | node_module_url | relative_url }}"></script>

{%- assign full_width_id = 'full-width' -%}
{%- capture toggle_full_width_id -%}toggle-{{ full_width_id }}{%- endcapture -%}

{%- assign markdown_preview_id = 'markdown-preview' -%}
{%- capture toggle_markdown_preview_id -%}toggle-{{ markdown_preview_id }}{%- endcapture -%}

{%- assign read_only_id = 'read-only' -%}
{%- capture toggle_read_only_id -%}toggle-{{ read_only_id }}{%- endcapture -%}

{%- assign textarea_id = 'textarea' -%}
{%- capture textarea_placeholder -%}
{{ site.tagline }}.

{{ site.description }}

- Doesn't need cookies = immune to data loss by accident
- Doesn't use a dedicated server = low risk of downtimes

---

One example use case is this:
- You start working on a new project.
- You open a new browser window / tab group for this.
- You open a {{ site.title | downcase }} to write down to do lists, ideas, reminders, etc.
- You safely close and reopen the browser or power off and restart your machine when needed.
- You get it synced to your other devices in supported browsers and update the notes on the go.

{%- endcapture -%}

<div class="toolbar">
    <button id="{{ toggle_full_width_id }}">Toggle full-width</button>
    <button id="{{ toggle_markdown_preview_id }}">Toggle Markdown preview</button>
    <button id="{{ toggle_read_only_id }}">Toggle read-only</button>
</div>

<div class="content">
    <textarea id="{{ textarea_id }}" placeholder="{{ textarea_placeholder }}" autofocus></textarea>
    <div id="{{ markdown_preview_id }}"></div>
</div>

<script>
    function main() {
        if (document.readyState !== 'loading') {
            document.addEventListener('DOMContentLoaded', run);
        } else {
            run();
        }
    }

    function run() {
        const toggleFullWidth = document.getElementById('{{ toggle_full_width_id }}');
        loadFullWidthStyle(toggleFullWidth);
        addFullWidthToggleClickListener(toggleFullWidth);

        const toggleMarkdownPreview = document.getElementById('{{ toggle_markdown_preview_id }}');
        const textarea = document.getElementById('{{ textarea_id }}');
        const markdownPreview = document.getElementById('{{ markdown_preview_id }}');

        loadMarkdownPreviewVisibility(toggleMarkdownPreview, markdownPreview);
        addMarkdownPreviewToggleClickListener(toggleMarkdownPreview);

        loadValue(textarea, markdownPreview);
        addTextareaValueChangeListener(textarea);
        addTextareaFocusChangeListener(textarea);
        addURLHashListener(textarea, markdownPreview);

        const toggleReadOnly = document.getElementById('{{ toggle_read_only_id }}');
        loadReadOnlyStyle(toggleReadOnly, textarea);
        addReadOnlyToggleClickListener(toggleReadOnly);
    }

    function loadFullWidthStyle(toggleFullWidth) {
        const wrappers = document.getElementsByClassName('wrapper');
        Array.from(wrappers).forEach((wrapper) => {
            if (isFullWidthEnabled()) {
                wrapper.style.maxWidth = 'none';
            } else {
                wrapper.style.maxWidth = null;
            }
        });
        if (isFullWidthEnabled()) {
            toggleFullWidth.classList.add('active');
        }
    }

    function addFullWidthToggleClickListener(toggleFullWidth) {
        toggleFullWidth.addEventListener('click', () => {
            toggleSearchParam('{{ full_width_id }}');
        }, false);
    }

    function isFullWidthEnabled() {
        return isSearchParamEnabled('{{ full_width_id }}');
    }

    function addMarkdownPreviewToggleClickListener(toggleMarkdownPreview) {
        toggleMarkdownPreview.addEventListener('click', () => {
            toggleSearchParam('{{ markdown_preview_id }}');
        }, false);
    }

    function loadMarkdownPreviewVisibility(toggleMarkdownPreview, markdownPreview) {
        if (isMarkdownPreviewEnabled()) {
            markdownPreview.style.display = null;

            toggleMarkdownPreview.classList.add('active');
        } else {
            markdownPreview.style.display = 'none';
        }
    }

    function isMarkdownPreviewEnabled() {
        return isSearchParamEnabled('{{ markdown_preview_id }}');
    }

    function loadReadOnlyStyle(toggleReadOnly, textarea) {
        if (isReadOnlyEnabled()) {
            if (isMarkdownPreviewEnabled()) {
                textarea.style.display = 'none';
            } else {
                textarea.readOnly = true;
            }

            toggleReadOnly.classList.add('active');
        } else {
            textarea.style.display = null;
            textarea.readOnly = false;
        }
    }

    function addReadOnlyToggleClickListener(toggleReadOnly) {
        toggleReadOnly.addEventListener('click', () => {
            toggleSearchParam('{{ read_only_id }}');
        }, false);
    }

    function isReadOnlyEnabled() {
        return isSearchParamEnabled('{{ read_only_id }}');
    }

    function loadValue(textarea, markdownPreview) {
        const value = retrieveValue();
        const oldValue = textarea.value;
        textarea.value = value;
        updateMarkdownPreviewIfNeeded(value, markdownPreview);
        updateTitle(value, markdownPreview.textContent);
        if (oldValue === '') {
            textarea.selectionStart = value.length;
        }
    }

    const debounce = (func, delay) => {
        let debounceTimer;
        return function () {
            const context = this;
            const args = arguments;
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(() => func.apply(context, args), delay);
        };
    };

    function addTextareaValueChangeListener(textarea) {
        textarea.addEventListener('input', debounce((event) => {
            storeValue(event.target.value);
        }, 300), false);
    }

    function addTextareaFocusChangeListener(textarea) {
        textarea.addEventListener('blur', () => {
            storeValue(textarea.value);
        }, false);

        window.addEventListener('blur', () => {
            storeValue(textarea.value);
        }, false);
    }

    function addURLHashListener(textarea, markdownPreview) {
        window.addEventListener('hashchange', () => {
            loadValue(textarea, markdownPreview);
            textarea.focus();
        });
    }

    function retrieveValue() {
        const hash = window.location.hash;
        if (hash === '') { return ''; }
        return deserialize(hash.substring(1));
    }

    function storeValue(value) {
        window.location.hash = '#' + serialize(value);
    }

    function updateTitle(value, markdownValue) {
        const finalValue = markdownValue || value;

        const titleParts = [];
        const customParts = [];

        const rawTitle = finalValue.split('\n', 1)[0];
        if (rawTitle !== '') {
            const truncatedTitle = truncate(rawTitle.trim(), 30);
            customParts.push(truncatedTitle);
        }

        if (isMarkdownPreviewEnabled()) {
            customParts.push('Markdown');
        }

        if (customParts.length > 0) {
            titleParts.push(customParts.join(' - '));
        }
        titleParts.push('{{ site.tagline }}');

        document.title = titleParts.join(' | ');
    }

    function updateMarkdownPreviewIfNeeded(value, markdownPreview) {
        if (!isMarkdownPreviewEnabled()) { return; }

        const converter = new showdown.Converter({
            omitExtraWLInCodeBlocks: true,
            noHeaderId: true,
            parseImgDimensions: true,
            simplifiedAutoLink: true,
            literalMidWordUnderscores: true,
            strikethrough: true,
            tables: true,
            tasklists: true,
            smoothLivePreview: true,
            simpleLineBreaks: true,
            openLinksInNewWindow: true,
            emoji: true,
            splitAdjacentBlockquotes: true
        });
        const html = converter.makeHtml(value);
        markdownPreview.innerHTML = html;
    }

    function toggleSearchParam(param) {
        const searchParams = new URLSearchParams(window.location.search);
        if (isSearchParamEnabled(param)) {
            searchParams.delete(param);
        } else {
            searchParams.set(param, 'true');
        }
        document.location.search = searchParams.toString();
    }

    function isSearchParamEnabled(param) {
        const searchParams = new URLSearchParams(window.location.search);
        return searchParams.has(param);
    }

    function truncate(string, limit) {
        if (string.length < limit) { return string; }
        return string.slice(0, limit - 1) + "…";
    }

    function serialize(value) {
        if (value === '') { return ''; }
        const data = new TextEncoder().encode(value);
        const compressed = pako.deflate(data, { level: 9 });
        return Base64.fromUint8Array(compressed, true);
    }

    function deserialize(value) {
        const data = Base64.toUint8Array(value);
        return pako.inflate(data, { to: 'string' });
    }

    main();
</script>