Skip to content

Commit 0b1e761

Browse files
bmorelli25bmorelli25
authored
Update breadcrumb generator, CSS, and tests (#2474)
* Update breadcrumb generator, CSS, and tests * Remove Google Font dependency; use Unicode instead * Use “Elastic Docs” instead of “Docs home”
1 parent e716fc3 commit 0b1e761

File tree

8 files changed

+72
-61
lines changed

8 files changed

+72
-61
lines changed

‎resources/asciidoctor/lib/chunker/breadcrumbs.rb

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,30 @@ module Breadcrumbs
1111
def generate_breadcrumbs(doc, section)
1212
result = ['<div class="breadcrumbs">']
1313
result += generate_breadcrumb_links(section).reverse
14-
result << %(<span class="breadcrumb-node">#{section.title}</span>)
1514
result << '</div>'
1615
Asciidoctor::Block.new doc, :pass, source: result.join("\n")
1716
end
1817

1918
def generate_breadcrumb_links(section)
2019
result = []
2120
parent = section
21+
first = true
2222
while (parent = parent.parent)
2323
extra = parent.context == :document ? parent.attr('title-extra') : ''
24-
result << <<~HTML.strip
24+
first_link = <<~HTML.strip
2525
<span class="breadcrumb-link"><a #{link_href parent}>#{parent.title}#{extra}</a></span>
26-
»
2726
HTML
27+
next_links = first_link + <<~HTML.strip
28+
<span class="chevron-right">›</span>
29+
HTML
30+
# This prevents a chevron from being placed after the last breadcrumb
31+
links = first == true ? first_link : next_links
32+
result << links
33+
first = false
2834
end
35+
result << <<~HTML.strip
36+
<span class="breadcrumb-link"><a href="/guide/">Elastic Docs</a></span><span class="chevron-right">›</span>
37+
HTML
2938
result
3039
end
3140
end

‎resources/asciidoctor/lib/docbook_compat/convert_document.rb

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,9 @@ def munge_title(doc, title, html)
6464
# closing </div>.
6565
header_start = <<~HTML
6666
<div class="titlepage">
67+
<div class="breadcrumbs" id="title-page-breadcrumb">
68+
<span class="breadcrumb-link"><a href="/guide/">Elastic Docs</a></span>
69+
</div>
6770
#{docbook_style_title doc, title}
6871
HTML
6972
html.gsub!(%r{<div id="header">\n<h1>.+?</h1>\n}m, header_start) ||

‎resources/asciidoctor/spec/chunker_spec.rb

Lines changed: 17 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -200,9 +200,8 @@ def dest_file(file)
200200
it 'contains the breadcrumbs' do
201201
expect(contents).to include <<~HTML
202202
<div class="breadcrumbs">
203+
<span class="breadcrumb-link"><a href="/guide/">Elastic Docs</a></span><span class="chevron-right">›</span>
203204
<span class="breadcrumb-link"><a href="index.html">Title</a></span>
204-
»
205-
<span class="breadcrumb-node">Section "1"</span>
206205
</div>
207206
HTML
208207
end
@@ -240,9 +239,8 @@ def dest_file(file)
240239
it 'contains the breadcrumbs' do
241240
expect(contents).to include <<~HTML
242241
<div class="breadcrumbs">
242+
<span class="breadcrumb-link"><a href="/guide/">Elastic Docs</a></span><span class="chevron-right">›</span>
243243
<span class="breadcrumb-link"><a href="index.html">Title</a></span>
244-
»
245-
<span class="breadcrumb-node">Section <code>2</code></span>
246244
</div>
247245
HTML
248246
end
@@ -407,9 +405,8 @@ def dest_file(file)
407405
it 'contains the breadcrumbs' do
408406
expect(contents).to include <<~HTML
409407
<div class="breadcrumbs">
408+
<span class="breadcrumb-link"><a href="/guide/">Elastic Docs</a></span><span class="chevron-right">›</span>
410409
<span class="breadcrumb-link"><a href="index.html">Title [fooo]</a></span>
411-
»
412-
<span class="breadcrumb-node">S1</span>
413410
</div>
414411
HTML
415412
end
@@ -521,9 +518,8 @@ def dest_file(file)
521518
it 'contains the breadcrumbs' do
522519
expect(contents).to include <<~HTML
523520
<div class="breadcrumbs">
521+
<span class="breadcrumb-link"><a href="/guide/">Elastic Docs</a></span><span class="chevron-right">›</span>
524522
<span class="breadcrumb-link"><a href="index.html">Title</a></span>
525-
»
526-
<span class="breadcrumb-node">Section: With subtitle</span>
527523
</div>
528524
HTML
529525
end
@@ -634,9 +630,8 @@ def dest_file(file)
634630
it 'contains the breadcrumbs' do
635631
expect(contents).to include <<~HTML
636632
<div class="breadcrumbs">
633+
<span class="breadcrumb-link"><a href="/guide/">Elastic Docs</a></span><span class="chevron-right">›</span>
637634
<span class="breadcrumb-link"><a href="index.html">Title</a></span>
638-
»
639-
<span class="breadcrumb-node">S1</span>
640635
</div>
641636
HTML
642637
end
@@ -653,11 +648,9 @@ def dest_file(file)
653648
it 'contains the breadcrumbs' do
654649
expect(contents).to include <<~HTML
655650
<div class="breadcrumbs">
656-
<span class="breadcrumb-link"><a href="index.html">Title</a></span>
657-
»
651+
<span class="breadcrumb-link"><a href="/guide/">Elastic Docs</a></span><span class="chevron-right">›</span>
652+
<span class="breadcrumb-link"><a href="index.html">Title</a></span><span class="chevron-right">›</span>
658653
<span class="breadcrumb-link"><a href="s1.html">S1</a></span>
659-
»
660-
<span class="breadcrumb-node">S1_1</span>
661654
</div>
662655
HTML
663656
end
@@ -671,9 +664,8 @@ def dest_file(file)
671664
it 'contains the breadcrumbs' do
672665
expect(contents).to include <<~HTML
673666
<div class="breadcrumbs">
667+
<span class="breadcrumb-link"><a href="/guide/">Elastic Docs</a></span><span class="chevron-right">›</span>
674668
<span class="breadcrumb-link"><a href="index.html">Title</a></span>
675-
»
676-
<span class="breadcrumb-node">S2</span>
677669
</div>
678670
HTML
679671
end
@@ -690,11 +682,9 @@ def dest_file(file)
690682
it 'contains the breadcrumbs' do
691683
expect(contents).to include <<~HTML
692684
<div class="breadcrumbs">
693-
<span class="breadcrumb-link"><a href="index.html">Title</a></span>
694-
»
685+
<span class="breadcrumb-link"><a href="/guide/">Elastic Docs</a></span><span class="chevron-right">›</span>
686+
<span class="breadcrumb-link"><a href="index.html">Title</a></span><span class="chevron-right">›</span>
695687
<span class="breadcrumb-link"><a href="s2.html">S2</a></span>
696-
»
697-
<span class="breadcrumb-node">S2_1</span>
698688
</div>
699689
HTML
700690
end
@@ -708,11 +698,9 @@ def dest_file(file)
708698
it 'contains the breadcrumbs' do
709699
expect(contents).to include <<~HTML
710700
<div class="breadcrumbs">
711-
<span class="breadcrumb-link"><a href="index.html">Title</a></span>
712-
»
701+
<span class="breadcrumb-link"><a href="/guide/">Elastic Docs</a></span><span class="chevron-right">›</span>
702+
<span class="breadcrumb-link"><a href="index.html">Title</a></span><span class="chevron-right">›</span>
713703
<span class="breadcrumb-link"><a href="s2.html">S2</a></span>
714-
»
715-
<span class="breadcrumb-node">S2_2</span>
716704
</div>
717705
HTML
718706
end
@@ -776,9 +764,8 @@ def dest_file(file)
776764
it 'contains the breadcrumbs' do
777765
expect(contents).to include <<~HTML
778766
<div class="breadcrumbs">
767+
<span class="breadcrumb-link"><a href="/guide/">Elastic Docs</a></span><span class="chevron-right">›</span>
779768
<span class="breadcrumb-link"><a href="index.html">Title</a></span>
780-
»
781-
<span class="breadcrumb-node">Foo</span>
782769
</div>
783770
HTML
784771
end
@@ -794,11 +781,9 @@ def dest_file(file)
794781
it 'contains the breadcrumbs' do
795782
expect(contents).to include <<~HTML
796783
<div class="breadcrumbs">
797-
<span class="breadcrumb-link"><a href="index.html">Title</a></span>
798-
»
784+
<span class="breadcrumb-link"><a href="/guide/">Elastic Docs</a></span><span class="chevron-right">›</span>
785+
<span class="breadcrumb-link"><a href="index.html">Title</a></span><span class="chevron-right">›</span>
799786
<span class="breadcrumb-link"><a href="app.html">Foo</a></span>
800-
»
801-
<span class="breadcrumb-node">Foo 1</span>
802787
</div>
803788
HTML
804789
end
@@ -813,11 +798,9 @@ def dest_file(file)
813798
it 'contains the breadcrumbs' do
814799
expect(contents).to include <<~HTML
815800
<div class="breadcrumbs">
816-
<span class="breadcrumb-link"><a href="index.html">Title</a></span>
817-
»
801+
<span class="breadcrumb-link"><a href="/guide/">Elastic Docs</a></span><span class="chevron-right">›</span>
802+
<span class="breadcrumb-link"><a href="index.html">Title</a></span><span class="chevron-right">›</span>
818803
<span class="breadcrumb-link"><a href="app.html">Foo</a></span>
819-
»
820-
<span class="breadcrumb-node">Foo 2</span>
821804
</div>
822805
HTML
823806
end

‎resources/asciidoctor/spec/docbook_compat_spec.rb

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,9 @@
9292
it "is wrapped in docbook's funny titlepage" do
9393
expect(converted).to include(<<~HTML)
9494
<div class="titlepage">
95+
<div class="breadcrumbs" id="title-page-breadcrumb">
96+
<span class="breadcrumb-link"><a href="/guide/">Elastic Docs</a></span>
97+
</div>
9598
<div>
9699
<div><h1 class="title"><a id="id-1"></a>Title</h1></div>
97100
</div>
@@ -114,6 +117,9 @@
114117
it "is wrapped in docbook's funny titlepage" do
115118
expect(converted).to include(<<~HTML)
116119
<div class="titlepage">
120+
<div class="breadcrumbs" id="title-page-breadcrumb">
121+
<span class="breadcrumb-link"><a href="/guide/">Elastic Docs</a></span>
122+
</div>
117123
<div>
118124
<div><h1 class="title"><a id="title-id"></a>Title</h1></div>
119125
</div>
@@ -150,6 +156,9 @@
150156
it "is wrapped in docbook's funny titlepage" do
151157
expect(converted).to include(<<~HTML)
152158
<div class="titlepage">
159+
<div class="breadcrumbs" id="title-page-breadcrumb">
160+
<span class="breadcrumb-link"><a href="/guide/">Elastic Docs</a></span>
161+
</div>
153162
<div>
154163
<div><h1 class="title"><a id="id-1"></a>Title</h1></div>
155164
</div>
@@ -354,6 +363,9 @@
354363
it 'includes the title and subtitle' do
355364
expect(converted).to include(<<~HTML)
356365
<div class="titlepage">
366+
<div class="breadcrumbs" id="title-page-breadcrumb">
367+
<span class="breadcrumb-link"><a href="/guide/">Elastic Docs</a></span>
368+
</div>
357369
<div>
358370
<div><h1 class="title"><a id="id-1"></a>Title</h1></div>
359371
<div><h2 class="subtitle">Subtitle</h2></div>
@@ -382,6 +394,9 @@
382394
it 'includes the title and subtitle' do
383395
expect(converted).to include(<<~HTML)
384396
<div class="titlepage">
397+
<div class="breadcrumbs" id="title-page-breadcrumb">
398+
<span class="breadcrumb-link"><a href="/guide/">Elastic Docs</a></span>
399+
</div>
385400
<div>
386401
<div><h1 class="title"><a id="id-1"></a><code class="literal">foo</code></h1></div>
387402
</div>

‎resources/web/style/base_styles.pcss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
}
55

66
hr {
7-
margin: 2em 0;
7+
margin: .5em 0;
88
}
99

1010
.blockquote {

‎resources/web/style/heading.pcss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
}
2222
h1 {
2323
font-size: 36px;
24-
margin: 10px 0 30px;
24+
margin: 10px 0 10px;
2525
a { font-weight: 300; }
2626
}
2727
h2 {
@@ -46,11 +46,11 @@
4646
h3 {
4747
margin: 56px 0 16px;
4848
}
49-
49+
5050
h4 {
5151
margin: 32px 0 12px;
5252
}
53-
53+
5454
h5, h6 {
5555
margin: 16px 0 5px;
5656
}

‎resources/web/style/nav.pcss

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,20 +23,34 @@
2323
}
2424

2525
.breadcrumbs {
26-
.breadcrumb-node {
27-
font-weight: 600;
28-
}
26+
font-size: 85%;
27+
margin-top: 10px;
28+
margin-bottom: 10px;
29+
padding-bottom: 10px;
30+
border-bottom: 1px dotted #ECECEC;
31+
}
32+
33+
#title-page-breadcrumb {
34+
border-bottom: none;
35+
padding-bottom: 0;
36+
}
37+
38+
.chevron-right {
39+
padding-left: 7px;
40+
padding-right: 3px;
41+
font-size: 14px;
42+
font-weight: 300;
2943
}
3044

3145
.navheader {
3246
border-bottom: 1px solid #ccc;
3347
padding-bottom: 5px;
34-
margin: 30px 0 20px;
35-
display: inline-block;
48+
margin: 0;
49+
display: none;
3650
width: 100%;
3751
}
3852
.navfooter {
39-
border-top: 1px solid #ccc;
53+
border-top: 1px dotted #E8E8E8;
4054
padding-top: 10px;
4155
margin: 60px 0 15px;
4256
}

‎resources/web/template.html

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
<!--© 2015-2022 Elasticsearch B.V. -->
4747
<!-- All Elastic documentation is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License. -->
4848
<!-- http://creativecommons.org/licenses/by-nc-nd/4.0/ -->
49-
49+
5050
<body>
5151
<!-- Google Tag Manager -->
5252
<script>dataLayer = [];</script><noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-58RLH5" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
@@ -77,19 +77,6 @@
7777
<div id='elastic-nav' style="display:none;"></div>
7878
<script src='https://www.elastic.co/elastic-nav.js'></script>
7979

80-
<!-- Subnav -->
81-
<div>
82-
<div>
83-
<div class="tertiary-nav d-none d-md-block">
84-
<div class="container">
85-
<div class="p-t-b-15 d-flex justify-content-between nav-container">
86-
<div class="breadcrum-wrapper"><span><a href="/guide/" style="font-size: 14px; font-weight: 600; color: #000;">Docs</a></span></div>
87-
</div>
88-
</div>
89-
</div>
90-
</div>
91-
</div>
92-
9380
<div class="main-container">
9481
<section id="content" >
9582
<div class="content-wrapper">

0 commit comments

Comments
 (0)