/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useState, useCallback } from "https://esm.sh/react@18.2.0"; import ReactMarkdown from "https://esm.sh/react-markdown@8.0.7?deps=react@18.2.0"; function MarkdownPreview({ content }) { return (

{content}

); } function EditView({ content, setContent, error }) { return (

setContent(e.target.value)}
          rows="20"
        />
      </div>
      <div className="preview-column">
        <MarkdownPreview content={content} />
      </div>
      {error && <p className="error">{error}</p>}
    </div>
  );
}

function ViewDocument({ content, documentId }) {
  return (
    <div className="view-document">
      <MarkdownPreview content={content} />
      <a href={`/edit/${documentId}`} className="fork-link">Fork this document</a>
    </div>
  );
}

function App() {
  const [content, setContent] = useState("");
  const [documentId, setDocumentId] = useState(null);
  const [forkId, setForkId] = useState(null);
  const [error, setError] = useState(null);
  const [mode, setMode] = useState("edit");

useEffect(() => {
    const path = window.location.pathname;
    if (path.startsWith("/view/") || path.startsWith("/edit/")) {
      const id = path.split("/")[2];
      if (id && id !== "undefined") {
        fetchDocument(id);
        setMode(path.startsWith("/view/") ? "view" : "edit");
      } else {
        setError("Invalid document ID");
      }
    }
  }, []);

if (mode === "view") {
    return <ViewDocument content={content} documentId={documentId} />;
  }

return (
    <div className="app-container">
      <header>
        <h1>Anonymous Document Creator</h1>
        <button onClick={handleSubmit} className="publish-button">
          Publish
        </button>
      </header>
      
      <EditView
        content={content}
        setContent={setContent}
        error={error}
      />
      
      <footer>
        <a href={import.meta.url.replace("esm.town", "val.town")} target="_top" className="view-source">
          View & fork code on Val Town
        </a>
      </footer>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}

if (typeof document !== "undefined") {
  client();
}

export default async function server(request: Request): Promise<Response> {
  const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");
  const { v4: uuidv4 } = await import("https://esm.sh/uuid@9.0.0");

const KEY = new URL(import.meta.url).pathname.split("/").at(-1);
  const SCHEMA_VERSION = 1;

await sqlite.execute(`
    CREATE TABLE IF NOT EXISTS ${KEY}_documents_${SCHEMA_VERSION} (
      id TEXT PRIMARY KEY,
      content TEXT NOT NULL,
      fork_id TEXT,
      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
    )
  `);

const url = new URL(request.url);
  const path = url.pathname;

if (path === "/api/document" && request.method === "POST") {
    const { content, forkId } = await request.json();
    const id = uuidv4();
    await sqlite.execute(
      `INSERT INTO ${KEY}_documents_${SCHEMA_VERSION} (id, content, fork_id) VALUES (?, ?, ?)`,
      [id, content, forkId],
    );
    return new Response(JSON.stringify({ id }), {
      headers: { "Content-Type": "application/json" },
    });
  }

if (path.startsWith("/api/document/") && request.method === "GET") {
    const id = path.split("/")[3];
    if (!id || id === "undefined") {
      return new Response("Invalid document ID", { status: 400 });
    }
    const result = await sqlite.execute(
      `SELECT * FROM ${KEY}_documents_${SCHEMA_VERSION} WHERE id = ?`,
      [id],
    );
    if (result.rows.length === 0) {
      return new Response("Document not found", { status: 404 });
    }
    return new Response(JSON.stringify(result.rows[0]), {
      headers: { "Content-Type": "application/json" },
    });
  }

const isViewPage = path.startsWith("/view/");

return new Response(
    `
    <html>
      <head>
        <title>${isViewPage ? "View Document" : "Anonymous Document Creator"}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>${css}</style>
      </head>
      <body${isViewPage ? ' class="view-page"' : ''}>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `,
    {
      headers: {
        "content-type": "text/html",
      },
    },
  );
}

const css = `
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 20px;
  color: #333;
}

.view-page {
  padding: 0;
  margin: 0;
}

.app-container {
  max-width: 1200px;
  margin: 0 auto;
}

header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

h1 {
  margin: 0;
  font-size: 28px;
}

.new-document-button, .publish-button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 5px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.new-document-button {
  background-color: #008CBA;
}

.new-document-button:hover, .publish-button:hover {
  background-color: #45a049;
}

.new-document-button:hover {
  background-color: #007aa3;
}

.edit-view {
  display: flex;
  gap: 20px;
}

.edit-column, .preview-column {
  flex: 1;
  min-width: 0;
}

textarea {
  width: 100%;
  height: 100%;
  min-height: 400px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  resize: vertical;
}

.preview {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  min-height: 400px;
  overflow-y: auto;
  background-color: #f9f9f9;
}

.view-document {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.fork-link {
  display: inline-block;
  margin-top: 20px;
  font-size: 12px;
  color: #666;
  text-decoration: none;
}

.fork-link:hover {
  text-decoration: underline;
}

.error {
  color: #d32f2f;
  margin-top: 10px;
}

footer {
  margin-top: 20px;
  text-align: center;
}

.view-source {
  color: #666;
  font-size: 14px;
  text-decoration: none;
}

.view-source:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .edit-view {
    flex-direction: column;
  }

header {
    flex-direction: column;
    align-items: stretch;
  }

.publish-button {
    width: 100%;
    margin-bottom: 20px;
  }
}
`;</article></body></html>

anon_doc

Versions

v0