Skip to content

Commit

Permalink
Website: Human-friendly preamble (#6017)
Browse files Browse the repository at this point in the history
* Website: Human-friendly preamble

* Fix syntax error

* Fix more syntax errors

* Indicate authors a little better

* Fix small typo

* Fix another syntax error

* Make use of blockquotes for withdraw reason

* Remove redunant/removed items

* Add additional linebreak

* Include bootstrap CSS

* Move to correct folder

* Add responsive meta tag

* Badges fade on hover

* Commit changes so far

* Temporarily delete integrities while in development

* Delete custom-head.html

* Update eip.html

* Update eip.html

* Update style.scss

* Remove bootstrap references

* Use remove theme that adds markdown

* Use regular minima again

* Add bootstrap styling

* Remove MathJax and bootstrap from eips rendering

* ... and place it in the head

* Fix typos

* Make header work with bootstrap

* Add category badges

* Update styles

* Fix integrities

* Upgrade to mathjax v3

* Update style.scss

* Use correct mathjax integrity

* Change badge color scheme

* Move badges to before title

* Always link to discussion

* Automatically open discussion links in new tab

* Reorder preamble items & fix some rendering issues

* Fix page title for ERCs

* Add descriptions

* @SamWilsn's authorlist suggestion

* Some changes that @SamWilsn suggested

* Update authorlist to use no break spaces

* Make data wrap better & center-align discussion link

* Move @ into GitHub link

* Actually center link

* Use table layout instead of an actual table

* Fix table formatting

* Go back to normal table layout

* Add magic sauce

* Add unknown magical @SamWilsn code

I hope you know what you're doing

Co-authored-by: Sam Wilson <[email protected]>

* TIL there IS an else tag

* 🤦‍♂️🤦‍♂️ Double facepalm

* Add inline svg style

* Use inline SVG styling & add discussion bubble

* Remove third typo

* Add styling to make SVG links a bit better

* Add no-underline class

* Add no-underline class to icon links

* Add padding to footer to fix some styling issues

* Target the right class

* Fix footer

* Use different target for footer fix

* Final(tm) footer fix

* Use Sam's magic answer with SCSS and see how it turns out

* Fix it

* Update content-width to 100%

* Oops typo

* Make icons a tad bit smaller

* Make badges a bit bigger

* Add EIP- prefix to requires items

TODO: maybe use ERC prefix when needed?

* Fix width

* Lower font size

Co-authored-by: Sam Wilson <[email protected]>
  • Loading branch information
Pandapip1 and SamWilsn authored Jan 25, 2023
1 parent d65ccef commit b216982
Show file tree
Hide file tree
Showing 6 changed files with 187 additions and 92 deletions.
4 changes: 2 additions & 2 deletions _includes/authorlist.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
{%- for author in authors -%}
{%- if author contains "<" -%}
{%- assign authorparts=author|split:"<" -%}
<a href="mailto:{{authorparts[1]|remove:">"}}">{{authorparts[0]|strip}}</a>
{{authorparts[0]|strip}}&nbsp;&lt;<a href="mailto:{{authorparts[1]|remove:">"}}">{{authorparts[1]|remove:">"}}</a>&gt;
{%- elsif author contains "(@" -%}
{%- assign authorparts=author|split:"(@" -%}
<a href="https://github.com/{{authorparts[1]|remove:")"}}">{{authorparts[0]|strip}}</a>
{{authorparts[0]|strip}}&nbsp;(<a href="https://github.com/{{authorparts[1]|remove:")"}}">@{{authorparts[1]|remove:")"}}</a>)
{%- else -%}
{{author}}
{%- endif -%}
Expand Down
2 changes: 1 addition & 1 deletion _includes/eipnums.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% assign eips=include.eips|split:"," %}
{% for eipnum in eips %}
<a href="{{eipnum|strip|prepend:"eip-" }}">{{eipnum|strip}}</a>{% if forloop.last == false %}, {% endif %}
<a href="{{eipnum|strip|prepend:"eip-" }}">EIP-{{eipnum|strip}}</a>{% if forloop.last == false %}, {% endif %}
{% endfor %}
35 changes: 32 additions & 3 deletions _includes/head.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,13 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
{% if page.layout == "eip" %}
<title>EIP-{{ page.eip }}: {{ page.title | escape }}</title>
<meta property="og:title" content="EIP-{{ page.eip }}: {{ page.title | escape }}" />
{% if page.category == "ERC" %}
<title>ERC-{{ page.eip }}: {{ page.title | escape }}</title>
<meta propery="og:title" content="ERC-{{ page.eip }}: {{ page.title | escape }}" />
{% else %}
<title>EIP-{{ page.eip }}: {{ page.title | escape }}</title>
<meta property="og:title" content="EIP-{{ page.eip }}: {{ page.title | escape }}" />
{% endif %}
<meta name="description" content="{{page.description | escape }}" />
<meta property="og:description" content="{{page.description | escape }}" />
<meta name="twitter:description" content="{{page.description | escape }}" />
Expand Down Expand Up @@ -36,5 +41,29 @@
</script>
<link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}" />
{%- feed_meta -%}
<script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js?config=TeX-AMS-MML_HTMLorMML" integrity="sha256-nlrDrBTHxJJlDDX22AS33xYI1OJHnGMDhiYMSe2U0e0=" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", (event) => {
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
});
</script>
<script type="text/javascript">
window.MathJax = {
loader: {
load: ['input/tex-base', 'output/chtml', 'ui/lazy']
},
tex: {
inlineMath: [['$', '$']],
displayMath: [['$$', '$$']],
processEscapes: true,
processEnvironments: false,
processRefs: false
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-mml-chtml.js" integrity="sha384-/1zmJ1mBdfKIOnwPxpdG6yaRrxP6qu3eVYm0cz2nOx+AcL4d3AqEFrwcqGZVVroG" crossorigin="anonymous"></script>
</head>
29 changes: 29 additions & 0 deletions _includes/header.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<header class="site-header" role="banner">
<div class="wrapper">
{%- assign default_paths = site.pages | map: "path" -%}
{%- assign page_paths = site.header_pages | default: default_paths -%}
<a class="site-title" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>

{%- if page_paths -%}
<nav class="site-nav d-flex">
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger">
<span class="menu-icon">
<svg viewBox="0 0 18 15" width="18px" height="15px">
<path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
</svg>
</span>
</label>

<div class="trigger row p-2">
{%- for path in page_paths -%}
{%- assign my_page = site.pages | where: "path", path | first -%}
{%- if my_page.title -%}
<a class="page-link col" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
{%- endif -%}
{%- endfor -%}
</div>
</nav>
{%- endif -%}
</div>
</header>
144 changes: 88 additions & 56 deletions _layouts/eip.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,59 +2,103 @@
layout: default
---

{% if page.status == "Draft" %}
<div class="draft">
⚠️ This EIP is not recommended for general use or implementation as it is likely to change.
</div>
{% elsif page.status == "Review" %}
<div class="review">
📖 This EIP is in the review stage. It is subject to changes and feedback is appreciated.
</div>
{% elsif page.status == "Last Call" %}
<div class="lastcall">
📢 This EIP is in the last call for review stage. The authors wish to finalize the EIP and appreciate feedback.
</div>
{% elsif page.status == "Stagnant" %}
<div class="stagnant">
🚧 This EIP had no activity for at least 6 months.
</div>
{% elsif page.status == "Withdrawn" %}
<div class="withdrawn">
🛑 This EIP has been withdrawn.
</div>
{% endif %}
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="bi-megaphone-fill" fill="currentColor" viewBox="0 0 16 16">
<title>Alert</title>
<path d="M13 2.5a1.5 1.5 0 0 1 3 0v11a1.5 1.5 0 0 1-3 0v-11zm-1 .724c-2.067.95-4.539 1.481-7 1.656v6.237a25.222 25.222 0 0 1 1.088.085c2.053.204 4.038.668 5.912 1.56V3.224zm-8 7.841V4.934c-.68.027-1.399.043-2.008.053A2.02 2.02 0 0 0 0 7v2c0 1.106.896 1.996 1.994 2.009a68.14 68.14 0 0 1 .496.008 64 64 0 0 1 1.51.048zm1.39 1.081c.285.021.569.047.85.078l.253 1.69a1 1 0 0 1-.983 1.187h-.548a1 1 0 0 1-.916-.599l-1.314-2.48a65.81 65.81 0 0 1 1.692.064c.327.017.65.037.966.06z"/>
</symbol>
<symbol id="bi-code" fill="currentColor" viewBox="0 0 16 16">
<title>Source</title>
<path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/>
</symbol>
<svg id="bi-chat" fill="currentColor" viewBox="0 0 16 16">
<title>Discuss</title>
<path d="M2.678 11.894a1 1 0 0 1 .287.801 10.97 10.97 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8.06 8.06 0 0 0 8 14c3.996 0 7-2.807 7-6 0-3.192-3.004-6-7-6S1 4.808 1 8c0 1.468.617 2.83 1.678 3.894zm-.493 3.905a21.682 21.682 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a9.68 9.68 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9.06 9.06 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105z"/>
</svg>
</svg>

<div class="home">
<h1 class="page-heading">
EIP-{{ page.eip | xml_escape }}: {{ page.title | xml_escape }}
<a href="{{site.github.repository_url}}/blob/master/{{page.path}}"><svg role="img" aria-label="Source" xmlns="https://www.w3.org/2000/svg" width="14" height="16" viewBox="0 0 14 16"><title>Source</title><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"/></svg></a>
</h1>
<h3>{{ page.description | xml_escape }}</h3>
<table>
<tr><th>Author</th><td>{% include authorlist.html authors=page.author %}</td></tr>
{% if page["discussions-to"] != undefined %}
<tr><th>Discussions-To</th><td><a href="{{ page["discussions-to"] | uri_escape }}">{{ page["discussions-to"] | xml_escape }}</a></td></tr>
<span class="h5">
{% if page.status == "Stagnant" %}
<span class="badge text-light bg-danger" data-bs-toggle="tooltip" data-bs-title="This EIP had no activity for at least 6 months. This EIP should not be used.">🚧 Stagnant</span>
{% endif %}
<tr><th>Status</th><td>{{ page.status | xml_escape }}
{% if page.last-call-deadline != undefined %}
<tr><th>Last Call Deadline</th><td>{{ page.last-call-deadline | xml_escape }}</td></tr>
{% if page.status == "Withdrawn" %}
<span class="badge text-light bg-danger" data-bs-toggle="tooltip" data-bs-title="This EIP has been withdrawn, and should not be used.">🛑 Withdrawn</span>
{% endif %}
</td></tr>
<tr><th>Type</th><td>{{ page.type | xml_escape }}</td></tr>
{% if page.category != undefined %}
<tr><th>Category</th><td>{{ page.category | xml_escape }}</td></tr>
{% if page.status == "Draft" or page.status == "Review" %}
<span class="badge text-light bg-warning" data-bs-toggle="tooltip" data-bs-title="This EIP is not yet recommended for general use or implementation, as it is subject to normative (breaking) changes.">⚠️ {{ page.status }}</span>
{% endif %}
<tr><th>Created</th><td>{{ page.created | xml_escape }}</td></tr>
{% if page.updated != undefined %}
<tr><th>Updated</th><td>{{ page.updated | xml_escape }}</td></tr>
{% if page.status == "Last Call" %}
<span class="badge text-light bg-success" data-bs-toggle="tooltip" data-bs-title="This EIP is in the last call for review stage. The authors wish to finalize the EIP and ask you to provide feedback.">📢 Last Call</span>
{% endif %}
{% if page.requires != undefined %}
<tr><th>Requires</th><td>{% include eipnums.html eips=page.requires %}</td></tr>
{% if page.category == "ERC" %}
<a class="badge text-light bg-primary" data-bs-toggle="tooltip" data-bs-title="Application-level standards and conventions, including contract standards such as token standards, name registries, URI schemes, library/package formats, and wallet formats." href="../erc">Standards Track: ERC</a>
{% elsif page.category == "Interface" %}
<a class="badge text-light bg-primary" data-bs-toggle="tooltip" data-bs-title="Improvements around client API/RPC specifications and standards, and also certain language-level standards like method names and contract ABIs." href="../interface">Standards Track: Interface</a>
{% elsif page.category == "Networking" %}
<a class="badge text-light bg-primary" data-bs-toggle="tooltip" data-bs-title="Improvements around devp2p and Light Ethereum Subprotocol, as well as proposed improvements to network protocol specifications of whisper and swarm." href="../networking">Standards Track: Networking</a>
{% elsif page.category == "Core" %}
<a class="badge text-light bg-primary" data-bs-toggle="tooltip" data-bs-title="Improvements requiring a consensus fork, as well as changes that are not necessarily consensus critical but may be relevant to “core dev” discussions." href="../core">Standards Track: Core</a>
{% elsif page.type == "Informational" %}
<a class="badge text-light bg-primary" data-bs-toggle="tooltip" data-bs-title="Describes an Ethereum design issue, or provides general guidelines or information to the Ethereum community, but does not propose a new feature. Informational EIPs do not necessarily represent Ethereum community consensus or a recommendation, so users and implementers are free to ignore Informational EIPs or follow their advice." href="../informational">Informational</a>
{% elsif page.type == "Meta" %}
<a class="badge text-light bg-primary" data-bs-toggle="tooltip" data-bs-title="Describes a process surrounding Ethereum or proposes a change to (or an event in) a process. " href="../meta">Meta</a>
{% endif %}
{% if page["withdrawal-reason"] != undefined %}
<tr><th>Withdrawal reason</th><td>{{ page["withdrawal-reason"] | xml_escape }}</td></tr>
</span>
<h1 class="page-heading">
{% if page.category == "ERC" %}
ERC-{{ page.eip | xml_escape }}: {{ page.title | xml_escape }}
{% elsif page.category != "ERC" %}
EIP-{{ page.eip | xml_escape }}: {{ page.title | xml_escape }}
{% endif %}
<a href="{{ page["discussions-to"] | uri_escape }}" class="no-underline">
<svg role="img" aria-label="Discuss" class="inline-svg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 16 16">
<use xlink:href="#bi-chat"/>
</svg>
</a>
<a href="{{site.github.repository_url}}/blob/master/{{page.path}}" class="no-underline">
<svg role="img" aria-label="Source" class="inline-svg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 16 16">
<use xlink:href="#bi-code"/>
</svg>
</a>
</h1>
<h3>{{ page.description | xml_escape }}</h3>
<table class="table table-borderless preamble">
<tbody>
<tr>
<th scope="row">Authors</th>
<td>{% include authorlist.html authors=page.author %}</td>
</tr>
{% if page.created != undefined %}
<tr>
<th scope="row">Created</th>
<td>{{ page.created }}</td>
</tr>
{% endif %}
{% if page.status != "Review" and page.status != "Last Call" and page.status != "Final" and page["discussions-to"] != undefined %}
<tr>
<th scope="row">Discussion Link</th>
<td><a href="{{ page["discussions-to"] | uri_escape }}" target="__blank">{{ page["discussions-to"] | xml_escape }}</a></td>
</tr>
{% endif %}
{% if page.requires != undefined %}
<tr>
<th scope="row">Requires</th>
<td>{% include eipnums.html eips=page.requires %}</td>
</tr>
{% endif %}
</tbody>
</table>
<br/>

{% if page.status == "Review" or page.status == "Last Call" %}
<div class="alert alert-primary d-flex align-items-center" role="alert">
<svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:" style="width:2.5em;height:2.5em;"><use xlink:href="#bi-megaphone-fill"/></svg>
<div class="text-center w-100">
<a href="{{ page["discussions-to"] | uri_escape }}" target="__blank">This EIP is in the process of being peer-reviewed. If you are interested in this EIP, please participate using this discussion link.</a>
</div>
</div>
{% endif %}

<div class="toc">
<h2>Table of Contents</h2>
Expand Down Expand Up @@ -92,15 +136,3 @@ <h2>Citation</h2>
"copyrightYear": "{{ page.created | date: "%Y" }}"
}
</script>
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.3/MathJax.js?config=TeX-MML-AM_CHTML" integrity="sha512-bzXk9PaBIjgXcM+0Z7wbOE4AAMnmMoecyB8zX3irP4IRUDNGMmWXoLiRvEDeeq0RfhLA0eOFvB3wPFzBvWcVdw==" crossorigin="anonymous">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [["$", "$"]],
displayMath: [["$$", "$$"]],
processEscapes: true
},
asciimath2jax: {
delimiters: [] // Disable asciimath
}
});
</script>
65 changes: 35 additions & 30 deletions assets/css/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
# Only the main Sass file needs front matter (the dashes are enough)
---

$content-width: 960px;
$content-width: 1152px;

@import 'minima';

Expand Down Expand Up @@ -30,10 +30,22 @@ $content-width: 960px;
color: #111;
}

.table-borderless, .table-borderless * {
border-style : hidden !important; // !important To override Jekyll styling
background-color: rgba(0,0,0,0) !important;
}

table.preamble > tbody > tr > :not(:first-child) {
width: 100%;
}

table.preamble > tbody > tr > :first-child {
white-space: nowrap;
}

a, a:link {
color: #726E97;
text-decoration: none;
transition: 0.5s;
}

a:visited {
Expand All @@ -42,44 +54,37 @@ a:visited {

a:hover, a:active {
color: #7F557D;
box-shadow: 0 3px 0 #7F557D;
text-decoration: underline;
}

.status {
border-radius: 6px;
line-height: 18px;
overflow: hidden;
padding: 12px;
display: inline-block;
margin-bottom: 15px;
.site-footer, .site-footer * {
box-sizing: content-box !important; // !important To override bootstrap styling
}

.draft {
@extend .status;
background-color: #fffbea;
border: solid 1px #f1c40f;
.no-underline {
text-decoration: none !important; // !important To override previous <a> styling
}

.review {
@extend .status;
background-color: #f0f7fb;
border: solid 1px #3498db;
.badge:hover {
filter: brightness(75%);
transition: all 0.25s ease;
}

.lastcall {
@extend .status;
background-color: #e7f6f0;
border: solid 1px #27ae60;
h1 {
vertical-align: middle;
}

.stagnant {
@extend .status;
background-color: #ffdead;
border: solid 1px #ff6700;
h1 a {
height: 1em;
display: inline-block;
vertical-align: baseline;
}

.withdrawn {
@extend .status;
background-color: #f9e7e5;
border: solid 1px #c0392b;
.inline-svg {
display: inline-block;
vertical-align: bottom;
fill: currentColor;
width: 1.5ex;
height: 100%;
object-fit: cover;
}

0 comments on commit b216982

Please sign in to comment.