- /
- `, ``, inline `
` +- **Math (LaTeX via KaTeX):** inline `$…$` or `\(…\)`; display `$$…$$` or `\[…\]`. + Typesetting runs after render and **skips `pre` and `code`**, so literal `$` + in diagrams/snippets is safe. +- **ASCII diagrams:** a `` block. Monospace, whitespace preserved, + `tab-size: 2`, line-height tuned so box-drawing characters connect. + +**`svg`** is either: +- an inline SVG string (`` or ``. + +Detection is by leading token (`
++ \`; + }).join(""); + + container.querySelectorAll("textarea").forEach(t => { + t.addEventListener("input", e => { + pages[+e.target.dataset.index].markdown = e.target.value; + }); + }); + container.querySelectorAll('[data-action="remove"]').forEach(b => { + b.addEventListener("click", e => { + pages.splice(+e.target.dataset.index, 1); + render(); + }); + }); + container.querySelectorAll('input[type="file"]').forEach(f => { + f.addEventListener("change", async e => { + const files = Array.from(e.target.files); + if (!files.length) return; + await uploadFiles(files, +e.target.dataset.index); + }); + }); + + container.querySelectorAll(".page-card.filled").forEach(card => { + card.addEventListener("dragstart", e => { + draggedIndex = +card.dataset.index; + card.classList.add("dragging"); + }); + card.addEventListener("dragend", () => { + card.classList.remove("dragging"); + draggedIndex = null; + }); + card.addEventListener("dragover", e => e.preventDefault()); + card.addEventListener("drop", e => { + e.preventDefault(); + const targetIndex = +card.dataset.index; + if (draggedIndex === null || draggedIndex === targetIndex) return; + const [moved] = pages.splice(draggedIndex, 1); + pages.splice(targetIndex, 0, moved); + render(); + }); + }); + + container.querySelectorAll(".page-card.empty").forEach(zone => { + zone.addEventListener("dragover", e => { + e.preventDefault(); + zone.classList.add("dragover"); + }); + zone.addEventListener("dragleave", () => zone.classList.remove("dragover")); + zone.addEventListener("drop", async e => { + e.preventDefault(); + zone.classList.remove("dragover"); + const files = Array.from(e.dataTransfer.files).filter(f => f.type.startsWith("image/") || f.name.endsWith(".svg")); + if (!files.length) return; + await uploadFiles(files, +zone.dataset.index); + }); + }); +} + +window.addEventListener("paste", async e => { + const items = e.clipboardData?.items; + if (!items) return; + const files = []; + for (const item of items) { + if (item.type.startsWith("image/")) { + const file = item.getAsFile(); + if (file) files.push(file); + } + } + if (files.length) { + const emptyIndex = pages.findIndex(p => !p.image_key); + await uploadFiles(files, emptyIndex === -1 ? pages.length : emptyIndex); + } +}); + +document.getElementById("copyPrompt").addEventListener("click", async () => { + const btn = document.getElementById("copyPrompt"); + if (btn.dataset.busy) return; + btn.dataset.busy = "1"; + const text = document.getElementById("promptText").textContent; + try { + await navigator.clipboard.writeText(text); + btn.innerHTML = ' Copied'; + setTimeout(() => { + btn.innerHTML = ' Copy prompt'; + delete btn.dataset.busy; + }, 1500); + } catch { toast("Copy failed"); delete btn.dataset.busy; } +}); + +document.getElementById("save").addEventListener("click", async () => { + const title = document.getElementById("title").value; + const date = document.getElementById("date").value; + + const filledPages = pages.filter(p => p.image_key || p.markdown.trim()); + + if (!title || !date || filledPages.length === 0) { + toast("Fill in title, date, and add at least one page"); + return; + } + + const method = DOC ? "PUT" : "POST"; + const url = DOC ? "/api/docs/" + DOC.id : "/api/docs"; + + const res = await fetch(url, { + method, + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ title, date, pages: filledPages }), + }); + const data = await res.json(); + if (data.success) { + toast("Saved!"); + setTimeout(() => location.href = data.url, 800); + } else { + toast("Save failed"); + } +}); + +if (pages.length === 0) pages.push({ markdown: "", image_key: "" }); +render(); +`; +} + +export function editorHtml(publicUrl: string, doc?: DocumentData): string { + const docJson = doc ? JSON.stringify(doc) : "null"; + const viewLink = doc + ? `View` + : ""; + + return ` + + + + ++ Page \${i + 1} +++ ⠿ + +++ +++++ +
${doc ? "Edit" : "New"} — Sharepoint + + + + + + ++ + + Sharepoint + + ++ + ${viewLink} + ++++ + + + + +`; +} diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..43cc864 --- /dev/null +++ b/src/index.ts @@ -0,0 +1,242 @@ +import { editorHtml } from "./editor"; +import { nanoid } from "nanoid"; +import { CSS } from "./styles"; +import { renderDocument, type DocumentData, type PageData } from "./render"; + +export interface Env { + DB: D1Database; + SCANS: R2Bucket; + PUBLIC_URL: string; +} + +const KATEX_CSS = "https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css"; +const FONTS_URL = + "https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"; + +function htmlShell(title: string, brand: string, content: string): string { + return ` + + + + +${doc ? "Edit Document" : "New Document"}
+ + + +Pages
+ +${escapeHtml(title)} + + + + + + + ++ + + ${escapeHtml(brand)} + + ++ ++${content} + + + +`; +} + +function escapeHtml(s: string): string { + return s + .replace(/&/g, "&") + .replace(//g, ">") + .replace(/"/g, """); +} + +async function getDocument(db: D1Database, id: string): Promise{ + const doc = await db + .prepare("SELECT id, title, date FROM documents WHERE id = ?") + .bind(id) + .first<{ id: string; title: string; date: string }>(); + + if (!doc) return null; + + const { results: pages } = await db + .prepare("SELECT position, markdown, image_key FROM pages WHERE document_id = ? ORDER BY position") + .bind(id) + .all (); + + return { ...doc, brand: "Sharepoint", pages: pages || [] }; +} + +async function handleUpload(request: Request, env: Env): Promise { + const formData = await request.formData(); + const file = formData.get("file") as File | null; + + if (!file) { + return Response.json({ success: false, error: "No file provided" }, { status: 400 }); + } + + const key = `${nanoid()}.svg`; + const buffer = await file.arrayBuffer(); + + await env.SCANS.put(key, buffer, { + httpMetadata: { contentType: file.type || "image/svg+xml" }, + }); + + return Response.json({ success: true, key, url: `${env.PUBLIC_URL}/i/${key}` }); +} + +export default { + async fetch(request: Request, env: Env): Promise { + const url = new URL(request.url); + const path = url.pathname; + + // Upload scan image + if (path === "/upload" && request.method === "POST") { + return handleUpload(request, env); + } + + // Serve scan images from R2 + if (path.startsWith("/i/")) { + const key = path.slice(3); + const object = await env.SCANS.get(key); + if (!object) return new Response("Not found", { status: 404 }); + + const headers = new Headers(); + object.writeHttpMetadata(headers); + headers.set("etag", object.httpEtag); + headers.set("cache-control", "public, max-age=31536000, immutable"); + + return new Response(object.body, { headers }); + } + + // Reader view + if (path.startsWith("/d/")) { + const id = path.slice(3); + const doc = await getDocument(env.DB, id); + if (!doc) return new Response("Document not found", { status: 404 }); + + const content = renderDocument(doc); + return new Response(htmlShell(doc.title, doc.brand, content), { + headers: { "Content-Type": "text/html;charset=utf-8" }, + }); + } + + // Editor UI (new document) + if (path === "/new" || path === "/") { + return new Response(editorHtml(env.PUBLIC_URL), { + headers: { "Content-Type": "text/html;charset=utf-8" }, + }); + } + + // Editor UI (existing document) + if (path.startsWith("/edit/")) { + const id = path.slice(6); + const doc = await getDocument(env.DB, id); + if (!doc) return new Response("Document not found", { status: 404 }); + return new Response(editorHtml(env.PUBLIC_URL, doc), { + headers: { "Content-Type": "text/html;charset=utf-8" }, + }); + } + + // API: save document + if (path === "/api/docs" && request.method === "POST") { + const body = (await request.json()) as { + title: string; + date: string; + pages: { markdown: string; image_key: string }[]; + }; + + const id = nanoid(); + const now = Math.floor(Date.now() / 1000); + + await env.DB.prepare( + "INSERT INTO documents (id, title, date, created_at, updated_at) VALUES (?, ?, ?, ?, ?)" + ) + .bind(id, body.title, body.date, now, now) + .run(); + + for (let i = 0; i < body.pages.length; i++) { + const page = body.pages[i]!; + await env.DB.prepare( + "INSERT INTO pages (id, document_id, position, markdown, image_key, created_at) VALUES (?, ?, ?, ?, ?, ?)" + ) + .bind(nanoid(), id, i, page.markdown, page.image_key, now) + .run(); + } + + return Response.json({ success: true, id, url: `${env.PUBLIC_URL}/d/${id}` }); + } + + // API: update document + if (path.startsWith("/api/docs/") && request.method === "PUT") { + const id = path.slice(10); + const body = (await request.json()) as { + title: string; + date: string; + pages: { markdown: string; image_key: string }[]; + }; + + const now = Math.floor(Date.now() / 1000); + + await env.DB.prepare( + "UPDATE documents SET title = ?, date = ?, updated_at = ? WHERE id = ?" + ) + .bind(body.title, body.date, now, id) + .run(); + + await env.DB.prepare("DELETE FROM pages WHERE document_id = ?").bind(id).run(); + + for (let i = 0; i < body.pages.length; i++) { + const page = body.pages[i]!; + await env.DB.prepare( + "INSERT INTO pages (id, document_id, position, markdown, image_key, created_at) VALUES (?, ?, ?, ?, ?, ?)" + ) + .bind(nanoid(), id, i, page.markdown, page.image_key, now) + .run(); + } + + return Response.json({ success: true, id, url: `${env.PUBLIC_URL}/d/${id}` }); + } + + return new Response("Not found", { status: 404 }); + }, +}; + + diff --git a/src/render.ts b/src/render.ts new file mode 100644 index 0000000..b565315 --- /dev/null +++ b/src/render.ts @@ -0,0 +1,87 @@ +import { marked } from "marked"; +import katex from "katex"; + +marked.use({ + breaks: true, + gfm: true, +}); + +function renderMath(html: string): string { + // Display math: $$...$$ + html = html.replace(/\$\$([\s\S]+?)\$\$/g, (_, tex) => { + try { + return katex.renderToString(tex.trim(), { displayMode: true, throwOnError: false }); + } catch { + return ` ${tex}`; + } + }); + + // Inline math: $...$ (but not inside code blocks or pre) + html = html.replace(/(?]*>)\$([^$\n]+?)\$(?![^<]*<\/code>)/g, (_, tex) => { + try { + return katex.renderToString(tex.trim(), { displayMode: false, throwOnError: false }); + } catch { + return `${tex}`; + } + }); + + return html; +} + +export function renderMarkdown(md: string): string { + const html = marked.parse(md) as string; + return renderMath(html); +} + +export interface PageData { + position: number; + markdown: string; + image_key: string; +} + +export interface DocumentData { + id: string; + title: string; + date: string; + brand: string; + pages: PageData[]; +} + +export function renderDocument(doc: DocumentData): string { + const pages = doc.pages.map((page, i) => { + const header = i === 0 + ? `${escapeHtml(doc.date)}
+${escapeHtml(doc.title)}
` + : ""; + + const content = renderMarkdown(page.markdown); + const imageUrl = `/i/${page.image_key}`; + + return ` ++ `; + }).join(""); + + return pages; +} + +function escapeHtml(s: string): string { + return s + .replace(/&/g, "&") + .replace(//g, ">") + .replace(/"/g, """); +} diff --git a/src/styles.ts b/src/styles.ts new file mode 100644 index 0000000..87ff124 --- /dev/null +++ b/src/styles.ts @@ -0,0 +1,229 @@ +export const CSS = ` + :root{ + --paper:#F3EFE6; + --paper-2:#FBF9F3; + --ink:#1C1B19; + --ink-soft:#37342F; + --muted:#77726A; + --rule:#D9D2C5; + --rule-soft:#E7E1D5; + --dot:#DBD5C8; + --blue:#2C6DF5; + --radius:8px; + --measure:58ch; + } + + *{ box-sizing:border-box; } + html{ -webkit-text-size-adjust:100%; } + + body{ + margin:0; + background:var(--paper); + color:var(--ink-soft); + font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif; + font-size:17px; + line-height:1.62; + -webkit-font-smoothing:antialiased; + text-rendering:optimizeLegibility; + } + + .topbar{ + position:sticky; + top:0; + z-index:10; + display:flex; + align-items:center; + justify-content:space-between; + gap:16px; + padding:14px 28px; + background:color-mix(in srgb, var(--paper) 88%, transparent); + backdrop-filter:saturate(120%) blur(8px); + border-bottom:1px solid var(--rule-soft); + } + .brand{ + display:inline-flex; + align-items:center; + gap:9px; + font-family:"Newsreader", Georgia, serif; + font-weight:600; + font-size:1.2rem; + color:var(--ink); + letter-spacing:-0.01em; + text-decoration:none; + } + .brand svg{ display:block; } + .actions{ display:flex; align-items:center; gap:6px; } + + .btn{ + font:inherit; + font-size:.92rem; + font-weight:500; + border:0; + cursor:pointer; + border-radius:8px; + padding:9px 16px; + display:inline-flex; + align-items:center; + gap:8px; + color:#fff; + background:var(--blue); + transition:filter .15s ease, transform .1s ease, background .2s ease; + } + .btn:hover{ filter:brightness(1.06); } + .btn:active{ transform:scale(.97); } + .btn.copied{ + background:var(--blue); + pointer-events:none; + } + .btn svg{ + display:block; + transition:transform .2s ease; + } + .btn.copied svg{ + transform:scale(1.15); + } + + .icon-btn{ + width:38px; height:38px; + display:inline-flex; align-items:center; justify-content:center; + border:0; border-radius:8px; + background:transparent; color:var(--muted); + cursor:pointer; + transition:background .15s ease, color .15s ease; + } + .icon-btn:hover{ background:rgba(0,0,0,.05); color:var(--ink); } + + :focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:6px; } + + .reader{ + max-width:1240px; + margin:0 auto; + padding:46px 40px 120px; + } + + .spread{ + display:grid; + grid-template-columns:minmax(0,1.06fr) minmax(0,0.94fr); + gap:56px; + align-items:start; + padding-block:40px; + } + .spread + .spread{ border-top:1px solid var(--rule-soft); } + .spread:first-child{ padding-top:8px; } + + .prose{ max-width:var(--measure); } + .eyebrow{ + font-size:.9rem; + color:var(--muted); + letter-spacing:.01em; + margin:0 0 18px; + } + .title{ + font-family:"Newsreader", Georgia, serif; + font-weight:500; + font-size:clamp(2.3rem, 4.2vw, 3.35rem); + line-height:1.06; + letter-spacing:-0.012em; + color:var(--ink); + margin:0 0 30px; + padding-left:20px; + border-left:3px solid var(--ink); + } + .prose p{ margin:0 0 1.15em; } + .prose h2{ + font-family:"Inter", sans-serif; + font-weight:500; + font-size:1rem; + color:var(--ink); + margin:1.9em 0 .7em; + } + .prose ul{ margin:.4em 0 1.2em; padding-left:1.35em; } + .prose li{ margin:.42em 0; } + .prose li::marker{ color:var(--ink); } + .prose a{ color:var(--blue); } + + .scan{ position:sticky; top:92px; } + .scan__meta{ + display:flex; align-items:center; justify-content:space-between; + margin:0 2px 10px; + } + .scan__page{ font-size:.82rem; color:var(--muted); letter-spacing:.02em; } + + .scan__canvas{ + position:relative; + background-color:var(--paper-2); + background-size:21px 21px; + background-position:14px 14px; + border:1px solid var(--rule); + border-radius:6px; + box-shadow:0 1px 1px rgba(30,25,15,.03), 0 10px 26px -22px rgba(40,32,15,.22); + overflow:hidden; + } + .scan__canvas svg, + .scan__canvas img{ width:100%; height:auto; display:block; } + + .scan__dl{ + position:absolute; top:10px; right:10px; + width:32px; height:32px; + border:1px solid var(--rule-soft); + background:color-mix(in srgb, var(--paper-2) 82%, transparent); + color:var(--muted); + box-shadow:0 1px 2px rgba(30,25,15,.06); + opacity:0; transform:translateY(-3px); + transition:opacity .16s ease, transform .16s ease, background .15s ease, color .15s ease; + } + .scan__canvas:hover .scan__dl, + .scan__dl:focus-visible{ opacity:1; transform:none; } + .scan__dl:hover{ background:#fff; color:var(--ink); } + @media (hover:none){ .scan__dl{ opacity:1; transform:none; } } + + .prose pre{ + font-family:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; + font-size:.8rem; + line-height:1.32; + white-space:pre; + overflow-x:auto; + tab-size:2; + color:var(--ink); + background:var(--paper-2); + border:1px solid var(--rule-soft); + border-radius:6px; + padding:16px 18px; + margin:1.35em 0; + } + .prose :not(pre) > code{ + font-family:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; + font-size:.86em; + background:color-mix(in srgb, var(--ink) 6%, transparent); + padding:.12em .4em; + border-radius:4px; + } + .prose pre code{ background:none; padding:0; font:inherit; } + + .prose .katex{ font-size:1.04em; } + .prose .katex-display{ + margin:1.2em 0; + padding:.15em 2px; + overflow-x:auto; + overflow-y:hidden; + } + + .toast{ + position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(12px); + background:var(--ink); color:#fff; + font-size:.88rem; padding:9px 16px; border-radius:8px; + opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; + } + .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } + + @media (max-width:880px){ + .reader{ padding:28px 20px 90px; } + .spread{ grid-template-columns:1fr; gap:26px; } + .scan{ position:static; } + .title{ margin-bottom:24px; } + } + + @media (prefers-reduced-motion:reduce){ + *{ transition:none !important; } + } +`; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..74e0b25 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,31 @@ +{ + "compilerOptions": { + // Environment setup & latest features + "lib": ["ESNext", "DOM", "DOM.Iterable"], + "target": "ESNext", + "module": "Preserve", + "moduleDetection": "force", + "allowJs": true, + "types": ["@cloudflare/workers-types"], + "jsx": "react-jsx", + "jsxImportSource": "hono/jsx", + + // Bundler mode + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "noEmit": true, + + // Best practices + "strict": true, + "skipLibCheck": true, + "noFallthroughCasesInSwitch": true, + "noUncheckedIndexedAccess": true, + "noImplicitOverride": true, + + // Some stricter flags (disabled by default) + "noUnusedLocals": false, + "noUnusedParameters": false, + "noPropertyAccessFromIndexSignature": false + } +} diff --git a/wrangler.toml b/wrangler.toml new file mode 100644 index 0000000..bd0c36a --- /dev/null +++ b/wrangler.toml @@ -0,0 +1,16 @@ +name = "sharepoint" +main = "src/index.ts" +compatibility_date = "2025-01-01" +account_id = "fdbe5b542ede643d34962c1f07a34565" + +[[d1_databases]] +binding = "DB" +database_name = "sharepoint" +database_id = "e51135c2-e507-4030-8d66-a44103e75ce3" + +[[r2_buckets]] +binding = "SCANS" +bucket_name = "sharepoint-scans" + +[vars] +PUBLIC_URL = "http://localhost:8787"+ ${header} + ${content} ++ +