hashdown/index.html at main · cottrell/hashdown · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hashdown</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <main class="composer">
    <header>
      <h1>Hashdown</h1>
      <p class="tagline">Share rendered content in a single URL. Nothing is stored — content lives in the hash fragment, which never reaches the server.</p>
    </header>

    <section class="panel">
      <label for="content">Paste your content</label>
      <textarea id="content" rows="12" placeholder="Paste URLs (one per line) or markdown:

https://planistan.github.io
https://planistan.github.io/research
https://github.com/cottrell"></textarea>

      <div class="controls">
        <fieldset>
          <legend>Format</legend>
          <label><input type="radio" name="format" value="markdown" checked> Markdown</label>
          <label><input type="radio" name="format" value="html"> HTML</label>
        </fieldset>

        <fieldset>
          <legend>Encoding</legend>
          <label><input type="radio" name="encoding" value="uri" checked> URL-encoded (readable)</label>
          <label><input type="radio" name="encoding" value="base64"> Base64 (shorter for long text)</label>
        </fieldset>
      </div>

      <button type="button" id="generate">Generate link</button>

      <div id="output" class="output hidden">
        <label for="link">Your link</label>
        <div class="link-row">
          <input id="link" type="text" readonly>
          <button type="button" id="copy">Copy</button>
          <a id="preview" href="#" target="_blank" rel="noopener">Preview</a>
        </div>
        <p id="stats" class="stats"></p>
      </div>
    </section>

    <section class="notes">
      <h2>How it works</h2>
      <ul>
        <li>Content is placed after <code>#</code> in the URL and decoded entirely in the browser.</li>
        <li>GitHub Pages only serves the empty shell — your text never hits any server.</li>
        <li>Use <a href="markdown/">/markdown</a> for markdown links, <a href="html/">/html</a> for raw HTML.</li>
        <li>Paste plain URLs (one per line) — they become a linked list with shortened labels.</li>
        <li>URLs have length limits (~2 KB safe everywhere; modern browsers tolerate much more).</li>
      </ul>
    </section>
  </main>
  <script src="js/encode.js"></script>
  <script>
    const content = document.getElementById('content');
    const output = document.getElementById('output');
    const linkInput = document.getElementById('link');
    const stats = document.getElementById('stats');
    const preview = document.getElementById('preview');
    let lastGeneratedUrl = '';

    document.getElementById('generate').addEventListener('click', () => {
      const text = content.value;
      if (!text.trim()) return;

      const format = document.querySelector('input[name="format"]:checked').value;
      const encoding = document.querySelector('input[name="encoding"]:checked').value;
      const path = format === 'html' ? 'html/' : 'markdown/';
      const hash = HashdownEncode.encode(text, encoding);
      const base = new URL('./', window.location.href);
      const url = new URL(path, base).href + hash;

      lastGeneratedUrl = url;
      linkInput.value = url;
      preview.href = url;
      stats.textContent = `${text.length} chars → ${url.length} char URL (${encoding})`;
      output.classList.remove('hidden');
    });

    document.getElementById('copy').addEventListener('click', async () => {
      const url = lastGeneratedUrl || linkInput.value;
      if (!url) return;

      const btn = document.getElementById('copy');
      const prev = btn.textContent;

      try {
        await navigator.clipboard.writeText(url);
      } catch {
        linkInput.value = url;
        linkInput.select();
        linkInput.setSelectionRange(0, url.length);
        document.execCommand('copy');
      }

      btn.textContent = 'Copied!';
      setTimeout(() => { btn.textContent = prev; }, 1500);
    });
  </script>
</body>
</html>