Skip to content

Commit 13b7ce7

Browse files
JoelMarceyJoelMarcey
committed
[WIP - DO NOT MERGE YET] Add search to pytorch.org
1 parent 521eca6 commit 13b7ce7

File tree

9 files changed

+235
-4
lines changed

9 files changed

+235
-4
lines changed

‎.ruby-version

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
2.5.1
1+
2.5.3

‎Gemfile

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
source "https://rubygems.org"
2-
ruby "2.5.1"
2+
ruby "2.5.3"
33

44
group :jekyll_plugins do
55
gem "github-pages"

‎Gemfile.lock

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -253,7 +253,7 @@ DEPENDENCIES
253253
jekyll-paginate-v2
254254

255255
RUBY VERSION
256-
ruby 2.5.1p57
256+
ruby 2.5.3p105
257257

258258
BUNDLED WITH
259-
1.16.3
259+
1.17.1

‎_includes/head.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,5 @@
2020
{% include analytics.html %}
2121
{% include pixel.html %}
2222
{% endif %}
23+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
2324
</head>

‎_includes/main_menu.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,14 @@
3131
<li>
3232
<a href="{{ site.external_urls.github }}">GitHub</a>
3333
</li>
34+
35+
<li className="navSearchWrapper reactNavSearchWrapper" key="search">
36+
<input
37+
id="search_input_react"
38+
type="text"
39+
placeholder="Search"
40+
title="Search"
41+
/>
42+
</li>
3443
</ul>
3544
</div>

‎_includes/nav.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,12 @@
77

88
<a class="main-menu-open-button" href="#" data-behavior="open-mobile-menu"></a>
99
</div>
10+
11+
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
12+
<script type="text/javascript"> docsearch({
13+
apiKey: 'e3b73ac141dff0b0fd27bdae9055bc73',
14+
indexName: 'pytorch',
15+
inputSelector: '#search_input_react',
16+
debug: false // Set debug to true if you want to inspect the dropdown
17+
});
18+
</script>

‎_sass/_variables.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ $command_block_black: #6c6c6d;
1717
$smoky_grey: #CCCDD1;
1818
$medium_smoky_grey: #CCCDD1;
1919
$code_link_color: #4974D1;
20+
$search_background_color: #000000;
2021

2122
$desktop_header_height: 90px;
2223
$mobile_header_height: 68px;

‎_sass/search.scss

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
/* Search */
2+
input[type='search'] {
3+
-moz-appearance: none;
4+
-webkit-appearance: none;
5+
}
6+
7+
.navSearchWrapper {
8+
align-items: center;
9+
align-self: center;
10+
display: flex;
11+
justify-content: center;
12+
padding-left: 10px;
13+
position: absolute;
14+
right: 10px;
15+
top: 15px;
16+
}
17+
18+
.navSearchWrapper:before {
19+
border: 3px solid #e5e5e5;
20+
border-radius: 50%;
21+
content: ' ';
22+
display: block;
23+
height: 6px;
24+
left: 15px;
25+
position: absolute;
26+
top: 50%;
27+
transform: translateY(-58%);
28+
width: 6px;
29+
z-index: 1;
30+
}
31+
32+
.navSearchWrapper:after {
33+
background: #e5e5e5;
34+
content: ' ';
35+
height: 7px;
36+
left: 24px;
37+
position: absolute;
38+
top: 55%;
39+
transform: rotate(-45deg);
40+
width: 3px;
41+
z-index: 1;
42+
}
43+
44+
.navSearchWrapper .aa-dropdown-menu {
45+
background: #f9f9f9;
46+
border: 3px solid rgba(57, 57, 57, 0.25);
47+
color: #393939;
48+
font-size: 14px;
49+
left: auto !important;
50+
line-height: 1.2em;
51+
right: 0 !important;
52+
}
53+
54+
.navSearchWrapper
55+
.aa-dropdown-menu
56+
.algolia-docsearch-suggestion--category-header {
57+
background: $search_background_color;
58+
color: white;
59+
font-size: 14px;
60+
font-weight: 400;
61+
}
62+
63+
.navSearchWrapper
64+
.aa-dropdown-menu
65+
.algolia-docsearch-suggestion--category-header
66+
.algolia-docsearch-suggestion--highlight {
67+
background-color: $search_background_color;
68+
color: #fff;
69+
}
70+
71+
.navSearchWrapper
72+
.aa-dropdown-menu
73+
.algolia-docsearch-suggestion--title
74+
.algolia-docsearch-suggestion--highlight,
75+
.navSearchWrapper
76+
.aa-dropdown-menu
77+
.algolia-docsearch-suggestion--subcategory-column
78+
.algolia-docsearch-suggestion--highlight {
79+
color: $search_background_color;
80+
}
81+
82+
.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion__secondary,
83+
.navSearchWrapper
84+
.aa-dropdown-menu
85+
.algolia-docsearch-suggestion--subcategory-column {
86+
border-color: rgba(57, 57, 57, 0.3);
87+
}
88+
89+
input#search_input_react {
90+
background-color: rgba(0, 0, 0, 0.2);
91+
border: none;
92+
border-radius: 20px;
93+
color: #fff;
94+
font-size: 14px;
95+
font-weight: 300;
96+
line-height: 20px;
97+
outline: none;
98+
padding-left: 25px;
99+
position: relative;
100+
-webkit-transition: 0.5s width ease;
101+
-moz-transition: 0.5s width ease;
102+
-o-transition: 0.5s width ease;
103+
transition: 0.5s width ease;
104+
width: 170px;
105+
}
106+
107+
input#search_input_react:focus,
108+
input#search_input_react:active {
109+
color: #fff;
110+
width: 220px;
111+
}
112+
.navigationSlider .slidingNav .navSearchWrapper .algolia-docsearch-footer a {
113+
height: auto;
114+
}
115+
@media only screen and (max-width: 735px) {
116+
.navSearchWrapper {
117+
width: 40%;
118+
}
119+
}
120+
121+
input::-webkit-input-placeholder {
122+
color: #e5e5e5;
123+
}
124+
125+
input::-moz-placeholder {
126+
color: #e5e5e5;
127+
}
128+
129+
input::placeholder {
130+
color: #e5e5e5;
131+
}
132+
133+
.hljs {
134+
padding: 1.25rem 1.5rem;
135+
}
136+
137+
@media only screen and (max-width: 1024px) {
138+
.reactNavSearchWrapper input#search_input_react {
139+
background-color: rgba(242, 196, 178, 0.25);
140+
border: none;
141+
border-radius: 20px;
142+
box-sizing: border-box;
143+
color: #393939;
144+
font-size: 14px;
145+
line-height: 20px;
146+
outline: none;
147+
padding-left: 25px;
148+
position: relative;
149+
transition: background-color 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55),
150+
width 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55), color 0.2s ease;
151+
width: 100%;
152+
}
153+
154+
.reactNavSearchWrapper input#search_input_react:focus,
155+
.reactNavSearchWrapper input#search_input_react:active {
156+
background-color: $search_background_color;
157+
color: #fff;
158+
}
159+
160+
.reactNavSearchWrapper .algolia-docsearch-suggestion--subcategory-inline {
161+
display: none;
162+
}
163+
164+
.reactNavSearchWrapper > span {
165+
width: 100%;
166+
}
167+
168+
.reactNavSearchWrapper .aa-dropdown-menu {
169+
font-size: 12px;
170+
line-height: 2em;
171+
padding: 0;
172+
border-width: 1px;
173+
min-width: 500px;
174+
}
175+
.reactNavSearchWrapper .algolia-docsearch-suggestion__secondary {
176+
border-top: none;
177+
}
178+
.aa-suggestions {
179+
min-height: 140px;
180+
max-height: 60vh;
181+
-webkit-overflow-scrolling: touch;
182+
overflow-y: scroll;
183+
}
184+
}
185+
186+
@media only screen and (min-width: 1024px) {
187+
.navSearchWrapper {
188+
padding-left: 10px;
189+
position: relative;
190+
right: auto;
191+
top: auto;
192+
}
193+
194+
.navSearchWrapper .algolia-autocomplete {
195+
display: block;
196+
}
197+
}
198+
199+
@media only screen and (max-width: 735px) {
200+
.reactNavSearchWrapper .aa-dropdown-menu {
201+
min-width: 400px;
202+
}
203+
}
204+
@media only screen and (max-width: 475px) {
205+
.reactNavSearchWrapper .aa-dropdown-menu {
206+
min-width: 300px;
207+
}
208+
}
209+
210+
/* End of Search */

‎assets/main.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,4 @@ $baseurl:"{{ site.baseurl }}";
2525
@import "quick-start-module";
2626
@import "blog";
2727
@import "similar-posts-module";
28+
@import "search";

0 commit comments

Comments
 (0)