[V2:01] Prepare Theme for Local Build Rendering

config.toml

@@ -22,15 +22,19 @@ generate_feeds = true
 internal_level = "warn"
 
 [markdown]
-# Whether to do syntax highlighting
-# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
-highlight_code = true
+bottom_footnotes = true
 
-highlight_theme = "css"
+[markdown.highlighting]
+error_on_missing_language = true
 
-highlight_themes_css = [
-    { theme = "base16-ocean-dark", filename = "assets/css/syntax-theme-dark.css" },
-    { theme = "base16-ocean-light", filename = "assets/css/syntax-theme-light.css" },
+style = "class"
+
+light_theme = "github-light"
+dark_theme = "github-dark"
+
+extra_grammars = [
+    "syntaxes/abnf/ABNF.json",
+    "syntaxes/csl-json/CSL-JSON.json",
 ]
 
 [extra.github]

content/_index.md

@@ -1,13 +1,15 @@
 +++
+[extra]
+homepage_badges = [
+  { href = "https://discord.gg/Nz6rtfJ8Cu", image = "https://dcbadge.limes.pink/api/server/Nz6rtfJ8Cu?style=flat", alt = "Badge for EIP Editor Discord channel" },
+  { href = "https://discord.gg/EVTQ9crVgQ", image = "https://dcbadge.limes.pink/api/server/EVTQ9crVgQ?style=flat", alt = "Badge for Ethereum R&D Discord channel" },
+  { href = "https://discord.gg/mRzPXmmYEA", image = "https://dcbadge.limes.pink/api/server/mRzPXmmYEA?style=flat", alt = "Badge for Ethereum Wallets Discord channel" },
+  { href = "/atom.xml", image = "https://img.shields.io/badge/rss-Everything-red.svg", alt = "RSS feed for everything" },
+  { href = "/status/last-call/atom.xml", image = "https://img.shields.io/badge/rss-Last%20Calls-red.svg", alt = "RSS feed for last calls" },
+]
 +++
 
-<h1 class="page-heading">EIPs
-  <a href="https://discord.io/EthCatHerders"><img src="https://dcbadge.vercel.app/api/server/Nz6rtfJ8Cu?style=flat" alt="Discord channel for ECH eip-editer"></a>
-  <a href="https://discord.gg/EVTQ9crVgQ"><img src="https://dcbadge.vercel.app/api/server/EVTQ9crVgQ?style=flat" alt="Discord channel for Eth R&D eip-editing"></a>
-  <a href="https://discord.gg/mRzPXmmYEA"><img src="https://dcbadge.vercel.app/api/server/mRzPXmmYEA?style=flat" alt="Discord server for discussions about proposals that impact Ethereum wallets"></a>
-  <a href="/atom.xml"><img src="https://img.shields.io/badge/rss-Everything-red.svg" alt="RSS"></a>
-  <a href="/status/last-call/atom.xml"><img src="https://img.shields.io/badge/rss-Last Calls-red.svg" alt="RSS"></a>
-</h1>
+# EIPs
 
 <p>Ethereum Improvement Proposals (EIPs) describe standards for the Ethereum platform, including core protocol specifications, client APIs, and contract standards. Network upgrades are discussed separately in the <a target="_blank" href="https://github.com/ethereum/pm/">Ethereum Project Management</a> repository.</p>
 

sass/assets/css/style.scss

@@ -33,6 +33,34 @@ $content-width: 1152px;
   vertical-align: baseline;
 }
 
+.homepage-badges {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  margin: -0.25rem 0 1.25rem;
+}
+
+.homepage-badge-link {
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+}
+
+.homepage-badge-link:hover {
+  text-decoration: none;
+}
+
+.homepage-badge-link img {
+  display: block;
+  max-width: 100%;
+  height: 20px;
+}
+
+.homepage-badge-link .badge {
+  font-size: 0.875rem;
+}
+
 .footer-col-wrapper {
   color: #111;
 }

templates/eip.html

@@ -230,11 +230,17 @@ <h1 class="page-heading">
 					<th scope="row">Requires</th>
 					<td>
 						{% for required in page.extra.requires -%}
+						{% if required is starting_with("http") %}
+						{% set required_segment = required | split(pat="/") | last %}
+						{% set required_label = required_segment | replace(from="eip-", to="EIP-") | replace(from="erc-", to="ERC-") %}
+						<a href="{{ required | safe }}">{{ required_label }}</a>
+						{% else %}
 						{% set path = required | trim_start_matches(pat="@/") %}
 						{% set page = get_page(path=path) %}
 						<a href="{{ get_url(path=required) }}" title="{{ page.title }}">
 						{{ macros::eip_number(page=page) }}
 						</a>
+						{% endif %}
 						{%- if not loop.last %}, {% endif -%}
 						{%- endfor %}
 					</td>

templates/index.html

@@ -1,5 +1,17 @@
 {% extends "base.html" %}
+{% import "macros.html" as macros %}
 
 {% block content %}
+{% if section.extra.homepage_badges %}
+{% set badge_markup = macros::homepage_badges(badges=section.extra.homepage_badges) %}
+{% set content_with_badges = section.content | replace(from="</h1>", to="</h1>" ~ badge_markup) %}
+{% if content_with_badges == section.content %}
+{{ badge_markup | safe }}
 {{ section.content | safe }}
+{% else %}
+{{ content_with_badges | safe }}
+{% endif %}
+{% else %}
+{{ section.content | safe }}
+{% endif %}
 {% endblock content %}

templates/macros.html

@@ -1,7 +1,27 @@
 {%- macro eip_number(page) -%}
 {%- if page.extra.category and page.extra.category == "ERC" -%}
-	ERC-
+		ERC-
 {%- else -%}
-	EIP-
+		EIP-
 {%- endif -%}{{- page.extra.number -}}
 {%- endmacro eip_number -%}
+
+{%- macro homepage_badges(badges) -%}
+{%- if badges -%}
+<div class="homepage-badges" aria-label="Homepage links">
+	{%- for badge in badges -%}
+	<a class="homepage-badge-link" href="{{ badge.href }}">
+		{%- if badge.image -%}
+		<img
+			src="{{ badge.image }}"
+			alt="{{ badge.alt | default(value=badge.label | default(value='Homepage badge')) }}"
+			loading="lazy"
+		/>
+		{%- else -%}
+		<span class="badge text-bg-secondary">{{ badge.label }}</span>
+		{%- endif -%}
+	</a>
+	{%- endfor -%}
+</div>
+{%- endif -%}
+{%- endmacro homepage_badges -%}

theme.toml

@@ -1,9 +1,9 @@
 name = "eips-theme"
 description = "A theme for Ethereum Improvement Proposals"
 license = "MIT"
-homepage = "https://github.com/eips-wg/eips-theme"
+homepage = "https://github.com/eips-wg/theme"
 # The minimum version of Zola required
-min_version = "0.17.2"
+min_version = "0.22.1"
 # An optional live demo URL
 demo = "https://eips-wg.github.io/eips-theme"