feat: Add IPNS to scratchpad, improve width

Mauve Signweaver · Mauve Signweaver · commit 03378d563ff5 · 2025-05-14T22:37:27.000-04:00
diff --git a/apps/scratchpad.html b/apps/scratchpad.html
@@ -1,3 +1,4 @@
+
 <!DOCTYPE html>
 <meta lang="en">
 <meta charset="UTF-8">
@@ -25,53 +26,40 @@
 }
 textarea, iframe {
   margin: 0px;
+  display: block;
+  width: 100%;
 }
 iframe {
   resize: vertical;
 }
 </style>
 <header>
 <h1>DWeb Scratchpad</h1>
-  <button
-    title="Save your scratchpad to the dweb"
-    onclick="saveDialog.showModal()"
-  >💾</button>
-  <button
-    title="Load and edit a site from a link"
-    onclick="loadDialog.showModal()"
-  >📂</button>
-  <button
-    title="Look at your saved sites"
-    onclick="window.showAllSaved()"
-  >📃</button>
-  <button
-    title="Help"
-    onclick="helpDialog.showModal()"
-  >❔</button>
+  <button title="Save your scratchpad to the dweb" onclick="saveDialog.showModal()">💾</button>
+  <button title="Load and edit a site from a link" onclick="loadDialog.showModal()">📂</button>
+  <button title="Look at your saved sites" onclick="window.showAllSaved()">📃</button>
+  <button title="Help" onclick="helpDialog.showModal()">❔</button>
 </header>
 <main id="mainContents">
 
 <iframe id="previewFrame"></iframe>
-<textarea autofocus id="htmlContent">
-<marquee>🧑‍💻HTML content here📃</marquee>
+<textarea autofocus="" id="htmlContent">&lt;marquee&gt;🧑‍💻HTML content here📃&lt;/marquee&gt;
 </textarea>
-<textarea id="cssContent">
-/*CSS here*/
+<textarea id="cssContent">/*CSS here*/
 marquee {
   color: var(--ag-theme-primary);
   font-weight: bold;
   font-size: 3em;
 }
 </textarea>
-<textarea id="jsContent">
-// JavaScript here
+<textarea id="jsContent">// JavaScript here
 console.log("Hello World!")
 </textarea>
 
 </main>
 <dialog id="saveDialog">
 <h2>Save to the dweb</h2>
-	<form id="saveForm">
+<form id="saveForm">
   <label>
     Title
     <input id="appTitle" name="title" value="Scratchpad App">
@@ -89,6 +77,7 @@ <h2>Save to the dweb</h2>
     <select name="saveType">
       <option value="hyper">hyper://</option>
       <option value="ipfs">ipfs://</option>
+      <option value="ipns">ipns://</option>
       <option value="download">Download</option>
     </select>
   </label>
@@ -185,17 +174,29 @@ <h2>How does this work?</h2>
   return await response.text()
 }
 
+async function getIPNSURL() {
+  const name = "dweb_scratchpad"
+  const response = await fetch(`ipns://localhost/?key=${name}`, { method: 'POST' });
+  if (!response.ok) {
+    throw new Error(`Failed to generate IPNS key: ${response.statusText}`);
+  }
+  await response.text()
+  return response.headers.get('Location')
+}
+
 async function saveAndPublish(filename, saveType) {
   const content = genPage()
 
-	if(saveType === 'download') {
-	  const url = previewFrame.src
-	  downloadDataUrl(url, filename)
-	  return url
-	} else if(saveType === 'ipfs') {
-	  return saveIPFS(filename, content);
-	} else {
-	  return saveHyper(filename, content);
+  if(saveType === 'download') {
+    const url = previewFrame.src
+    downloadDataUrl(url, filename)
+    return url
+  } else if(saveType === 'ipfs') {
+    return saveIPFS(filename, content);
+  } else if(saveType === 'ipns') {
+    return saveIPNS(filename, content);
+  } else {
+    return saveHyper(filename, content);
   }
 }
 
@@ -210,7 +211,6 @@ <h2>How does this work?</h2>
   }
   await response.text()
   return response.headers.get('Location')
-  return url
 }
 
 async function saveHyper(filename, content) {
@@ -227,6 +227,21 @@ <h2>How does this work?</h2>
   return url
 }
 
+async function saveIPNS(filename, content) {
+  const rootURL = await getIPNSURL()
+  const url = new URL(filename, rootURL).href
+  const response = await fetch(url, {
+    method: 'PUT',
+    body: content
+  })
+  if(!response.ok) {
+    throw new Error(`Failed to upload ${await response.text()}`)
+  }
+  await response.text()
+  return url
+}
+
+
 function updatePreview() {
   if(previewTimeout) clearTimeout(previewTimeout)
   setTimeout(() => {
