Skip to content

Commit

Permalink
Adds tooltip shortcode. (#207)
Browse files Browse the repository at this point in the history
* Adds super basic tooltip functionality.

* Removes example tooltips for testing.

* Simplifies to styling of the tooltip.

* Manually adds map of glossary items.

* Adds docs for using the Tooltip feature.
  • Loading branch information
johnnymatthews authored Aug 22, 2024
1 parent dc7bce1 commit e5e00ce
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 1 deletion.
27 changes: 27 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,33 @@ docs
* **Guides**: easy-to-understand guides that show users how to hit a specific goal, without diving into the content discussed in `/concepts`.
* **Reference**: in-depth reference documentation for the CLI and SDK.

## Site features

This site contains quite a few shortcodes that writers can use to add extra functionality into each page.

### Tooltips

Tooltips allow the reader to hover over a particular word or phrase, and have a description or explanation of that element shown to them quickly. Every avavailable tooltip can be found within `./themes/hextra/layouts/shortcodes/tooltip.html`:

```go
<!-- Create array/map of all possible tooltips. -->
{{ $tooltips := dict
"account" "All information is associated with a specific program for a particular user or entity."
"admin key" "A key that allows you to deploy programs and modify the settings of those programs. Admin keys cannot request signatures. This key must be funded to perform some actions."
"adapter" "Plugins that provide support for different chains and program configurations. For example, an adapter can define a specific hashing function to use when signing. Different chains have different signing algorithms; this allows us to support them all."

...

```
To use a tooltip, use the following syntax:
```markdown
You will need to have a funded Entropy {{< tooltip "account" >}} in order to progress with this tutorial.
```
Attempting to use a tooltip element that does not exist in the `tooltip.html` shortcode will cause the Hugo build to fail.
## Support
All support tickets are handled in the **Discussion** tab of the [github.com/entropyxyz/community repository](https://github.com/entropyxyz/community).
Expand Down
2 changes: 1 addition & 1 deletion content/basics/quickstart.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ The command-line interface (CLI) is the most straightforward way to interact wit
**Closing the CLI**: You can close the CLI tool anytime by pressing `CTRL` + `c`. This will halt the CLI process and return you to your normal terminal window.
{{< /callout >}}

Next, you'll create an Entropy account.
Next, you'll create an Entropy {{< tooltip "account" >}}.
## 2. Create an account
Expand Down
85 changes: 85 additions & 0 deletions themes/hextra/layouts/shortcodes/tooltip.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<!-- Create array/map of all possible tooltips. -->
{{ $tooltips := dict
"account" "All information is associated with a specific program for a particular user or entity."
"admin key" "A key that allows you to deploy programs and modify the settings of those programs. Admin keys cannot request signatures. This key must be funded to perform some actions."
"adapter" "Plugins that provide support for different chains and program configurations. For example, an adapter can define a specific hashing function to use when signing. Different chains have different signing algorithms; this allows us to support them all."
"application chain" "A blockchain that is exclusively designed for a single application, unlike a public blockchain designed for multiple apps. Also called an application-specific blockchain, or appchain."
"autonomous agent" "A program designed to act independently, capable of executing tasks and making decisions based on predefined rules or algorithms. Autonomous agents are seen as key players in the evolution towards digital environments where AI and blockchains intersect, often called autonomous worlds."
"consumer key" "A synonym for a device key or deploy key."
"device key" "A key that can request signatures from Entropy Programs. By default, device keys cannot install or modify the Programs settings. However, Programs can be given admin-key privileges. A device key does not need to hold funds in order to perform actions."
"entropy chain" "An application-specific layer-1 blockchain to coordinate distributed signing."
"entropy network" "The set of Entropy validators."
"intelligent program" "A synonym for an autonomous agent."
"partition" "Also called a signing subgroup, a subgroup is a set of threshold signing servers that all hold identical key shares. To sign a message, one member of each subgroup must participate. The Entropy chain assigns new threshold signing servers to a subgroup."
"program" "The logic defining what conditions a threshold signing server (TSS) should participate in signing a particular transaction or message. Programs are compiled into WebAssembly blobs that are uploaded to the blockchain and can be updated by subsequent authenticated, valid transactions."
"program developer" "Refers to the human or humans using the Entropy Network to build and deploy programs."
"program dev key" "An authorization key that permits its holder to deploy Programs for installation onto the Entropy blockchain by admin keys. Program dev keys do not need to be registered."
"registration" "The process of establishing an Entropy account. Registered accounts can be initialized with Programs and modify those Programs later."
"session" "An on-chain session is 2400 blocks or about 4 hours."
"signature request account" "The account on the Entropy chain that is used to initiate signature requests."
"signing committee" "A set of threshold signing servers that have been selected to participate in signing a particular message. This is composed of validators from different signing subgroups."
"signing subgroup" "A set of threshold signing servers that all hold identical keyshares. To sign a message, one member of each subgroup must participate. The Entropy chain is responsible for assigning new threshold servers to a subgroup."
"ss58" "The default Substrate address format. The SS58 encoded address format is based on the Bitcoin Base-58-check format but with a few modifications specifically designed to suit Substrate-based chains."
"tss account" "A threshold signature server account is the identifier for an Entropy chain account belonging to a given threshold signing server. These servers are sometimes referred to as threshold signing servers."
"threshold signing" "A cryptographic technique that allows a group of participants to collectively produce a digital signature on a message without any single participant having access to the complete private signing key. The private signing key is divided into multiple shares, with each participant holding one share. A predetermined threshold number of shares (e.g., 3 out of 5) must be combined to produce a valid signature. This way, no single entity possesses the entire private key."
"threshold server" "An instance of the Entropy threshold signature server."
"transaction" "A transaction is a specific request submitted for inclusion on the Entropy blockchain. It can contain a program or account registration, modification, or any other data that a user, like a program developer or autonomous agent, wants to have signed and validated by the Entropy Network."
"user" "Refers to whoever is using the Entropy network to sign transactions or messages. This may be an individual, an organisation, or some other entity."
"validator" "A device running both an Entropy chain node and a threshold signing server."
}}

<!-- Pick the item from the array/map we want based on -->
<!-- what is inside the quotes in the markdown shortcode. -->
{{ $value := .Get 0 }}
{{ $description := index $tooltips $value }}

<style>
.tooltip {
/* Span a container for tooltip text. */
position:relative;
border-bottom: 1px dashed grey;
/* ---------------------------------- */
}

.tooltip:before {
/* Do some CSS3 magic. */
content: attr(data-text);
position:absolute;
/* ------------------- */

/* Centre vertically. */
top:50%;
transform:translateY(-50%);
/* ------------------ */


/* Move to the right and add a left margin. */
left:100%;
margin-left:15px;
/* ---------------------------------------- */


/* Add some basic styling. */
width:200px;
padding:10px;
border-radius:10px;
text-align:center;
background-color: grey;
color: white;
/* ----------------------- */


/* Hide by default. */
display:none;
/* ---------------- */
}

.tooltip:hover:before {
display:block;
}
</style>

<span
data-text="{{ $description | markdownify }}"
class="tooltip"
>{{ $value | safeHTML }}</span>

0 comments on commit e5e00ce

Please sign in to comment.