toc looks and works well on small screens
This commit is contained in:
Alex Grintsvayg
parent
bdf38efc52
commit
00263e4ff9
5 changed files with 322 additions and 36 deletions
2
Makefile
2
Makefile
|
|
@ -1,3 +1,3 @@
|
|||
index.html: index.md style.css
|
||||
# ./bin/gh-md-toc --insert index.md
|
||||
./bin/gh-md-toc --insert index.md
|
||||
./bin/mmark-linux-amd64 -head head.html -html index.md > index.html
|
||||
45
head.html
45
head.html
|
|
@ -11,16 +11,49 @@
|
|||
}
|
||||
}
|
||||
|
||||
function toggleClass(el, className) {
|
||||
if (el.classList) {
|
||||
el.classList.toggle(className);
|
||||
} else {
|
||||
var classes = el.className.split(' ');
|
||||
var existingIndex = classes.indexOf(className);
|
||||
|
||||
if (existingIndex >= 0)
|
||||
classes.splice(existingIndex, 1);
|
||||
else
|
||||
classes.push(className);
|
||||
|
||||
el.className = classes.join(' ');
|
||||
}
|
||||
}
|
||||
|
||||
ready(function() {
|
||||
tocbot.init({
|
||||
// Where to render the table of contents.
|
||||
tocSelector: '#toc',
|
||||
// Where to grab the headings to build the table of contents.
|
||||
var options = {
|
||||
tocSelector: '.toc',
|
||||
contentSelector: '#content',
|
||||
// Which headings to grab inside of the contentSelector element.
|
||||
headingSelector: 'h2, h3, h4, h5, h6',
|
||||
collapseDepth: 3,
|
||||
positionFixedSelector: "#toc",
|
||||
positionFixedSelector: ".toc",
|
||||
};
|
||||
|
||||
tocbot.init(options);
|
||||
|
||||
document.querySelector('.toc-menu').addEventListener("click", function() {
|
||||
toggleClass(document.querySelector('.toc'), "open");
|
||||
});
|
||||
|
||||
|
||||
// need this part to fix toc offset height if content above toc changes height
|
||||
var resizeTimer;
|
||||
window.addEventListener('resize', function(e) {
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(function() {
|
||||
o = options;
|
||||
o.fixedSidebarOffset = "auto";
|
||||
tocbot.refresh(o);
|
||||
}, 250);
|
||||
});
|
||||
|
||||
|
||||
})
|
||||
</script>
|
||||
146
index.html
146
index.html
|
|
@ -17,21 +17,56 @@
|
|||
}
|
||||
}
|
||||
|
||||
function toggleClass(el, className) {
|
||||
if (el.classList) {
|
||||
el.classList.toggle(className);
|
||||
} else {
|
||||
var classes = el.className.split(' ');
|
||||
var existingIndex = classes.indexOf(className);
|
||||
|
||||
if (existingIndex >= 0)
|
||||
classes.splice(existingIndex, 1);
|
||||
else
|
||||
classes.push(className);
|
||||
|
||||
el.className = classes.join(' ');
|
||||
}
|
||||
}
|
||||
|
||||
ready(function() {
|
||||
tocbot.init({
|
||||
// Where to render the table of contents.
|
||||
tocSelector: '#toc',
|
||||
// Where to grab the headings to build the table of contents.
|
||||
var options = {
|
||||
tocSelector: '.toc',
|
||||
contentSelector: '#content',
|
||||
// Which headings to grab inside of the contentSelector element.
|
||||
headingSelector: 'h2, h3, h4, h5, h6',
|
||||
collapseDepth: 3,
|
||||
positionFixedSelector: "#toc",
|
||||
positionFixedSelector: ".toc",
|
||||
};
|
||||
|
||||
tocbot.init(options);
|
||||
|
||||
document.querySelector('.toc-menu').addEventListener("click", function() {
|
||||
toggleClass(document.querySelector('.toc'), "open");
|
||||
});
|
||||
|
||||
|
||||
// need this part to fix toc offset height if content above toc changes height
|
||||
var resizeTimer;
|
||||
window.addEventListener('resize', function(e) {
|
||||
clearTimeout(resizeTimer);
|
||||
resizeTimer = setTimeout(function() {
|
||||
o = options;
|
||||
o.fixedSidebarOffset = "auto";
|
||||
tocbot.refresh(o);
|
||||
}, 250);
|
||||
});
|
||||
|
||||
|
||||
})
|
||||
</script></head>
|
||||
<body>
|
||||
|
||||
<p><main></p>
|
||||
|
||||
<h1 id="lbry-a-decentralized-digital-content-marketplace">LBRY: A Decentralized Digital Content Marketplace</h1>
|
||||
|
||||
<aside>
|
||||
|
|
@ -40,9 +75,100 @@
|
|||
<p>For more technical information about LBRY, visit <a href="https://lbry.tech">lbry.tech</a>.</p>
|
||||
</aside>
|
||||
|
||||
<p><nav id="toc"></nav>
|
||||
<p><div class="toc-menu">Menu</div>
|
||||
<nav class="toc"></nav>
|
||||
<div id="content"></p>
|
||||
|
||||
<noscript>
|
||||
|
||||
## Table of Contents
|
||||
|
||||
<!--ts-->
|
||||
* [Introduction](#introduction)
|
||||
* [Overview](#overview)
|
||||
* [Conventions and Terminology](#conventions-and-terminology)
|
||||
* [Blockchain](#blockchain)
|
||||
* [Claims](#claims)
|
||||
* [Properties {#claim-properties}](#properties-claim-properties)
|
||||
* [Example Claim](#example-claim)
|
||||
* [Operations {#claim-operations}](#operations-claim-operations)
|
||||
* [Supports](#supports)
|
||||
* [Claimtrie](#claimtrie)
|
||||
* [Statuses {#claim-statuses}](#statuses-claim-statuses)
|
||||
* [Accepted](#accepted)
|
||||
* [Abandoned](#abandoned)
|
||||
* [Active](#active)
|
||||
* [Controlling](#controlling)
|
||||
* [Claimtrie Transitions](#claimtrie-transitions)
|
||||
* [Determining Active Claims](#determining-active-claims)
|
||||
* [Claim Transition Example](#claim-transition-example)
|
||||
* [Normalization](#normalization)
|
||||
* [URLs](#urls)
|
||||
* [Components](#components)
|
||||
* [Stream Claim Name](#stream-claim-name)
|
||||
* [Channel Claim Name](#channel-claim-name)
|
||||
* [Channel Claim Name and Stream Claim Name](#channel-claim-name-and-stream-claim-name)
|
||||
* [Claim ID](#claim-id)
|
||||
* [Claim Sequence](#claim-sequence)
|
||||
* [Bid Position](#bid-position)
|
||||
* [Query Params](#query-params)
|
||||
* [Grammar](#grammar)
|
||||
* [Resolution](#resolution)
|
||||
* [No Modifier](#no-modifier)
|
||||
* [Claim ID](#claim-id-1)
|
||||
* [Claim Sequence](#claim-sequence-1)
|
||||
* [Bid Position](#bid-position-1)
|
||||
* [ChannelName and ClaimName](#channelname-and-claimname)
|
||||
* [Examples](#examples)
|
||||
* [Design Notes](#design-notes)
|
||||
* [Transactions](#transactions)
|
||||
* [Operations and Opcodes](#operations-and-opcodes)
|
||||
* [Addresses](#addresses)
|
||||
* [Proof of Payment](#proof-of-payment)
|
||||
* [Consensus](#consensus)
|
||||
* [Block Timing](#block-timing)
|
||||
* [Difficulty Adjustment](#difficulty-adjustment)
|
||||
* [Block Hash Algorithm](#block-hash-algorithm)
|
||||
* [Block Rewards](#block-rewards)
|
||||
* [Metadata](#metadata)
|
||||
* [Specification](#specification)
|
||||
* [Example {#metadata-example}](#example-metadata-example)
|
||||
* [Key Fields](#key-fields)
|
||||
* [Source and Stream Hashes](#source-and-stream-hashes)
|
||||
* [Fees and Fee Structure](#fees-and-fee-structure)
|
||||
* [Title](#title)
|
||||
* [Thumbnail](#thumbnail)
|
||||
* [Content Type](#content-type)
|
||||
* [Certificate](#certificate)
|
||||
* [Channels (Identities) {#channels}](#channels-identities-channels)
|
||||
* [Example Channel Metadata](#example-channel-metadata)
|
||||
* [Validation {#metadata-validation}](#validation-metadata-validation)
|
||||
* [Data](#data)
|
||||
* [Encoding](#encoding)
|
||||
* [Blobs](#blobs)
|
||||
* [Streams](#streams)
|
||||
* [Manifest Contents](#manifest-contents)
|
||||
* [Stream Encoding](#stream-encoding)
|
||||
* [Setup](#setup)
|
||||
* [Content Blobs](#content-blobs)
|
||||
* [Manifest Blob](#manifest-blob)
|
||||
* [Stream Decoding](#stream-decoding)
|
||||
* [Announce](#announce)
|
||||
* [Distributed Hash Table](#distributed-hash-table)
|
||||
* [Announcing to the DHT](#announcing-to-the-dht)
|
||||
* [Download](#download)
|
||||
* [Querying the DHT](#querying-the-dht)
|
||||
* [Blob Exchange Protocol](#blob-exchange-protocol)
|
||||
* [PriceCheck](#pricecheck)
|
||||
* [DownloadCheck](#downloadcheck)
|
||||
* [Download](#download-1)
|
||||
* [UploadCheck](#uploadcheck)
|
||||
* [Upload](#upload)
|
||||
* [Reflectors and Data Markets](#reflectors-and-data-markets)
|
||||
<!--te-->
|
||||
|
||||
</noscript>
|
||||
|
||||
<h2 id="introduction">Introduction</h2>
|
||||
|
||||
<p>LBRY is a protocol for accessing and publishing digital content in a global, decentralized marketplace. Clients can use LBRY to publish, host, find, download, and pay for content — books, movies, music, or anything else. Anyone can participate and no permission is required, nor can anyone be blocked from participating. The system is distributed, so no single entity has unilateral control, nor will the removal of any single entity prevent the system from functioning.</p>
|
||||
|
|
@ -669,6 +795,8 @@ Char ::= #x9 | #xA | #xD | [#x20-#xD7FF] | [#xE000-#xFFFD] | [#x10000-#x10FFFF]
|
|||
|
||||
<h4 id="operations-and-opcodes">Operations and Opcodes</h4>
|
||||
|
||||
<!-- fixme: grin: i need to go over this section -->
|
||||
|
||||
<p>To enable <a href="#claim-operations">claim operations</a>, three new opcodes were added to the blockchain scripting language: <code>OP_CLAIM_NAME</code>, <code>OP_SUPPORT_CLAIM</code>, and <code>OP_UPDATE_CLAIM</code> (in Bitcoin they are respectively <code>OP_NOP6</code>, <code>OP_NOP7</code>, and <code>OP_NOP8</code>). Each op code will push a zero on to the execution stack, and will trigger the claimtrie to perform calculations necessary for each operation. Below are the three supported transactions scripts using these opcodes.</p>
|
||||
|
||||
<pre><code>OP_CLAIM_NAME <name> <value> OP_2DROP OP_DROP <pubKey>
|
||||
|
|
@ -704,6 +832,8 @@ OP_SUPPORT_CLAIM <name> <claimId> OP_2DROP OP_DROP <pubKey>
|
|||
<pre><code>OP_UPDATE_CLAIM Fruit 529357c3422c6046d3fec76be2358004ba22e323 Banana OP_2DROP OP_2DROP OP_DUP OP_HASH160 <addressThree> OP_EQUALVERIFY OP_CHECKSIG
|
||||
</code></pre>
|
||||
|
||||
<p>An update transaction must spend the [[outpoint]] of the original claim that it is updating.</p>
|
||||
|
||||
<h4 id="addresses">Addresses</h4>
|
||||
|
||||
<p>The address version byte is set to <code>0x55</code> for standard (pay-to-public-key-hash) addresses and <code>0x7a</code> for multisig (pay-to-script-hash) addresses. P2PKH addresses start with the letter <code>b</code>, and P2SH addresses start with <code>r</code>.</p>
|
||||
|
|
@ -1049,7 +1179,7 @@ specification fairly closely, with some modifications.</p>
|
|||
|
||||
<p><em>Edit this on Github: <a href="https://github.com/lbryio/spec">https://github.com/lbryio/spec</a></em></p>
|
||||
|
||||
<p></div> <!-- DONT DELETE THIS, its for the TOC --></p>
|
||||
<p></div></main> <!-- DONT DELETE THIS, its for the TOC --></p>
|
||||
|
||||
<!---
|
||||
|
||||
|
|
|
|||
99
index.md
99
index.md
|
|
@ -16,6 +16,7 @@ surname="Grintsvayg"
|
|||
fullname="Alex Grintsvayg"
|
||||
%%%
|
||||
|
||||
<main>
|
||||
|
||||
# LBRY: A Decentralized Digital Content Marketplace
|
||||
|
||||
|
|
@ -24,9 +25,100 @@ A> Please excuse the unfinished state of this paper. It is being actively worked
|
|||
|
||||
A> For more technical information about LBRY, visit [lbry.tech](https://lbry.tech).
|
||||
|
||||
<nav id="toc"></nav>
|
||||
<div class="toc-menu">Menu</div>
|
||||
<nav class="toc"></nav>
|
||||
<div id="content">
|
||||
|
||||
<noscript>
|
||||
|
||||
## Table of Contents
|
||||
|
||||
<!--ts-->
|
||||
* [Introduction](#introduction)
|
||||
* [Overview](#overview)
|
||||
* [Conventions and Terminology](#conventions-and-terminology)
|
||||
* [Blockchain](#blockchain)
|
||||
* [Claims](#claims)
|
||||
* [Properties {#claim-properties}](#properties-claim-properties)
|
||||
* [Example Claim](#example-claim)
|
||||
* [Operations {#claim-operations}](#operations-claim-operations)
|
||||
* [Supports](#supports)
|
||||
* [Claimtrie](#claimtrie)
|
||||
* [Statuses {#claim-statuses}](#statuses-claim-statuses)
|
||||
* [Accepted](#accepted)
|
||||
* [Abandoned](#abandoned)
|
||||
* [Active](#active)
|
||||
* [Controlling](#controlling)
|
||||
* [Claimtrie Transitions](#claimtrie-transitions)
|
||||
* [Determining Active Claims](#determining-active-claims)
|
||||
* [Claim Transition Example](#claim-transition-example)
|
||||
* [Normalization](#normalization)
|
||||
* [URLs](#urls)
|
||||
* [Components](#components)
|
||||
* [Stream Claim Name](#stream-claim-name)
|
||||
* [Channel Claim Name](#channel-claim-name)
|
||||
* [Channel Claim Name and Stream Claim Name](#channel-claim-name-and-stream-claim-name)
|
||||
* [Claim ID](#claim-id)
|
||||
* [Claim Sequence](#claim-sequence)
|
||||
* [Bid Position](#bid-position)
|
||||
* [Query Params](#query-params)
|
||||
* [Grammar](#grammar)
|
||||
* [Resolution](#resolution)
|
||||
* [No Modifier](#no-modifier)
|
||||
* [Claim ID](#claim-id-1)
|
||||
* [Claim Sequence](#claim-sequence-1)
|
||||
* [Bid Position](#bid-position-1)
|
||||
* [ChannelName and ClaimName](#channelname-and-claimname)
|
||||
* [Examples](#examples)
|
||||
* [Design Notes](#design-notes)
|
||||
* [Transactions](#transactions)
|
||||
* [Operations and Opcodes](#operations-and-opcodes)
|
||||
* [Addresses](#addresses)
|
||||
* [Proof of Payment](#proof-of-payment)
|
||||
* [Consensus](#consensus)
|
||||
* [Block Timing](#block-timing)
|
||||
* [Difficulty Adjustment](#difficulty-adjustment)
|
||||
* [Block Hash Algorithm](#block-hash-algorithm)
|
||||
* [Block Rewards](#block-rewards)
|
||||
* [Metadata](#metadata)
|
||||
* [Specification](#specification)
|
||||
* [Example {#metadata-example}](#example-metadata-example)
|
||||
* [Key Fields](#key-fields)
|
||||
* [Source and Stream Hashes](#source-and-stream-hashes)
|
||||
* [Fees and Fee Structure](#fees-and-fee-structure)
|
||||
* [Title](#title)
|
||||
* [Thumbnail](#thumbnail)
|
||||
* [Content Type](#content-type)
|
||||
* [Certificate](#certificate)
|
||||
* [Channels (Identities) {#channels}](#channels-identities-channels)
|
||||
* [Example Channel Metadata](#example-channel-metadata)
|
||||
* [Validation {#metadata-validation}](#validation-metadata-validation)
|
||||
* [Data](#data)
|
||||
* [Encoding](#encoding)
|
||||
* [Blobs](#blobs)
|
||||
* [Streams](#streams)
|
||||
* [Manifest Contents](#manifest-contents)
|
||||
* [Stream Encoding](#stream-encoding)
|
||||
* [Setup](#setup)
|
||||
* [Content Blobs](#content-blobs)
|
||||
* [Manifest Blob](#manifest-blob)
|
||||
* [Stream Decoding](#stream-decoding)
|
||||
* [Announce](#announce)
|
||||
* [Distributed Hash Table](#distributed-hash-table)
|
||||
* [Announcing to the DHT](#announcing-to-the-dht)
|
||||
* [Download](#download)
|
||||
* [Querying the DHT](#querying-the-dht)
|
||||
* [Blob Exchange Protocol](#blob-exchange-protocol)
|
||||
* [PriceCheck](#pricecheck)
|
||||
* [DownloadCheck](#downloadcheck)
|
||||
* [Download](#download-1)
|
||||
* [UploadCheck](#uploadcheck)
|
||||
* [Upload](#upload)
|
||||
* [Reflectors and Data Markets](#reflectors-and-data-markets)
|
||||
<!--te-->
|
||||
|
||||
</noscript>
|
||||
|
||||
## Introduction
|
||||
|
||||
LBRY is a protocol for accessing and publishing digital content in a global, decentralized marketplace. Clients can use LBRY to publish, host, find, download, and pay for content — books, movies, music, or anything else. Anyone can participate and no permission is required, nor can anyone be blocked from participating. The system is distributed, so no single entity has unilateral control, nor will the removal of any single entity prevent the system from functioning.
|
||||
|
|
@ -516,6 +608,8 @@ To support claims, the LBRY blockchain makes the following changes on top of Bit
|
|||
|
||||
#### Operations and Opcodes
|
||||
|
||||
<!-- fixme: grin: i need to go over this section -->
|
||||
|
||||
To enable [claim operations](#claim-operations), three new opcodes were added to the blockchain scripting language: `OP_CLAIM_NAME`, `OP_SUPPORT_CLAIM`, and `OP_UPDATE_CLAIM` (in Bitcoin they are respectively `OP_NOP6`, `OP_NOP7`, and `OP_NOP8`). Each op code will push a zero on to the execution stack, and will trigger the claimtrie to perform calculations necessary for each operation. Below are the three supported transactions scripts using these opcodes.
|
||||
|
||||
```
|
||||
|
|
@ -556,6 +650,7 @@ The payout script for the update transaction is:
|
|||
OP_UPDATE_CLAIM Fruit 529357c3422c6046d3fec76be2358004ba22e323 Banana OP_2DROP OP_2DROP OP_DUP OP_HASH160 <addressThree> OP_EQUALVERIFY OP_CHECKSIG
|
||||
```
|
||||
|
||||
An update transaction must spend the [[outpoint]] of the original claim that it is updating.
|
||||
|
||||
#### Addresses
|
||||
|
||||
|
|
@ -912,7 +1007,7 @@ _Edit this on Github: https://github.com/lbryio/spec_
|
|||
|
||||
|
||||
|
||||
</div> <!-- DONT DELETE THIS, its for the TOC -->
|
||||
</div></main> <!-- DONT DELETE THIS, its for the TOC -->
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
66
style.css
66
style.css
|
|
@ -3,42 +3,70 @@
|
|||
}
|
||||
|
||||
body {
|
||||
margin: 40px auto 80vh;
|
||||
max-width: 1000px;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
padding: 0 10px;
|
||||
color: #333;
|
||||
background: #ffffff;
|
||||
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
|
||||
/* font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; */
|
||||
}
|
||||
|
||||
#content {
|
||||
margin-right: 300px;
|
||||
main {
|
||||
margin: 40px auto 80vh;
|
||||
max-width: 1000px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
#toc {
|
||||
|
||||
#content {
|
||||
}
|
||||
|
||||
.toc {
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
right: calc((100% - 1000px) / 2);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
padding-left: 20px;
|
||||
padding-top: 20px;
|
||||
position: absolute;
|
||||
background-color: rgba(255,255,255,0.95);
|
||||
transition: all 300ms ease-in-out;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
.toc.open {
|
||||
box-shadow: 0 0 5px #c8c8c8;
|
||||
transform: translateX(0);
|
||||
}
|
||||
@media (min-width: 1000px) {
|
||||
#content {
|
||||
margin-right: 300px;
|
||||
}
|
||||
.toc {
|
||||
right: calc((100% - 1000px) / 2);
|
||||
transform: translateX(0);
|
||||
}
|
||||
.toc-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.toc .is-active-link::before {
|
||||
background-color: #0074D9;
|
||||
}
|
||||
.is-position-fixed {
|
||||
position: fixed !important;
|
||||
top: 0;
|
||||
}
|
||||
#toc a {
|
||||
text-decoration: none;
|
||||
}
|
||||
#toc ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
#toc li {
|
||||
margin-left: 10px;
|
||||
}
|
||||
#toc .is-active-link::before {
|
||||
background-color: #0074D9;
|
||||
.toc-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
margin: .25rem;
|
||||
padding: .25rem;
|
||||
background-color: #f4f4f4;
|
||||
line-height: 1;
|
||||
border-radius: .125rem;
|
||||
border-color: #999;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
|
|||
Loading…
Reference in a new issue