1
0
Fork 0
This commit is contained in:
Sylvain Pace 2018-08-31 10:13:04 +02:00
parent a8ebd68384
commit 69f5a9a109
6 changed files with 40 additions and 40 deletions

View file

@ -3,10 +3,10 @@ layout: two-columns
title: Dropdown
---
Once your algolia DocSearch index is ready, correctly set up and filled with the
Once your Algolia DocSearch index is ready, correctly set up and filled with the
right data, you will need to integrate our dedicated Search-UI. To add the
dropdown of results below your search input, you'll have to include the
docsearch library into your website as per the following example. Your `apiKey`
dropdown of results below your search input, you'll have to include our
DocSearch library into your website as per the following example. Your `apiKey`
and `indexName` credentials will be given to you as soon as we've created your
config.

View file

@ -10,7 +10,7 @@ In this section you will learn how do we build a DocSearch index from your page.
<img src="./assets/how_do_we_build_docsearch_index_1.png" alt="1st step" class="mt-2"/>
_Note: We would rather avoid useless js rendering. Every used information should
be avaible without any client side rendering. You can use `curl` in order to
be avaible without any client-side rendering. You can use `curl` in order to
have a better idea of how does it look._
### We extract the payload thank to your set of `selectors`

View file

@ -12,7 +12,7 @@ Each crawl will begin its journey by the value of the `start_urls` you have in
your config. It will read those pages and recursively extract and follow every
links in those pages until it has browsed every compliant pages.
If you have explictly defined a `sitemap.xml`, our crawler will scrap every
If you have explicitly defined a `sitemap.xml`, our crawler will scrap every
provided and compliant pages. We do recommend to use [a sitemap][1] since it
clearly exposes URLs to crawl and avoid missing page that aren't linked from
another one.
@ -20,21 +20,21 @@ another one.
## Extracting content
Building records using the scraper is pretty intuitive. According to your
settings, we extract the payload of your webpage and index it, preserving your
settings, we extract the payload of your web page and index it, preserving your
data's structure. This is achieved in a simple way:
- We **read top down** your web page following your HTML flow and pick out your
matching elements according their **levels** based on the `selectors_level`
defined.
- We **read top down** your web page following your HTML flow and pick your
matching elements out according their **levels** based on the
`selectors_level` defined.
- We create a record for each paragraph along with its hierarchical path. This
construction is based on their **time of appearance** along the flow.
- We **index** these records with the appropriate global settings (e.g.
metadata, tags, etc.)
_**Note:** The above process performs sanity tests as it scrapes, in order to
detect errors. If indeed there are any serious warnings, it will abort and
therefore not overwrite your current index. These checks ensure that your
dedicated index isn't flushed._
detect errors. If indeed there are any serious warnings, it will abort and hence
not overwrite your current index. These checks ensure that your dedicated index
isn't flushed._
## Ranking records
@ -50,10 +50,10 @@ position of the matching words. The sooner they appear within the HTML flow, the
higher the record will be ranked.
The relevancy is based on several factors and can be customised according to the
algolia tie-breaking method.
Algolia tie-breaking method.
You can boost pages depending ont their URLs. This is done from the `start_urls`
and its `page_rank` attributes. It is a numeric value, default to 0. The bigger
and its `page_rank` attributes. It is a numeric value, default to 0. The higher
it is, the higher results from the matching pages will be ranked. For example
all pages with a `page_rank` of 5 will be returned before pages with a
`page_rank` of 1.

View file

@ -20,21 +20,22 @@ input {
padding: 0.3rem 0 0 0;
}
/* Global styles */
a,
a:active {
@apply .cursor-pointer;
@apply .text-nebula .no-underline;
}
a:hover,
a:focus {
@apply .underline;
}
code {
@apply .code .text-mars-2;
@apply .p-0x;
@apply .bg-moon;
@apply .rounded-1;
font-size: .9em;
}
}

View file

@ -88,9 +88,9 @@ other display.
## Advanced styling
If you want to do more heavy styling, feel free to have a look at the [SCSS
source code][4]. `_variables.scss` contains all the default theming, sizing and
breakpoints.
Whether you would like to do more heavy styling, feel free to have a look at the
[SCSS source code][4]. `_variables.scss` contains all the default theming,
sizing and breakpoints.
You can generate your own CSS file by cloning the repository and running
`yarn run build:css`. The resulting file will be generated in `./dist/cdn`, and

View file

@ -31,16 +31,16 @@ Documentation starts by explaining generic concepts first and then goes deeper
into specifics. This is represented in your HTML markup by the hierarchy of
headings you're using. For example, concepts discussed under a `<h4>` are more
specific than concepts discussed under a `<h2>` in the same page. The sooner the
information comes up within the page, the higher it is ranked.
information comes up within the page, the higher is it ranked.
DocSearch uses this structure to fine-tune the relevance of results as well as
to provide potential filtering. Documentation that follow this pattern often
have better relevance of search results.
Finding the right depth of your documentation tree and how to split-up your
content is one of the most complex tasks. For large documents, we usually
recommend having 4 levels (from lvl0 until lvl3). Three different levels should
be the minimum.
content is one of the most complex tasks. For large documents, we recommend
having 4 levels (from lvl0 until lvl3). Three different levels should be a
minimum.
\_Note that you don't have to use `<hX>` tags and can use
`<span class="title-X">` for example instead. Your will need to update your set
@ -82,20 +82,20 @@ used as part of a CSS selector.
## Consistency of your content
Consistency is a pillar of a meaningful documentation. In addition to increasing
the **intelligibility** of a document it also shortens the time required for a
user to find the coveted information. The document's **topic** should be easily
**identifiable** and its **outline** sharply demarcated.
Consistency is a pillar of a meaningful documentation. To increase the
**intelligibility** of a document it also shortens the time required for a user
to find the coveted information. The document's **topic** should be
**identifiable** and its **outline** demarcated.
The hierarchy should always have the same size. Try to **avoid orphan records**
such like the implicit introduction/conclusion or asides. The selectors must be
efficient for **every document** and highlight the proper hierarchy. They need
to match only the coveted elements depending on their level. Be careful to avoid
the **edge effect** by matching unexpected **superfluous elements**.
to match the coveted elements depending on their level. Be careful to avoid the
**edge effect** by matching unexpected **superfluous elements**.
Selectors should only match information from **real document webpage** and
remain ineffective for others ones (e.g., landing page, table of content, etc.).
We urge the maintainer to define a **dedicated class** for the **main DOM
Selectors should match information from **real document web page** and stay
ineffective for others ones (e.g., landing page, table of content, etc.). We
urge the maintainer to define a **dedicated class** for the **main DOM
container** that includes the actual document content such as
`.docSearch-content`
@ -109,15 +109,14 @@ experience**. The **way to find the information** plays a key role in
## Avoid duplicates by promoting unicity
The more time-consuming reading documentation is, the more painful and reluctant
its use will be. You must avoid hazy points or catch-all. In addition to it
being unhelpful, the catch-all document may be **confusing** and
**counterproductive**.
its use will be. You must avoid hazy points or catch-all. With being unhelpful,
the catch-all document may be **confusing** and **counterproductive**.
Last but not least duplicates introduce noise and mislead users. This is why you
should always focus on the relevant content and avoid duplicating content within
your site (e.g. landing page which contains all of the information, summing up,
etc.). In cases where the duplicates's existence is expected since it belongs to
another dataset (e.g. a different version), you should use
Duplicates introduce noise and mislead users. This is why you should always
focus on the relevant content and avoid duplicating content within your site
(for example landing page which contains all information, summing up, etc.). In
cases where the duplicates's existence is expected since it belongs to another
dataset (for example a different version), you should use
[facets](https://www.algolia.com/doc/guides/searching/faceting/).
## Conciseness