From 00263e4ff950d9301e6ef223d3e87e2a1be0d431 Mon Sep 17 00:00:00 2001 From: Alex Grintsvayg Date: Fri, 2 Nov 2018 13:07:44 -0400 Subject: [PATCH] toc looks and works well on small screens --- Makefile | 2 +- head.html | 45 ++++++++++++++--- index.html | 146 ++++++++++++++++++++++++++++++++++++++++++++++++++--- index.md | 99 +++++++++++++++++++++++++++++++++++- style.css | 66 +++++++++++++++++------- 5 files changed, 322 insertions(+), 36 deletions(-) diff --git a/Makefile b/Makefile index 8ed05cb..df79f1f 100644 --- a/Makefile +++ b/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 \ No newline at end of file diff --git a/head.html b/head.html index a23d90d..6886d61 100644 --- a/head.html +++ b/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); + }); + + }) \ No newline at end of file diff --git a/index.html b/index.html index b9a9ac2..437faa6 100644 --- a/index.html +++ b/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); + }); + + }) +

+

LBRY: A Decentralized Digital Content Marketplace

-

+

Menu
+

+ +

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.

@@ -669,6 +795,8 @@ Char ::= #x9 | #xA | #xD | [#x20-#xD7FF] | [#xE000-#xFFFD] | [#x10000-#x10FFFF]

Operations and Opcodes

+ +

To enable 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.

OP_CLAIM_NAME <name> <value> OP_2DROP OP_DROP <pubKey>
@@ -704,6 +832,8 @@ OP_SUPPORT_CLAIM <name> <claimId> OP_2DROP OP_DROP <pubKey>
 
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

 
 
The address version byte is set to 0x55 for standard (pay-to-public-key-hash) addresses and 0x7a for multisig (pay-to-script-hash) addresses. P2PKH addresses start with the letter b, and P2SH addresses start with r.

@@ -1049,7 +1179,7 @@ specification fairly closely, with some modifications.

 
 
Edit this on Github: https://github.com/lbryio/spec

 
-

+

+* [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) + + + + ## 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 + + 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 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_ - + diff --git a/style.css b/style.css index 719dbe5..94d6737 100644 --- a/style.css +++ b/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 {