more fixes

app/main.py

@@ -135,6 +135,7 @@ async def sample_view(sample_id: str, request: Request):
             "request": request,
             "id":sample["id"],
             "title":sample["title"],
+            "author": sample["author"],
             "metapost": sample["metapost"],
             "created": sample["created"],
             "updated": sample["updated"],
@@ -177,9 +178,9 @@ async def sample_view(sample_id: str, request: Request):
 
 
 
-@app.get("/u/{userid}", response_class=HTMLResponse)
-async def user_view(userid: str, request: Request):
-    url = f"https://santhosh.pockethost.io/api/collections/metaposts/records?filter=(author='{userid}')"
+@app.get("/u/{username}", response_class=HTMLResponse)
+async def user_view(username: str, request: Request):
+    url = f"https://santhosh.pockethost.io/api/collections/metaposts/records?filter=(author.username='{username}')"
     headers = {
         "Content-Type": "application/json",
     }

static/common.css

@@ -68,7 +68,7 @@ h1 {
 }
 
 svg {
-  height: 100%;
+  width: 100%;
 }
 
 .nav-item {

static/embed.css

@@ -9,17 +9,18 @@ body {
   /* grid container settings */
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: auto 1fr auto;
+  grid-template-rows: auto 1fr;
   grid-template-areas:
-    "header"
-    "main";
+    "main"
+    "header";
 }
 
 main {
   grid-area: main;
   display: grid;
   grid-template-columns: 1fr;
   overflow: hidden;
+  height: 94vh;
   grid-template-areas: "container";
 }
 
@@ -44,16 +45,20 @@ textarea {
 
 header {
     grid-area: header;
-    padding: 1em;
+    padding: 0;
     background-color: var(--header-color);
-    border-bottom: 1px solid var(--border-color);
+    border-top: 1px solid var(--border-color);
     color: var(--text-color);
     padding-bottom: 0;
     display: grid;
     grid-template-columns: 4fr 1fr;
     grid-template-areas: "title edit";
     align-content: end;
     align-items: center;
+    height: 5vh;
+    h1 {
+        font-size: 1em;
+    }
   }
 
   .b-edit{

static/embed.js

@@ -7,7 +7,7 @@ document.addEventListener("DOMContentLoaded", async (event) => {
                 lineNumbers: true,
                 mode: "metapost",
                 theme: "nord",
-
+                readOnly: true,
             });
     }
 

static/main.js

@@ -2,7 +2,7 @@
 import PocketBase from './pocketbase.es.js'
 
 var editor;
-var editor, slug, loginBtn, saveBtn, compileBtn, sampleid;
+var editor, authorid, loginBtn, saveBtn, compileBtn, sampleid;
 var pockethost_client;
 var authData;
 
@@ -11,7 +11,7 @@ function onLogin() {
         return
     }
     const link = document.createElement('a');
-    link.href = `/u/${authData.record.id}`
+    link.href = `/u/${authData.record.username}`
     link.title = authData.record.username
     const avatarImg = document.createElement('img');
     avatarImg.src = `https://github.com/${authData.record.username}.png?size=24`
@@ -33,17 +33,6 @@ async function doGithubLogin() {
     }
 }
 
-async function queryCollection() {
-    try {
-        const collection = pockethost_client.collection('metaposts');
-        const records = await collection.getList();
-        console.dir(records);
-    } catch (error) {
-        console.error('Query failed:', error);
-    }
-}
-
-
 function changeurl(url, title) {
     var new_url = '/m/' + url;
     window.history.pushState('data', title, new_url);
@@ -64,15 +53,17 @@ async function doSave() {
             "metapost": editor.getValue()
         };
 
-        if (sampleid) {
+        if (sampleid && authorid && authorid===authData.record.id) {
             record = await pockethost_client.collection('metaposts').update(sampleid, data);
+            document.getElementById('log').innerHTML = `Updated the code ${sampleid}`
         } else {
             record = await pockethost_client.collection('metaposts').create(data);
             document.getElementById('title').value = result.title
             sampleid = record.id
             changeurl(sampleid, title)
+            document.getElementById('log').innerHTML = `Saved the code: ${sampleid}`
         }
-        document.getElementById('log').innerHTML = `Saved the code`
+
     } catch (error) {
         console.error('Save failed:', error);
         document.getElementById('log').innerText = `Save failed ${error}`
@@ -130,6 +121,7 @@ document.addEventListener("DOMContentLoaded", async (event) => {
             });
         editor.on("change", doCompile);
         sampleid = document.getElementById('sampleid').value;
+        authorid = document.getElementById('authorid').value;
         if (sampleid) {
             doCompile();
         }

templates/embed.html

@@ -1,5 +1,6 @@
 <!doctype html>
 <html lang="en" dir="ltr">
+
     <head>
         <title>Metapost Sandbox - {{title}}</title>
         <meta charset="utf-8">
@@ -21,12 +22,6 @@
     </head>
 
     <body>
-        <header>
-            <a href="/">
-                <h1 class="title">Metapost Sandbox - {{title}}</h1>
-            </a>
-            <button id="b-edit" class="nav-item" title="Edit"><a href="/m/{{id}}">Edit</a></button>
-        </header>
         <main>
             <section class="container">
                 <textarea id="metapost" readonly>
@@ -35,5 +30,11 @@ <h1 class="title">Metapost Sandbox - {{title}}</h1>
                 <div id="result" disabled> {{svg|safe}}</div>
             </section>
         </main>
+        <header>
+            <a href="/m/{{id}}">
+                <h1 class="title"> Metapost Sandbox - {{title}}</h1>
+            </a>
+        </header>
     </body>
+
 </html>

templates/index.html

@@ -69,6 +69,7 @@ <h3>Embed</h3>
                 {% endif %}
             </div>
             <input type="hidden" id="sampleid" name="sampleid" value="{{id}}">
+            <input type="hidden" id="authorid" name="authorid" value="{{author}}">
             <section class="container">
                 <textarea id="metapost" oninput="doCompile()">
                     {{metapost}}