Updating documentation website
This commit is contained in:
Pixelastic
parent
d255a19e0f
commit
fae3801040
@ -236,17 +236,16 @@ exist yet.</p>
|
||||
<p>In that file, we’ll add the following content. It’s a lot of code in one go, but
|
||||
don’t worry, we’ll explain it all right after.</p>
|
||||
<pre class="code-sample cm-s-mdn-like codeMirror htmlmixed" data-code-type="Code"><div class="code-wrap"><code><span class="cm-comment"><!-- Including InstantSearch.js library and styling --></span>
|
||||
<span class="cm-tag cm-bracket"><</span><span class="cm-tag">script</span> <span class="cm-attribute">src</span>=<span class="cm-string">"https://cdn.jsdelivr.net/npm/instantsearch.js@2.5.1"</span><span class="cm-tag cm-bracket">></span><span class="cm-tag cm-bracket"></</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">></span>
|
||||
<span class="cm-tag cm-bracket"><</span><span class="cm-tag">link</span> <span class="cm-attribute">rel</span>=<span class="cm-string">"stylesheet"</span> <span class="cm-attribute">type</span>=<span class="cm-string">"text/css"</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://cdn.jsdelivr.net/npm/instantsearch.js@2.5.1/dist/instantsearch.min.css"</span><span class="cm-tag cm-bracket">></span>
|
||||
<span class="cm-tag cm-bracket"><</span><span class="cm-tag">link</span> <span class="cm-attribute">rel</span>=<span class="cm-string">"stylesheet"</span> <span class="cm-attribute">type</span>=<span class="cm-string">"text/css"</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://cdn.jsdelivr.net/npm/instantsearch.js@2.5.1/dist/instantsearch-theme-algolia.min.css"</span><span class="cm-tag cm-bracket">></span>
|
||||
<span class="cm-tag cm-bracket"><</span><span class="cm-tag">script</span> <span class="cm-attribute">src</span>=<span class="cm-string">"https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.js"</span><span class="cm-tag cm-bracket">></span><span class="cm-tag cm-bracket"></</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">></span>
|
||||
<span class="cm-tag cm-bracket"><</span><span class="cm-tag">link</span> <span class="cm-attribute">rel</span>=<span class="cm-string">"stylesheet"</span> <span class="cm-attribute">type</span>=<span class="cm-string">"text/css"</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.css"</span><span class="cm-tag cm-bracket">></span>
|
||||
<span class="cm-tag cm-bracket"><</span><span class="cm-tag">link</span> <span class="cm-attribute">rel</span>=<span class="cm-string">"stylesheet"</span> <span class="cm-attribute">type</span>=<span class="cm-string">"text/css"</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch-theme-algolia.min.css"</span><span class="cm-tag cm-bracket">></span>
|
||||
|
||||
<span class="cm-tag cm-bracket"><</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">></span>
|
||||
<span class="cm-comment">// Instanciating InstantSearch.js with Algolia credentials</span>
|
||||
<span class="cm-keyword">const</span> <span class="cm-def">search</span> <span class="cm-operator">=</span> <span class="cm-variable">instantsearch</span>({
|
||||
<span class="cm-property">appId</span>: <span class="cm-string">'{{ site.algolia.application_id }}'</span>,
|
||||
<span class="cm-property">indexName</span>: <span class="cm-string">'{{ site.algolia.index_name }}'</span>,
|
||||
<span class="cm-property">apiKey</span>: <span class="cm-string">'{{ site.algolia.search_only_api_key }}'</span>,
|
||||
<span class="cm-property">poweredBy</span>: <span class="cm-atom">true</span> <span class="cm-comment">// This is required if you're on the free Community plan</span>
|
||||
<span class="cm-property">apiKey</span>: <span class="cm-string">'{{ site.algolia.search_only_api_key }}'</span>
|
||||
});
|
||||
|
||||
<span class="cm-comment">// Adding searchbar and results widgets</span>
|
||||
@ -365,17 +364,16 @@ highlighted headings, and add it to our template only when not empty.</p>
|
||||
directly to the closest matching heading.</p>
|
||||
<h3 id="final-code">Final code <a class="anchor" href="blog.html#final-code" aria-hidden="true"></a></h3>
|
||||
<p>Here is the complete new version of the <code>_includes/algolia.html</code> file.</p>
|
||||
<pre class="code-sample cm-s-mdn-like codeMirror htmlmixed" data-code-type="Code"><div class="code-wrap"><code><span class="cm-tag cm-bracket"><</span><span class="cm-tag">script</span> <span class="cm-attribute">src</span>=<span class="cm-string">"https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.js"</span><span class="cm-tag cm-bracket">></span><span class="cm-tag cm-bracket"></</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">></span>
|
||||
<pre class="code-sample cm-s-mdn-like codeMirror htmlmixed" data-code-type="Code"><div class="code-wrap"><code><span class="cm-tag cm-bracket"><</span><span class="cm-tag">script</span> <span class="cm-attribute">src</span>=<span class="cm-string">"https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.js"</span><span class="cm-tag cm-bracket">></span><span class="cm-tag cm-bracket"></</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">></span>
|
||||
<span class="cm-tag cm-bracket"><</span><span class="cm-tag">script</span> <span class="cm-attribute">src</span>=<span class="cm-string">"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"</span><span class="cm-tag cm-bracket">></span><span class="cm-tag cm-bracket"></</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">></span>
|
||||
<span class="cm-tag cm-bracket"><</span><span class="cm-tag">link</span> <span class="cm-attribute">rel</span>=<span class="cm-string">"stylesheet"</span> <span class="cm-attribute">type</span>=<span class="cm-string">"text/css"</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch.min.css"</span><span class="cm-tag cm-bracket">></span>
|
||||
<span class="cm-tag cm-bracket"><</span><span class="cm-tag">link</span> <span class="cm-attribute">rel</span>=<span class="cm-string">"stylesheet"</span> <span class="cm-attribute">type</span>=<span class="cm-string">"text/css"</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://cdn.jsdelivr.net/npm/instantsearch.js@2.3.3/dist/instantsearch-theme-algolia.min.css"</span><span class="cm-tag cm-bracket">></span>
|
||||
<span class="cm-tag cm-bracket"><</span><span class="cm-tag">link</span> <span class="cm-attribute">rel</span>=<span class="cm-string">"stylesheet"</span> <span class="cm-attribute">type</span>=<span class="cm-string">"text/css"</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.css"</span><span class="cm-tag cm-bracket">></span>
|
||||
<span class="cm-tag cm-bracket"><</span><span class="cm-tag">link</span> <span class="cm-attribute">rel</span>=<span class="cm-string">"stylesheet"</span> <span class="cm-attribute">type</span>=<span class="cm-string">"text/css"</span> <span class="cm-attribute">href</span>=<span class="cm-string">"https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch-theme-algolia.min.css"</span><span class="cm-tag cm-bracket">></span>
|
||||
|
||||
<span class="cm-tag cm-bracket"><</span><span class="cm-tag">script</span><span class="cm-tag cm-bracket">></span>
|
||||
<span class="cm-keyword">const</span> <span class="cm-def">search</span> <span class="cm-operator">=</span> <span class="cm-variable">instantsearch</span>({
|
||||
<span class="cm-property">appId</span>: <span class="cm-string">'{{ site.algolia.application_id }}'</span>,
|
||||
<span class="cm-property">apiKey</span>: <span class="cm-string">'{{ site.algolia.search_only_api_key }}'</span>,
|
||||
<span class="cm-property">indexName</span>: <span class="cm-string">'{{ site.algolia.index_name }}'</span>,
|
||||
<span class="cm-property">poweredBy</span>: <span class="cm-atom">true</span> <span class="cm-comment">// This is required if you're on the free Community plan</span>
|
||||
<span class="cm-property">indexName</span>: <span class="cm-string">'{{ site.algolia.index_name }}'</span>
|
||||
});
|
||||
|
||||
<span class="cm-keyword">const</span> <span class="cm-def">hitTemplate</span> <span class="cm-operator">=</span> <span class="cm-keyword">function</span>(<span class="cm-def">hit</span>) {
|
||||
@ -383,15 +381,18 @@ directly to the closest matching heading.</p>
|
||||
<span class="cm-keyword">if</span> (<span class="cm-variable-2">hit</span>.<span class="cm-property">date</span>) {
|
||||
<span class="cm-variable-2">date</span> <span class="cm-operator">=</span> <span class="cm-variable">moment</span>.<span class="cm-property">unix</span>(<span class="cm-variable-2">hit</span>.<span class="cm-property">date</span>).<span class="cm-property">format</span>(<span class="cm-string">'MMM D, YYYY'</span>);
|
||||
}
|
||||
|
||||
<span class="cm-keyword">let</span> <span class="cm-def">url</span> <span class="cm-operator">=</span> <span class="cm-string-2">`{{ site.baseurl }}${</span><span class="cm-variable-2">hit</span>.<span class="cm-property">url</span><span class="cm-string-2">}</span><span class="cm-string-2">#${</span><span class="cm-variable-2">hit</span>.<span class="cm-property">anchor</span><span class="cm-string-2">}</span><span class="cm-string-2">`</span>;
|
||||
|
||||
<span class="cm-keyword">const</span> <span class="cm-def">title</span> <span class="cm-operator">=</span> <span class="cm-variable-2">hit</span>.<span class="cm-property">_highlightResult</span>.<span class="cm-property">title</span>.<span class="cm-property">value</span>;
|
||||
|
||||
<span class="cm-keyword">let</span> <span class="cm-def">breadcrumbs</span> <span class="cm-operator">=</span> <span class="cm-string">''</span>;
|
||||
<span class="cm-keyword">if</span> (<span class="cm-variable-2">hit</span>.<span class="cm-property">_highlightResult</span>.<span class="cm-property">headings</span>) {
|
||||
<span class="cm-variable-2">breadcrumbs</span> <span class="cm-operator">=</span> <span class="cm-variable-2">hit</span>.<span class="cm-property">_highlightResult</span>.<span class="cm-property">headings</span>.<span class="cm-property">map</span>(<span class="cm-def">match</span> <span class="cm-operator">=></span> {
|
||||
<span class="cm-keyword">return</span> <span class="cm-string-2">`<span class="post-breadcrumb">${</span><span class="cm-variable-2">match</span>.<span class="cm-property">value</span><span class="cm-string-2">}</span><span class="cm-string-2"></span>`</span>
|
||||
}).<span class="cm-property">join</span>(<span class="cm-string">' > '</span>)
|
||||
}
|
||||
|
||||
<span class="cm-keyword">const</span> <span class="cm-def">content</span> <span class="cm-operator">=</span> <span class="cm-variable-2">hit</span>.<span class="cm-property">_highlightResult</span>.<span class="cm-property">html</span>.<span class="cm-property">value</span>;
|
||||
|
||||
<span class="cm-keyword">return</span> <span class="cm-string-2">`</span>
|
||||
@ -408,7 +409,8 @@ directly to the closest matching heading.</p>
|
||||
<span class="cm-variable">search</span>.<span class="cm-property">addWidget</span>(
|
||||
<span class="cm-variable">instantsearch</span>.<span class="cm-property">widgets</span>.<span class="cm-property">searchBox</span>({
|
||||
<span class="cm-property">container</span>: <span class="cm-string">'#search-searchbar'</span>,
|
||||
<span class="cm-property">placeholder</span>: <span class="cm-string">'Search into posts...'</span>
|
||||
<span class="cm-property">placeholder</span>: <span class="cm-string">'Search into posts...'</span>,
|
||||
<span class="cm-property">poweredBy</span>: <span class="cm-atom">true</span> <span class="cm-comment">// This is required if you're on the free Community plan</span>
|
||||
})
|
||||
);
|
||||
|
||||
|
||||
@ -197,9 +197,6 @@ records that way allows for a more fine-tuned relevance even on long pages.</p>
|
||||
<span class="cm-string">"title"</span>: <span class="cm-string">"New experimental version of Hacker News Search built with Algolia"</span>,
|
||||
<span class="cm-string">"type"</span>: <span class="cm-string">"post"</span>,
|
||||
<span class="cm-string">"url"</span>: <span class="cm-string">"/2015/01/12/try-new-experimental-version-hn-search.html"</span>,
|
||||
<span class="cm-string">"draft"</span>: <span class="cm-atom">false</span>,
|
||||
<span class="cm-string">"layout"</span>: <span class="cm-string">"post"</span>,
|
||||
<span class="cm-string">"ext"</span>: <span class="cm-string">".md"</span>,
|
||||
<span class="cm-string">"date"</span>: <span class="cm-number">1421017200</span>,
|
||||
<span class="cm-string">"excerpt_html"</span>: <span class="cm-string">"<p>Exactly a year ago, we began to power […]</p>"</span>,
|
||||
<span class="cm-string">"excerpt_text"</span>: <span class="cm-string">"Exactly a year ago, we began to power […]"</span>,
|
||||
|
||||
@ -239,9 +239,6 @@ you used to define them should now look like this:</p>
|
||||
<span class="cm-string">"title"</span>: <span class="cm-string">"New experimental version of Hacker News Search built with Algolia"</span>,
|
||||
<span class="cm-string">"type"</span>: <span class="cm-string">"post"</span>,
|
||||
<span class="cm-string">"url"</span>: <span class="cm-string">"/2015/01/12/try-new-experimental-version-hn-search.html"</span>,
|
||||
<span class="cm-string">"draft"</span>: <span class="cm-atom">false</span>,
|
||||
<span class="cm-string">"layout"</span>: <span class="cm-string">"post"</span>,
|
||||
<span class="cm-string">"ext"</span>: <span class="cm-string">".md"</span>,
|
||||
<span class="cm-string">"date"</span>: <span class="cm-number">1421017200</span>,
|
||||
<span class="cm-string">"excerpt_html"</span>: <span class="cm-string">"<p>Exactly a year ago, we began to power […]</p>"</span>,
|
||||
<span class="cm-string">"excerpt_text"</span>: <span class="cm-string">"Exactly a year ago, we began to power […]"</span>,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user