X-Git-Url: https://git.ladys.computer/x_status_git/blobdiff_plain/2659b92ca7ae70783227a5de0c000e34b984e2c2..3b743898578b26b6a835c3e012eccccd6ea665f2:/status.html?ds=inline diff --git a/status.html b/status.html index a56276e..1142555 100644 --- a/status.html +++ b/status.html @@ -4,6 +4,9 @@ <STYLE> body{ Display: Grid; Box-Sizing: Border-Box; Margin: Auto; Padding-Inline: 1REM; Min-Block-Size: 100VH; Inline-Size: 100%; Max-Inline-Size: 45REM; Align-Content: Center; Justify-Content: Stretch; Font-Family: Sans-Serif } article{ Font-Size: Larger } +summary{ Padding-Block: 1REM; Font-Weight: Bold } +details[open]>summary{ Border-Block-End: Thin Solid } +header{ Border-Block-End: Thin Solid; Padding-Block: 1REM; Text-Align: Start } footer{ Border-Block-Start: Thin Solid; Padding-Block: 1REM; Text-Align: End } footer p{ Margin-Block: 0 .5REM } footer time:Not([datetime]), @@ -15,23 +18,35 @@ const parser = new DOMParser fetch(`${new URL(".", location).toString().slice(0, -1)}.jsonld`) .then($ => $.json()) .then(meta => { - const { items } = meta + const { items, subject } = meta const n = items.findIndex($ => new URL($["@id"]).pathname === location.pathname) const status = items[n] const src = status.content const { documentElement: article } = parser.parseFromString(src, "application/xhtml+xml") - const { creator, created } = status + const { creator, created, title } = status document.title = creator ? `Status by ${creator.name} @ ${status.created}` : `Status @ ${created}` + const header = document.createElement("header") const footer = document.createElement("footer") - const authorshipP = footer.appendChild(document.createElement("p")) + const headerChildren = + [ "A(n) " + , subject + ? (subjectLink => { + subjectLink.textContent = subject + subjectLink.href = meta["@id"] + return subjectLink })(document.createElement("a")) + : "status" + , " update" ] if (creator) { - const authorLink = authorshipP.appendChild(document.createElement("a")) - authorLink.href = creator["@id"] + const authorLink = document.createElement("@id" in creator ? "a" : "span") + if (authorLink.localName == "a") authorLink.href = creator["@id"] authorLink.textContent = creator.name - authorshipP.appendChild(document.createTextNode(" @ ")) } - authorshipP.appendChild(document.createElement("time")).textContent = created + headerChildren.push(" by ", authorLink, "…") } + else headerChildren.push("…") + header.append(...headerChildren) + const timestampP = footer.appendChild(document.createElement("p")) + timestampP.appendChild(document.createElement("time")).textContent = created footer .appendChild(document.createElement("p")) .appendChild(document.createElement("small")) @@ -90,5 +105,13 @@ fetch(`${new URL(".", location).toString().slice(0, -1)}.jsonld`) ? "".concat(...nextChars.slice(0, 27), "…") : nextText } nav.appendChild(document.createTextNode(".")) - document.body.replaceChildren(document.importNode(article, true), footer) }) + if (title) { + const wrapper = document.createElement("article") + const details = wrapper.appendChild(document.createElement("details")) + details.setAttribute("open", "") + const summary = details.appendChild(document.createElement("summary")) + summary.textContent = title + details.append(...document.importNode(article, true).childNodes) + document.body.replaceChildren(header, wrapper, footer) } + else document.body.replaceChildren(header, document.importNode(article, true), footer) }) </SCRIPT>