HistoryPage:Mockup-home-master

• version 6current 2026-10-12 15:50 UTC · razie via designer-106designer ViewText
• version 5diff 2026-10-12 15:49 UTC · razie via designer-106designer ViewText
  What version 6 changed

  …

  return P}

  // the layout is asked for at once, beside the dashboard's own reads, so it's there when the dashboard is ready

  -const LT=api("GET","/api/v2/topics/"+encodeURIComponent(LAYOUT)).then(r=>typeof r==="string"?r:(r&&r.text)||"",()=>"");

  +const LT=api("GET","/api/v2/topics/"+encodeURIComponent(LAYOUT)+"?v="+Date.now()).then(r=>typeof r==="string"?r:(r&&r.text)||"",()=>"");

  function layout(text){

  const from=text?LAYOUT:"the default layout";text=(text||DEF).replace(/^---\n[\s\S]*?\n---\n/,"");

  …
• version 4diff 2026-10-12 15:48 UTC · razie via designer-106designer ViewText
  What version 5 changed

  …

  stamp().then(v=>STAMP=v);

  const relay=async()=>{if(!done||document.hidden)return;const v=await stamp();if(v===STAMP)return;STAMP=v;

  - const t=await api("GET","/api/v2/topics/"+encodeURIComponent(LAYOUT)).then(r=>typeof r==="string"?r:(r&&r.text)||"",()=>null);if(t===null)return;

  + const t=await api("GET","/api/v2/topics/"+encodeURIComponent(LAYOUT)+"?v="+encodeURIComponent(v)).then(r=>typeof r==="string"?r:(r&&r.text)||"",()=>null);if(t===null)return;

  const y=scrollY;try{layout(t)}catch(e){console.error(e)}scrollTo(0,y)};

  setInterval(relay,3000);document.addEventListener("visibilitychange",relay);

  …
• version 3diff 2026-10-12 15:46 UTC · razie via designer-106designer ViewText
  What version 4 changed

  …

  const head=main.querySelector(".head");main.innerHTML="";if(head)main.append(head);

  const bar=document.createElement("p");bar.className="hmock";bar.innerHTML='<b>MOCK</b> This Home is laid out by the topic <a href="/topics/'+esc(LAYOUT)+'" target="_top">'+esc(LAYOUT)+'</a>'+(from===LAYOUT?"":" (not found here, so the default)")+': edit it to move, drop or add panels and write between them. Unused panels are left out.';

  + const stash=document.createElement("div");stash.id="hstash";stash.hidden=true;Object.values(P).forEach(p=>p&&stash.append(p));

  + main.append(bar,home,stash);setTimeout(()=>window.dispatchEvent(new Event("resize")),50)}

  - main.append(bar,home);setTimeout(()=>window.dispatchEvent(new Event("resize")),50)}

  // no moving: #dmain stays invisible until it is laid out; the observer runs before the browser paints the reveal

  const M=$("dmain");let TXT=null,done=false;M.classList.add("hwait");

  const go=()=>{if(done||M.hidden||TXT===null)return;done=true;try{layout(TXT)}catch(e){console.error(e)}M.classList.remove("hwait")};

  LT.then(t=>{TXT=t;go()});new MutationObserver(go).observe(M,{attributes:true,attributeFilter:["hidden"]});go();

  +// live: when the layout topic changes (its stamp moves), read it again and lay out again, in place, no reload

  +let STAMP=null;const stamp=()=>api("GET","/api/v2/topics/stamps?names="+encodeURIComponent(LAYOUT)).then(r=>(r&&r.stamps&&r.stamps[LAYOUT])||"",()=>STAMP);

  +stamp().then(v=>STAMP=v);

  +const relay=async()=>{if(!done||document.hidden)return;const v=await stamp();if(v===STAMP)return;STAMP=v;

  + const t=await api("GET","/api/v2/topics/"+encodeURIComponent(LAYOUT)).then(r=>typeof r==="string"?r:(r&&r.text)||"",()=>null);if(t===null)return;

  + const y=scrollY;try{layout(t)}catch(e){console.error(e)}scrollTo(0,y)};

  +setInterval(relay,3000);document.addEventListener("visibilitychange",relay);

  })();

  </script>

  …
• version 2diff 2026-10-12 15:45 UTC · razie via designer-106designer ViewText
  What version 3 changed

  …

  .role b{font:700 14px var(--display);text-transform:capitalize}.role small{color:var(--soft);font-size:12px;line-height:1.4}

  /* MOCK: Home laid out by a topic */

  +#dmain.hwait{visibility:hidden}

  .home{display:grid;gap:18px}

  .hrow.hp{display:grid;gap:18px;align-items:start}.hrow.hp.n2{grid-template-columns:repeat(2,minmax(0,1fr))}.hrow.hp.n3{grid-template-columns:repeat(3,minmax(0,1fr))}

  …

  const br=document.querySelector(".brain");if(br){const s=document.createElement("section");s.className="panel";s.innerHTML='<h2>The brain <small>your project\'s classes and features, as a map</small></h2>';s.append(br);P.brain=s}

  return P}

  +// the layout is asked for at once, beside the dashboard's own reads, so it's there when the dashboard is ready

  +const LT=api("GET","/api/v2/topics/"+encodeURIComponent(LAYOUT)).then(r=>typeof r==="string"?r:(r&&r.text)||"",()=>"");

  -async function layout(){let text="";try{const r=await api("GET","/api/v2/topics/"+encodeURIComponent(LAYOUT));text=typeof r==="string"?r:(r&&r.text)||""}catch(e){}

  +function layout(text){

  const from=text?LAYOUT:"the default layout";text=(text||DEF).replace(/^---\n[\s\S]*?\n---\n/,"");

  // the topic's # title is the page's title (the header), not a second heading

  …

  const bar=document.createElement("p");bar.className="hmock";bar.innerHTML='<b>MOCK</b> This Home is laid out by the topic <a href="/topics/'+esc(LAYOUT)+'" target="_top">'+esc(LAYOUT)+'</a>'+(from===LAYOUT?"":" (not found here, so the default)")+': edit it to move, drop or add panels and write between them. Unused panels are left out.';

  main.append(bar,home);setTimeout(()=>window.dispatchEvent(new Event("resize")),50)}

  +// no moving: #dmain stays invisible until it is laid out; the observer runs before the browser paints the reveal

  +const M=$("dmain");let TXT=null,done=false;M.classList.add("hwait");

  +const go=()=>{if(done||M.hidden||TXT===null)return;done=true;try{layout(TXT)}catch(e){console.error(e)}M.classList.remove("hwait")};

  -const wait=()=>{const m=$("dmain");if(m&&!m.hidden)layout();else setTimeout(wait,150)};wait();

  +LT.then(t=>{TXT=t;go()});new MutationObserver(go).observe(M,{attributes:true,attributeFilter:["hidden"]});go();

  })();

  </script>

  …
• version 1diff 2026-10-12 15:44 UTC · razie via designer-106designer ViewText
  What version 2 changed

  …

  async function layout(){let text="";try{const r=await api("GET","/api/v2/topics/"+encodeURIComponent(LAYOUT));text=typeof r==="string"?r:(r&&r.text)||""}catch(e){}

  const from=text?LAYOUT:"the default layout";text=(text||DEF).replace(/^---\n[\s\S]*?\n---\n/,"");

  + // the topic's # title is the page's title (the header), not a second heading

  + const t1=/^\s*#\s+(.+?)\s*$/m.exec(text.split("```")[0]);if(t1){const pn=$("pname");if(pn)pn.textContent=t1[1];text=text.replace(t1[0],"")}

  const P=panels(),main=$("dmain"),home=document.createElement("div");home.className="home";

  const re=/```(\S+)([^\n]*)\n([\s\S]*?)```/g;let last=0,m;const add=(cls,html)=>{const d=document.createElement("div");d.className=cls;if(html!==undefined)d.innerHTML=html;home.append(d);return d};

  …