docs: change the remix button from icon to text (#14122)

* docs: change remix button to text button

* docs(fix): trim trailing whitespaces

* fix: remove unnecessary spaces

Co-authored-by: Kamil Śliwak <cameel2@gmail.com>

* fix: remove unnecessary !important in link

* refactor: remove !important in custom.css

* fix: `.. code-block:: Solidity` -> `.. code-block:: solidity`

* fix: broken layout of remix button in list items

* refactor: make selectors more strict

---------

Co-authored-by: Kamil Śliwak <cameel2@gmail.com>
This commit is contained in:
minaminao 2023-04-27 19:02:04 +09:00 committed by GitHub
parent 6edec899c8
commit 7c870c95c5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 56 additions and 74 deletions

View File

@ -6,9 +6,11 @@ pre {
word-wrap: break-word;
}
.wy-table-responsive table td, .wy-table-responsive table th {
.wy-table-responsive table td,
.wy-table-responsive table th {
white-space: normal;
}
.rst-content table.docutils td {
vertical-align: top;
}
@ -27,8 +29,8 @@ pre {
background: #fafafa;
}
.wy-side-nav-search img.logo {
width: 100px !important;
.wy-side-nav-search > a img.logo {
width: 100px;
padding: 0;
}
@ -38,49 +40,36 @@ pre {
}
/* project version (displayed under project logo) */
.wy-side-nav-search .version {
color: #272525 !important;
.wy-side-nav-search > div.version {
color: #272525;
}
/* menu section headers */
.wy-menu .caption {
color: #65afff !important;
.wy-menu p.caption {
color: #65afff;
}
/* Link to Remix IDE shown next to code snippets */
p.remix-link-container {
position: relative;
right: -100%; /* Positioned next to the the top-right corner of the code block following it. */
}
a.remix-link {
position: absolute; /* Remove it from normal flow not to affect the original position of the snippet. */
top: 0.5em;
width: 3.236em; /* Size of the margin (= right-side padding in .wy-nav-content in the current theme). */
}
a.remix-link .link-icon {
background: url("../img/solid-share-arrow.svg") no-repeat;
.rst-content p.remix-link-container {
display: block;
width: 1.5em;
height: 1.5em;
margin: auto;
text-align: right;
margin: 0;
line-height: 1em;
}
a.remix-link .link-text {
display: none; /* Visible only on hover. */
width: 3.3em; /* Narrow enough to get two lines of text. */
margin: auto;
text-align: center;
font-size: 0.8em;
line-height: normal;
color: black;
.rst-content .remix-link-container a.remix-link {
display: inline-block;
font-size: 0.7em;
padding: 0.1em 0.4em;
background: #e1e4e5;
color: #707070;
}
a.remix-link:hover {
opacity: 0.5;
.rst-content .remix-link-container a.remix-link:hover {
background: #c8cbcc;
}
a.remix-link:hover .link-text {
display: block;
.rst-content div.highlight-solidity,
.rst-content div.highlight-yul {
margin-top: 0;
}

View File

@ -1,7 +1,7 @@
/* links */
.rst-content a:not(:visited) {
color: #aaddff !important;
color: #aaddff;
}
/* code directives */
@ -626,12 +626,10 @@ code.docutils.literal.notranslate {
}
/* Literal.Number.Integer.Long */
/* Link to Remix IDE shown over code snippets */
a.remix-link {
filter: invert(1); /* The icon is black. In dark mode we want it white. */
.rst-content .remix-link-container a.remix-link {
color: black;
}

View File

@ -11,7 +11,7 @@ visual diff of the assembly before and after a change is often very enlightening
Consider the following contract (named, say ``contract.sol``):
.. code-block:: Solidity
.. code-block:: solidity
// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.5.0 <0.9.0;

View File

@ -26,19 +26,12 @@ def remix_code_url(source_code, language, solidity_version):
def build_remix_link_node(url):
link_icon_node = docutils.nodes.inline()
link_icon_node.set_class('link-icon')
link_text_node = docutils.nodes.inline(text="open in Remix")
link_text_node.set_class('link-text')
reference_node = docutils.nodes.reference('', '', internal=False, refuri=url)
reference_node = docutils.nodes.reference('', 'open in Remix', internal=False, refuri=url, target='_blank')
reference_node.set_class('remix-link')
reference_node += [link_icon_node, link_text_node]
paragraph_node = docutils.nodes.paragraph()
paragraph_node.set_class('remix-link-container')
paragraph_node += reference_node
paragraph_node.append(reference_node)
return paragraph_node
@ -49,22 +42,24 @@ def insert_remix_link(app, doctree, solidity_version):
for literal_block_node in doctree.traverse(docutils.nodes.literal_block):
assert 'language' in literal_block_node.attributes
language = literal_block_node.attributes['language'].lower()
if language in ['solidity', 'yul']:
text_nodes = list(literal_block_node.traverse(docutils.nodes.Text))
assert len(text_nodes) == 1
if language not in ['solidity', 'yul']:
continue
remix_url = remix_code_url(text_nodes[0], language, solidity_version)
url_length = len(remix_url.encode('utf-8'))
if url_length > MAX_SAFE_URL_LENGTH:
logger.warning(
"Remix URL generated from the code snippet exceeds the maximum safe URL length "
" (%d > %d bytes).",
url_length,
MAX_SAFE_URL_LENGTH,
location=(literal_block_node.source, literal_block_node.line),
)
text_nodes = list(literal_block_node.traverse(docutils.nodes.Text))
assert len(text_nodes) == 1
insert_node_before(literal_block_node, build_remix_link_node(remix_url))
remix_url = remix_code_url(text_nodes[0], language, solidity_version)
url_length = len(remix_url.encode('utf-8'))
if url_length > MAX_SAFE_URL_LENGTH:
logger.warning(
"Remix URL generated from the code snippet exceeds the maximum safe URL length "
" (%d > %d bytes).",
url_length,
MAX_SAFE_URL_LENGTH,
location=(literal_block_node.source, literal_block_node.line),
)
insert_node_before(literal_block_node, build_remix_link_node(remix_url))
def setup(app):

View File

@ -58,7 +58,7 @@ The following example shows a contract and a function using all available tags.
This may change in the future.
.. code-block:: Solidity
.. code-block:: solidity
// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.8.2 < 0.9.0;

View File

@ -73,7 +73,7 @@ Tutorial
Overflow
========
.. code-block:: Solidity
.. code-block:: solidity
// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.8.0;
@ -122,7 +122,7 @@ Here, it reports the following:
If we add ``require`` statements that filter out overflow cases,
the SMTChecker proves that no overflow is reachable (by not reporting warnings):
.. code-block:: Solidity
.. code-block:: solidity
// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.8.0;
@ -160,7 +160,7 @@ Since ``f`` is indeed monotonically increasing, the SMTChecker proves that our
property is correct. You are encouraged to play with the property and the function
definition to see what results come out!
.. code-block:: Solidity
.. code-block:: solidity
// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.8.0;
@ -182,7 +182,7 @@ The following code searches for the maximum element of an unrestricted array of
numbers, and asserts the property that the found element must be greater or
equal every element in the array.
.. code-block:: Solidity
.. code-block:: solidity
// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.8.0;
@ -216,7 +216,7 @@ All the properties are correctly proven safe. Feel free to change the
properties and/or add restrictions on the array to see different results.
For example, changing the code to
.. code-block:: Solidity
.. code-block:: solidity
// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.8.0;
@ -268,7 +268,7 @@ Let us place a robot at position (0, 0). The robot can only move diagonally, one
and cannot move outside the grid. The robot's state machine can be represented by the smart contract
below.
.. code-block:: Solidity
.. code-block:: solidity
// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.8.0;
@ -319,7 +319,7 @@ We can also trick the SMTChecker into giving us a path to a certain position we
think might be reachable. We can add the property that (2, 4) is *not*
reachable, by adding the following function.
.. code-block:: Solidity
.. code-block:: solidity
function reach_2_4() public view {
assert(!(x == 2 && y == 4));
@ -368,7 +368,7 @@ In some cases, it is possible to automatically infer properties over state
variables that are still true even if the externally called code can do
anything, including reenter the caller contract.
.. code-block:: Solidity
.. code-block:: solidity
// SPDX-License-Identifier: GPL-3.0
pragma solidity >=0.8.0;