Skip to content

Commit

Permalink
Collapse long strings in HTML (ordinals#4053)
Browse files Browse the repository at this point in the history
  • Loading branch information
casey authored Nov 7, 2024
1 parent 95a9f60 commit b5c7f88
Show file tree
Hide file tree
Showing 21 changed files with 144 additions and 62 deletions.
4 changes: 2 additions & 2 deletions src/subcommand/server.rs
Original file line number Diff line number Diff line change
Expand Up @@ -3689,7 +3689,7 @@ mod tests {
<dd>.*</dd>
<dt>git commit</dt>
<dd>
<a href=https://github.com/ordinals/ord/commit/[[:xdigit:]]{40}>
<a class=monospace href=https://github.com/ordinals/ord/commit/[[:xdigit:]]{40}>
[[:xdigit:]]{40}
</a>
</dd>
Expand Down Expand Up @@ -4057,7 +4057,7 @@ mod tests {
test_server.assert_response_regex(
"/blocks",
StatusCode::OK,
".*<ol start=96 reversed class=block-list>\n( <li><a href=/block/[[:xdigit:]]{64}>[[:xdigit:]]{64}</a></li>\n){95}</ol>.*"
".*<ol start=96 reversed class=block-list>\n( <li><a class=monospace href=/block/[[:xdigit:]]{64}>[[:xdigit:]]{64}</a></li>\n){95}</ol>.*"
);
}

Expand Down
2 changes: 1 addition & 1 deletion src/templates.rs
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ mod tests {
<link rel=icon href=/static/favicon.svg>
<link rel=stylesheet href=/static/index.css>
<link rel=stylesheet href=/static/modern-normalize.css>
<script src=/static/index.js defer></script>
<script src=/static/index.js></script>
</head>
<body>
<header>
Expand Down
4 changes: 2 additions & 2 deletions src/templates/block.rs
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,8 @@ mod tests {
<div class=thumbnails>
</div>
<h2>1 Transaction</h2>
<ul class=monospace>
<li><a href=/tx/[[:xdigit:]]{64}>[[:xdigit:]]{64}</a></li>
<ul>
<li><a class=monospace href=/tx/[[:xdigit:]]{64}>[[:xdigit:]]{64}</a></li>
</ul>
"
.unindent()
Expand Down
4 changes: 2 additions & 2 deletions src/templates/blocks.rs
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,8 @@ mod tests {
</div>
</div>
<ol start=1260001 reversed class=block-list>
<li><a href=/block/1{64}>1{64}</a></li>
<li><a href=/block/0{64}>0{64}</a></li>
<li><a class=monospace href=/block/1{64}>1{64}</a></li>
<li><a class=monospace href=/block/0{64}>0{64}</a></li>
</ol>
"
.unindent(),
Expand Down
10 changes: 5 additions & 5 deletions src/templates/inscription.rs
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ mod tests {
<dt>offset</dt>
<dd>0</dd>
<dt>ethereum teleburn address</dt>
<dd>0xa1DfBd1C519B9323FD7Fd8e498Ac16c2E502F059</dd>
<dd class=monospace>0xa1DfBd1C519B9323FD7Fd8e498Ac16c2E502F059</dd>
</dl>
"
.unindent()
Expand Down Expand Up @@ -104,7 +104,7 @@ mod tests {
<dl>
.*
<dt>address</dt>
<dd class=monospace><a href=/address/bc1qw508d6qejxtdg4y5r3zarvary0c5xw7kv8f3t4>bc1qw508d6qejxtdg4y5r3zarvary0c5xw7kv8f3t4</a></dd>
<dd><a class=monospace href=/address/bc1qw508d6qejxtdg4y5r3zarvary0c5xw7kv8f3t4>bc1qw508d6qejxtdg4y5r3zarvary0c5xw7kv8f3t4</a></dd>
<dt>value</dt>
<dd>1</dd>
.*
Expand Down Expand Up @@ -258,7 +258,7 @@ mod tests {
<dt>offset</dt>
<dd>0</dd>
<dt>ethereum teleburn address</dt>
<dd>0xa1DfBd1C519B9323FD7Fd8e498Ac16c2E502F059</dd>
<dd class=monospace>0xa1DfBd1C519B9323FD7Fd8e498Ac16c2E502F059</dd>
</dl>
"
.unindent()
Expand Down Expand Up @@ -321,7 +321,7 @@ mod tests {
<dt>offset</dt>
<dd>0</dd>
<dt>ethereum teleburn address</dt>
<dd>0xa1DfBd1C519B9323FD7Fd8e498Ac16c2E502F059</dd>
<dd class=monospace>0xa1DfBd1C519B9323FD7Fd8e498Ac16c2E502F059</dd>
</dl>
"
.unindent()
Expand Down Expand Up @@ -383,7 +383,7 @@ mod tests {
<dt>offset</dt>
<dd>0</dd>
<dt>ethereum teleburn address</dt>
<dd>0xa1DfBd1C519B9323FD7Fd8e498Ac16c2E502F059</dd>
<dd class=monospace>0xa1DfBd1C519B9323FD7Fd8e498Ac16c2E502F059</dd>
</dl>
"
.unindent()
Expand Down
6 changes: 3 additions & 3 deletions src/templates/output.rs
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ mod tests {
<dl>
<dt>value</dt><dd>3</dd>
<dt>script pubkey</dt><dd class=monospace>OP_DUP OP_HASH160 OP_PUSHBYTES_20 0{40} OP_EQUALVERIFY OP_CHECKSIG</dd>
<dt>address</dt><dd class=monospace><a href=/address/1111111111111111111114oLvT2>1111111111111111111114oLvT2</a></dd>
<dt>address</dt><dd><a class=monospace href=/address/1111111111111111111114oLvT2>1111111111111111111114oLvT2</a></dd>
<dt>transaction</dt><dd><a class=monospace href=/tx/1{64}>1{64}</a></dd>
<dt>spent</dt><dd>false</dd>
</dl>
Expand Down Expand Up @@ -100,7 +100,7 @@ mod tests {
<dl>
<dt>value</dt><dd>3</dd>
<dt>script pubkey</dt><dd class=monospace>OP_DUP OP_HASH160 OP_PUSHBYTES_20 0{40} OP_EQUALVERIFY OP_CHECKSIG</dd>
<dt>address</dt><dd class=monospace><a href=/address/1111111111111111111114oLvT2>1111111111111111111114oLvT2</a></dd>
<dt>address</dt><dd><a class=monospace href=/address/1111111111111111111114oLvT2>1111111111111111111114oLvT2</a></dd>
<dt>transaction</dt><dd><a class=monospace href=/tx/1{64}>1{64}</a></dd>
<dt>spent</dt><dd>true</dd>
</dl>
Expand Down Expand Up @@ -132,7 +132,7 @@ mod tests {
<dl>
<dt>value</dt><dd>3</dd>
<dt>script pubkey</dt><dd class=monospace>OP_DUP OP_HASH160 OP_PUSHBYTES_20 0{40} OP_EQUALVERIFY OP_CHECKSIG</dd>
<dt>address</dt><dd class=monospace><a href=/address/1111111111111111111114oLvT2>1111111111111111111114oLvT2</a></dd>
<dt>address</dt><dd><a class=monospace href=/address/1111111111111111111114oLvT2>1111111111111111111114oLvT2</a></dd>
<dt>transaction</dt><dd><a class=monospace href=/tx/1{64}>1{64}</a></dd>
<dt>spent</dt><dd>false</dd>
</dl>
Expand Down
2 changes: 1 addition & 1 deletion src/templates/sat.rs
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@ mod tests {
blocktime: Blocktime::confirmed(0),
inscriptions: Vec::new(),
},
"<h1>Sat 0</h1>.*<dt>location</dt><dd class=monospace>1{64}:1:0</dd>.*",
"<h1>Sat 0</h1>.*<dt>location</dt><dd><a class=monospace href=/satpoint/1{64}:1:0>1{64}:1:0</a></dd>.*",
);
}
}
6 changes: 4 additions & 2 deletions static/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -115,8 +115,6 @@ ol, ul {
}

.block-list {
font-family: monospace, monospace;
list-style-position: inside;
white-space: nowrap;
}

Expand Down Expand Up @@ -268,3 +266,7 @@ a.mythic {
height: 1rem;
width: 1rem;
}

[data-original]:not(a) {
user-select: all;
}
130 changes: 105 additions & 25 deletions static/index.js
Original file line number Diff line number Diff line change
@@ -1,34 +1,114 @@
for (let time of document.body.getElementsByTagName('time')) {
time.setAttribute('title', new Date(time.textContent));
}
addEventListener("DOMContentLoaded", () => {
for (let time of document.body.getElementsByTagName('time')) {
time.setAttribute('title', new Date(time.textContent));
}

let next = document.querySelector('a.next');
let prev = document.querySelector('a.prev');
let next = document.querySelector('a.next');
let prev = document.querySelector('a.prev');

window.addEventListener('keydown', e => {
if (document.activeElement.tagName == 'INPUT') {
return;
}
window.addEventListener('keydown', e => {
if (document.activeElement.tagName == 'INPUT') {
return;
}

switch (e.key) {
case 'ArrowRight':
if (next) {
window.location = next.href;
}
switch (e.key) {
case 'ArrowRight':
if (next) {
window.location = next.href;
}
return;
case 'ArrowLeft':
if (prev) {
window.location = prev.href;
}
return;
}
});

const search = document.querySelector('form[action="/search"]');
const query = search.querySelector('input[name="query"]');

search.addEventListener('submit', (e) => {
if (!query.value) {
e.preventDefault();
}
});

let collapse = [];

const PATTERNS = [
// hash
'[a-f0-9]{64}',
// outpoint
'[a-f0-9]{64}:[0-9]+',
// satpoint
'[a-f0-9]{64}:[0-9]+:[0-9]+',
// ethereum address
'0x[A-Fa-f0-9]{40}',
// inscription id
'[a-f0-9]{64}i[0-9]+',
// p2pkh address
'1[a-km-zA-HJ-NP-Z1-9]{25,33}',
// p2wpkh address
'(bc|bcrt|tb)1q[02-9ac-hj-np-z]{38}',
// p2wsh address
'(bc|bcrt|tb)1q[02-9ac-hj-np-z]{46}',
// p2tr address
'(bc|bcrt|tb)1p[02-9ac-hj-np-z]{58}',
// git hash
'[a-f0-9]{40}'
]

let RE = new RegExp('^(' + PATTERNS.map((p) => '(' + p + ')').join('|') + ')$');

document.querySelectorAll('.monospace').forEach((node) => {
if (node.children.length > 0 || node.parentNode.tagName === 'H1') {
return;
case 'ArrowLeft':
if (prev) {
window.location = prev.href;
}
}

let text = node.textContent.trim();

if (!RE.test(text)) {
return;
}
});
}

const search = document.querySelector('form[action="/search"]');
const query = search.querySelector('input[name="query"]');
node.dataset.original = text;
collapse.push(node);
});

search.addEventListener('submit', (e) => {
if (!query.value) {
e.preventDefault();
let context = document.createElement('canvas').getContext('2d');

function resize() {
for (let node of collapse) {
let original = node.dataset.original;
let length = original.length;
let width = node.clientWidth;
if (width == 0) {
width = node.parentNode.getBoundingClientRect().width;
}
context.font = window.getComputedStyle(node).font;
let capacity = width / (context.measureText(original).width / length);
if (capacity >= length) {
node.textContent = original
} else {
let count = Math.floor((capacity - 1) / 2);
let start = original.substring(0, count);
let end = original.substring(length - count);
node.textContent = `${start}${end}`;
}
}
}

function copy(e) {
if ('original' in e.target.dataset && window.getSelection().toString().includes('…')) {
e.clipboardData.setData('text/plain', e.target.dataset.original);
e.preventDefault();
}
}

addEventListener('resize', resize);

addEventListener('copy', copy);

resize();
});
4 changes: 2 additions & 2 deletions templates/block.html
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,9 @@ <h2>{{"Inscription".tally(self.inscription_count)}}</h2>
</div>
%% }
<h2>{{"Transaction".tally(self.block.txdata.len())}}</h2>
<ul class=monospace>
<ul>
%% for tx in &self.block.txdata {
%% let txid = tx.txid();
<li><a href=/tx/{{txid}}>{{txid}}</a></li>
<li><a class=monospace href=/tx/{{txid}}>{{txid}}</a></li>
%% }
</ul>
2 changes: 1 addition & 1 deletion templates/blocks.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ <h2><a href=/block/{{ self.last - i as u32 }}>Block {{ self.last - i as u32 }}</
%% if i == self.featured_blocks.len() {
<ol start={{ self.last - self.featured_blocks.len() as u32 }} reversed class=block-list>
%% }
<li><a href=/block/{{ hash }}>{{ hash }}</a></li>
<li><a class=monospace href=/block/{{ hash }}>{{ hash }}</a></li>
%% }
%% }
</ol>
4 changes: 2 additions & 2 deletions templates/inscription.html
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ <h1>Inscription {{ self.number }}</h1>
%% if let Some(output) = &self.output {
%% if let Ok(address) = self.chain.address_from_script(&output.script_pubkey ) {
<dt>address</dt>
<dd class=monospace><a href=/address/{{address}}>{{ address }}</a></dd>
<dd><a class=monospace href=/address/{{address}}>{{ address }}</a></dd>
%% }
<dt>value</dt>
<dd>{{ output.value.to_sat() }}</dd>
Expand Down Expand Up @@ -116,5 +116,5 @@ <h1>Inscription {{ self.number }}</h1>
<dt>offset</dt>
<dd>{{ self.satpoint.offset }}</dd>
<dt>ethereum teleburn address</dt>
<dd>{{ teleburn::Ethereum::from(self.id) }}</dd>
<dd class=monospace>{{ teleburn::Ethereum::from(self.id) }}</dd>
</dl>
2 changes: 1 addition & 1 deletion templates/output.html
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ <h1>Output <span class=monospace>{{self.outpoint}}</span></h1>
<dt>value</dt><dd>{{ self.output.value.to_sat() }}</dd>
<dt>script pubkey</dt><dd class=monospace>{{ self.output.script_pubkey.to_asm_string() }}</dd>
%% if let Ok(address) = self.chain.address_from_script(&self.output.script_pubkey ) {
<dt>address</dt><dd class=monospace><a href=/address/{{address}}>{{ address }}</a></dd>
<dt>address</dt><dd><a class=monospace href=/address/{{address}}>{{ address }}</a></dd>
%% }
<dt>transaction</dt><dd><a class=monospace href=/tx/{{ self.outpoint.txid }}>{{ self.outpoint.txid }}</a></dd>
<dt>spent</dt><dd>{{ self.spent }}</dd>
Expand Down
2 changes: 1 addition & 1 deletion templates/page.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<link rel=icon href=/static/favicon.svg>
<link rel=stylesheet href=/static/index.css>
<link rel=stylesheet href=/static/modern-normalize.css>
<script src=/static/index.js defer></script>
<script src=/static/index.js></script>
</head>
<body>
<header>
Expand Down
4 changes: 2 additions & 2 deletions templates/rune-balances.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ <h1>Rune Balances</h1>
<table>
%% for (outpoint, balance) in balances {
<tr>
<td class=monospace>
<a href=/output/{{ outpoint }}>{{ outpoint }}</a>
<td>
<a class=monospace href=/output/{{ outpoint }}>{{ outpoint }}</a>
</td>
<td class=monospace>
{{ balance }}
Expand Down
2 changes: 1 addition & 1 deletion templates/sat.html
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ <h1>Sat {{ self.sat.n() }}</h1>
</dd>
%% }
%% if let Some(satpoint) = self.satpoint {
<dt>location</dt><dd class=monospace>{{ satpoint }}</dd>
<dt>location</dt><dd><a class=monospace href=/satpoint/{{ satpoint }}>{{ satpoint }}</a></dd>
%% }
</dl>
<div class=center>
Expand Down
2 changes: 1 addition & 1 deletion templates/status.html
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ <h1>Status</h1>
%% if !env!("GIT_COMMIT").is_empty() {
<dt>git commit</dt>
<dd>
<a href=https://github.com/ordinals/ord/commit/{{ env!("GIT_COMMIT") }}>
<a class=monospace href=https://github.com/ordinals/ord/commit/{{ env!("GIT_COMMIT") }}>
{{ env!("GIT_COMMIT") }}
</a>
</dd>
Expand Down
2 changes: 1 addition & 1 deletion templates/transaction.html
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ <h2>{{"Output".tally(self.transaction.output.len())}}</h2>
<dt>value</dt><dd>{{ output.value.to_sat() }}</dd>
<dt>script pubkey</dt><dd class=monospace>{{ output.script_pubkey.to_asm_string() }}</dd>
%% if let Ok(address) = self.chain.address_from_script(&output.script_pubkey) {
<dt>address</dt><dd class=monospace><a href=/address/{{address}}>{{ address }}</a></dd>
<dt>address</dt><dd><a class=monospace href=/address/{{address}}>{{ address }}</a></dd>
%% }
</dl>
</li>
Expand Down
Loading

0 comments on commit b5c7f88

Please sign in to comment.