tomcritchlow.github.io/add.html at master · tomcritchlow/tomcritchlow.github.io · 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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!--

GPT thread: https://chat.openai.com/share/6b7b8b31-24ba-47be-8f4c-65d7d10aebb6

-->

<!-- Bookmarklet code


    javascript: (function () {
    var title = (document.querySelector('meta[property="og:title"]') || {}).content || document.title;
    var link = (document.querySelector('link[rel="canonical"]') || {}).href || window.location.href;
    var description = (document.querySelector('meta[property="og:description"]') || {}).content;
    var authorMeta = document.querySelector('meta[name="author"]');
    var author = authorMeta ? authorMeta.content : "";
    var ogImage = (document.querySelector('meta[property="og:image"]') || {}).content;

    var data = {
        title: title,
        link: link,
        description: description,
        author: author,
        image: ogImage || ""
    };

    var queryString = new URLSearchParams(data).toString();
    window.open('https://tomcritchlow.com/add.html?' + queryString , '_blank');
})();


-->

<!DOCTYPE html>
<html>
<head>
    <title>Bookmarklet Landing Page</title>
    <link rel="stylesheet" href="/css/tachyons.min.css">
    <style>
        #comments {
            height: 150px; /* Increases the height */
        }
    </style>
</head>
<body class="pa4 sans-serif mw8 center">
    <div class="flex mw8 center">
        <div class="w-50">
            <form id="bookmarklet-form" class="pa4 black-80">
                <div class="measure">
                    <label for="title" class="f6 b db mb2">Title:</label>
                    <input type="text" id="title" name="title" class="input-reset ba b--black-20 pa2 mb2 db w-100">
                </div>
                <div class="measure">
                    <label for="link" class="f6 b db mb2">Link:</label>
                    <input type="text" id="link" name="link" class="input-reset ba b--black-20 pa2 mb2 db w-100">
                </div>
                <div class="measure">
                    <label for="comments" class="f6 b db mb2">Comments:</label>
                    <textarea id="comments" name="comments" class="db border-box hover-black w-100 measure ba b--black-20 pa2 br2 mb2"></textarea>
                </div>
            </form>
        </div>
        <div class="w-50 pa4 black-50 bg-light-gray">
            <div class="measure">
                <label for="description" class="f6 b db mb2">Description:</label>
                <textarea id="description" name="description" class="db border-box hover-black w-100 measure ba b--black-20 pa2 br2 mb2"></textarea>
            </div>
            <div class="measure">
                <label for="author" class="f6 b db mb2">Author:</label>
                <input type="text" id="author" name="author" class="input-reset ba b--black-20 pa2 mb2 db w-100">
            </div>
            <div class="measure">
                <label for="image" class="f6 b db mb2">Image URL:</label>
                <input type="text" id="image" name="image" class="input-reset ba b--black-20 pa2 mb2 db w-100">
            </div>
            <div class="measure">
                <label for="tags" class="f6 b db mb2">Tags:</label>
                <textarea id="tags" name="tags" class="db border-box hover-black w-100 measure ba b--black-20 pa2 br2 mb2"></textarea>
            </div>
        </div>
    </div>
    <input type="button" value="Generate .md File" onclick="generateMdFile()" class="fr input-reset ba b--black bg-transparent grow pointer f6 dib">

    <script>
        // Parse the query string and populate the form
        var urlParams = new URLSearchParams(window.location.search);
        document.getElementById('title').value = urlParams.get('title');
        document.getElementById('link').value = urlParams.get('link');
        document.getElementById('description').value = urlParams.get('description');
        document.getElementById('comments').value = urlParams.get('comments') || "";
        document.getElementById('author').value = urlParams.get('author');
        document.getElementById('image').value = urlParams.get('image');

        function generateMdFile() {
            var title = document.getElementById('title').value;
            var link = document.getElementById('link').value;
            var description = document.getElementById('description').value;
            var comments = document.getElementById('comments').value;
            var author = document.getElementById('author').value;
            var image = document.getElementById('image').value;
            var tags = document.getElementById('tags').value
                .split(',')
                .map(tag => tag.trim()); // Split tags by commas and trim whitespace

            var markdown = [
                "---",
                "title: \"" + title + "\"",
                "link: \"" + link + "\"",
                "date_saved: " + new Date().toISOString().split('T')[0],
                "tags: [" + tags.map(tag => `"${tag}"`).join(", ") + "]",
                "author: \"" + author + "\"",
                "image: \"" + image + "\"",
                "description: \"" + description + "\"",
                "---",
                "",
                comments
            ].join("\n");

            var blob = new Blob([markdown], {type: "text/plain;charset=utf-8"});
            var blobUrl = URL.createObjectURL(blob);
            var a = document.createElement("a");
            a.href = blobUrl;
            //a.download = title.replace(/[^a-z0-9]/gi, '_').toLowerCase() + ".md"; - has underscore files
            a.download = (title.replace(/[^a-z0-9]/gi, '_').toLowerCase().replace(/^_+/, '') || 'default') + ".md";
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
        }
    </script>
</body>
</html>