Skip to content

Commit 65a00f7

Browse files
nyamsprodnyamsprod
authored
Merge pull request thephpleague#378 from thephpleague/feature/add-docsearch
Adding docsearch to csv documentation
2 parents fee32bd + f2f4b24 commit 65a00f7

File tree

2 files changed

+80
-56
lines changed

2 files changed

+80
-56
lines changed

‎docs/_layouts/default.html‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
<link rel="icon" type="image/x-icon" href="//theme.thephpleague.com/img/favicon.ico" />
1818
<link rel="apple-touch-icon-precomposed" href="//theme.thephpleague.com/img/apple-touch-icon-precomposed.png">
1919
<link rel="stylesheet" href="//theme.thephpleague.com/css/all.css?2">
20-
<link rel="stylesheet" href="/custom.css?25">
20+
<link rel="stylesheet" href="/custom.css?26">
21+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
2122
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.data.project.google_analytics_tracking_id }}"></script>
2223
<script>
2324
window.dataLayer = window.dataLayer || [];
@@ -29,16 +30,14 @@
2930
<body>
3031
<header>
3132
<div class="header-content">
32-
<a class="logo" href="/">
33-
<span class="name"><em>League\</em>Csv</span>
34-
</a>
35-
36-
<nav>
33+
<h1 class="title"><a href="/"><span>League\</span>{{ site.data.project.title }}</a></h1>
34+
<div class="search"><input type="search" id="doc-search" placeholder="search the docs..."></div>
35+
<nav class="versions">
3736
<h2>{% if upgrading == true %}Notes{% else %}v{{ version }}{% endif %} &#9662;</h2>
3837
<ul>
39-
{% for v in site.data.menu.version %}
38+
{% for v in site.data.menu.version %}
4039
<li {% if version == v[0] and upgrading == false %}class="selected"{% endif %}><a href="/{{ v[0] }}/">v{{ v[0] }}</a></li>
41-
{% endfor %}
40+
{% endfor %}
4241
<li {% if upgrading == true %}class="selected"{% endif %}><a href="/releases/">Notes</a></li>
4342
</ul>
4443
</nav>
@@ -113,5 +112,14 @@ <h2>{{ section[0] }}</h2>
113112
<span>Site design by <a href="//reinink.ca">Jonathan Reinink</a> and <a href="//nyamsprod.com">Ignace Nyamagana Butera</a>.</span>
114113
</footer>
115114
<script src="/custom.js?4"></script>
115+
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
116+
<script> docsearch({
117+
apiKey: '63ba748e8f5bceb91934667c118972d0',
118+
indexName: 'thephpleague_csv',
119+
inputSelector: '#doc-search',
120+
algoliaOptions: { 'facetFilters': ["version:{{ version }}"] },
121+
debug: false // Set debug to true if you want to inspect the dropdown
122+
});
123+
</script>
116124
</body>
117125
</html>

‎docs/custom.css‎

Lines changed: 64 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,57 @@ header {
2424
background:#fff;
2525
}
2626

27-
header nav {
27+
header .header-content:after {
28+
content: "";
29+
display: table;
30+
clear: both;
31+
}
32+
33+
header .title {
34+
float: left;
35+
text-align:left;
36+
font-family: "Museo 100";
37+
font-weight: bold;
38+
margin:0;
39+
padding:0;
40+
width:96px;
41+
}
42+
43+
header .title a {
44+
color:#ff4143;
45+
text-decoration: none;
46+
}
47+
48+
header .title a span {
49+
color:#1672ce;
50+
}
51+
52+
header .search {
53+
float:left;
54+
text-align:right;
55+
width:calc(100% - 175px);
56+
padding-right:.3em;
57+
}
58+
59+
#doc-search {
60+
font-family: "Museo Sans 500";
61+
font-weight: normal;
62+
font-size: 16px;
63+
border:1px solid #e8e8e8;
64+
background-color:#f4f4f4;
65+
padding:.5em 1em;
66+
margin-left:.3em;
67+
border-radius: .3em;
68+
}
69+
70+
header .versions {
71+
float:left;
2872
display:none;
2973
font-family: "Museo Sans 500";
3074
font-weight: normal;
3175
}
3276

33-
header nav h2 {
77+
header .versions h2 {
3478
font-family: "Museo Sans 500";
3579
font-weight: normal;
3680
font-size: 16px;
@@ -45,26 +89,25 @@ header nav h2 {
4589
cursor: pointer;
4690
}
4791

48-
header nav ul {
92+
header .versions ul {
4993
display:none;
50-
z-index: 5;
5194
margin:0;
5295
padding:0;
5396
list-style:none;
5497
width: 75px;
5598
}
5699

57-
header nav .show {
100+
header .versions .show {
58101
display:block;
59102
}
60103

61-
header nav li {
104+
header .versions li {
62105
margin:0;
63106
padding:0;
64107
text-align: center;
65108
}
66109

67-
header nav a {
110+
header .versions a {
68111
display:block;
69112
margin:0;
70113
padding:.5em .3em;
@@ -75,32 +118,19 @@ header nav a {
75118
border-width:0 1px 1px;
76119
}
77120

78-
header nav a:hover {
121+
header .versions a:hover {
79122
background:#f1f1f1;
80123
}
81124

82-
header nav li:first-of-type a {
125+
header .versions li:first-of-type a {
83126
border-top-width: 1px;
84127
border-radius:.3em .3em 0 0;
85128
}
86129

87-
header nav li:last-of-type a {
130+
header .versions li:last-of-type a {
88131
border-radius:0 0 .3em .3em;
89132
}
90133

91-
header .logo {
92-
text-align:left;
93-
}
94-
95-
header .logo .name {
96-
font-size:38px;
97-
}
98-
99-
header .logo em {
100-
color:#777;
101-
font-style:normal;
102-
}
103-
104134
label[for=menu] {
105135
position:fixed;
106136
z-index: 2;
@@ -243,17 +273,13 @@ main menu ul li.selected a:hover {
243273
}
244274
}
245275

246-
@media screen and (min-width: 404px) {
247-
header nav {
248-
display:block;
249-
position:fixed;
250-
z-index: 2;
251-
top:20px;
252-
right:50px;
253-
padding:0;
254-
margin:0;
276+
@media screen and (max-width: 400px) {
277+
header .title {
278+
display: none;
255279
}
280+
}
256281

282+
@media screen and (min-width: 404px) {
257283
main menu .versions-small {
258284
display:none;
259285
}
@@ -271,22 +297,8 @@ main menu ul li.selected a:hover {
271297
padding:1em;
272298
}
273299

274-
header .header-content:after {
275-
content: "";
276-
display: table;
277-
clear: both;
278-
}
279-
280-
header .logo {
281-
float:left;
282-
text-align:right;
283-
}
284-
285-
header nav {
286-
position: static;
287-
float:right;
288-
margin:0;
289-
padding:0;
300+
header .versions {
301+
display: block;
290302
}
291303

292304
label[for=menu] {
@@ -301,6 +313,10 @@ main menu ul li.selected a:hover {
301313
border-right: 1px dashed #cfe4f9;
302314
}
303315

316+
main menu .versions-small {
317+
display:none;
318+
}
319+
304320
main article p,
305321
main article li {
306322
font-size:.9em;

0 commit comments

Comments
 (0)