silentmode/sirius
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(studio): imported dark pages no longer render on white; language picker in the toolbar

Browse source 
Pages such as potidaea.asm put their background on <html> and leave
<body> transparent; the editor's base stylesheet paints <body> white,
so the imported page showed light text on white. The canvas body now
stays transparent, which also matches the exported page.

The gateway's public name route sends Access-Control-Allow-Origin so
Studio on sirius.x can fetch a page's stylesheets and inline them
instead of falling back to links; the route only serves public content.

The language picker had no toolbar to attach to in Studio and floated
over the blocks panel; pages can now mark a slot for it and Studio does.
This commit is contained in:
Local Dev 2026-09-20 15:56:29 +02:00
parent 7655720e11
commit afca374a07
8 changed files with 16 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
docs/index.html
View file

@ -92,7 +92,7 @@
<script type="importmap">
{ "imports": { "@bitauth/libauth": "https://silentmode.st/js/libauth.js" } }
</script>
<script src="../js/i18n.js?v=20260920c"></script>
<script src="../js/i18n.js?v=20260920d"></script>
</head>
<body>

2
index.html
View file

@ -130,7 +130,7 @@
.verify dd{margin:2px 0 0;font-family:ui-monospace,monospace;font-size:12.5px;word-break:break-all;color:var(--ink)}
footer{border-top:1px solid var(--line);padding:2.4rem 0 3.5rem;color:var(--dim);font-size:13px;text-align:center;margin-top:2.5rem}
</style>
<script src="./js/i18n.js?v=20260920c"></script>
<script src="./js/i18n.js?v=20260920d"></script>
</head>
<body>

5
js/i18n.js
View file

@ -22,7 +22,7 @@
(function () {
var STORE = "sirius-lang";
var CACHE = "sirius-i18n:";
var VERSION = "20260920c"; // bump when dictionaries change
var VERSION = "20260920d"; // bump when dictionaries change
var LANGS = {
en: "English",
de: "Deutsch",
@ -259,6 +259,7 @@
'.lp-opt[aria-selected="true"]{color:var(--acid,#d6ff3d);background:rgba(214,255,61,.08)}' +
".lp-opt .lp-code{margin-left:auto;font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.55}" +
".lang-picker-float{position:fixed;bottom:20px;right:20px;z-index:99}" +
".lang-picker-inline{margin-left:0}" +
"@media (max-width:560px){.lp-name{display:none}}";
document.head.appendChild(css);
@ -306,7 +307,9 @@
});
document.addEventListener("click", closePicker);
var slot = document.querySelector("[data-lang-slot]");
var nav = document.querySelector(".topnav");
if (slot) { slot.replaceWith(picker); picker.classList.add("lang-picker-inline"); } else
if (nav) {
// Right side: directly before the wallet button (profile-wrap once
// profile-menu.js has wrapped the portal link, the bare link before

5
js/studio.js
View file

@ -110,7 +110,10 @@ function injectImportedCss() {
const doc = editor.Canvas.getDocument(); if (!doc) return;
let st = doc.getElementById("sirius-imported");
if (!st) { st = doc.createElement("style"); st.id = "sirius-imported"; }
st.textContent = importedCss.replace(/(^|[,{}\s])body(?=[\s,{.:\[#>])/g, "$1html body");
// The editor's base sheet paints <body> white, which hides a page whose
// background lives on <html> (common in app bundles). Body stays
// transparent in the canvas; the export never had that rule anyway.
st.textContent = "html body{background-color:transparent}\n" + importedCss.replace(/(^|[,{}\s])body(?=[\s,{.:\[#>])/g, "$1html body");
doc.head.appendChild(st);
for (const [k, v] of Object.entries(importedHtmlAttrs)) doc.documentElement.setAttribute(k, v);
for (const href of extraHeadLinks) if (!doc.head.querySelector(`link[href="${href}"]`)) { const l = doc.createElement("link"); l.rel = "stylesheet"; l.href = href; doc.head.appendChild(l); }

2
market.html
View file

@ -74,7 +74,7 @@
footer{border-top:1px solid var(--line);padding:2rem 0 3rem;color:var(--dim);font-size:13px;text-align:center;margin-top:2.5rem}
@media (max-width:560px){.row{grid-template-columns:1fr auto}.row .price{grid-column:1/-1;text-align:left}}
</style>
<script src="./js/i18n.js?v=20260920c"></script>
<script src="./js/i18n.js?v=20260920d"></script>
</head>
<body>
<nav class="topnav">

2
portal.html
View file

@ -259,7 +259,7 @@
.addrow{grid-template-columns:1fr 1fr}
}
</style>
<script src="./js/i18n.js?v=20260920c"></script>
<script src="./js/i18n.js?v=20260920d"></script>
</head>
<body>

5
studio.html
View file

@ -131,7 +131,7 @@
.muted{color:var(--mut);font-size:13px}
code{font-family:var(--mono);background:#0e131b;border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:12px}
</style>
<script src="./js/i18n.js?v=20260920c"></script>
<script src="./js/i18n.js?v=20260920d"></script>
</head>
<body>
<div class="bar">
@ -152,6 +152,7 @@
<button class="btn ghost small" id="btn-draft" disabled>Save draft</button>
<button class="btn acid small" id="btn-publish" disabled>Publish to Sia →</button>
<a class="btn ghost small" id="btn-view" href="#" target="_blank" rel="noopener" hidden>View site →</a>
<span data-lang-slot></span>
</div>
<div class="notice" id="notice" hidden><span id="notice-text"></span> <button class="btn ghost small" id="notice-import">Import the live site</button> <button class="x" id="notice-close" title="dismiss">×</button></div>
<div id="editor"><div id="gjs"></div>
@ -242,6 +243,6 @@
<script src="./vendor/grapesjs/countdown.js?v=1.0.2"></script>
<script src="./vendor/grapesjs/style-bg.js?v=2.0.2"></script>
<script src="./vendor/grapesjs/touch.js?v=0.1.1"></script>
<script type="module" src="./js/studio.js?v=20260920ai"></script>
<script type="module" src="./js/studio.js?v=20260920ai2"></script>
</body>
</html>

2
tld.html
View file

@ -115,7 +115,7 @@
<script type="importmap">
{ "imports": { "@bitauth/libauth": "https://silentmode.st/js/libauth.js" } }
</script>
<script src="./js/i18n.js?v=20260920c"></script>
<script src="./js/i18n.js?v=20260920d"></script>
</head>
<body>