1
import type { Config, Context } from "@netlify/functions";
2
import * as cheerio from "cheerio";
3
import { Octokit } from "@octokit/rest";
4
import sharp from "sharp";
5

6
const corsHeaders = {
7
  "Access-Control-Allow-Origin": "*",
8
  "Access-Control-Allow-Headers": "Content-Type",
9
  "Access-Control-Allow-Methods": "POST, OPTIONS",
10
  "Content-Type": "application/json",
11
};
12

13
export default async (req: Request, context: Context) => {
14
  // 1. Handle CORS Preflight OPTIONS requests
15
  if (req.method === "OPTIONS") {
16
    return new Response(null, { status: 204, headers: corsHeaders });
17
  }
18

19
  if (req.method !== "POST") {
20
    return new Response(
21
      JSON.stringify({ error: "Method not allowed" }),
22
      { status: 405, headers: corsHeaders }
23
    );
24
  }
25

26
  try {
27
    const { url, passcode, html: rawHtml } = await req.json();
28

29
    const expectedSecret = process.env.ARCHIVE_SECRET;
30
    if (expectedSecret && passcode !== expectedSecret) {
31
      return new Response(
32
        JSON.stringify({ error: "Unauthorized: Invalid passcode" }),
33
        { status: 401, headers: corsHeaders }
34
      );
35
    }
36

37
    if (!url) {
38
      return new Response(
39
        JSON.stringify({ error: "URL is required" }),
40
        { status: 400, headers: corsHeaders }
41
      );
42
    }
43

44
    const targetUrl = new URL(url);
45
    let html = rawHtml;
46

47
    // Fetch remote HTML only if local browser DOM wasn't provided
48
    if (!html) {
49
      const res = await fetch(targetUrl.href, {
50
        headers: {
51
          "User-Agent":
52
            "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
53
        },
54
      });
55

56
      if (!res.ok) {
57
        return new Response(
58
          JSON.stringify({ error: `Failed to fetch page: ${res.statusText}` }),
59
          { status: 400, headers: corsHeaders }
60
        );
61
      }
62

63
      html = await res.text();
64
    }
65

66
    const $ = cheerio.load(html);
67

68
    // Prevent embedded scripts from initiating redirects or navigation away from the archived snapshot
69
    $("head").prepend(`
70
      <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval' *; navigate-to 'self';">
71
    `);
72

73
    const archivedDate = new Date().toISOString().replace("T", " ").substring(0, 16) + " UTC";
74

75
    // Inject sticky header banner
76
    const banner = `
77
      <div style="background:#1a1a1a; color:#ffffff; padding:12px; font-family:sans-serif; text-align:center; font-size:14px; position:sticky; top:0; z-index:999999; border-bottom:2px solid #0066cc;">
78
        Archived Snapshot (${archivedDate}) &bull; <a href="${targetUrl.href}" target="_blank" rel="noopener" style="color:#66b2ff; text-decoration:underline;">View Original Source</a>
79
      </div>
80
    `;
81
    $("body").prepend(banner);
82

83
    // Compress & convert images to inline Base64 WebP
84
    const imgPromises = $("img")
85
      .map(async (_, el) => {
86
        const src = $(el).attr("src");
87
        if (!src || src.startsWith("data:")) return;
88

89
        try {
90
          const absoluteSrc = new URL(src, targetUrl.origin).href;
91
          const imgRes = await fetch(absoluteSrc);
92
          if (imgRes.ok) {
93
            const buffer = await imgRes.arrayBuffer();
94

95
            const compressedBuffer = await sharp(Buffer.from(buffer))
96
              .resize({ width: 1000, withoutEnlargement: true })
97
              .webp({ quality: 70 })
98
              .toBuffer();
99

100
            const base64 = compressedBuffer.toString("base64");
101
            $(el).attr("src", `data:image/webp;base64,${base64}`);
102
          }
103
        } catch (e) {
104
          $(el).attr("src", new URL(src, targetUrl.origin).href);
105
        }
106
      })
107
      .get();
108

109
    await Promise.all(imgPromises);
110

111
    // Inline external stylesheets
112
    const cssPromises = $('link[rel="stylesheet"]')
113
      .map(async (_, el) => {
114
        const href = $(el).attr("href");
115
        if (!href) return;
116

117
        try {
118
          const absoluteHref = new URL(href, targetUrl.origin).href;
119
          const cssRes = await fetch(absoluteHref);
120
          if (cssRes.ok) {
121
            const cssText = await cssRes.text();
122
            const minifiedCss = cssText
123
              .replace(/\/\*[\s\S]*?\*\//g, "")
124
              .replace(/\s+/g, " ")
125
              .replace(/\s*([{}:;,>+~])\s*/g, "$1")
126
              .trim();
127

128
            $(el).replaceWith(`<style>${minifiedCss}</style>`);
129
          } else {
130
            $(el).attr("href", new URL(href, targetUrl.origin).href);
131
          }
132
        } catch (e) {
133
          $(el).attr("href", new URL(href, targetUrl.origin).href);
134
        }
135
      })
136
      .get();
137

138
    await Promise.all(cssPromises);
139

140
    const finalHtml = $.html();
141

142
    const safeDomain = targetUrl.hostname.replace(/[^a-z0-9.-]/gi, "");
143
    const safePath = targetUrl.pathname.replace(/[^a-z0-9]/gi, "-").replace(/-+/g, "-");
144
    const filePath = `public/links/${safeDomain}${safePath}.html`;
145

146
    const octokit = new Octokit({ auth: process.env.GITHUB_TOKEN });
147
    await octokit.repos.createOrUpdateFileContents({
148
      owner: process.env.GITHUB_OWNER!,
149
      repo: process.env.GITHUB_REPO!,
150
      path: filePath,
151
      message: `archival: add snapshot for ${targetUrl.href} [skip ci]`,
152
      content: Buffer.from(finalHtml).toString("base64"),
153
      branch: "main",
154
    });
155

156
    return new Response(
157
      JSON.stringify({
158
        success: true,
159
        path: `/links/${safeDomain}${safePath}.html`,
160
      }),
161
      { status: 200, headers: corsHeaders }
162
    );
163
  } catch (err: any) {
164
    return new Response(
165
      JSON.stringify({ error: err.message }),
166
      { status: 500, headers: corsHeaders }
167
    );
168
  }
169
};
170

171
export const config: Config = {
172
  path: "/api/archive-link",
173
};

1
javascript:(function(){
2
  const ENDPOINT = "https://yourdomain.com/api/archive-link";
3
  const PASSCODE = "YOUR_ARCHIVE_SECRET";
4

5
  try {
6
    const pageUrl = window.location.href;
7
    const pageHtml = document.documentElement.outerHTML;
8

9
    const statusDiv = document.createElement("div");
10
    Object.assign(statusDiv.style, {
11
      position: "fixed",
12
      top: "12px",
13
      right: "12px",
14
      zIndex: "999999999",
15
      background: "#1a1a1a",
16
      color: "#ffffff",
17
      padding: "12px 18px",
18
      borderRadius: "6px",
19
      fontFamily: "sans-serif",
20
      fontSize: "13px",
21
      borderLeft: "4px solid #0066cc",
22
      boxShadow: "0 4px 12px rgba(0,0,0,0.4)"
23
    });
24
    statusDiv.innerText = "Archiving page DOM...";
25
    (document.body || document.documentElement).appendChild(statusDiv);
26

27
    fetch(ENDPOINT, {
28
      method: "POST",
29
      headers: { "Content-Type": "application/json" },
30
      body: JSON.stringify({ url: pageUrl, passcode: PASSCODE, html: pageHtml })
31
    })
32
    .then(async (res) => {
33
      const data = await res.json();
34
      if (!res.ok) throw new Error(data.error || "Failed to save archive");
35
      return data;
36
    })
37
    .then((data) => {
38
      statusDiv.style.borderLeftColor = "#28a745";
39
      statusDiv.innerText = "Archived! Saved to " + data.path;
40
      console.log("Archive success:", data);
41
    })
42
    .catch((err) => {
43
      statusDiv.style.borderLeftColor = "#dc3545";
44
      statusDiv.innerText = "Error: " + err.message;
45
      console.error("Archive error:", err);
46
    })
47
    .finally(() => {
48
      setTimeout(() => { if (statusDiv.parentNode) statusDiv.remove(); }, 5000);
49
    });
50
  } catch(e) {
51
    alert("Bookmarklet failed to execute: " + e.message);
52
  }
53
})();