serverlessHTML/raw.html at master · chapmanjacobd/serverlessHTML · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Serverless HTML</title>
    <link rel="stylesheet" type="text/css" href="https://unli.xyz/awsm_theme_pearl-lusta.css" media="all">
    <script src="https://cdn.jsdelivr.net/gh/ryangjchandler/spruce@0.6.1/dist/spruce.umd.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.4.1/dist/alpine.min.js"></script>
</head>

<body>
    <div x-data="{}" x-subscribe
        style="display: flex; position: relative; justify-content: space-between; width: 100%; flex-wrap: wrap;">

        <textarea x-model="$store.settings.t" id="editor" placeholder="Paste your HTML here"
            style="width: 48%; min-height: 40rem; display: flex; flex-direction: column; white-space: pre; overflow-wrap: normal; overflow-x: scroll;"></textarea>

        <div x-html="$store.settings.t" style="width:50%; display: flex; flex-direction: column;"></div>

    </div>


    <script>
        const setQueryStringParameter = (name, value) => {
            const params = new URLSearchParams(window.location.search)
            params.set(name, value)

            const url = decodeURIComponent(`${window.location.pathname}?${params}`)
            window.history.replaceState({}, '', url)

            return url
        }

        let defaultSettings = {
            t: `<div x-data="{ tab: 'foo' }">
    <button :class="{ 'active': tab === 'foo' }" @click="tab = 'foo'">Tab 1</button>
    <button :class="{ 'active': tab === 'bar' }" @click="tab = 'bar'">Tab 2</button>

    <div x-show="tab === 'foo'">Hello</div>
    <div x-show="tab === 'bar'">World</div>
</div>

<style>
    .active {
        font-weight: 600;
        text-decoration: underline;
    }
</style>` }

        Spruce.store('settings', {})


        // get settings
        if (typeof gotSettingsFromURL === 'undefined') {
            window.gotSettingsFromURL = true;

            var urlParams = new URLSearchParams(window.location.search)

            let settingsFromURL = {}
            Object.keys(defaultSettings).forEach((key, index) => {
                if (urlParams.has(key)) {
                    var settingsParam = JSON.parse(urlParams.get(key))

                    if (settingsParam != null) {
                        Object.assign(settingsFromURL, { [key]: settingsParam })
                    }

                } else {
                    Object.assign(settingsFromURL, { [key]: defaultSettings[key] })
                }
            })
            Spruce.reset('settings', settingsFromURL)
        }


        // save settings
        Object.keys(defaultSettings).forEach((key, index) => {
            Spruce.watch(`settings.${key}`, (old, next) => {
                setQueryStringParameter(key, encodeURIComponent(JSON.stringify(next)))
            })
        })


    </script>


</body>

</html>