).
+ %details.docs-mobile-toc
+ %summary.docs-mobile-toc-summary
+ %span.docs-mobile-toc-label
+ = icon(:bars_staggered, 'docs-mobile-toc-icon')
+ Contents
+ = icon(:chevron_down, 'docs-mobile-toc-chevron')
+ .docs-mobile-toc-body
+ = render('sidebar')
+
+ -# Docs frame: nav rail docked to the viewport's left edge (tinted panel,
+ full column height), article centered in the remaining width — the
+ established docs-site layout (ReadTheDocs, MDN, Stripe).
+ #docs-content
+ %aside.docs-desktop-aside
+ .docs-sidebar-sticky
+ = render('sidebar')
+
+ %main.docs-main
-if ENV['NANOC_ENV'] == 'development'
.info Development Mode
- if description.nil?
@@ -62,9 +92,8 @@
- else
.info
%p= description
- .documentation_content{id: identifier }
- %a.hidden-md.hidden-lg{href: '#sidebar'} Jump To Navigation
+ .docs-article{id: identifier}
- if redirect_to
.warning
%p Redirecting to #{link_to redirect_to, redirect_to}.
@@ -80,15 +109,54 @@
#comments
-# = render 'comments' unless disable_comments?
- = render('sidebar')
+ %footer.docs-footer
+ .container.docs-footer-body
+ .docs-footer-grid
+ .docs-footer-about
+ %a.docs-footer-brand{href: "https://www.cloudmailin.com"}
+ CloudMailin
+ %p.docs-footer-tagline
+ Developer-friendly email API for inbound and outbound email processing.
+ %div
+ %h3.docs-footer-heading Documentation
+ %ul.docs-footer-links
+ %li= link_to 'Getting Started', '/getting_started/', class: 'docs-footer-link'
+ %li= link_to 'HTTP POST Formats', '/http_post_formats/', class: 'docs-footer-link'
+ %li= link_to 'Receiving Email', '/receiving_email/http_status_codes/', class: 'docs-footer-link'
+ %li= link_to 'Outbound (Sending)', '/outbound/', class: 'docs-footer-link'
+ %div
+ %h3.docs-footer-heading CloudMailin
+ %ul.docs-footer-links
+ %li= link_to 'cloudmailin.com', 'https://www.cloudmailin.com', class: 'docs-footer-link'
+ %li= link_to 'Plans and Pricing', 'https://www.cloudmailin.com/plans-and-pricing', class: 'docs-footer-link'
+ %li= link_to 'Contact Support', 'https://www.cloudmailin.com/contact_us', class: 'docs-footer-link'
+ .docs-footer-divider
+ .container.docs-footer-legal
+ %p.docs-footer-copyright
+ © #{Time.now.year} CloudMailin.com
- %footer#footer
- #details
- © cloudmailin.com
+ -# Sidebar "Expand all / Collapse all" toggle. The sidebar partial renders
+ in both the desktop aside and the mobile drawer, so there can be two
+ toggles and two sets of — operate on all of them.
+ :plain
+
- -# 
- / Thanks to https://github.com/tholman/github-corners
-
- unless ENV['NANOC_ENV'] == 'development'
= render 'clickcease'
= render 'analytics'
diff --git a/layouts/sidebar.haml b/layouts/sidebar.haml
index 4e0c92f..be45dcd 100644
--- a/layouts/sidebar.haml
+++ b/layouts/sidebar.haml
@@ -1,81 +1,96 @@
-#sidebar
- %h2.hidden-md.hidden-lg Navigation
- %ul
- %li= link_to 'Home', '/'
- %li
- Getting Started (Receiving)
- %ul
- %li= link_to 'Introduction', '/getting_started/'
- - for item in items_for_section('getting_started/receiving_email')
- %li= link_to title(item), item
- %li= link_to 'FAQs', '/getting_started/faqs/'
- %li= link_to 'Getting Started Sending Email', '/outbound/'
- %li
- HTTP POST Formats
- %ul
- %li= link_to 'Introduction to POST Formats', '/http_post_formats/'
- %li= link_to 'JSON (Normalized)', '/http_post_formats/json_normalized/'
- %li= link_to 'Multipart (Normalized)', '/http_post_formats/multipart_normalized/'
- %li= link_to 'Raw Message Format', '/http_post_formats/raw/'
- %li= link_to 'JSON Format', '/http_post_formats/json/', class: 'deprecated'
- %li= link_to 'Multipart Format', '/http_post_formats/multipart/', class: 'deprecated'
- %li= link_to 'Original Format', '/http_post_formats/original/', class: 'deprecated'
- -# %li= link_to 'Examples', '/receiving_email/examples/'
- %li
- Receiving Email
- %ul
- %li= link_to 'HTTP Status Codes', '/receiving_email/http_status_codes/'
- %li= link_to 'Using your own Domain', '/receiving_email/forwarding_and_custom_domains/'
- %li= link_to 'Store Attachments in Cloud Storage', '/receiving_email/store-email-attachments-in-s3-azure-google-storage/'
- %li= link_to 'Store Full Email in Cloud Storage', '/receiving_email/store-full-email-in-aws-cloud-storage/'
- %li= link_to 'Reply Parsing', '/features/extracting_replies_from_email/'
- %li
- = link_to 'Callbacks', '/features/callbacks/'
- %ul
- %li= link_to 'Authorization Callbacks', '/features/callbacks/#authorization-callbacks'
- %li= link_to 'Error Callbacks', '/features/callbacks/#error-callbacks'
- %li= link_to 'SPF (Sender Policy Framework)', '/features/spf/'
- %li= link_to 'DKIM Verification', '/features/dkim/'
- %li= link_to 'DMARC Verification', '/features/dmarc-verification/'
- %li= link_to 'Delivery Status API', '/features/delivery_status_api/'
- %li= link_to 'Securing HTTP Posts', '/receiving_email/securing_your_email_url_target/'
- %li= link_to 'IMAP Polling (Legacy Systems)', '/features/imap_collectors/'
- %li= link_to 'SPAM Filtering', '/features/spam_filtering/'
- %li= link_to 'Virus Scanning', '/features/virus_scanning/'
- %li= link_to 'IP Address List', '/receiving_email/ip_addresses/'
- %li
- = link_to 'Examples', '/receiving_email/examples/'
- - if in_section?('receiving_email/examples', include_self: true)
- %ul
- - items_for_section('receiving_email/examples').each do |item|
- %li= link_to title(item), item
- %li
- Local Development and Testing
- %ul
- %li= link_to 'Local Development / Debugger', '/receiving_email/localhost_debugger/'
- %li= link_to 'Test Driven Development', '/receiving_email/test_driven_development/'
+.sidebar-nav
+ .sidebar-top-row
+ = link_to 'Home', '/', class: sidebar_link_class('/')
+ %button.sidebar-expand-toggle{type: 'button', data: { sidebar_toggle: true }}= sidebar_expand_all? ? 'Collapse all' : 'Expand all'
- %li
- Outbound (Sending)
- %ul
- %li= link_to 'Introduction', '/outbound/'
- %li= link_to 'Getting Started', '/outbound/getting_started/'
- %li= link_to 'DKIM Signing', '/outbound/dkim/'
- %li= link_to 'DMARC Setup', '/outbound/dmarc/'
- %li= link_to 'Priorities and Tagging', '/outbound/priorities_and_tags/'
- %li= link_to 'Email Layouts', '/outbound/email-layouts/'
- %li= link_to 'Email Health', '/outbound/email-health/'
- %li= link_to 'Sending Email via API', '/outbound/sending_email_via_json_api/'
- %li
- = link_to 'Sending Email with SMTP', '/outbound/sending_email_with_smtp/'
- %ul
- - if in_section?('outbound/', include_self: true)
- - items_for_section('outbound/examples').each do |item|
- %li= link_to title(item), item
- - else
- %li= link_to 'Examples', '/outbound/sending_email_with_smtp/#examples'
+ %details.sidebar-group{open: sidebar_section_open?('getting_started')}
+ %summary.sidebar-group-summary
+ %span Getting Started (Receiving)
+ = icon(:chevron_right, 'sidebar-group-chevron')
+ %ul.sidebar-items
+ %li= link_to 'Introduction', '/getting_started/', class: sidebar_link_class('/getting_started/')
+ - for item in items_for_section('getting_started/receiving_email')
+ %li= link_to title(item), item, class: sidebar_link_class(item)
+ %li= link_to 'FAQs', '/getting_started/faqs/', class: sidebar_link_class('/getting_started/faqs/')
+ %li= link_to 'Getting Started Sending Email', '/outbound/', class: sidebar_link_class('/outbound/')
- %li
- Guides
- %ul
- %li= link_to 'Verify DKIM is Working', '/guides/verify-dkim/'
+ %details.sidebar-group{open: sidebar_section_open?('http_post_formats')}
+ %summary.sidebar-group-summary
+ %span HTTP POST Formats
+ = icon(:chevron_right, 'sidebar-group-chevron')
+ %ul.sidebar-items
+ %li= link_to 'Introduction to POST Formats', '/http_post_formats/', class: sidebar_link_class('/http_post_formats/')
+ %li= link_to 'JSON (Normalized)', '/http_post_formats/json_normalized/', class: sidebar_link_class('/http_post_formats/json_normalized/')
+ %li= link_to 'Multipart (Normalized)', '/http_post_formats/multipart_normalized/', class: sidebar_link_class('/http_post_formats/multipart_normalized/')
+ %li= link_to 'Raw Message Format', '/http_post_formats/raw/', class: sidebar_link_class('/http_post_formats/raw/')
+ %li= link_to 'JSON Format', '/http_post_formats/json/', class: sidebar_link_class('/http_post_formats/json/', 'deprecated')
+ %li= link_to 'Multipart Format', '/http_post_formats/multipart/', class: sidebar_link_class('/http_post_formats/multipart/', 'deprecated')
+ %li= link_to 'Original Format', '/http_post_formats/original/', class: sidebar_link_class('/http_post_formats/original/', 'deprecated')
+
+ %details.sidebar-group{open: sidebar_section_open?('receiving_email')}
+ %summary.sidebar-group-summary
+ %span Receiving Email
+ = icon(:chevron_right, 'sidebar-group-chevron')
+ %ul.sidebar-items
+ %li= link_to 'HTTP Status Codes', '/receiving_email/http_status_codes/', class: sidebar_link_class('/receiving_email/http_status_codes/')
+ %li= link_to 'Using your own Domain', '/receiving_email/forwarding_and_custom_domains/', class: sidebar_link_class('/receiving_email/forwarding_and_custom_domains/')
+ %li= link_to 'Store Attachments in Cloud Storage', '/receiving_email/store-email-attachments-in-s3-azure-google-storage/', class: sidebar_link_class('/receiving_email/store-email-attachments-in-s3-azure-google-storage/')
+ %li= link_to 'Store Full Email in Cloud Storage', '/receiving_email/store-full-email-in-aws-cloud-storage/', class: sidebar_link_class('/receiving_email/store-full-email-in-aws-cloud-storage/')
+ %li= link_to 'Reply Parsing', '/features/extracting_replies_from_email/', class: sidebar_link_class('/features/extracting_replies_from_email/')
+ %li
+ = link_to 'Callbacks', '/features/callbacks/', class: sidebar_link_class('/features/callbacks/')
+ %ul.sidebar-items.sidebar-items--nested
+ %li= link_to 'Authorization Callbacks', '/features/callbacks/#authorization-callbacks', class: sidebar_link_class('/features/callbacks/#authorization-callbacks')
+ %li= link_to 'Error Callbacks', '/features/callbacks/#error-callbacks', class: sidebar_link_class('/features/callbacks/#error-callbacks')
+ %li= link_to 'SPF (Sender Policy Framework)', '/features/spf/', class: sidebar_link_class('/features/spf/')
+ %li= link_to 'DKIM Verification', '/features/dkim/', class: sidebar_link_class('/features/dkim/')
+ %li= link_to 'DMARC Verification', '/features/dmarc-verification/', class: sidebar_link_class('/features/dmarc-verification/')
+ %li= link_to 'Delivery Status API', '/features/delivery_status_api/', class: sidebar_link_class('/features/delivery_status_api/')
+ %li= link_to 'Securing HTTP Posts', '/receiving_email/securing_your_email_url_target/', class: sidebar_link_class('/receiving_email/securing_your_email_url_target/')
+ %li= link_to 'IMAP Polling (Legacy Systems)', '/features/imap_collectors/', class: sidebar_link_class('/features/imap_collectors/')
+ %li= link_to 'SPAM Filtering', '/features/spam_filtering/', class: sidebar_link_class('/features/spam_filtering/')
+ %li= link_to 'Virus Scanning', '/features/virus_scanning/', class: sidebar_link_class('/features/virus_scanning/')
+ %li= link_to 'IP Address List', '/receiving_email/ip_addresses/', class: sidebar_link_class('/receiving_email/ip_addresses/')
+ %li
+ = link_to 'Examples', '/receiving_email/examples/', class: sidebar_link_class('/receiving_email/examples/')
+ - if in_section?('receiving_email/examples', include_self: true)
+ %ul.sidebar-items.sidebar-items--nested
+ - items_for_section('receiving_email/examples').each do |item|
+ %li= link_to title(item), item, class: sidebar_link_class(item)
+
+ %details.sidebar-group{open: sidebar_section_open?('local_dev')}
+ %summary.sidebar-group-summary
+ %span Local Development and Testing
+ = icon(:chevron_right, 'sidebar-group-chevron')
+ %ul.sidebar-items
+ %li= link_to 'Local Development / Debugger', '/receiving_email/localhost_debugger/', class: sidebar_link_class('/receiving_email/localhost_debugger/')
+ %li= link_to 'Test Driven Development', '/receiving_email/test_driven_development/', class: sidebar_link_class('/receiving_email/test_driven_development/')
+
+ %details.sidebar-group{open: sidebar_section_open?('outbound')}
+ %summary.sidebar-group-summary
+ %span Outbound (Sending)
+ = icon(:chevron_right, 'sidebar-group-chevron')
+ %ul.sidebar-items
+ %li= link_to 'Introduction', '/outbound/', class: sidebar_link_class('/outbound/')
+ %li= link_to 'Getting Started', '/outbound/getting_started/', class: sidebar_link_class('/outbound/getting_started/')
+ %li= link_to 'DKIM Signing', '/outbound/dkim/', class: sidebar_link_class('/outbound/dkim/')
+ %li= link_to 'DMARC Setup', '/outbound/dmarc/', class: sidebar_link_class('/outbound/dmarc/')
+ %li= link_to 'Priorities and Tagging', '/outbound/priorities_and_tags/', class: sidebar_link_class('/outbound/priorities_and_tags/')
+ %li= link_to 'Email Layouts', '/outbound/email-layouts/', class: sidebar_link_class('/outbound/email-layouts/')
+ %li= link_to 'Email Health', '/outbound/email-health/', class: sidebar_link_class('/outbound/email-health/')
+ %li= link_to 'Sending Email via API', '/outbound/sending_email_via_json_api/', class: sidebar_link_class('/outbound/sending_email_via_json_api/')
+ %li
+ = link_to 'Sending Email with SMTP', '/outbound/sending_email_with_smtp/', class: sidebar_link_class('/outbound/sending_email_with_smtp/')
+ %ul.sidebar-items.sidebar-items--nested
+ - if in_section?('outbound/', include_self: true)
+ - items_for_section('outbound/examples').each do |item|
+ %li= link_to title(item), item, class: sidebar_link_class(item)
+ - else
+ %li= link_to 'Examples', '/outbound/sending_email_with_smtp/#examples', class: sidebar_link_class('/outbound/sending_email_with_smtp/#examples')
+
+ %details.sidebar-group{open: sidebar_section_open?('guides')}
+ %summary.sidebar-group-summary
+ %span Guides
+ = icon(:chevron_right, 'sidebar-group-chevron')
+ %ul.sidebar-items
+ %li= link_to 'Verify DKIM is Working', '/guides/verify-dkim/', class: sidebar_link_class('/guides/verify-dkim/')
diff --git a/lib/common_marker_filter.rb b/lib/common_marker_filter.rb
index 8f20592..6dfb32c 100644
--- a/lib/common_marker_filter.rb
+++ b/lib/common_marker_filter.rb
@@ -6,8 +6,6 @@ class CommonMarkerFilter < Nanoc::Filter
requires 'commonmarker'
class CustomHtmlRenderer < ::CommonMarker::HtmlRenderer
- STYLE = 'pastie'.freeze
-
def header(node)
block do
id = node.first.string_content.downcase.gsub(/[^\w]/, '-')
@@ -35,7 +33,10 @@ def code_block(node)
# lang = CGI.escapeHTML(node.fence_info)
lang = node.fence_info.split(/\s+/)[0]
lexer = ::Rouge::Lexer.find_fancy(node.fence_info) || ::Rouge::Lexers::PlainText.new
- formatter = ::Rouge::Formatters::HTMLInline.new(STYLE)
+ # Class-based (not inline-styled) output so the docs Tailwind CSS
+ # can recolor tokens for the dark terminal-motif code blocks. See
+ # tailwind/input.css for the token color rules.
+ formatter = ::Rouge::Formatters::HTML.new
out("
- / Thanks to https://github.com/tholman/github-corners
-
- unless ENV['NANOC_ENV'] == 'development'
= render 'clickcease'
= render 'analytics'
diff --git a/layouts/sidebar.haml b/layouts/sidebar.haml
index 4e0c92f..be45dcd 100644
--- a/layouts/sidebar.haml
+++ b/layouts/sidebar.haml
@@ -1,81 +1,96 @@
-#sidebar
- %h2.hidden-md.hidden-lg Navigation
- %ul
- %li= link_to 'Home', '/'
- %li
- Getting Started (Receiving)
- %ul
- %li= link_to 'Introduction', '/getting_started/'
- - for item in items_for_section('getting_started/receiving_email')
- %li= link_to title(item), item
- %li= link_to 'FAQs', '/getting_started/faqs/'
- %li= link_to 'Getting Started Sending Email', '/outbound/'
- %li
- HTTP POST Formats
- %ul
- %li= link_to 'Introduction to POST Formats', '/http_post_formats/'
- %li= link_to 'JSON (Normalized)', '/http_post_formats/json_normalized/'
- %li= link_to 'Multipart (Normalized)', '/http_post_formats/multipart_normalized/'
- %li= link_to 'Raw Message Format', '/http_post_formats/raw/'
- %li= link_to 'JSON Format', '/http_post_formats/json/', class: 'deprecated'
- %li= link_to 'Multipart Format', '/http_post_formats/multipart/', class: 'deprecated'
- %li= link_to 'Original Format', '/http_post_formats/original/', class: 'deprecated'
- -# %li= link_to 'Examples', '/receiving_email/examples/'
- %li
- Receiving Email
- %ul
- %li= link_to 'HTTP Status Codes', '/receiving_email/http_status_codes/'
- %li= link_to 'Using your own Domain', '/receiving_email/forwarding_and_custom_domains/'
- %li= link_to 'Store Attachments in Cloud Storage', '/receiving_email/store-email-attachments-in-s3-azure-google-storage/'
- %li= link_to 'Store Full Email in Cloud Storage', '/receiving_email/store-full-email-in-aws-cloud-storage/'
- %li= link_to 'Reply Parsing', '/features/extracting_replies_from_email/'
- %li
- = link_to 'Callbacks', '/features/callbacks/'
- %ul
- %li= link_to 'Authorization Callbacks', '/features/callbacks/#authorization-callbacks'
- %li= link_to 'Error Callbacks', '/features/callbacks/#error-callbacks'
- %li= link_to 'SPF (Sender Policy Framework)', '/features/spf/'
- %li= link_to 'DKIM Verification', '/features/dkim/'
- %li= link_to 'DMARC Verification', '/features/dmarc-verification/'
- %li= link_to 'Delivery Status API', '/features/delivery_status_api/'
- %li= link_to 'Securing HTTP Posts', '/receiving_email/securing_your_email_url_target/'
- %li= link_to 'IMAP Polling (Legacy Systems)', '/features/imap_collectors/'
- %li= link_to 'SPAM Filtering', '/features/spam_filtering/'
- %li= link_to 'Virus Scanning', '/features/virus_scanning/'
- %li= link_to 'IP Address List', '/receiving_email/ip_addresses/'
- %li
- = link_to 'Examples', '/receiving_email/examples/'
- - if in_section?('receiving_email/examples', include_self: true)
- %ul
- - items_for_section('receiving_email/examples').each do |item|
- %li= link_to title(item), item
- %li
- Local Development and Testing
- %ul
- %li= link_to 'Local Development / Debugger', '/receiving_email/localhost_debugger/'
- %li= link_to 'Test Driven Development', '/receiving_email/test_driven_development/'
+.sidebar-nav
+ .sidebar-top-row
+ = link_to 'Home', '/', class: sidebar_link_class('/')
+ %button.sidebar-expand-toggle{type: 'button', data: { sidebar_toggle: true }}= sidebar_expand_all? ? 'Collapse all' : 'Expand all'
- %li
- Outbound (Sending)
- %ul
- %li= link_to 'Introduction', '/outbound/'
- %li= link_to 'Getting Started', '/outbound/getting_started/'
- %li= link_to 'DKIM Signing', '/outbound/dkim/'
- %li= link_to 'DMARC Setup', '/outbound/dmarc/'
- %li= link_to 'Priorities and Tagging', '/outbound/priorities_and_tags/'
- %li= link_to 'Email Layouts', '/outbound/email-layouts/'
- %li= link_to 'Email Health', '/outbound/email-health/'
- %li= link_to 'Sending Email via API', '/outbound/sending_email_via_json_api/'
- %li
- = link_to 'Sending Email with SMTP', '/outbound/sending_email_with_smtp/'
- %ul
- - if in_section?('outbound/', include_self: true)
- - items_for_section('outbound/examples').each do |item|
- %li= link_to title(item), item
- - else
- %li= link_to 'Examples', '/outbound/sending_email_with_smtp/#examples'
+ %details.sidebar-group{open: sidebar_section_open?('getting_started')}
+ %summary.sidebar-group-summary
+ %span Getting Started (Receiving)
+ = icon(:chevron_right, 'sidebar-group-chevron')
+ %ul.sidebar-items
+ %li= link_to 'Introduction', '/getting_started/', class: sidebar_link_class('/getting_started/')
+ - for item in items_for_section('getting_started/receiving_email')
+ %li= link_to title(item), item, class: sidebar_link_class(item)
+ %li= link_to 'FAQs', '/getting_started/faqs/', class: sidebar_link_class('/getting_started/faqs/')
+ %li= link_to 'Getting Started Sending Email', '/outbound/', class: sidebar_link_class('/outbound/')
- %li
- Guides
- %ul
- %li= link_to 'Verify DKIM is Working', '/guides/verify-dkim/'
+ %details.sidebar-group{open: sidebar_section_open?('http_post_formats')}
+ %summary.sidebar-group-summary
+ %span HTTP POST Formats
+ = icon(:chevron_right, 'sidebar-group-chevron')
+ %ul.sidebar-items
+ %li= link_to 'Introduction to POST Formats', '/http_post_formats/', class: sidebar_link_class('/http_post_formats/')
+ %li= link_to 'JSON (Normalized)', '/http_post_formats/json_normalized/', class: sidebar_link_class('/http_post_formats/json_normalized/')
+ %li= link_to 'Multipart (Normalized)', '/http_post_formats/multipart_normalized/', class: sidebar_link_class('/http_post_formats/multipart_normalized/')
+ %li= link_to 'Raw Message Format', '/http_post_formats/raw/', class: sidebar_link_class('/http_post_formats/raw/')
+ %li= link_to 'JSON Format', '/http_post_formats/json/', class: sidebar_link_class('/http_post_formats/json/', 'deprecated')
+ %li= link_to 'Multipart Format', '/http_post_formats/multipart/', class: sidebar_link_class('/http_post_formats/multipart/', 'deprecated')
+ %li= link_to 'Original Format', '/http_post_formats/original/', class: sidebar_link_class('/http_post_formats/original/', 'deprecated')
+
+ %details.sidebar-group{open: sidebar_section_open?('receiving_email')}
+ %summary.sidebar-group-summary
+ %span Receiving Email
+ = icon(:chevron_right, 'sidebar-group-chevron')
+ %ul.sidebar-items
+ %li= link_to 'HTTP Status Codes', '/receiving_email/http_status_codes/', class: sidebar_link_class('/receiving_email/http_status_codes/')
+ %li= link_to 'Using your own Domain', '/receiving_email/forwarding_and_custom_domains/', class: sidebar_link_class('/receiving_email/forwarding_and_custom_domains/')
+ %li= link_to 'Store Attachments in Cloud Storage', '/receiving_email/store-email-attachments-in-s3-azure-google-storage/', class: sidebar_link_class('/receiving_email/store-email-attachments-in-s3-azure-google-storage/')
+ %li= link_to 'Store Full Email in Cloud Storage', '/receiving_email/store-full-email-in-aws-cloud-storage/', class: sidebar_link_class('/receiving_email/store-full-email-in-aws-cloud-storage/')
+ %li= link_to 'Reply Parsing', '/features/extracting_replies_from_email/', class: sidebar_link_class('/features/extracting_replies_from_email/')
+ %li
+ = link_to 'Callbacks', '/features/callbacks/', class: sidebar_link_class('/features/callbacks/')
+ %ul.sidebar-items.sidebar-items--nested
+ %li= link_to 'Authorization Callbacks', '/features/callbacks/#authorization-callbacks', class: sidebar_link_class('/features/callbacks/#authorization-callbacks')
+ %li= link_to 'Error Callbacks', '/features/callbacks/#error-callbacks', class: sidebar_link_class('/features/callbacks/#error-callbacks')
+ %li= link_to 'SPF (Sender Policy Framework)', '/features/spf/', class: sidebar_link_class('/features/spf/')
+ %li= link_to 'DKIM Verification', '/features/dkim/', class: sidebar_link_class('/features/dkim/')
+ %li= link_to 'DMARC Verification', '/features/dmarc-verification/', class: sidebar_link_class('/features/dmarc-verification/')
+ %li= link_to 'Delivery Status API', '/features/delivery_status_api/', class: sidebar_link_class('/features/delivery_status_api/')
+ %li= link_to 'Securing HTTP Posts', '/receiving_email/securing_your_email_url_target/', class: sidebar_link_class('/receiving_email/securing_your_email_url_target/')
+ %li= link_to 'IMAP Polling (Legacy Systems)', '/features/imap_collectors/', class: sidebar_link_class('/features/imap_collectors/')
+ %li= link_to 'SPAM Filtering', '/features/spam_filtering/', class: sidebar_link_class('/features/spam_filtering/')
+ %li= link_to 'Virus Scanning', '/features/virus_scanning/', class: sidebar_link_class('/features/virus_scanning/')
+ %li= link_to 'IP Address List', '/receiving_email/ip_addresses/', class: sidebar_link_class('/receiving_email/ip_addresses/')
+ %li
+ = link_to 'Examples', '/receiving_email/examples/', class: sidebar_link_class('/receiving_email/examples/')
+ - if in_section?('receiving_email/examples', include_self: true)
+ %ul.sidebar-items.sidebar-items--nested
+ - items_for_section('receiving_email/examples').each do |item|
+ %li= link_to title(item), item, class: sidebar_link_class(item)
+
+ %details.sidebar-group{open: sidebar_section_open?('local_dev')}
+ %summary.sidebar-group-summary
+ %span Local Development and Testing
+ = icon(:chevron_right, 'sidebar-group-chevron')
+ %ul.sidebar-items
+ %li= link_to 'Local Development / Debugger', '/receiving_email/localhost_debugger/', class: sidebar_link_class('/receiving_email/localhost_debugger/')
+ %li= link_to 'Test Driven Development', '/receiving_email/test_driven_development/', class: sidebar_link_class('/receiving_email/test_driven_development/')
+
+ %details.sidebar-group{open: sidebar_section_open?('outbound')}
+ %summary.sidebar-group-summary
+ %span Outbound (Sending)
+ = icon(:chevron_right, 'sidebar-group-chevron')
+ %ul.sidebar-items
+ %li= link_to 'Introduction', '/outbound/', class: sidebar_link_class('/outbound/')
+ %li= link_to 'Getting Started', '/outbound/getting_started/', class: sidebar_link_class('/outbound/getting_started/')
+ %li= link_to 'DKIM Signing', '/outbound/dkim/', class: sidebar_link_class('/outbound/dkim/')
+ %li= link_to 'DMARC Setup', '/outbound/dmarc/', class: sidebar_link_class('/outbound/dmarc/')
+ %li= link_to 'Priorities and Tagging', '/outbound/priorities_and_tags/', class: sidebar_link_class('/outbound/priorities_and_tags/')
+ %li= link_to 'Email Layouts', '/outbound/email-layouts/', class: sidebar_link_class('/outbound/email-layouts/')
+ %li= link_to 'Email Health', '/outbound/email-health/', class: sidebar_link_class('/outbound/email-health/')
+ %li= link_to 'Sending Email via API', '/outbound/sending_email_via_json_api/', class: sidebar_link_class('/outbound/sending_email_via_json_api/')
+ %li
+ = link_to 'Sending Email with SMTP', '/outbound/sending_email_with_smtp/', class: sidebar_link_class('/outbound/sending_email_with_smtp/')
+ %ul.sidebar-items.sidebar-items--nested
+ - if in_section?('outbound/', include_self: true)
+ - items_for_section('outbound/examples').each do |item|
+ %li= link_to title(item), item, class: sidebar_link_class(item)
+ - else
+ %li= link_to 'Examples', '/outbound/sending_email_with_smtp/#examples', class: sidebar_link_class('/outbound/sending_email_with_smtp/#examples')
+
+ %details.sidebar-group{open: sidebar_section_open?('guides')}
+ %summary.sidebar-group-summary
+ %span Guides
+ = icon(:chevron_right, 'sidebar-group-chevron')
+ %ul.sidebar-items
+ %li= link_to 'Verify DKIM is Working', '/guides/verify-dkim/', class: sidebar_link_class('/guides/verify-dkim/')
diff --git a/lib/common_marker_filter.rb b/lib/common_marker_filter.rb
index 8f20592..6dfb32c 100644
--- a/lib/common_marker_filter.rb
+++ b/lib/common_marker_filter.rb
@@ -6,8 +6,6 @@ class CommonMarkerFilter < Nanoc::Filter
requires 'commonmarker'
class CustomHtmlRenderer < ::CommonMarker::HtmlRenderer
- STYLE = 'pastie'.freeze
-
def header(node)
block do
id = node.first.string_content.downcase.gsub(/[^\w]/, '-')
@@ -35,7 +33,10 @@ def code_block(node)
# lang = CGI.escapeHTML(node.fence_info)
lang = node.fence_info.split(/\s+/)[0]
lexer = ::Rouge::Lexer.find_fancy(node.fence_info) || ::Rouge::Lexers::PlainText.new
- formatter = ::Rouge::Formatters::HTMLInline.new(STYLE)
+ # Class-based (not inline-styled) output so the docs Tailwind CSS
+ # can recolor tokens for the dark terminal-motif code blocks. See
+ # tailwind/input.css for the token color rules.
+ formatter = ::Rouge::Formatters::HTML.new
out("")
out(formatter.format(lexer.lex(source)))
diff --git a/lib/helpers/icon_helpers.rb b/lib/helpers/icon_helpers.rb
new file mode 100644
index 0000000..e878dc6
--- /dev/null
+++ b/lib/helpers/icon_helpers.rb
@@ -0,0 +1,17 @@
+# Inline SVG icons — the four small glyphs the layout needs, replacing a
+# render-blocking Font Awesome CDN stylesheet (the full library plus a
+# webfont, for four icons). 1em sizing + currentColor keep the existing
+# font-size/color CSS working unchanged.
+module IconHelpers
+ ICONS = {
+ chevron_right: ' tags Bootstrap also styles (see the
+ cascade-layers note at the top of this file).
+ ========================================================================== */
+
+/* Bootstrap 3's responsive-utilities partial ALSO defines an unlayered
+ `.hidden { display: none }` class (same name as Tailwind's own `hidden`
+ utility) — it always wins over Tailwind's layered `hidden`/`lg:block`
+ combo regardless of viewport, so that pattern can't be used here for
+ "hidden on mobile, visible at a breakpoint". These custom, uniquely-
+ named, unlayered pairs do the same job without the name collision. */
+.docs-badge { display: none; }
+.docs-nav-external-link { display: none; }
+.docs-desktop-aside { display: none; }
+
+@media (width >= 40rem) {
+ .docs-badge { display: inline-flex; }
+}
+
+@media (width >= 64rem) {
+ .docs-nav-external-link { display: inline-flex; }
+ .docs-desktop-aside { display: block; }
+}
+
+/* Sticky top bar — brand + search + external link on the cm-blue surface. */
+.docs-topbar {
+ position: sticky;
+ top: 0;
+ z-index: 50;
+}
+
+.docs-topbar-nav {
+ background-color: var(--color-cm-blue-500);
+ border-bottom: 1px solid var(--color-cm-blue-600);
+ box-shadow: var(--shadow-nav);
+}
+
+.docs-topbar-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.75rem;
+ width: 100%;
+ /* 1.5rem inline padding matches the rail's padding-left so the logo and
+ the sidebar content share a left edge. */
+ padding: 0.5rem 1.5rem;
+}
+
+.docs-topbar-brand {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ flex-shrink: 0;
+}
+
+.docs-topbar-logo {
+ display: flex;
+ align-items: center;
+}
+
+.docs-topbar-logo img { display: block; }
+
+/* "Docs" pill next to the logo. display (hidden on mobile) is handled by
+ the responsive visibility pairs above. Deliberately var(--font-mono)
+ (Tailwind's ui-monospace default stack, what the old `font-mono` utility
+ resolved to) and not the DM Mono brand var — keeps the rendered output
+ identical to the utility version. */
+.docs-badge {
+ align-items: center;
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ border-radius: 0.375rem;
+ padding: 0.125rem 0.5rem;
+ color: rgba(255, 255, 255, 0.8);
+ font-family: var(--font-mono);
+ font-size: 11px;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+}
+
+/* Right-hand cluster: search box + cloudmailin.com link. */
+.docs-topbar-tools {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 0.75rem;
+ flex: 1;
+}
+
+/* The docs frame: nav rail docked to the viewport's left edge as a tinted,
+ bordered panel spanning the full column height, with the article centered
+ in the remaining width (the established docs layout — ReadTheDocs, MDN,
+ Stripe). The rail keeps the page frame even when content is short. */
+#docs-content {
+ min-height: calc(100vh - 3.5rem);
+}
+
+/* Side-by-side rail + article from the lg breakpoint up; stacked below. */
+@media (width >= 64rem) {
+ #docs-content {
+ display: flex;
+ align-items: stretch;
+ }
+}
+
+.docs-desktop-aside {
+ /* 18rem up to ~1500px viewports, then grows with the screen to a 24rem
+ cap (~2560px) so the rail doesn't look skinny on very wide displays. */
+ width: clamp(18rem, 12vw + 6rem, 24rem);
+ flex-shrink: 0;
+ /* White rail — the gray-200 hairline border alone defines the panel.
+ padding-top matches .docs-main's so both columns start level. */
+ background-color: #fff;
+ border-right: 1px solid var(--color-gray-200);
+ padding: 2.75rem 1.25rem 2.5rem 1.5rem;
+}
+
+.docs-main {
+ /* min-width: 0 lets the article column shrink below its content's
+ intrinsic width (wide code blocks) instead of overflowing the flex row. */
+ min-width: 0;
+ flex: 1;
+ padding: 1.5rem 1rem 4rem;
+}
+
+@media (width >= 64rem) {
+ .docs-main { padding: 2.75rem 3rem 5rem; }
+}
+
+.docs-main .docs-article,
+.docs-main .info,
+.docs-main .warning {
+ /* ~95 chars of body text; docs pages are code-fence-heavy so err wider
+ than pure-prose measure. */
+ max-width: 48rem;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+/* Two sidebar modes. Collapsed (one section open) is reading mode: the nav
+ fits the viewport, so pin it alongside the article. Expanded (two or more
+ sections open — the home page default, or after "Expand all") is browsing
+ mode: let the nav flow at full height with the page instead of adding a
+ second scrollbar. :has() picks the mode from the DOM state itself, so the
+ same rule covers server-rendered defaults and the client-side toggle. */
+.docs-sidebar-sticky {
+ position: sticky;
+ top: 5.5rem;
+ max-height: calc(100vh - 7rem);
+ overflow-y: auto;
+}
+
+.docs-sidebar-sticky:has(.sidebar-group[open] ~ .sidebar-group[open]) {
+ position: static;
+ max-height: none;
+ overflow-y: visible;
+}
+
+.docs-nav-external-link {
+ align-items: center;
+ gap: 0.375rem;
+ flex-shrink: 0;
+ padding-left: 0.75rem;
+ border-left: 1px solid rgba(255, 255, 255, 0.2);
+ color: rgba(255, 255, 255, 0.7);
+ text-decoration: none;
+ font-size: 0.875rem;
+ line-height: calc(1.25 / 0.875);
+}
+
+.docs-nav-external-link:hover { color: rgba(255, 255, 255, 0.9); }
+
+.docs-nav-external-icon { font-size: 10px; }
+
+/* Footer frame — the .container width/centering rule itself lives in
+ docs_new.scss; these classes ride alongside it in the markup. */
+.docs-footer {
+ background-color: var(--color-cm-blue-500);
+}
+
+.docs-footer-body {
+ padding-top: 3rem;
+ padding-bottom: 3rem;
+}
+
+.docs-footer-grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 2rem;
+}
+
+@media (width >= 40rem) {
+ .docs-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+}
+
+/* Brand + tagline column: full row on mobile, one column from sm up. */
+.docs-footer-about {
+ grid-column: span 2 / span 2;
+}
+
+@media (width >= 40rem) {
+ .docs-footer-about { grid-column: span 1 / span 1; }
+}
+
+.docs-footer-brand {
+ display: inline-block;
+ margin-bottom: 0.75rem;
+ color: #fff;
+ text-decoration: none;
+ font-family: var(--font-family-logo);
+ font-size: 1.25rem;
+ line-height: calc(1.75 / 1.25);
+ font-weight: 700;
+ letter-spacing: -0.025em;
+}
+
+.docs-footer-tagline {
+ color: rgba(255, 255, 255, 0.6);
+ font-size: 0.875rem;
+ line-height: 1.625;
+}
+
+.docs-footer-heading {
+ font-family: var(--font-family-mono);
+ font-size: 0.75rem;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.12em;
+ color: rgba(255, 255, 255, 0.5);
+ margin: 0 0 0.75rem;
+}
+
+.docs-footer-link {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ font-size: 0.875rem;
+}
+
+.docs-footer-link:hover { color: #fff; }
+
+.docs-footer-links {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.docs-footer-links > li + li {
+ margin-top: 0.5rem;
+}
+
+/* Copyright strip under the link columns. */
+.docs-footer-divider {
+ border-top: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.docs-footer-legal {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+}
+
+.docs-footer-copyright {
+ margin: 0;
+ color: rgba(255, 255, 255, 0.4);
+ font-size: 0.75rem;
+ line-height: calc(1 / 0.75);
+ text-align: center;
+}
+
+/* ==========================================================================
+ Sidebar links — see layout/sidebar.haml + lib/helpers/section_helpers.rb.
+ Plain classes (not Tailwind utility strings) for the same cascade-layers
+ reason as above.
+ ========================================================================== */
+
+/* Root of the sidebar partial (rendered in both the desktop aside and the
+ mobile drawer): base type size + 1rem rhythm between the section groups. */
+.sidebar-nav {
+ font-size: 0.9rem;
+}
+
+.sidebar-nav > * + * {
+ margin-top: 1rem;
+}
+
+/* Home link + "Expand all" toggle on one line. */
+.sidebar-top-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+/* Link lists inside each group; --nested is the indented
+ sub-list under a parent link (Callbacks, Examples, SMTP). */
+.sidebar-items {
+ list-style: none;
+ margin: 0.5rem 0 0;
+ padding: 0;
+}
+
+.sidebar-items > li + li {
+ margin-top: 0.125rem;
+}
+
+.sidebar-items--nested {
+ margin-top: 0.125rem;
+ padding-left: 0.75rem;
+}
+
+.sidebar-link {
+ display: block;
+ border-radius: 0.375rem;
+ padding: 0.375rem 0.75rem;
+ color: #4b5563;
+ text-decoration: none;
+ font-size: inherit;
+}
+
+.sidebar-link:hover {
+ background-color: #f9fafb;
+ color: #111827;
+}
+
+.sidebar-link--active {
+ background-color: var(--color-cm-blue-50);
+ color: var(--color-cm-blue-700);
+ font-weight: 500;
+}
+
+.sidebar-link--active:hover {
+ background-color: var(--color-cm-blue-50);
+ color: var(--color-cm-blue-700);
+}
+
+/* --------------------------------------------------------------------------
+ Collapsible sidebar sections (native /). Only the active
+ section is `open` by default (see active_sidebar_section in section_helpers)
+ so the nav is short enough to fit without an internal scroll; the "Expand
+ all" toggle (data-sidebar-toggle, handled by the inline script in
+ application.haml) opens every group for customers who want to scan them all.
+ -------------------------------------------------------------------------- */
+
+/* The IS the section header — remove the native disclosure triangle
+ and restyle it as the old mono/uppercase label, now clickable. */
+.sidebar-group-summary {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.5rem;
+ cursor: pointer;
+ list-style: none;
+ user-select: none;
+ padding: 0.2rem 0;
+ color: #9ca3af;
+ font-family: var(--font-family-mono);
+ font-size: 0.75rem;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.03em;
+}
+
+.sidebar-group-summary::-webkit-details-marker { display: none; }
+.sidebar-group-summary::marker { content: ""; }
+
+.sidebar-group-summary:hover { color: #6b7280; }
+
+/* Inline SVG icons (lib/helpers/icon_helpers.rb): 1em box sized by the
+ surrounding font-size, aligned like an icon-font glyph. */
+.docs-icon {
+ display: inline-block;
+ vertical-align: -0.125em;
+}
+
+/* Chevron points right when collapsed, rotates down when the group is open. */
+.sidebar-group-chevron {
+ font-size: 0.625rem;
+ color: #cbd5e1;
+ transition: transform 0.15s ease;
+}
+
+.sidebar-group[open] > .sidebar-group-summary .sidebar-group-chevron {
+ transform: rotate(90deg);
+}
+
+/* "Expand all" / "Collapse all" toggle — a quiet mono text button. */
+.sidebar-expand-toggle {
+ background: none;
+ border: none;
+ padding: 0.15rem 0.25rem;
+ cursor: pointer;
+ color: #9ca3af;
+ font-family: var(--font-family-mono);
+ font-size: 0.6875rem;
+ text-transform: uppercase;
+ letter-spacing: 0.03em;
+}
+
+.sidebar-expand-toggle:hover { color: var(--color-cm-blue-600); }
+
+/* ==========================================================================
+ Search box (#searchbox mount point + Algolia Autocomplete's own markup)
+ search.js / lib/algolia.rb are untouched — only visuals below.
+ ========================================================================== */
+
+/* The mount point itself: grows with the top bar's flex row up to a
+ viewport-dependent cap. */
+#searchbox {
+ position: relative;
+ width: 100%;
+ max-width: 10rem;
+}
+
+@media (width >= 40rem) {
+ #searchbox { max-width: 14rem; }
+}
+
+@media (width >= 64rem) {
+ #searchbox { max-width: 20rem; }
+}
+
+#searchbox .aa-Autocomplete {
+ width: 100%;
+}
+
+#searchbox .aa-Form {
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ background-color: rgba(255, 255, 255, 0.12);
+ border-radius: 0.5rem;
+ box-shadow: none;
+ transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+
+#searchbox .aa-Form:focus-within {
+ background-color: rgba(255, 255, 255, 0.18);
+ border-color: rgba(255, 255, 255, 0.5);
+ box-shadow: none;
+}
+
+#searchbox .aa-InputWrapperPrefix .aa-SubmitButton {
+ width: 2.25rem;
+ color: rgba(255, 255, 255, 0.5);
+}
+
+#searchbox .aa-Input {
+ padding-left: 0.25rem;
+ color: #fff;
+ font-family: var(--font-family-display);
+ font-size: 0.875rem;
+}
+
+#searchbox .aa-Input::placeholder {
+ color: rgba(255, 255, 255, 0.55);
+}
+
+#searchbox .aa-InputWrapperSuffix .aa-ClearButton,
+#searchbox .aa-InputWrapperSuffix .aa-LoadingIndicator {
+ color: rgba(255, 255, 255, 0.6);
+}
+
+#searchbox .aa-Panel {
+ margin-top: 0.5rem;
+ border: 1px solid #e5e7eb;
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.35);
+ overflow: hidden;
+}
+
+#searchbox .aa-PanelLayout {
+ padding: 0.5rem 0;
+}
+
+#searchbox .aa-Source {
+ padding: 0;
+}
+
+.aa-Item {
+ margin-bottom: 0;
+ border-radius: 0.5rem;
+}
+
+.aa-Item[aria-selected="true"] {
+ background-color: var(--color-cm-blue-50);
+}
+
+a.search-result,
+a.search-result:hover {
+ display: block;
+ padding: 0.5rem 1rem;
+ text-decoration: none;
+ color: inherit;
+}
+
+a.search-result h4 {
+ margin: 0 0 0.2rem;
+ font-family: var(--font-family-display);
+ font-size: 0.9rem;
+ font-weight: 600;
+ color: #111827;
+}
+
+a.search-result p {
+ margin: 0;
+ font-size: 0.8rem;
+ line-height: 1.5;
+ color: #6b7280;
+}
+
+a.search-result mark {
+ background-color: var(--color-cm-blue-100);
+ color: var(--color-cm-blue-700);
+ border-radius: 0.15em;
+ padding: 0 0.1em;
+}
+
+.search-badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.25em;
+ margin-left: 0.4rem;
+ padding: 0.05rem 0.5rem;
+ border-radius: 9999px;
+ background-color: var(--color-cm-blue-50);
+ color: var(--color-cm-blue-600);
+ font-family: var(--font-family-mono);
+ font-size: 0.625rem;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+ vertical-align: middle;
+}
+
+.search-badge::after {
+ /* north-east arrow, forced text presentation (no emoji rendering) */
+ content: ' \2197\FE0E';
+}
+
+/* ==========================================================================
+ Sidebar mobile chevron
+ ========================================================================== */
+
+/* Bootstrap's HTML5-elements normalize shim sets `details { display: block }`
+ as an unlayered rule (same collision as .hidden above) — Tailwind's
+ layered `lg:hidden` utility can't beat it, so hide it here instead. */
+@media (width >= 64rem) {
+ .docs-mobile-toc { display: none; }
+}
+
+.docs-mobile-toc summary { list-style: none; }
+.docs-mobile-toc summary::-webkit-details-marker { display: none; }
+
+.docs-mobile-toc {
+ border-bottom: 1px solid var(--color-gray-100);
+ background-color: var(--color-gray-50);
+}
+
+/* The clickable "Contents" row. */
+.docs-mobile-toc-summary {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.75rem 1rem;
+ cursor: pointer;
+ -webkit-user-select: none;
+ user-select: none;
+}
+
+.docs-mobile-toc-label {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ color: var(--color-gray-700);
+ font-size: 0.875rem;
+ line-height: calc(1.25 / 0.875);
+ font-weight: 500;
+}
+
+.docs-mobile-toc-icon {
+ color: var(--color-gray-400);
+}
+
+.docs-mobile-toc-chevron {
+ font-size: 0.75rem;
+ color: var(--color-gray-400);
+ transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.docs-mobile-toc[open] .docs-mobile-toc-chevron {
+ transform: rotate(180deg);
+}
+
+/* Scrollable drawer body holding the sidebar partial. */
+.docs-mobile-toc-body {
+ padding: 0 1rem 1rem;
+ max-height: 60vh;
+ overflow-y: auto;
+}
+
+/* ==========================================================================
+ Article content — every compiled markdown page lands here with bare,
+ class-free tags (h1-h4, p, ul/ol, table, blockquote, code/pre, img).
+ ========================================================================== */
+
+.docs-article {
+ font-family: var(--font-family-display);
+ font-size: 0.95rem;
+ line-height: 1.65;
+ color: #374151;
+}
+
+.docs-article > *:first-child { margin-top: 0; }
+
+.docs-article h1 {
+ font-family: var(--font-family-display);
+ font-size: 2rem;
+ font-weight: 700;
+ letter-spacing: -0.025em;
+ color: #111827;
+ line-height: 1.2;
+ margin: 0 0 0.75rem;
+}
+
+.docs-article h2 {
+ font-family: var(--font-family-display);
+ font-size: 1.5rem;
+ font-weight: 700;
+ letter-spacing: -0.025em;
+ color: #111827;
+ line-height: 1.3;
+ margin: 2.25rem 0 0.85rem;
+ padding-top: 1.5rem;
+ border-top: 1px solid #eef0f3;
+}
+
+.docs-article > h2:first-of-type,
+.docs-article h1 + h2 {
+ border-top: none;
+ padding-top: 0;
+ margin-top: 1.25rem;
+}
+
+.docs-article h3 {
+ font-family: var(--font-family-display);
+ font-size: 1.25rem;
+ font-weight: 600;
+ color: #374151;
+ margin: 1.75rem 0 0.65rem;
+}
+
+.docs-article h4 {
+ font-family: var(--font-family-mono);
+ font-size: 0.875rem;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.03em;
+ color: #374151;
+ margin: 1.4rem 0 0.5rem;
+}
+
+.docs-article p { margin: 0 0 1rem; }
+
+.docs-article a {
+ color: var(--color-cm-blue-600);
+ text-decoration: underline;
+ text-underline-offset: 2px;
+}
+
+.docs-article a:hover { color: var(--color-cm-blue-700); }
+
+.docs-article ul, .docs-article ol {
+ margin: 0 0 1rem;
+ padding-left: 1.4rem;
+}
+
+/* Restore list markers. Tailwind v4's Preflight resets `ol, ul, menu` to
+ `list-style: none` (it lives in @layer base, so it beats the browser's
+ default). Bootstrap's unlayered UA-style used to leave markers alone, but
+ with Bootstrap removed nothing puts them back — so set them explicitly
+ here or every bulleted/numbered list in the docs renders flat. */
+.docs-article ul { list-style: disc; }
+.docs-article ol { list-style: decimal; }
+.docs-article ul ul { list-style: circle; }
+.docs-article ul ul ul { list-style: square; }
+.docs-article ol ol { list-style: lower-alpha; }
+.docs-article ol ol ol { list-style: lower-roman; }
+
+/* GitHub-style task lists (commonmarker `tasklist` extension) carry their
+ own checkbox , so suppress the redundant bullet on those items. */
+.docs-article li.task-list-item { list-style: none; }
+
+.docs-article li { margin-bottom: 0.4rem; }
+.docs-article li > ul, .docs-article li > ol { margin-top: 0.4rem; margin-bottom: 0; }
+
+.docs-article strong { color: #1f2937; font-weight: 600; }
+
+.docs-article hr {
+ border: none;
+ border-top: 1px solid #e5e7eb;
+ margin: 2rem 0;
+}
+
+/* Inline code (not inside a ) */
+.docs-article code {
+ background-color: var(--color-cm-blue-50);
+ color: var(--color-cm-blue-700);
+ border-radius: 0.3rem;
+ padding: 0.15em 0.4em;
+ font-size: 0.85em;
+}
+
+.docs-article pre code {
+ background: none;
+ color: inherit;
+ padding: 0;
+ border-radius: 0;
+ font-size: inherit;
+}
+
+/* Blockquote callouts */
+.docs-article blockquote {
+ margin: 1.5rem 0;
+ padding: 0.9rem 1.25rem;
+ border-left: 4px solid var(--color-cm-blue-500);
+ border-radius: 0.5rem;
+ background-color: rgba(77, 122, 186, 0.05);
+ color: #374151;
+}
+
+.docs-article blockquote p { margin: 0; }
+.docs-article blockquote p + p { margin-top: 0.6rem; }
+
+/* Tables */
+.docs-article table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 1.25rem 0 1.75rem;
+ font-size: 0.9rem;
+ border: 1px solid #e5e7eb;
+ border-radius: 0.75rem;
+ overflow: hidden;
+}
+
+.docs-article thead { background-color: #f9fafb; }
+
+.docs-article th {
+ text-align: left;
+ font-family: var(--font-family-mono);
+ font-size: 0.72rem;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+ color: #9ca3af;
+ padding: 0.6rem 1rem;
+ border-bottom: 1px solid #e5e7eb;
+}
+
+.docs-article td {
+ padding: 0.6rem 1rem;
+ border-top: 1px solid #f1f2f4;
+ color: #374151;
+ vertical-align: top;
+}
+
+.docs-article tbody tr:hover { background-color: #fafbfc; }
+
+/* Images */
+.docs-article img {
+ max-width: 100%;
+ height: auto;
+ border: 1px solid #e5e7eb;
+ border-radius: 0.5rem;
+ margin: 1.25rem 0;
+ padding: 0.5rem;
+ background: #fff;
+}
+
+.docs-article .image-caption {
+ display: block;
+ margin-top: -1rem;
+ margin-bottom: 1.25rem;
+ padding: 0.4rem 0.6rem;
+ border: 1px solid #e5e7eb;
+ border-top: none;
+ border-radius: 0 0 0.5rem 0.5rem;
+ background-color: #f9fafb;
+ color: #6b7280;
+ font-size: 0.8rem;
+}
+
+/* ==========================================================================
+ Code blocks + multi-language tab bar.
+
+ content/assets/javascripts/code.js groups adjacent blocks and
+ inserts a `.language_list` tab bar directly before the first of
+ each group, tagging every in the group with a `data-language`
+ attribute and showing one at a time via `display: block`. That JS is
+ untouched — we do NOT wrap the s in a container (it would break the
+ adjacency grouping). Instead the bar is connected to the code purely with
+ CSS: the bar rounds its TOP corners and drops its bottom margin/radius,
+ and every grouped (`[data-language]`) rounds only its BOTTOM corners
+ with no top margin — so whichever language is visible sits flush beneath
+ the bar as a single card. Standalone blocks keep full rounding.
+
+ lib/common_marker_filter.rb emits Rouge's class-based token spans (not
+ inline styles) so the palette below can colour them for the dark surface.
+ ========================================================================== */
+
+/* The code surface — a neutral near-black, no faux terminal-window chrome.
+ #1f2937 / #111827 are Tailwind gray-800 / gray-900, the same neutral scale
+ the rest of the site uses (h1 is gray-900), so code blocks sit in the same
+ colour family rather than introducing a separate blue. */
+.docs-article pre:not(.warning) {
+ margin: 1.5rem 0;
+ border-radius: 0.5rem;
+ overflow: hidden;
+ background-color: #1f2937;
+ padding: 0;
+}
+
+.docs-article pre:not(.warning) code {
+ display: block;
+ padding: 1rem 1.25rem;
+ overflow-x: auto;
+ font-family: var(--font-family-mono);
+ font-size: 0.83rem;
+ line-height: 1.65;
+ white-space: pre;
+ /* Base colour for plain identifiers (.n/.nx), whitespace and anything not
+ recoloured below — a soft near-white. */
+ color: #e5e7eb;
+}
+
+/* Grouped blocks (data-language set by code.js): square the top corners and
+ drop the top margin so they butt flush against the tab bar above; keep the
+ rounded bottom. Applies to every in the group, so it holds whichever
+ language is currently shown. */
+.docs-article pre:not(.warning)[data-language] {
+ margin: 0 0 1.5rem;
+ border-radius: 0 0 0.5rem 0.5rem;
+}
+
+/* ------------------------------------------------------------------------
+ Syntax highlighting palette (Rouge class-based tokens)
+
+ The code surface is now a neutral near-black (#1f2937, relative luminance
+ ~0.02), so these hues read at much higher contrast than they did on the
+ old mid-blue background — most accent tokens now clear WCAG AA, and the
+ differentiation between categories is clearer. Every token stays fairly
+ LIGHT for legibility, with the HUES spread across the wheel (gold, green,
+ coral, cyan, orchid, lavender) so categories are told apart by hue.
+ Buckets follow Rouge's own token abbreviations; grouped by role:
+
+ keyword gold def/class/if/return/const/var
+ type/class orchid class + type + constant names, exceptions
+ string green every string flavour + regex + interpolation
+ number/const coral ints/floats/hex + true/false/null/nil + symbol
+ function/key cyan method & fn names, builtins, JSON/XML keys+tags
+ variable lavender $var / @ivar / @@cvar / globals
+ comment slate muted + italic, meant to recede
+ punct/operator quiet brackets, commas, operators — structural
+ ------------------------------------------------------------------------ */
+.docs-article pre:not(.warning) code {
+ /* Comments — muted slate, italic; low emphasis by design */
+ .c, .c1, .cm, .cs, .cd, .ch, .cpf { color: #9fb2ce; font-style: italic; }
+ /* Preprocessor / meta lines ( below with
+ no bottom margin/radius, so bar + code read as one connected surface. A
+ slightly darker strip (gray-900) sits above the gray-800 code area. */
+.docs-article .language_list {
+ display: flex;
+ align-items: center;
+ margin: 1.5rem 0 0;
+ padding: 0.3rem 0.5rem;
+ border-radius: 0.5rem 0.5rem 0 0;
+ background-color: #111827;
+}
+
+.docs-article .languages {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.15rem;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.docs-article .languages a {
+ display: inline-block;
+ padding: 0.3rem 0.7rem;
+ border-radius: 0.3rem;
+ color: #9ca3af;
+ font-family: var(--font-family-mono);
+ font-size: 0.72rem;
+ letter-spacing: 0.02em;
+ text-decoration: none;
+ transition: color 0.12s ease, background-color 0.12s ease;
+}
+
+.docs-article .languages a:hover {
+ color: #f9fafb;
+ background-color: rgba(255, 255, 255, 0.06);
+}
+
+/* The clicked/selected tab keeps focus, so this doubles as the "active"
+ indicator (code.js sets no active class of its own). */
+.docs-article .languages a:focus {
+ color: #f9fafb;
+ background-color: rgba(255, 255, 255, 0.1);
+ outline: none;
+}
+
+/* Plain (non-fenced) blocks — the dev-mode attribute dump uses
+ class="warning" (Bootstrap alert styling), explicitly excluded above. */