nostr-web-componentsを魔改造して作るコメントビューア
monoさんのnostr-web-componentsに感謝の気持ちをこめながら破壊して創造します 下のようなHTMLファイルを作って、OBSのブラウザソースに読み込む。300×920で使ってました スタイルは適当に壊しているのでよしなに
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/@konemono/nostr-web-components@latest/dist/nostr-web-components.iife.js"></script>
<title>コメビュ</title>
<style>
/* OBSブラウザソースに転記(しなくてもいはず) */
.theme-light,
.theme-dark {
--bg-color: transparent !important;
}
.compact-note {
border: none !important;
}
.note-avatar {
display: none !important;
}
.note-name {
color: blue !important;
font-size: 1.25em !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
}
.note-name > a {
white-space: nowrap !important;
}
.note-content {
font-size: 1.625em !important;
font-weight: bold !important;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden !important;
}
.note-reply {
display: none !important;
}
html {
overflow: hidden !important;
}
</style>
</head>
<body>
<nostr-stream
filters='[{"kinds":[1],"#t":["捕捉したいタグ"]}]'
relays='["wss://yabu.me/","wss://relay.nostr.band/"]'
noLink="{true}"
display="compact"
limit="{10}"
></nostr-stream>
<script>
document.addEventListener("DOMContentLoaded", () => {
// OBSのブラウザソースCSSはheadのlastChildにいるのでそれを取る（ごり押し）
setTimeout(() => {
const overrideStyle =
document.querySelector("head").lastElementChild.textContent;
const sheet = new CSSStyleSheet();
sheet.replaceSync(overrideStyle);
document.querySelector("nostr-stream").shadowRoot.adoptedStyleSheets =
[sheet];
}, 1000);
});
</script>
</body>
</html>
No comments yet.
